/* ==========================================================================
 * The Sponsorships and Partnerships hub (sponsorships-hub.php,
 * inc/sponsorships-hub.php), previewed at
 * /sponsorships-partnerships/?preview=sponsorships-v2.
 *
 * Loads on the hub only. Tokens from tokens.css only, no typed colours.
 * Pairings: navy on yellow, blue, pink and white, white on navy, and
 * --bh-blue-text for blue text on white. Yellow is a background, never text
 * on white. Buttons are bold caps, rounded square. Highlighted text is a navy
 * block with yellow text and square corners.
 *
 * Phone first. The route chooser stacks, the two-column blocks stack, and
 * fields are 48px tall with 16px text so iOS does not zoom.
 * ======================================================================== */

.bh-spons {
    font-family: var(--bh-font);
    font-weight: var(--bh-weight-medium);
    color: var(--bh-navy);
}

.bh-spons [hidden] {
    display: none !important;
}

/* main.min.css gives every section a 100px bottom margin. */
.bh-spons section {
    margin: 0;
}

.bh-spons :is(h1, h2, h3, h4) {
    font-family: var(--bh-font);
    color: inherit;
}

.bh-spons :is(a, button, input, select, textarea, summary):focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

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

.bh-spons .bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--bh-space-6);
    border: 2px solid transparent;
    border-radius: 6px;
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-spons .bh-btn--yellow {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-spons .bh-btn--yellow:hover,
.bh-spons .bh-btn--yellow:focus {
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

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

.bh-spons .bh-btn--navy:hover,
.bh-spons .bh-btn--navy:focus {
    background: var(--bh-navy);
    color: var(--bh-white);
}

.bh-spons .bh-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bh-spons .bh-spons__btn-ghost {
    border-color: var(--bh-white);
    background: transparent;
    color: var(--bh-white);
}

.bh-spons .bh-spons__btn-ghost:hover,
.bh-spons .bh-spons__btn-ghost:focus {
    background: var(--bh-white);
    color: var(--bh-navy);
}

/* On navy, a yellow button's navy hover would vanish into the surface: white instead. */
.bh-spons__section--navy .bh-btn--yellow:hover,
.bh-spons__section--navy .bh-btn--yellow:focus {
    background: var(--bh-white);
    color: var(--bh-navy);
}

/* ---- Preview and "to confirm" ------------------------------------------- */

.bh-spons__preview {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: var(--bh-space-2) var(--bh-space-4);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-align: center;
}

.bh-spons__confirm {
    display: inline-block;
    margin: var(--bh-space-3) 0 0;
    padding: var(--bh-space-1) var(--bh-space-3);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-spons__confirm strong {
    margin-right: var(--bh-space-1);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- First screen -------------------------------------------------------- */

.bh-spons__hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(540px, 78vh, 780px);
    padding: 140px 0 var(--bh-space-12);
    overflow: hidden;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-spons__hero-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 30%;
}

.bh-spons__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(33, 39, 47, 0.9) 0%, rgba(33, 39, 47, 0.6) 45%, rgba(33, 39, 47, 0.1) 80%),
        linear-gradient(0deg, rgba(33, 39, 47, 0.8) 0%, rgba(33, 39, 47, 0) 60%);
}

.bh-spons__hero-inner {
    display: grid;
    gap: var(--bh-space-4);
}

.bh-spons__kicker {
    width: fit-content;
    margin: 0;
    padding: 2px var(--bh-space-2);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-spons__title {
    max-width: 14ch;
    margin: 0;
    color: var(--bh-white) !important;
    font-size: clamp(2.25rem, 6vw, 4.75rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: 1;
    text-wrap: balance;
}

.bh-spons__lede {
    max-width: 38rem;
    margin: 0;
    font-size: var(--bh-text-md);
    line-height: var(--bh-leading-body);
}

.bh-spons__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    margin-top: var(--bh-space-2);
}

/* ---- Jump links ---------------------------------------------------------- */

.bh-spons__jump {
    border-bottom: 1px solid var(--bh-line);
    background: var(--bh-white);
}

.bh-spons__jump ul {
    display: flex;
    gap: var(--bh-space-5);
    margin: 0;
    padding: var(--bh-space-3) 0;
    list-style: none;
    overflow-x: auto;
    white-space: nowrap;
}

.bh-spons__jump a {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: none;
}

.bh-spons__jump a:hover {
    text-decoration: underline;
}

/* ---- Sections ------------------------------------------------------------ */

.bh-spons__section {
    padding: var(--bh-space-12) 0;
    background: var(--bh-white);
}

.bh-spons__section--tint {
    background: var(--bh-surface-2);
}

.bh-spons__section--navy {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-spons__head {
    max-width: 44rem;
    margin-bottom: var(--bh-space-6);
}

.bh-spons__eyebrow {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-spons__section--navy .bh-spons__eyebrow {
    color: var(--bh-yellow);
}

.bh-spons__h2 {
    margin: 0 0 var(--bh-space-4);
    font-size: clamp(1.75rem, 3.6vw, var(--bh-text-2xl));
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.01em;
    line-height: var(--bh-leading-tight);
    text-wrap: balance;
}

.bh-spons__h3 {
    margin: 0 0 var(--bh-space-3);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.2;
}

.bh-spons__h4 {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-spons p {
    line-height: var(--bh-leading-body);
}

.bh-spons__link {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-bold);
}

.bh-spons__section--navy a:not(.bh-btn) {
    color: var(--bh-yellow);
}

/* Two columns: copy and a photograph. */
.bh-spons__split,
.bh-spons__route,
.bh-spons__mission,
.bh-spons__brand,
.bh-spons__twocol {
    display: grid;
    gap: var(--bh-space-8);
}

.bh-spons__split img,
.bh-spons__route-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 480px;
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

.bh-spons__route-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-4);
}

@media (min-width: 992px) {
    .bh-spons__split,
    .bh-spons__route,
    .bh-spons__brand,
    .bh-spons__twocol {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .bh-spons__twocol {
        align-items: stretch;
    }

    .bh-spons__mission {
        grid-template-columns: 2fr 1fr;
        align-items: center;
    }

    #ambassadors .bh-spons__route-photo {
        order: -1;
    }
}

/* The strapline: a navy block with yellow text and square corners, as the guide says. On a
 * navy section that would vanish, so it takes a yellow block with navy text there. */
.bh-spons__strapline {
    display: inline-block;
    margin: 0 0 var(--bh-space-4);
    padding: var(--bh-space-2) var(--bh-space-4);
    border-radius: var(--bh-radius-none);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* The question on What we look for: the highlighted-text treatment. */
.bh-spons__question {
    max-width: 52rem;
    margin: 0 0 var(--bh-space-4);
    padding: var(--bh-space-5) var(--bh-space-6);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

.bh-spons__question p {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
}

.bh-spons__lead {
    max-width: 44rem;
    margin: 0 0 var(--bh-space-8);
    font-size: var(--bh-text-md);
}

.bh-spons__card {
    padding: var(--bh-space-6);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-spons__card--soft {
    border-color: var(--bh-line);
    background: var(--bh-surface-2);
}

.bh-spons__list {
    margin: 0 0 var(--bh-space-4);
    padding-left: var(--bh-space-5);
}

.bh-spons__list li {
    margin-bottom: var(--bh-space-2);
    line-height: var(--bh-leading-body);
}

.bh-spons__note {
    margin: var(--bh-space-4) 0 0;
    padding-left: var(--bh-space-3);
    border-left: 4px solid var(--bh-blue);
    font-weight: var(--bh-weight-semibold);
}

.bh-spons__links {
    display: grid;
    gap: var(--bh-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-spons__links a {
    font-weight: var(--bh-weight-bold);
}

/* ---- Film ---------------------------------------------------------------- */

.bh-spons__film {
    margin-top: var(--bh-space-8);
}

.bh-spons__film-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--bh-radius-md);
}

.bh-spons__film--placeholder {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: var(--bh-space-8) var(--bh-space-6);
    border: 2px dashed var(--bh-field-edge);
    border-radius: var(--bh-radius-md);
    background: var(--bh-surface-2);
    text-align: center;
}

.bh-spons__film-title {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
}

/* ---- Review steps -------------------------------------------------------- */

.bh-spons__steps {
    display: grid;
    gap: var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bh-spons-step;
}

.bh-spons__steps li {
    position: relative;
    padding: var(--bh-space-5) var(--bh-space-5) var(--bh-space-5) 4rem;
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    counter-increment: bh-spons-step;
}

.bh-spons__steps li::before {
    content: counter(bh-spons-step);
    position: absolute;
    top: var(--bh-space-5);
    left: var(--bh-space-5);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--bh-radius-full);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
    font-weight: var(--bh-weight-black);
}

.bh-spons__steps p {
    margin: 0;
}

@media (min-width: 768px) {
    .bh-spons__steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .bh-spons__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- Brand pack ---------------------------------------------------------- */

.bh-spons__pack {
    padding: var(--bh-space-6);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-md);
}

.bh-spons__pending {
    margin: 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    background: var(--bh-surface-2);
    font-weight: var(--bh-weight-semibold);
}

/* ---- Apply: chooser ------------------------------------------------------ */

.bh-spons__preview-banner {
    margin-bottom: var(--bh-space-6);
    padding: var(--bh-space-4) var(--bh-space-5);
    border-left: 6px solid var(--bh-pink);
    background: var(--bh-white);
}

.bh-spons__preview-banner p {
    margin: 0;
}

.bh-spons__chooser {
    display: grid;
    gap: var(--bh-space-3);
    margin: 0 0 var(--bh-space-4);
    padding: 0;
    border: 0;
}

.bh-spons__chooser legend {
    margin-bottom: var(--bh-space-3);
    padding: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

.bh-spons__chooser-card {
    position: relative;
    display: grid;
    gap: var(--bh-space-1);
    margin: 0;
    padding: var(--bh-space-4) var(--bh-space-5) var(--bh-space-4) 3.25rem;
    border: 2px solid var(--bh-field-edge);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    cursor: pointer;
}

.bh-spons__chooser-card input {
    position: absolute;
    top: var(--bh-space-4);
    left: var(--bh-space-5);
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    accent-color: var(--bh-navy);
}

.bh-spons__chooser-card:has(input:checked) {
    border-color: var(--bh-navy);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-spons__chooser-card:has(input:focus-visible) {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-spons__chooser-label {
    font-weight: var(--bh-weight-black);
}

.bh-spons__chooser-who {
    font-size: var(--bh-text-xs);
}

@media (min-width: 992px) {
    .bh-spons__chooser {
        grid-template-columns: repeat(3, 1fr);
    }

    .bh-spons__chooser legend {
        grid-column: 1 / -1;
    }
}

.bh-spons__choose-first {
    margin: var(--bh-space-4) 0;
    font-weight: var(--bh-weight-semibold);
}

/* ---- Apply: forms -------------------------------------------------------- */

.bh-spons__panel {
    margin-top: var(--bh-space-6);
    padding: var(--bh-space-6) var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-spons__preview-notice {
    margin: 0 0 var(--bh-space-4);
    padding: var(--bh-space-3) var(--bh-space-4);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-spons__form {
    display: grid;
    gap: var(--bh-space-6);
    max-width: 46rem;
}

.bh-spons__form-note {
    margin: 0;
    font-size: var(--bh-text-xs);
    color: var(--bh-muted);
}

.bh-spons__group {
    display: grid;
    gap: var(--bh-space-4);
    min-width: 0;
    margin: 0;
    padding: var(--bh-space-5) 0 0;
    border: 0;
    border-top: 1px solid var(--bh-line);
}

.bh-spons__group > legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--bh-space-3);
    padding: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
}

.bh-spons__group > legend + * {
    clear: both;
}

.bh-spons__group-intro {
    margin: 0;
}

.bh-spons__field {
    display: grid;
    gap: var(--bh-space-2);
    min-width: 0;
    margin: 0;
}

.bh-spons__field > label:not(.bh-spons__tick),
.bh-spons__choices legend {
    padding: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.35;
}

.bh-spons__optional {
    color: var(--bh-muted);
    font-weight: var(--bh-weight-medium);
}

.bh-spons__hint {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
}

.bh-spons__form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
    width: 100%;
    min-height: 48px;
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px solid var(--bh-field-edge);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
}

.bh-spons__form textarea {
    min-height: 8rem;
    resize: vertical;
}

.bh-spons__form :is(input, select, textarea):focus {
    border-color: var(--bh-navy);
}

.bh-spons__form input[type="file"] {
    max-width: 100%;
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
}

.bh-spons__choices {
    display: grid;
    gap: var(--bh-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-spons__choice,
.bh-spons__tick {
    display: flex;
    align-items: flex-start;
    gap: var(--bh-space-3);
    min-height: var(--bh-target-comfortable);
    margin: 0;
    padding: var(--bh-space-2) 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
    cursor: pointer;
}

.bh-spons__form input[type="checkbox"],
.bh-spons__form input[type="radio"] {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.1rem 0 0;
    accent-color: var(--bh-navy);
}

.bh-spons__notice {
    padding: var(--bh-space-4) var(--bh-space-5);
    border-left: 6px solid var(--bh-blue);
    background: var(--bh-surface-2);
}

.bh-spons__notice h4 {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-spons__notice p {
    margin: 0;
    font-size: var(--bh-text-xs);
}

.bh-spons__notice-inline {
    margin: 0;
    padding: var(--bh-space-4) var(--bh-space-5);
    border-left: 6px solid var(--bh-pink);
    background: var(--bh-surface-2);
    font-weight: var(--bh-weight-semibold);
}

.bh-spons__notice-inline a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-bold);
}

/* The published page before its privacy notice is approved: no form, the team's email and phone instead. */
.bh-spons__closed {
    max-width: 46rem;
    padding: var(--bh-space-4) var(--bh-space-5);
    border-left: 6px solid var(--bh-navy);
    background: var(--bh-surface-2);
}

.bh-spons__closed p {
    margin: 0 0 var(--bh-space-3);
}

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

.bh-spons__submit {
    margin: 0;
}

/* ---- Acknowledgement ----------------------------------------------------- */

.bh-spons__ack {
    max-width: 46rem;
    padding: var(--bh-space-6);
    border: 3px solid var(--bh-navy);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-spons__ack:focus {
    outline: none;
}

.bh-spons__ack:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-spons__ack-flag {
    display: inline-block;
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-1) var(--bh-space-3);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-spons__next {
    padding-left: var(--bh-space-5);
}

.bh-spons__next li {
    margin-bottom: var(--bh-space-2);
}

@media (min-width: 768px) {
    .bh-spons__panel {
        padding: var(--bh-space-8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bh-spons * {
        scroll-behavior: auto !important;
    }
}

/* ---- Sending: what needs another look, and the reference (Teamwork 11933139) ---- */

.bh-spons__error {
    margin: var(--bh-space-2) 0 0;
    padding: var(--bh-space-2) var(--bh-space-3);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-spons__error[hidden],
.bh-spons__summary[hidden] {
    display: none;
}

.bh-spons__summary {
    margin: 0 0 var(--bh-space-4);
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px solid var(--bh-navy);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
}

.bh-spons__summary ul {
    margin: var(--bh-space-2) 0 0;
    padding-left: var(--bh-space-5);
}

.bh-spons__summary a {
    color: var(--bh-on-pink);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

.bh-spons__field--invalid :is(input, select, textarea) {
    border-color: var(--bh-navy);
    box-shadow: 0 0 0 2px var(--bh-pink);
}

.bh-spons__ack-ref strong {
    display: inline-block;
    padding: var(--bh-space-1) var(--bh-space-3);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    letter-spacing: 0.06em;
}

.bh-spons__form button[aria-disabled="true"] {
    opacity: 0.7;
    cursor: progress;
}