/* Open Your Door - Custom Styles */

/* Base */
html {
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', Verdana, sans-serif;
    color: var(--oyd-text);
}

main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

a {
    color: var(--oyd-navy);
}

a:hover,
a:focus {
    color: var(--oyd-purple);
}

/* Custom Properties */
:root {
    --oyd-navy: #00006e;
    --oyd-navy-dark: #000052;
    --oyd-green: #42a876;
    --oyd-green-light: #5cbb8c;
    --oyd-purple: #934ae2;
    --oyd-mist: #e9f1f3;
    --oyd-white: #ffffff;
    --oyd-text: #1e2528;
    --oyd-border: #d3dee2;
    --oyd-input-border: #6b7a80; /* Form controls need 3:1 against white; --oyd-border is too pale for that */
    --oyd-error: #b3261e;
    --oyd-footer-muted: rgba(255, 255, 255, 0.65);
    --oyd-font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
    --oyd-transition: 0.2s ease-in-out;
    --oyd-radius-sm: 0.25rem;
    --oyd-radius: 0.5rem;
    --oyd-radius-lg: 0.75rem;
    --oyd-radius-pill: 62.5rem;
}

/* Skip Link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--oyd-navy);
    color: var(--oyd-white);
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--oyd-radius-sm) 0;
}

.skip-link:focus {
    left: 0;
    outline: 0.1875rem solid var(--oyd-green);
    outline-offset: 0;
    color: var(--oyd-white);
}

/* Focus Visibility */
*:focus-visible {
    outline: 0.1875rem solid var(--oyd-purple);
    outline-offset: 0.125rem;
}

.section--navy *:focus-visible,
.page-hero *:focus-visible,
.site-nav__body *:focus-visible,
.site-footer *:focus-visible {
    outline-color: var(--oyd-white);
}

.section--green *:focus-visible {
    outline-color: var(--oyd-navy);
}

/* Site Top - one sticky wrapper for the Beta banner and the header, so the header always sits
   directly under the banner however many lines the banner copy wraps to */
.site-top {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Beta Banner (DEV mode only) */
.beta-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.4rem 3.25rem;
    background-color: var(--oyd-purple);
    color: var(--oyd-white);
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: center;
}

.beta-banner a {
    color: var(--oyd-white);
    font-weight: 600;
    text-decoration: underline;
}

.beta-banner a:hover,
.beta-banner a:focus {
    color: var(--oyd-white);
}

.beta-banner__close {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--oyd-white);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--oyd-transition);
}

.beta-banner__close:hover {
    opacity: 0.75;
}

.beta-banner *:focus-visible {
    outline-color: var(--oyd-white);
    outline-offset: -0.25rem;
}

/* Site Header */
.site-header {
    position: relative;
    background-color: var(--oyd-white);
    padding: 0.5rem 0;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 110, 0.12);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    text-decoration: none;
    transition: opacity var(--oyd-transition);
}

.site-brand:hover,
.site-brand:focus {
    opacity: 0.85;
    text-decoration: none;
}

/* The badge logo is portrait, so it needs more height than the old landscape mark for its lettering to read */
.site-brand__logo {
    height: 4.5rem;
    width: auto;
    display: block;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    background: none;
    border: none;
    color: var(--oyd-navy);
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity var(--oyd-transition);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    opacity: 0.75;
}

/* Site Nav (Offcanvas) */
.site-nav {
    background-color: var(--oyd-navy);
    width: 18.75rem;
    max-width: 85vw;
    border-left: none;
}

.site-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    background-color: var(--oyd-white);
    flex-shrink: 0;
}

.nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    background: none;
    border: none;
    color: var(--oyd-navy);
    font-size: 1.4rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity var(--oyd-transition);
}

.nav-close:hover,
.nav-close:focus-visible {
    opacity: 0.75;
}

.site-nav__body {
    padding: 0.75rem 0;
    overflow-y: auto;
    flex: 1;
}

.site-nav__list {
    margin: 0;
}

.site-nav__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-left: 0.1875rem solid transparent;
    transition: background-color var(--oyd-transition), color var(--oyd-transition), border-color var(--oyd-transition);
}

.site-nav__link:hover,
.site-nav__link:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--oyd-white);
    border-left-color: var(--oyd-green);
    text-decoration: none;
}

