/**
 * WCAG Nav Walker — Minimal Functional CSS
 *
 * This stylesheet provides ONLY the structural/accessibility styles needed
 * for WCAG 2.1 AA compliance. It contains zero design opinions — colors,
 * fonts, spacing, and layout are left to your theme or Elementor styles.
 *
 * What this handles:
 *   - Skip-nav link (visually hidden until focused)
 *   - Submenu visibility toggling
 *   - Focus indicators
 *   - Mobile menu toggle
 *   - Reduced-motion media query
 *   - Screen-reader-only utility
 *   - Nav link text-decoration override (vs WP core a:where() rule)
 *
 * @package WCAG_Nav_Walker
 * @version 1.0.1
 */

/* ==========================================================================
   1. SKIP NAVIGATION LINK
   Visible only on keyboard focus. Appears at the top of the viewport.
   ========================================================================== */

.wcag-skip-nav {
    /* Visually hidden via clip — keeps element in-flow at top of page so
       Lighthouse considers it focusable, unlike top:-9999px which moves it
       entirely off-screen and fails the "skip links are focusable" audit.
       clip-path: inset(50%) collapses the visible area to nothing without
       removing the element from the accessibility tree or tab order. */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    padding: 0.75em 1.5em;
    /* !important required -- Elementor global link color and theme a{}
       rules override these without it, causing a contrast failure. */
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 4px 4px;
    clip-path: inset(50%);
    white-space: nowrap;
    overflow: hidden;
    transition: clip-path 0.15s ease;
}

.wcag-skip-nav:focus,
.wcag-skip-nav:focus-visible {
    clip-path: inset(0);
    outline: 3px solid #fff !important;
    outline-offset: 2px;
}

/* ==========================================================================
   2. SUBMENU VISIBILITY
   Submenus are hidden by default, shown when parent is expanded.
   ========================================================================== */

.wcag-nav__submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Show submenu when aria-hidden is removed by JS */
.wcag-nav__submenu[aria-hidden="false"] {
    display: block;
}

/* ==========================================================================
   3. SUBMENU TOGGLE BUTTON
   The small button next to parent menu links that opens/closes submenus.
   Uses high specificity to override Elementor's global button styles
   which target all <button> elements with kit-level selectors.
   ========================================================================== */

button.wcag-nav__toggle,
.wcag-nav button.wcag-nav__toggle,
.wcag-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    /* WCAG 2.5.8 Target Size (Minimum) -- AA required.
       Minimum 24x24px tap target. Padding ensures the clickable area
       meets the requirement without changing the visual chevron size. */
    padding: 0.35em 0.5em;
    min-width: 24px;
    min-height: 24px;
    margin: 0;
    vertical-align: middle;
    line-height: 1;
    color: inherit;
    font-size: inherit;
}

button.wcag-nav__toggle:hover,
.wcag-nav button.wcag-nav__toggle:hover,
.wcag-nav__toggle:hover {
    background: transparent !important;
    background-color: transparent !important;
}

