/* ==========================================================================
   TEST-COURSE.CSS — scoped styles for the A0 "Absolute Foundations" page
   Layout container + a handful of components not already covered by
   see-test.css (alphabet tiles, hero chips, alert tips, verb-pair split).
   Everything else (.card, .grammar-table, .conjugation-grid, .vocab-grid,
   .choices-grid, .choice-box, .theme-toggle-bar) is inherited from
   see-test.css so this page stays visually consistent with the rest of
   the site.

   This file also carries the "modern Bauhaus" redesign applied to
   a1-start.html/german-a1-stories-path-story-1.html/german-a1-practice-story-lesson.html/german-a1-1000-most-common-words.html/
   languages-page.html/german-courses-page.html: it redeclares the shared design
   tokens (--bg/--surface/--ink/--accent/--gold/--line/--serif/--color-*)
   with the same values those pages use, plus the same redesigned navbar.
   Since this stylesheet only ever loads on this one page, every shared
   component that reads those tokens (.card, .grammar-table, .vocab-grid,
   .choice-box) picks up the new palette here only — no other page is
   affected.
   ========================================================================== */

:root {
    --bg: #f7f2e7;
    --surface: #ffffff;
    --surface-2: #fbf7ee;
    --ink: #191726;
    --ink-soft: #5a5470;
    --ink-faint: #9089a3;
    --accent: #e0432b;
    --accent-2: #c23621;
    --accent-soft: rgba(224, 67, 43, 0.12);
    --gold: #b4870a;
    --gold-soft: rgba(239, 176, 0, 0.18);
    --line: #e7dec7;

    --shadow-sm: 0 1px 2px rgba(25, 23, 38, 0.06), 0 1px 1px rgba(25, 23, 38, 0.04);
    --shadow-md: 0 10px 24px -8px rgba(25, 23, 38, 0.16), 0 2px 8px -2px rgba(25, 23, 38, 0.06);
    --shadow-lg: 0 0 0 1px rgba(25, 23, 38, 0.04), 0 16px 40px -16px rgba(224, 67, 43, 0.28);

    --serif: "Futura", "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif;
    --line-strong: #d8cba8;

    /* --- A1 six-topic palette (Bauhaus retint, matches the other redesigned pages) --- */
    --color-nom: #1d5fa6; --color-nom-bg: #e5eef8;
    --color-acc: #e0432b; --color-acc-bg: #fbe7e3;
    --color-irr: #b4870a; --color-irr-bg: #faf1d6;
    --color-coo: #0f7168; --color-coo-bg: #e2f2f0;
    --color-sub: #6c4ba6; --color-sub-bg: #eee8f7;
    --color-neg: #b8355f; --color-neg-bg: #f8e5eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #131220;
        --surface: #1c1a2c;
        --surface-2: #211f34;
        --ink: #f3eee1;
        --ink-soft: #b3abc9;
        --ink-faint: #867f9c;
        --accent: #ff5b41;
        --accent-2: #ff7b62;
        --accent-soft: rgba(255, 91, 65, 0.16);
        --gold: #ffcb3d;
        --gold-soft: rgba(255, 203, 61, 0.18);
        --line: #33304a;
        --line-strong: #413c5c;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 44px -16px rgba(255, 91, 65, 0.35);

        --color-nom: #5b98e8; --color-nom-bg: rgba(91, 152, 232, 0.16);
        --color-acc: #ff5b41; --color-acc-bg: rgba(255, 91, 65, 0.16);
        --color-irr: #ffcb3d; --color-irr-bg: rgba(255, 203, 61, 0.18);
        --color-coo: #2fb6a8; --color-coo-bg: rgba(47, 182, 168, 0.16);
        --color-sub: #9a7bd6; --color-sub-bg: rgba(154, 123, 214, 0.18);
        --color-neg: #e06a94; --color-neg-bg: rgba(224, 106, 148, 0.18);
    }
}

body.scrollable-page {
    background-color: var(--bg);
}

