/* =============================================================================
 * Cosmos Club - Accessibility Enhancements (WCAG 2.2 AA)
 *
 * Loaded after style.css. Visual changes are limited to accessibility
 * necessities: focus visibility, touch targets, link affordance, motion,
 * forced-colors, and reflow. No brand, font, or layout redesign.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. FOCUS VISIBILITY ON EVERY BACKGROUND (WCAG 2.4.7 / 2.4.11)
 *
 * Double ring: a 2px white inner ring (box-shadow) fills the outline-offset
 * gap, then the maroon outline sits outside it. Visible on cream, white,
 * maroon, chocolate, and photography without introducing new brand colors.
 * Components that define their own !important focus box-shadow keep it.
 * -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid #7b1113 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff;
}

/* Form fields keep an attached ring so the field boundary stays obvious */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 1px !important;
}

/* Dark surfaces: flip the outer ring to white, inner to dark (still on-palette) */
.site-footer :focus-visible,
.footer--row :focus-visible,
[data-section="hfg_footer_layout_top"] :focus-visible {
    outline-color: #fff !important;
    box-shadow: 0 0 0 2px #2c2218;
}

/* The skip-link target receives programmatic focus only - no ring needed */
#content:focus,
#content:focus-visible {
    outline: none !important;
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
 * 2. STICKY HEADER MUST NOT OBSCURE FOCUSED / ANCHORED CONTENT (WCAG 2.4.11)
 * -------------------------------------------------------------------------- */
html {
    scroll-padding-top: 140px;
}
@media (max-width: 960px) {
    html {
        scroll-padding-top: 96px;
    }
}

/* -----------------------------------------------------------------------------
 * 3. CURRENT PAGE IN NAVIGATION - NOT COLOR-ALONE (WCAG 1.4.1)
 * -------------------------------------------------------------------------- */
.nav-menu-primary .current-menu-item > .wrap > a,
.nav-menu-primary .current_page_item > .wrap > a,
.nav-menu-primary li.current-menu-item > a,
.nav-menu-primary li.current_page_item > a,
#footer-menu .current-menu-item > .wrap > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Exactly ONE current-page indicator (the underline above). Zero every
   other decoration source on the item (theme skin, customizer CSS,
   wrapper-level text-decoration) - a second line was stacking under the
   logged-in Help item. Scoped so the .nav-help "?" icon (background-image
   on a:after) is unaffected. */
