/* nav.css — Phase 20: Navigation restructure
 * Extends style.css nav rules. Does NOT override .ev-footer-compliance,
 * .ev-tldr, .ev-affiliate-widget, or .ev-attribute-bars.
 */

/* ── Desktop: Grouped dropdown visibility ─────────────────── */
/* Per D-03: CSS-only using :hover and :focus-within */
.ast-primary-header-bar .main-header-menu .menu-item-has-children > .sub-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.ast-primary-header-bar .main-header-menu .menu-item-has-children:hover > .sub-menu,
.ast-primary-header-bar .main-header-menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Per D-01: Full-width panel dropdown spanning header width */
.ast-primary-header-bar .main-header-menu > .menu-item-has-children > .sub-menu {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    display: none;
    padding: 16px 24px;
    columns: 3;
    column-gap: 24px;
}

.ast-primary-header-bar .main-header-menu > .menu-item-has-children:hover > .sub-menu,
.ast-primary-header-bar .main-header-menu > .menu-item-has-children:focus-within > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sub-menu item spacing within columns */
.ast-primary-header-bar .main-header-menu .sub-menu .menu-item {
    break-inside: avoid;
    padding: 0;
    margin-bottom: 4px;
}

/* Sub-menu link styles — extends style.css base */
.ast-primary-header-bar .main-header-menu .sub-menu .menu-item a {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ev-navy);
    transition: background 0.15s ease, color 0.15s ease;
}

.ast-primary-header-bar .main-header-menu .sub-menu .menu-item a:hover,
.ast-primary-header-bar .main-header-menu .sub-menu .menu-item a:focus-visible {
    background: var(--ev-green-light);
    color: var(--ev-green);
}

/* Active nav item indicator — per D-04 */
.ast-primary-header-bar .main-header-menu > .menu-item.current-menu-item > a,
.ast-primary-header-bar .main-header-menu > .menu-item.current-menu-ancestor > a {
    color: var(--ev-green);
}

/* ── Sticky header ─────────────────────────────────────────── */
/* Per D-08: IntersectionObserver toggles class; CSS handles visuals */
/* Per D-10: .ev-header--sticky is the toggled class */
.ast-primary-header-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}

/* Per D-09/D-10: Compact sticky state — reduced padding, shadow */
.ast-primary-header-bar.ev-header--sticky {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ── Mobile: Focus and accessibility ───────────────────────── */
/* Focus ring on hamburger toggle — 44x44 minimum touch target */
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle {
    min-width: 44px;
    min-height: 44px;
}

.ast-mobile-header-wrap .ast-button-wrap .menu-toggle:focus-visible {
    outline: 2px solid var(--ev-green);
    outline-offset: 2px;
}

/* Mobile drawer item focus styles */
.ast-mobile-popup-drawer .menu-item a:focus-visible {
    outline: 2px solid var(--ev-green);
    outline-offset: -2px;
    background: var(--ev-green-light);
}

/* Per D-06: Accordion sub-categories on mobile */
.ast-mobile-popup-drawer .menu-item-has-children > .sub-menu {
    display: none;
    padding-left: 16px;
}

.ast-mobile-popup-drawer .menu-item-has-children.ev-nav-expanded > .sub-menu {
    display: block;
}

/* ── Mobile breakpoint ─────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hide desktop mega-menu layout on mobile */
    .ast-primary-header-bar .main-header-menu > .menu-item-has-children > .sub-menu {
        columns: 1;
        padding: 8px;
    }
}