/*
 * Base styles — reset, typography, layout foundations, global utilities.
 * All values from tokens.css. No magic numbers.
 */

/* ── Reset ──────────────────────────────────────────────────────────────── */

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

html {
    font-size: 100%;  /* 16px base */
    scroll-behavior: smooth;
    /* Sticky/fixed header is 80px + 14px pad (64px on mobile); keep in-page
       anchor targets (e.g. about.html#trustees) clear of it when jumped to. */
    scroll-padding-top: 6.5rem;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography — Besley headings (H1–H6) ───────────────────────────────── */
/*
 * HTML headings use Besley. The .display class overlays Circus Heavy
 * for hero moments without disrupting the semantic H1-H6 hierarchy.
 * (Per Figma style guide: "display text should be selected by a class
 * attribute and not affect the H1-6 hierarchy.")
 */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);  /* Besley */
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--color-text-primary);
    /* Global widow/orphan guard: browser balances heading lines so no lone
       word lands on the last line. Low element-specificity — component rules
       that hand-set `balance`/`nowrap` (blocks.css) still override. */
    text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: 500; }  /* 36px */
h2 { font-size: var(--text-h2); }                     /* 26px */
h3 { font-size: var(--text-h3); }                     /* 22px */
h4 { font-size: var(--text-h4); }                     /* 18px */
h5 { font-size: var(--text-h5); }                     /* 16px */
h6 { font-size: var(--text-h6); }                     /* 14px */

@media (max-width: 768px) {
    h1 { font-size: var(--text-h2); }   /* 26px */
    h2 { font-size: var(--text-h3); }   /* 22px */
    h3 { font-size: var(--text-h4); }   /* 18px */
}

@media (max-width: 480px) {
    h1 { font-size: var(--text-h3); }   /* 22px */
    h2 { font-size: var(--text-h4); }   /* 18px */
    h3 { font-size: var(--text-h5); }   /* 16px */
}

/* ── Display class — Circus Heavy ───────────────────────────────────────── */
/*
 * Apply .display to any element that needs the full show-print treatment.
 * Commonly applied to hero h1 elements, section kickers, pull quotes.
 * Size variants .display--h1 through .display--h3 cover the main use cases.
 */

.display,
.display--h1 {
    font-family: var(--font-display);  /* Circus Heavy */
    font-weight: 700;
    letter-spacing: var(--text-display-ls);
    line-height: 1.0;
    font-size: var(--text-display-h1); /* 56px */
}

.display--h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--text-display-ls);
    line-height: 1.05;
    font-size: var(--text-display-h2); /* 46px */
}

.display--h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--text-display-ls);
    line-height: 1.1;
    font-size: var(--text-display-h3); /* 36px */
}

@media (max-width: 768px) {
    .display,
    .display--h1 { font-size: var(--text-display-h2); }  /* 46px */
    .display--h2  { font-size: var(--text-display-h3); } /* 36px */
    .display--h3  { font-size: var(--text-display-h4); } /* 24px */
}

@media (max-width: 480px) {
    .display,
    .display--h1 { font-size: var(--text-display-h3); }  /* 36px */
    .display--h2  { font-size: var(--text-display-h4); } /* 24px */
    .display--h3  { font-size: var(--text-display-h5); } /* 18px */
}

/* ── Body text ──────────────────────────────────────────────────────────── */

p {
    max-width: 68ch;
    margin-block-end: var(--space-3);
    /* Widow/orphan guard for running copy: pulls a word down so the last line
       is never a single short runt. Only affects the final few lines. */
    text-wrap: pretty;
}

li, figcaption, blockquote, dd, dt, caption, summary {
    text-wrap: pretty;
}

/* Short statement paragraphs read like headings, so `balance` (even lines)
   beats `pretty` (which can still leave a single-word last line). These were
   the residual widows from the live-page sweep; `balance` re-flows whatever
   copy lands, so it survives the pending client copy edits. */
