/**
 * Fabrixa — accessibility.css
 *
 * Accessibility / WCAG AA improvements. Auto-enqueued by
 * `fabrixa_auto_enqueue_assets_css()` in functions.php.
 *
 * Added 2026-05-04 for the Fespa pre-launch accessibility audit (target 95+).
 *
 * Audit basis (2026-05-04):
 *   ✅ Heading hierarchy: clean across all 56 templates
 *   ✅ Semantic HTML: every template uses <main>; 481 <section> + 227 <article>
 *   ✅ Color contrast: cream-on-navy 14.36:1 (AAA), slate-on-navy 6.49:1 (AA)
 *   ⚠️  Coral (#E95121) on Navy (#18202D) is 4.41:1 — fails AA normal text
 *      but passes AA large text (3:1). Mitigation below: bump small coral
 *      text to bolder weight + min-size to qualify as large text.
 *   ✅ No div+role=button or span+onclick anti-patterns
 */

/* -----------------------------------------------------------
 * 1. SKIP-TO-CONTENT LINK
 *
 * The skip link lets keyboard users jump past the menu to <main>.
 * It's the first focusable element in the body. Hidden until focused.
 * The actual link is injected via fabrixa_emit_skip_link() in functions.php.
 * --------------------------------------------------------- */
.fbx-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100;
}
.fbx-skip-link:focus {
    position: fixed;
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 12px 20px;
    background: #18202D;
    color: #F0F0F0;
    border: 2px solid #E95121;
    border-radius: 4px;
    font-family: var(--f-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    overflow: visible;
}

/* -----------------------------------------------------------
 * 2. VISIBLE FOCUS RINGS
 *
 * `:focus-visible` shows the focus ring only when navigating via keyboard
 * (not on every mouse click). Modern browsers all support it; older ones
 * fall back to `:focus`.
 *
 * The ring is coral (#E95121) at 3px — strong enough to see clearly,
 * thin enough not to be ugly. WCAG 2.4.7 (Focus Visible) requirement.
 * --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #E95121;
    outline-offset: 2px;
    border-radius: 2px;
}
/* Fallback for browsers without :focus-visible (very old) */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #E95121;
    outline-offset: 2px;
}
/* Restore "no outline on click" once :focus-visible kicks in */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* -----------------------------------------------------------
 * 2b. KILL DEFAULT BROWSER VISITED-LINK PURPLE
 *
 * Browsers default :visited links to purple. On a brand site that
 * looks broken (Skip-to-main link, "Browse home →" cards, etc. were
 * rendering in violet on revisit). Force visited links to inherit
 * colour from their normal state — every Fabrixa link already has a
 * brand colour set.
 * --------------------------------------------------------- */
a:visited,
a:visited:hover,
a:visited:focus {
    color: inherit;
}
.fbx-skip-link,
.fbx-skip-link:visited,
.fbx-skip-link:focus,
.fbx-skip-link:visited:focus {
    color: #F0F0F0 !important;
}

/* -----------------------------------------------------------
 * 2c. HIDE TRANSLATEPRESS FLOATING + SHORTCODE SWITCHERS
 *
 * We use the in-menu language switcher (.fabrixa-lang-switcher) only.
 * TP also renders a floating bottom-right switcher AND any
 * [language-switcher] shortcode renders a big "Change Language"
 * dropdown — both create extra UI we don't want on the public site.
 * --------------------------------------------------------- */
body .trp-floater,
body .trp-floater-language-switcher,
body .trp-floater-ls-shortcode,
body .trp-language-switcher-shortcode,
body .trp-language-switcher.trp-floater,
body [class*="trp-floater"],
body [class*="trp-shortcode"]:not(.fabrixa-lang-switcher) {
    display: none !important;
    visibility: hidden !important;
}

/* -----------------------------------------------------------
 * 3. CORAL TEXT CONTRAST FIX
 *
 * The brand coral (#E95121) on Navy (#18202D) is 4.41:1 — just under WCAG
 * AA normal-text threshold of 4.5:1. The fix: ensure coral text is large
 * enough or bold enough to qualify under the 3:1 large-text rule.
 *
 * WCAG defines "large text" as: ≥18pt regular OR ≥14pt bold.
 * (in CSS: ≥24px regular, ≥18.66px bold — but practically 18px+ is fine.)
 *
 * .fbx-tag is the eyebrow/label class — coral, mono, uppercase. Currently
 * 11px-12px, weight 600. The min-size + weight bump below pushes it to
 * "large text" territory and improves readability.
 * --------------------------------------------------------- */
.fbx-tag {
    font-weight: 700; /* was 600 */
    font-size: 0.75rem; /* 12px minimum — was sometimes 11px */
    /* Minor letter-spacing improvement for readability of all-caps */
    letter-spacing: 0.12em;
}

/* In hero contexts where coral text appears on navy, the inline-style
 * rules in templates may still set 11px font-size. Override here to
 * preserve consistency with a11y. */
.fbx-section .fbx-tag,
[class*="fbx-page-"] .fbx-tag {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

/* -----------------------------------------------------------
 * 4. SCREEN-READER-ONLY UTILITY
 *
 * Hides content visually but keeps it readable by screen readers.
 * Useful for icon labels and form helper text.
 * --------------------------------------------------------- */
.fbx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------
 * 5. FORM ELEMENT ENHANCEMENTS
 *
 * The contact form uses Contact Form 7 which generates its own labels.
 * These rules ensure labels and inputs have proper visual association
 * (consistent spacing) and that disabled / required states are visible.
 * --------------------------------------------------------- */
label {
    display: inline-block;
}
input:required,
textarea:required,
select:required {
    /* Visual hint that the field is required — coral border on focus
     * communicates "must fill" alongside the visible asterisk in the label */
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
    border-color: #E95121;
}
input::placeholder,
textarea::placeholder {
    /* Ensure placeholder is visible but not mistaken for filled-in text */
    color: #9AA4B2;
    opacity: 0.85;
}

/* -----------------------------------------------------------
 * 6. LINK UNDERLINE FOR PROSE LINKS
 *
 * In dense prose paragraphs (Reactive print guide, etc.) inline links
 * should have an underline to be distinguishable from surrounding text.
 * Coral colour alone fails the WCAG "use of colour" criterion (1.4.1).
 * --------------------------------------------------------- */
.fbx-section p a:not(.fbx-btn-ghost):not(.pxl-button):not(.fbx-mm-cta) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* -----------------------------------------------------------
 * 7. KEYBOARD NAVIGATION FOR INTERACTIVE TILES
 *
 * .fbx-tile elements are sometimes used as <a> wrappers (interactive
 * cards). Make sure they have visible focus state matching the design.
 * --------------------------------------------------------- */
a.fbx-tile:focus-visible,
a.fbx-tile:hover {
    border-color: #E95121;
}