/* GOTTA v2 — Split-panel navigation */

/* Minimal sticky header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    padding: 0.9rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--dur-med) var(--ease-quiet);
}

.site-header.is-scrolled {
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* moods page is now dark — no overrides needed */

.header__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Nav shows GOTTA wordmark only — no brandmark */
.header__brandmark { display: none; }

.header__logo {
    height: 52px;
    width: auto;
    display: block;
    mix-blend-mode: screen;
}

/* removed — moods page is dark, uses same screen blend as all other pages */

.header__right {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.header__find {
    font-family: var(--ff-text);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity var(--dur-fast) var(--ease-quiet);
    text-decoration: none;
}

/* removed — moods page is dark, inherits gold color */
.header__find:hover { opacity: 0.7; color: inherit; }

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    position: fixed;
    top: 1.35rem;
    right: var(--gutter);
    z-index: calc(var(--z-nav) + 100); /* above everything including nav panel */
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 2px;
}

.hamburger span {
    display: block;
    height: 1.5px;
    background: var(--color-crown-gold);
    transition: transform var(--dur-fast) var(--ease-quiet), opacity var(--dur-fast) var(--ease-quiet);
}

/* removed — moods page is dark, inherits gold hamburger lines */

.hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ============ Nav — dark backdrop + right drawer ============ */

/* Full-screen backdrop */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) + 10);
    pointer-events: none;
    background: rgba(10, 10, 10, 0);
    /* Delay visibility:hidden until after slide-out finishes (0.85s) */
    visibility: hidden;
    transition: background 0.5s var(--ease-quiet),
                visibility 0s linear 0.85s;
}

.nav-overlay.is-open {
    pointer-events: all;
    visibility: visible;
    background: rgba(10, 10, 10, 0.88);
    /* No delay when opening */
    transition: background 0.5s var(--ease-quiet),
                visibility 0s linear 0s;
}

/* Left panel — gone */
.nav-left { display: none; }

/* Right drawer — slow deliberate slide in */
.nav-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    background: var(--color-ivory);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem clamp(2rem, 5vw, 4rem);
    transform: translateX(100%);
    transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
    user-select: none;
    -webkit-user-select: none;
}

.nav-overlay.is-open .nav-right {
    transform: translateX(0);
}

.nav-close {
    display: none; /* hamburger now handles close */
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-onyx);
    font-family: var(--ff-display);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--dur-fast) var(--ease-quiet);
    padding: 0.25rem 0.5rem;
}

.nav-close:hover { opacity: 1; }

/* ── Nav link animation keyframe ── */
@keyframes nav-link-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-links-primary {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
}

.nav-links-primary li {
    border-bottom: 1px solid var(--rule);
    /* Hidden by default — animation fires when drawer opens */
    opacity: 0;
}

/* When nav is open: stagger each primary link in */
.nav-overlay.is-open .nav-links-primary li:nth-child(1) {
    animation: nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both;
}
.nav-overlay.is-open .nav-links-primary li:nth-child(2) {
    animation: nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}
.nav-overlay.is-open .nav-links-primary li:nth-child(3) {
    animation: nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}
.nav-overlay.is-open .nav-links-primary li:nth-child(4) {
    animation: nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.54s both;
}
.nav-overlay.is-open .nav-links-primary li:nth-child(5) {
    animation: nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}
.nav-overlay.is-open .nav-links-primary li:nth-child(6) {
    animation: nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.70s both;
}
.nav-overlay.is-open .nav-links-primary li:nth-child(7) {
    animation: nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
}

.nav-links-secondary,
.nav-social {
    opacity: 0;
}
.nav-overlay.is-open .nav-links-secondary {
    animation: nav-link-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both;
}
.nav-overlay.is-open .nav-social {
    animation: nav-link-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.90s both;
}

.nav-links-primary a {
    display: block;
    font-family: var(--ff-display);
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 400;
    color: var(--color-onyx);
    padding: 0.6rem 0;
    text-decoration: none;
    line-height: 1.15;
    transition: color 0.2s var(--ease-quiet);
}

/* Specificity bumped via .nav-overlay ancestor so the global dark-surface
   a:hover override in base.css doesn't accidentally win here. The nav drawer
   has an ivory background — gold hover is intentional. */
.nav-overlay .nav-links-primary a:hover,
.nav-overlay .nav-links-primary a:focus-visible {
    color: var(--color-crown-gold);
}

/* Active page indicator — gold italic on the current primary item */
.nav-overlay .nav-links-primary a[aria-current="page"] {
    color: var(--color-crown-gold);
    font-style: italic;
}
.nav-overlay .nav-links-secondary a[aria-current="page"] {
    color: var(--color-onyx);
    font-weight: 600;
}
.nav-overlay .nav-links-secondary a[aria-current="page"]::before {
    content: "·";
    margin-right: 0.4em;
    color: var(--color-crown-gold);
}

.nav-links-secondary {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: 0.85rem;
}

.nav-links-secondary a {
    font-family: var(--ff-text);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-fog);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-quiet);
}

.nav-overlay .nav-links-secondary a:hover,
.nav-overlay .nav-links-secondary a:focus-visible { color: var(--color-crown-gold); }

.nav-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.nav-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fog);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-quiet), transform 0.2s var(--ease-soft);
}
.nav-social a svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

.nav-overlay .nav-social a:hover,
.nav-overlay .nav-social a:focus-visible {
    color: var(--color-crown-gold);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .nav-left { display: none; }
    .nav-right { width: 100%; padding: 5rem var(--gutter) 3rem; }
    .nav-links-primary a { font-size: 2.5rem; }
}