.about-answer__note,
.about-story__punch,
.mus-commit__card p {
    text-wrap: balance;
}

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--transition-fast);
}

a:hover { opacity: 0.75; }

/* ── Images — transparency preservation ─────────────────────────────────── */

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

img {
    background: transparent; /* never force a background behind PNGs */
}

/* ── Lists ──────────────────────────────────────────────────────────────── */

ul, ol {
    list-style: none;
}

.entry-content ul { list-style: disc;    padding-inline-start: 1.5em; }
.entry-content ol { list-style: decimal; padding-inline-start: 1.5em; }
.entry-content li { margin-block-end: var(--space-1); }

blockquote {
    font-style: italic;
}

/* ── Focus styles — WCAG 2.2 AA ────────────────────────────────────────── */
/*
 * Fluoro Green (#EAFF1E) focus ring: 14:1 contrast on the dark background.
 * Clearly visible on every surface in the palette.
 */

:focus-visible {
    outline: 3px solid var(--color-highlight);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ── Skip link ──────────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-3);
    z-index: var(--z-modal);
    padding: var(--space-2) var(--space-4);
    background: var(--color-highlight);
    color: var(--color-bg);
    font-family: var(--font-body);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: top var(--transition-fast);
}

.skip-link:focus { top: var(--space-2); }

/* ── Screen reader text ─────────────────────────────────────────────────── */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keep a phrase on one line (break before it, not within it) — normal spacing. */
.nowrap { white-space: nowrap; }

/* Line break that only applies on desktop (≥769px); collapses to a normal space on
   mobile, so mobile wrapping is unaffected. */
.br-desktop { display: none; }
@media (min-width: 769px) {
    .br-desktop { display: inline; }
}

/* ── Layout — container ─────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--site-padding);
}

.container--narrow { max-width: var(--content-width-narrow); }
.container--wide   { max-width: var(--content-width-wide);   }

@media (max-width: 768px) {
    :root { --site-padding: var(--space-4); }
}

@media (max-width: 480px) {
    :root { --site-padding: var(--space-3); }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/*
 * Buttons not yet designed in Figma (Web basics frame is empty).
 * Styles below are provisional — sharp corners honour the print aesthetic;
 * colours are from the confirmed palette. Revisit when Figma button designs land.
 *
 * Contrast checks:
 *   .btn--primary: white (#F5F0E0) on Pink Velvet (#FC086A) ≈ 4.8:1 — AA large/UI.
 *   .btn--secondary: Fluoro Green (#EAFF1E) on Night Ink dark (#15252E) ≈ 14:1 — AAA.
 *   .btn--ghost: text same as secondary.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
    white-space: nowrap;
}

/* Primary — Pink Velvet background, white text */
.btn--primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    opacity: 1;
}

/* Secondary — Fluoro Green outline, Fluoro Green text */
.btn--secondary {
    background-color: transparent;
    border-color: var(--color-highlight);
    color: var(--color-highlight);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background-color: var(--color-highlight);
    color: var(--color-bg);
    opacity: 1;
}

/* Ghost — text only, warm white, underline on hover */
.btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-primary);
    padding-inline: 0;
}
.btn--ghost:hover {
    color: var(--color-highlight);
    opacity: 1;
}

.btn--large {
    font-size: var(--text-md);
    padding: var(--space-3) var(--space-6);
}

/* ── Colour themes ──────────────────────────────────────────────────────── */

.theme--dark {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
}

.theme--surface {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.theme--light {
    /* Light-themed sections (e.g. a bright accent band) */
    background-color: var(--color-highlight);
    color: var(--color-bg);
}

/* ── Section rhythm ─────────────────────────────────────────────────────── */
/*
 * No generic block padding here — each block section defines its own
 * padding-block in the block CSS files. A broad [class^="block-"] selector
 * would match child elements (block-hero__heading, etc.) unintentionally.
 */

/* ── Entry content (rich text from WYSIWYG) ─────────────────────────────── */

.entry-content > * + * {
    margin-block-start: var(--space-3);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-2);
}

