/* The application form on the Volunteer teachers and General volunteers pages
   (templates/volunteers/apply/), shown there while the volunteer portal is on, in place of the
   Email us box. Hand-written, so it needs no Tailwind build; every class starts va-.
   The panel takes the box's place and width: the same rounded card, teal on the teachers page
   and blue on the general one, but its text starts at the start of the line, not the middle.
   Logical properties throughout (inline/block, start/end), because the page is also in Arabic,
   Persian, Hebrew and Urdu. Mobile first. The dark theme follows html[data-theme="dark"], like
   dark-mode.css. */

.va-panel {
    --va-ink: #101828;
    --va-muted: #475467;
    --va-surface: #ffffff;
    --va-control: #6b7280;      /* input borders: 3:1 or better against the card */
    --va-bad: #b42318;
    --va-bad-bg: #fef3f2;
    --va-accent: #0d9488;
    --va-accent-bg: #f0fdfa;
    --va-accent-line: #ccfbf1;
    --va-rule: #99f6e4;
    --va-strong: #0f766e;       /* text, links and the button: #0d9488 is too light for text */
    --va-strong-hover: #115e59;
    --va-link: #0f766e;
    --va-focus: #0f766e;

    position: relative;
    margin-block-start: 3rem;
    padding-block: 1.5rem;
    padding-inline: 1.25rem;
    border: 1px solid var(--va-accent-line);
    border-radius: 1rem;
    background: var(--va-accent-bg);
    box-shadow: 0 1px 2px rgb(0 0 0 / .05);
    color: var(--va-ink);
    text-align: start;
    overflow-wrap: break-word;
}

.va-panel--general {
    --va-accent: #2563eb;
    --va-accent-bg: #eff6ff;
    --va-accent-line: #dbeafe;
    --va-rule: #bfdbfe;
    --va-strong: #1d4ed8;
    --va-strong-hover: #1e40af;
    --va-link: #1d4ed8;
    --va-focus: #1d4ed8;
}

/* The site's header is sticky: whatever the page scrolls to lands below it. */
#apply,
[data-va-error-summary],
[data-va-thanks] {
    scroll-margin-top: 7rem;
}

@media (min-width: 640px) {
    .va-panel {
        padding-block: 2rem;
        padding-inline: 2rem;
    }
}

/* ---------- Text ---------- */

