/*
 * Ballyhass components.
 *
 * The reusable system from Master Handover section 5. Everything here reads
 * from tokens.css and hard-codes no colour, size or radius of its own, so a
 * brand change is a token change rather than a sweep through components.
 *
 * Loaded after main.min.css. These are new classes (bh-*), not overrides of
 * the compiled stylesheet, so nothing existing changes when this file loads.
 */

/* ---------------------------------------------------------------------------
 * Visually hidden, for text only a screen reader needs.
 *
 * The component layer owns this rather than borrowing WordPress's
 * .screen-reader-text, which this theme never defines, or Bootstrap's
 * .sr-only, which only survives while Bootstrap does. Using
 * .screen-reader-text here printed "(opens in a new tab)" inside every
 * booking button.
 * ------------------------------------------------------------------------ */

/* .visually-hidden is the legacy name, defined inline in the legacy footer
   and never in this theme, so the scraped Groups body printed its hidden
   "Download Groups Brochure" label over the brochure stamp. */
.bh-visually-hidden,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * ExperienceCard and the grid it sits in
 *
 * Handover section 5 lists CatalogueCard under Discovery and the product
 * components under Product. This is the first of them.
 * ------------------------------------------------------------------------ */

.bh-experiences {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bh-white);
    border-radius: var(--bh-radius-md);
    box-shadow: var(--bh-shadow-sm);
}

.bh-card__image {
    display: block;
    width: 100%;
    /* Reserve the space before the image arrives. These load from a remote
     * host and have no intrinsic size here, so without this the card jumps
     * and costs CLS on every grid. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.bh-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--bh-space-2);
    padding: var(--bh-space-5);
}

.bh-card__title {
    margin: 0;
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
}

.bh-card__descriptor {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);  /* the guide asks for medium body */
    line-height: var(--bh-leading-body);
}

.bh-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-card__fact {
    color: var(--bh-blue-text);   /* the only blue that passes as text on white */
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Push the action to the bottom so cards in a row line up whatever the
 * descriptor length. */
.bh-card__cta,
.bh-card__status {
    margin-top: auto;
}

.bh-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.2 AA 2.5.8 is 24px; the handover's mobile-first principle argues
     * for the comfortable target, so that is the floor here. */
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-5);
    border-radius: var(--bh-radius-sm);   /* "rounded square", per the guide */
    background: var(--bh-blue);
    color: var(--bh-on-blue);             /* navy on blue, 6.23:1 */
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);   /* buttons are bold caps, per the guide */
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-card__cta:hover,
.bh-card__cta:focus {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);           /* navy on yellow, 13.34:1 */
    text-decoration: none;
}

/* An enquiry or an availability check is not a booking, so it does not get the
 * primary treatment. Same target size and the same contrast guarantee. */
.bh-card__cta--enquire,
.bh-card__cta--availability,
.bh-card__cta--offline,
.bh-card__cta--info {
    background: transparent;
    border: 2px solid var(--bh-blue);
    color: var(--bh-blue-text);           /* on white, 5.01:1 */
}

.bh-card__cta--enquire:hover,
.bh-card__cta--enquire:focus,
.bh-card__cta--availability:hover,
.bh-card__cta--availability:focus,
.bh-card__cta--offline:hover,
.bh-card__cta--offline:focus,
.bh-card__cta--info:hover,
.bh-card__cta--info:focus {
    background: var(--bh-blue);
    color: var(--bh-on-blue);             /* navy on blue, 6.23:1 */
}

/* Seasonal closures and anything else with nowhere to send the visitor. A
 * statement, deliberately not styled as a control. */
.bh-card__status {
    margin-bottom: 0;
    padding-top: var(--bh-space-2);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

.bh-experiences--empty p,
.bh-experiences--error p {
    margin: 0;
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-medium);
}

@media (prefers-reduced-motion: no-preference) {
    .bh-card__cta {
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }
}

/* ---------------------------------------------------------------------------
 * LocationComparison
 *
 * Handover 3.2 wants Mallow and Coachford as destinations rather than filters,
 * and 14.3 lists "Mallow and Coachford differences are clear" as a success
 * test. Two columns that stack on a phone, so the comparison survives the
 * mobile-first principle instead of becoming two screens apart.
 * ------------------------------------------------------------------------ */

.bh-locations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--bh-space-6);
}

.bh-location {
    padding: var(--bh-space-6);
    background: var(--bh-white);
    border-radius: var(--bh-radius-md);
    box-shadow: var(--bh-shadow-sm);
}

.bh-location__name {
    margin: 0 0 var(--bh-space-1);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-location__address {
    margin: 0 0 var(--bh-space-6);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-location__group + .bh-location__group {
    margin-top: var(--bh-space-5);
}

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

.bh-location__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-location__item {
    padding: var(--bh-space-1) 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-location__none {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-style: italic;
    font-weight: var(--bh-weight-regular);
}

.bh-locations--error p {
    margin: 0;
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-medium);
}

/* ---------------------------------------------------------------------------
 * DestinationHub
 *
 * Handover 3.2 wants Mallow and Coachford as places rather than filters. The
 * hub reuses ExperienceCard for everything on offer, so a change to the card
 * reaches both venues and the comparison without being made three times.
 * ------------------------------------------------------------------------ */

.bh-destination__name {
    margin: 0 0 var(--bh-space-1);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-2xl);
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-destination__address {
    margin: 0 0 var(--bh-space-8);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-destination__group + .bh-destination__group {
    margin-top: var(--bh-space-12);
}

.bh-destination__group-label {
    margin: 0 0 var(--bh-space-5);
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bh-destination__none {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

.bh-destination__other {
    margin: var(--bh-space-12) 0 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-destination--error p {
    margin: 0;
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-medium);
}

/* ---- Venue page lists (template-parts/destination-hub.php) ------------------------------------
 * Eoghan, 30 October 2026 (comment 11931159, point 1): By Enquiry, Also Here and Back Next Season
 * "have relatively few cards, leaving large areas of white space". Four lists now, in order: Book
 * now as full cards in as many columns as fill the row (ballyhass_destination_columns()), For
 * groups as photograph tiles on a navy panel, and Back next season and Not running at the moment
 * as smaller, quieter tiles. Navy panel pairings: white on navy 15.04:1, yellow on navy 13.34:1,
 * navy on yellow 13.34:1. */

.bh-destination__lede {
    max-width: 62ch;
    margin: calc(-1 * var(--bh-space-3)) 0 var(--bh-space-5);
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* Book now: a short list fills its row. One or two cards lie on their side on a wide screen,
 * photograph beside the facts, rather than standing as two narrow cards beside empty columns. */
@media (min-width: 992px) {
    .bh-destination .bh-experiences--cols-1 { grid-template-columns: minmax(0, 1fr); }
    .bh-destination .bh-experiences--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bh-destination .bh-experiences--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bh-destination .bh-experiences--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .bh-destination :is(.bh-experiences--cols-1, .bh-experiences--cols-2) > .bh-card {
        flex-direction: row;
    }

    .bh-destination :is(.bh-experiences--cols-1, .bh-experiences--cols-2) > .bh-card > .bh-card__media {
        flex: 0 0 42%;
    }

    .bh-destination .bh-experiences--cols-1 > .bh-card > .bh-card__media {
        flex-basis: 50%;
    }

    .bh-destination :is(.bh-experiences--cols-1, .bh-experiences--cols-2) > .bh-card > .bh-card__media .bh-card__image {
        height: 100%;
        min-height: 280px;
        aspect-ratio: auto;
    }
}

/* What's On sits between Book now and For groups, its heading in the same style as theirs. */
.bh-destination .bh-destination__coming {
    padding: var(--bh-space-12) 0 0;
}

.bh-destination .bh-destination__coming .bh-wo-feature__head {
    margin-bottom: var(--bh-space-5);
}

.bh-destination .bh-destination__coming .bh-wo-feature__title {
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    line-height: var(--bh-leading-body);
    text-transform: uppercase;
}

.bh-destination__coming + .bh-destination__group {
    margin-top: var(--bh-space-12);
}

/* For groups: the navy panel. */
.bh-destination__band {
    padding: var(--bh-space-6) var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

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

.bh-destination__band-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-4) var(--bh-space-8);
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 var(--bh-space-6);
}

.bh-destination__band .bh-destination__group-label {
    margin-bottom: var(--bh-space-2);
    color: var(--bh-yellow);
}

.bh-destination__band .bh-destination__lede {
    margin: 0;
    color: var(--bh-on-navy);
}

.bh-destination__band-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-6);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-destination__band-cta:hover,
.bh-destination__band-cta:focus {
    background: var(--bh-white);
    color: var(--bh-on-white);
    text-decoration: none;
}

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

/* Tiles: two across on a phone, three on a tablet, as many as fill the row from 992px. */
.bh-dest-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-5) var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .bh-dest-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bh-space-6) var(--bh-space-5); }
    .bh-dest-tiles--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .bh-dest-tiles--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bh-dest-tiles--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* One tile on its own takes half the row, not all of it. */
.bh-dest-tiles--cols-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 24rem;
}

.bh-dest-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bh-dest-tile__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
}

.bh-dest-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
    .bh-dest-tile__media img {
        transition: transform 0.3s ease;
    }

    .bh-dest-tile:hover .bh-dest-tile__media img {
        transform: scale(1.04);
    }
}

/* No photograph: the designed panel the cards use, never an empty box. */
.bh-dest-tile__media--panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bh-space-4);
    background:
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(0, 182, 217, 0.18) 22px 24px),
        linear-gradient(135deg, var(--bh-navy) 0%, #2c3a47 100%);
}

.bh-dest-tile__panel-name {
    color: var(--bh-yellow);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    text-align: center;
    text-transform: uppercase;
}

.bh-dest-tile__chip {
    position: absolute;
    top: var(--bh-space-2);
    left: var(--bh-space-2);
    max-width: calc(100% - var(--bh-space-4));
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-on-white);
    box-shadow: var(--bh-shadow-sm);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.bh-dest-tile__body {
    padding: var(--bh-space-3) 0 0;
}

.bh-destination .bh-dest-tile__title {
    margin: 0;
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    line-height: 1.25;
}

@media (min-width: 768px) {
    .bh-destination .bh-dest-tile__title {
        font-size: var(--bh-text-md);
    }
}

.bh-dest-tile__link {
    color: inherit;
    text-decoration: none;
}

/* The whole tile is the link's target; the name is what a screen reader reads. */
.bh-dest-tile__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--bh-radius-md);
}

.bh-dest-tile__link:hover,
.bh-dest-tile__link:focus {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-dest-tile__link:focus-visible {
    outline: none;
}

.bh-dest-tile__link:focus-visible::after {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

.bh-dest-tile__line {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

.bh-destination__band .bh-dest-tile__title,
.bh-destination__band .bh-dest-tile__line {
    color: var(--bh-on-navy);
}

/* A tile with no photograph is the navy panel itself, so on the navy band it gets an edge. */
.bh-destination__band .bh-dest-tile__media--panel {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

/* Back next season: the same tiles, quieter. The photograph is muted and the text is not. */
.bh-dest-tiles--quiet .bh-dest-tile__media img {
    filter: saturate(0.55);
}

.bh-destination__group--returning .bh-destination__lede,
.bh-destination__group--closed .bh-destination__lede {
    color: var(--bh-muted);
}

/* ---------------------------------------------------------------------------
 * SportHub
 *
 * The bookable sessions for one sport, which ExperienceCard cannot show
 * because an experience with several categories falls back to the booking
 * app's picker rather than guessing. Reuses .bh-card__cta so the button is
 * the same control, with the same contrast guarantee and target size.
 * ------------------------------------------------------------------------ */

.bh-sporthub__group + .bh-sporthub__group {
    margin-top: var(--bh-space-12);
}

.bh-sporthub__label {
    margin: 0 0 var(--bh-space-5);
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bh-sporthub__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--bh-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-sporthub__option {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
    padding: var(--bh-space-5);
    background: var(--bh-white);
    border-radius: var(--bh-radius-md);
    box-shadow: var(--bh-shadow-sm);
}

.bh-sporthub__option-name {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
}

.bh-sporthub__option-meta {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-1);
    margin: 0 0 auto;
    color: var(--bh-blue-text);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-sporthub__option-days {
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-medium);
    text-transform: none;
    letter-spacing: 0;
}

.bh-sporthub__quiet-intro {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-sporthub__quiet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-4);
    padding: 0;
    list-style: none;
}

.bh-sporthub__quiet-item {
    padding: var(--bh-space-1) var(--bh-space-3);
    border: 1px solid var(--bh-blue);
    border-radius: var(--bh-radius-pill);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-sporthub__quiet-cta,
.bh-sporthub__none {
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-sporthub--error p {
    margin: 0;
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-medium);
}

/* ---------------------------------------------------------------------------
 * FAQ list
 *
 * Native <details> disclosures, so they open and close with no JavaScript and
 * are keyboard operable and correctly announced without any ARIA of our own.
 * ------------------------------------------------------------------------ */

.bh-faqs {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-2);
}

.bh-faq {
    background: var(--bh-white);
    border-radius: var(--bh-radius-md);
    box-shadow: var(--bh-shadow-sm);
}

.bh-faq__question {
    display: flex;
    gap: var(--bh-space-4);
    align-items: center;
    justify-content: space-between;
    /* Comfortably past the WCAG 2.2 AA 24px target, and a whole-row hit area
     * rather than just the words. */
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-4) var(--bh-space-5);
    cursor: pointer;
    list-style: none;   /* the default marker, replaced below */
}

/* Safari renders the marker through a pseudo-element of its own. */
.bh-faq__question::-webkit-details-marker {
    display: none;
}

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

.bh-faq__question-text {
    margin: 0;
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
}

/* A plus that becomes a minus. Drawn in CSS rather than shipped as an icon,
 * and hidden from assistive tech because <details> already announces state. */
.bh-faq__marker {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.bh-faq__marker::before,
.bh-faq__marker::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 2px;
    content: "";
    background: var(--bh-blue-text);
    transform: translateY(-50%);
}

.bh-faq__marker::after {
    transform: translateY(-50%) rotate(90deg);
}

.bh-faq[open] .bh-faq__marker::after {
    transform: translateY(-50%) rotate(0deg);
}

.bh-faq__answer {
    padding: 0 var(--bh-space-5) var(--bh-space-5);
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

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

@media (prefers-reduced-motion: no-preference) {
    .bh-faq__marker::before,
    .bh-faq__marker::after {
        transition: transform 0.2s ease-in-out;
    }
}

/* ---------------------------------------------------------------------------
 * Destination page editorial areas
 *
 * The structured areas Ballyhass populate around the live listing. Each one
 * is absent rather than empty when unwritten, so the spacing below never
 * applies to nothing.
 * ------------------------------------------------------------------------ */

.bh-destination__editorial + .bh-destination__editorial,
.bh-destination__editorial + .bh-destination,
.bh-destination + .bh-destination__editorial,
.bh-destination__gallery {
    margin-top: var(--bh-space-12);
}

.bh-destination__editorial-heading {
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-destination__editorial-body {
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-destination__editorial-body > :first-child { margin-top: 0; }
.bh-destination__editorial-body > :last-child { margin-bottom: 0; }

.bh-destination__gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-destination__gallery-list img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--bh-radius-md);
}

/* ---------------------------------------------------------------------------
 * Card additions for discovery (task 27687421)
 *
 * The flag, venue, times on the chosen day, alternatives for something out of
 * season, and a quieter second action beside the main one. Kinds added to the
 * outline treatment: external, membership and contact are not a Ballyhass
 * booking either.
 * ------------------------------------------------------------------------ */

.bh-card__flag {
    align-self: flex-start;
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-none);  /* a highlight: square, per the guide */
    background: var(--bh-navy);
    color: var(--bh-yellow);               /* yellow on navy, 13.34:1 */
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-card__venue {
    margin: 0;
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
}

.bh-card__fact--price {
    color: var(--bh-on-white);
}

.bh-card__times {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    font-variant-numeric: tabular-nums;
}

.bh-card__times-day {
    font-weight: var(--bh-weight-bold);
}

.bh-card__alternatives {
    padding: var(--bh-space-3);
    border-left: 4px solid var(--bh-navy);
    box-shadow: inset 0 0 0 1px rgba(33, 39, 47, 0.12);
}

.bh-card__alternatives-title {
    margin: 0 0 var(--bh-space-1);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-card__alternatives ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-card__alternatives a,
.bh-card__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-blue-text);   /* on white, 5.01:1 */
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

.bh-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-2) var(--bh-space-4);
    margin-top: auto;
}

/* Inside the actions row, the row does the pushing to the bottom. */
.bh-card__actions .bh-card__cta,
.bh-card__actions .bh-card__status {
    margin-top: 0;
}

.bh-card__note {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-card__cta--external,
.bh-card__cta--membership,
.bh-card__cta--contact {
    background: transparent;
    border: 2px solid var(--bh-blue);
    color: var(--bh-blue-text);
}

.bh-card__cta--external:hover,
.bh-card__cta--external:focus,
.bh-card__cta--membership:hover,
.bh-card__cta--membership:focus,
.bh-card__cta--contact:hover,
.bh-card__cta--contact:focus {
    background: var(--bh-blue);
    color: var(--bh-on-blue);
}

.bh-card__alternatives a:focus-visible,
.bh-card__link:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* ---------------------------------------------------------------------------
 * Discovery: [ballyhass_discover]
 *
 * Mobile first: one column, every choice a 44px target, chips wrap rather than
 * scroll sideways. The radios stay real radios; the chip is their label.
 * ------------------------------------------------------------------------ */

.bh-discover {
    display: grid;
    gap: var(--bh-space-6);
    font-family: var(--bh-font);
}

.bh-discover__title {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
}

.bh-discover__form {
    display: grid;
    gap: var(--bh-space-5);
    padding: var(--bh-space-5);
    background: var(--bh-white);
    border-radius: var(--bh-radius-md);
    box-shadow: var(--bh-shadow-sm);
}

.bh-discover__field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-discover__legend,
.bh-discover__label {
    display: block;
    margin: 0 0 var(--bh-space-2);
    padding: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;     /* subtitles: bold caps, per the guide */
}

.bh-discover__label {
    margin-top: var(--bh-space-3);
    font-weight: var(--bh-weight-semibold);
    text-transform: none;
}

.bh-discover__row {
    display: grid;
    gap: var(--bh-space-5);
}

.bh-discover__input {
    width: 100%;
    max-width: 22rem;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-3);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);   /* 16px: iOS zooms into anything smaller */
    font-weight: var(--bh-weight-medium);
}

.bh-discover__input--short {
    max-width: 8rem;
}

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

.bh-discover__help {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
}

/* Visually hidden, still a focusable and checkable radio. */
.bh-chips__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.bh-chips__chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    margin: 0;
    padding: var(--bh-space-2) var(--bh-space-4);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    cursor: pointer;
}

.bh-chips__input:checked + .bh-chips__chip {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-chips__input:focus-visible + .bh-chips__chip {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

.bh-discover__submit {
    justify-self: start;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-3) var(--bh-space-8);
    border: 0;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-pink);
    color: var(--bh-on-pink);        /* navy on pink, 4.84:1, never white */
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    cursor: pointer;
}

.bh-discover__submit:hover,
.bh-discover__submit:focus {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

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

.bh-discover__results {
    display: grid;
    gap: var(--bh-space-6);
    scroll-margin-top: var(--bh-space-16);
}

.bh-discover__notice {
    display: grid;
    gap: var(--bh-space-3);
    justify-items: start;
    padding: var(--bh-space-5);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-discover__notice p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
}

.bh-discover__notice .bh-discover__notice-title {
    color: var(--bh-yellow);         /* highlight: yellow on navy, square */
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
}

.bh-discover__hint,
.bh-discover__summary,
.bh-discover__empty {
    margin: 0;
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-medium);
}

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

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

.bh-discover__section-title {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .bh-discover__row {
        grid-template-columns: auto 1fr;
        align-items: start;
    }
}

/* Below 360px the grid's 260px minimum plus the page gutter would push the
 * page sideways. */
