/* ==========================================================================
   COURSES-PAGE.CSS — scoped styles for german-courses-page.html.
   .card/.card-badge/.courses-selection-wrapper/.lang-bubble-card/
   .lang-card-details/.lang-arrow-action/.lang-lock-action/.status-pill are
   all inherited from see-test.css (same shared bubble-card component
   languages-page.html uses — reused here as-is since the shape language
   is identical, just courses instead of languages).

   This file 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: 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, .status-pill, .lang-bubble-card) 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);
    }
}

.courses-page-body {
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ================= 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-courses-page.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. */
.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 --- */
.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;
    }
}

/* ================= PAGE ================= */
.courses-selection-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 88px 20px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Back-to-languages link: a Bauhaus "pill chip" — a soft accent-wash
   pill with a circled arrow icon, matching the site's existing badge/pill
   language (hub-tag-badge, dropdown-soon-badge, conj-word-pill) instead of
   a plain text link. Inverts to a solid accent fill on hover. --- */
.courses-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;
}

.courses-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;
}

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

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

/* --- Title card: same left-aligned Bauhaus treatment as the other pages'
   hero/title cards — the shared see-test.css rule centers everything
   (text-align:center; flex column centered), the same centering bug
   already found and fixed on a1-start.html/german-a1-1000-most-common-words.html/
   languages-page.html. --- */
.card.platform-title-card {
    display: block;
    text-align: left;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 44px 32px;
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
}

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

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

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

.platform-title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-badge.platform-badge {
    position: static;
    display: inline-flex;
    margin: 0 0 14px;
}

.platform-title-flag.lang-flag-circle {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.card.platform-title-card h2 {
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 8px !important;
}

.card.platform-title-card p {
    max-width: 640px;
}

.catalog-tool-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent);
    background: var(--accent-soft);
    border: none;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

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

.catalog-tool-link.locked {
    cursor: not-allowed;
    color: var(--ink-faint);
    background: var(--surface-2);
}

.catalog-tool-link.locked:hover {
    transform: none;
    background: var(--surface-2);
    color: var(--ink-faint);
    box-shadow: none;
}

.catalog-tool-link-icon {
    transition: transform 0.15s ease;
}

.catalog-tool-link:hover .catalog-tool-link-icon {
    transform: translateX(2px);
}

/* --- Courses grid: reuses .lang-bubble-card's exact shape (rounded,
   soft-glow shadow on hover) — same component languages-page.html uses,
   just holding course-level circles instead of flag circles. --- */
.courses-bubbly-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.course-bubble-card {
    border-radius: 18px;
}

.course-bubble-card.track-active:hover {
    border-color: var(--accent);
}

.lang-card-details h3 {
    font-weight: 800;
    letter-spacing: -0.005em;
}

.status-pill {
    letter-spacing: 0.03em;
}

.incomplete-pill {
    background-color: var(--bad-soft);
    color: var(--bad);
}

.locked-pill {
    background-color: var(--line);
    color: var(--ink-faint);
}

.lang-arrow-action {
    font-family: var(--serif);
}

/* --- Beginner Course mini stats row: a scaled-down version of
   german-a0-course.css's .cj-course-stats-row (bordered box,
   divided cells, big number + small mono caption), sized to fit inside
   the compact .lang-card-details column instead of a full course-card
   hero. .lang-card-details has align-items: flex-start, so this needs
   its own align-self: stretch to fill the available column width. --- */
.bc-stats-row {
    display: flex;
    align-self: stretch;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
}

.bc-stat {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    text-align: left;
    border-left: 1px solid var(--line);
}

.bc-stat:first-child {
    border-left: none;
}

.bc-stat-num {
    display: block;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.bc-stat-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* --- Level circles: a geometric Bauhaus badge per CEFR level, cycling
   through the six-topic grammar-highlight palette so the progression
   from A0 to C1 reads as a clear rainbow sequence at a glance. --- */
.course-level-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid transparent;
}

.course-level-circle.level-a0 { background: var(--color-nom-bg); color: var(--color-nom); border-color: var(--color-nom); }
.course-level-circle.level-a1 { background: var(--color-acc-bg); color: var(--color-acc); border-color: var(--color-acc); }
.course-level-circle.level-a2 { background: var(--color-irr-bg); color: var(--color-irr); border-color: var(--color-irr); }
.course-level-circle.level-b1 { background: var(--color-coo-bg); color: var(--color-coo); border-color: var(--color-coo); }
.course-level-circle.level-b2 { background: var(--color-sub-bg); color: var(--color-sub); border-color: var(--color-sub); }
.course-level-circle.level-c1 { background: var(--color-neg-bg); color: var(--color-neg); border-color: var(--color-neg); }

/* --- Course duration bubble: an absolutely-positioned pill pinned to
   each active course card's top-right corner, showing the total
   estimated hours for that track. .lang-bubble-card is already
   position:relative with its own 20px padding, so this sits inset from
   the card edge; being absolutely positioned also takes it out of the
   card's "auto 1fr auto" grid flow, so it can't disturb the level
   circle / details / arrow columns. --- */
.course-hours-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--gold-soft);
    border: none;
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .card.platform-title-card {
        padding: 32px 22px;
    }
}