/* =====================================================================
   Absence Line: WFCG Brand Guidelines V3 (July 2023) and the screen
   house style built on them. Used by Guest.aspx and Student.aspx, and
   replaces Materialize, MDL, Bootstrap and the icon fonts on those pages.

   Only colours from the V3 palette or the approved screen tints are used.
   Add a new colour as a token here first, with the brand colour it comes
   from.
   ===================================================================== */

:root {
    /* V3 palette */
    --wfcg-grey-1: #353949;
    --wfcg-grey-2: #4C5A73;
    --wfcg-grey-3: #EAF3FC;

    /* Screen tokens (house style), light */
    --page: #FFFFFF;
    --band: var(--wfcg-grey-3);
    --card: #FFFFFF;
    --surface-2: #F4F9FE;
    --ink: var(--wfcg-grey-1);
    --ink-2: var(--wfcg-grey-2);
    --ink-3: #7F8CA3;            /* field borders: 3.4:1 on white */
    --rule: #D5E3F3;
    --rule-2: #B9CEE6;
    --accent: var(--wfcg-grey-1);
    --accent-hover: #1B1F2B;     /* Grey 1 darkened */
    --on-accent: #FFFFFF;
    --focus: var(--wfcg-grey-1);
    --decline: #86151E;          /* house status red, always with a sign */
    --head-fill: var(--wfcg-grey-1);
    --scrim: rgba(53, 57, 73, .6);

    /* Lucide check and chevron-down, drawn in the ink of each theme */
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353949' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --font: "Mundial", "Poppins", Arial, sans-serif;
    --w-body: 300;
    --w-head: 600;
    --lh-body: 1.3;
    --lh-head: 1;
    --gutter: clamp(16px, 5.5vw, 80px);   /* about 1/18 of the viewport */

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page: #1B1F2B;
        --band: #232735;
        --card: #2D3241;
        --surface-2: #343A4B;
        --ink: #EDF3FA;
        --ink-2: #B7C4D8;
        --ink-3: #8D9AB0;
        --rule: #3E4559;
        --rule-2: #525B73;
        --accent: #EDF3FA;
        --accent-hover: #D5E3F3;
        --on-accent: #353949;
        --focus: #EDF3FA;
        --decline: #E4707C;
        --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353949' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
        --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDF3FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}

:root[data-theme="dark"] {
    --page: #1B1F2B;
    --band: #232735;
    --card: #2D3241;
    --surface-2: #343A4B;
    --ink: #EDF3FA;
    --ink-2: #B7C4D8;
    --ink-3: #8D9AB0;
    --rule: #3E4559;
    --rule-2: #525B73;
    --accent: #EDF3FA;
    --accent-hover: #D5E3F3;
    --on-accent: #353949;
    --focus: #EDF3FA;
    --decline: #E4707C;
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353949' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDF3FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--font);
    font-weight: var(--w-body);
    font-size: 16px;
    line-height: var(--lh-body);
    font-kerning: auto;
    color: var(--ink-2);
    background: var(--page);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--w-head);
    line-height: var(--lh-head);
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

strong, b, th, label {
    font-weight: 600;
}

