/* UntilThen - shared by index, privacy and terms.
 *
 * These rules were copied into all three pages, which is how privacy and terms
 * came to differ from index without anyone deciding they should. One copy now:
 * a change here reaches every page. */

:root {
    /* Tells the browser both themes are handled, so it stops applying its own
       forced-dark filter -- which mangles a page that has real dark styles. */
    color-scheme: light dark;

    --navy: #1A1A24;
    --steel-blue: #5B3FD9;
    --copper: #E8A849;
    --bg: #FAFBFC;
    --surface: #FFFFFF;
    --text-primary: #1A1B23;
    --text-secondary: #6B7280;
    --divider: #E4E5E9;
    --success: #3A7D44;

    /* Header and footer are navy in both themes, so their text does not swap. */
    /* Copper is a *ground* colour: at 2.21 on the page background it fails AA
       as text. This is the darkened version for text use in light mode. */
    --link-hover: #966C2F;

    /* Text that sits ON the accent. Dark here because this accent is light —
       white on it is 2.31, which fails. An app with a dark accent defines this
       light instead; nothing else changes. Named for the job, not the colour,
       so it is not a ground token doing a text token's work. */
    --on-accent: #1A1A24;

    --on-navy: rgba(255,255,255,0.85);
    --on-navy-strong: #FFFFFF;
    --footer-text: rgba(255,255,255,0.7);
}

/* Dark, lifted from the app's own palette in lib/core/theme/app_colors.dart so
   the site and the product look like the same thing. Only tokens are
   redefined; every rule below styles through them. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0D0D12;            /* darkBackground */
        --surface: #252532;       /* darkSurface */
        --text-primary: #F5F5F7;  /* darkTextPrimary */
        --text-secondary: #9CA3AF;/* darkTextSecondary */
        --divider: #2E2E3C;       /* darkDivider */
        /* --steel-blue deliberately NOT lightened. It is only ever a gradient
           stop under white text, and the app's own primary has never had the
           headroom for that: it was #7C5CFF at 4.35 (below AA), and since #76
           it is #6C48FF at 5.24 - which passes, but leaves almost nothing
           spare for 15px nav links. Kept at primaryDark #5B3FD9, where white
           is 6.65 in both themes. */

        /* On the dark ground the brand amber measures 9.35, so text uses it
           directly and only the light theme needs the darkened variant. */
        --link-hover: var(--copper);
    }
}

*, *::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-primary);
    background: var(--bg);
    line-height: 1.6;
}

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

/* Keyboard users could not see where they were: privacy and terms had no focus
   styling at all, and index only had :focus-within for pausing the marquee.
   :focus-visible so it appears for keyboards and not for mouse clicks. */
:focus-visible {
    outline: 3px solid var(--copper);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Off-screen until focused, then the first stop on the page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--copper);
    /* --on-accent, not --navy: they happen to be equal here, but --navy is a
       ground token and would silently stop working if either were retuned. */
    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(--navy), var(--steel-blue));
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

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

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    /* A link like any other in the header, so it meets the same 44px floor;
       the 36px icon alone left it short. */
    min-height: 44px;
}

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

.header-brand span {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
}

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

.header-nav a {
    color: var(--on-navy);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
    /* The hit area was the text, ~20px tall. Padding brings it to 44px without
       moving anything, since the header centres its row. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
}

.header-nav a:hover,
.header-nav a.active {
    /* Measured, not inherited: the kit uses --copper here, which reads 8.32 on
       --navy but only 3.21 on the --steel-blue end of the header gradient, so a
       link fails AA depending on where it sits in the row. --on-navy-strong is
       17.25 and 6.65 at the two stops. secondaryLight was the near miss at
       4.46. */
    color: var(--on-navy-strong);
}

/* ── Footer ── */
.footer {
    background: var(--navy);
    color: var(--footer-text);
    padding: 36px 24px;
}

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

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

.footer-nav {
    display: flex;
    gap: 24px;
}

.footer-nav a {
    font-size: 14px;
    transition: color 0.2s;
    /* Same 44px floor as the header nav; these were 21px, the height of the
       text. The footer row centres, so this changes no layout. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.footer-nav a:hover { color: var(--copper); }  /* solid navy: 8.32, passes */

/* ── Shared responsive ── */
@media (max-width: 640px) {
    /* Four nav items, not the kit's three: on a 360px phone the single row
       measured 405px against a 360px viewport and scrolled the whole page
       sideways. Wrapping to a second line is the only thing that fits without
       abbreviating a label. */
    .header-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 0;
    }
    .header-nav {
        gap: 18px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-nav { flex-wrap: wrap; justify-content: center; }
}