@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    color-scheme: light dark;

    --primary-colour: hsl(334, 100%, 32%);
    --primary-dark: color-mix(in hsl, var(--primary-colour), black 20%);
    --primary-light: color-mix(in hsl, var(--primary-colour), white 30%);
    --primary-muted: color-mix(in hsl, var(--primary-colour), gray 40%);
    --primary-shadow: color-mix(in hsl, var(--primary-colour), black 80%);

    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);

    /* The warm off-white used for text sitting directly on a solid brand-magenta-family background
       (the hero wordmark, the homepage hook section's body column) - deliberately not pure --white.
       Named generically since a third such use should confirm the shade still fits, not just assume. */
    --text-on-brand: #F4F0EC;

    --background: var(--white);
    --surface: var(--white);
    --text: var(--black);
    --text-muted: color-mix(in hsl, var(--text), white 10%);
    --border: var(--primary-light);
    --focus-ring: var(--primary-colour);

    --hover-opacity: 0.1;
    --active-opacity: 0.2;
    --active-hover-opacity: 0.3;

    --hairline-width: 72px;
    --hairline-thickness: 2px;
    --hairline-opacity: 0.3;

    /* Matches TopMenu.razor.css's rendered nav height (40px logo + padding); the hero's
       viewport-fill calc needs this as a shared value since it isn't a descendant of <nav>.
       Keep in sync if TopMenu's padding/logo size ever changes. */
    --nav-height: 72px;
    --nav-height-mobile: 68px;

    --fs-body: 1rem;
    --lh-body: 1.6;
    --fs-section-heading: 1.5rem;
    --lh-section-heading: 1.4;
    --fs-page-heading: 2.25rem;
    --lh-page-heading: 1.2;
    --fs-hero: 3.5rem;
    --lh-hero: 1.1;

    --space-section-y: 2rem;
    --space-section-y-mobile: 1.25rem;
    --space-section-x: 1.5rem;
    --space-section-x-mobile: 1rem;

    font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--background);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: hsl(0, 0%, 7%);
        --surface: hsl(0, 0%, 11%);
        --text: hsl(40, 20%, 95%);
        --text-muted: color-mix(in hsl, var(--text), black 25%);
        --border: color-mix(in hsl, var(--text), black 80%);
        --focus-ring: var(--white);
    }
}

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

.page-section {
    /* Full-bleed: no width cap, no centering. Its background already matches the page (see the
       flush decision above), so the only thing a cap here was doing was narrowing the content
       (e.g. the speaker grid) for no visible reason - prose stays readable regardless, since
       .text-block .text below caps itself at 720px independently of this element's own width. */
    padding: var(--space-section-y) var(--space-section-x);
    width: 100%;
    background: var(--background);
}

/* Sections sit flush against each other - no boxed card, no margin gap. Where two land back to
   back with nothing full-bleed (like HookSection) between them, a hairline (not a full border)
   marks the seam, consistent with the hairline-divider treatment already used under every h2. */
.page-section + .page-section {
    border-top: var(--hairline-thickness) solid color-mix(in hsl, var(--primary-colour), transparent 70%);
}

/* A split section (two-column colour-blocked layout: HookSection, CodeOfConductSection,
   LocationSection) mirrors its column placement when it renders directly after another one of the
   same kind, so consecutive split sections read as an alternating pair. Purely positional - keyed
   on DOM adjacency between elements carrying .split-section, not on which specific section it is -
   so it keeps working if these sections are reordered or another one is added. `order` only moves
   paint position, not DOM order, so reading/tab order (heading before body) is unaffected. */
.split-section + .split-section .split-column--heading {
    order: 2;
}

.split-section + .split-section .split-column--body {
    order: 1;
}

@media (max-width: 768px) {
    .split-section + .split-section .split-column--heading,
    .split-section + .split-section .split-column--body {
        order: initial;
    }
}

.page-section h2 {
    font-size: var(--fs-section-heading);
    line-height: var(--lh-section-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.page-section h2::after {
    content: "";
    display: block;
    width: var(--hairline-width);
    height: var(--hairline-thickness);
    background: var(--primary-colour);
    opacity: var(--hairline-opacity);
    margin: 0.5rem auto 1rem;
}

.hairline-divider {
    display: block;
    width: var(--hairline-width);
    height: var(--hairline-thickness);
    background: var(--primary-colour);
    opacity: var(--hairline-opacity);
}

.text-page-heading {
    font-size: var(--fs-page-heading);
    line-height: var(--lh-page-heading);
}

.text-hero {
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
}

.text-block {
    text-align: center;
}

.page-section .text-block {
    text-align: left;
}

.page-section .text-block .text {
    color: var(--text-muted);
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
}

.page-section .text-block .text p {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .page-section {
        padding: var(--space-section-y-mobile) var(--space-section-x-mobile);
    }

    .page-section .text-block .text {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 100%;
    }
}

.button-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.button {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--primary-colour);
    background: var(--surface);
    color: var(--primary-colour);
    padding: 10px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

/* Dark theme: magenta is a solid accent block, never text on the dark surface (see ADR 2) */
@media (prefers-color-scheme: dark) {
    .button {
        background: var(--primary-colour);
        color: var(--white);
    }
}

/* Hover/focus/active/selected all use a solid magenta fill with white text (never magenta text on a
   magenta-tinted background - that moves the background's luminance toward the text's own, which drops
   contrast rather than raising it). This is the same white-on-magenta pairing already verified at ~7.92:1. */
.button:hover,
.button:focus {
    background-color: var(--primary-colour);
    color: var(--white);
    border-color: var(--primary-colour);
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .button:hover,
    .button:focus {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }
}

.button:active {
    background-color: var(--primary-dark);
    color: var(--white);
    border-color: var(--primary-dark);
}

/* Selected tab state (aria-selected="true") */
.button[aria-selected="true"] {
    background-color: var(--primary-colour);
    color: var(--white);
    border-color: var(--primary-colour);
}

.button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

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