/* ========================================================================
   nav.css -- Primary navigation + mobile toggle

   Component layer (Wave 2, Task 14). Consumes tokens from tokens.css and
   layout primitives from layout.css. Provides the desktop horizontal /
   mobile stacked-with-toggle behavior for the site chrome's primary nav.

   Bundle order: tokens -> base -> layout -> components/nav -> ...

   ------------------------------------------------------------------------
   EXPECTED MARKUP (Task 21 -- _Layout.cshtml refactor MUST emit this shape)
   ------------------------------------------------------------------------

       <header class="site-header" data-nav>
           <div class="container site-header__inner">
               <a class="site-header__brand" href="/">
                   <img src="~/img/scribehold.svg" alt="" class="site-header__brand-mark">
                   <span class="site-header__brand-name">ScribeHold</span>
               </a>

               <button type="button"
                       class="nav-toggle"
                       aria-controls="primary-nav"
                       aria-expanded="false"
                       aria-label="Open menu"
                       data-nav-toggle>
                   <span class="nav-toggle__bar"></span>
                   <span class="nav-toggle__bar"></span>
                   <span class="nav-toggle__bar"></span>
               </button>

               <nav id="primary-nav"
                    class="site-nav"
                    aria-label="Primary"
                    data-nav-panel>
                   <ul class="site-nav__list">
                       <li><a class="site-nav__link is-active" href="/">Home</a></li>
                       <li><a class="site-nav__link" href="/for/divorce-custody">Divorce &amp; Custody</a></li>
                       <li><a class="site-nav__link" href="/for/harassment">Harassment</a></li>
                       <li><a class="site-nav__link" href="/for/attorneys">Attorneys</a></li>
                       <li><a class="site-nav__link" href="/pricing">Pricing</a></li>
                       <li><a class="site-nav__link" href="/support">Support</a></li>
                   </ul>
               </nav>
           </div>
       </header>

   Class contract:
     .site-header              -- outer <header> landmark
     .site-header__inner       -- flex row that holds brand + toggle + nav
     .site-header__brand       -- logo + wordmark link
     .site-header__brand-mark  -- <img> for the bracket-S logo
     .site-header__brand-name  -- "ScribeHold" wordmark
     .site-header--open        -- present on <header> when mobile nav is open
                                  (toggled by nav-toggle.js)
     .nav-toggle               -- mobile hamburger button (hidden >= md)
     .nav-toggle__bar          -- three horizontal bars; flips to X when open
     .site-nav                 -- primary <nav> landmark (the menu panel)
     .site-nav--open           -- alternate hook on the nav itself
                                  (toggled by nav-toggle.js together with
                                  .site-header--open so either selector works)
     .site-nav__list           -- <ul> of links
     .site-nav__link           -- individual <a>
     .site-nav__link.is-active -- current-page indicator

   Data hooks (used by nav-toggle.js -- do NOT rename without updating the
   JS module):
     [data-nav]         -- the <header> the JS scopes its query to
     [data-nav-toggle]  -- the hamburger <button>
     [data-nav-panel]   -- the <nav> panel that opens/closes

   Breakpoints (inlined; CSS custom properties are not allowed in @media):
     md: 768px   -- below this the toggle is shown and the nav stacks
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. Header shell
   ------------------------------------------------------------------------ */

.site-header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: var(--z-nav);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-3);
}

/* ------------------------------------------------------------------------
   2. Brand block (logo + wordmark)
   ------------------------------------------------------------------------ */

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink);
    text-decoration: none;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
    color: var(--color-ink);
    text-decoration: none;
}

.site-header__brand-mark {
    width: 32px;
    height: 32px;
    display: block;
}

.site-header__brand-name {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
}

/* ------------------------------------------------------------------------
   3. Mobile toggle (hamburger)

   Mobile-first: shown by default. Hidden at >= md.
   ------------------------------------------------------------------------ */

.nav-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;            /* WCAG 2.5.5 minimum tap target */
    height: 44px;
    padding: 0;
}

.nav-toggle:hover {
    border-color: var(--color-border-strong);
}

.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: var(--radius-sm);
    transition: transform var(--duration-fast) var(--easing-standard),
                opacity var(--duration-fast) var(--easing-standard);
}

/* Open state: morph bars into an X. The open class can live on either the
   header or the nav -- nav-toggle.js sets both for compatibility. */
.site-header--open .nav-toggle__bar:nth-child(1),
.site-nav--open    ~ .nav-toggle__bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header--open .nav-toggle__bar:nth-child(2),
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.site-header--open .nav-toggle__bar:nth-child(3),
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------------------
   4. Primary nav -- mobile baseline

   Mobile: collapsed by default. Made full-width below the header row.
   Revealed when .site-header--open / .site-nav--open is set.
   ------------------------------------------------------------------------ */

.site-nav {
    flex-basis: 100%;
    display: none;
}

.site-header--open .site-nav,
.site-nav--open {
    display: block;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-2);
    margin: 0;
    list-style: none;
}

.site-nav__list > li + li {
    margin-top: 0;
    border-top: 1px solid var(--color-border);
}

.site-nav__link {
    display: block;
    padding: var(--space-3) var(--space-1);
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    min-height: 44px;       /* tap target */
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--color-accent-ink);
    text-decoration: none;
}

.site-nav__link.is-active {
    color: var(--color-accent-ink);
    font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------------------
   5. Desktop layout (>= md / 768px)

   Toggle hides; nav reverts to a horizontal flex row inside the header row.
   This is the documented exception to the mobile-first rule: the toggle is
   visible on mobile and explicitly hidden on desktop.
   ------------------------------------------------------------------------ */

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .site-nav,
    .site-header--open .site-nav,
    .site-nav--open {
        display: block;
        flex-basis: auto;
    }

    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        padding-block: 0;
    }

    .site-nav__list > li + li {
        margin-top: 0;
        border-top: 0;
    }

    .site-nav__link {
        padding: var(--space-2) 0;
        min-height: 0;
        font-size: var(--font-size-sm);
        position: relative;
    }

    /* Underline indicator for the active link on desktop. */
    .site-nav__link.is-active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: var(--color-accent);
        border-radius: var(--radius-sm);
    }
}