/**
 * nav-toggle.css - Mobile Hamburger Toggle & Drawer Surface
 *
 * Owns the hamburger toggle button and the .primary-nav
 * mobile drawer surface that wraps the open nav at small
 * viewports. Also defines the shared .nav-list base used
 * by both the header (primary nav) and the footer (footer
 * nav) so the rule lives in one place.
 *
 * Scope:
 *   - .nav-toggle (hamburger button, animated X state).
 *   - .primary-nav (mobile drawer container) plus its
 *     .is-open promotion to a full-width drop drawer.
 *   - .nav-list (shared horizontal list base for header
 *     and footer; header-only overrides live in
 *     header-nav-desktop.css).
 *   - Desktop breakpoint that flips toggle off / nav on
 *     at >=768px.
 *
 * Why a separate file: the mobile show/hide logic must
 * remain atomic (toggle + drawer + breakpoint guard all
 * live together) and previously cross-cut a 377-line
 * components.css. Extracting it makes the nav system
 * legible without scrolling past unrelated card and table
 * rules.
 *
 * @package LibrandiOutdoorPower
 * @since   0.1.0
 * @updated 0.1.2 - Stripped cosmetic rules from the shared
 *                  .nav-list a base (font, color, border-
 *                  bottom, background, hover, current-menu-
 *                  item). Cosmetic styling is now fully owned
 *                  by the consumer (header-nav-desktop.css for
 *                  the header, footer.css for the footer).
 *                  This eliminates the cascade leak where the
 *                  shared base's bottom-border was painting
 *                  through to .nav-submenu a descendants and
 *                  forcing v0.1.1 to add explicit reset rules
 *                  to compensate.
 */


/* ==========================================================
   Mobile nav toggle (hamburger)

   Visible only at <768px (the desktop media query at the
   bottom of this file forces display:none above that).
   ========================================================== */
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius);
    transition: background-color var(--duration) var(--ease);
}
.nav-toggle:hover {
    background-color: var(--color-gray-100);
}
.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-gray-800);
    border-radius: 2px;
    transition: transform var(--duration) var(--ease),
                opacity   var(--duration) var(--ease);
}

/* Animated X state when the drawer is open. */
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================
   Mobile drawer surface

   Hides the primary nav by default at <768px; the .is-open
   class promotes it to a full-width drawer that drops below
   the header bar. Item-level styling (dropdowns, accordion
   submenus, link sizes) lives in header-nav-mobile.css.
   ========================================================== */
.primary-nav {
    display: none;
}
.primary-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    animation: navSlideDown var(--duration-slow) var(--ease-out);
}


/* ==========================================================
   Shared .nav-list base

   Owns the FLEX ROW LAYOUT of the .nav-list <ul> only.
   Cosmetic rules (font, color, border, background, hover)
   are NOT shared because the header (.primary-nav) and
   footer (.footer-nav-list) need different visual languages
   against very different backdrops -- the header sits on a
   busy white blueprint pattern and needs a backdrop-blurred
   pill, while the footer sits on a flat dark surface and
   uses a quiet underline.

   The footer uses its own .footer-nav-list class and styles
   its links in footer.css. The header consumes .nav-list
   plus the pill treatment in header-nav-desktop.css.

   Keeping this base structural-only also eliminates the
   cascade conflict where .nav-list a's bottom-border was
   leaking into .nav-submenu a (a descendant) and painting
   a stray underline beneath highlighted dropdown rows --
   v0.1.1 had to work around that with explicit resets, and
   v0.1.2 fixes it at the source by removing the cosmetic
   rules entirely.
   ========================================================== */
.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/*
 * Shared anchor base: ONLY layout primitives.
 *
 * display:block + nowrap keep tap targets predictable across
 * mobile drawer and desktop horizontal layouts. Padding gives
 * a minimum 44px tap target height (var(--space-2) ~= 8px on
 * top + bottom plus content lifts it past 44px). Cosmetic
 * properties (font, color, border, background, hover state)
 * are owned by the consumer (header or footer) so this base
 * cannot poison either context.
 */
.nav-list a {
    display: block;
    padding: var(--space-2) var(--space-1);
    white-space: nowrap;
}

/* Mobile-open overrides for plain anchors -- larger tap
   target, slightly bigger type. Dropdown triggers handle
   their own mobile sizing in header-nav-mobile.css. */
.primary-nav.is-open .nav-list > li > a {
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-xl);
}


/* ==========================================================
   Desktop breakpoint -- show nav, hide hamburger

   Co-located with the mobile rules above so the show/hide
   logic remains atomic in one file.
   ========================================================== */
@media (min-width: 768px) {
    .primary-nav {
        display: block !important;
    }
    .nav-toggle {
        display: none !important;
    }

    /* Cancel the mobile drawer treatment when the JS-applied
       .is-open class somehow lingers across a viewport
       resize (defensive). */
    .primary-nav.is-open {
        position: static;
        box-shadow: none;
        border-bottom: none;
        padding: 0;
        animation: none;
    }
}