/* ── Policy / legal pages ──────────────────────────────────────────────── */

/* Constrain legal text to a comfortable reading measure. */
.plain-page__body { max-width: 68ch; }

/* Temporary editor notice on seeded DRAFT policies — delete before launch. */
.policy-draft {
    margin-block-end: var(--space-6);
    padding: var(--space-3);
    border-inline-start: 4px solid #b45309;
    background: #fff7ed;
    color: var(--color-text-primary);
    font-size: 0.9em;
}
.policy-draft code {
    background: rgba(0, 0, 0, 0.07);
    padding: 0 0.3em;
    border-radius: 3px;
}

/* ── Error 404 ─────────────────────────────────────────────────────────── */

.error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82vh;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: #fff;
    background:
        linear-gradient(rgba(21, 37, 46, 0.74), rgba(21, 37, 46, 0.86)),
        url(../images/carousel/israel-palacio-Y20JJ_ddy9M-unsplash.jpg) center / cover no-repeat;
}

.error-404__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    max-width: 46rem;
}

.error-404__count {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.06em;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.9;
    text-transform: uppercase;
    color: #FDF7E9;                         /* warm cream on the dark scrim */
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* Sizes tuned so the three lines balance to a similar width: the longest
   phrase gets the smallest size, and the short "404" is the big punchline. */
.error-404__count-line { display: block; }
/* The two "A-one" count lines in Citrus; the "404" punchline stays Circus Heavy (inherited). */
.error-404__count-line--1,
.error-404__count-line--2 { font-family: var(--font-display-alt); }
.error-404__count-line--1 { font-size: clamp(2rem, 6vw, 3.9rem);    transform: rotate(-2deg); }
.error-404__count-line--2 { font-size: clamp(1.6rem, 4.6vw, 3.1rem); transform: rotate(1.5deg); }
.error-404__count-line--3 {
    font-size: clamp(5.5rem, 18.5vw, 12rem);
    letter-spacing: 0.02em;
    color: var(--color-fluoro-green);
}

.error-404__lead {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    line-height: 1.5;
    color: #fff;
    text-wrap: balance;
}

.error-404__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;      /* don't stretch buttons to a shared height */
    justify-content: center;
    gap: var(--space-3);
}
/* Uniform buttons: one fixed width (fits the longest label) so all three match,
   sized so the row of three fits on one line; aspect-ratio then gives them all
   the same height and correct 256:86 shape. Label dropped 1px to help them fit. */
.error-404__nav .btn-shaped { flex: 0 0 auto; width: 14rem; font-size: 1.0625rem; }

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact-page { padding-block: var(--space-8) var(--space-10); text-align: center; }
/* Extra .contact-page qualifier so the fluoro colour beats the theme heading
   rule ([class*="theme-"] :is(h1…) { color: inherit }), which is more specific
   than a lone class. */
.contact-page .contact-page__title {
    margin: 0 0 var(--space-6);
    font-family: var(--font-display-alt);
    font-size: clamp(2.75rem, 6.5vw, 5rem);
    line-height: 1;
    color: var(--color-fluoro-green);
}
.contact-page__body { max-width: 900px; margin-inline: auto; }
/* Centre the intro line + the mailto line (direct paragraphs); the form keeps
   its own left alignment via .mus-form. margin-inline:auto centres the block
   itself — a base rule constrains paragraph width, so text-align alone would
   still sit left-of-centre against the wider form. */
.contact-page__body > p { text-align: center; margin-inline: auto; }
.contact-page__alt { margin-top: var(--space-6); }

/* ── Kicker / label text ────────────────────────────────────────────────── */

.kicker {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Scroll reveal — data-animate ──────────────────────────────────────── */

[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

[data-animate].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1;
        transform: none;
    }
}