/* ================= NAVBAR (redesigned, scoped to this page only) =================
   Identical to the other redesigned pages' navbar — see-test.css's shared
   .navbar/.brand-box/.dropdown-item rules still exist and are used by
   every other page unchanged; these selectors only apply here because
   this file is only ever linked from german-a0-absolute-foundations.html. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

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

.brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.brand-word {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.brand-word b {
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav-links > a {
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-links > a:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.navbar .dropdown-item {
    position: relative;
}

.navbar .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--ink-soft);
    text-decoration: none;
    border: none;
    background: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar .dropdown-trigger:hover,
.navbar .dropdown-item.open .dropdown-trigger {
    background: var(--surface-2);
    color: var(--ink);
}

.navbar .dropdown-trigger.active {
    color: var(--accent);
}

.navbar .caret {
    transition: transform 0.18s ease;
    font-size: 0.7em;
}

.navbar .dropdown-item.open .caret {
    transform: rotate(180deg);
}

.navbar .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    overflow: hidden;
}

/* Vibrant Bauhaus accent strip across the top of the popup — same three
   primaries used throughout the site's topic-color system (matches
   german-courses-page.html). */
.navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--gold), var(--color-nom));
}

.navbar .dropdown-item.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.navbar .dropdown-menu a:hover {
    background: var(--surface-2);
    color: var(--ink);
    transform: translateX(2px);
}

/* --- Language flag swatches + "Soon" badges (matches german-courses-page.html) --- */
.dropdown-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease;
}

.dropdown-flag-es {
    background: linear-gradient(to bottom, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%);
}

.dropdown-flag-fr {
    background: linear-gradient(to right, #0055a4 0 33.33%, #ffffff 33.33% 66.66%, #ef4135 66.66% 100%);
}

.navbar .dropdown-menu a:hover .dropdown-flag-es {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--color-acc-bg);
}

.navbar .dropdown-menu a:hover .dropdown-flag-fr {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--color-nom-bg);
}

.dropdown-lang-name {
    flex: 1;
}

.dropdown-soon-badge {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gold);
    background: var(--gold-soft);
    padding: 3px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 860px) {
    .nav-links {
        position: fixed;
        inset: 60px 0 auto 0;
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        gap: 2px;
    }

    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links > a,
    .navbar .dropdown-trigger {
        width: 100%;
    }

    .navbar .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 14px;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    /* The gradient strip is positioned relative to the popup's own box —
       once that box goes position:static for the mobile stacked layout,
       there's no floating panel left for it to sit across, so drop it. */
    .navbar .dropdown-menu::before {
        display: none;
    }

    .navbar .dropdown-item.open .dropdown-menu {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }
}

html {
    scroll-behavior: smooth;
}

.a0-shell {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 68px;
}

