/* ==========================================================================
   GERMAN-STATES-MAP.CSS — scoped styles for german-states-map.html, the
   "Culture Lesson" page linked from german-a1-course.html's second
   piece-grid (where the old "More Writing Practice" Coming Soon placeholder
   used to sit). Copies german-a1-course.html's page shell (navbar,
   back-link, course-card hero) exactly, then adds a schematic cartogram of
   Germany's 16 Bundesländer: each state is a CSS Grid tile positioned at
   its approximate real-world location (not to scale or geographically
   precise — a stylized Bauhaus-block map, same abstraction level as the
   site's pure-CSS flag graphics elsewhere), showing its German and English
   names up front and a hover/focus popup with its capital + a quick fact.
   Berlin and Bremen are true enclaves in real life (fully surrounded by
   Brandenburg / Niedersachsen), so those two are absolutely-positioned
   overlays on top of the grid instead of competing for their own grid
   cells. .card/.hub-tag-badge/.badge-* are inherited from see-test.css.

   This file also re-themes the whole page: it redeclares the shared design
   tokens (--bg/--surface/--ink/--accent/--gold/--line/--serif/--color-*)
   with the same "modern Bauhaus" values used on german-a1-course.css.
   Because this stylesheet is only ever linked from german-states-map.html
   and loads after see-test.css, every shared component that reads those
   tokens picks up the new palette on THIS page only. Uses "html:root"
   rather than plain ":root" for the override — see a1-highlights.css for
   why that extra specificity is worth the insurance.
   ========================================================================== */

html: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;
    --line-strong: #d8cba8;

    --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;

    --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;

    /* --- Two extra tile colors, just for this page's 16-state palette
       (8 hues x 2 states each) — not part of the shared six-topic set. --- */
    --gsm-green: #3f7d4a; --gsm-green-bg: #e6f0e7;
    --gsm-brown: #93643a; --gsm-brown-bg: #f2e9e0;
}

@media (prefers-color-scheme: dark) {
    html: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);

        --gsm-green: #6bc27a; --gsm-green-bg: rgba(107, 194, 122, 0.16);
        --gsm-brown: #d6a475; --gsm-brown-bg: rgba(214, 164, 117, 0.16);
    }
}

/* ================= NAVBAR (redesigned, scoped to this page only) ================= */
.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;
}

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

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

    .navbar .dropdown-menu::before {
        display: none;
    }

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

    .nav-toggle {
        display: flex;
    }
}

/* ================= PAGE SHELL (matches german-a1-course.css) ================= */
.cj-page {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 88px 16px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

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

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

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

/* --- Course card: same badge/heading/sub treatment as
   german-a1-course.css's .cj-course-card. --- */
.cj-course-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: left;
    padding: 40px 32px;
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
}

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

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

.cj-course-card::after {
    width: 150px;
    height: 150px;
    right: 40px;
    top: 90px;
    border: 20px solid var(--color-nom);
    opacity: 0.16;
}

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

.cj-course-card h2 {
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 10px;
}

.cj-course-sub {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0;
}

/* --- Reveal on scroll --- */
.cj-reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .cj-reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .cj-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* ================= THE MAP =================
   A schematic 6-column x 10-row cartogram — each state's grid-column/
   grid-row is set inline in the HTML per tile (16 different spans, easier
   to read next to each tile's own content than in 16 separate CSS rules).
   Berlin and Bremen are real enclaves (fully surrounded by Brandenburg /
   Niedersachsen), so those two skip the grid entirely and are positioned
   with plain percentage-based absolute coordinates instead, layered over
   their host state's tile. --- */
.gsm-map-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 28px;
    box-shadow: var(--shadow-md);
}

.gsm-map-head {
    margin: 0 0 18px;
}

.gsm-map-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
}

.gsm-map-hint {
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin: 0;
}

.gsm-map {
    position: relative;
}

.gsm-svg-map {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.gsm-tile {
    outline: none;
    cursor: pointer;
}

.gsm-shape {
    stroke-width: 2.5px;
    transition: transform 0.15s ease, filter 0.15s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.gsm-tile:hover .gsm-shape,
.gsm-tile:focus-visible .gsm-shape,
.gsm-tile.is-active .gsm-shape {
    transform: translateY(-5px);
    filter: drop-shadow(0 8px 10px rgba(25, 23, 38, 0.28));
}

/* --- State name labels: plain SVG text so they scale crisply with the
   viewBox at any screen size (a nested HTML/foreignObject label would not
   reflow the same way). A background-colored stroke behind the glyphs
   works as a readability halo over the colored shapes underneath. --- */
.gsm-label {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 13px;
    fill: var(--ink);
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 4px;
    stroke-linejoin: round;
}

.gsm-label-small {
    font-size: 11px;
}

/* --- Eight-color rotation, two states each --- */
.gsm-c1 .gsm-shape { fill: var(--color-nom-bg); stroke: var(--color-nom); }
.gsm-c2 .gsm-shape { fill: var(--color-acc-bg); stroke: var(--color-acc); }
.gsm-c3 .gsm-shape { fill: var(--color-irr-bg); stroke: var(--color-irr); }
.gsm-c4 .gsm-shape { fill: var(--color-coo-bg); stroke: var(--color-coo); }
.gsm-c5 .gsm-shape { fill: var(--color-sub-bg); stroke: var(--color-sub); }
.gsm-c6 .gsm-shape { fill: var(--color-neg-bg); stroke: var(--color-neg); }
.gsm-c7 .gsm-shape { fill: var(--gsm-green-bg); stroke: var(--gsm-green); }
.gsm-c8 .gsm-shape { fill: var(--gsm-brown-bg); stroke: var(--gsm-brown); }

/* --- Floating popup: a single shared card that JS repositions to sit
   right over whichever state was hovered/focused/tapped, instead of a
   fixed panel below the map. left/top are set inline by JS per state;
   the transform anchors the popup's bottom-center to that point so it
   opens upward, directly above the shape that triggered it. --- */
.gsm-popup {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    width: 220px;
    max-width: 68vw;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 14px 16px;
    text-align: left;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
}

/* JS adds this when a state sits too close to the map's top edge for the
   popup to open upward without overlapping the heading above the card. */
.gsm-popup.gsm-popup-below {
    transform: translate(-50%, 14px);
}

.gsm-popup-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.gsm-popup-de {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 2px;
}

.gsm-popup-en {
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin: 0 0 10px;
}

.gsm-popup-capital {
    display: block;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
    margin-bottom: 6px;
}

.gsm-popup-fact {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 560px) {
    .cj-course-card {
        padding: 32px 24px;
    }

    .gsm-map-card {
        padding: 18px 14px;
    }

    .gsm-label {
        font-size: 20px;
    }

    .gsm-label-small {
        font-size: 16px;
    }

    .gsm-popup {
        width: 190px;
        padding: 12px 14px;
    }
}