/* ═══════════════════════════════════════════════════════════════════════
   Marketing top nav — base layout and skin, extracted verbatim from
   templates/homepage.html so /quiz/<slug>, /teach and / can share one copy
   instead of each keeping a hand-edited one.

   LOAD ORDER MATTERS: this file first, then static/topnav.css, which is the
   floating-pill override layer and must win.

   Depends on the host page declaring the homepage token set: --card, --border,
   --border-2, --text, --text-2, --text-3, --accent-text, --indigo,
   --indigo-muted, --shadow-hover, --font-ui, --font-display.

   The bare `nav { position: fixed }` selector from homepage.html is
   deliberately scoped to `.forge-topnav` here. Left as an element selector it
   captures any other <nav> on the page, so every page carrying a footer <nav>
   would have that footer torn out of flow and pinned to the top of the
   viewport. templates/_study_rail.html documents the same hazard — it is a
   <div role="navigation"> for exactly this reason.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── nav shell, logo, links, CTA (homepage.html:319-450) ── */
/* ── NAV ── */
.forge-topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 clamp(20px, 5vw, 80px);
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(14, 18, 32, .07);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px)
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none
}

.nav-logo-mark {
    width: 36px;
    height: 36px;
    background: #5b50e8;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
    aspect-ratio: 1 / 1;
}

.nav-logo-mark svg,
.nav-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-sub {
    font-weight: 700;
    opacity: .6;
    white-space: nowrap;
}

@media (max-width: 360px) {
    .brand-sub { display: none; }
}

.nav-logo span {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--accent-text)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none
}

.nav-links a {
    color: var(--text-2);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    transition: color .2s, background .2s
}

.nav-links a.nav-dash-link {
    color: var(--accent-text);
    font-weight: 700;
    background: var(--indigo-muted);
    display: inline-flex;
    align-items: center;
}

.nav-links a.nav-dash-link:hover {
    background: rgba(91, 80, 232, .16);
}

.nav-links a:hover {
    color: var(--text);
    background: rgba(91, 80, 232, .06)
}

.nav-cta {
    /* inline-flex, not the default inline: an inline box is placed on the
       text baseline, so its vertical padding pushed the filled button
       0.75px below the centre line the flex nav aligns everything else to.
       Invisible on the plain text links, obvious on the one item with a
       solid background. Matches .nav-host / .nav-dash-link, which sit
       correctly centred because they are already inline-flex. */
    display: inline-flex !important;
    align-items: center !important;
    background: var(--grad-cta) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 12px rgba(91, 80, 232, .26) !important;
    transition: transform .12s, box-shadow .12s, filter .12s !important
}

.nav-cta.nav-cta-hidden {
    display: none !important;
}

.nav-cta:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
    box-shadow: 0 8px 18px rgba(91, 80, 232, .34) !important
}

.nav-cta:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 6px rgba(91, 80, 232, .3) !important
}


/* ── nav search, Create, teacher host button (homepage.html:451-529) ── */
/* ── Quizlet-style centred search + Create (keeps the ATARprepAI look) ── */
.nav-search { position: relative; flex: 1; min-width: 210px; max-width: 440px; margin: 0 18px; }
.nav-logo span, .nav-dd-btn { white-space: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-search > .nav-search-ico {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-3); pointer-events: none;
}
/* Mobile: stop tap-to-zoom. 16px form fields kill iOS focus-zoom; touch-action
   kills double-tap zoom. Pinch-zoom still works, so accessibility is preserved. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea, label, [role="button"], [onclick] { touch-action: manipulation; }
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

.nav-search input {
    width: 100%; height: 42px; padding: 0 16px 0 42px; border-radius: 999px;
    border: 1.5px solid rgba(91, 80, 232, .18); background: var(--card); color: var(--text);
    font-family: var(--font-ui); font-size: .9rem; font-weight: 600; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.nav-search input::placeholder { color: var(--text-3); }
.nav-search input:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(91, 80, 232, .12); }
.nav-search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--card);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-hover);
    padding: 6px; max-height: 64vh; overflow-y: auto; display: none; z-index: 200;
}
.nav-search-results.open { display: block; }
.nav-search-results a {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
    font-size: .9rem; font-weight: 600; color: var(--text); text-decoration: none;
}
.nav-search-results a:hover { background: var(--indigo-muted); color: var(--accent-text); }
.nav-search-results a svg { color: var(--accent-text); flex-shrink: 0; }
.nav-search-cat { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-3); opacity: .75; padding: 8px 11px 3px; }
.nav-search-make { color: var(--accent-text) !important; font-weight: 700 !important; border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 9px 9px; }
.nav-search-empty { padding: 10px 11px; color: var(--text-3); font-size: .85rem; }
.nav-create {
    background: var(--indigo) !important; color: #fff !important; font-weight: 700 !important;
    padding: 8px 16px !important; border-radius: 999px !important; display: inline-flex !important;
    align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(91, 80, 232, .28) !important;
}
.nav-create:hover { transform: translateY(-1px); }

/* Teachers' hosting button — outlined so it reads as a special
   purpose-built control, not another marketing CTA */
