/* Nix - shared by index, privacy, terms and 404.
 *
 * One copy for every page: a change here reaches all four. Every colour is a
 * token named for its JOB, taken from lib/core/theme/app_palette.dart so the
 * site and the app look like the same thing. Each text/ground pair below was
 * measured (WCAG 2.x); the table is in README.md. */

:root {
    /* Tells the browser both themes are handled, so it stops applying its own
       forced-dark filter. */
    color-scheme: light dark;

    /* Page grounds (light). */
    --bg: #FAFAF7;              /* background */
    --surface: #FFFFFF;         /* surface: the download band */
    --card: #FFFFFF;            /* card: feature cards */
    --divider: #E5E3DE;         /* divider */

    /* Text on page grounds. */
    --text: #1C1C1E;            /* textPrimary */
    --text-secondary: #5C5C5C;  /* textSecondary: 6.4 on bg, 6.7 on card */

    /* Brand. --accent is a GROUND (a button fill), never text on the page:
       #D32F2F as text on #FAFAF7 is 4.76, but the app keeps a separate darker
       red for words, and so does the site. */
    --accent: #D32F2F;          /* accent */
    --accent-hover: #B71C1C;    /* pressed fill; white on it is 6.57 */
    --on-accent: #FFFFFF;       /* onAccent: 4.98 on --accent */
    --accent-text: #B71C1C;     /* accentText: red words on bg/card, 6.3+ */

    /* Chrome: the header, footer, hero and page banners are dark in BOTH
       themes (the app icon's own ground), so their text never swaps. */
    --chrome: #0D0D0D;
    --chrome-end: #1A1A2E;      /* burnGradient start */
    --hero-end: #16213E;        /* burnGradient end */
    --on-chrome: #FFFFFF;
    --on-chrome-muted: rgba(255,255,255,0.8);
    --on-chrome-link: #FF6B61;  /* dark accentText: 5.5+ on every chrome stop */

    /* Focus rings: 3:1 against what they sit on (non-text contrast). */
    --focus-ring: #B71C1C;
    --focus-ring-on-chrome: #FF6B61;

    /* The store button copies the store badges: black in both themes. */
    --store-btn: #000000;
    /* Its edge must show on the dark theme's #1A1A1A band: 4.41 at 0.5
       (0.28 measured 1.87). */
    --store-btn-border: rgba(255,255,255,0.5);
    --on-store-btn: #FFFFFF;
    --on-store-btn-muted: rgba(255,255,255,0.82);
}

/* Dark, from AppPalette.dark. Only tokens are redefined; every rule below
   styles through them. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0D0D0D;              /* background */
        --surface: #1A1A1A;         /* surface */
        --card: #242424;            /* card */
        --divider: #2E2E2E;         /* divider */
        --text: #FFFFFF;            /* textPrimary */
        --text-secondary: #B0B0B0;  /* textSecondary */
        --accent-text: #FF6B61;     /* accentText (dark) */
        --focus-ring: #FF6B61;
    }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    /* Long words (URLs, German compounds) wrap instead of widening the page. */
    overflow-wrap: break-word;
}
/* Short pages (404) keep the footer at the bottom of the window. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }

/* :focus-visible so it appears for keyboards and not for mouse clicks. */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}
/* On the dark chrome the light theme's dark-red ring would be 2.6:1. */
.header :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.page-banner :focus-visible,
.skip-link:focus-visible {
    outline-color: var(--focus-ring-on-chrome);
}

/* Off-screen until focused, then the first stop on the page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
}
.skip-link:focus {
    left: 0;
}

/* ── Header ── */
.header {
    background: linear-gradient(135deg, var(--chrome), var(--chrome-end));
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.header-brand img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.header-brand span {
    font-size: 20px;
    font-weight: 700;
    color: var(--on-chrome);
}

.header-nav {
    display: flex;
    gap: 28px;
}

.header-nav a {
    color: var(--on-chrome-muted);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
    /* 44px hit area without moving anything: the header centres its row. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    white-space: nowrap;
}

.header-nav a:hover,
.header-nav a.active {
    color: var(--on-chrome-link);
}

/* ── Page banner (privacy, terms, 404) ── */
.page-banner {
    background: linear-gradient(160deg, var(--chrome-end) 0%, var(--hero-end) 100%);
    padding: 56px 24px;
    text-align: center;
    color: var(--on-chrome);
}
.page-banner h1 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}
.page-banner p {
    color: var(--on-chrome-muted);
    font-size: 15px;
}

/* ── Legal / text content ── */
.content {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}
.content h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 12px;
}
.content h2:first-child { margin-top: 0; }
.content h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 8px;
}
.content p { margin-bottom: 16px; }
.content ul {
    margin-bottom: 16px;
    padding-left: 24px;
}
.content li { margin-bottom: 8px; }
/* Links in running text must look like links: colour AND underline. */
.content a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.content a:hover { color: var(--text); }

/* ── Footer ── */
.footer {
    background: var(--chrome);
    color: var(--on-chrome-muted);
    border-top: 1px solid var(--divider);
    padding: 28px 24px;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.footer-copy { font-size: 14px; }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.footer-nav a {
    font-size: 14px;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.footer-nav a:hover { color: var(--on-chrome-link); }

/* ── Shared responsive ── */
@media (max-width: 520px) {
    .header-inner { padding: 0 16px; }
    .header-nav { gap: 12px; }
    .header-nav a { font-size: 14px; }
    .page-banner { padding: 40px 16px; }
    .page-banner h1 { font-size: 28px; }
    .content { padding: 36px 16px 64px; }
    .footer { padding: 24px 16px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-nav { justify-content: center; }
}