p {
    margin: 0 0 12px;
    max-width: 72ch;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

    a:hover {
        text-decoration-thickness: 2px;
    }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

button, input, select, textarea {
    font: inherit;
    font-weight: var(--w-body);
}

svg.icon {
    width: 24px;
    height: 24px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

/* ---------------------------------------------------------------------
   Hero: Grey 1 with the Group pattern (Grey 2 bars) in one 45° wedge
   off the top right. The wedge is a square clipped corner to corner, so
   its edge is a true 45° at any size.
   --------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background-color: var(--wfcg-grey-1);
    color: #FFFFFF;
}

    .hero::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: min(44vw, 520px);
        aspect-ratio: 1 / 1;
        background-color: var(--wfcg-grey-1);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='4' height='14' fill='%234C5A73'/%3E%3C/svg%3E");
        background-size: 14px 14px;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        pointer-events: none;
    }

.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;                  /* at least the crest width below the logo */
    padding: 32px var(--gutter) 48px;
}

/* V3 1.7: 80px minimum on screens up to 1080px, 120px above */
.hero__logo {
    display: block;
    width: 80px;
    height: auto;
}

.hero h1 {
    color: #FFFFFF;
    font-size: clamp(48px, 6.6vw, 104px);
    max-width: 12ch;
}

@media (min-width: 1081px) {
    .hero__logo {
        width: 120px;
    }

    .hero__inner {
        padding-top: 40px;
        padding-bottom: 64px;
    }
}

/* ---------------------------------------------------------------------
   Bands and sections
   --------------------------------------------------------------------- */

.band {
    padding: 40px var(--gutter);
    background: var(--page);
}

.band--alt {
    background: var(--band);
}

.band > h2,
.section-head {
    font-size: clamp(26px, 3.2vw, 36px);
    margin-bottom: 20px;
}

.section-head--spaced {
    margin-top: 40px;
}

/* An instruction above a group of fields: set like a label, not a heading */
.subhead {
    display: block;
    max-width: 72ch;
    margin: 32px 0 12px;
    color: var(--ink);
    font-weight: var(--w-head);
}

.band__lead {
    color: var(--ink-2);
    margin-bottom: 20px;
}

.stack > * + * {
    margin-top: 20px;
}

@media (min-width: 821px) {
    .band {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* ---------------------------------------------------------------------
   Form fields: square, 48px tall, borders at 3:1 or better
   --------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .field > label,
    .field__label {
        color: var(--ink);
        font-weight: var(--w-head);
    }

.fieldset {
    min-width: 0;
    margin-inline: 0;       /* margin-top is left to .stack */
    margin-bottom: 0;
    padding: 0;
    border: 0;
}

    .fieldset > legend {
        display: block;
        margin-bottom: 6px;
        padding: 0;
    }

.panel .stack {
    margin-top: 20px;
}

.hint {
    display: block;
    color: var(--ink-2);
    margin: 0 0 12px;
    max-width: 72ch;
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 16px;
    color: var(--ink);
    background-color: var(--card);
    border: 1px solid var(--ink-3);
    border-radius: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.field select {
    padding-right: 34px;
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    cursor: pointer;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.input:hover,
.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--ink);
}

::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.grid {
    display: grid;
    gap: 16px;
}

.grid--date {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
    max-width: 520px;
}

.grid--time {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 520px;
}

@media (max-width: 480px) {
    .grid--date,
    .grid--time {
        gap: 10px;
    }
}

.grid--two {
    grid-template-columns: 1fr;
    max-width: 960px;
}

.field--narrow {
    max-width: 360px;
}

.field--wide {
    max-width: 960px;
}

@media (min-width: 721px) {
    .grid--two {
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
    }
}

/* ---------------------------------------------------------------------
   Absence reasons: square tick boxes on flat cards
   --------------------------------------------------------------------- */

.reasons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.reason {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 56px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--rule-2);
    color: var(--ink);
    font-weight: var(--w-body);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

    .reason:hover {
        background: var(--surface-2);
        border-color: var(--ink);
    }

    .reason:has(input:checked) {
        border-color: var(--ink);
        outline: 1px solid var(--ink);
        outline-offset: -2px;
    }

.tick {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    background-color: var(--card);
    border: 2px solid var(--ink);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .tick:checked {
        background-color: var(--accent);
        background-image: var(--tick);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
    }

/* ---------------------------------------------------------------------
   Buttons: square, 52px, 600 weight. Hover darkens or fills, never fades
   or lifts.
   --------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    min-width: 200px;
    padding: 0 28px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: var(--w-head);
    line-height: 1;
    text-decoration: none;
    border: 2px solid var(--accent);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.btn--primary {
    background-color: var(--accent);
    color: var(--on-accent);
}

    .btn--primary:hover {
        background-color: var(--accent-hover);
        border-color: var(--accent-hover);
        color: var(--on-accent);
        text-decoration: none;
    }

.btn--secondary {
    background-color: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

    .btn--secondary:hover {
        background-color: var(--accent);
        color: var(--on-accent);
        text-decoration: none;
    }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .btn {
        width: 100%;
    }
}

/* LinkButton that reads as a text link (Guest.aspx "Do not know...") */
.link-button {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink);
    font-weight: var(--w-head);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

    .link-button:hover {
        text-decoration-thickness: 2px;
    }

/* File upload */
.file-input {
    display: block;
    width: 100%;
    max-width: 520px;
    padding: 8px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--ink-3);
}

    .file-input::file-selector-button {
        min-height: 40px;
        margin-right: 16px;
        padding: 0 20px;
        font-family: var(--font);
        font-weight: var(--w-head);
        color: var(--ink);
        background: transparent;
        border: 2px solid var(--ink);
        border-radius: 0;
        cursor: pointer;
    }

        .file-input::file-selector-button:hover {
            background: var(--accent);
            color: var(--on-accent);
        }

/* ---------------------------------------------------------------------
   Messages. Status never relies on colour: every message has a sign
   (icon) and words. College colours are never used for status.
   --------------------------------------------------------------------- */

.panel {
    padding: 16px 20px;
    background: var(--card);
    border-left: 6px solid var(--ink);
    color: var(--ink);
    max-width: 960px;
}

    .panel p:last-child {
        margin-bottom: 0;
    }

.band--alt .panel {
    background: var(--card);
}

.band:not(.band--alt) .panel {
    background: var(--band);
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--rule-2);
    border-left: 6px solid var(--ink);
    color: var(--ink);
    max-width: 520px;
}

.alert--error {
    border-left-color: var(--decline);
}

    .alert--error .icon {
        color: var(--decline);
    }

.alert--spaced {
    margin-bottom: 16px;
}

.alert--success {
    max-width: 960px;
}

    .alert--success p:last-child {
        margin-bottom: 0;
    }

.inline-message {
    display: block;
    margin-top: 8px;
    color: var(--ink);
}

/* ---------------------------------------------------------------------
   Evidence table: Grey 1 header row, Grey 3 banding
   --------------------------------------------------------------------- */

.table-wrap {
    max-height: 320px;
    overflow: auto;
    margin-bottom: 28px;
    border: 1px solid var(--rule-2);
}

.table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink);
}

    .table th,
    .table td {
        padding: 10px 12px;
        text-align: left;
        vertical-align: top;
    }

    .table thead th {
        position: sticky;
        top: 0;
        background: var(--head-fill);
        color: #FFFFFF;
    }

    .table tbody tr:nth-child(even) {
        background: var(--band);
    }

.table__meta {
    display: block;
    color: var(--ink-2);
    font-size: 14px;
}

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ink);
    border: 2px solid var(--ink);
}

    .icon-link:hover {
        background: var(--accent);
        color: var(--on-accent);
    }

/* ---------------------------------------------------------------------
   UpdateProgress: a floating layer, so a scrim is allowed
   --------------------------------------------------------------------- */

.progress {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: var(--scrim);
}

.progress__panel {
    padding: 24px 32px;
    background: var(--card);
    border-top: 6px solid var(--wfcg-grey-1);
    color: var(--ink);
    font-weight: var(--w-head);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.site-footer {
    padding: 24px var(--gutter);
    background: var(--page);
    border-top: 1px solid var(--rule);
    color: var(--ink-2);
    font-size: 14px;
}

    .site-footer p {
        margin: 0;
    }

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}