.site-nav__link.active {
    color: var(--oyd-white);
    border-left-color: var(--oyd-green);
    background-color: rgba(66, 168, 118, 0.18);
}

.site-nav__link i {
    width: 1.25rem;
    text-align: center;
    color: var(--oyd-green);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Sections */
.site-section {
    padding: 4.5rem 0;
}

/* --oyd-top-height is the measured height of .site-top, set by the Sticky Offset block in the JS */
[id].site-section {
    scroll-margin-top: var(--oyd-top-height, 4.75rem);
}

.section--navy {
    background-color: var(--oyd-navy);
    color: var(--oyd-white);
}

.section--navy p {
    color: rgba(255, 255, 255, 0.88);
}

.section--white {
    background-color: var(--oyd-white);
}

.section--mist {
    background-color: var(--oyd-mist);
}

.section--green {
    background-color: var(--oyd-green);
    color: var(--oyd-navy);
}

.section-label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oyd-navy);
}

.section--navy .section-label {
    color: var(--oyd-green);
}

.section-title {
    font-family: var(--oyd-font-display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    color: var(--oyd-navy);
}

.section--navy .section-title {
    color: var(--oyd-white);
}

/* Scroll Reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Home Hero */
.home-hero {
    padding: 4.5rem 0;
}

.hero-fill {
    flex: 1;
    display: flex;
    align-items: center;
}

/* The badge logo is portrait (331 x 440). 331px is all the supplied file has, so it is never shown wider */
.home-hero__logo {
    width: 100%;
    max-width: 18rem;
    height: auto;
    animation: hero-entry 0.5s ease-out 0.1s both;
}

.home-hero__logo--sm {
    max-width: 10rem;
    margin-bottom: 2.5rem;
}

.home-hero__title {
    font-family: var(--oyd-font-display);
    font-size: clamp(2.25rem, 5.4vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--oyd-navy);
    margin-bottom: 1.5rem;
    animation: hero-entry 0.5s ease-out 0.25s both;
}

.home-hero__tagline {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.65;
    margin-bottom: 1rem;
    animation: hero-entry 0.5s ease-out 0.4s both;
}

.home-hero__context {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    animation: hero-entry 0.5s ease-out 0.4s both;
}

/* The team's consent wording, directly above the "Get Involved" button it refers to */
.home-hero__consent {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    animation: hero-entry 0.5s ease-out 0.4s both;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    animation: hero-entry 0.5s ease-out 0.55s both;
}

@keyframes hero-entry {
    from {
        opacity: 0;
        transform: translateY(0.875rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stat Stack - the logo's stepped blocks and circle, carrying the campaign headline figures */
.stat-stack {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 3rem;
    padding-right: 3.5rem;
    text-align: left;
}

.stat-stack::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    top: 14%;
    height: 86%; /* Sized from the stack height so the circle never drops below the last block */
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--oyd-green);
}

.stat-stack__line {
    margin: 0;
    padding: 0.3em 0.5em 0.34em;
    background-color: var(--oyd-navy);
    color: var(--oyd-white);
    font-family: var(--oyd-font-display);
    font-size: clamp(1.15rem, 6vw, 4.25rem); /* 6vw keeps the longest line on one row down to 320px wide */
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.stat-stack__line:nth-child(2) {
    margin-left: 1.1em;
}

.stat-stack__line:nth-child(3) {
    margin-left: 2.2em;
}

.stat-band__question {
    margin-bottom: 0;
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.photo-grid__item--wide {
    grid-column: 1 / -1;
}

/* Section Photos */
.section-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.section-photo-wrap {
    position: relative;
    display: block;
    border-radius: var(--oyd-radius);
    overflow: hidden;
    cursor: zoom-in;
}

.section-photo-wrap picture {
    display: block;
}

.section-photo-wrap .section-photo {
    border-radius: 0;
    transition: transform 0.35s ease;
    display: block;
}

.section-photo-wrap:hover .section-photo,
.section-photo-wrap:focus-visible .section-photo {
    transform: scale(1.04);
}

.section-photo-zoom {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oyd-white);
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.section-photo-wrap:hover .section-photo-zoom,
.section-photo-wrap:focus-visible .section-photo-zoom {
    opacity: 1;
}

/* Lightbox */
.oyd-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.oyd-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.oyd-lightbox__img {
    max-width: 100%;
    max-height: 90dvh;
    object-fit: contain;
    border-radius: var(--oyd-radius-sm);
    display: block;
    user-select: none;
}

.oyd-lightbox__close,
.oyd-lightbox__nav {
    position: absolute;
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: var(--oyd-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--oyd-transition);
    z-index: 1;
}

.oyd-lightbox__close:hover,
.oyd-lightbox__close:focus-visible,
.oyd-lightbox__nav:hover,
.oyd-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, 0.3);
    outline: 0.1875rem solid var(--oyd-white);
}

.oyd-lightbox__close {
    top: 1rem;
    right: 1rem;
    font-size: 1.1rem;
}

.oyd-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.oyd-lightbox__prev { left: 1rem; }
.oyd-lightbox__next { right: 1rem; }

/* Quote Cards */
.quote-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 3.5rem 1.5rem 1.5rem; /* Top padding clears the 3rem of corner circle that shows */
    background-color: var(--oyd-white);
    border: 1px solid var(--oyd-border);
    border-radius: var(--oyd-radius-lg);
    overflow: hidden;
}

.quote-card::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background-color: var(--oyd-green);
}

