/*
 * nav-overlay.css — Shared nav overlay styles
 * Used by all active pages via <link rel="stylesheet" href="nav-overlay.css">
 *
 * Per-page customisation:
 *   --nav-accent      Accent colour for hover/underline/aria-current (default: ocean-mid)
 *   --nav-overlay-bg  Overlay panel background (default: warm ivory)
 *
 * Each page's inline <style> overrides .site-nav and .site-nav.scrolled backgrounds
 * to match its own colour theme.
 */

/* ═══ NAV LOGO ═══ */
.nav-logo {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: oklch(0.25 0.02 260);
    letter-spacing: -0.02em;
    flex-shrink: 0;
    transition: color 0.2s ease-out;
    text-decoration: none;
}
.nav-logo:hover { color: var(--nav-accent, oklch(0.45 0.08 195)); }

/* ═══ NAV PRIMARY (desktop inline links) ═══ */
.nav-primary {
    display: flex;
    gap: 24px;
    list-style: none;
    align-items: center;
}
.nav-primary a {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(0.45 0.02 260);
    padding-bottom: 2px;
    position: relative;
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}
.nav-primary a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 1.5px;
    background: var(--nav-accent, oklch(0.45 0.08 195));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-primary a:hover { color: oklch(0.25 0.02 260); }
.nav-primary a:hover::after,
.nav-primary a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}
.nav-primary a[aria-current="page"] { color: oklch(0.25 0.02 260); }
.nav-primary a:focus-visible {
    outline: 2px solid var(--nav-accent, oklch(0.45 0.08 195));
    outline-offset: 4px;
    border-radius: 2px;
}

/* ═══ MENU TRIGGER (dot-grid button) ═══ */
.nav-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    color: oklch(0.25 0.02 260);
    border-radius: 4px;
    transition: color 0.2s ease-out, background 0.2s ease-out;
    flex-shrink: 0;
}
.nav-menu-trigger:hover {
    color: var(--nav-accent, oklch(0.45 0.08 195));
    background: oklch(0.60 0.02 260 / 0.06);
}
.nav-menu-trigger:focus-visible {
    outline: 2px solid var(--nav-accent, oklch(0.45 0.08 195));
    outline-offset: 2px;
}
.nav-menu-trigger .nav-dot-icon { display: block; }
.nav-menu-trigger .nav-close-icon { display: none; }
.nav-menu-trigger[aria-expanded="true"] .nav-dot-icon { display: none; }
.nav-menu-trigger[aria-expanded="true"] .nav-close-icon { display: block; }

/* ═══ BACKDROP ═══ */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 185;
    background: rgba(42, 46, 53, 0.35);
    background: oklch(0.25 0.02 260 / 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ═══ OVERLAY PANEL ═══ */
.nav-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 40vw;
    min-width: 320px;
    z-index: 190;
    background: var(--nav-overlay-bg, oklch(0.95 0.015 60));
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: 80px clamp(32px, 5vw, 64px) 64px;
    will-change: transform;
}
.nav-overlay.is-open { transform: translateX(0); }

/* ═══ OVERLAY GROUPS & CATEGORIES ═══ */
.nav-overlay-group { margin-bottom: 48px; }
.nav-overlay-group ul { list-style: none; }
.nav-overlay-category {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #808898;
    color: oklch(0.58 0.02 250);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(128, 136, 152, 0.12);
    border-bottom: 1px solid oklch(0.60 0.02 260 / 0.12);
}

/* ═══ OVERLAY LINKS ═══ */
.nav-overlay-link {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.75rem);
    font-weight: 600;
    color: oklch(0.25 0.02 260);
    line-height: 1.2;
    padding: 8px 0;
    opacity: 0;
    transform: translateX(-12px);
    transition:
        opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.2s ease-out;
    text-decoration: none;
}
.nav-overlay.is-open .nav-overlay-link { opacity: 1; transform: translateX(0); }
.nav-overlay-link:hover { color: var(--nav-accent, oklch(0.45 0.08 195)); }
.nav-overlay-link[aria-current="page"] { color: var(--nav-accent, oklch(0.45 0.08 195)); }
.nav-overlay-link:focus-visible {
    outline: 2px solid var(--nav-accent, oklch(0.45 0.08 195));
    outline-offset: 4px;
    border-radius: 2px;
}

/* ═══ STAGGER DELAYS (5-group overlay structure) ═══ */
/* Home (group 1) */
.nav-overlay.is-open .nav-overlay-group:nth-child(1) li:nth-child(1) .nav-overlay-link { transition-delay: 0.08s; }
/* Agentic AI (group 2) */
.nav-overlay.is-open .nav-overlay-group:nth-child(2) li:nth-child(1) .nav-overlay-link { transition-delay: 0.12s; }
.nav-overlay.is-open .nav-overlay-group:nth-child(2) li:nth-child(2) .nav-overlay-link { transition-delay: 0.16s; }
/* Trading (group 3) */
.nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(1) .nav-overlay-link { transition-delay: 0.20s; }
.nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(2) .nav-overlay-link { transition-delay: 0.24s; }
.nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(3) .nav-overlay-link { transition-delay: 0.28s; }
.nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(4) .nav-overlay-link { transition-delay: 0.32s; }
/* Thinking (group 4) */
.nav-overlay.is-open .nav-overlay-group:nth-child(4) li:nth-child(1) .nav-overlay-link { transition-delay: 0.36s; }
.nav-overlay.is-open .nav-overlay-group:nth-child(4) li:nth-child(2) .nav-overlay-link { transition-delay: 0.40s; }
.nav-overlay.is-open .nav-overlay-group:nth-child(4) li:nth-child(3) .nav-overlay-link { transition-delay: 0.44s; }
/* Observability (group 5) */
.nav-overlay.is-open .nav-overlay-group:nth-child(5) li:nth-child(1) .nav-overlay-link { transition-delay: 0.48s; }
.nav-overlay.is-open .nav-overlay-group:nth-child(5) li:nth-child(2) .nav-overlay-link { transition-delay: 0.52s; }

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
    .nav-overlay { transition: none; }
    .nav-backdrop { transition: none; }
    .nav-overlay-link { opacity: 1; transform: none; transition: color 0.2s ease-out; }
    .nav-overlay.is-open .nav-overlay-group:nth-child(1) li:nth-child(1) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(2) li:nth-child(1) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(2) li:nth-child(2) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(1) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(2) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(3) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(3) li:nth-child(4) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(4) li:nth-child(1) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(4) li:nth-child(2) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(4) li:nth-child(3) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(5) li:nth-child(1) .nav-overlay-link,
    .nav-overlay.is-open .nav-overlay-group:nth-child(5) li:nth-child(2) .nav-overlay-link {
        transition-delay: 0s;
    }
}

/* ═══ MOBILE: overlay slides up from bottom ═══ */
@media (max-width: 768px) {
    .nav-primary { display: none !important; }
    .nav-overlay {
        top: auto; right: 0; bottom: 0; left: 0;
        width: 100%; min-width: 0;
        transform: translateY(100%);
        border-radius: 16px 16px 0 0;
        padding: 32px 24px 48px;
        max-height: 85vh;
    }
    .nav-overlay.is-open { transform: translateY(0); }
    .nav-overlay-link { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* ═══ TOUCH TARGETS ═══ */
@media (pointer: coarse) {
    .nav-overlay-link { min-height: 44px; display: flex; align-items: center; }
}