.va-panel h2 {
    margin-block: 0 0.75rem;
    color: var(--va-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    .va-panel h2 {
        font-size: 1.5rem;
    }
}

.va-panel p {
    margin-block: 0;
}

.va-panel p + p {
    margin-block-start: 0.75rem;
}

.va-panel a:not(.va-button) {
    color: var(--va-link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.va-panel a:not(.va-button):hover {
    text-decoration-thickness: 2px;
}

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

/* Focused by volunteer-apply.js so screen readers announce it, not to be typed in. */
.va-panel [data-va-thanks]:focus {
    outline: none;
}

.va-already {
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border-inline-start: 4px solid var(--va-accent);
    border-radius: 0.5rem;
    background: var(--va-surface);
}

.va-panel .va-intro {
    margin-block-start: 1rem;
}

.va-panel .va-contact {
    margin-block-start: 1.5rem;
    color: var(--va-muted);
}

.va-panel code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    font-size: 0.95em;
}

/* ---------- The form ---------- */

.va-form {
    margin-block-start: 1.5rem;
}

.va-section {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.va-section + .va-section {
    margin-block-start: 1.75rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--va-rule);
}

/* A section's name, as a small heading. Floated so it sits below the section's top rule
   rather than on it; floated legends still name their fieldset. */
.va-legend {
    float: inline-start;
    inline-size: 100%;
    margin-block: 0 1rem;
    padding: 0;
    color: var(--va-ink);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

.va-legend + * {
    clear: both;
}

.va-field,
.va-group {
    min-inline-size: 0;
    margin-block: 0 1.25rem;
    margin-inline: 0;
    padding: 0;
    border: 0;
    scroll-margin-top: 7rem;
}

.va-label {
    display: block;
    margin-block: 0 0.375rem;
    padding: 0;
    color: var(--va-ink);
    font-weight: 700;
    line-height: 1.4;
}

.va-panel .va-help {
    margin-block: -0.125rem 0.5rem;
    color: var(--va-muted);
    font-size: 0.9rem;
}

/* :where() keeps this at one class, so the rules below can adjust it. */
.va-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select,
    textarea) {
    display: block;
    inline-size: 100%;
    min-block-size: 44px;
    margin: 0;
    padding-block: 0.625rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--va-control);
    border-radius: 0.5rem;
    background-color: var(--va-surface);
    color: var(--va-ink);
    font: inherit;
    font-size: 1rem;    /* 16px or more, so phones don't zoom in on focus */
    line-height: 1.4;
}

.va-form textarea {
    min-block-size: 8rem;
    resize: vertical;
}

.va-form :is(input, select, textarea)[aria-invalid="true"] {
    border: 2px solid var(--va-bad);
}

/* Tick boxes and radio buttons: each with its words, a 44px target; two columns when wide. */
.va-choices {
    display: grid;
    gap: 0 1rem;
}

@media (min-width: 640px) {
    .va-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.va-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-block-size: 44px;
    padding-block: 0.5rem;
    color: var(--va-ink);
    line-height: 1.45;
    cursor: pointer;
}

.va-check input {
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    margin: 0;
    margin-block-start: 1px;
    accent-color: var(--va-strong);
    cursor: pointer;
}

.va-field--check {
    margin-block-end: 0.5rem;
}

.va-consent {
    margin-block-end: 1.5rem;
}

/* ---------- Errors ---------- */

.va-panel .errorlist {
    margin-block: 0 0.5rem;
    margin-inline: 0;
    padding: 0;
    color: var(--va-bad);
    font-weight: 600;
    list-style: none;
}

/* A field with an error: red words and a red bar at its start. */
.va-field--error {
    padding-inline-start: 0.875rem;
    border-inline-start: 4px solid var(--va-bad);
}

.va-nonfield .errorlist {
    margin-block-end: 1.25rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border-inline-start: 4px solid var(--va-bad);
    border-radius: 0.5rem;
    background: var(--va-bad-bg);
}

.va-error-summary {
    margin-block-start: 1.5rem;
    padding-block: 1rem;
    padding-inline: 1.125rem;
    border: 3px solid var(--va-bad);
    border-radius: 0.75rem;
    background: var(--va-surface);
}

.va-panel .va-error-summary:focus {
    outline: 3px solid var(--va-focus);
    outline-offset: 3px;
}

.va-error-summary h3 {
    margin-block: 0 0.5rem;
    color: var(--va-ink);
    font-size: 1.125rem;
    font-weight: 700;
}

.va-error-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.va-error-summary li {
    color: var(--va-bad);
    font-weight: 600;
}

.va-error-summary li + li {
    margin-block-start: 0.25rem;
}

.va-panel .va-error-summary a {
    color: var(--va-bad);
}

/* ---------- The privacy notice, folded away above its tick box ---------- */

.va-notice {
    margin-block: 0 0.75rem;
    border: 1px solid var(--va-rule);
    border-radius: 0.75rem;
    background: var(--va-surface);
}

.va-notice > summary {
    padding-block: 0.625rem;    /* with the line height, a 44px target */
    padding-inline: 1rem;
    color: var(--va-link);
    font-weight: 700;
    cursor: pointer;
}

.va-notice[open] > summary {
    border-block-end: 1px solid var(--va-rule);
}

/* The notice's own markup, shared with the portal (styled there by volunteers.css). */
.va-notice .vol-notice-text {
    margin: 0;
    padding-block: 1rem 0;
    padding-inline: 1rem;
}

.va-notice .vol-notice-text > div + div {
    margin-block-start: 0.875rem;
}

.va-notice .vol-notice-text dt {
    font-weight: 700;
}

.va-notice .vol-notice-text dd {
    margin: 0;
}

.va-panel .va-notice .vol-muted {
    margin: 0;
    padding-block: 0.75rem 1rem;
    padding-inline: 1rem;
    color: var(--va-muted);
    font-size: 0.875rem;
}

/* ---------- The trap for robots: off-screen, never seen or reached ---------- */

.va-hp {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* ---------- Buttons ---------- */

.va-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-block-start: 1.25rem;
}

.va-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    padding-block: 0.75rem;
    padding-inline: 2rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--va-strong);
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.va-panel .va-button,
.va-panel .va-button:hover {
    color: #ffffff;
    text-decoration: none;
}

.va-panel .va-button:hover {
    background: var(--va-strong-hover);
}

/* Disabled by volunteer-apply.js while the form is being sent. */
.va-panel .va-button:disabled {
    opacity: 0.65;
    cursor: progress;
}

@media (max-width: 479.98px) {
    .va-actions .va-button {
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .va-button {
        transition: background-color .15s ease;
    }
}

/* ---------- Dark theme ---------- */

html[data-theme="dark"] .va-panel {
    --va-ink: #edf0f4;
    --va-muted: #b8c0cc;
    --va-surface: #1d222b;
    --va-control: #7c8799;
    --va-bad: #fca5a5;
    --va-bad-bg: #2a1515;
    --va-accent-bg: #272e39;
    --va-accent-line: #363e4a;
    --va-rule: #4a5563;
    --va-accent: #2dd4bf;
    --va-strong: #0f766e;
    --va-strong-hover: #115e59;     /* darker, not lighter: white on #0d9488 is below 4.5:1 */
    --va-link: #83d6b3;
    --va-focus: #83d6b3;

    box-shadow: none;
}

html[data-theme="dark"] .va-panel--general {
    --va-accent: #60a5fa;
    --va-strong: #1d4ed8;
    --va-strong-hover: #2563eb;
    --va-link: #93c5fd;
    --va-focus: #93c5fd;
}

html[data-theme="dark"] .va-check input {
    accent-color: var(--va-accent);
}

/* dark-mode.css gives every input the site's dark colours with a faint border; these borders
   stay 3:1 against the card, and red on an error. As specific as its rule, plus the panel. */
html[data-theme="dark"] .va-panel
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
        select, textarea) {
    border-color: var(--va-control);
}

html[data-theme="dark"] .va-panel
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
        select, textarea)[aria-invalid="true"] {
    border-color: var(--va-bad);
}

/* ---------- Windows high contrast ---------- */

@media (forced-colors: active) {
    .va-field--error {
        border-inline-start-color: CanvasText;
    }

    .va-panel .va-button:disabled {
        color: GrayText;
    }
}