/*
 * BASE LAYER - reset, element defaults and rich-text (.prose) typography.
 *
 * Loaded after tokens.css and before any component stylesheet. Tailwind's
 * Play-CDN preflight also runs (injected at runtime), so this file
 * deliberately re-states the parts of a reset we depend on: if the CDN is
 * ever blocked or slow, layout still holds together instead of collapsing
 * to browser defaults.
 */

/* ---- Reset ----------------------------------------------------------- */

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

html {
    /* Pin the rem base so the whole clamp-based scale is predictable. */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
    margin: 0;
}

ol[class], ul[class] {
    /* Only lists that opt into a component class lose their markers;
       lists inside rich text keep them (see .prose below). */
    padding-left: 0;
    list-style: none;
}

img, svg, video, canvas, iframe {
    display: block;
    max-width: 100%;
}

img, video {
    height: auto;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

a {
    color: inherit;
}

/* Visible, consistent keyboard focus everywhere (WCAG 2.4.7). Pointer
   interaction stays ring-free thanks to :focus-visible. */
:focus-visible {
    outline: 2px solid var(--color-primary-text);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ---- Element defaults ------------------------------------------------ */

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

/*
 * Specificity guard for UNCLASSED headings.
 *
 * Tailwind's Play-CDN stylesheet is injected by script at runtime, so it
 * lands after these <link> tags and wins any specificity tie. Its preflight
 * sets body { line-height: inherit } and h1-h6 { font-size: inherit;
 * font-weight: inherit }, which would flatten the type scale on a plain
 * element selector (0,0,1).
 *
 * `:not([class])` raises these to (0,1,1) - enough to beat preflight - while
 * matching only headings that carry no class at all. An earlier version used
 * a `:root h1` prefix, which is also (0,1,1) but matches EVERY heading, so it
 * outranked every single-class component rule (0,1,0): card titles rendered
 * at h3 size instead of h4 and the hero title at --fs-h1 instead of
 * --fs-display. Component classes must stay in charge of their own type.
 */
:root body { line-height: var(--lh-relaxed); }

h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) { font-weight: 700; }

h1:not([class]) { font-size: var(--fs-h1); }
h2:not([class]) { font-size: var(--fs-h2); }
h3:not([class]) { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4:not([class]) { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5:not([class]) { font-size: var(--fs-h5); line-height: var(--lh-snug); }
h6:not([class]) { font-size: var(--fs-h6); line-height: var(--lh-snug); }

p {
    text-wrap: pretty;
}

strong, b {
    font-weight: 600;
}

/* ---- Type utilities -------------------------------------------------- */
/* Class-based so they always beat Tailwind preflight's element-level
   font-size reset, whatever order the CDN injects its stylesheet in. */

.u-display { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.u-h1 { font-size: var(--fs-h1); font-weight: 700; }
.u-h2 { font-size: var(--fs-h2); font-weight: 700; }
.u-h3 { font-size: var(--fs-h3); font-weight: 700; }
.u-h4 { font-size: var(--fs-h4); font-weight: 700; }
.u-lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-muted); }
.u-muted { color: var(--text-muted); }
.u-measure { max-width: var(--measure); }

/* ---- Rich text (.prose) ---------------------------------------------- */
/*
 * Everything a Wagtail RichTextField/RichTextBlock can emit. Previously the
 * templates used Tailwind's `prose` class, but @tailwindcss/typography is
 * not part of the Play CDN bundle, so that class resolved to nothing and
 * rich text rendered unstyled (headings flattened to body size by
 * preflight). These rules are scoped to .prose, which outranks the
 * element-level preflight reset.
 */

.prose {
    color: var(--text-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    max-width: var(--measure);
}

.prose > * + * {
    margin-top: var(--space-md);
}

.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}

.prose h2 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.prose h3 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.prose h4 { font-size: var(--fs-h5); line-height: var(--lh-snug); }

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
    margin-top: var(--space-sm);
}

.prose > h2,
.prose > h3,
.prose > h4 {
    margin-top: var(--space-xl);
}

.prose > :first-child {
    margin-top: 0;
}

.prose ul,
.prose ol {
    padding-left: 1.5em;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
    margin-top: var(--space-xs);
}

.prose li::marker {
    color: var(--text-muted);
}

.prose a {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    transition: color var(--transition);
}

.prose a:hover {
    color: var(--color-primary-hover);
}

.prose blockquote {
    padding-left: var(--space-md);
    border-left: 3px solid var(--color-primary-light);
    color: var(--text-muted);
    font-style: italic;
}

.prose hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin-block: var(--space-xl);
}

.prose img {
    border-radius: var(--radius-md);
}

.prose--center {
    margin-inline: auto;
}