@media (max-width: 359px) {
    .bh-discover .bh-experiences {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
 * Result card, Book Now pass (task 27687421, comment 11927644)
 *
 * The photo carries the availability state, so "can I do it?" is answered
 * before the name is read. The price, the next session and any pass price sit
 * above one full-width action. Group and school cards are navy, the same shape.
 * Every pairing is from tokens.css: navy on blue, yellow, pink and white,
 * white on navy. Never white on blue or pink.
 * ------------------------------------------------------------------------ */

.bh-card__media {
    position: relative;
    background: var(--bh-navy);
}

.bh-card__media .bh-card__image {
    height: auto;
}

.bh-card__media:not(:has(img)) {
    aspect-ratio: 3 / 1;
}

.bh-card__state {
    position: absolute;
    left: var(--bh-space-3);
    bottom: var(--bh-space-3);
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-3);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-card__state--now   { background: var(--bh-yellow); color: var(--bh-on-yellow); }
.bh-card__state--open  { background: var(--bh-blue);   color: var(--bh-on-blue); }
.bh-card__state--full  { background: var(--bh-pink);   color: var(--bh-on-pink); }
.bh-card__state--group { background: var(--bh-white);  color: var(--bh-on-white); box-shadow: inset 0 0 0 2px var(--bh-navy); }
.bh-card__state--closed,
.bh-card__state--muted { background: var(--bh-white);  color: var(--bh-on-white); }

.bh-card__media .bh-card__flag {
    position: absolute;
    top: var(--bh-space-3);
    left: var(--bh-space-3);
}

/* Something not on sale reads quieter, but stays legible: no opacity on text. */
.bh-card--closed .bh-card__image,
.bh-card--muted .bh-card__image {
    filter: grayscale(0.6);
}

.bh-card__fact--price {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    text-transform: none;
    letter-spacing: 0;
}

.bh-card__next {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-2);
    align-items: baseline;
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-card__next-label {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-card__member {
    align-self: flex-start;
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);              /* the guide's highlight: yellow on navy, square */
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
}

.bh-card__alt-price {
    margin-left: var(--bh-space-2);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-card__actions .bh-card__cta {
    flex: 1 1 100%;
}

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

.bh-card--feature .bh-card__flag {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-card--feature .bh-card__title,
.bh-card--feature .bh-card__descriptor {
    color: var(--bh-on-navy);
}

.bh-card--feature .bh-card__cta:hover,
.bh-card--feature .bh-card__cta:focus {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

/* ---------------------------------------------------------------------------
 * Compact header, for pages with a short hero (round 1020b, comment 11927962)
 *
 * The shared header draws the white logo 130 to 210px tall so that it hangs into
 * a tall banner. On a short band there is nothing for it to hang into, and on
 * Book Now it sat on top of the page title. A page adds the body class
 * bh-header--compact (page-book-now.php does) and gets the same logo and menu
 * sized to sit inside the bar: 48px tall in the 70px bar, 64px in the 96px
 * desktop bar from 1199px, where the theme switches to its desktop menu. The
 * letterforms are untouched; only the size changes, and the guide's clear space
 * (the height of the "B") still fits above and below.
 *
 * Written against the compiled header classes, which have no source in this
 * repo, so there is no paired SCSS edit: the rule lives here, in the component
 * layer, scoped to the body class.
 * ------------------------------------------------------------------------ */

.bh-header--compact .c-navbar {
    height: 70px;
}

.bh-header--compact .c-navbar > .container {
    height: 100%;
    align-items: center;
}

.bh-header--compact .c-navbar .navbar-brand__main img,
.bh-header--compact .c-navbar .navbar-brand__main svg {
    width: auto;
    max-width: none;
    height: 48px;
}

@media (min-width: 1199px) {
    .bh-header--compact .c-navbar {
        height: 96px;
        padding: 16px 0;
    }

    .bh-header--compact .c-navbar .navbar-brand__main img,
    .bh-header--compact .c-navbar .navbar-brand__main svg {
        height: 64px;
    }
}

/* ---------------------------------------------------------------------------
 * Result card, second pass (round 1020b, comment 11927962)
 *
 * "Stronger experience imagery [...] better card typography, spacing and
 * hierarchy [...] less competing badge/text clutter [...] larger, more inviting
 * booking actions." One chip on the photo; where and how long as one quiet line;
 * the name large; the short line held to two lines; when; suitability; then a
 * footer with the price large, the pass price as plain text, and a 52px action.
 * Overrides the first pass above rather than rewriting it, so other grids that
 * use the card change with it.
 * ------------------------------------------------------------------------ */

.bh-card {
    border-radius: var(--bh-radius-md);
    box-shadow: var(--bh-shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
    .bh-card {
        transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
    }

    .bh-card:hover {
        box-shadow: 0 10px 24px rgba(33, 39, 47, 0.2);
        transform: translateY(-2px);
    }
}

.bh-card__media .bh-card__image {
    aspect-ratio: 3 / 2;
    height: auto;
}

/* No photograph: a designed panel in the brand colours, never an empty box. */
.bh-card__media--panel,
.bh-card__media:not(:has(img)) {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: var(--bh-space-6);
    background:
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(0, 182, 217, 0.18) 22px 24px),
        linear-gradient(135deg, var(--bh-navy) 0%, #2c3a47 100%);
}

.bh-card__panel-name {
    color: var(--bh-yellow);              /* yellow on navy, 13.34:1 */
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    text-align: center;
    text-transform: uppercase;
}

.bh-card__state {
    top: var(--bh-space-3);
    bottom: auto;
    box-shadow: var(--bh-shadow-sm);
}

.bh-card__state--future {
    background: var(--bh-white);
    color: var(--bh-on-white);
    box-shadow: inset 0 0 0 2px var(--bh-blue);
}

.bh-card__media .bh-card__flag {
    top: auto;
    bottom: var(--bh-space-3);
}

.bh-card__body {
    gap: var(--bh-space-2);
    padding: var(--bh-space-5) var(--bh-space-5) var(--bh-space-5);
}

.bh-card__venue {
    font-size: var(--bh-text-2xs);
    letter-spacing: 0.06em;
}

.bh-card__title {
    font-size: var(--bh-text-xl);
}

.bh-card__descriptor {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.bh-card__when {
    display: grid;
    gap: var(--bh-space-1);
    padding: var(--bh-space-3);
    border-radius: var(--bh-radius-sm);
    background: rgba(0, 182, 217, 0.08);
}

.bh-card__next {
    font-size: var(--bh-text-sm);
}

.bh-card__suits {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-card__foot {
    display: grid;
    gap: var(--bh-space-2);
    margin-top: auto;
    padding-top: var(--bh-space-4);
    border-top: 1px solid rgba(33, 39, 47, 0.12);
}

.bh-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--bh-space-2);
    margin: 0;
    color: var(--bh-on-white);
}

.bh-card__price-lead {
    flex-basis: 100%;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-card__price-from {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-card__price-amount {
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: 1;
}

/* The pass price is a fact about the price, not another badge. */
.bh-card__member {
    padding: 0;
    background: transparent;
    color: var(--bh-blue-text);           /* on white, 5.01:1 */
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-card__foot .bh-card__actions {
    margin-top: var(--bh-space-1);
}

.bh-card__foot .bh-card__cta {
    min-height: 52px;
    font-size: var(--bh-text-sm);
    letter-spacing: 0.02em;
}

.bh-card__foot .bh-card__link {
    flex: 1 1 100%;
    justify-content: center;
}

.bh-card--feature .bh-card__foot {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.bh-card--feature .bh-card__link {
    color: var(--bh-yellow);
}

.bh-card--feature .bh-card__state--group {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    box-shadow: var(--bh-shadow-sm);
}

/* ---------------------------------------------------------------------------
 * Highlighted text block.
 *
 * Brand guide section on type: "Highlighted text: Navy block, yellow text,
 * square corners." tokens.css named --bh-radius-none for this exact purpose
 * on 3 Oct 2026 but nothing built it. First use is the pattern library page;
 * it is a general-purpose inline/block emphasis, not specific to that page.
 *
 * Yellow on navy is not one of tokens.css's named pairings (those are
 * generic surface/foreground pairs; this is a specific brand pattern), so
 * the ratio is checked here instead: #E4FF1A on #21272F is 13.34:1, the same
 * pair reversed as --bh-on-yellow, so it clears AAA in both directions.
 * ------------------------------------------------------------------------ */

.bh-highlight {
    display: inline-block;
    background: var(--bh-navy);
    color: var(--bh-yellow);              /* 13.34:1 on navy, see above */
    border-radius: var(--bh-radius-none);
    padding: var(--bh-space-1) var(--bh-space-3);
    font-weight: var(--bh-weight-semibold);
}

.bh-highlight--block {
    display: block;
    padding: var(--bh-space-4) var(--bh-space-6);
}

/* Directions beside a hub's address. #map is where the homepage's "Find us"
   buttons land; the margin keeps it clear of the 100px fixed header. */
.bh-destination__address {
    scroll-margin-top: 120px;
}

.bh-destination__directions {
    margin-left: var(--bh-space-3);
    color: var(--bh-blue-text);           /* on white, 5.01:1 */
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* ===========================================================================
 * Book/Enquire strip (template-parts/booking-strip.php)
 *
 * The product page's booking summary, docked across the foot of the hero:
 * venue tabs, then the chosen venue's state or price, the shared facts and one
 * action. It sticks under the header and compacts to one line when stuck. On
 * phones it sits in the flow under the hero, and a slim bar takes over once it
 * has scrolled away (assets/js/booking-strip.js). Master v4 Appendix E.4.
 * ======================================================================== */

.bh-booking {
    position: sticky;
    top: var(--bh-booking-top, 80px);
    z-index: 120;                            /* above .main (100), below the header */
    margin-top: -72px;
    pointer-events: none;
}

.bh-booking-sentinel {
    display: block;
    height: 0;
}

.bh-booking__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--bh-space-4) var(--bh-space-8);
    padding: var(--bh-space-5) var(--bh-space-6);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-on-white);
    box-shadow: 0 16px 40px rgba(33, 39, 47, 0.22);
    font-family: var(--bh-font);
    pointer-events: auto;
}

.bh-booking__card--tabs {
    grid-template-columns: auto minmax(0, 1fr);
}

/* Venue tabs: a segmented control. */
.bh-booking__venues {
    display: inline-flex;
    gap: var(--bh-space-1);
    padding: var(--bh-space-1);
    border-radius: var(--bh-radius-md);
    background: var(--bh-surface-2);
}

.bh-booking__tab {
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-5);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bh-navy);
    font: var(--bh-weight-bold) var(--bh-text-xs) / 1 var(--bh-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-booking__tab[aria-selected="true"] {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-booking__tab:focus-visible,
.bh-booking__cta:focus-visible,
.bh-booking__secondary:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-booking__panel {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    align-items: center;
    gap: var(--bh-space-8);
}

.bh-booking__panel[hidden] {
    display: none;
}

.bh-booking__venue {
    display: block;
    margin-bottom: 2px;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-booking__headline {
    display: block;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.2;
}

.bh-booking__note {
    display: block;
    margin-top: 2px;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

/* The facts wrap, and so may a long value ("60 minutes, 90 minutes or 2 hours"),
   so the column gives way before the action is pushed past the card's edge
   (Aquapark at 1280px, 31 October 2026). */
.bh-booking__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-6);
    margin: 0;
    padding-left: var(--bh-space-8);
    border-left: 1px solid var(--bh-line);
}

.bh-booking__facts dt {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-booking__facts dd {
    margin: 2px 0 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-booking__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bh-space-2) var(--bh-space-4);
}

/* THE ACTION STAYS INSIDE THE CARD. Found 31 October 2026: on /activities/aqua-park/
   at 1280px the facts and the action took their full width, the price column was
   already at its 12rem minimum, and BOOK AT MALLOW ran 55px past the card's right
   edge, "Booking for a group?" 218px (474px at 1024px; axe throwing, kayaking and
   paddle boarding at 1024px too). Nothing in the panel could give way.

   Below 1600px a panel with facts puts "Booking for a group?" under its button
   rather than beside it, so the action is as wide as its button. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .bh-booking__panel {
        grid-template-columns: minmax(12rem, 1fr) auto min-content;
    }

    .bh-booking__panel .bh-booking__actions {
        justify-content: center;
    }
}

/* Up to 1200px the venue tabs sit above the panel, as on a phone, so the panel
   has the card's whole width. Stuck under the header it is one line again. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .bh-booking:not(.is-stuck) .bh-booking__card--tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-booking:not(.is-stuck) .bh-booking__venues {
        justify-self: start;
    }
}

/* Brand primary: yellow, navy text, all caps, rounded square. */
.bh-booking__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--bh-space-6);
    border-radius: 6px;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);              /* 13.34:1 */
    font: var(--bh-weight-bold) 0.9375rem / 1 var(--bh-font);
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.bh-booking__cta:hover {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    text-decoration: none;
}

.bh-booking__secondary {
    color: var(--bh-blue-text);              /* 5.01:1 */
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* Stuck under the header: one line, so it never covers the page. */
.bh-booking.is-stuck .bh-booking__card {
    padding: var(--bh-space-2) var(--bh-space-4);
    box-shadow: 0 8px 24px rgba(33, 39, 47, 0.2);
}

.bh-booking.is-stuck .bh-booking__facts,
.bh-booking.is-stuck .bh-booking__note,
.bh-booking.is-stuck .bh-booking__venue {
    display: none;
}

.bh-booking.is-stuck .bh-booking__headline {
    font-size: var(--bh-text-md);
}

.bh-booking.is-stuck .bh-booking__panel {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bh-booking.is-stuck .bh-booking__tab {
    min-height: 40px;
}

.bh-booking.is-stuck .bh-booking__cta {
    min-height: 44px;
}

@media (max-width: 991.98px) {
    .bh-booking {
        position: relative;
        top: auto;
        margin-top: -40px;
    }

    .bh-booking__card,
    .bh-booking__card--tabs {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--bh-space-4);
    }

    .bh-booking__venues {
        display: flex;
    }

    .bh-booking__tab {
        flex: 1 1 0;
    }

    .bh-booking__panel {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bh-space-4);
    }

    .bh-booking__facts {
        flex-wrap: wrap;
        gap: var(--bh-space-3) var(--bh-space-6);
        padding: var(--bh-space-3) 0 0;
        border-top: 1px solid var(--bh-line);
        border-left: 0;
    }

    .bh-booking__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bh-booking__secondary {
        text-align: center;
    }
}

/* More than one secondary link (the private group enquiry and an editor's extra link,
   inc/venue-lines.php): one under the other beside the button, so the action column is as
   wide as its longest link rather than both side by side. Stuck under the header only the
   button stays, so the strip keeps to one line. */
.bh-booking__more {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-2) var(--bh-space-4);
}

.bh-booking__more--stack {
    flex-direction: column;
    align-items: flex-start;
}

.bh-booking.is-stuck .bh-booking__more--stack {
    display: none;
}

@media (max-width: 991.98px) {
    .bh-booking__more,
    .bh-booking__more--stack {
        flex-direction: column;
        align-items: center;
    }
}

/* A part of an activity body written for one venue (data-bh-venue="coachford"), shown while
   that venue's tab is chosen (assets/js/booking-strip.js). The designed bodies set their own
   display, which would otherwise win over the hidden attribute. */
[data-bh-venue][hidden] {
    display: none !important;
}

/* Kayak & Paddleboard's Coachford hero (artifacts/migration/apply-water-pages-1103.php): the
   designed Mallow hero's layout, over a Coachford photograph instead of the Mallow lake. */
.bh-ksp-hero.bh-ksp-hero--coachford {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bh-navy) 84%, transparent) 0%, color-mix(in srgb, var(--bh-navy) 55%, transparent) 50%, color-mix(in srgb, var(--bh-blue) 18%, transparent) 100%),
        url("/wp-content/uploads/2026/10/BallyhassCoachfordKayaking.jpg") center center / cover no-repeat;
}

/* Axe Throwing's Coachford part (artifacts/migration/apply-axe-coachford-1103.php): navy, with no
   photograph, because the one behind the Mallow hero shows the Mallow targets. White on navy
   15.04:1. */
.bh-axe-open-v2--coachford .bh-axe-v2-hero {
    background: var(--bh-navy);
}

/* The line above an activity's banner title ("Ballyhass Coachford"): the brand's highlight,
   navy block, yellow text, square corners. */
.banner .banner_content > .bh-banner-kicker {
    display: inline-block;
    margin-bottom: var(--bh-space-3);
    padding: var(--bh-space-1) var(--bh-space-3);
    background: var(--bh-navy);
    color: var(--bh-yellow);                 /* 13.34:1 */
    font: var(--bh-weight-bold) var(--bh-text-sm) / 1.3 var(--bh-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Phones: the slim bar that takes over from the strip. */
.bh-booking-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: var(--bh-space-3);
    padding: var(--bh-space-3) max(16px, env(safe-area-inset-right, 0px)) calc(var(--bh-space-3) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    box-shadow: 0 -8px 24px rgba(33, 39, 47, 0.25);
    font-family: var(--bh-font);
}

.bh-booking-bar[hidden] {
    display: none;
}

/* A long button (EXPLORE THE ALL ACCESS DAY PASS) cut the title down to "Ka..." on a phone,
   because the button never wrapped and the words gave way to nothing (3 November 2026). Now the
   words keep a share of the bar and wrap to two lines, and the button wraps its label inside at
   most three fifths of the bar, so every label fits at 320px. */
.bh-booking-bar__text {
    flex: 1 1 0;
    min-width: 6.5rem;
}

.bh-booking-bar__title,
.bh-booking-bar__state {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    white-space: normal;
}

.bh-booking-bar__title {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-booking-bar__state {
    color: var(--bh-line);                   /* 11.6:1 on navy */
    font-size: var(--bh-text-2xs);
}

.bh-booking-bar__cta {
    flex: 0 1 auto;
    max-width: 60%;
    min-height: var(--bh-target-comfortable);
    margin-left: auto;
    padding: var(--bh-space-2) var(--bh-space-4);
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}

@media (min-width: 992px) {
    .bh-booking-bar {
        display: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bh-booking__card {
        transition: padding 150ms ease-out, box-shadow 150ms ease-out;
    }
}

/* ---------------------------------------------------------------------------
 * The same strip on camp and other product pages (inc/price-summary.php,
 * placed by page.php). Eoghan, 11931176 point 2: one price and availability
 * component across activities, camps and other products.
 * ------------------------------------------------------------------------ */

/* The price's type (Standard, Off-peak, Offer): the brand's highlighted text,
   a navy block with yellow text and square corners (13.34:1). */
.bh-booking__type {
    display: inline-block;
    margin-top: var(--bh-space-1);
    padding: 3px var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* The type sits on the price's own line where it fits. */
.bh-booking__state:has(.bh-booking__type) .bh-booking__headline {
    display: inline;
    margin-right: var(--bh-space-2);
}

.bh-booking__headline + .bh-booking__type {
    vertical-align: 3px;
}

/* No facts (nothing on sale, or a group quotation): state, then the action. */
.bh-booking__panel--bare {
    grid-template-columns: minmax(12rem, 1fr) auto;
}

/* Dates not yet on sale: the message is the headline, set a step smaller so a
   long one ("2027 dates and prices coming soon") stays on one or two lines. */
.bh-booking__panel[data-state="coming_soon"] .bh-booking__headline,
.bh-booking__panel[data-state="closed"] .bh-booking__headline {
    font-size: var(--bh-text-md);
}

/* On an ordinary page (page.php) the strip opens the content. main.min.css
   gives every section a 100px bottom margin, which here would only open a
   gap above the page's own hero. */
.page-content > .bh-booking {
    margin-bottom: 0;
}

/* Under the slim bar of a page with its own designed hero: on the bar's torn
   edge, just below the header, rather than 72px up behind it. With no
   overlap it compacts only once the page is scrolled (booking-strip.js reads
   the margin). */
.bh-booking--slim {
    margin-top: 0;
}

.bh-booking.is-stuck .bh-booking__type {
    display: none;
}

/* Stuck, a panel with only a link ("See what's on now") keeps the height of
   one with a button, so the bar is the same on every page. */
.bh-booking.is-stuck .bh-booking__panel {
    min-height: 44px;
}

@media (max-width: 991.98px) {
    .bh-booking--slim {
        padding-top: var(--bh-space-4);
    }

    /* The page's own hero starts right under the slim bar on a phone
       (refinements.css), so the strip keeps a gap above it. */
    .page-content > .bh-booking--slim {
        margin-bottom: var(--bh-space-4);
    }

    .bh-booking__panel--bare {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Breadcrumb under the booking strip on product pages. */
.bh-crumbs .breadcrumb {
    margin: 0 0 var(--bh-space-8);
    padding: 0;
    border-radius: 0;
    background: none;
    font: var(--bh-weight-bold) var(--bh-text-2xs) / 1.4 var(--bh-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-crumbs .breadcrumb-item a {
    color: var(--bh-blue-text);              /* 5.01:1 */
}

.bh-crumbs .breadcrumb-item.active {
    color: var(--bh-navy);
}

.bh-crumbs .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    color: var(--bh-muted);
}

/* ===========================================================================
 * Hub hero (inc/hub-hero.php, template-parts/hub-hero.php)
 *
 * The shared hero for audience and destination hubs, approved as one of three
 * families (Teamwork 11929468). It starts under the transparent header like
 * every other hero, ends on the brand's torn edge, and comes in two
 * compositions so hubs keep their own character:
 *   --cover  photo across the page, copy on a dark glass panel, video card
 *   --split  navy panel beside the photo
 * A body component can dock across its foot (--bh-hub-dock).
 * ======================================================================== */

.bh-hub-hero {
    --bh-hub-dock: 96px;
    position: relative;
    z-index: 1;                              /* covers the body that slides under it */
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(560px, 74vh, 780px);
    padding: 148px 0 calc(var(--bh-hub-dock) + 72px);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
}

/* The torn edge every hero on the site ends on (main.min.css draws it on
   .banner figure with the same image). */
.bh-hub-hero::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;
    height: 95px;
    content: "";
    background: url("../images/ballyhass/white-rip-4.png") center bottom / cover no-repeat;
    pointer-events: none;
}

.bh-hub-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.bh-hub-hero__image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.bh-hub-hero__container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.bh-hub-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 40rem);
    align-items: end;
    gap: var(--bh-space-12);
}

.bh-hub-hero__grid--aside {
    grid-template-columns: minmax(0, 44rem) minmax(0, 22rem);
    justify-content: space-between;
}

.bh-hub-hero__eyebrow {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-yellow);                 /* 13.34:1 on navy */
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bh-hub-hero__title {
    margin: 0;
    color: inherit;
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
    font-weight: var(--bh-weight-bold);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.bh-hub-hero__intro {
    max-width: 34rem;
    margin: var(--bh-space-5) 0 0;
    color: inherit;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: 1.55;
    opacity: 0.92;
}

.bh-hub-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    margin-top: var(--bh-space-8);
}

.bh-hub-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--bh-space-6);
    border: 2px solid var(--bh-yellow);
    border-radius: 6px;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font: var(--bh-weight-bold) 0.9375rem / 1 var(--bh-font);
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-hub-hero__cta:hover {
    border-color: var(--bh-white);
    background: var(--bh-white);
    color: var(--bh-navy);
    text-decoration: none;
}

.bh-hub-hero__cta--ghost {
    border-color: rgba(255, 255, 255, 0.85);
    background: transparent;
    color: var(--bh-white);
}

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

.bh-hub-hero__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: var(--bh-space-2) var(--bh-space-6);
    margin: var(--bh-space-6) 0 0;
    padding: 0;
    list-style: none;
}

.bh-hub-hero__points li {
    display: flex;
    align-items: baseline;
    gap: var(--bh-space-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

.bh-hub-hero__points li::before {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bh-yellow);
    content: "";
    transform: translateY(-1px);
}

.bh-hub-hero__video {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

.bh-hub-hero__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.bh-hub-hero__caption {
    margin: var(--bh-space-3) 0 0;
    font-size: var(--bh-text-xs);
    line-height: 1.5;
    opacity: 0.88;
}

/* Cover: the photo across the page, darkened where the text sits. */
.bh-hub-hero--cover .bh-hub-hero__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(33, 39, 47, 0.86) 0%, rgba(33, 39, 47, 0.55) 45%, rgba(33, 39, 47, 0.1) 78%),
        linear-gradient(180deg, rgba(33, 39, 47, 0.45) 0%, rgba(33, 39, 47, 0) 30%);
}

.bh-hub-hero--cover .bh-hub-hero__panel {
    padding: var(--bh-space-8) var(--bh-space-8) var(--bh-space-6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(20, 25, 31, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Split: navy panel beside the photo, which fades into it. */
@media (min-width: 992px) {
    .bh-hub-hero--split .bh-hub-hero__media {
        left: 46%;
    }

    .bh-hub-hero--split .bh-hub-hero__media::before {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 1;
        width: 30%;
        content: "";
        background: linear-gradient(90deg, var(--bh-navy), rgba(33, 39, 47, 0));
    }

    .bh-hub-hero--split .bh-hub-hero__grid {
        grid-template-columns: minmax(0, 36rem);
    }
}

@media (max-width: 991.98px) {
    .bh-hub-hero {
        --bh-hub-dock: 48px;
        min-height: 0;
        padding-top: 120px;
    }

    .bh-hub-hero__grid,
    .bh-hub-hero__grid--aside {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bh-space-8);
    }

    .bh-hub-hero--cover .bh-hub-hero__panel {
        padding: var(--bh-space-6) var(--bh-space-5);
    }

    .bh-hub-hero__points {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Split on phones: the photo first, under the header, then the panel. */
    .bh-hub-hero--split {
        display: block;
        padding-top: 0;
    }

    .bh-hub-hero--split .bh-hub-hero__media {
        position: relative;
        aspect-ratio: 4 / 3;
        z-index: 0;
    }

    .bh-hub-hero--split .bh-hub-hero__media::after {
        position: absolute;
        inset: 0;
        content: "";
        background: linear-gradient(180deg, rgba(33, 39, 47, 0.55) 0%, rgba(33, 39, 47, 0) 35%, rgba(33, 39, 47, 0) 70%, var(--bh-navy) 100%);
    }

    .bh-hub-hero--split .bh-hub-hero__container {
        padding-top: var(--bh-space-6);
    }
}

@media (max-width: 575.98px) {
    .bh-hub-hero__actions {
        flex-direction: column;
    }
}

/* The legacy ten-of-twelve column that wraps a designed body is released on
   hub pages, so the body shares the hero's container edges. */
.has-hub-hero .entry-content .row > .col-xxl-10.offset-xxl-1 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
}

.has-hub-hero .entry-content .is-docked {
    position: relative;
    z-index: 5;
    /* Legacy designs offset these to overlap their old hero (Schools' journey
       bar by -34px), which pushed them out of a clipping section. The hero
       now does the placing. */
    margin-top: 0 !important;
}

/* Hub hero on phones: the action first. Eoghan (Teamwork 11929472): the
   Schools hero's heading and introduction pushed the main action down the
   first screen. The title steps down, the buttons follow it straight away,
   the introduction and points come after, and the video card is left for
   larger screens. */
@media (max-width: 767.98px) {
    .bh-hub-hero {
        padding-top: 104px;
    }

    /* The 104px clears the header for a cover hero's panel. A split hero's
       photograph runs under the transparent header instead, as it does from
       768px to 991px ("the photo first, under the header", above): until
       31 October 2026 this rule left a 104px navy band above the photograph
       on every split hero on a phone (Camps, the Camp Finder, Coachford). */
    .bh-hub-hero--split {
        padding-top: 0;
    }

    .bh-hub-hero__panel {
        display: flex;
        flex-direction: column;
    }

    .bh-hub-hero__eyebrow { order: 0; }
    .bh-hub-hero__title   { order: 1; font-size: clamp(1.75rem, 7.6vw, 2.125rem); }
    .bh-hub-hero__actions { order: 2; margin-top: var(--bh-space-5); }
    .bh-hub-hero__intro   { order: 3; margin-top: var(--bh-space-5); font-size: var(--bh-text-xs); }
    .bh-hub-hero__points  { order: 4; margin-top: var(--bh-space-4); }

    .bh-hub-hero__aside {
        display: none;
    }

    .bh-hub-hero--cover .bh-hub-hero__panel {
        padding: var(--bh-space-5) var(--bh-space-4);
    }
}

/* ===========================================================================
   Homepage discovery: the season's hero and three journeys
   (template-parts/home-discovery.php, inc/home-discovery.php).

   Eoghan, 25 October 2026 (comment 11929477): "three prominent, beautifully
   designed and immediately understandable choices", photography-led, not a
   search bar over a product grid. The one bold element is the row of three
   photographic journey doors; the panels under them stay quiet and plain.
   Chips are rounded squares, a chosen one is the brand's highlight (navy
   block, yellow text). Every colour pairing is one tokens.css allows.
   ========================================================================= */
.bh-home {
    position: relative;
    font-family: var(--bh-font);
    color: var(--bh-on-white);
}

.bh-home__hero {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(600px, 82vh, 860px);
    padding: 150px 0 210px;           /* the header above, the doors below */
    overflow: hidden;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-home__hero > picture,
.bh-home__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-home__hero > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Navy from the left and the foot, so white text reads on any photograph. */
.bh-home__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(33, 39, 47, 0.86) 0%, rgba(33, 39, 47, 0.55) 42%, rgba(33, 39, 47, 0.05) 78%),
        linear-gradient(0deg, rgba(33, 39, 47, 0.7) 0%, rgba(33, 39, 47, 0) 50%);
}

.bh-home__intro {
    position: relative;
}

.bh-home__intro > * {
    max-width: 760px;
}

/* A line of its own above the label, never beside it. */
.bh-home__notice {
    display: flex;
    width: fit-content;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-3);
    align-items: center;
    margin: 0 0 var(--bh-space-5);
    padding: var(--bh-space-2) var(--bh-space-4);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-home__notice a {
    color: var(--bh-on-yellow);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

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

/* The brand's highlighted text: navy block, yellow text, square corners. */
.bh-home__eyebrow {
    display: inline-block;
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-3);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-home__title {
    margin: var(--bh-space-4) 0 var(--bh-space-4);
    max-width: 13ch;
    color: var(--bh-white);
    font-size: clamp(2.5rem, 5.6vw, 4.75rem);
    font-weight: var(--bh-weight-black);
    line-height: 1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.bh-home__lede {
    max-width: 54ch;
    margin: 0;
    color: var(--bh-white);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* The doors and their panel ride up over the photograph. */
.bh-home__console-wrap {
    position: relative;
    z-index: 3;
    margin-top: -170px;
}

.bh-journeys {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bh-space-3);
}

.bh-journey {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 148px;
    padding: var(--bh-space-5) var(--bh-space-5) var(--bh-space-4);
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: var(--bh-navy);
    color: var(--bh-white);
    font-family: var(--bh-font);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(33, 39, 47, 0.28);
}

.bh-journey__photo {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
}

.bh-journey::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(0deg, rgba(33, 39, 47, 0.92) 8%, rgba(33, 39, 47, 0.35) 100%);
    transition: background-color 0.2s ease;
}

.bh-journey[aria-selected="false"]::before {
    background: linear-gradient(0deg, rgba(33, 39, 47, 0.94) 8%, rgba(33, 39, 47, 0.7) 100%);
}

/* The chosen journey: a yellow bar across its top. */
.bh-journey::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 6px;
    content: "";
    background: var(--bh-yellow);
    transform: scaleX(0);
    transform-origin: left;
}

.bh-journey[aria-selected="true"]::after {
    transform: scaleX(1);
}

.bh-journey__text {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--bh-space-1);
}

.bh-journey__title {
    font-size: clamp(1.125rem, 1.7vw, 1.5rem);
    font-weight: var(--bh-weight-black);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.bh-journey[aria-selected="true"] .bh-journey__title {
    color: var(--bh-yellow);
}

.bh-journey__line {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.35;
}

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

@media (prefers-reduced-motion: no-preference) {
    .bh-journey__photo {
        transition: transform 0.5s ease;
    }

    .bh-journey:hover .bh-journey__photo {
        transform: scale(1.05);
    }

    .bh-journey::after {
        transition: transform 0.3s ease;
    }

    .bh-panel:not([hidden]) {
        animation: bh-panel-in 0.25s ease-out;
    }

    @keyframes bh-panel-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
}

.bh-console {
    margin-top: var(--bh-space-3);
    padding: var(--bh-space-8) var(--bh-space-8) var(--bh-space-6);
    border-radius: 12px;
    background: var(--bh-white);
    box-shadow: 0 18px 44px rgba(33, 39, 47, 0.16);
}

/* One question: its label on the left, the answers as chips beside it. */
.bh-ask {
    min-width: 0;
    margin: 0 0 var(--bh-space-5);
    padding: 0;
    border: 0;
}

.bh-ask::after {
    display: table;
    clear: both;
    content: "";
}

.bh-ask__q {
    display: block;
    margin: 0 0 var(--bh-space-2);
    padding: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-ask__optional {
    color: var(--bh-muted);
    font-weight: var(--bh-weight-medium);
    letter-spacing: 0;
    text-transform: none;
}

.bh-ask__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    align-items: center;
}

@media (min-width: 992px) {
    .bh-ask > .bh-ask__q {
        float: left;
        width: 220px;
        padding-top: 12px;
    }

    .bh-ask > .bh-ask__chips {
        margin-left: 236px;
    }
}

.bh-chip {
    position: relative;
    display: inline-flex;
}

.bh-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bh-chip label {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    margin: 0;
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-line);
    border-radius: 6px;
    background: var(--bh-white);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

.bh-chip label:hover {
    border-color: var(--bh-navy);
}

.bh-chip input:checked + label {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

.bh-chip input:focus-visible + label {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

.bh-chip input:disabled + label {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Quick Book: a venue that offers it but cannot sell it online right now. */
.bh-chip[data-state="closed"] label {
    border-style: dashed;
    color: var(--bh-muted);
}

:is(.bh-home, .bh-quickband) input[type="date"],
:is(.bh-home, .bh-quickband) input[type="number"],
:is(.bh-home, .bh-quickband) select {
    min-height: 48px;
    padding: 0 var(--bh-space-3);
    border: 2px solid var(--bh-field-edge);   /* 3:1 or more: WCAG 1.4.11 */
    border-radius: 6px;
    background: var(--bh-white);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

:is(.bh-home, .bh-quickband) input[type="date"]:focus-visible,
:is(.bh-home, .bh-quickband) input[type="number"]:focus-visible,
:is(.bh-home, .bh-quickband) select:focus-visible {
    border-color: var(--bh-navy);
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-ask__date[hidden] {
    display: none;
}

/* Buttons: bold caps, rounded square, per the guide. */
:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .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;
}

:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn--yellow {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn--yellow:hover,
:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn--yellow:focus {
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn--navy {
    border-color: var(--bh-navy);
    background: var(--bh-white);
    color: var(--bh-navy);
}

:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn--navy:hover,
:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn--navy:focus {
    background: var(--bh-navy);
    color: var(--bh-white);
}

:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* On navy, the yellow button's navy hover would vanish into the surface: white instead. */
:is(.bh-padel-events, .bh-ideas__groups, .bh-groups__feature, .bh-home__quickbar) .bh-btn--yellow:hover,
:is(.bh-padel-events, .bh-ideas__groups, .bh-groups__feature, .bh-home__quickbar) .bh-btn--yellow:focus {
    background: var(--bh-white);
    color: var(--bh-navy);
}

:is(.bh-home, .bh-home-low, .bh-quickband, .bh-groups, .bh-padel-events, .bh-careers, .bh-waiver) .bh-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

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

@media (min-width: 992px) {
    .bh-find__actions {
        padding-left: 236px;
    }
}

.bh-find__clear {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

.bh-find__clear[hidden] {
    display: none;
}

/* Quick Book: one row on a laptop, the experience first. */
.bh-quick__row {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) auto minmax(150px, 1fr) auto;
    gap: var(--bh-space-5);
    align-items: end;
}

.bh-quick__field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-quick__field select,
.bh-quick__field input {
    width: 100%;
}

.bh-quick select {
    min-height: 52px;
    padding-right: var(--bh-space-8);
    border-color: var(--bh-navy);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2321272F' stroke-width='2.5'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    font-size: var(--bh-text-sm);
}

.bh-quick__state {
    min-height: 1.5em;
    margin: var(--bh-space-3) 0 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

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

.bh-quick__note {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
}

.bh-quick__fast {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    align-items: center;
    margin-top: var(--bh-space-5);
    padding-top: var(--bh-space-4);
    border-top: 1px solid var(--bh-line);
}

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

.bh-quick__fast-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-quick__fast-list a {
    display: inline-flex;
    gap: var(--bh-space-2);
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-3);
    border-radius: 6px;
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: none;
}

.bh-quick__fast-list a span {
    color: var(--bh-muted);
    font-weight: var(--bh-weight-medium);
}

.bh-quick__fast-list a:hover,
.bh-quick__fast-list a:focus {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

/* Plan a Group */
.bh-plan__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: var(--bh-space-5);
    margin: 0 0 var(--bh-space-5);
}

@media (min-width: 992px) {
    .bh-plan__grid,
    .bh-plan__actions,
    .bh-plan__call {
        margin-left: 236px;
    }
}

.bh-plan__grid input {
    width: 100%;
}

.bh-plan__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
}

/* Plan a Group's promise, first in the panel and in the brand's highlight. */
.bh-plan__promise {
    margin-bottom: var(--bh-space-6);
}

.bh-plan__promise-line {
    margin: 0;
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    font-weight: var(--bh-weight-black);
    line-height: 1.25;
    text-transform: uppercase;
}

.bh-plan__promise-lede {
    max-width: 68ch;
    margin: var(--bh-space-3) 0 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

.group-enquiry__promise {
    margin: var(--bh-space-4) 0;
    font-size: var(--bh-text-base);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
}

.bh-plan__call {
    margin-top: var(--bh-space-4);
    margin-bottom: 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
}

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

/* Find Adventure's answer */
.bh-home-results__inner {
    padding-top: var(--bh-space-12);
}

.bh-home-results[aria-busy="true"] {
    opacity: 0.55;
}

.bh-home-results__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3) var(--bh-space-6);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--bh-space-6);
}

.bh-home-results__title,
.bh-season-rail__title {
    margin: 0;
    color: var(--bh-navy);
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    font-weight: var(--bh-weight-black);
    line-height: 1.1;
}

.bh-home-results__summary {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-home-results__all,
.bh-season-rail__all {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-home-results__grid,
.bh-season-rail__track {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.bh-home-results__empty {
    padding: var(--bh-space-6);
    border-radius: 12px;
    background: var(--bh-surface-2);
    color: var(--bh-navy);
}

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

.bh-home-results__empty ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.bh-home-results__handoff {
    display: grid;
    gap: var(--bh-space-3);
    justify-items: start;
    padding: var(--bh-space-8);
    border-radius: 12px;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-home-results__handoff .bh-home-results__title {
    color: var(--bh-white);
}

.bh-home-results__handoff p {
    max-width: 60ch;
    margin: 0;
}

/* The season's featured experiences */
.bh-season-rail {
    padding: var(--bh-space-16) 0 var(--bh-space-8);
    font-family: var(--bh-font);
}

/* Four or fewer share the row equally. More become a shelf that scrolls sideways, with
   the next card showing at the edge, so a sixth or seventh is never stranded on a row of
   its own (comment 11929485, section 9). Phones already scroll (below). */
@media (min-width: 768px) {
    .bh-season-rail__track {
        grid-template-columns: repeat(var(--bh-rail-n, 4), minmax(0, 1fr));
    }

    .bh-season-rail__track--shelf {
        grid-auto-columns: calc((100% - 3 * var(--bh-space-6)) / 3.5);
        grid-auto-flow: column;
        grid-template-columns: none;
        padding-bottom: var(--bh-space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }

    .bh-season-rail__track--shelf > li {
        scroll-snap-align: start;
    }
}

.bh-season-rail__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3) var(--bh-space-6);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--bh-space-6);
}

/* Cards: why it was suggested, as the brand's highlight. */
/* A suggestion, not a match (comment 11931267): first in the card's body, before its name. */
.bh-card__suggestion {
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-2) var(--bh-space-3);
    border-left: 4px solid var(--bh-navy);
    background: var(--bh-surface-2);
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-card__reason {
    align-self: flex-start;
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Explore (nothing to book now) and Choose a camp: not a purchase, so not the
 * primary treatment. */
.bh-card__cta--explore {
    border: 2px solid var(--bh-navy);
    background: var(--bh-white);
    color: var(--bh-navy);
}

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

.bh-card__cta--camp {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

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

/* A seasonal card is quieter than one on sale. */
.bh-card--is-seasonal .bh-card__image {
    filter: saturate(0.7);
}

@media (max-width: 991.98px) {
    .bh-quick__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bh-quick__field--exp {
        grid-column: 1 / -1;
    }

    .bh-quick__go {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .bh-home__hero {
        min-height: 0;
        padding: 112px 0 150px;
    }

    .bh-home__title {
        font-size: clamp(2.125rem, 9.4vw, 2.75rem);
    }

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

    .bh-home__console-wrap {
        margin-top: -118px;
    }

    .bh-journeys {
        gap: var(--bh-space-2);
    }

    .bh-journey {
        min-height: 104px;
        padding: var(--bh-space-3);
        border-radius: 10px;
    }

    .bh-journey__title {
        font-size: 0.875rem;
    }

    .bh-journey__line {
        display: none;
    }

    .bh-console {
        padding: var(--bh-space-5) var(--bh-space-4);
    }

    .bh-quick__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-plan__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-find__actions .bh-btn,
    .bh-plan__actions .bh-btn,
    .bh-quick__go {
        width: 100%;
    }

    .bh-home-results__inner {
        padding-top: var(--bh-space-8);
    }

    /* On a phone the suggestions and the season's rail scroll sideways, the next
     * card showing at the edge, rather than six cards stacked down the page. */
    .bh-home-results__grid,
    .bh-season-rail__track {
        grid-auto-columns: 84%;
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: var(--bh-space-4);
        margin: 0 calc(-1 * var(--bh-space-4));
        padding: 0 var(--bh-space-4) var(--bh-space-4);
        overflow-x: auto;
        scroll-padding: 0 var(--bh-space-4);
        scroll-snap-type: x mandatory;
    }

    .bh-home-results__grid > li,
    .bh-season-rail__track > li {
        scroll-snap-align: start;
    }

    .bh-season-rail {
        padding-top: var(--bh-space-12);
    }
}

/* Find Adventure's four parts (comment 11929485). The best matches lead at full size;
   other dates, plan ahead and organised groups follow smaller, with shorter photos, so
   what can be booked now is never confused with ideas for later. */
.bh-home-results__part + .bh-home-results__part {
    margin-top: var(--bh-space-12);
}

.bh-home-results__part-head {
    margin-bottom: var(--bh-space-4);
}

.bh-home-results__part-title {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

.bh-home-results__part-lede {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

/* Best matches: one or two lead as wide cards with the photo beside the details, so a
   short answer fills the row with purpose rather than one narrow card and empty space
   (comment 11929485, section 9). Three stay as columns. */
@media (min-width: 992px) {
    .bh-home-results__part--best .bh-home-results__grid--n1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-home-results__part--best .bh-home-results__grid--n2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-home-results__part--best .bh-home-results__grid--n1 > .bh-card,
    .bh-home-results__part--best .bh-home-results__grid--n2 > .bh-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bh-home-results__part--best .bh-home-results__grid--n1 > .bh-card {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .bh-home-results__part--best .bh-home-results__grid--n1 .bh-card__media .bh-card__image,
    .bh-home-results__part--best .bh-home-results__grid--n2 .bh-card__media .bh-card__image {
        height: 100%;
        min-height: 300px;
        aspect-ratio: auto;
    }

    .bh-home-results__part--best .bh-home-results__grid--n1 .bh-card__body {
        justify-content: center;
        padding: var(--bh-space-8);
    }

    .bh-home-results__part--best .bh-home-results__grid--n1 .bh-card__title {
        font-size: clamp(1.5rem, 2.2vw, 2rem);
    }
}

/* Other dates, plan ahead and organised groups: compact rows, a small photo beside the
   name, its state and its one action. The detail lives on the booking app or the page;
   here they read as further ideas, never as equals of the best matches. */
.bh-home-results__part:not(.bh-home-results__part--best) {
    padding-top: var(--bh-space-6);
    border-top: 1px solid var(--bh-line);
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-home-results__grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    align-items: start;
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-card__foot {
    margin-top: var(--bh-space-2);
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-card__media .bh-card__image {
    height: 100%;
    min-height: 150px;
    aspect-ratio: auto;
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-card__state {
    right: var(--bh-space-2);
    left: var(--bh-space-2);
    width: auto;
    white-space: normal;
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-card__body {
    gap: var(--bh-space-1);
    padding: var(--bh-space-4);
}

.bh-home-results__part:not(.bh-home-results__part--best) :is(.bh-card__descriptor, .bh-card__times, .bh-card__member, .bh-card__suits, .bh-card__alternatives, .bh-card__note) {
    display: none;
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-card__title {
    font-size: var(--bh-text-base);
}

.bh-home-results__part:not(.bh-home-results__part--best) .bh-card__cta {
    padding: var(--bh-space-1) var(--bh-space-4);
    font-size: var(--bh-text-2xs);
}

/* Phones: the best matches keep the swipeable row (one fills it); the further ideas
   stack as a short list rather than a second carousel. */
@media (max-width: 767.98px) {
    .bh-home-results__part--best .bh-home-results__grid--n1 {
        grid-auto-columns: 100%;
    }

    .bh-home-results__part:not(.bh-home-results__part--best) .bh-home-results__grid {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .bh-home-results__part:not(.bh-home-results__part--best) .bh-card {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .bh-home-results__part:not(.bh-home-results__part--best) .bh-card__media .bh-card__image {
        min-height: 128px;
    }
}

.bh-home-results__note {
    margin: 0 0 var(--bh-space-5);
    padding: var(--bh-space-3) var(--bh-space-4);
    border-left: 4px solid var(--bh-blue);
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

/* Quick Book on Book Now, above the finder: the homepage's form in a band. */
.bh-quickband {
    margin: 0 0 var(--bh-space-8);
    padding: var(--bh-space-6) var(--bh-space-8);
    border-radius: 12px;
    background: var(--bh-white);
    box-shadow: 0 10px 30px rgba(33, 39, 47, 0.1);
    font-family: var(--bh-font);
}

.bh-quickband__title {
    margin: 0;
    color: var(--bh-navy);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-weight: var(--bh-weight-black);
}

.bh-quickband__lede {
    margin: var(--bh-space-1) 0 var(--bh-space-5);
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

@media (max-width: 767.98px) {
    .bh-quickband {
        padding: var(--bh-space-5) var(--bh-space-4);
    }

    .bh-quickband .bh-quick__go {
        width: 100%;
    }
}

.bh-plan__fits {
    margin: var(--bh-space-3) 0 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    border-left: 4px solid var(--bh-yellow);
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

@media (min-width: 992px) {
    .bh-plan__fits {
        margin-left: 236px;
    }
}

.bh-plan__fits[hidden] {
    display: none;
}

/* ===========================================================================
   Camp Finder (template-parts/camp-finder.php, inc/camp-finder.php): a child's
   age, venue, month and type, then each camp with its real weeks. The filter
   bar is what the Camps Hub hero docks; chips and buttons are the homepage's.
   ========================================================================= */
.bh-campfind {
    padding-bottom: var(--bh-space-16);
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

/* Questions line up along the top; the chip groups wrap below their own
   question at narrower widths, and the button sits on the bar's foot. */
.bh-campfind__filters {
    display: grid;
    grid-template-columns: 170px auto 190px auto auto;
    gap: var(--bh-space-5);
    align-items: start;
    padding: var(--bh-space-6) var(--bh-space-8);
    border-radius: 12px;
    background: var(--bh-white);
    box-shadow: 0 18px 44px rgba(33, 39, 47, 0.16);
}

.bh-campfind__field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-campfind input[type="number"],
.bh-campfind select {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--bh-space-3);
    border: 2px solid var(--bh-field-edge);   /* 3:1 or more: WCAG 1.4.11 */
    border-radius: 6px;
    background: var(--bh-white);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-campfind input[type="number"]:focus-visible,
.bh-campfind select:focus-visible {
    border-color: var(--bh-navy);
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-campfind .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;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.05em;
    cursor: pointer;
}

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

.bh-campfind__go {
    align-self: end;
}

.bh-campfind__results {
    padding-top: var(--bh-space-8);
}

.bh-campfind__results[aria-busy="true"] {
    opacity: 0.55;
}

.bh-campfind__head {
    margin-bottom: var(--bh-space-5);
}

.bh-campfind__subhead {
    margin: var(--bh-space-12) 0 var(--bh-space-2);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
}

.bh-campfind__lede {
    max-width: 70ch;
    margin: 0 0 var(--bh-space-5);
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
}

.bh-campfind__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-campcard__book {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* One or two camps with dates fill the row: the camp beside its weeks, rather than one
   narrow card and empty space (comment 11929486, section 5). */
@media (min-width: 992px) {
    .bh-campfind__grid--n1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-campfind__grid--n2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-campfind__grid--n1 > .bh-campcard {
        flex-direction: row;
        gap: var(--bh-space-8);
    }

    .bh-campfind__grid--n1 .bh-campcard__about,
    .bh-campfind__grid--n1 .bh-campcard__book {
        flex: 1 1 0;
        min-width: 0;
    }
}

.bh-campcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--bh-space-6);
    border-top: 6px solid var(--bh-blue);
    border-radius: 12px;
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-md);
}

.bh-campcard--test {
    border-top-color: var(--bh-pink);
}

.bh-campcard__test {
    align-self: flex-start;
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-1) var(--bh-space-2);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

.bh-campcard__title {
    margin: var(--bh-space-1) 0 var(--bh-space-4);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: 1.15;
}

.bh-campcard__facts {
    display: grid;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-4);
    padding: 0;
    list-style: none;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-campcard__facts span {
    display: inline-block;
    min-width: 54px;
    color: var(--bh-muted);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    font-size: var(--bh-text-2xs);
    letter-spacing: 0.05em;
}

/* Highlights as the brand's highlight: navy block, yellow text. */
.bh-campcard__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-4);
}

.bh-campcard__highlights span {
    padding: var(--bh-space-1) var(--bh-space-2);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bh-campcard__summary {
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

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

.bh-campcard__weeks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-3);
    padding: 0;
    list-style: none;
}

.bh-campcard__weeks a,
.bh-campcard__week--off {
    display: flex;
    flex-direction: column;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-3);
    border: 2px solid var(--bh-line);
    border-radius: 6px;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    text-decoration: none;
}

.bh-campcard__weeks a span,
.bh-campcard__week--off span {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-campcard__weeks a:hover,
.bh-campcard__weeks a:focus {
    border-color: var(--bh-navy);
    background: var(--bh-yellow);
}

.bh-campcard__week--off {
    border-style: dashed;
}

.bh-campcard__more {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
}

.bh-campcard__foot {
    margin-top: auto;
    padding-top: var(--bh-space-3);
    border-top: 1px solid var(--bh-line);
}

.bh-campcard__price {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
}

.bh-campcard__price--tbc {
    color: var(--bh-muted);
    font-size: var(--bh-text-sm);
}

.bh-campcard__note {
    margin: var(--bh-space-2) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
}

.bh-campfind__later {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--bh-space-2) var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--bh-text-xs);
}

.bh-campfind__later span {
    display: block;
    color: var(--bh-muted);
}

.bh-campcard__page,
.bh-campfind__later a {
    color: var(--bh-blue-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-campcard__page {
    display: inline-block;
    margin-top: var(--bh-space-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

@media (max-width: 1199.98px) {
    .bh-campfind__filters {
        grid-template-columns: 1fr 1fr;
    }

    .bh-campfind__go {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .bh-campfind__filters {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--bh-space-5) var(--bh-space-4);
    }
}

/* The Camps hub around its Finder (comment 11929486): the types of camp as page cards,
   then what parents need before camp. */
.bh-camps-more {
    padding: var(--bh-space-8) 0 var(--bh-space-16);
    font-family: var(--bh-font);
}

.bh-camps-more__title {
    margin: 0 0 var(--bh-space-5);
    color: var(--bh-navy);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: var(--bh-weight-black);
    line-height: 1.15;
}

/* Five types share one row from laptop up, rather than four and one stranded below. On
   phones they swipe, like the homepage rail, rather than five full-height cards. */
.bh-page-cards {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (max-width: 767.98px) {
    .bh-page-cards {
        grid-auto-columns: 80%;
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: var(--bh-space-4);
        margin: 0 calc(-1 * var(--bh-space-4));
        padding: 0 var(--bh-space-4) var(--bh-space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .bh-page-cards > li {
        scroll-snap-align: start;
    }
}

.bh-camps-more .bh-page-cards + .bh-camps-more__title {
    margin-top: var(--bh-space-12);
}

.bh-camps-more__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-camps-more__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-5);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    text-decoration: none;
}

.bh-camps-more__links a:hover,
.bh-camps-more__links a:focus-visible {
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

/* ===========================================================================
 * Camp type pages: Day Camps and Specialist Camps (inc/camp-types.php)
 *
 * The Finder's card with a photograph on top, in a grid, then the Finder and the pages parents
 * need before camp (Eoghan, 11931576 point 2: "proper Ballyhass discovery pages rather than basic
 * text directories"). The body sits in the page's .entry-content, so every rule is scoped to
 * .bh-camptype to stay ahead of the legacy body rules there.
 * ======================================================================== */
.bh-camptype {
    padding: 0 0 var(--bh-space-16);
    color: var(--bh-navy);
    font-family: var(--bh-font);
}

.bh-camptype .bh-camptype__preview {
    margin: 0 0 var(--bh-space-8);
    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-camptype .bh-camptype__preview a {
    margin-left: var(--bh-space-2);
    color: inherit;
    font-weight: var(--bh-weight-bold);
}

.bh-camptype .bh-camptype__intro {
    max-width: 62ch;
    margin: 0 0 var(--bh-space-8);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-camptype :is(.bh-camptype__title, .bh-camptype__help-title, .bh-camptype__subtitle) {
    margin: 0 0 var(--bh-space-5);
    color: var(--bh-navy);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: var(--bh-weight-black);
    line-height: 1.15;
}

.bh-camptype .bh-camptype__subtitle {
    margin-top: var(--bh-space-12);
}

.bh-camptype ul {
    padding-left: 0;
    list-style: none;
}

.bh-camptype li::before {
    content: none;
}

.bh-camptype .bh-camptype__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bh-space-6);
    margin: 0 0 var(--bh-space-12);
}

.bh-camptype .bh-campcard--photo {
    overflow: hidden;
    padding-top: 0;
}

.bh-camptype .bh-campcard__photo {
    margin: 0 calc(-1 * var(--bh-space-6)) var(--bh-space-5);
    background: var(--bh-surface-2);
}

/* The ratio on the photograph itself: on its frame, a portrait photograph made the frame taller. */
.bh-camptype .bh-campcard__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.bh-camptype .bh-campcard__title {
    font-size: var(--bh-text-xl);
}

.bh-camptype .bh-campcard__title a {
    color: inherit;
    text-decoration: none;
}

.bh-camptype .bh-campcard__title a:hover,
.bh-camptype .bh-campcard__title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-camptype .bh-campcard__nodates {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

/* The brand's button: all caps, bold, rounded square. */
.bh-camptype :is(.bh-camptype__explore, .bh-camptype__finder) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-5);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-camptype .bh-camptype__explore {
    margin-top: var(--bh-space-3);
}

.bh-camptype .bh-camptype__explore:hover,
.bh-camptype .bh-camptype__explore:focus-visible {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

/* The Finder, on a navy band: yellow button on navy. */
.bh-camptype .bh-camptype__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bh-space-5);
    padding: var(--bh-space-8);
    border-radius: 12px;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-camptype .bh-camptype__help .bh-camptype__help-title {
    margin-bottom: var(--bh-space-2);
    color: var(--bh-on-navy);
}

.bh-camptype .bh-camptype__help p {
    max-width: 56ch;
    margin: 0;
    color: var(--bh-on-navy);
    font-weight: var(--bh-weight-medium);
}

.bh-camptype .bh-camptype__finder {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-camptype .bh-camptype__finder:hover,
.bh-camptype .bh-camptype__finder:focus-visible {
    border-color: var(--bh-white);
    background: var(--bh-white);
    color: var(--bh-on-white);
}

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

@media (max-width: 575.98px) {
    .bh-camptype .bh-camptype__help {
        padding: var(--bh-space-6) var(--bh-space-4);
    }

    .bh-camptype .bh-camptype__finder {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * Camp type pages, 3 November 2026 refinements (Eoghan, 11931965 point 8)
 *
 * - Less space under the hero: the article's 3rem top padding and the preview note's margin were
 *   stacked under the torn edge (about 130px of white at 1366px).
 * - Camps with weeks on sale are full cards with their weeks; camps whose dates are not released
 *   are compact row cards in two columns, so six unreleased camps are three short rows, not a
 *   long run of identical tall cards.
 * - Every card reads Venue, Ages, Format (and Dates when not on sale) in the same order and place.
 * ------------------------------------------------------------------------- */
/* Ahead of main.min.css "body:not(.home) .banner" (70px) and refinements.css (40px). */
body.bh-camptype-page:not(.home) .banner.banner--interior {
    margin-bottom: var(--bh-space-2);
}

.bh-camptype-page .site-main > .container article.py-5 {
    padding-top: var(--bh-space-6) !important;
}

.bh-camptype .bh-camptype__preview {
    margin-bottom: var(--bh-space-5);
}

.bh-camptype .bh-camptype__lead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bh-space-3) var(--bh-space-8);
    margin: 0 0 var(--bh-space-6);
}

.bh-camptype .bh-camptype__lead .bh-camptype__intro {
    margin: 0;
}

.bh-camptype .bh-camptype__lead-link {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-camptype .bh-camptype__group {
    margin: 0 0 var(--bh-space-12);
}

.bh-camptype .bh-camptype__group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-3);
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-navy);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

/* The brand's highlight: navy block, yellow text, square corners. */
.bh-camptype .bh-camptype__badge {
    padding: var(--bh-space-1) var(--bh-space-2);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-camptype .bh-camptype__lede {
    max-width: 70ch;
    margin: 0 0 var(--bh-space-5);
    color: var(--bh-muted);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

.bh-camptype .bh-campcard--onsale {
    border-top-color: var(--bh-yellow);
}

.bh-camptype .bh-campcard__about {
    display: flex;
    flex-direction: column;
}

.bh-camptype .bh-campcard__title {
    margin: 0 0 var(--bh-space-2);
}

.bh-camptype .bh-campcard__summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Venue, Ages, Format, Dates: one row each, label then value, the same on every card. */
.bh-camptype .bh-campcard__glance {
    display: grid;
    gap: var(--bh-space-1);
    margin: 0 0 var(--bh-space-4);
    font-size: var(--bh-text-xs);
}

.bh-camptype .bh-campcard__glance > div {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: var(--bh-space-2);
}

.bh-camptype .bh-campcard__glance dt {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-transform: uppercase;
}

.bh-camptype .bh-campcard__glance dd {
    margin: 0;
    color: var(--bh-navy);
    font-weight: var(--bh-weight-semibold);
}

.bh-camptype .bh-campcard__held {
    align-self: flex-start;
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-1) var(--bh-space-2);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
}

/* The compact card: photograph beside the words, two to a row on a wide screen. */
.bh-camptype .bh-camptype__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-5);
    margin: 0;
}

.bh-camptype .bh-campcard--row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    padding: 0;
    overflow: hidden;
    border-top: 0;
    border-left: 6px solid var(--bh-navy);
}

.bh-camptype .bh-campcard--row.bh-campcard--coachford {
    border-left-color: var(--bh-blue);
}

.bh-camptype .bh-campcard--row .bh-campcard__photo {
    margin: 0;
    min-height: 100%;
    background: var(--bh-surface-2);
}

.bh-camptype .bh-campcard--row .bh-campcard__photo img {
    height: 100%;
    min-height: 220px;
    aspect-ratio: auto;
}

.bh-camptype .bh-campcard--row .bh-campcard__about {
    padding: var(--bh-space-5);
}

.bh-camptype .bh-campcard--row .bh-campcard__title {
    font-size: var(--bh-text-lg);
}

.bh-camptype .bh-camptype__explore--quiet {
    align-self: flex-start;
    margin-top: auto;
    border-color: var(--bh-navy);
    background: transparent;
    color: var(--bh-navy);
}

.bh-camptype .bh-camptype__more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-8);
}

.bh-camptype .bh-camptype__more .bh-camptype__subtitle {
    margin-top: var(--bh-space-12);
    font-size: var(--bh-text-xl);
}

@media (max-width: 991.98px) {
    .bh-camptype .bh-camptype__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .bh-camptype-page .site-main > .container article.py-5 {
        padding-top: var(--bh-space-4) !important;
    }

    .bh-camptype .bh-campcard--row {
        grid-template-columns: minmax(0, 1fr);
        border-left: 0;
        border-top: 6px solid var(--bh-navy);
    }

    .bh-camptype .bh-campcard--row.bh-campcard--coachford {
        border-top-color: var(--bh-blue);
    }

    .bh-camptype .bh-campcard--row .bh-campcard__photo img {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .bh-camptype .bh-campcard--row .bh-campcard__about {
        padding: var(--bh-space-4);
    }

    .bh-camptype :is(.bh-camptype__explore, .bh-camptype__explore--quiet) {
        align-self: stretch;
        width: 100%;
    }

    .bh-camptype .bh-camptype__more {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ---------------------------------------------------------------------------
 * The camp type line on a camp page: "Camps / Day Camps" (inc/camp-types.php)
 * ------------------------------------------------------------------------- */
.entry-content .bh-campcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-2);
    max-width: 1280px;
    margin: 0 auto var(--bh-space-4);
    color: var(--bh-muted);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.entry-content .bh-campcrumbs a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The camp's type on a Finder card, after its venue. */
.bh-campcard__type {
    margin: 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ===========================================================================
 * Body booking card (inc/activity-commerce.php, ballyhass_activity_panel_html)
 *
 * Replaces the booking card a scraped activity body carried in its hero, so
 * the page has one commercial area (comment 11929487). It sits inside that
 * body's own hero card, dark glass on Zipline and light on others, so it
 * brings its own white surface rather than inheriting a colour, and repeats
 * the strip's type so the two read as one thing. Selectors are doubled to
 * outrank the recovered legacy rules for the hero card's headings and links.
 * ======================================================================== */

.bh-commerce.bh-commerce {
    display: grid;
    gap: var(--bh-space-3);
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    text-align: left;
}

.bh-commerce .bh-commerce__title {
    margin: 0;
    color: var(--bh-navy);
    font: var(--bh-weight-bold) var(--bh-text-md) / 1.2 var(--bh-font);
    letter-spacing: 0;
    text-transform: none;
}

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

.bh-commerce .bh-commerce__venues li {
    margin: 0;
    padding: 0;
    color: var(--bh-navy);
}

.bh-commerce .bh-commerce__venues li::before {
    content: none;
}

.bh-commerce .bh-commerce__venue {
    display: block;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-commerce .bh-commerce__headline {
    display: block;
    color: var(--bh-navy);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.2;
}

.bh-commerce .bh-commerce__note {
    display: block;
    margin-top: 2px;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-commerce .bh-commerce__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-3) var(--bh-space-5);
    margin-top: var(--bh-space-1);
}

/* The strip's primary: yellow, navy text, all caps, rounded square. */
.bh-commerce a.bh-commerce__cta {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--bh-space-6);
    border: 0;
    border-radius: 6px;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);              /* 13.34:1 */
    font: var(--bh-weight-bold) 0.9375rem / 1 var(--bh-font);
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-commerce a.bh-commerce__cta:hover {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-commerce a.bh-commerce__link {
    color: var(--bh-blue-text);              /* 5.01:1 */
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-commerce a.bh-commerce__cta:focus-visible,
.bh-commerce a.bh-commerce__link:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* The legacy hero card it replaced the contents of steps back, so the page
   shows one card rather than a card inside a card. */
[class*="hero-card"]:has(> .bh-commerce:only-child) {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ===========================================================================
 * Ballyhass Padel: three ways to play (template-parts/padel-routes.php)
 *
 * Sits inside the Padel page's own wrapper, so it uses that page's palette
 * (--padel-*), with the site tokens as fallback. White, with off-white cards,
 * because the section before it (the ecosystem) is off-white and the two ran
 * together.
 * ======================================================================== */

.bh-padel-routes {
    padding: 104px 0;
    background: var(--bh-white);
    color: var(--padel-ink, var(--bh-navy));
}

.bh-padel-routes .bh-padel-routes__title {
    margin: 0 0 var(--bh-space-4);
    color: inherit;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
}

.bh-padel-routes__lede {
    max-width: 44rem;
    margin: 0 0 var(--bh-space-8);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-padel-routes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--bh-space-6);
}

.bh-padel-routes__card {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-4);
    padding: var(--bh-space-8) var(--bh-space-6);
    border-radius: var(--padel-radius-lg, 24px);
    background: var(--padel-off, #F3F1EC);
}

.bh-padel-routes__card h3 {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-lg);
    line-height: 1.2;
}

.bh-padel-routes__card p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* The action sits at the foot of every card, whatever the copy's length. */
.bh-padel-routes__card > .bh-padel__button,
.bh-padel-routes__packages {
    margin-top: auto;
}

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

.bh-padel-routes__packages .bh-padel__button {
    width: 100%;
}

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

/* The finished courts, flush with the top of each card (comment 11929496). */
.bh-padel-routes__photo {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin: calc(-1 * var(--bh-space-8)) calc(-1 * var(--bh-space-6)) 0;
    border-radius: var(--padel-radius-lg, 24px) var(--padel-radius-lg, 24px) 0 0;
}

.bh-padel-routes__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Where each route is booked: Playtomic, or Ballyhass's own team (comment 11929533).
   The card is sand, where the usual text blue is 4.44:1 (axe, 31 October 2026). */
.bh-padel-routes__card .bh-padel-routes__where {
    color: var(--bh-blue-text-deep);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Packages with Padel, under the three routes: one in preparation is named, never sold. */
.bh-padel-routes__packages-band {
    display: grid;
    gap: var(--bh-space-3);
    margin-top: var(--bh-space-6);
    padding: var(--bh-space-6);
    border-left: 4px solid var(--padel-purple, var(--bh-navy));
    border-radius: var(--bh-radius-md);
    background: var(--padel-off, #F3F1EC);
}

.bh-padel-routes__packages-band h3 {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-md);
}

.bh-padel-routes__ask {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-padel-routes__ask a,
.bh-padel-routes__groups a {
    color: inherit;
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-padel-routes__card .bh-padel-routes__groups {
    font-size: var(--bh-text-sm);
}

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

@media (max-width: 575.98px) {
    .bh-padel-routes {
        padding: 72px 0;
    }
}

/* ---- Padel events on the Groups hub (groups-hub.php) ----------------------------
 * One feature under "Start with your group", navy with the event photograph. */

.bh-groups__feature {
    display: grid;
    overflow: hidden;
    margin-top: var(--bh-space-8);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-groups__feature-photo {
    position: relative;
    aspect-ratio: 16 / 8;
}

.bh-groups__feature-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .bh-groups__feature {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .bh-groups__feature-photo {
        aspect-ratio: auto;
        min-height: 240px;
    }
}

.bh-groups__feature-body {
    display: grid;
    gap: var(--bh-space-3);
    align-content: center;
    justify-items: start;
    padding: var(--bh-space-6) var(--bh-space-5);
}

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

.bh-groups__feature-kicker {
    margin: 0;
    color: var(--bh-yellow);              /* on navy, 13.34:1 */
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-groups__feature h3 {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-xl);
    line-height: 1.15;
}

.bh-groups__feature p:not(.bh-groups__feature-kicker) {
    max-width: 52ch;
    margin: 0;
    font-weight: var(--bh-weight-medium);
}

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

/* ---- Padel events (comment 11929570) -------------------------------------------
 * Private courts as an event Ballyhass organises, with what can go around them as
 * tiles to tick. Navy, so the offer sold by Ballyhass's own team stands apart from
 * the two Playtomic routes above it. A ticked tile takes a yellow ring. */

.bh-padel-events {
    padding: 104px 0;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-padel-events .bh-padel__eyebrow {
    color: var(--bh-yellow);              /* on navy, 13.34:1 */
}

.bh-padel-events .bh-padel-routes__title {
    margin: 0 0 var(--bh-space-4);
    color: inherit;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
}

.bh-padel-events__form {
    display: grid;
    gap: var(--bh-space-6);
}

.bh-padel-events__parts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--bh-space-4);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-padel-events__legend {
    margin: 0 0 var(--bh-space-4);
    color: inherit;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-padel-events__part {
    position: relative;
    display: flex;
}

/* The box itself stays visible: a tick in the corner of each tile. */
.bh-padel-events__part input {
    position: absolute;
    top: var(--bh-space-3);
    right: var(--bh-space-3);
    z-index: 2;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--bh-navy);
    cursor: pointer;
}

.bh-padel-events__part label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0 0 var(--bh-space-5);
    overflow: hidden;
    border-radius: var(--padel-radius-lg, 16px);
    background: var(--bh-white);
    color: var(--bh-on-white);
    cursor: pointer;
}

.bh-padel-events__part input:checked + label {
    box-shadow: 0 0 0 4px var(--bh-yellow);
}

.bh-padel-events__part input:focus-visible + label {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: 6px;
    box-shadow: var(--bh-focus-shadow);
}

.bh-padel-events__photo {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bh-navy);
}

.bh-padel-events__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No photograph (food): the brand panel the experience card uses. */
.bh-padel-events__photo--panel {
    background:
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(0, 182, 217, 0.18) 22px 24px),
        linear-gradient(135deg, var(--bh-navy) 0%, #2c3a47 100%);
}

.bh-padel-events__name {
    padding: var(--bh-space-2) var(--bh-space-5) 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: 1.2;
}

.bh-padel-events__line {
    padding: 0 var(--bh-space-5);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-padel-events__send {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-4) var(--bh-space-6);
    align-items: center;
}

.bh-padel-events__send p {
    max-width: 40rem;
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* On a phone each tile is a row: the photograph small on the left. */
@media (max-width: 575.98px) {
    .bh-padel-events {
        padding: 72px 0;
    }

    .bh-padel-events__part label {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        gap: var(--bh-space-1) var(--bh-space-3);
        padding: var(--bh-space-3) 48px var(--bh-space-3) var(--bh-space-3);
    }

    .bh-padel-events__photo {
        grid-row: 1 / span 2;
        aspect-ratio: 1;
        border-radius: var(--bh-radius-md);
    }

    .bh-padel-events__name,
    .bh-padel-events__line {
        padding: 0;
    }

    .bh-padel-events__send .bh-btn {
        width: 100%;
    }
}

/* ===========================================================================
 * Mobile menu (Mmenu, template-parts/nav-mobile.php, app.min.js)
 *
 * Eoghan, comment 11929489: "the neon-yellow full-screen menu feels much
 * heavier than the new page designs, and some category treatments dominate
 * the screen." A white menu with navy type, the brush behind each panel
 * title gone, and yellow kept for the one thing that matters most at every
 * level: the Book Now button beside close. Rows are 52px for touch, the page
 * being viewed carries a navy bar, and hover is a light tint rather than
 * white on Ballyhass Blue (2.42:1). Scoped to the menu's id to outrank the
 * compiled Mmenu theme in main.min.css.
 * ======================================================================== */

#navbar-mob-canvas.mm-menu {
    --mm-color-background: var(--bh-white);
    --mm-color-border: var(--bh-line);
    --mm-color-icon: var(--bh-navy);
    --mm-color-text: var(--bh-navy);
    --mm-color-text-dimmed: var(--bh-muted);
    --mm-color-background-highlight: #F2F5F7;
    --mm-color-background-emphasis: #F2F5F7;
    --mm-color-focusring: var(--bh-blue-text);
    --mm-listitem-size: 52px;
    --mm-navbar-size: 56px;
    font-family: var(--bh-font);
}

/* Panel titles: navy text, no brush. */
#navbar-mob-canvas .mm-panel .mm-navbar::before {
    display: none;
}

#navbar-mob-canvas .mm-panel .mm-navbar {
    border-bottom: 1px solid var(--bh-line);
}

/* The title's span was white, for the brush behind it. */
#navbar-mob-canvas .mm-navbar__title,
#navbar-mob-canvas .mm-navbar__title span {
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

#navbar-mob-canvas .mm-listitem__text {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-medium);
}

#navbar-mob-canvas .mm-listitem:hover {
    background: #F2F5F7;
    color: var(--bh-navy);
}

#navbar-mob-canvas .mm-panel .mm-listitem .mm-btn--next::after,
#navbar-mob-canvas .mm-panel .mm-navbar .mm-btn--prev::before {
    border-color: var(--bh-navy);
}

/* The page being viewed. */
#navbar-mob-canvas .mm-listitem--selected > .mm-listitem__text {
    background: transparent;
    box-shadow: inset 4px 0 0 var(--bh-navy);
    font-weight: var(--bh-weight-bold);
}

/* A section's one-link group, given its own row: Padel. */
#navbar-mob-canvas .nav-mobile__feature {
    background: #F7FFD1;
}

#navbar-mob-canvas .nav-mobile__feature > .mm-listitem__text {
    font-weight: var(--bh-weight-bold);
}

#navbar-mob-canvas .nav-mobile__note {
    display: block;
    margin-top: 2px;
    color: var(--bh-muted);
    font-size: 0.8125rem;
    font-weight: var(--bh-weight-medium);
}

/* Top bar: Book Now, then close. */
#navbar-mob-canvas .mm-navbars--top .mm-navbar {
    align-items: center;
    padding: var(--bh-space-2) 60px var(--bh-space-2) var(--bh-space-4);
    border-bottom: 1px solid var(--bh-line);
}

#navbar-mob-canvas .mmcta--book {
    flex: 1 1 auto;
}

#navbar-mob-canvas .mmcta--book a {
    display: block;
    text-decoration: none;
}

#navbar-mob-canvas .mmcta--book span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--bh-space-4);
    border-radius: 6px;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);              /* 13.34:1 */
    font-size: 0.9375rem;
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#navbar-mob-canvas .mmcta--book a:hover span,
#navbar-mob-canvas .mmcta--book a:focus-visible span {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

#navbar-mob-canvas .close-mobile-menu {
    top: 50%;
    width: 44px;
    height: 44px;
    margin-right: var(--bh-space-2);
    transform: translateY(-50%);
}

/* Foot: My Account as a plain row with its icon, then the pass line and the two brands. Bold
   and upper case like the menu's other actions, so it reads as the way into the account
   (comment 11931699 point 8) rather than as small print. */
#navbar-mob-canvas .mmcta--login span {
    display: flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: var(--bh-target-comfortable);
    padding: 14px var(--bh-space-4);
    background: transparent;
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;
}

#navbar-mob-canvas .mmcta__icon {
    flex: none;
}

#navbar-mob-canvas .mmcta--login a:hover span,
#navbar-mob-canvas .mmcta--login a:focus-visible span {
    background: #F2F5F7;
    color: var(--bh-navy);
}

#navbar-mob-canvas .mm-navbars--bottom {
    border-top: 1px solid var(--bh-line);
}

#navbar-mob-canvas .mm-navbar .mmlogo--pass {
    padding: var(--bh-space-3) var(--bh-space-4);
    filter: none;
}

/* A desktop menu link's description, under it: Padel's "Courts, socials and courses". */
.nav-desktop__note {
    display: block;
    margin-top: 2px;
    color: var(--bh-muted);
    font-size: 0.8125rem;
    font-weight: var(--bh-weight-medium);
    white-space: normal;
}

/* ===========================================================================
 * Find Adventure: three date choices, and one question at a time on a phone
 * (template-parts/home-discovery.php, home-discovery.js; comment 11929497).
 * ======================================================================== */

/* What a date choice opens, set under it. */
.bh-when2__more {
    margin-top: var(--bh-space-3);
    padding-left: var(--bh-space-3);
    border-left: 2px solid var(--bh-line);
}

.bh-when2__more[hidden] {
    display: none;
}

@media (min-width: 992px) {
    .bh-ask > .bh-when2__more {
        margin-left: 236px;
    }
}

.bh-when2__label {
    margin-bottom: var(--bh-space-1);
    font-weight: var(--bh-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
}

.bh-chip--small label {
    border-width: 1px;
    font-weight: var(--bh-weight-medium);
}

/* A phone shows one question at a time; an answered one is this line. */
.bh-step-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--bh-space-2);
    width: 100%;
    min-height: 48px;
    margin: 0 0 var(--bh-space-3);
    padding: 10px var(--bh-space-3);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bh-step-summary[hidden] {
    display: none;
}

.bh-step-summary__q {
    flex-basis: 100%;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-step-summary strong {
    flex: 1 1 auto;
    font-size: var(--bh-text-sm);
}

.bh-step-summary__change {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

/* ===========================================================================
 * Site footer (template-parts/site-footer.php)
 *
 * Eoghan chose concept A, dark and cinematic (comment 11929497), "useful
 * rather than oversized", with concept B's Ballyhass colour and social energy
 * used selectively. So the photograph is a short band, not a screen; the two
 * destinations are compact rows; Ballyhass Blue carries the destination
 * details (#00B6D9 on #0E1116 is 7.8:1); and B's #thisisballyhass photo strip
 * sits small beside the sign-off. Phone first.
 * ======================================================================== */

.bh-foot {
    --bh-foot-ground: #0E1116;
    --bh-foot-raised: #171B21;
    --bh-foot-muted: #C9CDD4;
    --bh-foot-rule: rgba(255, 255, 255, 0.16);
    background: var(--bh-foot-ground);
    color: var(--bh-white);
    font-family: var(--bh-font);
}

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

.bh-foot a:focus-visible,
.bh-foot button:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-foot__campaign {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-4);
    justify-content: center;
    margin: 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-weight: var(--bh-weight-semibold);
    text-align: center;
}

.bh-foot__campaign a {
    color: inherit;
    font-weight: var(--bh-weight-bold);
}

/* ---- The final call to action: a short photographic band ----------------- */

.bh-foot__cta {
    position: relative;
    overflow: hidden;
    padding: 48px 0 40px;
}

.bh-foot__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.bh-foot__cta::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 17, 22, 0.9) 0%, rgba(14, 17, 22, 0.62) 50%, rgba(14, 17, 22, 0.2) 100%);
    content: "";
}

.bh-foot__cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--bh-space-6);
    align-items: center;
}

.bh-foot__title {
    margin: 0 0 var(--bh-space-3);
    color: inherit;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
}

.bh-foot__lede {
    max-width: 34rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

.bh-foot__btn {
    display: inline-flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--bh-space-6);
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-foot__btn:hover {
    text-decoration: none;
}

.bh-foot__btn--primary {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-foot__btn--secondary {
    border-color: var(--bh-white);
    color: var(--bh-white);
}

.bh-foot__btn--primary:hover,
.bh-foot__btn--secondary:hover {
    border-color: var(--bh-white);
    background: var(--bh-white);
    color: var(--bh-navy);
}

.bh-foot__quick {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

@media (min-width: 576px) {
    .bh-foot__btn {
        flex: 0 0 auto;
    }
}

@media (min-width: 992px) {
    .bh-foot__cta {
        padding: 64px 0;
    }

    .bh-foot__cta-inner {
        grid-template-columns: 1fr auto;
        gap: var(--bh-space-8);
    }

    .bh-foot__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bh-foot__quick {
        justify-content: center;
    }
}

/* ---- Two destinations, as compact rows ------------------------------------ */

.bh-foot__places {
    padding: var(--bh-space-6) 0 0;
}

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

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

    .bh-foot__places-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--bh-space-6);
    }
}

.bh-foot__place {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--bh-space-4);
    align-items: start;
    padding: var(--bh-space-4);
    border-top: 3px solid var(--bh-blue);
    border-radius: 0 0 12px 12px;
    background: var(--bh-foot-raised);
}

.bh-foot__place-photo {
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 8px;
}

.bh-foot__place-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .bh-foot__place {
        grid-template-columns: 128px minmax(0, 1fr);
        gap: var(--bh-space-6);
        padding: var(--bh-space-6);
    }
}

.bh-foot__place-body {
    display: grid;
    gap: var(--bh-space-1);
}

.bh-foot__place-name {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.15;
}

.bh-foot__place-line,
.bh-foot__address {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-foot__place-line {
    color: var(--bh-foot-muted);
}

.bh-foot__eircode {
    display: inline-block;
    margin-left: var(--bh-space-1);
    color: var(--bh-blue);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.bh-foot__place-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-6);
    margin: 0;
}

.bh-foot__place-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ---- Links, sign-off, community, legal ------------------------------------ */

.bh-foot__base {
    padding: var(--bh-space-6) 0;
}

@media (min-width: 768px) {
    .bh-foot__base {
        padding-top: 40px;
    }
}

.bh-foot__nav {
    display: grid;
}

.bh-foot__group-title {
    margin: 0;
}

.bh-foot__group-title button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--bh-foot-rule);
    background: none;
    color: inherit;
    font: var(--bh-weight-bold) var(--bh-text-xs) / 1.2 var(--bh-font);
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-foot__chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

[aria-expanded="true"] > .bh-foot__chev {
    transform: rotate(-135deg);
}

.bh-foot__links ul {
    margin: 0;
    padding: var(--bh-space-2) 0 var(--bh-space-4);
    list-style: none;
}

.bh-foot__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-foot-muted);
    font-weight: var(--bh-weight-medium);
    text-decoration: none;
}

.bh-foot__links a:hover {
    color: var(--bh-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (min-width: 768px) {
    .bh-foot__nav {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--bh-space-8);
    }

    .bh-foot__group-title button {
        min-height: 0;
        padding-bottom: var(--bh-space-3);
        border-bottom-color: currentColor;
        cursor: default;
    }

    .bh-foot__chev {
        display: none;
    }

    .bh-foot__links a {
        min-height: 34px;
    }
}

.bh-foot__signoff {
    display: grid;
    gap: var(--bh-space-6);
    margin-top: var(--bh-space-8);
    padding-top: var(--bh-space-8);
    border-top: 1px solid var(--bh-foot-rule);
}

@media (min-width: 992px) {
    .bh-foot__signoff {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

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

.bh-foot__logo {
    display: block;
    flex: 0 0 auto;
    width: 72px;
    height: auto;
}

.bh-foot__strap {
    margin: 0;
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.bh-foot__reach {
    display: grid;
    gap: var(--bh-space-2);
    justify-items: start;
}

@media (min-width: 992px) {
    .bh-foot__reach {
        justify-items: end;
        text-align: right;
    }
}

.bh-foot__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-6);
    margin: 0;
}

.bh-foot__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

.bh-foot__groups-email {
    margin: 0;
    color: var(--bh-foot-muted);
    font-size: var(--bh-text-sm);
}

.bh-foot__groups-email a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-white);
    font-weight: var(--bh-weight-semibold);
}

/* The Bookings team's hours (inc/visitor-info.php, comment 11931965 point 1), as muted as the
   groups line above it, with the activities sentence on its own line. */
.bh-foot__hours {
    max-width: 42rem;
    margin: 0;
    color: var(--bh-foot-muted);
    font-size: var(--bh-text-xs);
    line-height: var(--bh-leading-body);
}

.bh-foot__hours span {
    display: block;
}

/* Camp Bus & Travel: the line for day visitors under the page's own introduction
   (apply-visitor-info-1103b.php), a paragraph apart from it. */
.bh-camp-transport-intro + .bh-camp-transport-intro {
    margin-top: var(--bh-space-4);
}

.bh-foot__social {
    display: flex;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-foot__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: inherit;
}

.bh-foot__community {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3) var(--bh-space-4);
    align-items: center;
    margin-top: var(--bh-space-6);
    color: inherit;
    text-decoration: none;
}

.bh-foot__hashtag {
    width: 150px;
    height: auto;
}

.bh-foot__strip {
    display: flex;
    gap: var(--bh-space-2);
}

.bh-foot__strip img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
}

