/* Primary navigation, shared by every page. Loaded after tokens.css and
   after the page stylesheet, so it only adds to .site-header. Desktop: three
   text links between the logo and the CTA. Under 720px: a two-line toggle
   opens a full-height deep-purple panel with the links in display type. */

.site-header .container { gap: clamp(16px, 3vw, 40px); }
.site-header__actions { display: flex; align-items: center; gap: 12px; }

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 36px);
    margin-left: auto;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-body-sm);
}
.site-nav a {
    position: relative;
    color: var(--gu-paper);
    text-decoration: none;
    padding: 6px 0;
}
/* the underline grows from the left on hover and stays for the current page */
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--gu-lilac-200);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 4px; }

/* the toggle: two lines that become a cross */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}
.nav-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nav-toggle span {
    position: absolute;
    left: 11px; right: 11px;
    height: 2px;
    background: var(--gu-paper);
    border-radius: 2px;
    transition: transform var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out);
}
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
html.nav-open .nav-toggle span:first-child { top: 21px; transform: rotate(45deg); }
html.nav-open .nav-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 99;
        margin: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 110px) var(--gutter, 24px) 48px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        background: var(--gu-purple-900);
        color: var(--gu-paper);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
    }
    html.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    html.nav-open { overflow: hidden; }
    .site-nav a {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(38px, 11vw, 56px);
        line-height: 1.1;
        letter-spacing: -0.02em;
        padding: 6px 0;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    }
    html.nav-open .site-nav a { opacity: 1; transform: none; }
    html.nav-open .site-nav a:nth-child(1) { transition-delay: 80ms; }
    html.nav-open .site-nav a:nth-child(2) { transition-delay: 150ms; }
    html.nav-open .site-nav a:nth-child(3) { transition-delay: 220ms; }
    .site-nav a::after { height: 3px; }
    /* the logo and the actions (CTA + toggle) sit above the panel (z 99)
       within the header's own stacking context, so the toggle stays tappable
       and the logo stays visible while the panel is open */
    .site-header .container > a[aria-label="Good Unicorn home"], .site-header__actions { position: relative; z-index: 100; }
    /* the header itself no longer needs raising (see rule above); it only
       loses its scrolled chrome while the panel is open */
    html.nav-open .site-header { background: transparent; box-shadow: none; border-bottom-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav a::after, .nav-toggle span, .site-nav, .site-nav a { transition: none; }
}