/*
 * Shared stylesheet for every static blog page (index, de/, ka/, each post). One file so the palette,
 * contrast and tap targets cannot drift page to page (audit 2026-10-19 F2, F15, F16, F17).
 *
 * Colors mirror the landing's own tokens (landing/src/index.css --bg-main / --gold-brand) so the blog
 * reads as the same product, not a second site.
 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/archivo-400-500-600.woff2") format("woff2");
}
:root {
  /* Owner palette 2026-10-20: direction C "Nachtzug" (night indigo), dark default. Matches
     landing/src/index.css + tokens.css :root exactly. --gold here is used as TEXT (nav brand
     wordmark), so it carries the "reward-text" value, not the brighter reward fill — same split
     tokens.css makes with --gold-text vs --flag-gold. */
  --bg: #090a1d; --surface: #12132a; --text: #eceef9; --muted: #a8acc8;
  --border: #2a2e49; --accent: #3dd7cf; --gold: #febf32;
  /* Text color placed ON the solid accent button: dark ink reads on the dark-mode teal, which is
     bright, not white. */
  --on-accent: #0a0b1e;
}
@media (prefers-color-scheme: light) {
  :root {
    /* Direction A "Ostsee" (sea-glass) — matches the landing's light bg-main exactly. Owner
       follow-up 2026-10-20 ("too shiny, harmonize"): bg/surface tightened into the same calm
       ~92-96 L* band as tokens.css instead of jumping to near-white. */
    --bg: #e3edef; --surface: #edf5f6; --text: #101e2d; --muted: #495b67;
    --border: #d2dee0; --accent: #076b72; --gold: #885700;
    --on-accent: #ffffff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7; letter-spacing: -0.01em;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
nav.top { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; align-items: center; padding: 0.75rem 0 1rem; font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
nav.top .brand { color: var(--gold); text-decoration: none; font-size: 1.15rem; letter-spacing: -0.02em; min-height: 44px; display: inline-flex; align-items: center; }
nav.top .links { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; font-size: 0.85rem; }
nav.top .links a { color: var(--muted); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.25rem; }
nav.top .links a:hover { color: var(--accent); }
nav.top .play { color: var(--on-accent) !important; background: var(--accent); padding: 0.45rem 0.9rem; border-radius: 0.65rem; font-weight: 800; }

h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.15; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.35rem; font-weight: 800; margin: 2rem 0 0.5rem; }
.meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
p, li { font-size: 1.05rem; }
ul { padding-left: 1.25rem; }
li { margin: 0.35rem 0; }
.ex { font-weight: 700; }
/* "A1-C2" must never break across lines (audit F15). */
.cefr-range { white-space: nowrap; }

.lead { color: var(--muted); margin-bottom: 2rem; }
.post {
  display: block; padding: 1.25rem 0; border-top: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.post:hover h2 { color: var(--accent); }
.post h2 { margin: 0 0 0.35rem; font-size: 1.25rem; font-weight: 800; }
.post p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.post .lang-note { color: var(--muted); font-size: 0.85rem; font-style: italic; }

.cta {
  display: inline-block; margin-top: 2rem; padding: 0.9rem 1.5rem; border-radius: 0.9rem;
  background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none;
  min-height: 44px;
}

.level-links { margin: 0 0 2rem; font-size: 0.95rem; color: var(--muted); }
.level-links a {
  font-weight: 700; margin-right: 0.35rem; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.4rem;
}

footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
footer a { min-height: 44px; display: inline-flex; align-items: center; }

.answer { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 1.25rem 0 1.5rem; }
.answer p { margin: 0.25rem 0; }

/* Tables scroll inside their own box at narrow widths rather than widening the page (audit F18). */
.table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--muted); font-size: 0.85rem; padding-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 800; }
td.num, th.num { text-align: right; white-space: nowrap; }

.faq details { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
.faq summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.faq summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.method { color: var(--muted); font-size: 0.92rem; margin-top: 2rem; }
.related { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.75rem 1.25rem; margin-top: 2rem; }
.related h2 { margin-top: 0.5rem; font-size: 1.1rem; }

/* A concrete handoff from the guide to the existing game, using the blog's type and palette. */
.practice { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.practice h2 { margin-top: 0; }
.practice .cta { margin-top: 0.25rem; }
.practice-note { color: var(--muted); font-size: 0.92rem; }