.bh-foot__strip-label {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-underline-offset: 4px;
}

.bh-foot__community:hover .bh-foot__strip-label {
    color: var(--bh-blue);
}

@media (min-width: 768px) {
    .bh-foot__strip img {
        width: 72px;
        height: 72px;
    }
}

.bh-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-6);
    justify-content: space-between;
    margin-top: var(--bh-space-6);
    padding-top: var(--bh-space-4);
    border-top: 1px solid var(--bh-foot-rule);
    color: var(--bh-foot-muted);
    font-size: var(--bh-text-xs);
}

.bh-foot__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-foot__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
}

.bh-foot__legal a:hover {
    color: var(--bh-white);
}

/* "Cookie settings" opens a panel rather than going anywhere, so it is a button drawn as the links beside it. */
.bh-foot__legal .bh-foot__cookies {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: inherit;
    cursor: pointer;
}

.bh-foot__legal .bh-foot__cookies[hidden] {
    display: none;
}

.bh-foot__legal .bh-foot__cookies:hover {
    color: var(--bh-white);
}

.bh-foot__legal p {
    margin: 0;
    align-self: center;
}

/* ===========================================================================
 * Find Adventure results, the approved treatment (home-results.php)
 *
 * Eoghan, comment 11929485, section 9: an intentional presentation for one,
 * two, three or six results; stronger photography; more prominence for the
 * best recommendation; bookable options clearly apart from future-season
 * inspiration; group-only and partner experiences handled sensibly; phones
 * designed, not shrunk. One card (experience-card.php), arranged by part:
 *
 *  - the first bookable part leads: its first card large, the rest filling
 *    the row so none is stranded;
 *  - plan ahead: photograph tiles with the name on them, read as ideas;
 *  - organised groups: a navy band of short rows, apart from what is booked.
 * ======================================================================== */