.quote-card--purple::before {
    background-color: var(--oyd-purple);
}

.quote-card__quote {
    flex: 1;
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.quote-card__quote p {
    margin: 0;
}

.quote-card__source {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 1rem;
    border-top: 0.1875rem solid var(--oyd-green);
}

.quote-card--purple .quote-card__source {
    border-top-color: var(--oyd-purple);
}

.quote-card__name {
    font-family: var(--oyd-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--oyd-navy);
}

.quote-card__business {
    font-size: 0.9rem;
}

/* Page Hero (inner pages) */
.page-hero {
    background-color: var(--oyd-navy);
    color: var(--oyd-white);
    padding: 3.5rem 0 3rem;
}

.page-hero__label {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oyd-green);
    margin-bottom: 0.75rem;
}

.page-hero__title {
    font-family: var(--oyd-font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--oyd-white);
}

.page-hero__title:last-child {
    margin-bottom: 0;
}

.page-hero__lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    max-width: 42.5rem;
    margin-bottom: 0;
}

/* Marketing Pack */
.pack-list {
    margin-bottom: 2rem;
}

.pack-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.pack-list__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--oyd-radius);
    background-color: var(--oyd-navy);
    color: var(--oyd-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.pack-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.pack-download__meta {
    font-size: 0.875rem;
}

.pack-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pack-preview__img,
.pack-teaser__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--oyd-radius-lg);
}

.pack-preview__img {
    border: 1px solid var(--oyd-border);
}

.pack-preview__img--wide {
    grid-column: 1 / -1;
}

.pack-teaser__img {
    max-width: 26rem;
    margin: 0 auto;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 110, 0.25);
}

/* Coming Soon */
.coming-soon-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--oyd-white);
    border: 1px solid var(--oyd-border);
    border-radius: var(--oyd-radius-pill);
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--oyd-navy);
}

/* Form Embed (Google Form on /get-involved) */
/* The form is cross-origin, so its height cannot be read: these are measured heights for the form's long
   first page and for its shorter second page. A frame shorter than the form gives a second scrollbar inside
   the page, so each height is the form's own height at the narrowest frame of its range, plus 2rem for every
   required question (the "This is a required question" line) and about 6rem spare.
   Measured 2026-11-11 after the team updated the form. Re-measure whenever the form changes */
.form-embed {
    --oyd-form-height: 340rem;
    --oyd-form-step-height: 135rem;
    scroll-margin-top: calc(var(--oyd-top-height, 4.75rem) + 1rem);
}

.form-embed__frame {
    display: block;
    width: 100%;
    height: var(--oyd-form-height);
    border: 0;
}

/* Added by the Form Embed block in the JS once the visitor moves past the first page */
.form-embed__frame--step {
    height: var(--oyd-form-step-height);
}

.form-embed__help {
    font-size: 0.9375rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 360px) {
    .form-embed {
        --oyd-form-height: 310rem;
        --oyd-form-step-height: 122rem;
    }
}

