/* Wealth Note - 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;

    /* The app's "Teal Ledger" palette (lib/core/theme/app_colors.dart, the
       2026 redesign; the site was navy, steel and copper until then). Named
       for the job, so a palette change is values only. */
    --brand: #0E5E63;        /* header, hero, footer: white on it is 7.5 */
    --brand-deep: #0A4A4E;   /* the hero's far stop: white on it is 10.0 */
    --accent: #F0A860;       /* apricot: a ground (buttons), never small text */
    --bg: #F5F3EF;
    --surface: #FFFFFF;
    --text-primary: #14201F;
    --text-secondary: #4D5B59;
    --divider: #E0DCD5;
    --income: #00745F;

    /* The accent as text on the page: apricot itself is 1.81 on the ground (this is 5.18). */
    --link-hover: #9A5418;

    /* Text that sits ON the accent: the app's onSecondary, 8.34 on apricot. */
    --on-accent: #14201F;

    /* Header and footer are teal in both themes, so their text does not swap.
       Apricot is 3.7 on the teal -- enough for a focus ring or an underline,
       not for text, so hover and the current page are white and underlined. */
    --on-brand: rgba(255,255,255,0.85);   /* 5.9 */
    --on-brand-strong: #FFFFFF;
    --footer-text: rgba(255,255,255,0.75); /* 5.0 */

    /* Keyboard focus on the page; on the teal grounds it is the accent. */
    --focus: #0E5E63;        /* 6.77 on the page */
}

/* 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. The teal grounds stay as
   they are: white keeps its 7.5 on them. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0B1213;            /* darkBackground */
        --surface: #131C1E;       /* darkSurface */
        --text-primary: #ECF1F0;  /* darkTextPrimary */
        --text-secondary: #9FB1AE;/* darkTextSecondary */
        --divider: #22302F;       /* darkDivider */
        --income: #3FD0B0;        /* darkIncome */
        /* On the dark ground apricot reads as text (9.44). */
        --link-hover: var(--accent);
        /* The light teal of the app's dark theme: 9.09 on the page. */
        --focus: #5EC4BB;
    }
}

*, *::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(--focus);
    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(--accent);
    color: var(--on-accent);
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
}
.skip-link:focus {
    left: 0;
}

/* On the teal grounds the page's teal ring would vanish: the accent there. */
.header :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.page-banner :focus-visible {
    outline-color: var(--accent);
}

/* ── Header ── */
.header {
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    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;
}

.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-brand);
    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 {
    /* White, underlined in apricot: apricot as text is 3.7 on the teal. */
    color: var(--on-brand-strong);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* ── Footer ── */
.footer {
    background: var(--brand);
    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;
}

.footer-nav a:hover {
    /* On the teal: white and underlined, as in the header. */
    color: var(--on-brand-strong);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
}

/* ── Shared responsive ── */
@media (max-width: 520px) {
    .header-nav { gap: 16px; }
    .footer-inner { flex-direction: column; text-align: center; }
}

/* Under 414 px the name and three links did not fit one line: the name broke
   in two and the bar grew from 76 to 96 px. Smaller type keeps one line down
   to 360 px; below that the name is for screen readers only (the icon stays). */
.header-brand span { white-space: nowrap; }
@media (max-width: 413px) {
    .header-inner { padding: 0 16px; }
    .header-brand { gap: 10px; }
    .header-brand span { font-size: 17px; }
    .header-nav { gap: 10px; }
    .header-nav a { font-size: 14px; }
}
@media (max-width: 359px) {
    .header-brand span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}