/*
 * EXT:a11y baseline stylesheet
 *
 * Hand-maintained (this folder is NOT a build output). Deliberately design-free: only the
 * rules that the markup of this extension needs to *work* accessibly. Every rule uses low
 * specificity (single class or :where()) so a project stylesheet loaded afterwards wins
 * without !important. Switch the file off via site setting a11y.css.include when the project
 * bundles these rules itself.
 */

/* ------------------------------------------------------------------------------------------
 * Visually hidden text
 * WHAT: keeps text in the accessibility tree but removes it from the visual layout.
 * WHY:  used for link hints, error prefixes, hidden legends. display:none / visibility:hidden
 *       would remove the text for screen readers as well.
 * SOURCE: WebAIM "Invisible Content Just for Screen Reader Users" (clip pattern),
 *         WCAG 2.2 technique C7. `.visually-hidden` is provided too because EXT:form core
 *         templates use that (Bootstrap) class name.
 * ---------------------------------------------------------------------------------------- */
.a11y-visually-hidden,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ------------------------------------------------------------------------------------------
 * Focus indicator fallback
 * WHY:  WCAG 2.2 SC 2.4.7 Focus Visible (and SC 2.4.11 Focus Not Obscured). Many resets
 *       remove the browser outline; this restores a two-colour ring that stays visible on
 *       light and dark backgrounds. :where() keeps specificity at zero so any project rule
 *       overrides it. :focus-visible avoids rings on mouse clicks (WCAG 2.2 SC 2.4.13 AAA
 *       recommends >= 2px thickness with 3:1 contrast - the double ring satisfies that).
 * ---------------------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/* ------------------------------------------------------------------------------------------
 * Table scroll region (Templates/Table + RteTableProcessor)
 * WHY:  WCAG 2.2 SC 1.4.10 Reflow - the table scrolls, not the page. The region is focusable
 *       (tabindex=0) so keyboard users can scroll it (SC 2.1.1); the focus ring above applies.
 * SOURCE: Adrian Roselli, "Under-Engineered Responsive Tables".
 * ---------------------------------------------------------------------------------------- */
.a11y-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.a11y-table-scroll > table {
    /* keep column widths readable instead of squeezing to the viewport */
    min-width: max-content;
}

/* ------------------------------------------------------------------------------------------
 * Media transcript (Partials/Media/Type/Video|Audio)
 * WHY:  details/summary is a native disclosure widget; only spacing is set so the summary keeps
 *       its button semantics and the project's typography.
 * ---------------------------------------------------------------------------------------- */
.a11y-transcript {
    margin-block-start: 0.5rem;
}

.a11y-transcript > summary {
    cursor: pointer;
    font-weight: 600;
}

.a11y-transcript__content {
    padding-block: 0.5rem;
}

/* ------------------------------------------------------------------------------------------
 * Headings
 * a11y-subheading is the former "subheader" that is no longer a heading element.
 * ---------------------------------------------------------------------------------------- */
.a11y-subheading {
    margin-block-start: 0;
}

/* ------------------------------------------------------------------------------------------
 * Forms
 * Structure: label/legend -> hint -> error -> control. Only spacing and the non-colour cues
 * for errors are defined here (WCAG 2.2 SC 1.4.1 Use of Color: the error is marked by the
 * hidden "Error:" prefix, a border and bold weight - not by colour alone).
 * Target size: checkbox/radio boxes are enlarged to 24 CSS px, the minimum of
 * WCAG 2.2 SC 2.5.8 Target Size (Minimum). Buttons keep the project's styling.
 * ---------------------------------------------------------------------------------------- */
.a11y-form-field,
.a11y-form-group {
    margin-block-end: 1.5rem;
}

/* Visible control boundaries.
   WHY:  WCAG 2.2 SC 1.4.11 Non-text Contrast - the boundary that identifies a form control
         needs 3:1 contrast against its surroundings when it is the only indicator. CSS resets
         (Tailwind preflight, normalize) strip the browser border, which leaves white fields on
         white backgrounds. currentColor follows the text colour, so the 3:1 ratio holds on light
         and dark backgrounds. :where() keeps specificity at zero for project overrides.
   Target size: SC 2.5.8 (24 CSS px minimum) - controls and buttons get a 2.75rem minimum. */
:where(.a11y-form-field, .a11y-form-group) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea) {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid currentColor;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
}

:where(.a11y-form-field, .a11y-form-group) :where(input[type="file"]) {
    display: block;
    font: inherit;
}

:where(.a11y-form-field, .a11y-form-group) :where(textarea) {
    min-block-size: 8rem;
    resize: vertical;
}

:where(.a11y-form-field, .a11y-form-group) :where(.a11y-is-invalid, .is-invalid):where(input, select, textarea) {
    border-color: #b3261e;
}

:where(.form-navigation) :where(button) {
    min-block-size: 2.75rem;
    padding: 0.5rem 1.25rem;
    border: 2px solid currentColor;
    background-color: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.a11y-form-group {
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.a11y-form-label,
.a11y-form-legend {
    display: block;
    font-weight: 600;
    margin-block-end: 0.25rem;
    padding: 0;
}

.a11y-form-hint {
    margin: 0 0 0.5rem;
}

.a11y-form-error {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: #b3261e;
    border-inline-start: 4px solid currentColor;
    padding-inline-start: 0.75rem;
}

.a11y-form-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.a11y-form-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.a11y-form-option > input[type="checkbox"],
.a11y-form-option > input[type="radio"] {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
}

.a11y-required {
    margin-inline-start: 0.125em;
}

.a11y-form-required-hint,
.a11y-form-steps {
    margin-block-end: 1rem;
}

.a11y-form-steps {
    font-weight: 600;
}

.a11y-error-summary {
    margin-block-end: 2rem;
    padding: 1rem 1.25rem;
    border: 4px solid #b3261e;
}

.a11y-error-summary__title {
    margin-block-start: 0;
}

.a11y-error-summary__list {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.a11y-error-summary__list a {
    font-weight: 600;
}

.a11y-form-confirmation {
    padding: 1rem 1.25rem;
    border: 4px solid currentColor;
}

/* Fragment/focus target after a valid step (wraps the step indicator, see Form.fluid.html).
   Focus is programmatic only (tabindex=-1); the ring from the focus fallback above still shows
   so sighted keyboard users see where they are. */
.a11y-form-focus {
    display: block;
}