@media (min-width: 375px) {
    .form-embed {
        --oyd-form-height: 300rem;
        --oyd-form-step-height: 120rem;
    }
}

@media (min-width: 576px) {
    .form-embed {
        --oyd-form-height: 272rem;
        --oyd-form-step-height: 98rem;
    }
}

@media (min-width: 768px) {
    .form-embed {
        --oyd-form-height: 257rem;
        --oyd-form-step-height: 90rem;
    }
}

/* Registration Form (/get-involved) */
.reg-intro {
    margin-bottom: 2rem;
}

.reg-intro p,
.reg-thanks p {
    line-height: 1.7;
}

.reg-noscript {
    background-color: var(--oyd-white);
    border: 0.125rem solid var(--oyd-navy);
    border-radius: var(--oyd-radius);
    padding: 1rem 1.25rem;
}

/* The white card shared by the form, the thank-you panel and the admin sign-in */
.reg-form,
.reg-thanks,
.admin-panel {
    background-color: var(--oyd-white);
    border: 1px solid var(--oyd-border);
    border-radius: var(--oyd-radius-lg);
    padding: 2.5rem;
}

.reg-form__note {
    font-size: 0.9375rem;
    margin-bottom: 2rem;
}

.reg-group {
    border-bottom: 1px solid var(--oyd-border);
    margin-bottom: 2.5rem;
    padding-bottom: 0.75rem;
}

.reg-group__title,
.admin-panel__title {
    font-family: var(--oyd-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--oyd-navy);
    border-left: 0.375rem solid var(--oyd-green);
    padding-left: 0.75rem;
    margin-bottom: 1.5rem;
}

/* A question. scroll-margin keeps it clear of the sticky top bar when the error summary jumps to it */
.reg-field {
    border: 0;
    min-width: 0;
    margin: 0 0 1.75rem;
    padding: 0;
    scroll-margin-top: calc(var(--oyd-top-height, 4.75rem) + 1rem);
}

/* Bootstrap floats legends and sizes them as headings: undo both so a legend matches a label */
.reg-field__label {
    display: block;
    float: none;
    width: auto;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--oyd-navy);
    margin-bottom: 0.5rem;
    padding: 0;
}

.reg-field .form-control,
.reg-field .form-select {
    min-height: 2.75rem;
    border-color: var(--oyd-input-border);
    border-radius: var(--oyd-radius);
    color: var(--oyd-text);
}

.reg-field .form-control:focus,
.reg-field .form-select:focus {
    border-color: var(--oyd-navy);
    box-shadow: none;
}

/* Radio buttons and checkboxes: each choice is a full-width row, so the whole row is the tap target */
.reg-choices {
    display: grid;
    gap: 0.5rem;
    clear: both;
}

.reg-choices--inline {
    grid-template-columns: repeat(2, minmax(0, 10rem));
}

.reg-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    background-color: var(--oyd-white);
    border: 1px solid var(--oyd-input-border);
    border-radius: var(--oyd-radius);
    padding: 0.5rem 0.875rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--oyd-transition), border-color var(--oyd-transition);
}

.reg-choice:hover {
    background-color: var(--oyd-mist);
}

.reg-choice__input {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--oyd-navy);
    cursor: pointer;
}

.reg-choice__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

@supports selector(:has(*)) {
    .reg-choice:has(.reg-choice__input:checked) {
        background-color: var(--oyd-mist);
        border-color: var(--oyd-navy);
        box-shadow: inset 0 0 0 1px var(--oyd-navy);
    }

    /* Show keyboard focus on the whole row, not only the small control */
    .reg-choice:has(.reg-choice__input:focus-visible) {
        outline: 0.1875rem solid var(--oyd-purple);
        outline-offset: 0.125rem;
    }

    .reg-choice__input:focus-visible {
        outline: none;
    }
}

/* Questions that only appear after an earlier answer */
.reg-conditional {
    border-left: 0.25rem solid var(--oyd-green);
    padding-left: 1.25rem;
}

.reg-field--other {
    margin-top: -0.75rem;
}

/* Errors */
.reg-field--invalid .form-control,
.reg-field--invalid .form-select,
.reg-field--invalid .reg-choice {
    border-color: var(--oyd-error);
}

