/* theme.css: the look of IRF for NGOs, shared by every page.
   Navy for the hero, the bars and the headings. Green for the main button. Gold and amber for a
   second button and for highlights. White cards with a navy top edge on a warm off-white page.
   Display type is Source Serif 4, body type is DM Sans. Both are served from ../assets/fonts, so
   no page calls another site. The system fonts stay in the stack as the fallback.
   Light theme only. Each page stylesheet loads after this one and adds the rules for its own page.
   The tokens below are the only place a colour or a font is chosen. */

/* ---------- fonts (SIL Open Font Licence, files and licences in ../assets/fonts) ---------- */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }

/* ---------- tokens ---------- */

:root {
    color-scheme: light;

    /* brand */
    --navy: #1b3a5c;
    --navy-dark: #0f2440;
    --navy-hover: #234a75;
    --green: #3a7d5e;
    --green-dark: #2e6a4e;
    --gold: #bf8c00;
    --amber: #e6a817;
    --gold-ink: #7a5800;

    /* paper and ink */
    --bg: #fafaf8;
    --card: #ffffff;
    --ink: #1f2a33;
    --muted: #55606a;
    --line: #dcdcd4;
    --line-strong: #aeb4ac;
    --strip-bg: #f6f6f2;
    --pill-bg: #eaf0f6;
    --pill-ink: #1b3a5c;
    --tint: rgba(27, 58, 92, 0.07);
    --tint-strong: rgba(27, 58, 92, 0.13);
    --link: #1b3a5c;

    /* text on navy */
    --on-navy: #ffffff;
    --on-navy-soft: #dbe5f0;
    --on-navy-muted: #b9c9dc;
    --navy-line: rgba(255, 255, 255, 0.22);

    /* buttons */
    --btn-bg: var(--green);
    --btn-bg-hover: var(--green-dark);
    --btn-ink: #ffffff;
    --btn-alt-bg: #ffffff;
    --btn-alt-ink: var(--navy);

    /* forms, focus, messages */
    --field-bg: #ffffff;
    --field-line: #7b8791;
    --focus: #a85f00;
    --focus-on-dark: #ffc857;
    --danger: #9b2c1f;
    --warn: #8a2b1d;
    --warn-bg: #fbecea;
    --ok: #1d6b3a;
    --note-bg: #fff6e0;
    --note-line: #9a6a00;
    --shade: rgba(20, 26, 32, 0.46);

    /* verdicts */
    --v-yes: #2e7d57;
    --v-yes-bg: #edf6f0;
    --v-cond: #9a6a00;
    --v-cond-bg: #fff6e0;
    --v-wait: #a8480a;
    --v-wait-bg: #fdf0e6;
    --v-no: #37557d;
    --v-no-bg: #eaf0f8;
    --v-none: #5f6770;
    --v-none-bg: #f0f1f2;

    /* shape */
    --radius: 8px;
    --radius-sm: 5px;
    --shadow: 0 4px 20px rgba(15, 36, 64, 0.12);
    --shadow-soft: 0 2px 10px rgba(15, 36, 64, 0.08);

    /* type */
    --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: clamp(2rem, 5.5vw, 2.75rem);
    --fs-hero: clamp(2.5rem, 8vw, 4rem);

    /* widths */
    --w-page: 68rem;
    --w-read: 46rem;
    --w-wide: 56rem;
    --gutter: 16px;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 var(--fs-base)/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: var(--navy); }
a { color: var(--link); }
a:hover { color: var(--green-dark); }
strong, b { font-weight: 600; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hero, .bar, .fc-top, .top, .td-top, .board-head, .page-bar, .pack-back, .foot, .fc-foot, .td-foot, .board-foot { --focus: var(--focus-on-dark); }

.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 40rem) { :root { --gutter: 32px; } }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
    position: absolute; left: 16px; top: -64px; z-index: 30;
    padding: 10px 14px;
    background: var(--navy-dark); color: var(--on-navy);
    border: 2px solid var(--focus-on-dark); border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: var(--on-navy); }