.a0-page {
    width: 100%;
    max-width: 900px;
    margin: 0;
    padding: 24px 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Back-to-courses link: same "back to X" pattern used by .gl-back-link
   on the chapter/lesson pages (grammar-lesson.css), scoped here since this
   page doesn't load that stylesheet. --- */
.a0-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    text-decoration: none;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.a0-back-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.a0-back-link:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.a0-back-link:hover .a0-back-link-icon {
    transform: translateX(-2px);
}

/* --- Left sidebar: content / table of contents --- */
.a0-toc {
    flex: 0 0 240px;
    align-self: flex-start;
    position: sticky;
    top: 24px;
    padding: 24px 0 24px 16px;
}

.a0-toc-inner {
    background-color: var(--surface, #ffffff);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: var(--shadow-sm, none);
}

.a0-toc-heading {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--ink-faint);
    margin: 0 0 12px;
}

.a0-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.a0-toc-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.a0-toc-link:hover {
    background-color: var(--accent-soft, #f1f5f9);
}

.a0-toc-link.is-active {
    background-color: var(--accent-soft, #f1f5f9);
}

.a0-toc-link.is-active .a0-toc-num {
    background-color: var(--accent, #334155);
    color: #ffffff;
}

.a0-toc-link.is-active .a0-toc-text strong {
    color: var(--accent, #334155);
}

.a0-toc-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--accent-soft, #f1f5f9);
    color: var(--accent, #334155);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 1px;
}

.a0-toc-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.a0-toc-text strong {
    font-size: 0.85rem;
    color: var(--ink);
    line-height: 1.3;
}

.a0-toc-text small {
    font-size: 0.72rem;
    color: var(--ink-faint);
    line-height: 1.3;
}

/* --- Hero: left-aligned Bauhaus treatment with decorative pseudo-element
   shapes, matching a1-start.html/german-a1-stories-path-story-1.html/languages-page.html's
   hero cards instead of this page's original centered layout. --- */
.a0-hero-card {
    text-align: left;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 40px 32px;
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
}

.a0-hero-card::before,
.a0-hero-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.a0-hero-card::before {
    width: 220px;
    height: 220px;
    right: -80px;
    top: -90px;
    background: radial-gradient(circle at 30% 30%, var(--gold), transparent 70%);
    opacity: 0.5;
}

.a0-hero-card::after {
    width: 140px;
    height: 140px;
    right: 50px;
    top: 90px;
    border: 20px solid var(--color-nom);
    opacity: 0.14;
}

.a0-hero-card .card-badge.level-track-badge {
    position: static;
    display: inline-flex;
    margin: 0 0 14px;
}

.a0-hero-card h1 {
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 2rem;
    color: var(--ink);
    margin-bottom: 10px;
}

.a0-hero-sub {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 18px;
}

.a0-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

.a0-chip {
    background-color: var(--accent-soft, #f1f5f9);
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent, #334155);
}

/* --- Section shell --- */
.a0-section-card h2 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.a0-section-intro {
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 16px;
}

.a0-subhead {
    font-family: var(--mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin: 18px 0 10px;
}

.a0-subhead:first-of-type {
    margin-top: 0;
}

.a0-section-card .vocab-grid {
    margin-bottom: 4px;
}

/* --- Alert tip: retinted to the Bauhaus gold accent instead of the
   original hardcoded amber, matching the gold-tinted decorative shapes
   used across the other redesigned pages. --- */
.a0-alert-tip {
    background-color: var(--gold-soft);
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.5;
}

/* --- Grammar-foundations mini examples (capitalization / word order) --- */
.a0-word-order-example {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 10px 0;
}

.a0-word-order-example p {
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.7;
}

.a0-word-order-example p:last-child { margin-bottom: 0; }

.a0-word-order-translation {
    font-size: 0.85rem !important;
    color: var(--ink-soft) !important;
    font-style: italic;
}

.a0-ending {
    color: var(--accent, #334155);
}

.a0-pos-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    border-radius: 999px;
    background-color: var(--accent-soft, #f1f5f9);
    color: var(--accent, #334155);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
}

/* --- Per-section "Quick Check" mini quizzes (10 questions each) --- */
.sq-quiz-card {
    margin-top: 20px;
    border-top: 1px dashed var(--line);
    padding-top: 20px;
}

.sq-quiz-card h4 {
    font-size: 1rem;
    color: var(--ink);
    margin: 14px 0 12px;
}

.sq-result {
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 1.2em;
}

.sq-result.is-success { color: var(--good, #16a34a); }
.sq-result.is-error { color: var(--bad, #dc2626); }

.sq-done {
    text-align: center;
    padding: 10px 8px 4px;
    font-size: 0.95rem;
    color: var(--ink);
}

.sq-done strong { color: var(--good, #16a34a); }

/* --- Alphabet grid --- */
.alphabet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.alphabet-tile {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.alphabet-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background-color: var(--surface-2); }
.alphabet-tile:active { transform: translateY(0); }

.alphabet-tile .letter-glyph {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
    display: block;
}

.alphabet-tile .letter-name {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-top: 2px;
}

.alphabet-tile .letter-example {
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 600;
    display: block;
    margin-top: 6px;
}

.alphabet-tile .letter-example small {
    display: block;
    color: var(--ink-soft);
    font-weight: 500;
}

/* --- sein / haben side-by-side split --- */
.a0-verb-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* --- Quiz submit button (full-width text variant of .submit-btn) --- */
.a0-full-submit {
    width: auto;
    height: auto;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 700;
}

.floating-container[id$="InputZone"] .input-group {
    justify-content: center;
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .a0-shell {
        flex-direction: column;
        align-items: stretch;
        max-width: 900px;
        padding: 0 16px;
    }

    .a0-toc {
        flex: none;
        position: static;
        padding: 20px 0 0;
        width: 100%;
    }

    .a0-page {
        padding: 20px 0 64px;
    }

    .a0-toc-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .a0-toc-link {
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    .a0-verb-pair { grid-template-columns: 1fr; }
    .alphabet-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}