/*
    Hand-written and local. The Content-Security-Policy permits style-src 'self' and font-src 'self'
    only, so there is no CDN stylesheet and no webfont fetched from a third party — and no CSS framework
    to keep patched on a Basic-tier app with no deployment slots.

    Styled to match stadio.ac.za. The brand values taken from their theme stylesheet
    (/themes/stadio/static/css/css/style.css):

      - Warm grey #565759 for headings and the header bar; #53575b for body copy and links.
      - Brick red #bf4956 as the solid call-to-action fill (their .red / .brick-red utilities).
      - White surfaces, and SQUARE CORNERS — their inputs and buttons all set border-radius: 0.
        Do not round these; it is one of the more recognisable things about the brand.
      - Uppercase, letter-spaced, bold CTA text, as on APPLY NOW / CALL ME BACK.
      - A faculty accent strip. Their site uses these hues to distinguish faculties; here they are
        decoration only, which is why the strip is aria-hidden in the markup.

    TYPEFACE: the brand face is Brandon Grotesque, which STADIO self-hosts. It is a commercial font
    (HVD Fonts) and is NOT bundled here — shipping it would need the licence checked for this
    application first. The stack names it, so it renders correctly wherever it is licensed and
    installed, and otherwise falls back to Arial exactly as the STADIO stylesheet's own stack does.
*/

:root {
    --ink: #53575b;
    --heading: #565759;
    --muted: #6b6c6f;
    --line: #d2d2d6;
    --brand: #bf4956;
    --brand-dark: #a03b47;
    --bar: #565759;
    --error: #a3303a;
    --surface: #ffffff;
    --bg: #f2f2f3;

    --faculty-1: #bf4956;
    --faculty-2: #f59120;
    --faculty-3: #f8d902;
    --faculty-4: #96c93e;
    --faculty-5: #4ebea3;
    --faculty-6: #3bb1e5;
    --faculty-7: #8a63a9;

    --brand-font: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 var(--brand-font);
    -webkit-font-smoothing: antialiased;
}

/* Header bar, matching the solid grey band the site uses behind its logo and CTAs. */
.masthead {
    background: var(--bar);
    padding: 1.15rem 1.25rem;
}

.masthead-inner {
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.wordmark {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.wordmark-sub {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #e2e2e4;
}

/* Faculty accent strip. Decoration only — aria-hidden in the markup. */
.accent-strip {
    display: flex;
    height: 5px;
}

.accent-strip span {
    flex: 1;
}

.accent-strip span:nth-child(1) { background: var(--faculty-1); }
.accent-strip span:nth-child(2) { background: var(--faculty-2); }
.accent-strip span:nth-child(3) { background: var(--faculty-3); }
.accent-strip span:nth-child(4) { background: var(--faculty-4); }
.accent-strip span:nth-child(5) { background: var(--faculty-5); }
.accent-strip span:nth-child(6) { background: var(--faculty-6); }
.accent-strip span:nth-child(7) { background: var(--faculty-7); }

.page {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
}

h1 {
    font-family: var(--brand-font);
    font-weight: 700;
    color: var(--heading);
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 0.6rem;
}

.lede {
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0 0 1.75rem;
}

form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    padding: 1.75rem;
}

.field {
    margin-bottom: 1.35rem;
}

label {
    display: block;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.35rem;
}

.hint {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.45rem;
}

input[type="text"],
input[type="email"] {
    width: 100%;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line);

    /* Square, as on stadio.ac.za. */
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

input[type="text"]:hover,
input[type="email"]:hover {
    border-color: #b0b0b6;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

button.primary {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.9rem 1rem;
    border: 0;
    border-radius: 0;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    cursor: pointer;
}

button.primary:hover {
    background: var(--brand-dark);
}

.reassurance {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 1.1rem 0 0;
}

.notice {
    background: #fdf4f5;
    border: 1px solid var(--brand);
    border-left-width: 4px;
    padding: 0.85rem 1rem;
    margin: 0 0 1.5rem;
    color: var(--ink);
}

.field-error,
.validation-summary {
    display: block;
    color: var(--error);
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 0.35rem;
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.site-footer {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.site-footer p {
    margin: 0.3rem 0;
}

/*
    Honeypot wrapper.

    The WRAPPER is taken out of view; the input inside it is never display:none and never disabled, so
    automation that enumerates form fields still finds it and fills it in. Screen readers are excluded
    via aria-hidden on the wrapper in the markup, and the input is removed from the tab order there.

    Do not "tidy" this into display:none on the input — that is precisely what defeats it.
*/
.hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-turnstile {
    margin-top: 1rem;
}

a {
    color: var(--ink);
    text-decoration: underline;
}

a:hover {
    color: var(--brand);
}

@media (max-width: 30rem) {
    h1 {
        font-size: 1.6rem;
    }

    form {
        padding: 1.25rem;
    }
}

/*
    The brand is a light, white-surface identity — there is no official dark treatment. This keeps a
    reader's dark preference from producing a full-page white slab, using the same greys and the same
    brick red rather than inventing a second palette.
*/
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e6e6e8;
        --heading: #f2f2f3;
        --muted: #b0b0b6;
        --line: #4a4a50;
        --brand: #d9707a;
        --brand-dark: #c25a65;
        --error: #f0a8ae;
        --surface: #26262b;
        --bg: #1a1a1e;
    }

    button.primary {
        color: #2b1216;
    }

    .notice {
        background: #332325;
    }
}