/* ---------- the navy bar at the top of every page, and the navy foot ----------
   Each page keeps its own header element and class; the bar look is shared here.
   A pseudo-element behind the bar runs the colour to both edges of the window without changing the page markup.
   Every bar sits in a centred column, so 50% and half the window width reach both edges. The body clips the few
   pixels a desktop scrollbar adds, so the page never scrolls sideways. */

body { overflow-x: hidden; }

/* The page fills the window, so a short page keeps its navy foot at the bottom instead of mid-screen.
   The column that holds the foot grows; its <main> takes the spare space below the content. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > .wrap, body > .fc-wrap, body > .td-wrap { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }
body > .wrap > main, body > .fc-wrap > main, body > .td-wrap > main { margin-bottom: auto; }
body > .board-main, body > .page, body > .brief-page { flex: 1 0 auto; }

.bar, .fc-top, .top, .td-top, .board-head, .page-bar, .pack-back, .foot, .fc-foot, .td-foot, .board-foot {
    position: relative;
    color: var(--on-navy-soft);
}
.bar::before, .fc-top::before, .top::before, .td-top::before, .board-head::before, .page-bar::before,
.pack-back::before, .foot::before, .fc-foot::before, .td-foot::before, .board-foot::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    z-index: -1;
    background: var(--navy-dark);
}
.bar a, .fc-top a, .top a, .td-top a, .board-head a, .page-bar a, .pack-back a, .foot a, .fc-foot a, .td-foot a, .board-foot a {
    color: var(--on-navy-soft);
}
.bar a:hover, .fc-top a:hover, .top a:hover, .td-top a:hover, .board-head a:hover, .page-bar a:hover, .pack-back a:hover,
.foot a:hover, .fc-foot a:hover, .td-foot a:hover, .board-foot a:hover { color: #ffffff; }
.bar-name, .fc-home, .home, .td-home, .board-home, .page-bar a:first-child, .pack-back a {
    font: 600 1.1rem/1.2 var(--serif);
    color: var(--on-navy);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.bar-expansion { color: var(--on-navy-muted); font-size: var(--fs-sm); }

.foot, .fc-foot, .td-foot, .board-foot { color: var(--on-navy-muted); }
.foot { margin-top: 72px; padding: 28px 0 40px; font-size: var(--fs-sm); }
.foot p { margin: 0 0 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }

/* ---------- headings and text ---------- */

.page-title, .section-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
}
.section-title { font-size: var(--fs-2xl); line-height: 1.2; }
.section-title::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 10px; background: var(--amber); border-radius: 2px; }
.lede { font-size: var(--fs-lg); line-height: 1.55; }

.section { padding: 56px 0 0; }
.section > .section-title { margin-bottom: 20px; }
.what { margin: 16px 0 0; max-width: 40rem; font-size: var(--fs-lg); line-height: 1.55; }

/* a plain ordered list of steps, used where the steps read down the page */
.steps { margin: 0; padding: 0; list-style: none; max-width: 46rem; }
.step { padding: 14px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-name { display: block; font: 700 1.1rem/1.3 var(--serif); color: var(--navy); }
.step-line { display: block; margin-top: 2px; }
@media (min-width: 40rem) {
    .step { display: grid; grid-template-columns: 13rem 1fr; gap: 0 24px; align-items: baseline; }
    .step-line { margin-top: 0; }
}

/* ---------- buttons ---------- */

.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font: 600 0.95rem/1.25 var(--sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--green); border-color: var(--green); color: #ffffff; }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #ffffff; }
.btn-secondary { background: #ffffff; border-color: var(--navy); color: var(--navy); }
.btn-secondary:hover { background: var(--tint); color: var(--navy); }
.btn-gold { background: var(--amber); border-color: var(--amber); color: var(--navy-dark); }
.btn-gold:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); box-shadow: 0 2px 8px rgba(191, 140, 0, 0.3); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }

/* ---------- cards ---------- */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--navy);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

/* ---------- pills: small uppercase labels on light blue, and round filter toggles ---------- */

.pill {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 4px;
    background: var(--pill-bg);
    color: var(--pill-ink);
    font: 600 0.72rem/1.3 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pill-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #ffffff;
    color: var(--navy);
    font: 500 0.9rem/1.2 var(--sans);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pill-toggle:hover { border-color: var(--navy); background: var(--tint); }
.pill-toggle[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.pill-toggle[aria-pressed="true"]:hover { background: var(--navy-hover); }

/* ---------- stat strip: large numbers over small uppercase captions ---------- */

.stats { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.stat { flex: 1 1 8rem; text-align: center; padding: 14px 8px; }
.stat-num { display: block; font: 700 2.25rem/1.1 var(--sans); color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-cap { display: block; margin-top: 4px; font: 500 0.72rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- hero ---------- */

.hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: var(--on-navy);
    padding: 56px 0 56px;
}
.hero h1, .hero h2 { color: var(--on-navy); }
.hero a { color: var(--on-navy); }
.hero-title { margin: 0; font: 700 var(--fs-hero)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--on-navy); }
.hero-sub { margin: 10px 0 0; font: 600 clamp(1.15rem, 3.4vw, 1.6rem)/1.3 var(--serif); color: var(--on-navy-soft); }
.hero-meta { margin: 6px 0 0; color: var(--on-navy-muted); font-size: var(--fs-sm); }
.hero-text { margin: 28px 0 0; max-width: 40rem; font-size: var(--fs-lg); line-height: 1.55; color: var(--on-navy-soft); }
.hero-text + .hero-text { margin-top: 12px; }
@media (min-width: 40rem) { .hero { padding: 80px 0 72px; } }

/* ---------- forms ---------- */

:where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="tel"], select, textarea) {
    font: inherit;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--field-line);
    border-radius: var(--radius-sm);
}
:where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="tel"], select) { min-height: 44px; padding: 8px 12px; }
:where(textarea) { padding: 10px 12px; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--navy); }

/* a file input hidden under a link-looking label */
.file-pick { position: relative; display: inline-block; color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.file-pick input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.file-pick:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    body { background: #ffffff; color: #000000; }
    .hero { background: none; color: #000000; padding: 0 0 12pt; }
    .hero .hero-title, .hero .hero-sub, .hero .hero-meta, .hero .hero-text, .hero a { color: #000000; }
    .bar, .fc-top, .top, .td-top, .board-head, .page-bar, .pack-back, .foot, .fc-foot, .td-foot, .board-foot { color: #000000; }
    .bar::before, .fc-top::before, .top::before, .td-top::before, .board-head::before, .page-bar::before,
    .pack-back::before, .foot::before, .fc-foot::before, .td-foot::before, .board-foot::before { display: none; }
    .bar a, .fc-top a, .top a, .td-top a, .board-head a, .page-bar a, .pack-back a, .foot a, .fc-foot a, .td-foot a, .board-foot a,
    .bar-name, .fc-home, .home, .td-home, .board-home, .bar-expansion { color: #000000; }
    .card { box-shadow: none; }
}

/* ---------- the four acts: About you, Your problems, What might fit, Is it a fit ----------
   One bar per act. Past acts are full, the current act is green and carries its own count, the rest are empty.
   The Conversation and the Fit Check draw the same <ol class="acts">. */

.acts {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin: 0; padding: 0; list-style: none;
}
.acts li {
    border-top: 6px solid var(--line);
    border-radius: 3px;
    padding-top: 6px;
    font: 400 0.8125rem/1.25 var(--sans);
    color: var(--muted);
}
.acts .act-past { border-top-color: var(--navy); }
.acts .act-current { border-top-color: var(--green); color: var(--navy); font-weight: 700; }
.acts .act-count { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }