/* The /legal/* pages — privacy, AI transparency, licenses.
 *
 * Deliberately NOT an extraction of Index.cshtml's inline block. The tokens and
 * the header/footer chrome below are a knowing COPY of Index.cshtml:35-49 and its
 * Header/Footer sections: pulling the home page's 478 lines apart for three legal
 * pages would put the article's sticky rail and the reco tree at risk for no gain
 * here, and this is fifteen tokens plus the chrome that carries them. Index.cshtml
 * is the source of truth for the palette — if a token changes there, change it
 * here too. Everything below the chrome is this file's own.
 *
 * The pill classes (.nav-lang-btn / .nav-flag / .nav-lang-on) are what HomeLang.js
 * generates; they have to exist here or the language selector renders unstyled.
 */

:root {
    --cb-red: #B51634;
    --cb-red-hover: #d8011e;
    --cb-grad: linear-gradient(to right, #de0e1f, #992721);
    --ink: #111827;
    --body: #374151;
    --muted: #4b5563;
    --faint: #6b7280;
    --border: #e0e0e0;
    --grey: #f5f5f5;
    --cream: #f2efe6;
    --serif: "Merriweather", Georgia, serif;
    --ui: "Montserrat", "Segoe UI", sans-serif;
    --shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; color: var(--body); font: 16px/1.6 var(--serif); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; }

/* ── Header (copy of Index.cshtml's, minus the account row and the CTA) ── */
header { border-bottom: 1px solid #eee; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: block; }
.brand-name { font: 800 20px var(--ui); color: var(--ink); letter-spacing: .2px; }
.brand-by { font: 600 11px var(--ui); color: var(--faint); letter-spacing: .6px; text-transform: uppercase; margin-top: 2px; }
.nav-right { display: flex; align-items: center; gap: 20px; font: 600 13px var(--ui); color: var(--muted); }
.nav-right a { text-decoration: none; }
.nav-right a:hover { color: var(--cb-red); }

.nav-langs { display: inline-flex; align-items: center; gap: 4px; }
.nav-lang-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font: 700 11px var(--ui); letter-spacing: .04em; color: var(--faint);
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    padding: 3px 9px 3px 6px; cursor: pointer;
}
.nav-lang-btn:hover { color: var(--ink); border-color: var(--cb-red); background: var(--grey); }
.nav-lang-on { color: var(--ink); border-color: var(--cb-red); background: var(--grey); }
.nav-flag {
    width: 16px; height: 11px; border-radius: 2px; display: block;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, .18);
    opacity: .5; filter: saturate(.4);
}
.nav-lang-on .nav-flag, .nav-lang-btn:hover .nav-flag { opacity: 1; filter: none; }

/* ── The page itself ── */
/* One measured column. A legal notice is read, not scanned across a dashboard,
   so the text column is narrower than .wrap and the headings hang above it. */
.legal { max-width: 74ch; padding: 40px 24px 64px; }
.legal-kicker {
    display: inline-block; font: 700 12px var(--ui); letter-spacing: .5px;
    text-transform: uppercase; color: var(--cb-red);
}
.legal h1 { font: 700 38px/1.18 var(--serif); color: var(--ink); margin: 12px 0 14px; }
.legal-lead { font: 400 17px/1.7 var(--serif); color: var(--muted); margin: 0 0 6px; }
/* When this page's own facts were last checked — a legal notice with no date is
   a legal notice nobody can date. */
.legal-stamp { font: 600 12px var(--ui); color: var(--faint); margin: 14px 0 0; }

/* "Not translated yet", the same idiom (and the same honesty) as the article
   block's #art-langnote: written in the language that was ASKED for, because it
   is addressed to the reader who chose it. */
.legal-langnote {
    font: 600 13px var(--ui); color: var(--muted);
    background: var(--cream); border-left: 3px solid var(--cb-red);
    padding: 10px 14px; margin: 20px 0 0; border-radius: 0 4px 4px 0;
}
.legal-langnote[hidden] { display: none; }

/* Section list at the top — a privacy notice with nine sections needs one. */
.legal-toc { margin: 26px 0 0; padding: 16px 18px; background: var(--grey); border-radius: 8px; }
.legal-toc h2 { font: 700 12px var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; }
.legal-toc ol { margin: 0; padding-left: 22px; font: 400 14px/1.9 var(--serif); }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--cb-red); text-decoration: underline; }

.legal section { margin-top: 38px; }
/* scroll-margin so a #cookies jump does not tuck the heading under nothing —
   the header is not sticky here, but the top of the viewport is still a bad
   place for a heading to land. */
.legal section > h2 { font: 700 22px/1.3 var(--serif); color: var(--ink); margin: 0 0 12px; scroll-margin-top: 20px; }
.legal h3 { font: 700 15px var(--ui); color: var(--ink); margin: 24px 0 8px; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol.legal-list { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--cb-red); }
.legal strong { color: var(--ink); }
.legal code {
    font: 400 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
    background: var(--grey); border: 1px solid var(--border); border-radius: 3px;
    padding: 1px 5px; color: var(--ink); overflow-wrap: anywhere;
}

/* A fact worth pulling out of the prose — "exactly one cookie", "we never see
   your key". The claim, not the decoration. */
.legal-note {
    border-left: 3px solid var(--border); padding: 2px 0 2px 16px; margin: 0 0 16px;
    font: 400 15px/1.65 var(--serif); color: var(--muted);
}
.legal-note strong { color: var(--ink); }

/* Attribution rows on the licenses page, and the key/value rows of the imprint
   block. Two columns on desk, stacked on a phone. */
.legal-defs { margin: 0 0 18px; }
.legal-defs > div {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 4px 20px;
    padding: 10px 0; border-top: 1px solid var(--border);
}
.legal-defs > div:last-child { border-bottom: 1px solid var(--border); }
.legal-defs dt, .legal-defs .dt { font: 700 14px var(--ui); color: var(--ink); }
.legal-defs dd, .legal-defs .dd { margin: 0; font: 400 14px/1.6 var(--serif); color: var(--muted); }

/* ── Footer (copy of Index.cshtml's Footer block) ── */
footer { border-top: 1px solid #eee; padding: 26px 0 34px; margin-top: 26px; }
.foot { display: flex; flex-direction: column; gap: 12px;
        font: 600 12px var(--ui); color: var(--faint); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cb-red); }
.foot-links { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; row-gap: 7px; }
.foot-links a { color: var(--muted); }
.foot-legal { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; font-weight: 400; }
.foot-ai { font-style: italic; }

@media (max-width: 700px) {
    .nav { height: auto; padding: 12px 0; flex-wrap: wrap; }
    .legal h1 { font-size: 30px; }
    .legal-defs > div { grid-template-columns: 1fr; }
}