button.wcag-nav__toggle:focus,
.wcag-nav button.wcag-nav__toggle:focus,
.wcag-nav__toggle:focus {
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   3b. HIDE ELEMENTOR'S NATIVE SUBMENU INDICATOR
   The walker provides its own toggle button, so Elementor's built-in
   .sub-arrow chevron must be hidden to avoid duplication.
   ========================================================================== */

.wcag-nav .sub-arrow,
.wcag-nav__link .sub-arrow,
.wcag-nav .elementor-nav-menu .sub-arrow {
    display: none !important;
}

/* Chevron icon via CSS — no image dependency */
.wcag-nav__toggle-icon {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -0.15em;
}

/* Rotate chevron when expanded */
.wcag-nav__toggle[aria-expanded="true"] .wcag-nav__toggle-icon {
    transform: rotate(-135deg);
    margin-top: 0.15em;
}

/* ==========================================================================
   4. FOCUS INDICATORS
   High-contrast focus ring that works on any background.
   Uses outline so it doesn't affect layout.
   ========================================================================== */

.wcag-nav__link:focus-visible,
.wcag-nav__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible */
.wcag-nav__link:focus,
.wcag-nav__toggle:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Remove fallback outline if :focus-visible is supported */
@supports selector(:focus-visible) {
    .wcag-nav__link:focus:not(:focus-visible),
    .wcag-nav__toggle:focus:not(:focus-visible) {
        outline: none;
    }
}

/* ==========================================================================
   4b. NAV LINK TEXT DECORATION
   WordPress core injects an inline a:where(:not(.wp-element-button)) rule
   that adds text-decoration: underline to all links. Nav menu items are
   already obviously interactive — the menu container, hover background
   change (1.4.11), and focus outline (2.4.7) all provide sufficient
   affordance. WCAG 1.4.1 (Use of Color) does not apply to nav menus
   because there is no surrounding non-link text to distinguish from.
   This rule overrides the WP core underline cleanly via class-level
   specificity (no !important needed; :where() has zero specificity).
   ========================================================================== */

.wcag-nav__link,
.wcag-nav__link:hover,
.wcag-nav__link:focus,
.wcag-nav__link:focus-visible,
.wcag-nav__submenu .wcag-nav__link,
.wcag-nav__submenu .wcag-nav__link:hover,
.wcag-nav__submenu .wcag-nav__link:focus {
    text-decoration: none;
}

/* ==========================================================================
   5. MOBILE MENU TOGGLE (HAMBURGER)
   The button that shows/hides the entire menu on mobile viewports.
   Injected by JS. This provides only functional styles.
   ========================================================================== */

.wcag-nav__mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5em;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    align-items: center;
    gap: 0.5em;
}

/* Hamburger icon lines */
.wcag-nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.5em;
    height: 1.125em;
}

.wcag-nav__hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate to X when open */
.wcag-nav__mobile-toggle[aria-expanded="true"] .wcag-nav__hamburger-line:nth-child(1) {
    transform: translateY(0.4375em) rotate(45deg);
}
.wcag-nav__mobile-toggle[aria-expanded="true"] .wcag-nav__hamburger-line:nth-child(2) {
    opacity: 0;
}
.wcag-nav__mobile-toggle[aria-expanded="true"] .wcag-nav__hamburger-line:nth-child(3) {
    transform: translateY(-0.4375em) rotate(-45deg);
}

/* Mobile label */
.wcag-nav__mobile-label {
    font-weight: 600;
    font-size: 0.875rem;
}

/* ==========================================================================
   6. MOBILE LAYOUT
   Below the breakpoint, hide the menubar and show the toggle button.
   The breakpoint is set via CSS custom property from JS.
   ========================================================================== */

.wcag-nav[data-mobile="true"] [role="menubar"] {
    display: none;
}

.wcag-nav[data-mobile="true"] [role="menubar"][data-visible="true"] {
    display: block;
}

.wcag-nav[data-mobile="true"] .wcag-nav__mobile-toggle {
    display: inline-flex;
}

/* ==========================================================================
   7. REDUCED MOTION
   Disable all transitions/animations for users who prefer reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .wcag-skip-nav,
    .wcag-nav__toggle-icon,
    .wcag-nav__hamburger-line,
    .wcag-nav__submenu {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   8. SCREEN READER UTILITY
   ========================================================================== */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    display: block;
    height: auto;
    width: auto;
    /* position:fixed keeps the link at the top of the viewport on focus
       rather than jumping into unpredictable document flow (position:static).
       Lighthouse requires the focused skip link to be visible and reachable. */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    padding: 0.75em 1.5em;
    background: #000 !important;
    color: #fff !important;
    overflow: visible;
}

/* ==========================================================================
   9. ARIA LIVE REGION (injected by JS for screen reader announcements)
   ========================================================================== */

.wcag-nav__live-region {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

/* ==========================================================================
   10. HIDE ELEMENTOR'S DUPLICATE DROPDOWN NAV
   Elementor renders a second copy of the nav inside
   .elementor-nav-menu--dropdown for its own mobile/dropdown handling.
   This duplicate has aria-hidden="true" but contains focusable links
   and buttons, which fails WCAG (focusable descendants inside
   aria-hidden). Since our walker handles all dropdown and mobile
   behavior, we hide Elementor's duplicate entirely with display:none
   which removes it from both the accessibility tree and tab order.
   ========================================================================== */

.elementor-nav-menu--dropdown.elementor-nav-menu__container,
nav.elementor-nav-menu--dropdown {
    display: none !important;
}

/* Also hide Elementor's own mobile toggle since our walker provides one */
.elementor-menu-toggle {
    display: none !important;
}