.bh-home-results__inner--led .bh-home-results__part:not(.bh-home-results__part--best) {
    padding-top: 0;
    border-top: 0;
}

.bh-home-results__inner--led .bh-home-results__part + .bh-home-results__part {
    margin-top: 56px;
}

/* Bookable parts: cards that share the row and fill it. */
.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later) .bh-home-results__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-6);
    margin: 0;
    padding: 0;
    overflow: visible;
}

.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later) .bh-home-results__grid > .bh-card {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    box-shadow: var(--bh-shadow-md);
}

.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later) .bh-home-results__grid > .bh-card .bh-card__image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
}

.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other) .bh-home-results__grid > .bh-card :is(.bh-card__times, .bh-card__member) {
    display: block;
}

.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later) .bh-home-results__grid > .bh-card .bh-card__body {
    gap: var(--bh-space-2);
    padding: var(--bh-space-5);
}

.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later) .bh-home-results__grid > .bh-card .bh-card__title {
    font-size: var(--bh-text-lg);
}

.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later) .bh-home-results__grid > .bh-card .bh-card__cta {
    padding: var(--bh-space-3) var(--bh-space-4);
    font-size: var(--bh-text-xs);
}

.bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later) .bh-card__state {
    right: auto;
    width: auto;
}

/* The lead: the first card of the first bookable part, photograph beside it. */
@media (min-width: 768px) {
    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:first-child {
        flex-basis: 100%;
        flex-direction: row;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:first-child .bh-card__media {
        flex: 0 0 58%;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:first-child .bh-card__image {
        height: 100%;
        min-height: 380px;
        aspect-ratio: auto;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:first-child .bh-card__body {
        flex: 1 1 auto;
        justify-content: center;
        padding: var(--bh-space-8) 40px;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:first-child .bh-card__title {
        font-size: clamp(1.75rem, 2.6vw, 2.5rem);
        line-height: 1.05;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:first-child .bh-card__descriptor {
        display: block;
        font-size: var(--bh-text-sm);
    }
}

/* Plan ahead: photograph tiles with the name on them, the whole tile a link. */
.bh-home-results__inner--led .bh-home-results__part--ahead .bh-home-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bh-space-4);
    margin: 0;
    padding: 0;
    overflow: visible;
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card {
    position: relative;
    display: block;
    min-height: 280px;
    border-radius: 12px;
    box-shadow: none;
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__media {
    position: absolute;
    inset: 0;
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__image {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(33, 39, 47, 0) 30%, rgba(33, 39, 47, 0.9) 100%);
    content: "";
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__state {
    top: var(--bh-space-3);
    right: auto;
    bottom: auto;
    left: var(--bh-space-3);
    z-index: 1;
    width: auto;
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    gap: 2px;
    padding: var(--bh-space-4);
    background: none;
}

.bh-home-results__inner--led .bh-home-results__part--ahead :is(.bh-card__title, .bh-card__venue) {
    color: var(--bh-white);
}

.bh-home-results__inner--led .bh-home-results__part--ahead :is(.bh-card__reason, .bh-card__link, .bh-card__price, .bh-card__when) {
    display: none;
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__foot {
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__cta {
    justify-content: flex-start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bh-yellow);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The whole tile opens it. */
.bh-home-results__inner--led .bh-home-results__part--ahead .bh-card__cta::after {
    position: absolute;
    inset: 0;
    content: "";
}

/* Organised groups: a navy band of short rows, apart from what can be booked. */
.bh-home-results__inner--led .bh-home-results__part--groups {
    padding: var(--bh-space-8);
    border-radius: 16px;
    background: var(--bh-navy);
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-home-results__part-title {
    color: var(--bh-white);
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-home-results__part-lede {
    color: rgba(255, 255, 255, 0.82);
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-home-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--bh-space-3);
    margin: 0;
    padding: 0;
    overflow: visible;
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-card__image {
    height: 100%;
    min-height: 96px;
    aspect-ratio: auto;
}

.bh-home-results__inner--led .bh-home-results__part--groups :is(.bh-card__state, .bh-card__reason, .bh-card__link) {
    display: none;
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-card__body {
    gap: 2px;
    padding: var(--bh-space-3) var(--bh-space-4);
    background: none;
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-card__title {
    color: var(--bh-white);
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-card__venue {
    color: rgba(255, 255, 255, 0.78);
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-card__foot {
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-home-results__inner--led .bh-home-results__part--groups .bh-card__cta {
    justify-content: flex-start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bh-yellow);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Phones: the lead fills the screen; the rest of its part are short rows; other
   bookable parts and plan ahead scroll sideways; groups stay a band of rows. */
@media (max-width: 767.98px) {
    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:first-child {
        flex-basis: 100%;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:not(:first-child) {
        display: grid;
        flex-basis: 100%;
        grid-template-columns: 112px minmax(0, 1fr);
        box-shadow: var(--bh-shadow-sm);
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:not(:first-child) .bh-card__image {
        height: 100%;
        min-height: 128px;
        aspect-ratio: auto;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:not(:first-child) :is(.bh-card__descriptor, .bh-card__times, .bh-card__member, .bh-card__reason) {
        display: none;
    }

    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:not(:first-child) .bh-card__state {
        right: var(--bh-space-2);
        left: var(--bh-space-2);
        white-space: normal;
    }

    .bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later):not(.bh-home-results__part--lead) .bh-home-results__grid,
    .bh-home-results__inner--led .bh-home-results__part--ahead .bh-home-results__grid {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--bh-space-3);
        margin: 0 calc(-1 * var(--bh-space-4));
        padding: 0 var(--bh-space-4) var(--bh-space-3);
        overflow-x: auto;
        scroll-padding: 0 var(--bh-space-4);
        scroll-snap-type: x mandatory;
    }

    .bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later):not(.bh-home-results__part--lead) .bh-home-results__grid > .bh-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    .bh-home-results__inner--led .bh-home-results__part--ahead .bh-card {
        flex: 0 0 70%;
        min-height: 240px;
        scroll-snap-align: start;
    }

    .bh-home-results__inner--led .bh-home-results__part--groups {
        margin-right: calc(-1 * var(--bh-space-4));
        margin-left: calc(-1 * var(--bh-space-4));
        padding: var(--bh-space-6) var(--bh-space-4);
        border-radius: 0;
    }

    .bh-home-results__inner--led .bh-home-results__part--groups .bh-home-results__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A card alone on its row (a part of one, or one after the lead) sits on its side at a
   sensible size, rather than stretching into a page-wide photograph. Parts hold three
   at most (BALLYHASS_HOME_PARTS), so these are the only two ways to be alone. */
@media (min-width: 768px) {
    .bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later):not(.bh-home-results__part--lead) .bh-home-results__grid > .bh-card:only-child,
    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:nth-child(2):last-child {
        flex-direction: row;
        max-width: 880px;
    }

    .bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later):not(.bh-home-results__part--lead) .bh-home-results__grid > .bh-card:only-child .bh-card__media,
    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:nth-child(2):last-child .bh-card__media {
        flex: 0 0 42%;
    }

    .bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later):not(.bh-home-results__part--lead) .bh-home-results__grid > .bh-card:only-child .bh-card__image,
    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:nth-child(2):last-child .bh-card__image {
        height: 100%;
        min-height: 240px;
        aspect-ratio: auto;
    }

    .bh-home-results__inner--led :is(.bh-home-results__part--best, .bh-home-results__part--other, .bh-home-results__part--later):not(.bh-home-results__part--lead) .bh-home-results__grid > .bh-card:only-child .bh-card__body,
    .bh-home-results__inner--led .bh-home-results__part--lead .bh-home-results__grid > .bh-card:nth-child(2):last-child .bh-card__body {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* A camp on sale whose ages are not confirmed: said beside its weeks (comment 11929489). */
.bh-campcard__caution {
    margin: var(--bh-space-3) 0 0;
    padding: var(--bh-space-2) var(--bh-space-3);
    border-left: 4px solid var(--bh-pink);
    background: #FFF1F6;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-campcard__caution a {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
}

/* Plan a Group: a preferred date is not a hold (comment 11929489), said under it. */
.bh-plan__hint,
.group-enquiry__hint {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

/* The phone and callback routes, full-size targets on a phone. */
@media (max-width: 767.98px) {
    .bh-plan__call a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-weight: var(--bh-weight-bold);
    }
}

/* ===========================================================================
 * Trust and social proof (template-parts/trust.php, single-bh_evidence.php)
 *
 * Eoghan, comment 11929500: a restrained logo strip, a strong testimonial
 * panel, a compact review and credential element and a featured customer
 * story, that look part of the design system and work on a phone. The lead
 * quote is the brand's highlight treatment at panel scale: navy, square
 * corners, the attribution in Activities Yellow (13.3:1). Supporting quotes
 * and stories are quiet white cards so the lead stays the one strong thing.
 * ======================================================================== */

.bh-trust {
    display: grid;
    gap: var(--bh-space-8);
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

.bh-trust__preview {
    margin: 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px dashed var(--bh-pink);
    background: var(--bh-white);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-trust__pending {
    display: inline-flex;
    align-self: flex-start;
    width: fit-content;
    padding: 2px var(--bh-space-2);
    border: 1px dashed currentColor;
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-trust__head {
    max-width: 44rem;
}

.bh-trust__kicker {
    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-trust__title {
    margin: 0 0 var(--bh-space-3);
    color: inherit;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: var(--bh-leading-tight);
    text-wrap: balance;
}

.bh-trust__lede {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---- Quotes ---------------------------------------------------------------- */

.bh-trust__quotes {
    display: grid;
    gap: var(--bh-space-6);
}

@media (min-width: 992px) {
    .bh-trust__quotes {
        grid-template-columns: 1.35fr 1fr;
        align-items: stretch;
    }

    .bh-trust__quotes--single {
        grid-template-columns: minmax(0, 52rem);
    }
}

.bh-trust__lead {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-6);
    margin: 0;
    padding: var(--bh-space-8);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-white);
}

.bh-trust__lead-quote {
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-trust__lead-quote p {
    margin: 0;
    color: inherit;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.3;
    text-wrap: pretty;
}

.bh-trust__lead-quote p::before {
    content: "\201C";
}

.bh-trust__lead-quote p::after {
    content: "\201D";
}

.bh-trust__by {
    display: grid;
    gap: 2px;
    margin-top: auto;
    font-size: var(--bh-text-xs);
}

.bh-trust__by strong {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-trust__lead .bh-trust__by strong {
    color: var(--bh-yellow);
}

.bh-trust__by small {
    margin-top: var(--bh-space-2);
    opacity: 0.8;
    font-size: var(--bh-text-2xs);
}

.bh-trust__returning {
    width: fit-content;
    margin-top: var(--bh-space-2);
    padding: 2px var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.bh-trust__card {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-4);
    margin: 0;
    padding: var(--bh-space-6);
    border-left: 4px solid var(--bh-blue);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-trust__card blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-trust__card blockquote p {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-trust__card blockquote p::before {
    content: "\201C";
}

.bh-trust__card blockquote p::after {
    content: "\201D";
}

/* ---- Customer story --------------------------------------------------------- */

.bh-trust__stories {
    display: grid;
    gap: var(--bh-space-6);
}

.bh-trust__story {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

@media (min-width: 768px) {
    .bh-trust__story--photo {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

.bh-trust__story:not(.bh-trust__story--photo) .bh-trust__story-body {
    max-width: 44rem;
}

.bh-trust__story-photo {
    min-height: 220px;
}

.bh-trust__story-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-trust__story-body {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
    padding: var(--bh-space-8) var(--bh-space-6);
}

.bh-trust__story-body p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-trust__story-kicker {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-trust__story-title {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-xl);
    line-height: 1.15;
}

.bh-trust__facts {
    display: grid;
    gap: var(--bh-space-2);
    margin: var(--bh-space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-trust__facts li {
    padding-left: var(--bh-space-4);
    border-left: 3px solid var(--bh-yellow);
}

.bh-trust__story-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: auto;
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ---- Logo strip ------------------------------------------------------------- */

.bh-trust__logos-title {
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-trust__logos ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-4) var(--bh-space-8);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-trust__logo {
    position: relative;
    display: flex;
    align-items: center;
}

.bh-trust__logo img {
    display: block;
    width: auto;
    max-width: 140px;
    height: 48px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
}

.bh-trust__logo--name {
    flex-direction: column;
    align-items: flex-start;
    min-height: 48px;
    padding: var(--bh-space-2) var(--bh-space-3);
    border: 1px solid var(--bh-line);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-trust__logo--name small {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

/* On a phone the strip is two columns, not one name per row. */
@media (max-width: 575.98px) {
    .bh-trust__logos ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bh-space-3);
    }

    .bh-trust__logo img {
        max-width: 100%;
    }
}

.bh-trust__pending--dot {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid var(--bh-pink);
    border-radius: var(--bh-radius-full);
    background: var(--bh-white);
}

/* ---- Credentials and review links -------------------------------------------- */

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

.bh-trust__credential,
.bh-trust__review {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-3);
    align-items: center;
    min-height: 56px;
    padding: var(--bh-space-2) var(--bh-space-4);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    font-size: var(--bh-text-xs);
}

/* The mark is an <img>, or inline <svg> once the legacy script has swapped an SVG file
 * in (class "replaced-svg"), which this rule once missed: the B Corp mark then drew at
 * 98 by 164. The library's B Corp mark is white, so it sits on a navy tile. */
.bh-trust__credential :is(img, svg) {
    flex: 0 0 auto;
    width: 40px;
    height: 52px;
    padding: 6px;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
    object-fit: contain;
}

.bh-trust__credential > span {
    display: grid;
}

.bh-trust__credential small,
.bh-trust__review small {
    color: var(--bh-muted);
}

.bh-trust__credential a,
.bh-trust__review a {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-underline-offset: 3px;
}

/* ---- A customer story's own page --------------------------------------------- */

.bh-story {
    padding: var(--bh-space-12) 0 var(--bh-space-16);
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

.bh-story .bh-trust__preview {
    margin-bottom: var(--bh-space-6);
}

.bh-story__grid {
    display: grid;
    gap: var(--bh-space-8);
}

@media (min-width: 992px) {
    .bh-story__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--bh-space-16);
    }
}

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

.bh-story__kicker {
    margin: 0;
    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-story__lede {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.35;
}

.bh-story__body p {
    font-weight: var(--bh-weight-medium);
    line-height: 1.65;
}

.bh-story__aside {
    display: grid;
    align-self: start;
    align-content: start;
    gap: var(--bh-space-4);
    padding: var(--bh-space-6);
    background: #F3F5F7;
}

.bh-story__aside-title {
    margin: 0;
    font-size: var(--bh-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-story__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--bh-space-6);
    border-radius: 6px;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.03em;
    text-decoration: none;
}

.bh-story__cta:hover,
.bh-story__cta:focus-visible {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    text-decoration: none;
}

/* ---- A quote placed in a page's own design (template-parts/trust-quote.php) ---
 * Eoghan, 4 November 2026 (comment 11932041): a short extract "incorporated
 * naturally into the existing design", not another testimonial section. So
 * no panel and no box: a rule in the page's accent, the words in navy at
 * reading size, and who said them as the brand's subtitle (bold capitals).
 * An optional square photograph sits beside the words. Measured:
 *     navy words on white 15.04:1, on the Bunkhouse tint 12.99:1;
 *     Bunkhouse purple attribution on white 6.32:1, on its tint 5.46:1.
 * Yellow is only ever the rule, never text (1.13:1 on white).
 * --------------------------------------------------------------------------- */

.bh-trust-quotes {
    display: grid;
    gap: var(--bh-space-6);
    font-family: var(--bh-font);
}

.bh-trust-quote {
    --bh-tq-accent: var(--bh-navy);
    --bh-tq-by: var(--bh-navy);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "flag" "words" "by";
    column-gap: var(--bh-space-4);
    margin: 0;
    padding-left: var(--bh-space-4);
    border-left: 4px solid var(--bh-tq-accent);
    color: var(--bh-navy);
}

.bh-trust-quotes--bunkhouse .bh-trust-quote {
    --bh-tq-accent: var(--bh-bunkhouse-purple);
    --bh-tq-by: var(--bh-bunkhouse-purple);
}

.bh-trust-quotes--yellow .bh-trust-quote {
    --bh-tq-accent: var(--bh-yellow);
}

.bh-trust-quote--photo {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "photo flag" "photo words" "photo by";
    align-items: start;
}

.bh-trust-quote__photo {
    grid-area: photo;
    display: block;
    width: 96px;
    height: 96px;
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

.bh-trust-quote__pending {
    grid-area: flag;
    margin-bottom: var(--bh-space-2);
}

.bh-trust-quote__words {
    grid-area: words;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--bh-text-md);
    font-style: normal;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-trust-quote__words p {
    margin: 0;
}

.bh-trust-quote__words p + p {
    margin-top: var(--bh-space-3);
}

.bh-trust-quote__words p::before {
    content: "\201C";
}

.bh-trust-quote__words p::after {
    content: "\201D";
}

.bh-trust-quote__by {
    grid-area: by;
    margin-top: var(--bh-space-2);
    color: var(--bh-tq-by);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    line-height: var(--bh-leading-body);
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .bh-trust-quote--photo {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .bh-trust-quote__photo {
        width: 72px;
        height: 72px;
    }
}

/* ===========================================================================
 * Groups hub, second design (groups-hub.php, inc/groups-hub.php)
 *
 * Eoghan, comment 11929498. The homepage's language at group scale: a
 * photographic first screen of a real group with the promise and two routes,
 * audience cards with photographs, example days as timelines, the
 * catalogue's group experiences, the one planner on a navy band, evidence,
 * and the enquiry with its essentials first. Phone first.
 * ======================================================================== */

.bh-groups {
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

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

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

.bh-groups__hero-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 35%;
}

.bh-groups__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(33, 39, 47, 0.88) 0%, rgba(33, 39, 47, 0.55) 45%, rgba(33, 39, 47, 0.1) 80%),
        linear-gradient(0deg, rgba(33, 39, 47, 0.75) 0%, rgba(33, 39, 47, 0) 55%);
}

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

.bh-groups__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-groups__title {
    max-width: 14ch;
    margin: 0;
    color: var(--bh-white);
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: 1;
    text-wrap: balance;
}

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

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

.bh-groups .bh-groups__btn-ghost {
    border: 2px solid var(--bh-white);
    background: transparent;
    color: var(--bh-white);
}

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

.bh-groups__call {
    margin: 0;
    font-weight: var(--bh-weight-medium);
}

.bh-groups__call a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

.bh-groups__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-6);
    margin: var(--bh-space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-groups__facts li {
    padding-left: var(--bh-space-3);
    border-left: 3px solid var(--bh-blue);
}

@media (max-width: 575.98px) {
    .bh-groups__hero {
        padding-top: 120px;
    }

    .bh-groups__actions .bh-btn {
        flex: 1 1 100%;
    }
}

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

.bh-groups__section {
    padding: var(--bh-space-16) 0;
}

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

.bh-groups__head {
    max-width: 46rem;
    margin-bottom: var(--bh-space-8);
}

.bh-groups__head p {
    margin: var(--bh-space-3) 0 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-groups__h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    text-wrap: balance;
}

/* Groups hub, cohesion pass (Eoghan, comment 11931846, 3 November 2026): "very structured and
   planning-focused". The planning runs as three numbered steps, each a navy square with a yellow
   figure (the brand's highlight, square corners) beside its name in capitals. Deep blue text holds
   5.74:1 on white and 5.2:1 on the grey band; on the navy planner band the step is yellow. */
.bh-groups__step {
    display: flex;
    align-items: center;
    gap: var(--bh-space-3);
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-blue-text-deep);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bh-groups__step span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-sm);
    letter-spacing: 0;
}

.bh-groups__plan .bh-groups__step {
    color: var(--bh-yellow);
}

.bh-groups__plan .bh-groups__step span {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

/* ---- Who is coming ---------------------------------------------------------- */

.bh-groups__routes {
    display: grid;
    gap: var(--bh-space-6);
}

@media (min-width: 576px) {
    .bh-groups__routes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .bh-groups__routes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bh-groups__route {
    display: flex;
    flex-direction: column;
}

.bh-groups__route-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
}

.bh-groups__route-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-groups__route-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--bh-space-2);
    padding: var(--bh-space-5) 0 0;
}

.bh-groups__route-body h3 {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-lg);
    line-height: 1.15;
}

.bh-groups__route-body p {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-groups__route-plan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: auto;
    border: 2px solid var(--bh-navy);
    border-radius: 6px;
    background: transparent;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-groups__route-plan:hover,
.bh-groups__route-plan:focus {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    text-decoration: none;
}

/* A second planner link on a card follows the first, not the foot of the card. */
.bh-groups__route-plan + .bh-groups__route-plan {
    margin-top: 0;
}

/* A card with no "More about" link keeps its place, so the plan buttons line up across the row. */
.bh-groups__route-body:not(:has(.bh-groups__route-more))::after {
    min-height: 44px;
    content: "";
}

.bh-groups__route-more,
.bh-groups__day-plan {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.bh-groups__elsewhere {
    display: grid;
    gap: 0 var(--bh-space-8);
    margin: var(--bh-space-8) 0 0;
    padding: var(--bh-space-4) 0 0;
    border-top: 1px solid var(--bh-line);
    list-style: none;
}

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

/* A block, not a flex row: flex would drop the space between the bold name and the words after it. */
.bh-groups__elsewhere a {
    display: block;
    padding: var(--bh-space-3) 0;
    color: var(--bh-navy);
    font-weight: var(--bh-weight-medium);
    text-decoration: none;
}

.bh-groups__elsewhere a:hover strong {
    text-decoration-thickness: 3px;
}

.bh-groups__elsewhere strong {
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-underline-offset: 4px;
}

/* ---- What a day can look like ------------------------------------------------ */

/* The four sample days as one plan: a single sheet with a navy top rule, its columns ruled apart
   (the grid's 1px gap shows the line colour through), so the lengths read across like a timetable. */
.bh-groups__days {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--bh-line);
    border-top: 4px solid var(--bh-navy);
    border-radius: var(--bh-radius-md);
    background: var(--bh-line);
}

@media (min-width: 768px) {
    .bh-groups__days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .bh-groups__days {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bh-groups__day {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
    padding: var(--bh-space-6);
    background: var(--bh-white);
}

.bh-groups__day-length {
    margin: 0;
    color: var(--bh-blue-text-deep);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-groups__day h3 {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-lg);
}

.bh-groups__steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-groups__steps li {
    position: relative;
    padding: 0 0 var(--bh-space-3) var(--bh-space-6);
    border-left: 2px solid var(--bh-line);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.45;
}

.bh-groups__steps li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.bh-groups__steps li::before {
    position: absolute;
    top: 3px;
    left: -7px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-full);
    background: var(--bh-yellow);
    content: "";
}

.bh-groups__steps span {
    display: block;
    font-weight: var(--bh-weight-bold);
}

.bh-groups__day-note {
    margin: auto 0 0;
    padding-top: var(--bh-space-3);
    border-top: 1px solid var(--bh-line);
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.45;
}

/* ---- Group experiences: compact tiles, after the enquiry (comment 11929526) ------ */

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

@media (min-width: 576px) {
    .bh-groups__exp {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .bh-groups__exp {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bh-groups__exp-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--bh-space-3);
    padding: var(--bh-space-4) 0;
    border-top: 1px solid var(--bh-line);
}

.bh-groups__exp-photo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
}

.bh-groups__exp-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-groups__exp-body {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-1);
    min-width: 0;
}

.bh-groups__exp-name {
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
}

.bh-groups__exp-venues {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-groups__exp-when {
    color: var(--bh-blue-text-deep);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
}

.bh-groups__exp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-3);
}

.bh-groups__exp-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ---- The planner, on a navy band ---------------------------------------------- */

.bh-groups__plan {
    padding: var(--bh-space-16) 0;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-groups__plan .bh-groups__h2 {
    margin-bottom: var(--bh-space-6);
    color: var(--bh-white);
}

.bh-groups__plan-card {
    max-width: 60rem;
    padding: var(--bh-space-8) var(--bh-space-6);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
}

@media (min-width: 768px) {
    .bh-groups__plan-card {
        padding: var(--bh-space-12);
    }
}

/* ---- Evidence and people ------------------------------------------------------- */

.bh-groups__reassure {
    display: grid;
    gap: var(--bh-space-6);
    margin-top: var(--bh-space-8);
}

@media (min-width: 992px) {
    .bh-groups__reassure {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }

    /* The reassurance lines hidden in the editor: the team panel keeps a readable width. */
    .bh-groups__reassure--team-only {
        grid-template-columns: minmax(0, 40rem);
    }
}

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

@media (min-width: 576px) {
    .bh-groups__reassure-list {
        grid-template-columns: 1fr 1fr;
    }
}

.bh-groups__reassure-list li {
    padding-left: var(--bh-space-4);
    border-left: 3px solid var(--bh-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-groups__reassure-list strong {
    display: block;
    font-size: var(--bh-text-sm);
}

.bh-groups__people {
    padding: var(--bh-space-6);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-groups__people h3 {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-yellow);
    font-size: var(--bh-text-lg);
}

.bh-groups__people p {
    margin: 0 0 var(--bh-space-3);
    font-weight: var(--bh-weight-medium);
}

.bh-groups__people-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-6);
}

.bh-groups__people-links a,
.bh-groups__brochures a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

/* ---- What Ballyhass add in the editor (inc/groups-hub-content.php) ----------------
 * Each shows only once it is filled, so the hub looks as approved until then. */

/* Brochures, in the bookings team panel. */
.bh-groups__people-sub {
    margin: var(--bh-space-4) 0 0;
    color: var(--bh-yellow);              /* on navy, 13.34:1 */
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-groups__brochures {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A seasonal promotion: yellow, so it reads apart from the navy Padel feature. */
.bh-groups__feature--promo {
    background: var(--bh-yellow);
    color: var(--bh-navy);                /* navy on yellow, 13.34:1 */
}

.bh-groups__feature--text {
    grid-template-columns: minmax(0, 1fr);
}

/* Photographs under "Groups who have been": sideways on a phone, four across from 992px. */
.bh-groups__photos {
    display: grid;
    grid-auto-columns: 80%;
    grid-auto-flow: column;
    gap: var(--bh-space-4);
    margin: 0 0 var(--bh-space-8);
    padding: 0 0 var(--bh-space-2);
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
}

.bh-groups__photos li {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    scroll-snap-align: start;
}

.bh-groups__photos img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 576px) {
    .bh-groups__photos {
        grid-auto-columns: 45%;
    }
}

@media (min-width: 992px) {
    .bh-groups__photos {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
    }
}

/* Questions organisers ask: the shared FAQ list, at a reading width, beside its heading
 * from 992px, as the current Groups page sets its questions. */
.bh-groups__faqs {
    max-width: 52rem;
}

/* As one ruled list on the grey band rather than a stack of white boxes (comment 11931846). */
.bh-groups__faqs .bh-faqs {
    gap: 0;
    border-top: 1px solid var(--bh-line);
}

.bh-groups__faqs .bh-faq {
    border-bottom: 1px solid var(--bh-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.bh-groups__faqs .bh-faq__question {
    padding: var(--bh-space-5) 0;
}

.bh-groups__faqs .bh-faq__answer {
    padding: 0 0 var(--bh-space-6);
    font-size: var(--bh-text-sm);
}

.bh-groups__faqs .bh-faq__marker::before,
.bh-groups__faqs .bh-faq__marker::after {
    background: var(--bh-navy);
}

@media (min-width: 992px) {
    .bh-groups__faq-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--bh-space-12);
        align-items: start;
    }

    .bh-groups__faq-layout .bh-groups__head {
        margin-bottom: 0;
    }
}

/* ===========================================================================
 * Homepage answer, the more selective arrangement (/?preview=home-v3;
 * template-parts/home-results-v3.php, season-editorial.php)
 *
 * Eoghan, comment 11929509: "less visible complexity". Comment 11929571: the
 * first version read as a staircase down the left. Now one lead recommendation
 * laid out by how many picks there are, one quieter band for other dates, next
 * season and what is not on sale, one group route with a photograph, and an
 * editorial season section of photographs that says when each happens.
 * ======================================================================== */

.bh-find__preview {
    margin: 0 0 var(--bh-space-4);
    padding: var(--bh-space-2) var(--bh-space-3);
    border-left: 4px solid var(--bh-navy);
    background: #F2F5F7;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-find__preview a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-semibold);
}

/* ---- The three journeys (preview) ---------------------------------------------
 * Comment 11929570: "a genuinely premium presentation of the three discovery
 * journeys". Each door is a tab joined to the panel it opens: the chosen one
 * stands taller and meets the panel on a yellow edge. On a phone the three are
 * one segmented control on navy, the chosen one yellow. */

.bh-home--v3 .bh-home__console-wrap {
    margin-top: -186px;
}

.bh-home--v3 .bh-journeys {
    align-items: end;
    gap: var(--bh-space-2);
}

.bh-home--v3 .bh-journey {
    min-height: 152px;
    padding: var(--bh-space-6);
    border-radius: 14px 14px 0 0;
    box-shadow: none;
}

.bh-home--v3 .bh-journey[aria-selected="true"] {
    min-height: 186px;
}

/* The chosen door's yellow edge, at its foot where it meets the panel. */
.bh-home--v3 .bh-journey::after {
    top: auto;
    bottom: 0;
    height: 5px;
}

.bh-home--v3 .bh-journey__title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.bh-home--v3 .bh-journey__line {
    max-width: 30ch;
    font-size: var(--bh-text-xs);
}

.bh-home--v3 .bh-console {
    margin-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 24px 48px rgba(33, 39, 47, 0.18);
}

/* Find Adventure's ideas belong to Find Adventure: under Quick Book or Plan a Group they
 * read as an answer to a question nobody asked there (comment 11929763). */
.bh-home--v3:not([data-journey="find"]) .bh-home-results {
    display: none;
}

/* Quick Book on the first screen (comment 11929763: "immediately discoverable for people
 * who already know what they want"): the question, what is on sale online, the button.
 * Not repeated while the Quick Book journey itself is open. */
.bh-home__quickbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-2) var(--bh-space-3);
    width: fit-content;
    max-width: 100%;
    margin-top: var(--bh-space-6);
    padding: var(--bh-space-2) var(--bh-space-2) var(--bh-space-2) var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: rgba(33, 39, 47, 0.78);   /* navy, so white text holds on any photograph */
}

.bh-home__quickbar-label {
    color: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-home__quickbar select {
    min-width: 16rem;
    min-height: 48px;
    padding: 0 var(--bh-space-8) 0 var(--bh-space-4);
    border: 0;
    border-radius: var(--bh-radius-sm);
    appearance: none;
    background: var(--bh-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2321272F' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--bh-navy);
    font-family: inherit;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-home__quickbar select:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: 2px;
}

.bh-home__quickbar .bh-btn {
    min-height: 48px;
}

.bh-home[data-journey="quick"] .bh-home__quickbar {
    display: none;
}

@media (max-width: 767.98px) {
    .bh-home__quickbar {
        width: 100%;
        margin-top: var(--bh-space-5);
        padding: var(--bh-space-3);
    }

    .bh-home__quickbar-label {
        flex-basis: 100%;
    }

    .bh-home__quickbar select {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 22px 0 var(--bh-space-3);
        background-position: right 8px center;
        font-size: var(--bh-text-xs);
        font-weight: var(--bh-weight-medium);
    }

    .bh-home__quickbar .bh-btn {
        padding: 0 var(--bh-space-3);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bh-home--v3 .bh-journey {
        transition: min-height 0.2s ease;
    }
}

@media (hover: hover) {
    .bh-home--v3 .bh-journey[aria-selected="false"]:hover {
        min-height: 164px;
    }
}

@media (max-width: 767.98px) {
    .bh-home--v3 .bh-home__console-wrap {
        margin-top: -92px;
    }

    .bh-home--v3 .bh-journeys {
        align-items: stretch;
        gap: 0;
        padding: var(--bh-space-1);
        border-radius: 12px 12px 0 0;
        background: var(--bh-navy);
    }

    .bh-home--v3 .bh-journey,
    .bh-home--v3 .bh-journey[aria-selected="true"],
    .bh-home--v3 .bh-journey[aria-selected="false"]:hover {
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 6px var(--bh-space-2);
        border-radius: 9px;
        background: transparent;
        text-align: center;
    }

    .bh-home--v3 .bh-journey__photo,
    .bh-home--v3 .bh-journey::before,
    .bh-home--v3 .bh-journey::after {
        display: none;
    }

    .bh-home--v3 .bh-journey[aria-selected="true"] {
        background: var(--bh-yellow);
        color: var(--bh-on-yellow);       /* navy on yellow, 13.34:1 */
    }

    .bh-home--v3 .bh-journey[aria-selected="true"] .bh-journey__title {
        color: var(--bh-on-yellow);
    }

    .bh-home--v3 .bh-journey__title {
        font-size: 0.8125rem;
        line-height: 1.15;
    }

    .bh-home--v3 .bh-console {
        border-radius: 0 0 12px 12px;
    }
}

/* ---- Ideas for you: the arrangement follows how many there are ---------------
 * Comment 11929571: "one clear lead recommendation [...] other strong matches
 * alongside it in a consistent layout [...] an adaptive layout for one, two or
 * several results [...] a mobile treatment designed for a phone". One pick is a
 * wide card; two stand side by side; three or four are the lead and a column of
 * matching cards the same height. On a phone the others scroll sideways. */

.bh-ideas {
    display: grid;
    gap: var(--bh-space-8);
}

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

.bh-ideas .bh-home-results__note {
    margin: 0;
}

.bh-ideas__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-6);
    align-items: flex-end;
    justify-content: space-between;
}

.bh-ideas__all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.bh-ideas__all:hover,
.bh-ideas__all:focus {
    color: var(--bh-blue-text);
}

.bh-ideas__list,
.bh-ideas__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-ideas__picks {
    display: grid;
    gap: var(--bh-space-6);
}

.bh-ideas__lead,
.bh-ideas__more {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The lists fill their column, so cards side by side end level. */
.bh-ideas__picks .bh-ideas__list {
    display: grid;
    flex: 1;
    gap: var(--bh-space-4);
}

/* The brand's highlighted text: a navy block, yellow text, square corners. It
 * sits on the lead card like a tab. Yellow on navy is 13.34:1. */
.bh-ideas__flag,
.bh-ideas__label {
    margin: 0;
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    line-height: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-ideas__flag {
    align-self: flex-start;
    padding: 6px var(--bh-space-3);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

.bh-ideas__label {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: var(--bh-space-2);
    color: var(--bh-navy);
}

.bh-ideas__lead .bh-card {
    border-top-left-radius: 0;
    box-shadow: 0 14px 36px rgba(33, 39, 47, 0.16);
}

.bh-ideas .bh-card--featured .bh-card__media .bh-card__image {
    aspect-ratio: 16 / 10;
}

.bh-ideas .bh-card--featured .bh-card__body {
    gap: var(--bh-space-3);
    padding: var(--bh-space-6);
}

.bh-ideas .bh-card--featured .bh-card__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.bh-ideas .bh-card--featured .bh-card__when {
    background: rgba(228, 255, 26, 0.35);
}

.bh-ideas .bh-card--featured .bh-card__next {
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

/* The other matches are compact: their name, availability, next time, suitability,
 * price and action, without the short line, the list of times or the pass price. */
.bh-ideas__more .bh-card__descriptor,
.bh-ideas__more .bh-card__times,
.bh-ideas__more .bh-card__member {
    display: none;
}

.bh-ideas__more .bh-card__body {
    gap: var(--bh-space-2);
    padding: var(--bh-space-4);
}

.bh-ideas__more .bh-card__title {
    font-size: var(--bh-text-md);
}

.bh-ideas__more .bh-card__when {
    padding: var(--bh-space-2) var(--bh-space-3);
}

.bh-ideas__more .bh-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-3);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--bh-space-3);
}

.bh-ideas__more .bh-card__price-amount {
    font-size: var(--bh-text-lg);
}

.bh-ideas__more .bh-card__foot .bh-card__actions {
    margin-top: 0;
}

.bh-ideas__more .bh-card__foot .bh-card__cta {
    min-height: 44px;
    padding: 0 var(--bh-space-4);
    font-size: var(--bh-text-2xs);
}

.bh-ideas__more .bh-card__foot .bh-card__note {
    flex-basis: 100%;
}

@media (min-width: 768px) {
    /* One pick: photograph beside the facts, across the width. */
    .bh-ideas__picks--1 .bh-card--featured {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .bh-ideas__picks--1 .bh-card--featured .bh-card__media {
        min-height: 400px;
    }

    .bh-ideas__picks--1 .bh-card--featured .bh-card__media .bh-card__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .bh-ideas__picks--1 .bh-card--featured .bh-card__body {
        justify-content: center;
        padding: var(--bh-space-8);
    }

    /* Two picks: side by side, the same height. */
    .bh-ideas__picks--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-ideas__picks--2 .bh-ideas__more .bh-card__descriptor {
        display: -webkit-box;
    }

    .bh-ideas__picks--2 .bh-ideas__more .bh-card__media .bh-card__image {
        aspect-ratio: 16 / 10;
    }

    .bh-ideas__picks--2 .bh-ideas__more .bh-card__body {
        padding: var(--bh-space-6);
    }

    /* Beside the lead, the same footer as the lead: a full-width action. */
    .bh-ideas__picks--2 .bh-ideas__more .bh-card__foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        justify-content: stretch;
    }

    .bh-ideas__picks--2 .bh-ideas__more .bh-card__title {
        font-size: clamp(1.25rem, 2vw, 1.625rem);
    }
}

/* Three or four on a tablet: the lead across the width, the others in a row below. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .bh-ideas__picks--3 .bh-card--featured,
    .bh-ideas__picks--4 .bh-card--featured {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bh-ideas__picks--3 .bh-card--featured .bh-card__media,
    .bh-ideas__picks--4 .bh-card--featured .bh-card__media {
        min-height: 360px;
    }

    .bh-ideas__picks--3 .bh-card--featured .bh-card__media .bh-card__image,
    .bh-ideas__picks--4 .bh-card--featured .bh-card__media .bh-card__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .bh-ideas__picks--3 .bh-ideas__list--more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-ideas__picks--4 .bh-ideas__list--more {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Three or four on a desktop: the lead on the left, the others filling the column
 * beside it, each with its photograph on the left. The lead's photograph takes up
 * any height the column needs, so the two sides always end level. */
@media (min-width: 992px) {
    .bh-ideas__picks--3,
    .bh-ideas__picks--4 {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .bh-ideas__picks--3 .bh-card--featured .bh-card__media,
    .bh-ideas__picks--4 .bh-card--featured .bh-card__media {
        flex: 1 1 auto;
        min-height: 300px;
    }

    .bh-ideas__picks--3 .bh-card--featured .bh-card__media .bh-card__image,
    .bh-ideas__picks--4 .bh-card--featured .bh-card__media .bh-card__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .bh-ideas__picks--3 .bh-card--featured .bh-card__body,
    .bh-ideas__picks--4 .bh-card--featured .bh-card__body {
        flex: 0 0 auto;
    }

    .bh-ideas__picks--3 .bh-ideas__list--more,
    .bh-ideas__picks--4 .bh-ideas__list--more {
        grid-auto-rows: 1fr;
    }

    .bh-ideas__picks--3 .bh-ideas__more .bh-card,
    .bh-ideas__picks--4 .bh-ideas__more .bh-card {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .bh-ideas__picks--3 .bh-ideas__more .bh-card__media,
    .bh-ideas__picks--4 .bh-ideas__more .bh-card__media {
        min-height: 160px;
    }

    .bh-ideas__picks--3 .bh-ideas__more .bh-card__media .bh-card__image,
    .bh-ideas__picks--4 .bh-ideas__more .bh-card__media .bh-card__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .bh-ideas__picks--3 .bh-ideas__more .bh-card__state,
    .bh-ideas__picks--4 .bh-ideas__more .bh-card__state {
        left: var(--bh-space-2);
        max-width: calc(100% - var(--bh-space-4));
    }
}

/* A phone: the lead as a full card, the others sideways with the next one showing. */
@media (max-width: 767.98px) {
    .bh-ideas__picks--3 .bh-ideas__list--more,
    .bh-ideas__picks--4 .bh-ideas__list--more {
        grid-auto-columns: 82%;
        grid-auto-flow: column;
        margin-right: -15px;              /* to the screen's edge, past the container's gutter */
        padding: 0 15px var(--bh-space-3) 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .bh-ideas__picks--3 .bh-ideas__list--more > li,
    .bh-ideas__picks--4 .bh-ideas__list--more > li {
        scroll-snap-align: start;
    }

    .bh-ideas__more .bh-card__media .bh-card__image {
        aspect-ratio: 16 / 9;
    }

    .bh-ideas .bh-card--featured .bh-card__body {
        padding: var(--bh-space-5);
    }
}

/* ---- Other dates, next season, not on sale: one quieter band ------------------ */

.bh-ideas__band {
    display: grid;
    gap: var(--bh-space-6);
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: #EAF6F9;                  /* Ballyhass Blue at 8% on white */
}

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

    /* Four (what is on for others, beside the other three) sit two by two. */
    .bh-ideas__band--2,
    .bh-ideas__band--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-ideas__band--1 .bh-ideas__rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .bh-ideas__band {
        gap: var(--bh-space-8);
    }

    .bh-ideas__band--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bh-ideas__band--1 .bh-ideas__rows {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bh-ideas__also {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bh-ideas__also-title {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: 1.25;
}

.bh-ideas__also-lede {
    margin: 2px 0 var(--bh-space-3);
    color: var(--bh-muted);               /* on the band's tint, 5.9:1 */
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-ideas__rows {
    display: grid;
    gap: var(--bh-space-2);
}

/* Each row is a white tile and the whole tile is the link: the action stretches
 * over it, so there is one link per row and nothing to miss. */
.bh-ideas__rows .bh-row {
    position: relative;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 2px var(--bh-space-3);
    align-items: start;
    padding: var(--bh-space-3);
    border: 0;
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-ideas__rows .bh-row:first-child {
    border-top: 0;
}

.bh-ideas__rows .bh-row__thumb {
    grid-row: 1 / span 2;
    width: 64px;
    aspect-ratio: 1;
}

.bh-ideas__rows .bh-row__title {
    font-size: var(--bh-text-sm);
}

.bh-ideas__rows .bh-row__side {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--bh-space-1) var(--bh-space-3);
    margin-top: var(--bh-space-1);
}

.bh-ideas__rows .bh-row__price {
    font-size: var(--bh-text-sm);
}

.bh-ideas__rows .bh-row__cta,
.bh-ideas__rows .bh-row__cta:hover,
.bh-ideas__rows .bh-row__cta:focus {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bh-blue-text);           /* on white, 5.01:1 */
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.bh-ideas__rows .bh-row__cta::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
}

.bh-ideas__rows .bh-row:hover .bh-row__cta {
    color: var(--bh-navy);
}

.bh-ideas__rows .bh-row__cta:focus-visible {
    outline: none;
}

.bh-ideas__rows .bh-row:has(.bh-row__cta:focus-visible) {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

@media (prefers-reduced-motion: no-preference) {
    .bh-ideas__rows .bh-row {
        transition: box-shadow 0.15s ease-in-out;
    }
}

.bh-ideas__rows .bh-row:hover {
    box-shadow: var(--bh-shadow-md);
}

/* ---- One route for groups ----------------------------------------------------- */

.bh-ideas__groups {
    display: grid;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-ideas__groups-photo {
    position: relative;
    aspect-ratio: 16 / 7;
    background: var(--bh-navy);
}

.bh-ideas__groups-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .bh-ideas__groups--photo {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .bh-ideas__groups-photo {
        aspect-ratio: auto;
        min-height: 220px;
    }
}

.bh-ideas__groups-body {
    display: grid;
    gap: var(--bh-space-3);
    align-content: center;
    justify-items: start;
    padding: var(--bh-space-6) var(--bh-space-5);
}

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

.bh-ideas__groups-title {
    margin: 0;
    color: var(--bh-yellow);              /* on navy, 13.34:1 */
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: 1.15;
}

.bh-ideas__groups-body p {
    max-width: 52ch;
    margin: 0;
    font-weight: var(--bh-weight-medium);
}

.bh-ideas__group-names {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-2);
    padding: 0;
    list-style: none;
}

.bh-ideas__group-names li {
    padding: 2px var(--bh-space-3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--bh-radius-sm);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

@media (max-width: 575.98px) {
    .bh-ideas__groups-body .bh-btn {
        width: 100%;
    }
}

/* ---- Compact rows (experience-card.php, layout row) ---------------------------------------------------------- */

.bh-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--bh-space-3) var(--bh-space-4);
    align-items: center;
    padding: var(--bh-space-3) 0;
    border-bottom: 1px solid var(--bh-line);
}

.bh-row:first-child {
    border-top: 1px solid var(--bh-line);
}

.bh-row__thumb {
    overflow: hidden;
    width: 88px;
    aspect-ratio: 4 / 3;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
}

.bh-row__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-row__thumb--panel {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bh-yellow);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
}

.bh-row__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bh-row__title {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: 1.2;
}

.bh-row__state {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-1) var(--bh-space-2);
    align-items: center;
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-row__chip {
    padding: 1px var(--bh-space-2);
    border-radius: var(--bh-radius-sm);
    background: #E6F8FB;
    color: var(--bh-navy);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
}

.bh-row__chip--now {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-row__chip--closed,
.bh-row__chip--muted {
    background: #EEF0F2;
    color: var(--bh-navy);
}

.bh-row__chip--future {
    background: var(--bh-white);
    box-shadow: inset 0 0 0 1.5px var(--bh-blue);
}

.bh-row__chip--group {
    background: var(--bh-navy);
    color: var(--bh-white);
}

.bh-row__when {
    color: var(--bh-muted);
}

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

/* Who the tickets are for, read before the action (comment 11929763). */
.bh-row__ages {
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-semibold);
}

.bh-row__side {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-4);
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 576px) {
    .bh-row {
        grid-template-columns: 104px minmax(0, 1fr) auto;
    }

    .bh-row__thumb {
        width: 104px;
    }

    .bh-row__side {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
}

.bh-row__price {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    white-space: nowrap;
}

.bh-row__price span {
    font-size: var(--bh-text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-row__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-navy);
    border-radius: 6px;
    color: var(--bh-navy);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.bh-row__cta--book {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-row__cta:hover,
.bh-row__cta:focus {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-white);
    text-decoration: none;
}

/* ---- The season, editorial ------------------------------------------------------- */

.bh-season-ed {
    padding: var(--bh-space-16) 0;
    background: #F3F5F7;
    font-family: var(--bh-font);
}

.bh-season-ed__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3) var(--bh-space-6);
    align-items: end;
    justify-content: space-between;
    margin-bottom: var(--bh-space-6);
}

.bh-season-ed__eyebrow {
    margin: 0 0 var(--bh-space-1);
    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-season-ed__title {
    margin: 0;
    color: var(--bh-navy);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.bh-season-ed__all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.bh-season-ed__grid {
    display: grid;
    grid-auto-columns: minmax(240px, 78%);
    grid-auto-flow: column;
    gap: var(--bh-space-4);
    margin: 0;
    padding: 0 0 var(--bh-space-2);
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
}

/* Hidden tiles take no cell, so the row fills with what is left. */
@media (min-width: 768px) {
    .bh-season-ed__grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        overflow: visible;
    }
}

.bh-season-ed__tile {
    scroll-snap-align: start;
}

.bh-season-ed__tile a {
    position: relative;
    display: grid;
    overflow: hidden;
    min-height: 340px;
    align-content: end;
    gap: var(--bh-space-1);
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-white);
    text-decoration: none;
    isolation: isolate;
}

.bh-season-ed__photo {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.bh-season-ed__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-season-ed__photo::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(33, 39, 47, 0) 30%, rgba(33, 39, 47, 0.88) 100%);
    content: "";
}

@media (prefers-reduced-motion: no-preference) {
    .bh-season-ed__photo img {
        transition: transform 0.3s ease;
    }

    .bh-season-ed__tile a:hover .bh-season-ed__photo img {
        transform: scale(1.04);
    }
}

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

.bh-season-ed__name {
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: 1.1;
}

.bh-season-ed__line {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

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

/* ===========================================================================
 * The homepage below the answer (preview; template-parts/home-lower.php)
 *
 * Eoghan, comment 11929763: four sections in place of seven. Trust on white,
 * mission and video on navy, the two venues on the light grey the season
 * section uses, Discover More of Ballyhass on white above the footer.
 * ======================================================================== */

.bh-home-low {
    margin: 0;                            /* main.min.css: 100px under every section */
    padding: var(--bh-space-16) 0;
    background: var(--bh-white);
    color: var(--bh-navy);
    font-family: var(--bh-font);
}

.bh-home-low--mission {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-home-low--venues {
    background: #F3F5F7;
}

.bh-home-low__head {
    margin-bottom: var(--bh-space-8);
}

.bh-home-low__eyebrow {
    margin: 0 0 var(--bh-space-1);
    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-home-low__title {
    margin: 0;
    color: inherit;
    font-family: var(--bh-font);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: var(--bh-weight-bold);
    line-height: 1.1;
    text-wrap: balance;
}

/* ---- Mission and video ---------------------------------------------------- */

.bh-home-mission {
    display: grid;
    gap: var(--bh-space-8);
    align-items: center;
}

@media (min-width: 992px) {
    .bh-home-mission {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--bh-space-12);
    }
}

.bh-home-low--mission .bh-home-low__eyebrow {
    color: var(--bh-yellow);
}

.bh-home-mission__text {
    max-width: 60ch;
    margin: var(--bh-space-5) 0 var(--bh-space-6);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* The seven values with their original icons (Eoghan, 11929848). The icons were drawn for the
 * live site's white background and carry black and white parts, so each sits on a white tile
 * rather than straight on navy. One row of seven on a wide screen, two columns on a phone. */
.bh-home-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-6) var(--bh-space-4);
    margin: var(--bh-space-12) 0 0;
    padding: var(--bh-space-8) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    list-style: none;
}

@media (min-width: 576px) {
    .bh-home-values {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .bh-home-values {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.bh-home-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bh-space-3);
    text-align: center;
}

.bh-home-value__icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-home-value__icon :is(img, svg) {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Two columns on a phone: smaller tiles, and the seventh value centred under the six. */
@media (max-width: 575.98px) {
    .bh-home-value:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .bh-home-value__icon {
        width: 64px;
        height: 64px;
    }

    .bh-home-value__icon :is(img, svg) {
        width: 46px;
        height: 46px;
    }
}

.bh-home-value__text {
    max-width: 16ch;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.35;
}

/* Every rule main.min.css has for the player is scoped to the old .video-block, so this
 * one sizes and positions its own: without them the photograph kept its 1200px width,
 * widened the column and pushed the mission text off a phone screen. */
.bh-home-mission > * {
    min-width: 0;
}

/* The mission video is a .bh-embed-frame behind its facade (inc/embed-facades.php), which
 * draws its own poster and button, so the old placeholder and play button rules went with it. */
.bh-home-mission__video .bh-embed-frame {
    border-radius: var(--bh-radius-md);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

/* ---- The two venues --------------------------------------------------------- */

/* The Adventure Pass as one line under the venue cards: a secondary route, not a band
 * (Eoghan, 11929848). Words and price from the booking system (ballyhass_home_pass()). */
.bh-home-pass {
    display: grid;
    gap: var(--bh-space-4);
    align-items: center;
    margin-top: var(--bh-space-6);
    padding: var(--bh-space-5) var(--bh-space-6);
    border-left: 4px solid var(--bh-yellow);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

@media (min-width: 768px) {
    .bh-home-pass {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--bh-space-8);
    }
}

.bh-home-pass__words {
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-home-pass__name {
    display: block;
    margin-bottom: var(--bh-space-1);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-home-pass__price {
    font-weight: var(--bh-weight-bold);
}

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

@media (min-width: 768px) {
    .bh-home-venues {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bh-home-venue {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: 0 12px 32px rgba(33, 39, 47, 0.08);
}

.bh-home-venue__photo {
    aspect-ratio: 16 / 10;
    max-width: 100%;
    overflow: hidden;
    background: var(--bh-navy);
}

.bh-home-venue__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-home-venue__body {
    display: grid;
    align-content: start;
    gap: var(--bh-space-3);
    padding: var(--bh-space-6);
}

.bh-home-venue__name {
    margin: 0;
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-2xl);
    font-weight: var(--bh-weight-bold);
}

.bh-home-venue__line,
.bh-home-venue__now,
.bh-home-venue__back {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: 1.45;
}

/* The brand's highlight: navy block, yellow text, square corners. */
.bh-home-venue__now span,
.bh-home-venue__back span {
    display: inline-block;
    margin-right: var(--bh-space-2);
    padding: 2px var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-home-venue__back span {
    background: #E1E6EB;
    color: var(--bh-navy);
}

.bh-home-venue__cta {
    justify-self: start;
    margin-top: var(--bh-space-2);
}

/* ---- Discover More of Ballyhass -------------------------------------------- */

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

@media (min-width: 768px) {
    .bh-home-brands {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bh-home-brand {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid #E1E6EB;
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-home-brand__photo {
    aspect-ratio: 3 / 2;
    max-width: 100%;
    overflow: hidden;
    background: var(--bh-navy);
}

.bh-home-brand__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-home-brand__body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--bh-space-4);
    padding: var(--bh-space-6);
}

.bh-home-brand__mark {
    display: flex;
    align-items: center;
    min-height: 56px;
    margin: 0;
}

.bh-home-brand__logo {
    width: auto;
    max-width: 100%;
    height: 52px;
    object-fit: contain;
}

/* The Padel mark is nearly square and carries a strapline, so it needs more height to read. */
.bh-home-brand--padel .bh-home-brand__logo {
    height: 76px;
}

/* No logo yet: the name in the brand's highlight, never a guessed mark. */
.bh-home-brand__wordmark {
    padding: var(--bh-space-2) var(--bh-space-3);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bh-home-brand__line {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: 1.45;
}

.bh-home-brand__cta {
    justify-self: start;
}

@media (max-width: 767.98px) {
    .bh-home-low {
        padding: var(--bh-space-12) 0;
    }

    .bh-home-low__head {
        margin-bottom: var(--bh-space-6);
    }

    .bh-home-venue__cta,
    .bh-home-brand__cta {
        justify-self: stretch;
    }
}

/* ===========================================================================
 * Plan a group as one journey (template-parts/group-journey.php)
 *
 * Eoghan, comment 11929509: one progressive journey, nothing entered twice.
 * Two steps in one form; the second sums up the first. Without the script,
 * both show.
 * ======================================================================== */

.bh-gj {
    display: grid;
    gap: var(--bh-space-6);
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

.bh-gj__step {
    display: grid;
    gap: var(--bh-space-5);
}

.bh-gj:not(.is-stepped) .bh-gj__step + .bh-gj__step {
    padding-top: var(--bh-space-8);
    border-top: 1px solid var(--bh-line);
}

.bh-gj__count {
    margin: 0;
    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-gj__title {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-xl);
}

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

.bh-gj__lede,
.bh-gj__including {
    margin: 0;
    font-weight: var(--bh-weight-medium);
}

.bh-gj__including {
    padding: var(--bh-space-2) var(--bh-space-3);
    border-left: 4px solid var(--bh-blue);
    background: #E6F8FB;
}

.bh-gj__choices {
    display: grid;
    gap: var(--bh-space-3);
}

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

.bh-gj__choice {
    position: relative;
}

.bh-gj__choice input {
    position: absolute;
    opacity: 0;
}

.bh-gj__choice label {
    display: grid;
    gap: var(--bh-space-1);
    height: 100%;
    padding: var(--bh-space-4);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    cursor: pointer;
}

.bh-gj__choice label span {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-gj__choice input:checked + label {
    border-color: var(--bh-navy);
    box-shadow: inset 0 0 0 1px var(--bh-navy);
    background: rgba(228, 255, 26, 0.35);
}

.bh-gj__choice input:focus-visible + label {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

.bh-gj__next,
.bh-gj__send {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3) var(--bh-space-6);
    align-items: center;
}

.bh-gj__next[hidden] {
    display: none;
}

.bh-gj .bh-btn {
    min-height: 52px;
}

.bh-gj__skip,
.bh-gj__change {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bh-navy);
    font: var(--bh-weight-bold) var(--bh-text-xs) / 1.3 var(--bh-font);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}

.bh-gj__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-4);
    align-items: center;
    padding: var(--bh-space-4);
    background: #F3F5F7;
}

.bh-gj__summary-title {
    margin: 0;
    font-weight: var(--bh-weight-bold);
}

.bh-gj__summary ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-gj__summary li {
    padding: 2px var(--bh-space-2);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

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

/* The leaving date, under "How long do you have?" for an overnight stay. */
.bh-gj__leave {
    margin-top: var(--bh-space-4);
    max-width: 20rem;
}

.bh-gj__leave[hidden] {
    display: none;
}

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

/* main.min.css leaves inputs content-box: width 100% plus padding overflowed. */
.bh-gj input,
.bh-gj select,
.bh-gj textarea {
    box-sizing: border-box;
    max-width: 100%;
}

.bh-gj input[type="text"],
.bh-gj input[type="email"],
.bh-gj input[type="tel"],
.bh-gj input[type="number"],
.bh-gj input[type="date"],
.bh-gj input[type="time"],
.bh-gj select,
.bh-gj textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--bh-space-2) var(--bh-space-3);
    border: 1px solid #8A939C;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-navy);
    font: var(--bh-weight-medium) var(--bh-text-sm) / 1.4 var(--bh-font);
}

.bh-gj input:focus-visible,
.bh-gj select:focus-visible,
.bh-gj textarea:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: 1px;
}

.bh-gj__more {
    padding: var(--bh-space-4);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
}

.bh-gj__more summary {
    min-height: 44px;
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    cursor: pointer;
}

.bh-gj__more[open] summary {
    margin-bottom: var(--bh-space-4);
}

.bh-gj__checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-5);
}

.bh-gj__check {
    display: inline-flex;
    gap: var(--bh-space-2);
    align-items: center;
    min-height: 44px;
    font-weight: var(--bh-weight-medium);
}

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

.bh-gj__feedback {
    padding: var(--bh-space-3) var(--bh-space-4);
    border-radius: var(--bh-radius-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-gj__feedback.is-success {
    border: 1px solid #6EE7B7;
    background: #D1FAE5;
    color: #065F46;
}

.bh-gj__feedback.is-error {
    border: 1px solid #F4A8A8;
    background: #FEF0F0;
    color: #9B1C1C;
}

.bh-groups__plan-lede {
    margin: calc(-1 * var(--bh-space-3)) 0 var(--bh-space-6);
    color: var(--bh-on-navy);
    font-weight: var(--bh-weight-medium);
}

.bh-groups__plan-lede a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

.bh-groups__start-note {
    padding-left: var(--bh-space-3);
    border-left: 3px solid var(--bh-yellow);
    font-size: var(--bh-text-sm) !important;
}

/* ===========================================================================
 * Careers and Recruitment Hub (careers-hub.php, inc/careers-hub.php)
 *
 * Eoghan, comments 11929575 and 11929576: vacancies first, straight from HR
 * Recruitment, with a designed empty state and a route to register interest;
 * then the employer proposition in distinct sections (life at Ballyhass,
 * growth, benefits, the two venues, values and impact). Full-width photography,
 * alternating editorial sections, role cards and benefit tiles.
 *
 * Phone first. On a phone the jump links scroll sideways, the venue cards
 * become a swipeable row, benefits sit two to a row and the application form
 * runs full width with 48px fields and 16px text (so iOS does not zoom).
 * Pairings from tokens.css only: navy on yellow, blue and white, white on
 * navy, and --bh-blue-text for blue text on white.
 * ======================================================================== */

.bh-careers {
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

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

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

.bh-careers :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);
}

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

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

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

.bh-careers__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-careers__hero-inner {
    display: grid;
    gap: var(--bh-space-4);
}

.bh-careers__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-careers__title {
    max-width: 13ch;
    margin: 0;
    color: var(--bh-white) !important;
    font-size: clamp(2.5rem, 6.2vw, 5rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: 1;
    text-wrap: balance;
}

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

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

.bh-careers .bh-careers__btn-ghost {
    border: 2px solid var(--bh-white);
    background: transparent;
    color: var(--bh-white);
}

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

.bh-careers__hero-count {
    margin: 0;
    padding-left: var(--bh-space-3);
    border-left: 3px solid var(--bh-yellow);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-careers__hero-count a {
    color: var(--bh-white);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

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

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

.bh-careers__jump ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bh-space-2);
    margin: 0;
    padding: var(--bh-space-3) 0;
    list-style: none;
}

.bh-careers__jump a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-pill);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: none;
    white-space: nowrap;
}

.bh-careers__jump a:hover,
.bh-careers__jump a:focus {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

/* ---- Sections and headings ------------------------------------------------- */

.bh-careers__section {
    padding: var(--bh-space-16) 0;
}

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

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

.bh-careers__head {
    max-width: 46rem;
    margin-bottom: var(--bh-space-8);
}

.bh-careers__head p {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

.bh-careers__section--navy .bh-careers__eyebrow {
    color: var(--bh-yellow);
}

.bh-careers__h2 {
    margin: 0 0 var(--bh-space-4);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: var(--bh-leading-tight);
    text-wrap: balance;
}

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

.bh-careers__prose {
    max-width: 65ch;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__prose p,
.bh-careers__prose ul {
    margin: 0 0 var(--bh-space-4);
}

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

.bh-careers__prose li {
    margin-bottom: var(--bh-space-1);
}

.bh-careers__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.bh-careers__link:hover,
.bh-careers__link:focus {
    color: var(--bh-blue-text);
}

.bh-careers__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-6);
}

/* ---- Vacancies --------------------------------------------------------------- */

.bh-careers__count {
    display: flex;
    align-items: center;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-4);
    font-weight: var(--bh-weight-bold);
}

.bh-careers__count::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: var(--bh-radius-full);
    background: var(--bh-blue);
}

.bh-careers__jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-careers__job-card {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
    height: 100%;
    padding: var(--bh-space-6);
    border: 1px solid var(--bh-line);
    border-top: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

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

.bh-careers__job-title {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

.bh-careers__job-title a {
    color: var(--bh-navy);
    text-decoration: none;
}

.bh-careers__job-title a:hover,
.bh-careers__job-title a:focus {
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.bh-careers__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-3) var(--bh-space-4);
    margin: 0;
}

.bh-careers__facts div {
    min-width: 0;
}

.bh-careers__facts dt {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-careers__facts dd {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    overflow-wrap: anywhere;
}

.bh-careers__job-summary {
    margin: 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__job-foot {
    display: grid;
    gap: var(--bh-space-3);
    margin-top: auto;
    padding-top: var(--bh-space-2);
}

.bh-careers__job-closes {
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-careers .bh-careers__job-apply {
    width: 100%;
}

.bh-careers__state,
.bh-careers__empty {
    padding: var(--bh-space-8);
    border-radius: var(--bh-radius-md);
}

.bh-careers__state {
    border: 2px solid var(--bh-pink);
    background: var(--bh-white);
}

.bh-careers__empty {
    display: grid;
    gap: var(--bh-space-3);
    max-width: 52rem;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-careers__empty p {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__empty .bh-careers__empty-kicker {
    width: fit-content;
    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-careers__state-title {
    margin: 0 0 var(--bh-space-2);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-careers__empty-actions {
    margin-top: var(--bh-space-3) !important;
}

.bh-careers__roles-info {
    display: grid;
    gap: var(--bh-space-8);
    margin-top: var(--bh-space-12);
    padding-top: var(--bh-space-8);
    border-top: 1px solid var(--bh-line);
}

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

.bh-careers__specs a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--bh-space-2);
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 1px solid var(--bh-line);
    border-left: 4px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: none;
}

.bh-careers__specs a span {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-careers__specs a:hover,
.bh-careers__specs a:focus {
    border-left-color: var(--bh-blue);
    background: var(--bh-surface-2);
}

/* ---- Register interest and the application form ------------------------------ */

.bh-careers__interest {
    display: grid;
    gap: var(--bh-space-6);
}

.bh-careers__closed,
.bh-careers__done {
    padding: var(--bh-space-6);
    border-left: 8px solid var(--bh-yellow);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-careers__done {
    border-left-color: var(--bh-blue);
}

.bh-careers__closed p,
.bh-careers__done p {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__done h3 {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
}

/* While a form is closed, the team's email and phone (ballyhass_careers_contact_html), as links in
 * the sentence. Only ever on white or the light tint, so navy, underlined in blue. */
.bh-careers__closed .bh-careers__contact,
.bh-careers__head .bh-careers__contact {
    margin-top: var(--bh-space-3);
}

.bh-careers__contact a {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.bh-careers__contact a:hover,
.bh-careers__contact a:focus {
    color: var(--bh-blue-text);
}

.bh-careers__test {
    margin: 0 0 var(--bh-space-4);
    padding: var(--bh-space-4);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-body);
}

.bh-careers__errors {
    margin: 0 0 var(--bh-space-4);
    padding: var(--bh-space-4);
    border: 2px solid var(--bh-pink);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    font-weight: var(--bh-weight-semibold);
}

.bh-careers__errors p,
.bh-careers__errors ul {
    margin: 0;
}

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

.bh-careers__form {
    display: grid;
    gap: var(--bh-space-5);
    padding: var(--bh-space-6);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

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

.bh-careers__pair {
    display: grid;
    gap: var(--bh-space-5);
}

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

/* Not the choice pills, which are labels too and keep their own padding and size. */
.bh-careers__field > label:not(.bh-careers__choice),
.bh-careers__field legend,
.bh-careers__sublabel {
    margin: 0;
    padding: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-careers__sublabel {
    margin-top: var(--bh-space-2);
    font-size: var(--bh-text-xs);
}

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

.bh-careers__form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
    width: 100%;
    min-height: 48px;
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px solid var(--bh-muted);
    border-radius: 6px;
    background: var(--bh-white);
    color: var(--bh-navy);
    font: inherit;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

.bh-careers__form :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus {
    border-color: var(--bh-navy);
}

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

.bh-careers__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
}

.bh-careers__choices legend {
    float: left;
    width: 100%;
    margin-bottom: var(--bh-space-2);
}

.bh-careers__choices .bh-careers__sublabel {
    flex: 1 1 100%;
}

.bh-careers__choice {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: var(--bh-target-comfortable);
    margin: 0;
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-pill);
    background: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    cursor: pointer;
}

.bh-careers__choice:has(input:checked) {
    border-color: var(--bh-navy);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
}

.bh-careers__form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--bh-navy);
}

.bh-careers__file input[type="file"] {
    width: 100%;
    padding: var(--bh-space-3);
    border: 2px dashed var(--bh-muted);
    border-radius: 6px;
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    font: inherit;
    font-size: var(--bh-text-xs);
}

.bh-careers__file input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: var(--bh-space-3);
    padding: 0 var(--bh-space-4);
    border: 0;
    border-radius: 6px;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font: inherit;
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    cursor: pointer;
}

.bh-careers__notice {
    padding: var(--bh-space-4);
    border-left: 4px solid var(--bh-navy);
    background: var(--bh-surface-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__notice h4 {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-careers__notice p {
    margin: 0;
}

.bh-careers__tick {
    display: flex;
    align-items: flex-start;
    gap: var(--bh-space-3);
    min-height: var(--bh-target-comfortable);
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    line-height: var(--bh-leading-body);
    cursor: pointer;
}

.bh-careers__tick input[type="checkbox"] {
    margin-top: 2px;
}

.bh-careers__submit {
    margin: 0;
}

.bh-careers__submit .bh-btn {
    width: 100%;
}

.bh-careers__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Editorial splits and the photo band -------------------------------------- */

.bh-careers__split {
    display: grid;
    gap: var(--bh-space-8);
    align-items: center;
}

.bh-careers__split-photo {
    order: -1;
}

.bh-careers__split-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

.bh-careers__split-text > p:not(.bh-careers__eyebrow) {
    margin: 0 0 var(--bh-space-4);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__band {
    margin: var(--bh-space-12) 0;
}

.bh-careers__band img {
    display: block;
    width: 100%;
    height: clamp(220px, 34vw, 480px);
    object-fit: cover;
    object-position: 50% 40%;
}

.bh-careers__voices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--bh-space-6);
    margin: 0 0 var(--bh-space-8);
    padding: 0;
    list-style: none;
}

.bh-careers__voice {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--bh-space-8) var(--bh-space-6) var(--bh-space-6);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-careers__voice blockquote {
    position: relative;
    margin: 0 0 var(--bh-space-4);
    padding: 0;
    border: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__voice blockquote::before {
    content: "\201C";
    display: block;
    height: 0.6em;
    color: var(--bh-yellow);
    font-size: 4rem;
    font-weight: var(--bh-weight-black);
    line-height: 1;
}

.bh-careers__voice blockquote p {
    margin: 0;
}

.bh-careers__voice figcaption {
    margin-top: auto;
    color: var(--bh-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-careers__team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-careers__team img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--bh-radius-md);
    object-fit: cover;
    object-position: 50% 20%;
}

/* ---- Grow your career ------------------------------------------------------------ */

.bh-careers__path {
    margin-top: var(--bh-space-6);
}

.bh-careers__path-title {
    margin: 0 0 var(--bh-space-3);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-careers__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-6);
    padding: 0;
    list-style: none;
    counter-reset: bh-step;
}

.bh-careers__steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--bh-space-3);
    min-height: 44px;
    padding: 0 var(--bh-space-4);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    counter-increment: bh-step;
}

.bh-careers__steps li::before {
    content: counter(bh-step);
    display: inline-grid;
    flex: 0 0 28px;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--bh-radius-full);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
}

.bh-careers__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-careers__chips li {
    padding: var(--bh-space-2) var(--bh-space-3);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-pill);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-careers__training {
    margin-top: var(--bh-space-16);
}

.bh-careers__courses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--bh-space-4);
    margin: 0 0 var(--bh-space-8);
    padding: 0;
    list-style: none;
}

.bh-careers__course {
    display: grid;
    align-content: start;
    gap: var(--bh-space-1);
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-careers__course-body {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: 1.1;
}

.bh-careers__course-name {
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
}

.bh-careers__course-by {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-careers__academy {
    display: grid;
    gap: var(--bh-space-4);
    align-items: center;
    padding: var(--bh-space-8);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-careers__academy p {
    margin: 0;
    max-width: 52rem;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---- Benefits ---------------------------------------------------------------- */

.bh-careers__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-3);
    margin: 0 0 var(--bh-space-12);
    padding: 0;
    list-style: none;
}

.bh-careers__benefit {
    display: grid;
    align-content: start;
    gap: var(--bh-space-1);
    padding: var(--bh-space-4);
    border-top: 4px solid var(--bh-yellow);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-surface-2);
}

.bh-careers__benefit-n {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
}

.bh-careers__benefit h3 {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-black);
    line-height: 1.25;
}

.bh-careers__benefit p {
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---- The two venues ------------------------------------------------------------ */

.bh-careers__venues {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: var(--bh-space-4);
    margin: 0 calc(-1 * var(--bh-space-4));
    padding: 0 var(--bh-space-4) var(--bh-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    list-style: none;
}

.bh-careers__venue {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
    scroll-snap-align: start;
}

.bh-careers__venue-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.bh-careers__venue-body {
    display: grid;
    gap: var(--bh-space-2);
    padding: var(--bh-space-5);
}

.bh-careers__venue-body h3 {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
}

.bh-careers__venue-body p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

.bh-careers__venue-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* ---- Values and impact ---------------------------------------------------------- */

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

.bh-careers__mission .bh-careers__eyebrow {
    color: var(--bh-navy);
}

.bh-careers__mission-head {
    display: grid;
    gap: var(--bh-space-8);
    align-items: center;
}

.bh-careers__mission-title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--bh-weight-black);
}

.bh-careers__mission-title img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
}

.bh-careers__mission-text p {
    margin: 0 0 var(--bh-space-3);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-careers__mission .bh-careers__link {
    text-decoration-color: var(--bh-navy);
}

.bh-careers__values {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: var(--bh-space-4) var(--bh-space-6);
    margin: 0 0 var(--bh-space-4);
    padding: 0;
    list-style: none;
    counter-reset: bh-value;
}

.bh-careers__values li {
    display: flex;
    align-items: baseline;
    gap: var(--bh-space-3);
    padding-top: var(--bh-space-3);
    border-top: 3px solid var(--bh-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
    counter-increment: bh-value;
}

.bh-careers__values li::before {
    content: counter(bh-value);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: 1;
}

.bh-careers__impact {
    display: grid;
    gap: var(--bh-space-8);
    margin-top: var(--bh-space-12);
    padding-top: var(--bh-space-8);
    border-top: 1px solid var(--bh-line);
}

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

/* Navy, because the library's B Corp mark is drawn in white. */
.bh-careers__creds li {
    display: flex;
    align-items: center;
    gap: var(--bh-space-5);
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-weight: var(--bh-weight-bold);
}

.bh-careers__creds :is(img, svg) {
    flex: 0 0 auto;
    width: auto;
    height: 72px;
    object-fit: contain;
}

.bh-careers__creds a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-min);
    color: var(--bh-white);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ---- The foot of the hub ------------------------------------------------------------ */

.bh-careers__cta {
    padding: var(--bh-space-16) 0;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    text-align: center;
}

.bh-careers__cta .bh-careers__actions {
    justify-content: center;
}

/* ---- A role's own page ------------------------------------------------------------- */

.bh-careers__rolehead {
    padding: 150px 0 var(--bh-space-12);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-careers__rolehead .container {
    display: grid;
    gap: var(--bh-space-4);
}

.bh-careers__back {
    margin: 0;
}

.bh-careers__back a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

.bh-careers__back a::before {
    content: "\2190";
    margin-right: var(--bh-space-2);
}

.bh-careers__role-title {
    max-width: 22ch;
    margin: 0;
    color: var(--bh-white) !important;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
}

.bh-careers__role-lede {
    max-width: 40rem;
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
}

.bh-careers__facts--role {
    max-width: 52rem;
    padding: var(--bh-space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.bh-careers__facts--role dt {
    color: var(--bh-yellow);
}

.bh-careers__facts--role dd {
    font-size: var(--bh-text-md);
}

.bh-careers__role-actions {
    margin: 0;
}

.bh-careers__role {
    display: grid;
    gap: var(--bh-space-12);
    padding-top: var(--bh-space-12);
    padding-bottom: var(--bh-space-16);
}

.bh-careers__role-main .bh-careers__h3 {
    margin-top: var(--bh-space-6);
}

.bh-careers__role-main .bh-careers__h3:first-child {
    margin-top: 0;
}

.bh-careers__role-apply {
}

.bh-careers__role-apply .bh-careers__form {
    padding: var(--bh-space-6) var(--bh-space-5);
    border: 1px solid var(--bh-line);
}

/* On the hub's navy surfaces a navy hover would vanish into the surface: white
 * for the yellow button, as the Padel events and Groups feature do, and yellow
 * for the white one. The focus ring turns yellow so it shows on navy. */
:is(.bh-careers__hero, .bh-careers__empty, .bh-careers__academy, .bh-careers__cta, .bh-careers__rolehead) .bh-btn--yellow:hover,
:is(.bh-careers__hero, .bh-careers__empty, .bh-careers__academy, .bh-careers__cta, .bh-careers__rolehead) .bh-btn--yellow:focus {
    background: var(--bh-white);
    color: var(--bh-navy);
}

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

/* ---- Phone ------------------------------------------------------------------------ */

@media (max-width: 575.98px) {
    .bh-careers__hero {
        min-height: 600px;
        padding-top: 120px;
    }

    .bh-careers__hero-photo {
        object-position: 40% 30%;
    }

    .bh-careers__actions .bh-btn {
        flex: 1 1 100%;
    }

    /* One row that scrolls sideways, not three rows of chips. */
    .bh-careers__jump ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .bh-careers__jump li {
        scroll-snap-align: start;
    }

    .bh-careers__section {
        padding: var(--bh-space-12) 0;
    }

    .bh-careers__state,
    .bh-careers__empty,
    .bh-careers__academy {
        padding: var(--bh-space-6) var(--bh-space-5);
    }

    .bh-careers__form {
        margin: 0 calc(-1 * var(--bh-space-2));
        padding: var(--bh-space-5) var(--bh-space-4);
    }

    .bh-careers__rolehead {
        padding-top: 120px;
    }

    .bh-careers__role-actions .bh-btn {
        width: 100%;
    }
}

/* ---- Tablet and up ------------------------------------------------------------------ */

@media (min-width: 576px) {
    .bh-careers__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .bh-careers__team {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-careers__benefits {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--bh-space-4);
    }

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

    .bh-careers__benefit h3 {
        font-size: var(--bh-text-md);
    }

    .bh-careers__benefit p {
        font-size: var(--bh-text-sm);
    }

    .bh-careers__venues {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bh-space-6);
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .bh-careers__venue-photo {
        aspect-ratio: 16 / 10;
    }

    .bh-careers__academy {
        grid-template-columns: 1fr auto;
    }

}

@media (min-width: 992px) {
    .bh-careers__split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--bh-space-16);
    }

    .bh-careers__split-photo {
        order: 0;
    }

    .bh-careers__split--reverse .bh-careers__split-photo {
        order: -1;
    }

    .bh-careers__split-photo img {
        aspect-ratio: 4 / 5;
    }

    .bh-careers__split--seasons .bh-careers__split-photo img {
        aspect-ratio: 4 / 3;
    }

    .bh-careers__roles-info,
    .bh-careers__impact {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--bh-space-16);
    }

    .bh-careers__interest {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--bh-space-16);
        align-items: start;
    }

    .bh-careers__interest .bh-careers__head {
        position: sticky;
        top: 100px;
    }

    .bh-careers__mission-head {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--bh-space-16);
    }

    .bh-careers__role {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--bh-space-16);
        align-items: start;
    }

    .bh-careers .bh-careers__job-apply {
        width: auto;
        justify-self: start;
    }
}

/* ---- Careers: the confirmation after an application, and the closed register-interest state ---- */

.bh-careers__confirmation {
    display: grid;
    gap: var(--bh-space-3);
    max-width: 44rem;
    color: var(--bh-navy);
}

.bh-careers__confirmation .bh-careers__h3,
.bh-careers__confirmation .bh-careers__h4 {
    margin: 0;
    color: var(--bh-navy);
}

.bh-careers__confirmation .bh-careers__h4 {
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-black);
    text-transform: uppercase;
}

.bh-careers__reference {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    align-items: baseline;
}

.bh-careers__reference strong {
    padding: 2px var(--bh-space-3);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-lg);
    letter-spacing: 0.04em;
}

.bh-careers__next {
    margin: 0;
    padding-left: 1.25rem;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

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

.bh-careers__academy .bh-careers__link {
    color: var(--bh-white);
}

.bh-careers__empty-note {
    margin-top: var(--bh-space-3) !important;
}

/* ===========================================================================
 * Training and Qualifications Hub (training-hub.php, inc/training-hub.php,
 * inc/training-hub-content.php)
 *
 * Eoghan, comment 11929850: the Outdoor Training Academy's hub inside the
 * Ballyhass site, with the Careers page's treatment. A branded first screen
 * (the academy's logo on a white panel, navy, real training photography),
 * upcoming course dates from the booking system as the centrepiece, the three
 * training routes and every course card, schools and workplaces with the
 * request panel, and About on navy. Each course has its own page.
 *
 * Phone first, 390px wide: one column, cards full width, the date list as rows
 * with the date block on the left, 48px fields and 16px text so iOS does not
 * zoom. Pairings from tokens.css only: navy on yellow, blue and white, white on
 * navy, and --bh-blue-text for blue text on white.
 * ======================================================================== */

.bh-training {
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

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

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

.bh-training :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: bold caps, rounded square, per the guide. */
.bh-training .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;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

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

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

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

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

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

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

/* On navy, the yellow button's navy hover would vanish into the surface: white instead. */
:is(.bh-training__hero, .bh-training__coursehead, .bh-training__feature, .bh-training__section--navy, .bh-training__cta) .bh-btn--yellow:hover,
:is(.bh-training__hero, .bh-training__coursehead, .bh-training__feature, .bh-training__section--navy, .bh-training__cta) .bh-btn--yellow:focus {
    background: var(--bh-white);
    color: var(--bh-navy);
}

/* ---- First screen: the academy's own brand ----------------------------------- */

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

.bh-training__hero-inner {
    display: grid;
    gap: var(--bh-space-4);
    padding-top: 130px;
    padding-bottom: var(--bh-space-8);
}

/* The logo is dark lettering and Ballyhass Blue, made for light grounds: a white panel, square cornered. */
.bh-training__logo {
    width: fit-content;
    margin: 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    background: var(--bh-white);
}

.bh-training__logo img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

.bh-training__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-training__title {
    max-width: 16ch;
    margin: 0;
    color: var(--bh-white) !important;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: 1;
    text-wrap: balance;
}

.bh-training__lede {
    max-width: 40rem;
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__portfolio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-training__portfolio li {
    padding: var(--bh-space-1) var(--bh-space-3);
    border: 2px solid var(--bh-blue);
    color: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.bh-training__hero-count {
    margin: 0;
    padding-left: var(--bh-space-3);
    border-left: 3px solid var(--bh-yellow);
    font-weight: var(--bh-weight-semibold);
}

.bh-training__hero-count a {
    color: var(--bh-white);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

.bh-training__hero-photo {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-top: 6px solid var(--bh-blue);
}

.bh-training__hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 40%;
}

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

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

.bh-training__jump ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bh-space-2);
    margin: 0;
    padding: var(--bh-space-3) 0;
    list-style: none;
}

.bh-training__jump a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-pill);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: none;
    white-space: nowrap;
}

.bh-training__jump a:hover,
.bh-training__jump a:focus {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

/* ---- Sections and headings ----------------------------------------------------------- */

.bh-training__section {
    padding: var(--bh-space-12) 0;
}

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

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

.bh-training__head {
    max-width: 46rem;
    margin-bottom: var(--bh-space-8);
}

.bh-training__head p {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

.bh-training__section--navy .bh-training__eyebrow {
    color: var(--bh-yellow);
}

.bh-training__h2 {
    margin: 0 0 var(--bh-space-4);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: var(--bh-leading-tight);
    text-wrap: balance;
}

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

.bh-training__prose {
    max-width: 65ch;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__prose :is(p, ul) {
    margin: 0 0 var(--bh-space-4);
}

.bh-training__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.bh-training__link:hover,
.bh-training__link:focus {
    color: var(--bh-blue-text);
}

/* ---- Upcoming dates, from the booking system ---------------------------------------------- */

.bh-training__count {
    display: flex;
    align-items: center;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-4);
    font-weight: var(--bh-weight-bold);
}

.bh-training__count::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: var(--bh-radius-full);
    background: var(--bh-blue);
}

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

.bh-training__date {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--bh-space-3) var(--bh-space-4);
    align-items: start;
    padding: var(--bh-space-4);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-training__date-day {
    display: grid;
    justify-items: center;
    margin: 0;
    padding: var(--bh-space-2) 0;
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.bh-training__date-day strong {
    color: var(--bh-white);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: 1.1;
}

.bh-training__date-body {
    display: grid;
    gap: var(--bh-space-1);
    min-width: 0;
}

.bh-training__date-title {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-black);
    line-height: 1.25;
}

.bh-training__date-title a {
    color: var(--bh-navy);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-underline-offset: 4px;
}

.bh-training__date :is(.bh-training__date-when, .bh-training__date-meta, .bh-training__date-places) {
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-training__date-places {
    font-weight: var(--bh-weight-bold) !important;
}

.bh-training__date-price {
    margin-left: var(--bh-space-2);
    padding: 0 var(--bh-space-2);
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

.bh-training__date-book {
    grid-column: 1 / -1;
    width: 100%;
}

.bh-training__date--sold_out {
    background: var(--bh-surface-2);
    box-shadow: none;
}

.bh-training__partial {
    margin: var(--bh-space-4) 0 0;
    color: var(--bh-muted);
    font-weight: var(--bh-weight-medium);
}

/* The empty state and the could-not-load state: designed, never a blank list. */
.bh-training__empty,
.bh-training__state {
    display: grid;
    gap: var(--bh-space-3);
    max-width: 46rem;
    padding: var(--bh-space-6);
    border-left: 6px solid var(--bh-blue);
    background: var(--bh-surface-2);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__empty p,
.bh-training__state p {
    margin: 0;
}

.bh-training__empty-kicker {
    width: fit-content;
    padding: 2px var(--bh-space-2);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-training__state-title {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

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

/* ---- Training routes and the course cards ------------------------------------------------ */

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

.bh-training__route {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-training__route-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bh-training__route-body {
    display: grid;
    gap: var(--bh-space-2);
    padding: var(--bh-space-5);
    border-top: 6px solid var(--bh-blue);
}

.bh-training__route--plain .bh-training__route-body {
    border-top: 0;
    border-left: 6px solid var(--bh-yellow);
}

.bh-training__route-title {
    margin: 0;
    color: var(--bh-white) !important;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    text-transform: uppercase;
}

.bh-training__route-body p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__route-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.bh-training__route-link:hover,
.bh-training__route-link:focus {
    color: var(--bh-yellow);
}

.bh-training__group {
    margin-bottom: var(--bh-space-12);
}

.bh-training__group-title {
    display: inline-block;
    margin: 0 0 var(--bh-space-4);
    padding: 2px var(--bh-space-3);
    background: var(--bh-navy);
    color: var(--bh-yellow) !important;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    text-transform: uppercase;
}

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

.bh-training__card {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-training__card-photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bh-surface-2);
}

.bh-training__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No photograph yet: a navy panel with the route's name, never a stock picture. */
/* No photograph yet: a slim category band, not a 16:9 block that reads as a missing image. */
.bh-training__card-photo--brand {
    display: flex;
    align-items: center;
    aspect-ratio: auto;
    min-height: 56px;
    padding: var(--bh-space-3) var(--bh-space-4);
    border-bottom: 6px solid var(--bh-blue);
    background: var(--bh-navy);
}

.bh-training__card-photo--brand span {
    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-training__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
    padding: var(--bh-space-5);
}

.bh-training__card-title {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

.bh-training__card-title a {
    color: var(--bh-navy);
    text-decoration: none;
}

.bh-training__card-title a:hover,
.bh-training__card-title a:focus {
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-underline-offset: 4px;
}

.bh-training__card-qual {
    margin: 0;
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-training__card-summary {
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__facts {
    display: grid;
    gap: var(--bh-space-1);
    margin: 0;
    font-size: var(--bh-text-xs);
}

.bh-training__facts div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-2);
}

.bh-training__facts dt {
    font-weight: var(--bh-weight-bold);
}

.bh-training__facts dt::after {
    content: ":";
}

.bh-training__facts dd {
    margin: 0;
    font-weight: var(--bh-weight-medium);
}

.bh-training__status {
    margin: 0;
    padding: var(--bh-space-2) var(--bh-space-3);
    border-left: 4px solid var(--bh-line);
    background: var(--bh-surface-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    line-height: var(--bh-leading-body);
}

.bh-training__status--dates {
    border-left-color: var(--bh-blue);
}

.bh-training__status--group {
    border-left-color: var(--bh-yellow);
}

.bh-training__status--error {
    border-left-color: var(--bh-pink);
}

.bh-training__card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-4);
    align-items: center;
    margin-top: auto;
}

/* ---- Schools and workplaces ------------------------------------------------------------------ */

.bh-training__schools,
.bh-training__offers {
    display: grid;
    gap: var(--bh-space-6);
    align-items: start;
}

.bh-training__offers {
    gap: var(--bh-space-4);
}

.bh-training__feature {
    display: grid;
    gap: var(--bh-space-3);
    padding: var(--bh-space-6);
    border-top: 6px solid var(--bh-yellow);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-training__feature p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__feature-kicker {
    width: fit-content;
    padding: 2px var(--bh-space-2);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-training__feature-title {
    margin: 0;
    color: var(--bh-white) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--bh-weight-black);
    line-height: 1.05;
}

.bh-training__ticks,
.bh-training__needs {
    display: grid;
    gap: var(--bh-space-2);
    margin: 0 0 var(--bh-space-6);
    padding: 0;
    list-style: none;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__ticks li,
.bh-training__needs li {
    position: relative;
    padding-left: var(--bh-space-6);
}

.bh-training__ticks li::before,
.bh-training__needs li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--bh-blue);
}

.bh-training__needs li::before {
    border: 2px solid var(--bh-navy);
    background: transparent;
}

.bh-training__ticks--on-navy {
    margin: 0;
}

.bh-training__ticks--on-navy li::before {
    background: var(--bh-yellow);
}

.bh-training__offer {
    padding: var(--bh-space-5);
    border: 1px solid var(--bh-line);
    border-left: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
}

.bh-training__offer p {
    margin: 0 0 var(--bh-space-2);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__note {
    margin: 0;
    color: var(--bh-muted);
    font-weight: var(--bh-weight-medium);
}

/* The request and enquiry panels. */
.bh-training__panel {
    display: grid;
    gap: var(--bh-space-3);
    padding: var(--bh-space-6) var(--bh-space-5);
    border-top: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-md);
    color: var(--bh-navy);
}

.bh-training__panel .bh-training__h3 {
    margin: 0;
}

.bh-training__panel-intro {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__contact {
    display: grid;
    gap: var(--bh-space-3);
}

.bh-training__contact p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
}

.bh-training__contact-line {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    overflow-wrap: anywhere;
}

/* ---- Enquiry forms (inert until a destination and an approved notice exist) ---------------------- */

.bh-training__test {
    margin: 0;
    padding: var(--bh-space-3);
    border-left: 4px solid var(--bh-pink);
    background: var(--bh-surface-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    line-height: var(--bh-leading-body);
}

.bh-training__form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-training__form,
.bh-training__form > fieldset {
    display: grid;
    gap: var(--bh-space-4);
}

.bh-training__form--preview {
    opacity: 0.75;
}

.bh-training__form-note,
.bh-training__hint {
    margin: 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

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

/* Not the choice pills, which are labels too and keep their own padding (4 November 2026: their
   radio sat on the pill's edge, the same fault the enquiry forms' pills had). */
.bh-training__field > label:not(.bh-training__choice),
.bh-training__field legend {
    margin: 0;
    padding: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

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

.bh-training__form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
    width: 100%;
    min-height: 48px;
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px solid var(--bh-muted);
    border-radius: 6px;
    background: var(--bh-white);
    color: var(--bh-navy);
    font: inherit;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

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

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

.bh-training__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
}

.bh-training__choices legend {
    width: 100%;
    margin-bottom: var(--bh-space-2);
}

.bh-training__choice {
    display: inline-flex;
    gap: var(--bh-space-2);
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-pill);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-training__choice:has(input:checked) {
    border-color: var(--bh-navy);
    background: var(--bh-surface-2);
}

.bh-training__form :is(input[type="checkbox"], input[type="radio"]) {
    width: 20px;
    height: 20px;
    accent-color: var(--bh-navy);
}

.bh-training__notice {
    padding: var(--bh-space-4);
    background: var(--bh-surface-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__notice p {
    margin: 0;
}

.bh-training__notice .bh-training__notice-title {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-black);
}

.bh-training__tick {
    display: flex;
    gap: var(--bh-space-3);
    align-items: flex-start;
    font-weight: var(--bh-weight-semibold);
}

.bh-training__submit {
    margin: 0;
}

.bh-training__submit .bh-btn {
    width: 100%;
}

/* ---- About the academy, on navy --------------------------------------------------------------- */

.bh-training__about {
    display: grid;
    gap: var(--bh-space-8);
}

.bh-training__about .bh-training__h2 {
    color: var(--bh-white) !important;
}

.bh-training__photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-training__photos li:first-child {
    grid-column: 1 / -1;
}

.bh-training__photos img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.bh-training__photos li:first-child img {
    aspect-ratio: 16 / 9;
}

.bh-training__about-grid {
    display: grid;
    gap: var(--bh-space-8);
    margin-top: var(--bh-space-12);
}

.bh-training__about-grid .bh-training__h3,
.bh-training__trainers .bh-training__h3,
.bh-training__creds .bh-training__h3 {
    color: var(--bh-yellow) !important;
    text-transform: uppercase;
}

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

.bh-training__certified li {
    padding-left: var(--bh-space-4);
    border-left: 3px solid var(--bh-blue);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__certified strong {
    color: var(--bh-white);
    font-weight: var(--bh-weight-black);
}

.bh-training__facilities p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__facilities p + p {
    margin-top: var(--bh-space-3);
}

.bh-training__trainers,
.bh-training__creds {
    margin-top: var(--bh-space-12);
}

.bh-training__trainers ul,
.bh-training__creds ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-training__trainer img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin-bottom: var(--bh-space-2);
}

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

.bh-training__trainer .bh-training__trainer-name {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-black);
}

.bh-training__trainer-quals {
    color: var(--bh-yellow);
}

.bh-training__creds li {
    display: flex;
    gap: var(--bh-space-3);
    align-items: center;
    padding: var(--bh-space-3);
    background: var(--bh-white);
    color: var(--bh-navy);
}

.bh-training__creds img {
    width: 56px;
    height: auto;
}

.bh-training__creds a {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
}

/* ---- Ask about a course, and the closing call to action -------------------------------------- */

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

.bh-training__cta {
    padding: var(--bh-space-12) 0;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    text-align: center;
}

.bh-training__cta .bh-training__h2 {
    color: var(--bh-white) !important;
}

.bh-training__cta .bh-training__actions {
    justify-content: center;
}

/* ---- A course's own page ----------------------------------------------------------------------- */

.bh-training__coursehead {
    padding: 130px 0 var(--bh-space-8);
    border-bottom: 6px solid var(--bh-blue);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-training__coursehead .container {
    display: grid;
    gap: var(--bh-space-4);
}

.bh-training__back {
    margin: 0;
}

.bh-training__back a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-underline-offset: 4px;
}

.bh-training__course-title {
    max-width: 22ch;
    margin: 0;
    color: var(--bh-white) !important;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
}

.bh-training__course-lede {
    max-width: 44rem;
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-training__facts--course {
    gap: var(--bh-space-2);
    font-size: var(--bh-text-sm);
}

.bh-training__facts--course dt {
    color: var(--bh-yellow);
}

.bh-training__coursebody {
    display: grid;
    gap: var(--bh-space-8);
    padding-top: var(--bh-space-8);
    padding-bottom: var(--bh-space-12);
}

.bh-training__course-main .bh-training__h3 {
    margin-top: var(--bh-space-8);
}

.bh-training__course-figure {
    margin: 0;
}

.bh-training__course-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bh-radius-md);
}

.bh-training__course-side {
    display: grid;
    gap: var(--bh-space-6);
    align-content: start;
}

.bh-training__course-dates p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---- First aid as the lead offer and the two journeys (comment 11929930) ---------------------- */

.bh-training__schools-photo {
    margin: 0;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
}

.bh-training__schools-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.bh-training__feature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3) var(--bh-space-5);
    align-items: center;
    margin-top: var(--bh-space-2) !important;
}

.bh-training__feature-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-white);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.bh-training__feature-link:hover,
.bh-training__feature-link:focus {
    color: var(--bh-yellow);
}

/* FAR for schools and workplaces: the second lead offer, navy on Ballyhass Blue. */
.bh-training__feature--blue {
    border-top-color: var(--bh-navy);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
}

.bh-training .bh-training__feature--blue .bh-training__feature-title {
    color: var(--bh-navy) !important;
}

.bh-training__feature--blue .bh-training__feature-kicker {
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

.bh-training__ticks--on-blue {
    margin: 0;
}

.bh-training__ticks--on-blue li::before {
    background: var(--bh-navy);
}

.bh-training__feature--blue .bh-training__feature-link {
    color: var(--bh-navy);
    text-decoration-color: var(--bh-navy);
}

.bh-training__feature--blue .bh-training__feature-link:hover,
.bh-training__feature--blue .bh-training__feature-link:focus {
    color: var(--bh-navy);
    text-decoration-thickness: 4px;
}

/* A pointer to the other journey, named as such: never an equal second choice. */
.bh-training__crosslink {
    margin: 0;
    font-weight: var(--bh-weight-semibold);
    line-height: var(--bh-leading-body);
}

.bh-training__crosslink a {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--bh-blue);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.bh-training__crosslink a:hover,
.bh-training__crosslink a:focus {
    color: var(--bh-blue-text);
}

.bh-training__panel .bh-training__crosslink {
    font-size: var(--bh-text-xs);
}

/* Who a course card is for: one of the two journeys, or both. */
.bh-training__card-journey {
    margin: 0;
    color: var(--bh-blue-text);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* First Aid leads the routes: the full width, with a second way in to the group offer. */
.bh-training__route-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bh-space-5);
}

.bh-training__route--lead .bh-training__route-title {
    font-size: var(--bh-text-xl);
}

@media (min-width: 768px) {
    /* Two columns under the lead, so the other two routes fill the row rather than leave a gap. */
    .bh-training__routes:has(> .bh-training__route--lead) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-training__route--lead {
        grid-column: 1 / -1;
    }

    .bh-training__route--lead:not(.bh-training__route--plain) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bh-training__route--lead .bh-training__route-img {
        height: 100%;
    }

    .bh-training__route--lead .bh-training__route-body {
        align-content: center;
        padding: var(--bh-space-8);
    }
}

@media (max-width: 575.98px) {
    .bh-training__feature-actions .bh-btn {
        flex: 1 1 100%;
    }
}

/* ---- Wider screens ---------------------------------------------------------------------------- */

@media (min-width: 576px) {
    .bh-training__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-training__date {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        align-items: center;
    }

    .bh-training__date-book {
        grid-column: auto;
        width: auto;
    }

    .bh-training__submit .bh-btn {
        width: auto;
    }
}

@media (min-width: 768px) {
    .bh-training__courses,
    .bh-training__routes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-training__about-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-training__trainers ul,
    .bh-training__creds ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-training__logo img {
        width: 300px;
    }
}

@media (min-width: 992px) {
    .bh-training__section {
        padding: var(--bh-space-16) 0;
    }

    .bh-training__hero-inner {
        padding-top: 150px;
        padding-bottom: var(--bh-space-12);
    }

    /* The standard photograph is a wide banner: shown whole as a band under the words. */
    .bh-training__hero-photo {
        aspect-ratio: 1920 / 574;
        max-height: 460px;
    }

    .bh-training__courses,
    .bh-training__routes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bh-training__schools {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .bh-training__about {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }

    .bh-training__coursebody {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 575.98px) {
    /* Jump links scroll sideways rather than wrapping into a wall of pills. */
    .bh-training__jump ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-left: var(--bh-space-1);
    }

    .bh-training__actions .bh-btn,
    .bh-training__contact-actions .bh-btn,
    .bh-training__state-actions .bh-btn {
        flex: 1 1 100%;
    }

    .bh-training__title {
        font-size: 2.4rem;
    }
}

/* ===========================================================================
 * Ballyhass at Work: corporate vouchers and employee benefits
 * (template-at-work.php, inc/at-work.php, inc/at-work-content.php)
 *
 * Eoghan, comment 11929861, and his concept: a navy first screen with the
 * headline's end in yellow and a photograph on a blue offset, a yellow band of
 * three points, four experience cards, three starting points, a navy "how it
 * works", employer confidence beside illustrative card artwork, the questions,
 * and a navy enquiry with a white panel.
 *
 * Phone first, and nothing here needs a script. Pairings from tokens.css only:
 * navy on yellow (13.34:1), white and yellow on navy (15.04:1 and 13.34:1),
 * navy on white and on --bh-surface-2, --bh-blue-text for blue text on white
 * (5.01:1) and on the tint (4.55:1). Blue and yellow are fills and accents,
 * never text on white. Focus is navy on light surfaces and yellow on navy,
 * because the theme's blue ring is 2.42:1 against white.
 *
 * Its own buttons rather than another entry in the shared :is() lists above,
 * so this block can be added or removed without touching other components.
 * ======================================================================== */

.bh-at-work {
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

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

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

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


/* ---- Buttons: bold capitals, rounded square ------------------------------ */

.bh-at-work .bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: var(--bh-space-3) 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;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

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

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

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

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

.bh-at-work .bh-btn--navy:hover,
.bh-at-work .bh-btn--navy:focus,
.bh-at-work__section--navy .bh-at-work__panel .bh-btn--yellow:hover,
.bh-at-work__section--navy .bh-at-work__panel .bh-btn--yellow:focus {
    background: var(--bh-navy);
    color: var(--bh-white);
}

.bh-at-work .bh-at-work__btn-ghost {
    border-color: var(--bh-white);
    background: transparent;
    color: var(--bh-white);
}

.bh-at-work .bh-at-work__btn-ghost:hover,
.bh-at-work .bh-at-work__btn-ghost:focus {
    background: var(--bh-white);
    color: var(--bh-navy);
}

/* ---- Notes for Ballyhass, in the preview only ----------------------------- */

.bh-at-work__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-at-work .bh-at-work__confirm {
    display: block;
    max-width: 46rem;
    margin: var(--bh-space-4) 0 0;
    padding: var(--bh-space-2) 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-at-work .bh-at-work__confirm strong {
    margin-right: var(--bh-space-1);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

.bh-at-work__hero {
    padding: 128px 0 var(--bh-space-12);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-at-work__hero-grid {
    display: grid;
    gap: var(--bh-space-8);
    align-items: center;
}

.bh-at-work__hero-text {
    display: grid;
    gap: var(--bh-space-5);
    min-width: 0;
}

.bh-at-work__kicker {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: var(--bh-space-2) var(--bh-space-4);
    border: 1px solid var(--bh-yellow);
    border-radius: var(--bh-radius-pill);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.bh-at-work__title {
    max-width: 12ch;
    margin: 0;
    color: var(--bh-white) !important;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.03em;
    line-height: 1;
    text-wrap: balance;
}

.bh-at-work__highlight {
    color: var(--bh-yellow);
}

.bh-at-work__lede {
    max-width: 36rem;
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__actions {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
}

/* A tick list: the hero's points and the enquiry's. */
.bh-at-work__ticks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-at-work__ticks li {
    position: relative;
    padding-left: var(--bh-space-6);
}

.bh-at-work__ticks li::before {
    position: absolute;
    top: 0.3em;
    left: 2px;
    width: 12px;
    height: 7px;
    border-bottom: 3px solid var(--bh-yellow);
    border-left: 3px solid var(--bh-yellow);
    content: "";
    transform: rotate(-45deg);
}

.bh-at-work__hero-figure {
    position: relative;
    margin: 0 var(--bh-space-3) var(--bh-space-3) 0;
}

/* The blue offset behind the photograph, from the concept. Decoration only. */
.bh-at-work__hero-figure::before {
    position: absolute;
    inset: var(--bh-space-3) calc(-1 * var(--bh-space-3)) calc(-1 * var(--bh-space-3)) var(--bh-space-3);
    z-index: 0;
    border-radius: var(--bh-radius-md);
    background: var(--bh-blue);
    content: "";
}

.bh-at-work__hero-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

.bh-at-work__hero-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: var(--bh-space-12) var(--bh-space-5) var(--bh-space-4);
    border-radius: 0 0 var(--bh-radius-md) var(--bh-radius-md);
    background: linear-gradient(0deg, rgba(33, 39, 47, 0.92) 0%, rgba(33, 39, 47, 0.92) 40%, rgba(33, 39, 47, 0) 100%);
    color: var(--bh-white);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

/* ---- The yellow band ------------------------------------------------------- */

.bh-at-work__band {
    padding: var(--bh-space-6) 0;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

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

.bh-at-work__band-list li {
    display: grid;
    gap: var(--bh-space-1);
    padding-left: var(--bh-space-4);
    border-left: 3px solid var(--bh-navy);
}

.bh-at-work__band-list strong {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-at-work__band-list span {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

/* ---- Sections and headings ------------------------------------------------- */

.bh-at-work__section {
    padding: var(--bh-space-12) 0;
}

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

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

.bh-at-work__head {
    max-width: 46rem;
    margin-bottom: var(--bh-space-8);
}

.bh-at-work__head p {
    margin: 0 0 var(--bh-space-3);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__eyebrow {
    margin: 0 0 var(--bh-space-2) !important;
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs) !important;
    font-weight: var(--bh-weight-bold) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-at-work__section--navy .bh-at-work__eyebrow {
    color: var(--bh-yellow);
}

.bh-at-work__h2 {
    margin: 0 0 var(--bh-space-4);
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: var(--bh-leading-tight);
    text-wrap: balance;
}

.bh-at-work__small {
    max-width: 52rem;
    margin: var(--bh-space-5) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---- Reward your employees, or plan a team day ----------------------------- */

.bh-at-work__routes {
    display: grid;
    gap: var(--bh-space-4);
}

.bh-at-work__route {
    display: grid;
    gap: var(--bh-space-3);
    align-content: start;
    padding: var(--bh-space-6);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-at-work__route--here {
    border-color: var(--bh-navy);
    box-shadow: inset 0 6px 0 var(--bh-yellow);
}

.bh-at-work__route h3,
.bh-at-work__start h3,
.bh-at-work__card h3 {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

.bh-at-work__route p,
.bh-at-work__start p,
.bh-at-work__card p {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

.bh-at-work__route-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.bh-at-work__route-link::after {
    margin-left: var(--bh-space-2);
    content: "\2192";
}

.bh-at-work__route-link:hover,
.bh-at-work__route-link:focus {
    color: var(--bh-navy);
}

/* ---- Experience cards ------------------------------------------------------ */

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

.bh-at-work__card {
    overflow: hidden;
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-at-work__card-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.bh-at-work__card-body {
    display: grid;
    gap: var(--bh-space-2);
    padding: var(--bh-space-5);
}

.bh-at-work .bh-at-work__card-label,
.bh-at-work .bh-at-work__start-label {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Starting points ------------------------------------------------------- */

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

.bh-at-work__start {
    display: grid;
    gap: var(--bh-space-3);
    align-content: start;
    padding: var(--bh-space-6);
    border-top: 6px solid var(--bh-navy);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-at-work__start--vouchers {
    border-top-color: var(--bh-yellow);
}

.bh-at-work__start--campaign {
    border-top-color: var(--bh-blue);
}

/* ---- How it works ---------------------------------------------------------- */

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

.bh-at-work__step {
    display: grid;
    gap: var(--bh-space-2);
    align-content: start;
}

.bh-at-work__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--bh-space-2);
    border-radius: var(--bh-radius-full);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-black);
}

.bh-at-work__step h3 {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

.bh-at-work__step p {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__steps-note {
    max-width: 46rem;
    margin: var(--bh-space-8) 0 0;
    padding-left: var(--bh-space-4);
    border-left: 3px solid var(--bh-yellow);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    line-height: var(--bh-leading-body);
}

/* ---- Employer confidence and the illustrative card ------------------------- */

.bh-at-work__confidence {
    display: grid;
    gap: var(--bh-space-8);
    align-items: start;
}

.bh-at-work__artwork {
    position: relative;
    max-width: 30rem;
    margin: 0 var(--bh-space-3) var(--bh-space-3) 0;
}

.bh-at-work__artwork::before {
    position: absolute;
    inset: var(--bh-space-3) calc(-1 * var(--bh-space-3)) calc(-1 * var(--bh-space-3)) var(--bh-space-3);
    border-radius: var(--bh-radius-md);
    background: var(--bh-blue);
    content: "";
}

.bh-at-work__artwork-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--bh-space-4);
    aspect-ratio: 8 / 5;
    padding: var(--bh-space-5);
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

/* The arc from the concept, a darker yellow drawn in navy at low strength. */
.bh-at-work__artwork-card::before {
    position: absolute;
    right: -18%;
    bottom: -55%;
    width: 75%;
    aspect-ratio: 1;
    border: 28px solid color-mix(in srgb, var(--bh-navy) 9%, var(--bh-yellow));
    border-radius: var(--bh-radius-full);
    content: "";
}

.bh-at-work__artwork-card p {
    position: relative;
    margin: 0;
}

.bh-at-work__artwork-brand {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
    text-transform: uppercase;
}

.bh-at-work__artwork-tag {
    align-self: start;
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
    color: var(--bh-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-at-work__artwork-title {
    grid-column: 1 / -1;
    align-self: end;
    max-width: 11ch;
    font-size: clamp(1.625rem, 5vw, 2.5rem);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.02em;
    line-height: 1;
}

.bh-at-work__artwork-foot {
    grid-column: 1 / -1;
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

.bh-at-work__points li {
    padding-left: var(--bh-space-4);
    border-left: 3px solid var(--bh-blue);
}

.bh-at-work__points h3 {
    margin: 0 0 var(--bh-space-1);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-black);
    line-height: 1.2;
}

.bh-at-work__points p {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__important {
    margin: var(--bh-space-6) 0 0;
    padding: var(--bh-space-4);
    border-left: 4px solid var(--bh-navy);
    background: var(--bh-surface-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---- Questions --------------------------------------------------------------- */

.bh-at-work__faq-layout .bh-at-work__head .bh-btn {
    margin-top: var(--bh-space-2);
}

/* ---- The enquiry ------------------------------------------------------------- */

.bh-at-work__enquiry-grid {
    display: grid;
    gap: var(--bh-space-8);
    align-items: start;
}

.bh-at-work__enquiry-text {
    display: grid;
    gap: var(--bh-space-4);
}

.bh-at-work__enquiry-text .bh-at-work__h2 {
    margin: 0;
}

.bh-at-work__enquiry-intro {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__panel {
    display: grid;
    gap: var(--bh-space-4);
    min-width: 0;
    padding: var(--bh-space-6) var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-at-work__panel p {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__panel-title {
    margin: 0;
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    letter-spacing: -0.01em;
}

.bh-at-work__asks {
    margin: 0;
    padding-left: var(--bh-space-5);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__panel .bh-at-work__panel-actions {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
}

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

.bh-at-work__panel-email a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-bold);
    overflow-wrap: anywhere;
}

/* The form preview: disabled, inside no form, so nothing can be typed or sent. */
.bh-at-work__form-preview {
    display: grid;
    gap: var(--bh-space-4);
    padding-top: var(--bh-space-4);
    border-top: 1px solid var(--bh-line);
}

.bh-at-work .bh-at-work__form-preview .bh-at-work__confirm {
    margin: 0;
}

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

.bh-at-work__form-legend {
    margin: 0 0 var(--bh-space-2);
    padding: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-black);
    text-transform: uppercase;
}

.bh-at-work__pair {
    display: grid;
    gap: var(--bh-space-4);
}

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

/* Not the choice pills, which are labels too and keep their own padding and size. */
.bh-at-work__field > label:not(.bh-at-work__choice),
.bh-at-work__field legend {
    margin: 0;
    padding: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-at-work__optional,
.bh-at-work__hint {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-at-work__form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
    width: 100%;
    min-height: 48px;
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px solid var(--bh-muted);
    border-radius: 6px;
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    font: inherit;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

.bh-at-work__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
}

.bh-at-work__choices legend {
    float: left;
    width: 100%;
    margin-bottom: var(--bh-space-2);
}

.bh-at-work__choice {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: var(--bh-target-comfortable);
    margin: 0;
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-pill);
    background: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-at-work__choice:has(input:checked) {
    border-color: var(--bh-navy);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
}

.bh-at-work__form :is(input[type="radio"], input[type="checkbox"]) {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--bh-navy);
}

.bh-at-work__notice {
    padding: var(--bh-space-4);
    border-left: 4px solid var(--bh-navy);
    background: var(--bh-surface-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work__notice h4 {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-at-work__panel .bh-at-work__notice p {
    font-size: var(--bh-text-xs);
}

.bh-at-work__tick {
    display: flex;
    align-items: flex-start;
    gap: var(--bh-space-3);
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    line-height: var(--bh-leading-body);
}

.bh-at-work__submit .bh-btn {
    width: 100%;
}

/* Disabled controls: plainly inert, and still readable (navy text, not grey). */
.bh-at-work__form:disabled :is(input, textarea, button, label) {
    cursor: not-allowed;
}

.bh-at-work__form:disabled .bh-btn {
    opacity: 0.6;
}

/* ---- The link from other pages ([ballyhass_at_work_link]) -------------------- */

.bh-at-work-link {
    display: grid;
    gap: var(--bh-space-2);
    max-width: 46rem;
    margin: var(--bh-space-8) auto;
    padding: var(--bh-space-5) var(--bh-space-6);
    border-left: 6px solid var(--bh-yellow);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
    text-align: left;
}

.bh-at-work-link p {
    margin: 0;
    color: inherit;
}

.bh-at-work-link .bh-at-work-link__kicker {
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-at-work-link .bh-at-work-link__line {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-at-work-link .bh-at-work-link__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: var(--bh-target-comfortable);
    margin-top: var(--bh-space-2);
    padding: var(--bh-space-2) var(--bh-space-5);
    border-radius: 6px;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-at-work-link .bh-at-work-link__action:hover,
.bh-at-work-link .bh-at-work-link__action:focus {
    background: var(--bh-white);
    color: var(--bh-navy);
}

.bh-at-work-link .bh-at-work-link__action:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* ---- Wider screens ------------------------------------------------------------- */

@media (min-width: 576px) {
    .bh-at-work__actions,
    .bh-at-work__panel .bh-at-work__panel-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bh-at-work__cards,
    .bh-at-work__steps,
    .bh-at-work__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .bh-at-work__section {
        padding: var(--bh-space-16) 0;
    }

    .bh-at-work__band-list,
    .bh-at-work__starts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bh-at-work__routes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-at-work__panel {
        padding: var(--bh-space-8);
    }
}

@media (min-width: 992px) {
    .bh-at-work__hero {
        padding: 150px 0 var(--bh-space-16);
    }

    .bh-at-work__hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--bh-space-12);
    }

    .bh-at-work__cards,
    .bh-at-work__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-at-work__confidence {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: var(--bh-space-12);
        align-items: center;
    }

    .bh-at-work__confidence--text {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-at-work__faq-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: var(--bh-space-12);
        align-items: start;
    }

    .bh-at-work__faq-layout .bh-at-work__head {
        margin-bottom: 0;
    }

    .bh-at-work__enquiry-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--bh-space-12);
    }
}

/* ===========================================================================
 * Ballyhass Business additions and How Ballyhass Works
 * (template-at-work.php, template-how-it-works.php, inc/at-work.php,
 * inc/how-it-works.php)
 *
 * Eoghan, comments 11931577 and 11931699, 3 November 2026: the Business page
 * leads with two journeys, company experiences as photo cards whose enquiry
 * buttons open the Groups enquiry, and full-site hire as a wide band on a
 * photograph of the site. How Ballyhass Works is an overview film in the
 * first screen and four walkthroughs, each a phone-width film beside what it
 * shows. Both pages use the Business page's own buttons and sections above.
 *
 * Tokens only. Text never sits on a photograph: the hire band's words are on a
 * solid navy panel. Pairings: white and yellow on navy, navy on yellow and on
 * white, --bh-blue-text for blue text on white. The film's play button is
 * yellow with navy text (13.34:1). Focus is the site's one ring, navy with a
 * white halo (refinements.css section 6), so nothing here draws its own.
 * ======================================================================== */

.bh-biz__more {
    margin: var(--bh-space-6) 0 0;
}

.bh-biz__journey {
    border-top: 6px solid var(--bh-yellow);
    background: var(--bh-surface-2);
}

.bh-biz__journey .bh-at-work__head {
    margin-bottom: 0;
}

.bh-biz__journey + .bh-biz__after-journey {
    padding-top: var(--bh-space-8);
}

/* ---- Full-site hire: a navy panel on a photograph of the site ----------------- */

.bh-biz__hire {
    position: relative;
    overflow: hidden;
    padding: var(--bh-space-12) 0;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-biz__hire-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-biz__hire-inner {
    position: relative;
    z-index: 1;
}

.bh-biz__hire-panel {
    display: grid;
    gap: var(--bh-space-4);
    max-width: 40rem;
    padding: var(--bh-space-8) var(--bh-space-6);
    border-left: 6px solid var(--bh-yellow);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-biz__hire-panel p {
    margin: 0;
    color: inherit;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-biz__hire-panel .bh-at-work__eyebrow {
    color: var(--bh-yellow);
}

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

/* ---- The film on the Business page -------------------------------------------- */

.bh-biz__film-inner {
    max-width: 52rem;
}

/* ---- How Ballyhass Works link, and the company line beside the enquiry -------- */

.bh-biz__how {
    border-top: 1px solid var(--bh-line);
}

.bh-biz__how-inner {
    display: grid;
    gap: var(--bh-space-6);
    align-items: center;
}

.bh-biz__how-inner p {
    margin: 0;
    max-width: 46rem;
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-biz__how-inner .bh-at-work__h2 {
    margin-bottom: var(--bh-space-3);
}

.bh-at-work .bh-biz__enquiry-company {
    margin: var(--bh-space-6) 0 var(--bh-space-3);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---- Ballyhass Business on the Groups page and hub (ballyhass_business_feature_html) ---- */

/* On the stored Groups page body the slot has no container, so it keeps the phone gutter itself. */
.bh-biz-slot {
    padding: 0 var(--bh-space-4);
}

.bh-biz-slot:empty {
    display: none;
}

.bh-biz-feature {
    display: grid;
    overflow: hidden;
    max-width: 72rem;
    margin: var(--bh-space-8) auto;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
    text-align: left;
}

/* In the Groups hub it lines up with the hub's other features, the Padel event below it. */
.bh-groups .bh-biz-feature {
    max-width: none;
    margin: var(--bh-space-8) 0;
}

.bh-biz-feature__photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.bh-biz-feature__body {
    display: grid;
    gap: var(--bh-space-3);
    align-content: center;
    padding: var(--bh-space-8) var(--bh-space-6);
}

.bh-biz-feature p {
    margin: 0;
    color: inherit;
}

.bh-biz-feature .bh-biz-feature__kicker {
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-biz-feature .bh-biz-feature__title {
    margin: 0;
    color: var(--bh-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
}

.bh-biz-feature .bh-biz-feature__line {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

.bh-biz-feature .bh-biz-feature__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--bh-space-2) var(--bh-space-5);
    border: 2px solid var(--bh-white);
    border-radius: 6px;
    background: transparent;
    color: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-biz-feature .bh-biz-feature__btn--yellow {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-biz-feature .bh-biz-feature__btn:hover,
.bh-biz-feature .bh-biz-feature__btn:focus {
    border-color: var(--bh-white);
    background: var(--bh-white);
    color: var(--bh-navy);
}

.bh-biz-feature .bh-biz-feature__how a {
    color: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Film slots (ballyhass_video_facade_html) ------------------------------------- */

.bh-video {
    margin: 0;
}

.bh-video__frame {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-video--phone {
    max-width: 320px;
    margin-inline: auto;
}

.bh-video--phone .bh-video__frame {
    aspect-ratio: 9 / 16;
    border: 6px solid var(--bh-navy);
    border-radius: 28px;
}

.bh-video__frame img,
.bh-video__still {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.bh-video__player {
    object-fit: contain;
}

.bh-video__button {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: 48px;
    padding: var(--bh-space-2) var(--bh-space-5);
    border-radius: 6px;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.05em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

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

.bh-at-work .bh-video__title {
    margin: var(--bh-space-2) 0 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-video__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--bh-space-6);
    border: 2px dashed var(--bh-yellow);
    border-radius: inherit;
    color: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-align: center;
}

.bh-at-work .bh-video__soon {
    margin: var(--bh-space-2) 0 0;
    padding: var(--bh-space-2) var(--bh-space-3);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

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

/* ---- How Ballyhass Works -------------------------------------------------------- */

.bh-hbw__jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-hbw__jump a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-4);
    border: 1px solid var(--bh-yellow);
    border-radius: var(--bh-radius-pill);
    color: var(--bh-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: none;
}

.bh-hbw__jump a:hover,
.bh-hbw__jump a:focus {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-hbw__overview {
    display: grid;
    gap: var(--bh-space-3);
    min-width: 0;
}

.bh-hbw .bh-hbw__overview-text {
    margin: 0;
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-hbw__overview .bh-video__title {
    color: var(--bh-on-navy);
}

.bh-hbw__walk-grid {
    display: grid;
    gap: var(--bh-space-8);
    align-items: center;
}

.bh-hbw__words {
    display: grid;
    gap: var(--bh-space-3);
    min-width: 0;
}

.bh-hbw__words p {
    margin: 0;
}

.bh-hbw .bh-hbw__intro {
    max-width: 40rem;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-hbw__points {
    display: grid;
    gap: var(--bh-space-3);
    max-width: 40rem;
    margin: var(--bh-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.bh-hbw__points li {
    position: relative;
    padding-left: var(--bh-space-8);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-hbw__points li::before {
    position: absolute;
    top: 0.15em;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--bh-radius-full);
    background: var(--bh-yellow);
    content: "";
}

.bh-hbw__points li::after {
    position: absolute;
    top: 0.5em;
    left: 0.35rem;
    width: 9px;
    height: 5px;
    border-bottom: 2px solid var(--bh-navy);
    border-left: 2px solid var(--bh-navy);
    content: "";
    transform: rotate(-45deg);
}

.bh-hbw__action {
    margin-top: var(--bh-space-3);
}

.bh-at-work .bh-hbw__films-note {
    margin: 0;
    padding: var(--bh-space-4);
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    text-align: center;
}

.bh-hbw__closing .bh-at-work__actions {
    margin: var(--bh-space-6) 0 0;
}

@media (min-width: 768px) {
    .bh-biz__hire {
        padding: var(--bh-space-16) 0;
    }

    .bh-biz__hire-panel {
        padding: var(--bh-space-12) var(--bh-space-8);
    }

    .bh-biz-feature {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .bh-biz-feature__body {
        padding: var(--bh-space-12) var(--bh-space-8);
    }

    .bh-biz__how-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bh-hbw__walk-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--bh-space-12);
    }

    .bh-hbw__walk--flip .bh-hbw__film {
        order: 2;
    }

    .bh-hbw__walk--text .bh-hbw__walk-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 992px) {
    .bh-hbw .bh-hbw__hero-grid--text {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
 * Prices (/pricing/, /pricing-detailed/)
 *
 * The price page, read from the booking system (inc/price-page.php). One list
 * per venue, a row per experience: its name and from price, the price of each
 * ticket with its type said in words, and one action. Rows that cannot be
 * priced online are quieter and say "See dates and prices". Tokens only.
 * ------------------------------------------------------------------------ */

.bh-prices {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--bh-space-8) var(--bh-space-4) var(--bh-space-12);
    font-family: var(--bh-font);
    font-weight: var(--bh-weight-medium);
    color: var(--bh-on-white);
}

.bh-prices__intro {
    max-width: 46rem;
    margin: 0 0 var(--bh-space-8);
    font-size: var(--bh-text-sm);
    line-height: var(--bh-leading-body);
}

.bh-prices__venue {
    margin: 0 0 var(--bh-space-12);
}

.bh-prices__venue-name {
    margin: 0 0 var(--bh-space-4);
    padding-bottom: var(--bh-space-2);
    border-bottom: 4px solid var(--bh-blue);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
    text-transform: uppercase;
}

.bh-prices__subhead {
    margin: var(--bh-space-8) 0 var(--bh-space-3);
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.bh-prices__item {
    display: grid;
    gap: var(--bh-space-2) var(--bh-space-6);
    margin: 0;
    padding: var(--bh-space-4);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-prices__item--unpriced {
    background: var(--bh-surface-2);
}

.bh-prices__name {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
}

.bh-prices__from {
    margin: var(--bh-space-1) 0 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-prices__note,
.bh-prices__status,
.bh-prices__day,
.bh-prices__pass,
.bh-prices__unavailable {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    line-height: var(--bh-leading-body);
}

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

.bh-prices__band {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bh-space-1) var(--bh-space-3);
    margin: 0;
    font-size: var(--bh-text-sm);
}

.bh-prices__amount {
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-black);
}

.bh-prices__type {
    padding: 0 var(--bh-space-2);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-surface-2);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-prices__type--off-peak,
.bh-prices__type--promotion {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

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

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

.bh-prices__item .bh-prices__action {
    margin: 0;
}

.bh-prices__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-5);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-prices__cta--quiet {
    border: 2px solid var(--bh-navy);
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-prices__cta:hover,
.bh-prices__cta:focus {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    text-decoration: none;
}

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

@media (min-width: 768px) {
    .bh-prices {
        padding-top: var(--bh-space-12);
    }

    .bh-prices__item {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
        align-items: center;
    }

    .bh-prices__item--unpriced {
        grid-template-columns: minmax(0, 2fr) auto;
    }
}

.bh-prices__detail {
    min-width: 0;
}

/* The Adventure Pass price of a ticket and the longer lengths (comment 11930453, points 2 and 3). */
.bh-prices__type--pass {
    background: var(--bh-white);
    border: 1px solid var(--bh-blue-text);
    color: var(--bh-blue-text);           /* on white, 5.01:1 */
}

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

/* Cards and rows: "for 60 minutes" beside the from price, the pass price, the way on. */
.bh-card__price-for,
.bh-row__price-for {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
}

.bh-row__member {
    margin: 0;
    color: var(--bh-blue-text);           /* on white, 5.01:1 */
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-row__link {
    color: var(--bh-navy);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-row__link:hover,
.bh-row__link:focus {
    color: var(--bh-blue-text);
}

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

/* ---------------------------------------------------------------------------
 * One live price inside a sentence ([ballyhass_price], inc/live-price.php)
 *
 * The figure takes the colour and size of the words around it. Where the booking
 * system holds no price the phrase "see dates and prices" is a link to where that
 * experience is booked, underlined so it reads as one without a colour of its own.
 * ------------------------------------------------------------------------ */

.bh-live-price {
    font-weight: inherit;
    color: inherit;
}

a.bh-live-price--none {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ---- Explore views (inc/explore.php: Explore by Activity, Explore by Location) ------------------------------ */

.bh-explore__section {
    margin: 0 0 var(--bh-space-8);
}

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

.bh-explore__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ===========================================================================
 * What's On (inc/whats-on.php; Eoghan, comment 11930447, point 11)
 *
 * The filter, three sections and the "coming back" list. Cards in a grid that
 * steps from one column to three; everyday activities as one compact line each,
 * so a hundred Aquapark sessions never become a hundred cards.
 * ------------------------------------------------------------------------ */

.bh-wo {
    display: grid;
    gap: var(--bh-space-8);
    margin: 0 0 var(--bh-space-12);
}

.bh-wo-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--bh-space-3) var(--bh-space-4);
    align-items: end;
    padding: var(--bh-space-4);
    border-radius: var(--bh-radius-md);
    background: var(--bh-surface-2);
}

.bh-wo-filter__field {
    display: grid;
    gap: var(--bh-space-1);
}

.bh-wo-filter__field label {
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-wo-filter__field select {
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-3);
    border: 1px solid var(--bh-muted);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-navy);
    font: inherit;
    font-size: var(--bh-text-sm);
}

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

.bh-wo-filter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-4);
    align-items: center;
}

.bh-wo-filter__actions .bh-card__cta {
    margin-top: 0;
    border: 0;
    cursor: pointer;
}

.bh-wo-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-wo-jump a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-min);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

.bh-wo-jump__count {
    margin-left: 0.25em;
    color: var(--bh-on-white);
    font-weight: var(--bh-weight-medium);
}

.bh-wo-results {
    display: grid;
    gap: var(--bh-space-12);
}

.bh-wo-section {
    scroll-margin-top: 120px;   /* clear of the sticky header, as #two-euro-adventures */
}

.bh-wo-section__title {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-navy);
}

.bh-wo-section__intro,
.bh-wo-section__empty,
.bh-wo-section__more,
.bh-wo-note {
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
}

.bh-wo-section__empty {
    padding: var(--bh-space-4);
    border: 1px dashed var(--bh-line);
    border-radius: var(--bh-radius-sm);
}

.bh-wo-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bh-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

@media (min-width: 1024px) {
    .bh-wo-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bh-wo-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-sm);
}

.bh-wo-card__media {
    aspect-ratio: 16 / 9;
    background: var(--bh-navy);
}

.bh-wo-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-wo-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--bh-space-2);
    padding: var(--bh-space-4);
}

.bh-wo-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-1) var(--bh-space-3);
    margin: 0;
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-wo-card__title {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-lg);
    line-height: var(--bh-leading-tight);
}

/* The brand's highlight: a navy block with yellow text and square corners. */
.bh-wo-card__badge {
    align-self: flex-start;
    margin: 0;
    padding: 2px var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-wo-card__label {
    margin: var(--bh-space-1) 0 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-wo-card__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-1) var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-wo-card__date {
    padding: 2px var(--bh-space-2);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-sm);
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

/* Sold out is said in words and struck through, never told by colour alone. */
.bh-wo-card__date--sold_out time {
    text-decoration: line-through;
}

.bh-wo-card__state {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-wo-card__more,
.bh-wo-card__price {
    margin: 0;
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
}

.bh-wo-card__price {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
}

.bh-wo-card .bh-card__cta {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}

.bh-wo-rows,
.bh-wo-returning {
    margin: 0 0 var(--bh-space-4);
    padding: 0;
    list-style: none;
}

.bh-wo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bh-space-1) var(--bh-space-4);
    align-items: center;
    padding: var(--bh-space-3) 0;
    border-bottom: 1px solid var(--bh-line);
}

.bh-wo-row:first-child,
.bh-wo-returning__item:first-child {
    border-top: 1px solid var(--bh-line);
}

.bh-wo-row__name {
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
}

.bh-wo-row__venue,
.bh-wo-row__next {
    grid-column: 1;
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
}

.bh-wo-row .bh-card__cta {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
}

@media (min-width: 768px) {
    .bh-wo-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .bh-wo-row__venue,
    .bh-wo-row__next {
        grid-column: auto;
    }

    .bh-wo-row .bh-card__cta {
        grid-column: auto;
        grid-row: auto;
    }
}

.bh-wo-returning__item {
    display: grid;
    gap: 2px;
    padding: var(--bh-space-3) 0;
    border-bottom: 1px solid var(--bh-line);
}

.bh-wo-returning__name {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

/* No page given in Admin: the name is not a link, so it must not look like one. */
span.bh-wo-returning__name {
    color: var(--bh-navy);
    text-decoration: none;
}

.bh-wo-returning__type {
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-wo-returning__line {
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
}

.bh-wo-returning__name:focus-visible,
.bh-wo-jump a:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* ---- The Adventure Pass weekly offer, each venue live (Adventure Pass page) ---- */

.bh-two-euro {
    display: grid;
    gap: var(--bh-space-3);
    margin-top: var(--bh-space-4);
}

.bh-two-euro__venue {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-3);
    align-items: center;
    margin: 0;
}

/* What's On links to the offer's section; land it clear of the sticky header. */
#two-euro-adventures {
    scroll-margin-top: 120px;
}

/* ---- What's On feature: the next few items on another page ([ballyhass_whats_on_feature]) ----
 * The What's On cards and grid, with a heading and the link to the full page. It prints nothing
 * when nothing is on sale, so there is no empty state to style. A div, not a section: main.min.css
 * gives every section a 100px bottom margin. Spaced with padding, not margin: a page may add its
 * own width class (class="bh-wellness-shell" on Wellness), and that one sets margin: 0 auto. */

.bh-wo-feature {
    padding: var(--bh-space-12) 0;
}

.bh-wo-feature__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-5);
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 var(--bh-space-4);
}

.bh-wo-feature__title {
    margin: 0;
    color: var(--bh-navy);
}

.bh-wo-feature__all {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-min);
}

/* The feature under the wakepark's "Find the Right Session" table (/activities/wakeboarding/,
 * artifacts/migration/fix-leftovers-1030.php). That section is a near-black navy gradient, where
 * the navy heading and the blue link could not be read. White and yellow are each over 13:1
 * there. The cards keep their own white panels. */
.wakepark-finder .bh-wo-feature__title {
    color: var(--bh-white);
}

.wakepark-finder .bh-wo-feature__all {
    color: var(--bh-yellow);
}

/* The feature's layout follows its count (ballyhass_whats_on_feature_layout(); Eoghan, 30 October
 * 2026, comment 11931159, point 3: "A wider featured card or more compact section would work
 * better than leaving a large empty area"). One card takes the row with its photograph beside
 * the dates; two share the row; three or more keep the grid, and on a phone become compact
 * cards with the photograph to one side, so six events are not six screens of photographs. */

@media (min-width: 768px) {
    .bh-wo-feature--one .bh-wo-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-wo-feature--one .bh-wo-card {
        flex-direction: row;
    }

    .bh-wo-feature--one .bh-wo-card__media {
        position: relative;
        flex: 0 0 48%;
        min-height: 280px;
        aspect-ratio: auto;
    }

    /* The card is as tall as its dates, not as its photograph. */
    .bh-wo-feature--one .bh-wo-card__media img {
        position: absolute;
        inset: 0;
    }

    .bh-wo-feature--one .bh-wo-card__body {
        padding: var(--bh-space-6) var(--bh-space-8);
    }

    .bh-wo-feature--one .bh-wo-card .bh-card__cta {
        align-self: flex-start;
        min-width: 14rem;
    }
}

@media (min-width: 1024px) {
    .bh-wo-feature--two .bh-wo-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .bh-wo-feature--two .bh-wo-card {
        flex-direction: row;
    }

    .bh-wo-feature--two .bh-wo-card__media {
        flex: 0 0 42%;
        aspect-ratio: auto;
    }
}

@media (max-width: 639.98px) {
    .bh-wo-feature--many .bh-wo-cards {
        gap: var(--bh-space-3);
    }

    .bh-wo-feature--many .bh-wo-card {
        flex-direction: row;
    }

    .bh-wo-feature--many .bh-wo-card__media {
        flex: 0 0 6.5rem;
        aspect-ratio: auto;
    }

    .bh-wo-feature--many .bh-wo-card__body {
        min-width: 0;
        padding: var(--bh-space-3);
    }

    .bh-wo-feature--many .bh-wo-card__title {
        font-size: var(--bh-text-md);
    }
}

/* ---- Calculators (inc/calculators.php) ------------------------------------------------------------------
 * An Adventure Pass calculator item with no live saving cannot be added: its steppers are disabled,
 * and they look it, so the visitor is not left pressing a button that does nothing.
 * ------------------------------------------------------------------------------------------------------ */

.bh-ap-stepper:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* A live figure in a heading, a strong or a price slot takes that element's type, as the live price
 * section above intends. The pages' recovered legacy rules style every span inside their cards as a
 * small label or a "/month" suffix (.bh-ap-summary-box span, .bh-membership-card h3 span,
 * .bh-wake-fact span, .bh-price-main span, .bh-membership-price span), and the live price is a span, so on 30 October the
 * Adventure Pass cost read 12px in a 22px slot, the sauna drop-in 20px in a 62px one and the wake
 * season 11px in a 24px one. Two classes' weight, so it wins over those one-class rules. */

:is(h1, h2, h3, h4, strong, .bh-price-main, .bh-membership-price) > :is(.bh-live-price, .bh-calc-figure),
.bh-calc-figure > .bh-live-price {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* ---- Embed frame (inc/embed-facades.php) --------------------------------------------------------------------
 * A 16:9 box for a video a template prints itself: the homepage video and the mission video. The frame
 * inside starts as the facade (poster, button, the sentence about cookies) and is swapped for the player
 * when the visitor presses Play, at the same size. Embeds inside page content keep the boxes their own
 * page styles give them.
 * -------------------------------------------------------------------------------------------------------- */

.bh-embed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bh-navy);
}

.bh-embed-frame > iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The homepage's video band: the width its old placeholder had in main.min.css. */
.bh-embed-frame--wide {
    max-width: 1200px;
    margin-inline: auto;
}

/* The routes reuse the Padel page's eyebrow, whose Ballyhass Blue is a fill colour: 2.41:1 as
   text on the white section ("Play now", axe, 31 October 2026). */
.bh-padel-routes .bh-padel__eyebrow {
    color: var(--bh-blue-text);
}


/* The Cookie Policy's list of cookies (inc/cookie-table.php, comment 11931271, point 6). A table on
   a wide screen, one block per cookie on a phone, each value under its column's name. */
.bh-cookie-policy {
    max-width: 60rem;
    color: var(--bh-on-white);
}

.bh-cookie-policy h2 {
    margin: var(--bh-space-6) 0 var(--bh-space-3);
}

.bh-cookie-policy__category {
    margin: 0 0 var(--bh-space-6);
}

.bh-cookie-policy__category-title {
    margin: 0 0 var(--bh-space-2);
}

.bh-cookie-policy__unused {
    color: var(--bh-muted);
}

.bh-cookie-policy__scroll {
    overflow-x: auto;
}

/* The legacy page body gives its tables a 768px minimum width (a scrolling table on a phone): this
   one stacks instead, so it takes none. */
.bh-cookie-policy table.bh-cookie-policy__table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: var(--bh-text-sm);
}

/* Specific enough to win over the legacy body's centred, bold, padded table cells
   (main.min.css: .wysywig .col-12 table tr td). */
.bh-cookie-policy__scroll table.bh-cookie-policy__table tr :is(th, td) {
    padding: var(--bh-space-2) var(--bh-space-3);
    border: 0;
    border-bottom: 1px solid var(--bh-line);
    background: none;
    color: var(--bh-on-white);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    text-align: left;
    vertical-align: top;
}

.bh-cookie-policy__scroll table.bh-cookie-policy__table thead tr th {
    background: var(--bh-surface-2);
    font-weight: var(--bh-weight-bold);
}

.bh-cookie-policy__scroll table.bh-cookie-policy__table tbody tr th {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: var(--bh-weight-bold);
    word-break: break-word;
}

.bh-cookie-policy__settings {
    padding: var(--bh-space-2) var(--bh-space-4);
    border: 0;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 47.99rem) {
    .bh-cookie-policy__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .bh-cookie-policy__table tr,
    .bh-cookie-policy__table th,
    .bh-cookie-policy__table td {
        display: block;
    }

    .bh-cookie-policy__table tr {
        padding: var(--bh-space-2) 0;
        border-bottom: 1px solid var(--bh-line);
    }

    .bh-cookie-policy__scroll table.bh-cookie-policy__table tr :is(th, td) {
        padding: var(--bh-space-1) 0;
        border: 0;
    }

    .bh-cookie-policy__table td::before {
        content: attr(data-label) ": ";
        font-weight: var(--bh-weight-bold);
    }
}

/* ------------------------------------------------------------------ the Waivers page (1 November 2026)
 *
 * Eoghan, comment 11931275: lead with "Sign your waiver", then the booking reference box and the
 * recovery routes, the guidance underneath (page-waiver.php, inc/waiver-page.php). The band is Book
 * Now's: navy, the title as the guide's highlight (navy block, yellow text, square corners), short
 * enough that the reference box is on a phone's first screen. Cards on white with navy text.
 */
.bh-waiver-hero {
    padding: calc(70px + var(--bh-space-6)) 0 var(--bh-space-6);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
}

section.bh-waiver-hero {
    margin-bottom: 0;
}

.bh-waiver-hero__eyebrow {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-waiver-hero__title {
    display: inline-block;
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-3);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    text-transform: uppercase;
}

.bh-waiver-hero__lede {
    max-width: 36rem;
    margin: var(--bh-space-3) 0 0;
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-waiver {
    padding: var(--bh-space-6) 0 var(--bh-space-12);
    font-family: var(--bh-font);
    color: var(--bh-on-white);
}

.bh-waiver section {
    margin: 0;
}

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

.bh-waiver__card {
    padding: var(--bh-space-5);
    border: 1px solid var(--bh-line);
    border-radius: 6px;
    background: var(--bh-white);
}

.bh-waiver__card p {
    margin: 0 0 var(--bh-space-3);
    font-weight: var(--bh-weight-medium);
}

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

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

.bh-waiver__card--find {
    border: 0;
    border-left: 6px solid var(--bh-yellow);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-waiver__card--find .bh-waiver__title,
.bh-waiver__card--find p {
    color: var(--bh-on-navy);
}

.bh-waiver__title {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    color: var(--bh-on-white);
}

.bh-waiver__label {
    display: block;
    margin: var(--bh-space-3) 0 var(--bh-space-1);
    font-weight: var(--bh-weight-bold);
}

.bh-waiver__input {
    display: block;
    width: 100%;
    max-width: 22rem;
    min-height: 52px;
    padding: 0 var(--bh-space-3);
    border: 2px solid var(--bh-white);
    border-radius: 6px;
    background: var(--bh-white);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-waiver__card--find .bh-waiver__hint {
    margin: var(--bh-space-2) 0 var(--bh-space-4);
    font-size: var(--bh-text-2xs);
}

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

.bh-waiver__more {
    margin-top: var(--bh-space-8);
    max-width: 46rem;
}

.bh-waiver__more-title {
    margin: 0 0 var(--bh-space-3);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
}

/* The utility link, a little heavier than its neighbours (comment 11931275: "A prominent 'Sign a Waiver' entry point"). */
.nav-ecomm .nav-item--waiver .nav-link {
    font-weight: var(--bh-weight-bold);
}

@media (min-width: 768px) {
    .bh-waiver-hero {
        padding: calc(96px + var(--bh-space-6)) 0 var(--bh-space-8);
    }

    .bh-waiver-hero__title {
        font-size: var(--bh-text-2xl);
    }

    .bh-waiver__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===========================================================================
 * Weather now (template-parts/venue-weather.php, inc/venue-weather.php)
 *
 * The conditions at the activity's venue (FSD REQ-F003), under the breadcrumb
 * on activity pages. Rendered on the server, so it never moves the page as it
 * loads, and not rendered at all without a reading. The facts take the booking
 * strip's type: small uppercase muted labels over bold values. Tokens only.
 * Measured: navy on --bh-surface-2 13.63:1, --bh-muted on it 5.80:1.
 * ======================================================================== */

.bh-weather-group {
    display: grid;
    gap: var(--bh-space-3);
    margin: 0 0 var(--bh-space-8);
}

.bh-weather {
    padding: var(--bh-space-3) var(--bh-space-4);
    border-radius: var(--bh-radius-md);
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    font-family: var(--bh-font);
}

.bh-weather__title {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-navy);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-weather__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-6);
    margin: 0;
}

.bh-weather__facts dt {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-weather__facts dd {
    margin: 2px 0 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
}

.bh-weather__sub {
    display: block;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-weather__source {
    margin: var(--bh-space-2) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

/* One venue, or one of two shown by the booking strip's venue tab (data-bh-shown, set by
   assets/js/booking-strip.js): the title and source beside the facts, so the panel is one band. */
@media (min-width: 768px) {
    :is(.bh-weather-group--one, .bh-weather-group[data-bh-shown="1"]) .bh-weather {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--bh-space-8);
    }

    :is(.bh-weather-group--one, .bh-weather-group[data-bh-shown="1"]) .bh-weather__facts {
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    :is(.bh-weather-group--one, .bh-weather-group[data-bh-shown="1"]) .bh-weather__title {
        align-self: end;
    }

    :is(.bh-weather-group--one, .bh-weather-group[data-bh-shown="1"]) .bh-weather__source {
        align-self: start;
        margin-top: 0;
    }
}

/* Two venues: side by side once there is room, unless the venue tab shows one. */
@media (min-width: 992px) {
    .bh-weather-group--two:not([data-bh-shown="1"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===========================================================================
 * Skip link (accessibility assessment, 3 November 2026)
 *
 * The skip link (header.php) is the first thing a keyboard reaches on every
 * page and jumps past the menus to #bh-content, where the page's own content
 * starts (WCAG 2.4.1). It stays out of sight until it has focus. Its target
 * takes focus from the link only, so it draws no ring of its own: the next
 * Tab goes to the first control in the content. Keeping a focused control
 * clear of the fixed header and the booking bars is refinements.css
 * section 48.
 * ======================================================================== */

.bh-skip-link {
    position: absolute;
    top: 0;
    left: var(--bh-space-3);
    z-index: 2000;                           /* above the fixed header (1030) and the menu */
    padding: var(--bh-space-3) var(--bh-space-4);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-200%);
}

.bh-skip-link:focus,
.bh-skip-link:focus-visible {
    top: var(--bh-space-3);
    transform: none;
    color: var(--bh-on-yellow);
    text-decoration: none;
}

.bh-skip-target {
    display: block;
    height: 0;
    overflow: hidden;
}

.bh-skip-target:focus {
    outline: none;
}

/* Text spacing (WCAG 1.4.12). While the visitor's own letter, word or line spacing is in force
   (assets/js/text-spacing.js puts bh-user-spacing on <html>), no text is cut to a number of
   lines: a card's description, a camp card's summary and the phone booking bar's state show in
   full rather than lose the words the wider spacing pushed past their last line. */
.bh-user-spacing * {
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
}

/* ===========================================================================
 * Accessibility Statement (template-accessibility-statement.php)
 *
 * One reading column. A value Ballyhass have still to set is a pink mark
 * (navy on pink, 4.84:1); the WCAG criteria after each problem are muted
 * (6.40:1 on white).
 * ======================================================================== */

.bh-statement .bh-at-work__preview {
    margin-bottom: var(--bh-space-4);
}

.bh-statement .bh-at-work__preview p {
    margin: 0;
}

/* What is still open before publication (comment 11932022, point 9): a list in the draft note,
   read at the statement's measure rather than centred. */
.bh-statement__open {
    max-width: 46rem;
    margin: var(--bh-space-2) auto 0;
    padding-left: var(--bh-space-5);
    text-align: left;
}

.bh-statement__open li + li {
    margin-top: var(--bh-space-1);
}

.bh-statement__body {
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--bh-space-8) 0 var(--bh-space-12);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-statement__title {
    margin: 0 0 var(--bh-space-5);
    color: var(--bh-navy);
    font-size: clamp(1.875rem, 1.25rem + 3vw, var(--bh-text-3xl)); /* "Accessibility" fits 320px */
    overflow-wrap: break-word;
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-statement__body h2 {
    margin: var(--bh-space-8) 0 var(--bh-space-3);
    color: var(--bh-navy);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
}

.bh-statement__body h3 {
    margin: var(--bh-space-5) 0 var(--bh-space-2);
    color: var(--bh-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
}

.bh-statement__body p,
.bh-statement__body ul {
    margin: 0 0 var(--bh-space-4);
}

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

.bh-statement__body li + li {
    margin-top: var(--bh-space-2);
}

.bh-statement__lede {
    font-size: var(--bh-text-md);
}

.bh-statement__body a {
    color: var(--bh-blue-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.bh-statement__contact {
    list-style: none;
    padding-left: 0;
    font-weight: var(--bh-weight-semibold);
}

.bh-statement__todo {
    padding: 0 var(--bh-space-1);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
    font-weight: var(--bh-weight-semibold);
}

/* The enquiry form's Group Type, left empty (3 November 2026): the message under the field, in words,
   and the field's edge, so colour is not the only sign. Pink on white is 3.11:1, enough for an edge. */
.group-enquiry__error {
    margin: var(--bh-space-1) 0 0;
    padding-left: var(--bh-space-2);
    border-left: 4px solid var(--bh-pink);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    line-height: 1.4;
}

.group-enquiry__error[hidden] {
    display: none;
}

/* As specific as review-fixes.css's own edge for these fields, plus the state, so it wins. */
.group-enquiry__select[aria-invalid="true"],
.section--group-enquiry .group-enquiry__form .bootstrap-select > .dropdown-toggle[aria-invalid="true"] {
    border-color: var(--bh-pink);
    box-shadow: 0 0 0 1px var(--bh-pink);
}

/* ===========================================================================
 * The Parent Summer Survival Calculator's age question (inc/survival-calculator.php)
 *
 * The child's age, as the Camp Finder asks it, beside the "Mixed ages" chip, in place of the old
 * age-band chips (comment 11932009, point 8). The chip keeps the calculator's own style.
 * ======================================================================== */
.bh-camp-survival .bh-camp-survival__age {
    align-items: center;
}

/* The input goes under its label where both do not fit on one line, so its hint is never cut. */
.bh-camp-survival .bh-camp-survival__age-field {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-2);
    margin: 0;
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
}

.bh-camp-survival .bh-camp-survival__age-field input {
    width: 10rem;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-3);
    border: 1px solid var(--bh-field-edge);
    border-radius: var(--bh-radius-pill);
    background: var(--bh-white);
    color: var(--bh-navy);
    font: inherit;
    font-weight: var(--bh-weight-bold);
}

.bh-camp-survival .bh-camp-survival__age-field input:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* ===========================================================================
 * Plan Your School Trip and Plan Your Corporate Day: the website's own enquiry forms
 * (inc/quote-enquiry.php, CRM WP-13, 4 November 2026), in place of the HubSpot forms.
 *
 * They sit inside the legacy pages' own form cards, whose rules style every label, input and
 * paragraph in them (the corporate card's fields had a 1.3:1 edge). Each rule here is one class
 * more specific than those, so the form reads the same on both pages. A field's edge is
 * --bh-field-edge (4.06:1, WCAG 1.4.11); an error is said in words under the field's label, with a
 * pink edge beside it, so colour is never the only sign.
 * ======================================================================== */
.bh-quote-form {
    display: grid;
    gap: var(--bh-space-4);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    text-align: left;
}

.bh-quote-form .bh-quote-form__form {
    display: grid;
    gap: var(--bh-space-4);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bh-quote-form .bh-quote-form__pair {
    display: grid;
    gap: var(--bh-space-4);
}

@media (min-width: 640px) {
    .bh-quote-form .bh-quote-form__pair {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* Not the choice pills or the tick boxes, which are labels too and lay out their own box. */
.bh-quote-form .bh-quote-form__field > label:not(.bh-quote-form__choice, .bh-quote-form__tick),
.bh-quote-form .bh-quote-form__field > legend {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    line-height: 1.4;
}

.bh-quote-form .bh-quote-form__optional,
.bh-quote-form .bh-quote-form__hint {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-quote-form .bh-quote-form__field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea) {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px solid var(--bh-field-edge);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
    font: inherit;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    box-shadow: none;
}

.bh-quote-form .bh-quote-form__field textarea {
    min-height: 120px;
    resize: vertical;
}

.bh-quote-form .bh-quote-form__field :is(input, textarea):focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    border-color: var(--bh-navy);
}

.bh-quote-form .bh-quote-form__field :is(input, textarea)[aria-invalid="true"] {
    border-color: var(--bh-pink);
    box-shadow: 0 0 0 1px var(--bh-pink);
}

.bh-quote-form .bh-quote-form__error {
    margin: 0;
    padding-left: var(--bh-space-2);
    border-left: 4px solid var(--bh-pink);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    line-height: 1.4;
}

.bh-quote-form .bh-quote-form__error[hidden] {
    display: none;
}

.bh-quote-form .bh-quote-form__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
}

.bh-quote-form .bh-quote-form__choices > legend {
    float: left;
    width: 100%;
    margin-bottom: var(--bh-space-2);
}

.bh-quote-form .bh-quote-form__choice {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: var(--bh-target-comfortable);
    margin: 0;
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-field-edge);
    border-radius: var(--bh-radius-pill);
    background: var(--bh-white);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.3;
    cursor: pointer;
}

.bh-quote-form .bh-quote-form__choice:has(input:checked) {
    border-color: var(--bh-navy);
    background: var(--bh-blue);
    color: var(--bh-on-blue);
}

.bh-quote-form .bh-quote-form__choice:has(input:focus-visible) {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-quote-form :is(input[type="radio"], input[type="checkbox"]) {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--bh-navy);
}

.bh-quote-form .bh-quote-form__tick {
    display: flex;
    align-items: flex-start;
    gap: var(--bh-space-3);
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    line-height: var(--bh-leading-body);
    cursor: pointer;
}

.bh-quote-form .bh-quote-form__tick input {
    margin-top: 2px;
}

.bh-quote-form .bh-quote-form__tick input:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-quote-form .bh-quote-form__notice {
    padding: var(--bh-space-4);
    border-left: 4px solid var(--bh-navy);
    background: var(--bh-surface-2);
    color: var(--bh-navy);
}

.bh-quote-form .bh-quote-form__notice p,
.bh-quote-form .bh-quote-form__note,
.bh-quote-form .bh-quote-form__line,
.bh-quote-form .bh-quote-form__test,
.bh-quote-form .bh-quote-form__summary p,
.bh-quote-form .bh-quote-form__closed p,
.bh-quote-form .bh-quote-form__done p {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-quote-form .bh-quote-form__notice p + p {
    margin-top: var(--bh-space-2);
}

.bh-quote-form .bh-quote-form__notice .bh-quote-form__notice-title,
.bh-quote-form .bh-quote-form__closed .bh-quote-form__closed-title,
.bh-quote-form .bh-quote-form__done .bh-quote-form__done-title {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-quote-form .bh-quote-form__note,
.bh-quote-form .bh-quote-form__line {
    color: var(--bh-muted);
}

.bh-quote-form .bh-quote-form__line a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
}

/* The test site's notes: a navy block, yellow edge, never shown on production. */
.bh-quote-form .bh-quote-form__test {
    padding: var(--bh-space-3) var(--bh-space-4);
    border-left: 6px solid var(--bh-yellow);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-quote-form .bh-quote-form__summary,
.bh-quote-form .bh-quote-form__closed,
.bh-quote-form .bh-quote-form__done {
    display: grid;
    gap: var(--bh-space-2);
    padding: var(--bh-space-4);
    border-left: 6px solid var(--bh-pink);
    background: var(--bh-surface-2);
}

.bh-quote-form .bh-quote-form__closed,
.bh-quote-form .bh-quote-form__done {
    border-left-color: var(--bh-blue);
}

.bh-quote-form .bh-quote-form__summary ul {
    margin: 0;
    padding-left: var(--bh-space-5);
}

.bh-quote-form .bh-quote-form__summary a {
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

.bh-quote-form :is(.bh-quote-form__summary, .bh-quote-form__closed, .bh-quote-form__done):focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

.bh-quote-form .bh-quote-form__reach,
.bh-quote-form .bh-quote-form__submit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0;
}

/* Buttons per the brand guide: ALL CAPS, bold, rounded square. Navy on yellow, 13.34:1. */
.bh-quote-form .bh-quote-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-3) var(--bh-space-5);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-md);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font: inherit;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-quote-form .bh-quote-form__submit .bh-quote-form__btn {
    width: 100%;
    min-height: 52px;
}

.bh-quote-form .bh-quote-form__btn--navy {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-quote-form .bh-quote-form__btn:hover {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-quote-form .bh-quote-form__btn--navy:hover {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-quote-form .bh-quote-form__btn:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

.bh-quote-form .bh-quote-form__btn:disabled {
    cursor: wait;
}

/* The test site's preview: plainly inert, and still readable (navy text, not grey). */
.bh-quote-form .bh-quote-form__form--preview :is(input, textarea, button, label) {
    cursor: not-allowed;
}

.bh-quote-form .bh-quote-form__form--preview .bh-quote-form__btn {
    opacity: 0.6;
}

/* The newsletter and Padel updates sign-ups (inc/newsletter-signup.php, task 27702339) reuse the enquiry
   form's parts, which are written for white. On the Padel page the form sits in the card's grey panel,
   which takes the privacy link's #0B7A8E to 4.3:1, under AA, and which HubSpot's frame filled edge to
   edge; on the Padel hub it sits on the Connect chapter's purple, where navy text cannot be read. So in
   both it has a white panel of its own. The newsletter page's form card is white already. */
.bh-padel__signup-form .bh-signup,
.bh-ph-reach__item .bh-signup {
    padding: var(--bh-space-6);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
}

.bh-padel__signup-form .bh-signup {
    border-radius: inherit;
}

@media (max-width: 575.98px) {
    .bh-padel__signup-form .bh-signup,
    .bh-ph-reach__item .bh-signup {
        padding: var(--bh-space-4);
    }
}

/* ===========================================================================
 * The website's own contact form (inc/contact-form.php, Teamwork task 27702338). It is the
 * quote form's component with a list of enquiry types and the questions each type asks;
 * assets/js/contact-form.js hides the questions a type does not ask. A hidden question has to
 * stay hidden although every field here lays itself out as a grid.
 * ======================================================================== */
.bh-quote-form.bh-contact-form [hidden] {
    display: none;
}

.bh-quote-form.bh-contact-form .bh-quote-form__field select {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    border: 2px solid var(--bh-field-edge);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
    font: inherit;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

.bh-quote-form.bh-contact-form .bh-quote-form__field select:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    border-color: var(--bh-navy);
}

.bh-quote-form.bh-contact-form .bh-quote-form__field select[aria-invalid="true"] {
    border-color: var(--bh-pink);
    box-shadow: 0 0 0 1px var(--bh-pink);
}

.bh-quote-form.bh-contact-form .bh-contact-form__large {
    margin: 0;
}

/* The birthday pages' "if the form does not load" lines, once this form is the one that loaded. */
#bh-birthday-hubspot-form-safe:has(.bh-contact-form) + .bh-bp-fallback,
#bh-chaos-hubspot-form:has(.bh-contact-form) + .bh-chaos-birthday__fallback {
    display: none;
}

/* On the Contact page the form sits in the page's full-width prose, so it keeps a reading width. */
.bh-contact-embed > .bh-quote-form.bh-contact-form {
    max-width: 48rem;
}

/* Birthday Parties at Ballyhass: the page's legacy rules (assets/css/legacy, generated, never edited)
   style every label, input, select and textarea in its form box with !important, for HubSpot's form:
   13px labels, 52px fields and full-width radio buttons. While this form is in that box they are put
   back to the component's own, with !important of their own. */
.bh-bday-party-v5__form-embed .bh-contact-form .bh-quote-form__field > label:not(.bh-quote-form__choice, .bh-quote-form__tick) {
    display: block !important;
    margin: 0 !important;
    color: var(--bh-navy) !important;
    font-size: var(--bh-text-sm) !important;
    font-weight: var(--bh-weight-bold) !important;
    line-height: 1.4 !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form .bh-quote-form__choice {
    display: inline-flex !important;
    margin: 0 !important;
    color: var(--bh-navy) !important;
    font-size: var(--bh-text-xs) !important;
    font-weight: var(--bh-weight-semibold) !important;
    line-height: 1.3 !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form .bh-quote-form__choice:has(input:checked) {
    color: var(--bh-on-blue) !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form .bh-quote-form__tick {
    display: flex !important;
    margin: 0 !important;
    color: var(--bh-navy) !important;
    font-size: var(--bh-text-sm) !important;
    font-weight: var(--bh-weight-semibold) !important;
    line-height: var(--bh-leading-body) !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
    min-height: 48px !important;
    padding: var(--bh-space-3) var(--bh-space-4) !important;
    border: 2px solid var(--bh-field-edge) !important;
    border-radius: var(--bh-radius-md) !important;
    color: var(--bh-navy) !important;
    font-size: var(--bh-text-sm) !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form textarea {
    min-height: 120px !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form :is(input, select, textarea):focus-visible {
    border-color: var(--bh-navy) !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--bh-pink) !important;
    box-shadow: 0 0 0 1px var(--bh-pink) !important;
}

.bh-bday-party-v5__form-embed .bh-contact-form :is(input[type="radio"], input[type="checkbox"]) {
    width: 20px !important;
    height: 20px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}