.reg-field__error {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--oyd-error);
    margin: 0.5rem 0 0;
}

.reg-summary {
    background-color: var(--oyd-white);
    border: 0.1875rem solid var(--oyd-error);
    border-radius: var(--oyd-radius);
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    scroll-margin-top: calc(var(--oyd-top-height, 4.75rem) + 1rem);
}

.reg-summary__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--oyd-error);
    margin-bottom: 0.5rem;
}

.reg-summary__message {
    margin-bottom: 0.5rem;
}

.reg-summary__list {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.reg-summary__list li {
    padding: 0.25rem 0;
}

.reg-summary__list a {
    font-weight: 600;
    color: var(--oyd-error);
}

/* Consent, security check and the button */
.reg-consent {
    background-color: var(--oyd-mist);
    border-radius: var(--oyd-radius);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

/* Holds the space for the Turnstile widget (65px tall) so the button does not jump when it loads */
.reg-turnstile {
    min-height: 4.0625rem;
}

.reg-field--check {
    margin-bottom: 1.25rem;
}

.reg-submit__button {
    min-width: 16rem;
}

.reg-submit__hint {
    font-size: 0.875rem;
    margin: 0.75rem 0 0;
}

.reg-thanks {
    text-align: center;
    scroll-margin-top: calc(var(--oyd-top-height, 4.75rem) + 1rem);
}

.reg-thanks__icon {
    display: block;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--oyd-green);
    margin-bottom: 1rem;
}

/* Admin (/admin) */
.admin-signin {
    min-height: 2.75rem;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-message {
    font-weight: 600;
    color: var(--oyd-navy);
    margin: 1.25rem 0 0;
}

.admin-message--error {
    color: var(--oyd-error);
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-toolbar__total {
    font-size: 1.125rem;
}

.admin-reg {
    background-color: var(--oyd-white);
    border: 1px solid var(--oyd-border);
    border-radius: var(--oyd-radius);
    margin-bottom: 0.5rem;
}

/* A grid replaces the default disclosure triangle, so the row carries its own chevron */
.admin-reg__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.25rem 1rem;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
}

.admin-reg__summary::-webkit-details-marker {
    display: none;
}

.admin-reg[open] > .admin-reg__summary {
    background-color: var(--oyd-mist);
    border-bottom: 1px solid var(--oyd-border);
}

.admin-reg__name {
    font-weight: 600;
    color: var(--oyd-navy);
}

.admin-reg__name,
.admin-reg__business {
    overflow-wrap: anywhere;
}

.admin-reg__date {
    font-size: 0.875rem;
    white-space: nowrap;
}

.admin-reg__chevron {
    color: var(--oyd-navy);
    transition: transform var(--oyd-transition);
}

.admin-reg[open] .admin-reg__chevron {
    transform: rotate(180deg);
}

.admin-reg__answers {
    display: grid;
    grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 1rem;
}

.admin-reg__answers dt {
    font-weight: 600;
    color: var(--oyd-navy);
}

.admin-reg__answers dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .admin-reg__summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .admin-reg__name,
    .admin-reg__business,
    .admin-reg__date {
        grid-column: 1;
    }

    .admin-reg__chevron {
        grid-column: 2;
        grid-row: 1;
    }

    .admin-reg__answers {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .admin-reg__answers dd {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .reg-form,
    .reg-thanks,
    .admin-panel {
        padding: 1.5rem 1.25rem;
    }

    .reg-conditional {
        padding-left: 0.875rem;
    }

    .reg-submit__button {
        width: 100%;
        min-width: 0;
    }
}

/* Prose (long-form copy, e.g. Privacy Policy) */
.prose h2 {
    font-family: var(--oyd-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--oyd-navy);
    margin: 2.25rem 0 0.75rem;
}

.prose p {
    line-height: 1.7;
}

/* Buttons */
.btn-oyd-navy,
.btn-oyd-green,
.btn-oyd-outline-navy {
    display: inline-block;
    font-weight: 600;
    font-size: 1rem;
    border: 0.125rem solid transparent;
    padding: 0.75rem 2rem;
    border-radius: var(--oyd-radius-sm);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--oyd-transition), border-color var(--oyd-transition), color var(--oyd-transition);
}

.btn-oyd-navy:hover, .btn-oyd-navy:focus,
.btn-oyd-green:hover, .btn-oyd-green:focus,
.btn-oyd-outline-navy:hover, .btn-oyd-outline-navy:focus {
    text-decoration: none;
}

.btn-oyd-navy {
    background-color: var(--oyd-navy);
    color: var(--oyd-white);
    border-color: var(--oyd-navy);
}

.btn-oyd-navy:hover,
.btn-oyd-navy:focus {
    background-color: var(--oyd-navy-dark);
    border-color: var(--oyd-navy-dark);
    color: var(--oyd-white);
}

.btn-oyd-navy:disabled,
.btn-oyd-navy:disabled:hover {
    background-color: var(--oyd-navy);
    border-color: var(--oyd-navy);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Green always carries navy text - white on this green fails WCAG AA */
.btn-oyd-green {
    background-color: var(--oyd-green);
    color: var(--oyd-navy);
    border-color: var(--oyd-green);
}

.btn-oyd-green:hover,
.btn-oyd-green:focus {
    background-color: var(--oyd-green-light);
    border-color: var(--oyd-green-light);
    color: var(--oyd-navy);
}

.btn-oyd-outline-navy {
    background-color: transparent;
    color: var(--oyd-navy);
    border-color: var(--oyd-navy);
}

.btn-oyd-outline-navy:hover,
.btn-oyd-outline-navy:focus {
    background-color: var(--oyd-navy);
    border-color: var(--oyd-navy);
    color: var(--oyd-white);
}

.btn-oyd--sm {
    font-size: 0.875rem;
    padding: 0.625rem 1.125rem; /* Keeps the header button at a 44px tap height */
}

/* Partner Strip */
.partner-strip {
    background-color: var(--oyd-white);
    border-top: 1px solid var(--oyd-border);
    padding: 2rem 0;
}

.partner-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
}

.partner-strip__logo {
    height: 6.5rem;
    width: auto;
    display: block;
}

/* Site Footer */
.site-footer {
    background-color: var(--oyd-navy);
    color: var(--oyd-white);
    padding: 2rem 0;
}

.footer-muted {
    color: var(--oyd-footer-muted);
}

.footer-link {
    display: inline-block;
    padding: 0.375rem 0; /* Taller tap area for the stacked footer links */
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    transition: color var(--oyd-transition);
}

.footer-link:hover,
.footer-link:focus {
    color: var(--oyd-green);
    text-decoration: underline;
}

/* Responsive */

/* Stacked hero (logo above the heading): keep the logo from filling the first screen */
@media (max-width: 991.98px) {
    .home-hero__logo {
        max-width: 10rem;
    }
}

/* Phones in landscape have very little height */
@media (max-height: 30em) and (orientation: landscape) {
    .home-hero {
        padding: 2rem 0;
    }

    .home-hero__logo {
        max-width: 5.5rem;
    }
}

@media (max-width: 575.98px) {
    .home-hero {
        padding: 3rem 0;
    }

    .site-section {
        padding: 3rem 0;
    }

    .page-hero {
        padding: 2.5rem 0 2rem;
    }

    .site-brand__logo {
        height: 3.75rem;
    }

    .stat-stack {
        padding-right: 2rem;
        margin-bottom: 2.25rem;
    }

    .stat-stack__line:nth-child(2) {
        margin-left: 0.6em;
    }

    .stat-stack__line:nth-child(3) {
        margin-left: 1.2em;
    }

    /* Give the wrapping banner copy the full width to the left of the close button */
    .beta-banner {
        padding-left: 0.75rem;
    }

    .partner-strip__logo {
        height: 5.75rem;
    }
}

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

    .home-hero__logo,
    .home-hero__title,
    .home-hero__tagline,
    .home-hero__context,
    .home-hero__consent,
    .home-hero__actions {
        animation: none;
    }

    .section-photo-wrap .section-photo,
    .oyd-lightbox,
    .scroll-reveal,
    .reg-choice,
    .admin-reg__chevron {
        transition: none;
    }

    .scroll-reveal {
        opacity: 1;
        transform: none;
    }
}

/* Print */
@media print {
    .site-top,
    .site-nav,
    .skip-link {
        display: none;
    }

    body,
    main {
        display: block;
        min-height: 0;
    }
}