.nav-host {
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap;
    padding: 7px 12px; border-radius: 999px;
    background: var(--card); color: var(--accent-text);
    border: 1.5px solid rgba(91, 80, 232, .45);
    font-weight: 700; text-decoration: none;
    box-shadow: 0 2px 8px rgba(91, 80, 232, .12);
    transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.nav-host:hover {
    background: var(--indigo); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(91, 80, 232, .3);
}
[data-dark] .nav-host { background: #1D1D21; color: #b9b2ff; border-color: rgba(255, 255, 255, 0.22); }
[data-dark] .nav-host:hover { background: var(--indigo); color: #fff; }
/* was 900px — between 900 and 1100 the left menu ran under the search
   box (reproduced on prod); the search matters less than a clean nav */
@media (max-width: 1100px) { .nav-search { display: none; } }


/* ── signed-in nav pill (homepage.html:530-630) ── */
/* ── Signed-in nav pill (shown instead of "Sign up" once we
   detect an active session — see syncHomepageAuth in the footer
   script). Mirrors the app's own .nav-user-pill treatment. ── */
.nav-user-pill {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(91, 80, 232, .08);
    border: 1px solid rgba(91, 80, 232, .2);
    border-radius: 999px;
    padding: 3px 12px 3px 4px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--accent-text);
    text-decoration: none;
    max-width: 180px;
    transition: background .15s;
}

.nav-user-pill:hover {
    background: rgba(91, 80, 232, .15);
}

/* topnav.css sets `.forge-topnav .nav-links a { display: inline-flex }`,
   which outranks the plain `.nav-user-pill { display: none }` above — so
   the signed-out pill rendered anyway, stretching the shared <li>'s line
   box to 50.5px and knocking the CTA 7px below the nav's centre line.
   Match that specificity to keep it hidden. Deliberately not !important:
   syncHomepageAuth reveals the pill with an inline style, which still wins. */
.forge-topnav .nav-links a.nav-user-pill {
    display: none;
}

.nav-user-avatar {
    width: 22px;
    height: 22px;
    background: var(--indigo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.nav-user-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nav-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-dark] .nav-user-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

[data-dark] .nav-user-pill:hover {
    background: rgba(255, 255, 255, 0.12);
}

@media(max-width:640px) {
    .nav-links {
        display: none
    }

    /* The desktop theme toggle lives inside .nav-links (hidden above),
       so surface the standalone mobile one next to the CTA. The auto
       left margin clusters toggle + CTA on the right despite the
       nav's space-between. */
    /* The mobile theme toggle used to sit here and carried the auto left margin
       that clusters everything after it on the right. It is gone (theme lives in
       Settings > Appearance now), so the CTA takes that job. */
    .nav-cta-mobile {
        display: flex !important;
        margin-left: auto;
        background: var(--indigo);
        color: #fff;
        text-decoration: none;
        font-size: .875rem;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 999px}

    .nav-burger { display: flex !important; }
    .nav-cta-mobile { padding: 8px 14px; margin-right: 8px; }
}



/* ── left menu + dropdowns (homepage.html:631-676) ── */
/* ══════════ LEARN DROPDOWN (nav) ══════════ */
/* left-aligned nav groups (Quizlet-style) */
.nav-left { display: flex; align-items: center; gap: 6px; }
.nav-left-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 0 0 8px; padding: 0; }

.nav-dd { position: relative; }
.nav-dd-btn {
    background: none; border: none; cursor: var(--cur-point, pointer); font-family: inherit;
    font-size: .92rem; font-weight: 600; color: var(--text-2);
    display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 999px;
}
.nav-dd-btn:hover, .nav-dd[data-open="1"] .nav-dd-btn { color: var(--accent-text); background: var(--indigo-muted); }
.nav-dd-btn svg { transition: transform .2s; }
.nav-dd[data-open="1"] .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-menu {
    position: absolute; top: calc(100% + 10px); left: 0; transform: translateY(6px);
    width: 240px; background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-hover); padding: 8px;
    opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; z-index: 200;
}
.nav-dd[data-open="1"] .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
@media(max-width:640px) {
    .nav-left-menu { display: none; }
    /* when opened from the mobile menu, reveal just the Subjects dropdown */
    nav.subjects-open .nav-left-menu { display: flex; }
    nav.subjects-open #learnDd { display: none; }
    nav.subjects-open #subjectsDd .nav-dd-menu { left: auto; right: 0; width: min(86vw, 280px); }
}
.nav-dd-menu a {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
    font-size: .9rem; font-weight: 600; color: var(--text); text-decoration: none;
}
.nav-dd-menu a:hover { background: var(--indigo-muted); color: var(--accent-text); }
.nav-dd-menu a svg { color: var(--accent-text); flex-shrink: 0; }
.nav-dd-sep {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--text-3); padding: 10px 11px 4px;
}
/* Subjects dropdown lists every subject, so let it scroll */
#subjectsDd .nav-dd-menu { max-height: min(74vh, 560px); overflow-y: auto; width: 250px; }
.nav-dd-subcat {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
    color: var(--text-3); opacity: .75; padding: 7px 11px 2px;
}
#subjectsDdList a { padding: 7px 11px; }