.nav-menu-primary li.current-menu-item,
.nav-menu-primary li.current_page_item,
.nav-menu-primary li.current-menu-item > .wrap,
.nav-menu-primary li.current_page_item > .wrap {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.nav-menu-primary li.current-menu-item a,
.nav-menu-primary li.current_page_item a {
    border-bottom: none !important;
    box-shadow: none !important;
}
.nav-menu-primary li.current-menu-item a > span,
.nav-menu-primary li.current_page_item a > span {
    text-decoration: none !important;
}

/* -----------------------------------------------------------------------------
 * 4. INLINE CONTENT LINKS IDENTIFIABLE WITHOUT COLOR (WCAG 1.4.1)
 *
 * Per the sitewide design system inline-link pattern. Scoped to running text
 * (p / li inside the content wrap); buttons, cards, and nav are excluded.
 * -------------------------------------------------------------------------- */
.nv-content-wrap p a:not([class*="button"]):not([class*="btn"]):not([class*="info-box"]),
.nv-content-wrap li a:not([class*="button"]):not([class*="btn"]):not([class*="info-box"]) {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * 5. TOUCH TARGETS (WCAG 2.5.8) - expand hit areas, not visual size
 *
 * ::before hit-area expansion participates in hit testing without changing
 * layout. (pointer: coarse) does not fire in viewport emulation, so the
 * mobile-width fallback is duplicated per project convention.
 * -------------------------------------------------------------------------- */
/* The two search controls are deliberately absent here. Both are positioned
   absolutely by their own components (inc/navigation.php for the header and
   the mobile bars, the plugin stylesheet for the results page), and absolute
   positioning already establishes the containing block a ::before needs.
   Listing them meant this rule, loaded after the plugin stylesheet at equal
   specificity, reset the results-page control to position:relative: it fell
   back into the wrap's flex flow and painted as a loose icon beside the pill
   instead of inside it. Do not add .esp-search-toggle or
   .esp-search-wrap .search-submit back to this selector list. */
button.caret-wrap,
#cosmos-bridge-overlay .bridge-close,
.cc-video-toggle {
    position: relative;
}
@media (pointer: coarse), (max-width: 767px) {
    button.caret-wrap::before,
    #cosmos-bridge-overlay .bridge-close::before {
        content: "";
        position: absolute;
        inset: -10px;
    }
    /* Search controls expand up, down and outward but NEVER to the left. The
       field reserves 48px of right padding and the control is 44px wide, so a
       symmetric -10px expansion reached 8px back into the text the user is
       typing: tapping just after the last character hit the button and ran the
       search instead of placing the caret. */
    .esp-search-wrap .search-submit::before,
    .cosmos-mobile-search-btn::before {
        content: "";
        position: absolute;
        inset: -10px -10px -10px 0;
    }
    /* Footer menu links: comfortable spacing between adjacent targets */
    #footer-menu a {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* Mobile sidebar account links already 44px+; keep hit area contiguous */
    .cosmos-mobile-account-links a {
        min-height: 44px;
    }
}
/* The old separate .esp-clear circle is gone (2026-08-16): the search submit
   button doubles as the clear control on every surface. Its 44px box already
   meets the coarse-pointer target size; the ::before expansion above widens
   it further on touch. */
@media (pointer: coarse), (max-width: 767px) {
    .esp-search-toggle::before {
        content: "";
        position: absolute;
        /* No left expansion: the results field reserves 56px of right padding
           for a 44px control sitting 4px in, so the text box ends exactly where
           a symmetric -8px expansion would start stealing taps. */
        inset: -8px -8px -8px 0;
    }
}

/* -----------------------------------------------------------------------------
 * 6. AUTOPLAY VIDEO PAUSE CONTROL (WCAG 2.2.2)
 * Injected by a11y-enhancements.js on every autoplaying, control-less video.
 * -------------------------------------------------------------------------- */
.cc-video-toggle {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(44, 34, 24, 0.78);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.15s;
}
.cc-video-toggle:hover,
.cc-video-toggle:focus-visible {
    background: rgba(44, 34, 24, 0.95);
    color: #fff;
}
.cc-video-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
 * 7. REDUCED MOTION (WCAG 2.3.3) - supplements the global kill in
 * inc/accessibility.php. Videos are paused by JS; this covers scroll + carets.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    .cosmos-mobile-account-caret,
    .cc-video-toggle {
        transition: none !important;
    }
}

/* -----------------------------------------------------------------------------
 * 8. FORCED COLORS / HIGH CONTRAST (WCAG 1.4.x robustness)
 *
 * Transparent borders become visible in forced-colors mode, keeping button
 * and field boundaries. System Highlight replaces the brand focus ring.
 * -------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .wp-block-button__link,
    .kb-button,
    .kb-forms-submit,
    .cosmos-login-btn,
    .cosmos-sidebar-login-btn,
    .cosmos-mobile-search-btn,
    .gform_button,
    .cc-video-toggle,
    button.caret-wrap {
        border: 1px solid ButtonText !important;
    }
    :focus-visible {
        outline: 2px solid Highlight !important;
        box-shadow: none !important;
    }
    .primary-menu-ul.menu-desktop > li.neve-mega-menu[data-mega-open="true"] > .sub-menu {
        border: 1px solid CanvasText;
    }
    /* Keep the skip link readable when its custom colors are stripped */
    .sr-only-focusable:focus {
        forced-color-adjust: auto;
    }
}

/* -----------------------------------------------------------------------------
 * 9. ZOOM / REFLOW / TEXT-SPACING RESILIENCE (WCAG 1.4.4 / 1.4.10 / 1.4.12)
 * -------------------------------------------------------------------------- */
/* Never clip running text that grows under user text-spacing overrides */
.nv-content-wrap p,
.nv-content-wrap li,
.nv-content-wrap h1,
.nv-content-wrap h2,
.nv-content-wrap h3 {
    overflow-wrap: break-word;
}
/* Kadence advanced headings sometimes carry fixed heights from the editor */
.entry-content .wp-block-kadence-advancedheading {
    height: auto !important;
    min-height: 0;
}
/* Prevent page-level horizontal scroll from full-bleed rows at 320px */
@media (max-width: 380px) {
    .kb-row-layout-wrap.alignfull {
        max-width: 100vw;
        overflow-x: hidden;
    }
}