/* ── burger + mobile menu (homepage.html:727-762) ── */
/* ══════════ MOBILE MENU ══════════ */
.nav-burger {
    display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    /* borderless translucent fill (matches the logo mark + toggle — no
       solid outline that mismatches the transparent button) */
    background: var(--indigo-muted); border: none;
    color: var(--accent-text); cursor: var(--cur-point, pointer);
}
.nav-burger svg { transition: transform .2s; }
.nav-burger.active svg { transform: rotate(90deg); }
.mobile-menu {
    position: fixed; top: 68px; left: 0; right: 0; z-index: 190;
    background: var(--card); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-hover); padding: 10px 16px 18px;
    max-height: calc(100dvh - 68px); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu a {
    display: flex; align-items: center; gap: 11px; padding: 12px 10px;
    font-size: .98rem; font-weight: 600; color: var(--text); text-decoration: none;
    border-radius: 10px;
}
.mobile-menu a:hover, .mobile-menu a:active { background: var(--indigo-muted); color: var(--accent-text); }
.mobile-menu a svg { color: var(--accent-text); flex-shrink: 0; }
.mobile-menu .mm-sep {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--text-3); padding: 12px 10px 4px;
}
.mobile-menu .mm-cta {
    /* The one real button in this menu — the rows around it are navigation,
       so the pill lives here rather than on .mobile-menu a. */
    justify-content: center; background: var(--indigo); color: #fff; margin-top: 12px; font-weight: 700;
    border-radius: 999px;
}
.mobile-menu .mm-cta:hover { background: var(--indigo-dark); color: #fff; }


/* ── back-to-top + sticky CTA (homepage.html:765-833) ── */
/* ── Back-to-top button (appears on scroll, homepage) ── */
.to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 150;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--indigo); color: #fff; border: none; cursor: var(--cur-point, pointer);
    box-shadow: 0 8px 20px rgba(91, 80, 232, .38);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: #4a41c8; }
.to-top:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.to-top svg { width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) {
    .to-top, .to-top.show { transform: none; }
}
@media (max-width: 480px) {
    .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ── Sticky mobile CTA (mobile only; shows once the hero CTA scrolls away) ──
   Desktop keeps the persistent nav CTA, so this is phone-width only. */
.sticky-cta {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 160;                      /* over .to-top (150), under nav dropdowns (190) */
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--card, #fff) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border, rgba(91, 80, 232, .13));
    box-shadow: 0 -6px 22px rgba(17, 24, 39, .1);
    transform: translateY(110%);
    transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}

.sticky-cta.show { transform: translateY(0); }

.sticky-cta-copy {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-2, #64748b);
}

.sticky-cta-copy b { display: block; color: var(--text, #1a1a2e); font-size: .92rem; }

.sticky-cta .btn-primary {
    flex-shrink: 0;
    min-height: 46px;
    padding: 0 18px;
    font-size: .92rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .sticky-cta { display: flex; }
    /* lift the back-to-top clear of the bar so they never overlap */
    .sticky-cta.show ~ .to-top { bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
}

/* ── dark-mode chrome overrides (homepage.html:1693-1698) ── */
/* ─────────── DARK-MODE OVERRIDES (new page chrome) ─────────── */
[data-dark] .forge-topnav {
    background: rgba(24, 24, 27, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-dark] .nav-logo-mark { background: #5b50e8; }

/* The "Pro" pills in the Study-tools dropdown. They live in the shared nav
   markup, so their skin has to travel with it rather than staying behind in
   homepage.html. */
.pro-badge { display: inline-block; margin-left: 8px; padding: 2px 9px 3px; font-size: .62rem;
             font-weight: 700; letter-spacing: .08em; color: #fff;
             background: linear-gradient(135deg, #5b50e8, #4338ca); border-radius: 999px;
             vertical-align: 2px; text-transform: uppercase; }
.pro-badge--sm { margin-left: 6px; padding: 1px 7px 2px; font-size: .58rem; vertical-align: 1px; }