/**
 * Page-level corrections to the designed page bodies (full-site screenshot
 * review, 24 Oct 2026).
 *
 * The designed pages bring their own style blocks (assets/css/legacy/),
 * which load after refinements.css. This file is printed after them, so its
 * rules meet theirs on equal terms. Each rule is scoped to its page's own
 * classes and says what was wrong. Sitewide corrections stay in
 * refinements.css.
 */

/* ===========================================================================
 * School tours, school planning and enquiry pages
 * ======================================================================== */

/* ===========================================================================
 * School and enquiry pages (group 1)
 *
 * /school-tours/ and /primary-schools/ share the .bh-ps-* classes,
 * /plan-your-school-trip/ and /birthday-enquiries/ share .bh-se-*. The
 * residential page also loads the Overnight Groups stylesheet, whose .bh-rs-*
 * rules leak into it, so every residential rule is scoped to
 * .bh-res-school-page and Overnight Groups is left alone.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Shared: the glass hero on every school and enquiry page
 * ------------------------------------------------------------------------- */

/* The glass panels were 10% white over the photo, so their white text sat on
   whatever the photo showed: 1.4:1 over a pale sky or wall. A navy tint
   behind the blur keeps the frosted look and holds white text at 5.6:1 even
   over pure white. */
body :is(.bh-ps-hero-panel, .bh-ps-hero-side, .bh-ss-hero-panel, .bh-ss-hero-side,
         .bh-sh-hero-panel, .bh-sh-video-card, .bh-tp-hero-panel, .bh-tp-hero-side,
         .bh-se-hero-panel, .bh-se-hero-support),
.bh-res-school-page :is(.bh-rs-hero-panel, .bh-rs-quick-card) {
    background: rgba(33, 39, 47, 0.70);
    border-color: rgba(255, 255, 255, 0.16);
}

/* Chips, pills and the ghost button inside the panels added another 10 to 14%
   white on top, which pulled white text back under 4.5:1 (4.1:1 at 14%).
   8% keeps their outline and holds the text at 4.7:1 even over pure white. */
body :is(.bh-ps-hero-points li, .bh-ss-hero-points li, .bh-sh-hero-points li,
         .bh-tp-hero-points li, .bh-se-hero-points li,
         .bh-ps-kicker:not(.bh-ps-kicker-dark), .bh-ss-kicker:not(.bh-ss-kicker-dark),
         .bh-sh-kicker:not(.bh-sh-kicker-dark), .bh-tp-kicker:not(.bh-tp-kicker-dark),
         .bh-se-kicker:not(.bh-se-kicker-dark),
         .bh-ps-side-label, .bh-ss-side-label, .bh-tp-side-label,
         .bh-ps-btn-secondary, .bh-ss-btn-secondary, .bh-sh-btn-secondary,
         .bh-tp-btn-secondary, .bh-se-btn-secondary),
.bh-res-school-page :is(.bh-rs-hero-points li, .bh-rs-kicker:not(.bh-rs-kicker-dark),
                        .bh-rs-quick-label, .bh-rs-btn-secondary) {
    background: rgba(255, 255, 255, 0.08);
}

/* The breadcrumb sat straight on the photo (white on a pale sky on Birthday
   Enquiries, close to invisible) and its current page was 76% white. It
   gets its own navy pill and full white text: 7.3:1. */
body :is(.bh-ps-breadcrumbs, .bh-ss-breadcrumbs, .bh-sh-breadcrumbs,
         .bh-tp-breadcrumbs, .bh-se-breadcrumbs),
.bh-res-school-page .bh-rs-breadcrumbs {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(33, 39, 47, 0.78);
    color: #FFFFFF;
}

body :is(.bh-ps-breadcrumbs, .bh-ss-breadcrumbs, .bh-sh-breadcrumbs,
         .bh-tp-breadcrumbs, .bh-se-breadcrumbs) span,
.bh-res-school-page .bh-rs-breadcrumbs span {
    opacity: 1;
}

/* The breadcrumb bar is absolute at the top of the hero and the hero copy is
   bottom-aligned and taller than the hero, so the glass card rose into the
   breadcrumb. The top padding now clears the breadcrumb pill. (.bh-se-hero
   already has this in refinements.css.) */
body :is(.bh-ps-hero, .bh-ss-hero, .bh-sh-hero, .bh-tp-hero),
.bh-res-school-page .bh-rs-hero {
    padding-top: 76px;
}

@media (max-width: 640px) {
    body :is(.bh-ps-hero, .bh-ss-hero, .bh-sh-hero, .bh-tp-hero),
    .bh-res-school-page .bh-rs-hero {
        padding-top: 64px;
    }

    body .bh-se-hero {
        padding-top: 64px;
    }
}

/* The hero eyebrow pill sat directly on the H1 with no gap. */
body :is(.bh-ps-hero-panel .bh-ps-kicker, .bh-ss-hero-panel .bh-ss-kicker,
         .bh-sh-hero-panel .bh-sh-kicker, .bh-tp-hero-panel .bh-tp-kicker,
         .bh-se-hero-panel .bh-se-kicker),
.bh-res-school-page .bh-rs-hero-panel .bh-rs-kicker {
    margin-bottom: 18px;
}

/* Desktop: the H1 was capped at 10 or 11ch in a half-width panel, so it ran to
   seven lines (nine on Residential Schools). The copy panel takes more of the
   row, the side card less, and the heading drops its character cap. */
@media (min-width: 1121px) {
    body :is(.bh-ps-hero-grid, .bh-ss-hero-grid, .bh-sh-hero-grid, .bh-tp-hero-grid,
             .bh-se-hero-grid),
    .bh-res-school-page .bh-rs-hero-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
    }

    body :is(.bh-ps-title, .bh-ss-title, .bh-sh-title, .bh-tp-title, .bh-se-title),
    .bh-res-school-page .bh-rs-title {
        max-width: none;
        font-size: clamp(40px, 3.9vw, 58px);
        line-height: 1;
    }
}

/* ---------------------------------------------------------------------------
 * Shared: section eyebrows and headings
 * ------------------------------------------------------------------------- */

/* The section eyebrow pills (on light sections and on the dark "What the
   day feels like" panel) touched the heading under them, worst on phones. */
body :is(.bh-ps-kicker, .bh-ss-kicker, .bh-sh-kicker, .bh-tp-kicker, .bh-se-kicker),
.bh-res-school-page .bh-rs-kicker {
    margin-bottom: 14px;
}

/* Phone headings were set at 0.97 to 1.04 line height, so lines of a
   wrapped heading all but touched. */
@media (max-width: 640px) {
    body :is(.bh-ps-title, .bh-ss-title, .bh-sh-title, .bh-tp-title, .bh-se-title),
    .bh-res-school-page .bh-rs-title {
        line-height: 1.06;
    }

    body :is(.bh-ps-intro-title, .bh-ss-intro-title, .bh-sh-intro-title,
             .bh-tp-intro-title, .bh-se-intro-title),
    .bh-res-school-page .bh-rs-intro-title {
        line-height: 1.12;
    }
}

/* The muted copy colour (#647789) is 4.6:1 on white but falls to 4.45:1 on
   the pale tinted section and note backgrounds these pages use. One step
   darker keeps the same grey-blue and reaches 4.9:1 on the palest tint
   (#F1F7FA) and 5.3:1 on white. The calendar label, legend and note set it directly. */
body :is(.bh-primary-school-page, .bh-secondary-school-page, .bh-schools-hub-page,
         .bh-res-school-page, .bh-teacher-planning-page, .bh-school-enquiry-page,
         .bh-birthday-enquiry-page) {
    --bh-muted: #5B6D7F;
}

body :is(.bh-ps-booking-label span, .bh-ps-booking-legend-item, .bh-ps-booking-note p,
         .bh-ss-booking-label span, .bh-ss-booking-legend-item, .bh-ss-booking-note p,
         .bh-sh-booking-label span, .bh-sh-booking-legend-item, .bh-sh-booking-note p) {
    color: #5B6D7F;
}

/* Brand blue as text on white is 2.4:1: the numbers on the section tabs
   ("01" to "07") and the quote marks on the feedback cards take the darker
   blue for text on white (5.0:1). The "W" water badge was #009FC0 on its
   pale blue tile, 2.85:1, and takes the same blue (4.6:1). */
body :is(.bh-ps-journey-step, .bh-ss-journey-step, .bh-sh-journey-step, .bh-tp-journey-step,
         .bh-ps-proof-mark, .bh-sh-proof-mark) {
    color: #0B7A8E;
}

body :is(.bh-ps-activity-card-water .bh-ps-activity-icon,
         .bh-ss-activity-card-water .bh-ss-activity-icon,
         .bh-sh-activity-card-water .bh-sh-activity-icon) {
    color: #0B7A8E;
}

/* ---------------------------------------------------------------------------
 * Shared: the closing call-to-action panel
 * ------------------------------------------------------------------------- */

/* The heading was capped at 12ch, so it ran to five or six lines beside
   empty space on desktop and six lines on a phone. 18ch, which a phone
   column never reaches. */
body :is(.bh-ps-final-cta, .bh-ss-final-cta, .bh-sh-final-cta, .bh-tp-final-cta,
         .bh-se-final-cta) h2,
.bh-res-school-page .bh-rs-final-cta h2 {
    max-width: 18ch;
}

/* Desktop: the two buttons sat side by side and took half the panel. They
   stack in their own narrow column so the heading has the width. */
@media (min-width: 1121px) {
    body :is(.bh-ps-final-actions, .bh-ss-final-actions, .bh-sh-final-actions,
             .bh-tp-final-actions, .bh-se-final-actions),
    .bh-res-school-page .bh-rs-final-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Teacher Planning splits this panel into two equal halves, which left
       the heading three lines in one half and the buttons floating in the
       other. Same split as the other school pages. (.bh-tp-final-grid is
       also the "Final checks" card grid, which keeps its halves.) */
    body .bh-tp-final-cta .bh-tp-final-grid {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Button labels that wrap onto a second line ("View primary schools" on the
   hub's route cards, "Go to full what to bring guide") sat left-aligned
   inside a centred button. */
body :is(.bh-ps-btn, .bh-ss-btn, .bh-sh-btn, .bh-tp-btn, .bh-se-btn),
.bh-res-school-page .bh-rs-btn {
    text-align: center;
}

/* The highlighted feedback card ("From another primary school.") ran its
   heading straight into the paragraph below. */
body :is(.bh-ps-proof-mini, .bh-ss-proof-mini, .bh-sh-proof-mini) h3,
.bh-res-school-page .bh-rs-proof-mini h3 {
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
 * Shared: "When to book" calendars on phones
 * (/primary-schools/, /secondary-schools/, /residential-schools/; the
 * three-row Schools Hub calendar has its own rules further down)
 * ------------------------------------------------------------------------- */

/* Below 860px the month table kept its 820 to 940px width inside a 300px
   scroller, so a phone showed January and nothing told the reader to swipe.
   The table is turned on its side instead: months run down the page beside
   their advice, read from the existing header cells, with no scrolling.
   display: contents lets the header and row cells share one grid. */
@media (max-width: 860px) {
    body :is(.bh-ps-booking-calendar, .bh-ss-booking-calendar),
    .bh-res-school-page .bh-rs-booking-calendar {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
        overflow: hidden;
    }

    body .bh-ps-booking-calendar {
        grid-template-rows: repeat(7, auto);
    }

    body .bh-ss-booking-calendar,
    .bh-res-school-page .bh-rs-booking-calendar {
        grid-template-rows: repeat(9, auto);
    }

    body :is(.bh-ps-booking-head, .bh-ps-booking-row, .bh-ss-booking-head, .bh-ss-booking-row),
    .bh-res-school-page :is(.bh-rs-booking-head, .bh-rs-booking-row) {
        display: contents;
    }

    /* Month names: the left column. */
    body :is(.bh-ps-booking-head, .bh-ss-booking-head) > div,
    .bh-res-school-page .bh-rs-booking-head > div {
        display: flex;
        align-items: center;
        padding: 12px 14px;
        border-top: 1px solid rgba(33, 39, 47, 0.08);
        text-align: left;
    }

    body .bh-ps-booking-head > div {
        background: #EFF6FA;
    }

    body .bh-ss-booking-head > div {
        background: #F4EEF6;
    }

    .bh-res-school-page .bh-rs-booking-head > div {
        background: #F3EBF4;
    }

    /* Advice for each month: the right column. */
    body :is(.bh-ps-booking-cell, .bh-ss-booking-cell),
    .bh-res-school-page .bh-rs-booking-cell {
        min-height: 0;
        padding: 12px 14px;
        justify-content: flex-start;
        text-align: left;
        border-right: 0;
        border-top: 1px solid rgba(33, 39, 47, 0.08);
    }

    /* The trip label heads the list across both columns. The "Primary
       bookings" corner cell above it is dropped: the label names the row. */
    body :is(.bh-ps-booking-label, .bh-ss-booking-label),
    .bh-res-school-page .bh-rs-booking-label {
        grid-column: 1 / -1;
        grid-row: 1;
        border-right: 0;
    }

    body :is(.bh-ps-booking-head, .bh-ss-booking-head) > div:first-child,
    .bh-res-school-page .bh-rs-booking-head > div:first-child {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * /school-tours/ and /primary-schools/ (shared .bh-ps-* classes)
 * ------------------------------------------------------------------------- */

/* "What matters most here" was brand blue on white, 2.4:1. The darker blue
   used for text on white reaches 5.0:1. */
body .bh-ps-quick-label {
    color: #0B7A8E;
}

/* Pricing card bullets were brand yellow on white (1.1:1) and could not be
   seen. Blue dots, as in the card beside the hero. */
body .bh-ps-price-card li::before {
    background: #00B6D9;
    box-shadow: 0 0 0 5px rgba(0, 182, 217, 0.12);
}

/* Six anchor chips needed about 100px more than the bar at 1440px, so
   "Other school routes" wrapped onto a row of its own. Slightly tighter chips
   fit one row; when they do wrap, the rows are centred. */
body .bh-ps-subnav {
    gap: 8px;
    padding: 14px;
    justify-content: center;
}

body .bh-ps-subnav a {
    padding: 10px 11px;
    letter-spacing: 0.04em;
}

/* "Other school trips" cards: each button sat straight under its own copy,
   so the three buttons were at three heights. They sit on the card floor. */
body .bh-ps-navcard .bh-ps-btn {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
 * /schools-hub/
 * ------------------------------------------------------------------------- */

/* The hub calendar has three rows (primary, secondary, residential), too
   many to turn on its side. Below 860px each row becomes its own block: the
   group name, then its months as two columns of tiles. The month names live
   only in the header row, which cannot be repeated per group, so each tile
   names its month itself (Jan to Jun, Sep, Oct, in the order the page uses). */
@media (max-width: 860px) {
    body .bh-sh-booking-calendar {
        display: block;
        overflow: hidden;
    }

    body .bh-sh-booking-head {
        display: none;
    }

    body .bh-sh-booking-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    body .bh-sh-booking-row + .bh-sh-booking-row {
        border-top: 6px solid #EFF6FA;
    }

    body .bh-sh-booking-label {
        grid-column: 1 / -1;
        border-right: 0;
    }

    body .bh-sh-booking-cell {
        display: block;
        min-height: 0;
        padding: 10px 14px 12px;
        text-align: left;
        border-top: 1px solid rgba(33, 39, 47, 0.08);
    }

    body .bh-sh-booking-cell:nth-child(odd) {
        border-right: 0;
    }

    body .bh-sh-booking-cell::before {
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #3D4B5C;           /* 8.0:1 on the pinkest tile */
    }

    body .bh-sh-booking-cell:nth-child(2)::before { content: "Jan"; }
    body .bh-sh-booking-cell:nth-child(3)::before { content: "Feb"; }
    body .bh-sh-booking-cell:nth-child(4)::before { content: "Mar"; }
    body .bh-sh-booking-cell:nth-child(5)::before { content: "Apr"; }
    body .bh-sh-booking-cell:nth-child(6)::before { content: "May"; }
    body .bh-sh-booking-cell:nth-child(7)::before { content: "Jun"; }
    body .bh-sh-booking-cell:nth-child(8)::before { content: "Sep"; }
    body .bh-sh-booking-cell:nth-child(9)::before { content: "Oct"; }
}

/* ---------------------------------------------------------------------------
 * /residential-schools/
 * ------------------------------------------------------------------------- */

/* Overnight Groups' stylesheet also loads here and its .bh-rs-hero-panel
   rule turned the panel into a grid, which stretched the eyebrow pill across
   the full panel. */
.bh-res-school-page .bh-rs-hero-panel {
    display: block;
}

/* Overnight Groups' .bh-rs-section rule also made every section here a white
   rounded block 22px below the last, which showed as faint white bands on
   the page's tinted background. The sections sit flat, as on the other
   school pages. */
.bh-res-school-page .bh-rs-section {
    margin-top: 0;
    border-radius: 0;
    background: transparent;
}

/* The brand's primary button is yellow with navy text; this page used a
   lemon (#CFD500) with purple text. !important because the page's own rule
   sets the text colour with !important. 13.3:1. */
.bh-res-school-page .bh-rs-btn-primary {
    background: #E4FF1A;
    color: #21272F !important;
    box-shadow: 0 14px 34px rgba(228, 255, 26, 0.22);
}

/* Section tabs: Overnight Groups' 22px by 18px padding for its own journey
   cards landed on these 30px number badges, and eight tabs in one row left
   about 70px for each label, so "Accommodation" was cut to "ACCOMM". Four
   tabs a row from 1281px (as the page already does below that). */
.bh-res-school-page .bh-rs-journey-step {
    padding: 0;
    margin: 0;
}

@media (min-width: 1281px) {
    .bh-res-school-page .bh-rs-journey {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Package cards: the badge and the off-peak note were sized to their text on
   one line and the card hides its overflow, so "Best short residential
   introduction" and "November to March" were cut off. They wrap instead. */
.bh-res-school-page .bh-rs-price-badge,
.bh-res-school-page .bh-rs-offpeak {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    line-height: 1.3;
}

/* "Core offer" is Overnight Groups' featured-card label. It lands here too,
   pinned over this card's top-left corner on top of the badge, in dark text
   on nothing. This page's own design gives every package card a 6px purple
   top bar and marks the featured card with its badge and tint, so the
   pseudo-element goes back to being that bar. */
.bh-res-school-page .bh-rs-price-card.featured::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 6px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: linear-gradient(90deg, #8D4489 0%, #C07ABB 100%);
}

/* The Enquire buttons sat straight under lists of different lengths, so the
   four were at four heights. They sit on the card floor. */
.bh-res-school-page .bh-rs-price-card .bh-rs-btn {
    margin-top: auto;
}

/* Lemon bullet dots on white (1.6:1) were barely visible. Page purple, 6.3:1. */
.bh-res-school-page .bh-rs-price-card li::before {
    background: #8D4489;
    box-shadow: 0 0 0 5px rgba(141, 68, 137, 0.12);
}

/* Bunkhouse gallery: each photo was drawn at its own height, so the tall
   first photo stretched its row and left a blank band under the photo
   beside it. One 4:3 frame for every photo. */
.bh-res-school-page .bh-rs-gallery-grid .bh-rs-gallery-image {
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.bh-res-school-page .bh-rs-gallery-image img {
    position: absolute;
    inset: 0;
}

/* Gaisce: the photo card beside the taller text card was stretched to match
   and left about 230px blank under its caption. The photo grows to fill. */
.bh-res-school-page .bh-rs-gaisce-card .bh-rs-gallery-image {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
 * /plan-your-school-trip/ and /birthday-enquiries/ (shared .bh-se-* classes)
 * ------------------------------------------------------------------------- */

/* Desktop: the "Useful details" card is about 200px tall beside a form of
   1,000 to 1,700px, which left a long empty column. It travels with the form
   while the form is in view. Sticky needs every ancestor up to the page to
   stop being a scroll container: main.min.css gives .wysywig .col-12
   overflow-x: auto and the page wrapper has overflow: hidden. clip cuts the
   same overflow without making a scroll container. */
@media (min-width: 1121px) {
    .wysywig .col-12:has(.bh-school-enquiry-page),
    .wysywig .col-12:has(.bh-birthday-enquiry-page) {
        overflow-x: visible;
    }

    body :is(.bh-school-enquiry-page, .bh-birthday-enquiry-page) {
        overflow: clip;
    }

    body .bh-se-side-stack {
        position: sticky;
        top: 120px;
    }
}

/* Phones: the form sat three cards deep (page gutter, the section card and
   the form card), which left the inputs about 236px wide. The section card
   drops its frame and padding on phones; the form card is the only frame. */
@media (max-width: 640px) {
    body .bh-se-form-wrap {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    body .bh-se-form-panel {
        padding: 18px 16px;
    }
}

/* Phones: the anchor chips stacked one per row (four rows on Birthday
   Enquiries, six on School Tours). Two chips a row, wrapping inside the
   chip when the label is long. */
@media (max-width: 640px) {
    body :is(.bh-se-subnav, .bh-ps-subnav) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body :is(.bh-se-subnav, .bh-ps-subnav) a {
        justify-content: center;
        padding: 10px 8px;
        border-radius: 14px;
        font-size: 12px;
        line-height: 1.25;
        letter-spacing: 0.05em;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------
 * /schools-template-preview/ (template-schools.php)
 * ------------------------------------------------------------------------- */

/* The video placeholder reserves a 16:9 frame (742px tall at 1440px) for the
   hero showreel to fly into on scroll. The theme never loads YouTube's
   iframe API, so the player is never built and the frame stays an empty
   white box. It is hidden until the player exists (YouTube swaps the
   #youtube-player div for an iframe), so the scroll effect still has its
   target if the API is added later. */
body.page-template-template-schools:not(:has(iframe#youtube-player)) .section--video-placeholder .wrapper-video-player {
    display: none;
}

/* "Full Range of Activities": the carousel starts at the window edge while
   its heading starts at the container's padding. The carousel takes the same
   left padding (16, 30, 60 and 130px, as .container), and its viewport lets
   cells that scroll past that edge stay visible. */
body.page-template-template-schools .activities-carousel {
    padding-left: 16px;
}

body.page-template-template-schools .activities-carousel .flickity-viewport {
    overflow: visible;
}

@media (min-width: 768px) {
    body.page-template-template-schools .activities-carousel {
        padding-left: 30px;
    }
}

@media (min-width: 992px) {
    body.page-template-template-schools .activities-carousel {
        padding-left: 60px;
    }
}

@media (min-width: 1800px) {
    body.page-template-template-schools .activities-carousel {
        padding-left: 130px;
    }
}

/* Phones: the heading shared its row with the arrow buttons in two thirds
   of the width, so "of" stood alone on a line. The heading takes the full
   row and the arrows move under the filter chips. */
@media (max-width: 575.98px) {
    body.page-template-template-schools .section--activities .col-8,
    body.page-template-template-schools .section--activities .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.page-template-template-schools .section--activities h2 {
        margin-bottom: 1.5rem;
    }
}

/* Phones: the FAQ questions were centred, so a question that wrapped onto
   two lines read as a ragged centred block beside its chevron. */
body.page-template-template-schools .section--faq-accordion .accordion-header span {
    text-align: left;
}

/* Phones: "Coachford" at 60px is wider than its card, and its last letter
   ran off the edge. The location names scale with the screen below 576px.
   (The homepage uses the same .locations block and clips the same way.) */
@media (max-width: 575.98px) {
    body.page-template-template-schools .locations__content h3 {
        font-size: min(60px, 12vw);
        line-height: 1;
    }
}

/* "Two amazing locations": white "Ballyhass Mallow" and "Ballyhass
   Coachford" sat on a 42% navy fade over bright photos, 1.1 to 1.7:1 at the
   lightest point. The fade is darker and starts higher: 4.0:1 or better at
   1440px (large text needs 3:1) and 7.1:1 or better on a phone, where the
   caption covers most of the photo. The homepage uses the same block and
   fails the same way, so this can move to refinements.css unscoped. */
body.page-template-template-schools .locations__image::before {
    background: linear-gradient(180deg, rgba(9, 32, 60, 0) 15%, rgba(8, 33, 62, 0.72) 55%);
}

@media (max-width: 575.98px) {
    body.page-template-template-schools .locations__image::before {
        background: linear-gradient(180deg, rgba(9, 32, 60, 0.30) 0%, rgba(8, 33, 62, 0.80) 40%);
    }
}

/* ===========================================================================
 * Legacy pages, policies, pricing, hubs, destination hubs, Book Now, 404
 * ======================================================================== */

/* ===========================================================================
 * Group 7: legacy, hub and utility pages
 * ======================================================================== */

/* Policy pages in the legacy col-xxl-10 column: /privacy-policy/ (3),
   /accessibility-statement/ (22), /cookie-policy/ (56), /fast-facts/ (74),
   /help-desk/ (84), /our-b-corp-story/ (109), /sustainability-in-action/ (137) */

/* refinements.css section 26 took the offset off this 83% column, so the
   centred 46rem text sat in a column that was not centred: it started at
   240px against 352px on every other prose page, 112px left of the page's
   centre. On the Cookie Policy the CookieYes text under it started at 352px,
   so the two halves of one page did not line up. The column takes the full
   row and the text centres on the page. */
:is(.bh-page-privacy-policy, .bh-page-accessibility-statement, .bh-page-cookie-policy, .bh-page-fast-facts, .bh-page-help-desk, .bh-page-our-b-corp-story, .bh-page-sustainability-in-action) .entry-content .row > .col-xxl-10.offset-xxl-1 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* /cookie-policy/ (bh-page-cookie-policy) */

/* CookieYes separates its blocks with bare   text, each an empty
   29px line. Zero font size on the container collapses them; every block
   inside sets its own size again. */
.bh-page-cookie-policy #cky-policy-container {
    font-size: 0;
}

.bh-page-cookie-policy #cky-policy-container > :is(div, p) {
    font-size: 1.0625rem;
}

/* CookieYes prints its own 40px "Cookie Policy" H1 flush with the page
   edge, 290px left of the text. It now opens the policy in the reading
   column, set as a section heading with a rule above it. */
.bh-page-cookie-policy #cky-policy-container h1.cookie-policy-h1 {
    max-width: 46rem;
    margin: 3rem 0 1rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(33, 39, 47, 0.16);
    font-size: 1.75rem;
    line-height: 1.2;
}

/* Every cookie table now runs the full content width (they were 440px,
   1,253px and 1,320px wide depending on their text), with the columns in
   the same proportions. Specificity beats CookieYes's own style tags,
   which it adds after this file. */
.bh-page-cookie-policy .cky-table-wrapper {
    margin-bottom: 2rem;
    overflow-x: auto;
}

.bh-page-cookie-policy table.cky-cookie-audit-table {
    display: table;
    width: 100%;
    max-width: none;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Every cell may break a long token: descriptions quote cookie names too
   ("ytidb::LAST_RESULT_ENTRY_KEY"), and on a phone one ran out of its card. */
.bh-page-cookie-policy .cky-cookie-audit-table :is(th, td) {
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #21272F;               /* 13.3:1 on #F1F5FA, 11.7:1 on #D9DFE7 */
    overflow-wrap: anywhere;
}

.bh-page-cookie-policy .cky-cookie-audit-table td:first-child {
    overflow-wrap: anywhere;
    font-weight: 600;
}

.bh-page-cookie-policy .cky-cookie-audit-table th:nth-child(1) {
    width: 24%;
}

.bh-page-cookie-policy .cky-cookie-audit-table th:nth-child(2) {
    width: 15%;
}

/* "Consent Preferences" looked like a disabled grey tab (#57606A on
   #F8F9FA) touching the paragraph under it. It opens the consent banner,
   so it is a button: the brand's yellow primary, set in the column. */
.bh-page-cookie-policy #cky-policy-container a.cky-banner-element {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 1.5rem;
    padding: 10px 22px;
    border: 0;
    border-radius: 6px;
    background: #E4FF1A;
    color: #21272F !important;    /* beats refinements.css section 26 !important; 13.3:1 on yellow */
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.bh-page-cookie-policy #cky-policy-container a.cky-banner-element:hover,
.bh-page-cookie-policy #cky-policy-container a.cky-banner-element:focus-visible {
    background: #21272F;
    color: #FFFFFF !important;    /* 15.9:1 on navy */
}

/* From 992px the reading column is centred (refinements.css section 28):
   the heading and the button line up with it. */
@media (min-width: 992px) {
    .bh-page-cookie-policy #cky-policy-container h1.cookie-policy-h1 {
        margin-left: auto;
        margin-right: auto;
    }

    .bh-page-cookie-policy #cky-policy-container a.cky-banner-element {
        margin-left: calc((100% - 46rem) / 2);
    }
}

/* The long help URLs are single unbreakable words: the Chrome one ran 70px
   off a phone screen. Links in the policy text may break anywhere. */
.bh-page-cookie-policy .entry-content :is(p, li) a {
    overflow-wrap: anywhere;
}

/* The CookieYes credit is a footnote, not body copy. */
.bh-page-cookie-policy #cky-policy-container > p.cookie-policy-p {
    margin-top: 2rem;
    color: #57606A;               /* 6.1:1 on white */
    font-size: 0.875rem;
}

/* Phones: each cookie table squeezed Description into a 95px column and ran
   off the screen with no cue. Each row is now a card, each value labelled
   (the labels are the table's own column headings, which CookieYes always
   prints in this order). */
@media (max-width: 575.98px) {
    .bh-page-cookie-policy table.cky-cookie-audit-table,
    .bh-page-cookie-policy .cky-cookie-audit-table :is(tbody, tr, td) {
        display: block;
        width: auto;
    }

    .bh-page-cookie-policy .cky-cookie-audit-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .bh-page-cookie-policy .cky-cookie-audit-table tr {
        margin: 0 0 12px;
        padding: 10px 14px;
        border: 1px solid #CBCED6;
        border-radius: 8px;
        background: #FFFFFF;
    }

    .bh-page-cookie-policy .cky-cookie-audit-table tr td {
        display: grid;
        grid-template-columns: 6.25rem minmax(0, 1fr);
        gap: 8px;
        padding: 4px 0;
        border: 0;
        background: none;
        font-size: 0.9375rem;
    }

    .bh-page-cookie-policy .cky-cookie-audit-table td::before {
        color: #57606A;           /* 6.1:1 on white */
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.9;
        text-transform: uppercase;
    }

    .bh-page-cookie-policy .cky-cookie-audit-table td:nth-child(1)::before {
        content: "Cookie";
    }

    .bh-page-cookie-policy .cky-cookie-audit-table td:nth-child(2)::before {
        content: "Duration";
    }

    .bh-page-cookie-policy .cky-cookie-audit-table td:nth-child(3)::before {
        content: "Description";
    }

    .bh-page-cookie-policy #cky-policy-container h1.cookie-policy-h1 {
        margin-top: 2rem;
        padding-top: 2rem;
    }
}

/* /privacy-policy/ (bh-page-privacy-policy) */

/* The section titles ("Who we are", "Your rights") are bold paragraphs at
   body size, so the policy read as one unbroken block. A paragraph whose only
   element is a <strong> is a title on this page (all five were checked). The
   selector stays on this page on purpose: on Sustainability in Action the
   same shape is a bold lead-in followed by text, which it would enlarge. The
   real fix is <h2> in the content. */
.bh-page-privacy-policy .entry-content p:is(:has(> strong:only-child), :has(> br:first-child + strong:last-child)) {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.bh-page-privacy-policy .entry-content p:is(:has(> strong:only-child), :has(> br:first-child + strong:last-child)):not(:first-child) {
    margin-top: 2.25rem;
}

/* Three of them open with a <br>, an extra blank line above the title. */
.bh-page-privacy-policy .entry-content p:has(> br:first-child + strong:last-child) > br:first-child {
    display: none;
}

/* /whats-on-event-calendar-v2/ (bh-page-whats-on-event-calendar-v2) */

/* Every featured activity and event in the page's script is dated May to
   September 2026, so from October the calendars open on a month of empty
   cells and stay empty until April. A month with nothing in it now shows a
   line saying so instead of 35 empty cells (the real fix, opening on the
   next month with something in it, is in the script: see the report). */
.bh-page-whats-on-event-calendar-v2 .bh-v11-calendar-shell:not(:has(.has-items)) .bh-v11-weekdays,
.bh-page-whats-on-event-calendar-v2 .bh-v11-calendar-grid:not(:has(.has-items)) > .bh-v11-day {
    display: none;
}

.bh-page-whats-on-event-calendar-v2 .bh-v11-calendar-grid:not(:has(.has-items))::before {
    grid-column: 1 / -1;
    padding: 28px 20px;
    background: #FFFFFF;
    color: #21272F;               /* 15.0:1 on white */
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.bh-page-whats-on-event-calendar-v2 #bh-v11-activities-grid:not(:has(.has-items))::before {
    content: "No featured activities this month. Use Next to look ahead to the season.";
}

.bh-page-whats-on-event-calendar-v2 #bh-v11-events-grid-calendar:not(:has(.has-items))::before {
    content: "No featured events this month. Use Next to look ahead.";
}

/* "Upcoming events" had nothing under it once every event had passed. */
.bh-page-whats-on-event-calendar-v2 #bh-v11-events-grid-cards:empty::before {
    content: "New dates are added here as they are announced.";
    grid-column: 1 / -1;
    color: #57606A;               /* 6.1:1 on white */
}

/* The calendar's muted copy (the intro under each calendar title, card and
   drawer text) was #647B8E, 4.4:1 on white at 15px. */
.bh-page-whats-on-event-calendar-v2 .bh-calendar-master-v11 {
    --bh-muted: #57606A;          /* 6.4:1 on white, 6.0:1 on #F5F8FB */
}

/* "No featured activity" in each empty cell was #97AABA on white, 2.4:1. */
.bh-page-whats-on-event-calendar-v2 .bh-v11-empty {
    color: #57606A;               /* 6.1:1 on white */
}

/* Every card photo and the events hero point at legacy /contentFiles/ files
   that 404, which left pale grey boxes that read as broken. With no photo the
   panel is navy, so it reads as a designed block (the photos themselves are
   a script change: see the report). */
.bh-page-whats-on-event-calendar-v2 .bh-v11-media {
    background-color: #21272F;
}

/* Phones: the calendar was a 700px grid in a 294px sideways scroller, and the
   panel sat 36px in from each edge inside the page's own 16px gutter. The
   month becomes a list of the days that have something on, each labelled
   with its weekday (the grid always starts on a Sunday, so the column gives
   the day). */
@media (max-width: 640px) {
    .bh-page-whats-on-event-calendar-v2 .bh-calendar-master-v11,
    .bh-page-whats-on-event-calendar-v2 .entry-content .col-xxl-10 {
        padding-left: 0;
        padding-right: 0;
    }

    .bh-page-whats-on-event-calendar-v2 .bh-v11-calendar-scroll {
        overflow: visible;
    }

    .bh-page-whats-on-event-calendar-v2 .bh-v11-calendar-shell {
        min-width: 0;
    }

    .bh-page-whats-on-event-calendar-v2 .bh-v11-weekdays,
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day.other,
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:not(.has-items) {
        display: none;
    }

    .bh-page-whats-on-event-calendar-v2 .bh-v11-calendar-grid {
        grid-template-columns: minmax(0, 1fr);
        background: none;
    }

    .bh-page-whats-on-event-calendar-v2 .bh-v11-day {
        display: grid;
        grid-template-columns: 4.25rem minmax(0, 1fr);
        gap: 4px 12px;
        min-height: 0;
        padding: 12px 14px;
        border-right: 0;
    }

    .bh-page-whats-on-event-calendar-v2 .bh-v11-day-num {
        justify-content: flex-start;
        gap: 6px;
        align-self: start;
        padding-top: 8px;
        font-size: 0.9375rem;
    }

    /* One line per session: the schedule summary under each title doubled
       the length of the list, and the drawer it opens repeats it. */
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day-chip-sub {
        display: none;
    }

    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:nth-child(7n+1) .bh-v11-day-num::before { content: "Sun "; }
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:nth-child(7n+2) .bh-v11-day-num::before { content: "Mon "; }
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:nth-child(7n+3) .bh-v11-day-num::before { content: "Tue "; }
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:nth-child(7n+4) .bh-v11-day-num::before { content: "Wed "; }
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:nth-child(7n+5) .bh-v11-day-num::before { content: "Thu "; }
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:nth-child(7n+6) .bh-v11-day-num::before { content: "Fri "; }
    .bh-page-whats-on-event-calendar-v2 .bh-v11-day:nth-child(7n) .bh-v11-day-num::before { content: "Sat "; }
}

/* /things-to-do-in-cork/ (bh-page-things-to-do-in-cork) */

/* Headings were set solid (40px type on 36px lines, 24px on 24px), so the
   descenders of one line touched the next and wrapped titles ran together,
   with no space between a heading and the paragraph before it. Only the
   article's own headings: the "Book Your Adventure" boxes keep theirs. */
.bh-page-things-to-do-in-cork .news-item > h2 {
    margin: 3rem 0 1rem;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    line-height: 1.15;
}

.bh-page-things-to-do-in-cork .news-item > h3 {
    margin: 1.75rem 0 0.75rem;
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem);
    line-height: 1.25;
}

.bh-page-things-to-do-in-cork .news-item > h1 + p,
.bh-page-things-to-do-in-cork .news-item > :is(h2, h3) + * {
    margin-top: 0;
}

/* The two "Embrace the Water" paragraphs carried an inline centre, the only
   centred copy in the article. !important beats the inline style. */
.bh-page-things-to-do-in-cork .news-item > p[style*="center"]:not(:has(img)) {
    text-align: left !important;
}

/* A photo inside a paragraph kept the article's 40px image margin on top of
   the paragraph's own, and an empty paragraph followed: about 100px of white
   under the Sea Kayaking and Aqua Park photos. The article's image rule is
   four classes deep, so these are too. */
.bh-page-things-to-do-in-cork .dccom_gdNews .inner .news-item p > img,
.bh-page-things-to-do-in-cork .dccom_gdNews .inner .news-item p > a > img {
    margin-bottom: 0;
}

.bh-page-things-to-do-in-cork .news-item p:has(> img, > a > img) {
    margin-bottom: 1.25rem;
}

/* The last "Book Your Adventure" box wraps each button in an empty link,
   which spread the pair apart and pushed them off centre, and &nbsp; text
   between its blocks made it 160px taller than the other five. The empty
   links (no text, nothing a visitor can see) are hidden, the stray spaces
   collapse (every block in the box sets its own size inline), and every box
   lays its buttons out the same way. */
.bh-page-things-to-do-in-cork .news-item center > div,
.bh-page-things-to-do-in-cork .news-item center div[style*="z-index: 1"] {
    font-size: 0;
}

/* With the stray lines gone, the box keeps its spacing on purpose. The logo
   carries an inline margin, hence !important. */
.bh-page-things-to-do-in-cork .news-item center div[style*="z-index: 1"] > img {
    margin-bottom: 16px !important;
}

.bh-page-things-to-do-in-cork .news-item center div[style*="z-index: 1"] > h2 {
    margin: 0 0 8px;
    line-height: 1.2;
}

.bh-page-things-to-do-in-cork .news-item center div[style*="z-index: 1"] > p {
    margin: 0 0 4px;
}

.bh-page-things-to-do-in-cork .news-item center div[style*="margin-top: 20px"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bh-page-things-to-do-in-cork .news-item center div[style*="margin-top: 20px"] > a:not(.button) {
    display: none;
}

.bh-page-things-to-do-in-cork .news-item center div[style*="margin-top: 20px"] > a.button {
    margin: 0 !important;         /* beats Bootstrap's .m-1 !important */
}

/* /explore/ (bh-page-explore) */

/* "Eat, drink, relax": the paragraph had a 50px left margin of its own, so
   it started inside the heading above it. */
.bh-page-explore .feature--explore .feature__content p {
    margin-left: 0;
}

/* "The sights of Cork" sat on the container edge (60px) while everything
   else on the page starts in the centred ten-column block (172px). */
@media (min-width: 992px) {
    .bh-page-explore .section--gallery-carousel--explore > div > .row:first-child > .col-12 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
        margin-left: 8.333333%;
    }
}

/* Gaps between sections: the gallery had 64px of margin and 112px of
   padding at each end, and the closing "Book Your Adventure" 100px of margin
   and 150px of padding: 200 to 300px of white between blocks. */
.bh-page-explore .section--gallery-carousel--explore {
    margin-bottom: 0;
    padding-top: 48px;
    padding-bottom: 48px;
}

/* The gallery's caption line is empty on every slide but kept 96px. It stays
   in the page as a live region, just without the height. */
.bh-page-explore .slider__caption:empty {
    height: 0;
    min-height: 0;
    margin: 0;
}

.bh-page-explore .letterbox--inverted {
    margin-top: 0;
    padding-top: 96px;
    padding-bottom: 96px;
}

/* The torn edge under the Aquapark slider is an image 1,900px wide, so it
   ran 60px past the panel's right edge (16px on a phone) and stopped dead at
   the left. It is cut at the panel's sides; it still overhangs top and
   bottom as designed. */
.bh-page-explore section.section.cta {
    clip-path: inset(-300px 0 -300px 0);
}

@media (max-width: 767.98px) {
    /* "Best Things to Do in Cork" and its arrows sat flush on the cyan
       panel's left edge. */
    .bh-page-explore section.best .best__head {
        padding: 0 20px;
    }

    .bh-page-explore section.best .best-carousel {
        padding-left: 20px;
    }

    /* "Eat, drink, relax" was 90px type, one word to a line. */
    .bh-page-explore .feature--explore .feature__content h2 {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
        line-height: 1;
    }

    .bh-page-explore .feature--explore .feature__content p {
        max-width: none;
        margin: 24px 0;
    }

    /* The food photo was 456px wide from 135px in, so it ran 217px off the
       right of the screen. It now ends at the column edge. */
    .bh-page-explore .feature--explore .feature__images__img:nth-child(3) {
        left: auto;
        right: 0;
        bottom: -48px;
        width: 62%;
        height: auto;
        aspect-ratio: 456 / 289;
    }

    .bh-page-explore .feature--explore .feature__images {
        margin-bottom: 64px;
    }

    .bh-page-explore .feature--explore .feature__images__img:nth-child(3) img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* The slide text ran to the panel's right edge with no margin. */
    .bh-page-explore section.cta figcaption {
        padding-right: 24px;
    }

    .bh-page-explore .section--gallery-carousel--explore {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .bh-page-explore .letterbox--inverted {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* /pricing/ (bh-page-pricing) and /pricing-detailed/ (bh-page-pricing-detailed) */

/* Table text was 14px set in a 300 weight, which reads as about 12px, and
   "price" in each header was the same thin weight on Ballyhass Blue. Body
   size, and the header in the medium weight the guide asks for (navy on
   #00B6D9 is 6.2:1). */
:is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table :is(th, td) {
    font-size: 0.9375rem;
    line-height: 1.5;
}

:is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table th {
    font-weight: 500;
}

/* Locations: an empty span before the first pin indented Coachford by 30px,
   and the pins only stacked when the column happened to be too narrow for
   both. One location to a line, every row. */
:is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:nth-child(2) span {
    display: block;
    margin: 0;
}

:is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:nth-child(2) span:empty {
    display: none;
}

/* Teenage Watersports' pin was pushed in by a stray &nbsp;. */
:is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:nth-child(2) {
    font-size: 0;
}

:is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:nth-child(2) strong {
    font-size: 0.9375rem;
}

/* /pricing/: "Adventure Pass" sits in a span of its own inside the price,
   and every span but the last took a 30px right margin, so the label stood
   apart from its price ("Adventure Pass     / €14") and the two wrapped
   onto separate lines. Each label and price is one unit that does not
   break; units wrap between each other (refinements.css section 24 does
   this for the plain ones). Below 992px main.min.css made every span a
   block, which put the label on a line of its own above its price. On
   Aquapark the label is inside the Online price and its amount in the next
   span, so that pair is joined up. */
.bh-page-pricing .pricing--list table td:last-child span span {
    display: inline;
    margin: 0;
}

.bh-page-pricing .pricing--list table td:last-child > span {
    margin: 0 14px 0 0;
}

.bh-page-pricing .pricing--list table td:last-child > span:has(> span) {
    display: inline-block;
    white-space: nowrap;
}

.bh-page-pricing .pricing--list table td:last-child > span:has(> strong + span),
.bh-page-pricing .pricing--list table td:last-child > span:has(> strong + span) + span {
    display: inline;
    margin-right: 0;
    white-space: normal;
}

/* /pricing-detailed/: each sales channel (RRP, Online) is one run of
   "Adult / €19.50 U10 / €39.00 ...", which broke between a label and its
   price even at 1440 ("U18 /" at a line end, "€39.00" on the next). The
   channel is a small label over its prices, one age and price to a line, in
   columns as wide as the cell allows. */
.bh-page-pricing-detailed .pricing--list table td:last-child > span {
    display: block;
    margin: 0 0 12px;
    columns: 8.5rem;
    column-gap: 24px;
    white-space: normal;
}

.bh-page-pricing-detailed .pricing--list table td:last-child > span:last-of-type {
    margin-bottom: 0;
}

.bh-page-pricing-detailed .pricing--list table td:last-child > br {
    display: none;
}

.bh-page-pricing-detailed .pricing--list table td:last-child > span:has(> strong ~ strong) > strong:first-child {
    display: block;
    column-span: all;
    margin-bottom: 2px;
    color: #57606A;               /* 6.1:1 on white, 5.6:1 on the row grey */
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-page-pricing-detailed .pricing--list table td:last-child > span > strong:nth-of-type(n+3)::before {
    content: "\A";
    white-space: pre;
}

/* Phones: three columns left the price column about 150px wide, centred,
   with prices split from their labels. Each row is a card: the name, then
   its venues, then its prices. The table's first heading (Camps, Tours...)
   stays as the heading of its cards; the other two headings are read out
   but not shown, since the pins and labels say what each line is. */
@media (max-width: 575.98px) {
    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table,
    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table :is(thead, tbody, tr, td, th) {
        display: block;
        width: auto;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table {
        margin-bottom: 2rem;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table thead tr {
        padding: 12px 16px;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table th {
        padding: 0;
        font-size: 1rem;
        text-align: left;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table th:not(:first-child) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table tbody tr {
        padding: 14px 16px;
        border-bottom: 3px solid #FFFFFF;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td {
        padding: 0;
        text-align: left;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:first-child {
        margin-bottom: 4px;
        font-size: 1.0625rem;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 16px;
        margin-bottom: 10px;
        font-size: 0.875rem;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:nth-child(2) span {
        display: contents;
    }

    :is(.bh-page-pricing, .bh-page-pricing-detailed) .pricing--list table td:nth-child(2) svg {
        display: inline;
        margin: 0 4px 0 0;
    }

    .bh-page-pricing-detailed .pricing--list table td:last-child > span {
        columns: 2;
        column-gap: 16px;
    }
}

/* Experience cards on /coachford/, /mallow/ (template-destination.php),
   /book-now/ (bh-page-book-now) and /component-library/ (template-pattern-library.php) */

/* Only some cards print the duration line above the name ("1 HOUR"), so
   names in one row started at different heights. A card without it keeps an
   empty line of the same height (12px type on an 18px line, then the card's
   8px gap). */
.bh-page-book-now .bh-card__body:not(:has(> .bh-card__venue))::before {
    content: "";
    display: block;
    height: 18px;
}

/* The hubs stack their cards in one column below 576px, where there is no
   row to line up with. */
@media (min-width: 576px) {
    :is(.page-template-template-destination, .page-template-template-pattern-library) .bh-card__body:not(:has(> .bh-card__venue))::before {
        content: "";
        display: block;
        height: 18px;
    }
}

/* A card with a second link under its button ("Booking for a group?")
   carried its price and button 52px higher than its neighbours, and the
   groups card without one carried its button 52px lower. In a row where any
   card has that link, every button keeps room for it, so prices and buttons
   line up across the row. */
.bh-page-book-now .bh-shelf:has(.bh-card__cta + .bh-card__link) .bh-card__foot .bh-card__actions:has(> .bh-card__cta) {
    align-content: flex-start;
    min-height: calc(52px + var(--bh-space-2) + var(--bh-target-comfortable));
}

@media (min-width: 576px) {
    :is(.page-template-template-destination, .page-template-template-pattern-library) :is(.bh-shelf, .bh-destination__group, .bh-pl-render):has(.bh-card__cta + .bh-card__link) .bh-card__foot .bh-card__actions:has(> .bh-card__cta) {
        align-content: flex-start;
        min-height: calc(52px + var(--bh-space-2) + var(--bh-target-comfortable));
    }
}

/* Destination hubs: card endings were three different things, a CONTACT US
   button, a bare rule with nothing under it, or a small underlined link.
   A card with no action ends on its status ("Back next season") under the
   rule, and a link that is a card's only action is drawn as the same
   outline button as CONTACT US. */
:is(.page-template-template-destination, .page-template-template-pattern-library) :is(.bh-destination, .bh-pl-render) .bh-card__foot:not(:has(a, .bh-card__price, .bh-card__member)) {
    display: none;
}

:is(.page-template-template-destination, .page-template-template-pattern-library) :is(.bh-destination, .bh-pl-render) .bh-card:not(:has(.bh-card__foot :is(a, .bh-card__price, .bh-card__member))) .bh-card__note--status {
    margin-top: auto;
    padding-top: var(--bh-space-4);
    border-top: 1px solid rgba(33, 39, 47, 0.12);
    font-size: 0.8125rem;
    font-weight: 600;
}

:is(.page-template-template-destination, .page-template-template-pattern-library) .bh-destination .bh-card__actions > .bh-card__link:only-child {
    justify-content: center;
    min-height: 52px;
    border: 2px solid #00B6D9;    /* the outline CONTACT US already uses */
    border-radius: var(--bh-radius-md, 6px);
    color: #0B7A8E;               /* 5.0:1 on white */
    font-size: var(--bh-text-sm, 0.875rem);
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
}

:is(.page-template-template-destination, .page-template-template-pattern-library) .bh-destination .bh-card__actions > .bh-card__link:only-child:hover {
    background: #00B6D9;
    color: #21272F;               /* 6.2:1 on blue */
}

/* "Get directions" on phones: refinements.css section 23 put it on its own
   line but components.css, which loads later, kept its 12px left margin. */
@media (max-width: 575.98px) {
    .page-template-template-destination .bh-destination__directions {
        margin-left: 0;
    }
}

/* /book-now/ (bh-page-book-now) */

/* The finder column was sticky with a height cap of the window less the
   header, 772px on a laptop, and scrolled inside itself: its 1,095px of
   filters were cut off at "How many?" with nothing to say there was more.
   It now runs its full height and scrolls with the page, and only sticks
   where the window is tall enough to show all of it. */
@media (min-width: 992px) {
    .bh-page-book-now .bh-book__panel {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (min-width: 992px) and (min-height: 1240px) {
    .bh-page-book-now .bh-book__panel {
        position: sticky;
    }
}

/* "Before you come" was unstyled page copy after the finder: a 40px heading
   on the page edge, default bullets, and 100px of section margin above it.
   It now lines up with the results column and reads as the closing note of
   the page, in the same heading style as the shelves. */
.bh-page-book-now .entry-content > section.bh-book {
    margin-bottom: 0;
}

.bh-page-book-now .entry-content > section.bh-book ~ :is(h2, ul, p) {
    max-width: 46rem;
}

.bh-page-book-now .entry-content > section.bh-book ~ h2 {
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 2px solid #21272F;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.bh-page-book-now .entry-content > section.bh-book ~ ul {
    display: grid;
    gap: 10px;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.bh-page-book-now .entry-content > section.bh-book ~ ul li {
    position: relative;
    padding-left: 22px;
    line-height: 1.5;
}

.bh-page-book-now .entry-content > section.bh-book ~ ul li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 8px;
    height: 8px;
    background: #21272F;
}

.bh-page-book-now .entry-content > section.bh-book ~ p {
    margin-bottom: 3rem;
}

@media (min-width: 992px) {
    .bh-page-book-now .entry-content > section.bh-book ~ :is(h2, ul, p) {
        margin-left: calc(300px + var(--bh-space-8));
    }
}

/* /component-library/ (template-pattern-library.php) */

/* The page has no banner, so the fixed header sat straight on the content:
   the logo over the "INTERNAL REFERENCE" eyebrow and white menu text on a
   white page. It gets the same navy bar as the other pages without a photo
   banner (refinements.css section 19). */
.bh-pattern-library-page {
    padding-top: 0 !important;    /* pattern-library.css sets it with !important */
}

.bh-pattern-library-page::before {
    content: "";
    display: block;
    height: 100px;
    margin-bottom: 40px;
    background: #21272F;
}

@media (min-width: 992px) {
    .bh-pattern-library-page::before {
        height: 140px;
        margin-bottom: 56px;
    }
}

/* main.min.css gives the last <section> of any parent a 100px bottom
   margin. Inside the rendered examples that left empty grey bands (240px
   under the Book Now finder) and made the Coachford location card 100px
   shorter than Mallow's. */
.bh-pattern-library-page .bh-pl-render section:last-of-type {
    margin-bottom: 0;
}

/* "Explore for another season" is a <details> that Book Now styles in
   book-now.css, which this page does not load: it showed the browser's
   disclosure triangle. The same treatment as on Book Now. */
.bh-pattern-library-page .bh-shelf__fold {
    border-top: 2px solid #21272F;
}

.bh-pattern-library-page .bh-shelf__summary {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 44px;
    padding: 16px 60px 16px 0;
    cursor: pointer;
    list-style: none;
}

.bh-pattern-library-page .bh-shelf__summary::-webkit-details-marker {
    display: none;
}

.bh-pattern-library-page .bh-shelf__toggle {
    position: absolute;
    top: 50%;
    right: 0;
    width: 44px;
    height: 44px;
    border: 2px solid #21272F;
    border-radius: 4px;
    transform: translateY(-50%);
}

.bh-pattern-library-page .bh-shelf__toggle::before,
.bh-pattern-library-page .bh-shelf__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: #21272F;
    transform: translate(-50%, -50%);
}

.bh-pattern-library-page .bh-shelf__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.bh-pattern-library-page .bh-shelf__fold[open] .bh-shelf__toggle::after {
    display: none;
}

/* The shortcode tags ([ballyhass_experiences venue="mallow" ...]) are inline
   code chips; wrapped onto two lines their navy background broke apart. */
.bh-pattern-library-page .bh-pl-tag code {
    display: inline-block;
    max-width: 100%;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* "Clear all" broke onto two lines beside the submit button on phones. */
.bh-pattern-library-page .bh-book__reset {
    white-space: nowrap;
}

/* Group enquiry form: bootstrap-select fixes its selects at 220px with the
   input padding on the outer box as well as the button, so "Select a group
   type" was cut off in a 60px box beside 238px, 44px inputs. The time
   inputs were clipped by the same 14px side padding. */
body .bh-pattern-library-page .group-enquiry__form .bootstrap-select.group-enquiry__select {
    width: 100%;
    padding: 0;
}

.bh-pattern-library-page .group-enquiry__form .bootstrap-select > .dropdown-toggle {
    min-height: 42px;
    padding: 9px 14px;
    border: 0;
    background: #FFFFFF;
    font-size: 0.9rem;
}

.bh-pattern-library-page .group-enquiry__form input[type="time"] {
    padding-left: 8px;
    padding-right: 6px;
}

/* Bootstrap 4 has no .g-3, so the fields had no space between rows and
   each label sat 3px under the input above it. */
.bh-pattern-library-page .group-enquiry__form .row > [class*="col-"] {
    margin-bottom: 14px;
}

.bh-pattern-library-page .group-enquiry__label {
    line-height: 1.35;
}

/* Phones: each example sat in three nested padded boxes, so the vacancies
   form was 226px wide and its file input cut to "Choose File No fi". */
@media (max-width: 575.98px) {
    .bh-pattern-library-page .bh-pl-render {
        padding: 12px;
    }

    .bh-pattern-library-page .bh-apply {
        padding: 16px;
    }

    .bh-pattern-library-page .bh-apply input[type="file"] {
        width: 100%;
        font-size: 0.875rem;
    }
}

/* 404 (body.error404) */

/* "Oops!" was 16px navy text on the dark banner photo, about 1.3:1. It is
   the brand's highlight: navy block, yellow text, square corners, which
   holds 13.3:1 on any photo. */
.error404 .banner .banner_content > span {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    background: #21272F;
    color: #E4FF1A;               /* 13.3:1 on navy */
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The yellow brush behind "Let's get you back on track" is a 796px image
   pinned 20px from the heading's right edge, so on a phone it ran off the
   left of the screen only. On a phone it is scaled to the heading and
   centred behind it. */
@media (max-width: 767.98px) {
    .error404 .letterbox h2::after {
        content: "";
        top: -12%;
        right: auto;
        left: 50%;
        width: 100%;
        height: 124%;
        transform: translateX(-50%);
        background: url("../images/ballyhass/highlight-lg.png") center / 100% 100% no-repeat;
    }
}

/* /contact/ (bh-page-contact) */

/* The page was a run of plain bullets. The link lists (Groups, School
   tours, Birthday parties; Waivers, What to bring, FAQs) are the site's row
   of outline buttons, as on the hub pages (refinements.css section 30), and
   the form sits in a panel of its own so it reads as the next step. */
.bh-page-contact .entry-content ul:has(> li > a:only-child):not(:has(> li > :not(a))) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.bh-page-contact .entry-content ul:has(> li > a:only-child):not(:has(> li > :not(a))) > li {
    margin: 0;
}

.bh-page-contact .entry-content ul:has(> li > a:only-child):not(:has(> li > :not(a))) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid #21272F;
    border-radius: 6px;
    color: #21272F;               /* 15.0:1 on white */
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-page-contact .entry-content ul:has(> li > a:only-child):not(:has(> li > :not(a))) a:hover,
.bh-page-contact .entry-content ul:has(> li > a:only-child):not(:has(> li > :not(a))) a:focus-visible {
    background: #21272F;
    color: #FFFFFF;
}

.bh-page-contact .entry-content p:has(> .hbspt-form) {
    margin-top: 3rem;
    padding: 24px;
    border-top: 4px solid #E4FF1A;
    border-radius: 0 0 12px 12px;
    background: #F4F6F8;
}

.bh-page-contact .entry-content p:has(> .hbspt-form) > br {
    display: none;
}

/* Legacy prose pages with accordions: /first-aid3/ (76), /asd-active-adventurers2/ (35) */

/* The +/- icon is pinned 20px from the right of each header with no room
   kept for it, so long titles ran under it ("for Students+") and it sat on
   the bottom line of two-line titles. */
:is(.bh-page-first-aid3, .bh-page-asd-active-adventurers2) .entry-content .accordion .card-header .btn-block {
    position: relative;
    padding-right: 48px;
}

:is(.bh-page-first-aid3, .bh-page-asd-active-adventurers2) .entry-content .accordion .card-header .btn-block::after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

/* Each header also took the prose pages' 40px heading margin, so the items
   stood 90 to 100px apart with nothing between them. */
:is(.bh-page-first-aid3, .bh-page-asd-active-adventurers2) .entry-content .accordion .card-header :is(h2, h3) {
    margin-top: 12px;
}

/* /adventure-centre-instructor-training-course/ (bh-page-adventure-centre-instructor-training-course) */

/* "Other courses at Ballyhass · Contact us" is the page's closing link line,
   the pattern the hub pages now show as a row of buttons (refinements.css
   section 30). The &middot; between them is hidden with the font size. */
.bh-page-adventure-centre-instructor-training-course .entry-content > p:last-child:not(:has(> :not(a))) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2rem;
    font-size: 0;
}

.bh-page-adventure-centre-instructor-training-course .entry-content > p:last-child:not(:has(> :not(a))) > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid #21272F;
    border-radius: 6px;
    color: #21272F;               /* 15.0:1 on white */
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-page-adventure-centre-instructor-training-course .entry-content > p:last-child:not(:has(> :not(a))) > a:first-child {
    border-color: #E4FF1A;
    background: #E4FF1A;          /* navy on yellow 13.3:1 */
}

.bh-page-adventure-centre-instructor-training-course .entry-content > p:last-child:not(:has(> :not(a))) > a:hover,
.bh-page-adventure-centre-instructor-training-course .entry-content > p:last-child:not(:has(> :not(a))) > a:focus-visible {
    border-color: #21272F;
    background: #21272F;
    color: #FFFFFF;
}

/* Hub listings (ul.bh-listing on /experiences/, /explore-by-activity/,
   /explore-by-location/, /camps-main/, /events/, /giftable-experiences/,
   /book-coachford/, /training/, /weekly-evenings/, /half-day-week-long/,
   /full-day-week-long/, /winter-swim-and-sauna/, /adventure-activities/) */

/* The venue tags hugged the price, so they moved with its width ("from €7"
   against "from €230") and jumped to the right edge on the two "€2
   Adventures" rows, which have no price. Name, venue and price are columns,
   so the tags line up down the list whether or not a row has a price. */
body .entry-content .bh-listing li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 6.5rem;
    align-items: baseline;
    gap: 4px 12px;
}

.bh-listing li > .bh-listing__name {
    grid-column: 1;
}

.bh-listing li > .venue {
    grid-column: 2;
    justify-self: end;
}

.bh-listing li > .bh-listing__price {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
}

.bh-listing li > .bh-listing__note {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    body .entry-content .bh-listing li {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .bh-listing li > .bh-listing__name {
        grid-column: 1 / -1;
    }

    .bh-listing li > .venue {
        grid-column: 1;
        justify-self: start;
    }

    /* A row with no venue tag keeps its price beside the name rather than
       alone on a second line. */
    .bh-listing li:not(:has(> .venue)) > .bh-listing__name {
        grid-column: 1 / 3;
    }
}

/* The price column was a fixed 6.5rem and the price does not wrap, so a longer label ("see
   dates and prices", 10rem) ran to the left over the venue tag on Full Day Camps and Half Day
   & Specialist (Eoghan, Teamwork 11931576 point 2: "overlapping venue labels and links").
   The column is now at least 6.5rem and as wide as its label. With subgrid, the whole list
   shares one set of columns, so the tags still line up down the list; without it, each row's
   price column grows to fit and nothing overlaps. */
@media (min-width: 576px) {
    body .entry-content .bh-listing li {
        grid-template-columns: minmax(0, 1fr) auto minmax(6.5rem, max-content);
    }
}

@supports (grid-template-columns: subgrid) {
    body .entry-content ul.bh-listing {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(6.5rem, max-content);
        column-gap: 12px;
    }

    body .entry-content .bh-listing li {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }

    @media (max-width: 575.98px) {
        body .entry-content ul.bh-listing {
            grid-template-columns: auto minmax(0, 1fr) auto;
        }
    }
}

/* ===========================================================================
 * Sauna, memberships, passes, padel, wellness and event pages
 * ======================================================================== */

/* ==========================================================================
   Group 4: sauna, wellness, memberships and pass pages
   ========================================================================== */

/* Shared by this group's pages with a legacy accordion (both sauna pages,
   All Access Day Pass, Breathe & Balance, the Nature workshop and Family
   Adventure Weekends): the headers were royal blue #15429B with a royal rule
   and a cyan "+" image (2.4:1), none of them brand colours. Navy text (15:1)
   and rule, and the icon darkened to black. Scoped to these pages through
   each page's own section class; the same accordion appears on ten other
   pages. */
body .entry-content:is(:has(.bh-sauna-hero-v4), :has(.coachford-aa-wrap), :has(.bh-breathe-hero), :has(.bh-biodiversity-event), :has(.bunkhouse-weekend-dates)) .accordion .card-header {
    border-bottom-color: rgba(33, 39, 47, 0.24);
}

body .entry-content:is(:has(.bh-sauna-hero-v4), :has(.coachford-aa-wrap), :has(.bh-breathe-hero), :has(.bh-biodiversity-event), :has(.bunkhouse-weekend-dates)) .accordion .card-header button {
    color: #21272F;
}

body .entry-content:is(:has(.bh-sauna-hero-v4), :has(.coachford-aa-wrap), :has(.bh-breathe-hero), :has(.bh-biodiversity-event), :has(.bunkhouse-weekend-dates)) .accordion .card-header button::after {
    filter: brightness(0);
}

/* /sauna-and-swim/ and /sauna-and-swim-coachford/ (shared sauna components) */

/* Phones: the "Heat, dip, repeat" card and the dark "Quick comparison" card
   were both pinned over a 430px photo, and the comparison card grew to 394px,
   so the two overprinted. Both now sit in the flow under a shorter photo. */
@media (max-width: 640px) {
    body .bh-sauna-visual .bh-image-wrap {
        display: grid;
        gap: 12px;
        overflow: visible;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    body .bh-sauna-visual .bh-image-wrap img {
        height: 280px;
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    body .bh-sauna-visual .bh-image-topcard,
    body .bh-sauna-visual .bh-image-bottomcard-upgrade {
        position: static;
        max-width: none;
    }

    body .bh-sauna-visual .bh-image-topcard {
        border: 1px solid rgba(33, 39, 47, 0.08);
    }
}

/* Small cyan kickers on white cards ("Why Mallow", "Quick comparison",
   "Typical beach barrel", "Per-session maths") were #23B4D4 at 11px, 2.4:1.
   Teal #0B7A8E is 5.0:1 on white. The dark card's kicker keeps its cyan. */
body .bh-topcard-kicker,
body .bh-compare-card:not(.bh-compare-card-dark) .bh-compare-kicker,
body .bh-minutes-card:not(.bh-minutes-card-dark) .bh-minutes-kicker,
body .bh-site-tag:not(.bh-site-tag-highlight) {
    color: #0B7A8E;
}

/* Price and membership tags: #23B4D4 on their pale #EEF9FC / #EEF7FA pills,
   2.3:1, even on Coachford's dark card. Teal is 4.6:1. */
body .bh-sauna-pricing .bh-price-tag:not(.bh-price-tag-highlight),
body .bh-sauna-pricing .bh-membership-card:not(.bh-membership-card-dark) .bh-membership-tag,
body .bh-membership-card-grid-4 .bh-membership-card:not(.bh-membership-card-best-value) .bh-membership-tag {
    color: #0B7A8E;
}

/* Coachford "EUR14": 52px #23B4D4 on white, 2.5:1, under even the 3:1 large
   text minimum. Teal is 5.0:1. */
body .bh-sauna-pricing-coachford .bh-price-card:not(.bh-price-card-highlight):not(.bh-price-card-dark) .bh-price-main {
    color: #0B7A8E;
}

/* Coachford "/month" on the black membership card: #4F6973 on #111, 3.2:1.
   Light grey is 11.6:1. */
body .bh-sauna-pricing-coachford .bh-price-card-dark .bh-price-main span {
    color: rgba(255, 255, 255, 0.78);
}

/* "Ballyhass EUR0.23 / min": white on #23B4D4, 2.5:1. Navy is 6.1:1. */
body .bh-minute-box-highlight span,
body .bh-minute-box-highlight strong,
body .bh-minute-box-highlight small {
    color: #21272F;
}

/* The grey captions under the other per-minute figures ("Typical
   comparison", and on Memberships "Mallow + Coachford") were #617B85 on
   #F7FBFC, 4.3:1 at 13px. A shade darker is 5.6:1. */
body .bh-minute-box:not(.bh-minute-box-highlight):not(.bh-minute-box-dark) small {
    color: #4F6973;
}

/* Phones: the two-value "Quick comparison" table stacked every cell, so its
   header became a black box with an empty first line and the values below
   lost their column names. The header row is dropped and each value carries
   its column name. */
@media (max-width: 640px) {
    body .bh-sauna-maths .bh-compare-table .bh-row-head {
        display: none;
    }

    body .bh-sauna-maths .bh-compare-table .bh-row {
        gap: 4px;
        padding: 14px 16px;
    }

    body .bh-sauna-maths .bh-compare-table .bh-row > div:first-child {
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 800;
        color: #21272F;
    }

    body .bh-sauna-maths .bh-compare-table .bh-row > div:nth-child(n+2) {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
        align-items: baseline;
    }

    body .bh-sauna-maths .bh-compare-table .bh-row > div:nth-child(n+2)::before {
        font-size: 11px;
        font-weight: 800;
        line-height: 1.4;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #0B7A8E;
    }

    body .bh-sauna-maths .bh-compare-table .bh-row > div:nth-child(2)::before {
        content: "Ballyhass";
    }

    body .bh-sauna-maths .bh-compare-table .bh-row > div:nth-child(3)::before {
        content: "Typical others";
    }
}

/* Mallow "Compare the reality": a 960px grid in a 330px scroller on a phone,
   with the rows already stacked, so the values ran off the edge with no
   column names. Each row is now a card: the row name as its title and every
   value labelled with its column. */
@media (max-width: 640px) {
    body .bh-sauna-microtable-wrap {
        overflow: visible;
    }

    body .bh-sauna-microtable {
        min-width: 0;
    }

    body .bh-sauna-microtable .bh-micro-row-head {
        display: block;
        padding: 12px 16px;
    }

    body .bh-sauna-microtable .bh-micro-row-head > div:nth-child(n+2) {
        display: none;
    }

    body .bh-sauna-microtable .bh-micro-row:not(.bh-micro-row-head) > div:first-child {
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 800;
        color: #21272F;
    }

    body .bh-sauna-microtable .bh-micro-row:not(.bh-micro-row-head) > div:nth-child(n+2) {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
        align-items: baseline;
    }

    body .bh-sauna-microtable .bh-micro-row:not(.bh-micro-row-head) > div:nth-child(n+2)::before {
        font-size: 11px;
        font-weight: 800;
        line-height: 1.4;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #0B7A8E;
    }

    body .bh-sauna-microtable .bh-micro-row:not(.bh-micro-row-head) > div:nth-child(2)::before {
        content: "Ballyhass";
    }

    body .bh-sauna-microtable .bh-micro-row:not(.bh-micro-row-head) > div:nth-child(3)::before {
        content: "Beach barrel";
    }

    body .bh-sauna-microtable .bh-micro-row:not(.bh-micro-row-head) > div:nth-child(4)::before {
        content: "City spa";
    }
}

/* The pricing section sits in a legacy accordion whose body adds 20px of
   padding, so its panel ran x=80 to 1360 against 60 to 1380 for the sections
   above, and on a phone the text column was squeezed by three layers of
   padding. The accordion body gives up its padding to this section. */
body .accordion .card-body:has(> .bh-sauna-pricing) {
    padding: 0;
}

@media (max-width: 640px) {
    body .bh-sauna-pricing .bh-price-card,
    body .bh-sauna-pricing .bh-membership-card,
    body .bh-sauna-pricing .bh-membership-details {
        padding: 22px 20px;
    }

    body .bh-sauna-pricing .bh-membership-details .bh-detail-card {
        padding: 18px 16px;
    }
}

/* "Buy Here" sat at three heights because each card's button followed its
   own copy. The cards are columns and the button row takes the spare space. */
body .bh-membership-grid .bh-membership-card {
    display: flex;
    flex-direction: column;
}

body .bh-membership-grid .bh-membership-card > p:last-child {
    margin-top: auto;
    margin-bottom: 0;
}


/* /memberships/ */

/* Sauna cards: "Buy" buttons sat at three heights and their labels wrapped
   inside left-aligned 197px pills. Each button now spans its card, centres
   its label and sits at the foot of the card, so the row lines up. */
body .bh-memberships-page .bh-membership-card-grid-4 .bh-membership-card {
    padding: 24px 22px;
}

body .bh-memberships-page .bh-membership-card-grid-4 .bh-membership-btn {
    align-self: stretch;
    margin-top: auto;
    padding: 14px 8px;
    font-size: 14px;
    text-align: center;
}

body .bh-memberships-page .bh-membership-card-grid-4 .bh-membership-card > ul {
    margin-bottom: 18px;
}

/* Wakeboarding: the monthly card was stretched to the height of the season
   card beside it, leaving about 300px of empty card under its button. It now
   ends with its button. */
body .bh-memberships-page .bh-membership-card-wake-dark {
    align-self: start;
}

/* "Session length 60 mins / Full Ballyhass sauna session": white on #23B4D4,
   2.5:1. Covered by the navy rule for .bh-minute-box-highlight above. */

/* Membership maths kept its own 20px side padding (14px on a phone) inside
   a shell that already has it, so it sat inset from every section above. */
body .bh-memberships-page .bh-membership-maths-inner {
    padding-right: 0;
    padding-left: 0;
}

/* Phones: the "Value snapshot" tables stacked every cell, so the header became
   a black box with an empty first line and the values lost their column
   names. The header row is dropped and each value carries its column name. */
@media (max-width: 640px) {
    body .bh-membership-maths .bh-compare-table .bh-row-head {
        display: none;
    }

    body .bh-membership-maths .bh-compare-table .bh-row {
        gap: 4px;
    }

    body .bh-membership-maths .bh-compare-table .bh-row > div:first-child {
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 800;
    }

    body .bh-membership-maths .bh-compare-table .bh-row:not(.bh-row-dark) > div:first-child {
        color: #21272F;
    }

    body .bh-membership-maths .bh-compare-table .bh-row > div:nth-child(n+2) {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
        align-items: baseline;
    }

    body .bh-membership-maths .bh-compare-table .bh-row > div:nth-child(n+2)::before {
        font-size: 11px;
        font-weight: 800;
        line-height: 1.4;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #0B7A8E;
    }

    body .bh-membership-maths .bh-compare-table .bh-row-dark > div:nth-child(n+2)::before {
        color: #E4FF1A;
    }

    body .bh-membership-maths .bh-compare-card:not(.bh-compare-card-dark) .bh-row > div:nth-child(2)::before {
        content: "Ballyhass Sauna";
    }

    body .bh-membership-maths .bh-compare-card:not(.bh-compare-card-dark) .bh-row > div:nth-child(3)::before {
        content: "Why it matters";
    }

    body .bh-membership-maths .bh-compare-card-dark .bh-row > div:nth-child(2)::before {
        content: "Wake Membership";
    }

    body .bh-membership-maths .bh-compare-card-dark .bh-row > div:nth-child(3)::before {
        content: "What that unlocks";
    }
}

/* /day-passes/ */

/* The All Access card was stretched to the height of the Mallow packages card
   beside it, leaving about 380px of blank card between its bullets and its
   button. On wide screens the tall Mallow card now spans two rows beside the
   All Access and Learn to Wakeboard cards, and the Custom Group Day card runs
   the full width underneath. The narrower right column makes the two sides
   about equal in height at 1440px. Reading order is unchanged. */
@media (min-width: 1081px) {
    body .bh-daypass-options-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }

    body .bh-daypass-options-grid > .bh-daypass-card:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    body .bh-daypass-options-grid > .bh-daypass-card:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    body .bh-daypass-options-grid > .bh-daypass-card:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    body .bh-daypass-options-grid > .bh-daypass-card:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* The full-width card keeps a readable line length for its intro. */
    body .bh-daypass-options-grid > .bh-daypass-card:nth-child(4) .bh-daypass-card-intro {
        max-width: 760px;
    }
}

/* Phones: the hero's dark overlay runs left to right, so on a phone, where
   the copy spans the full width, its right half sat on light sky: parts of
   the heading were 2.5:1 and the "Day passes at Ballyhass" pill 2.1:1. On
   phones the overlay is an even dark wash instead. */
@media (max-width: 640px) {
    body .bh-daypass-hero .bh-daypass-hero-overlay {
        background: linear-gradient(180deg, rgba(7, 26, 47, 0.82) 0%, rgba(7, 26, 47, 0.74) 100%);
    }
}

/* Phones: the "More ways to do Ballyhass in a day" pill wrapped and left
   "DAY" alone on a second line. Slightly tighter type keeps it on one line
   at 390px; on narrower phones it breaks into two even lines. */
@media (max-width: 640px) {
    body .bh-daypass-options-kicker {
        gap: 8px;
        padding: 10px 14px;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-wrap: balance;
    }
}

/* /adventure-pass/ */

/* "Adventure Pass pricing" and the other highlighted card tags: white on
   #23B4D4 at 11px, 2.5:1. Navy is 6.1:1. */
body .bh-adventure-pass-page .bh-ap-card-tag-highlight {
    color: #21272F;
}

/* The dark EUR49 card ended about 370px above the white "What it is" card
   beside it. The white card gets a wider column and a card-sized heading
   (72px set four lines in a 570px card), and the dark card now runs the
   full height: price at the top, details, button and small print at the
   foot. */
@media (min-width: 1121px) {
    body .bh-adventure-pass-page .bh-ap-top-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        align-items: stretch;
    }

    body .bh-adventure-pass-page .bh-ap-main-card h2 {
        font-size: 56px;
        line-height: 1;
    }

    body .bh-adventure-pass-page .bh-ap-price-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    body .bh-adventure-pass-page .bh-ap-price-card .bh-ap-price-meta {
        align-self: stretch;
        margin-top: auto;
    }
}

/* Phones: "Real Ballyhass pricing" was a 900px grid in a 330px scroller, so
   the prices sat off screen with the column names out of view. Each product
   is now a card: its name as the title and each price labelled. */
@media (max-width: 640px) {
    body .bh-adventure-pass-page .bh-ap-price-table-wrap {
        overflow: visible;
    }

    body .bh-adventure-pass-page .bh-ap-price-table {
        min-width: 0;
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row-head {
        display: none;
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row > div:first-child {
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 800;
        color: #21272F;
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row > div:nth-child(n+2) {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 10px;
        align-items: baseline;
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row > div:nth-child(n+2)::before {
        font-size: 11px;
        font-weight: 800;
        line-height: 1.4;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #0B7A8E;
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row > div:nth-child(2)::before {
        content: "Standard / Online";
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row > div:nth-child(3)::before {
        content: "Adventure Pass";
    }

    body .bh-adventure-pass-page .bh-ap-price-table .bh-ap-row > div:nth-child(4)::before {
        content: "Your saving";
    }
}

/* Final call to action: the two buttons sit loose in the card with no row
   around them, so they touched each other (0px) and sat 5px under the
   paragraph. */
body .bh-adventure-pass-page .bh-ap-final-cta p {
    margin-bottom: 24px;
}

body .bh-adventure-pass-page .bh-ap-final-cta > .bh-ap-btn {
    margin: 0 6px 12px;
}

@media (max-width: 640px) {
    body .bh-adventure-pass-page .bh-ap-final-cta > .bh-ap-btn {
        margin: 0 0 12px;
    }

    body .bh-adventure-pass-page .bh-ap-final-cta > .bh-ap-btn:last-child {
        margin-bottom: 0;
    }
}

/* Phones: the big headings kept their 0.95 line height at 43px, so
   descenders met the capitals of the next line. */
@media (max-width: 640px) {
    body .bh-adventure-pass-page .bh-ap-hero h1,
    body .bh-adventure-pass-page .bh-ap-section-intro h2,
    body .bh-adventure-pass-page .bh-ap-main-card h2,
    body .bh-adventure-pass-page .bh-ap-membership-link-copy h2,
    body .bh-adventure-pass-page .bh-ap-final-cta h2 {
        line-height: 1.06;
    }
}

/* /all-access-day-pass/ */

/* The High Nets, Paddle Sports and Archery cards ended about 260px above the
   Aquapark feature card beside them. The column now stretches to the feature
   card's height and the three cards share it. */
@media (min-width: 1025px) {
    body .coachford-aa-build-grid {
        align-items: stretch;
    }

    body .coachford-aa-build-grid .coachford-aa-sidecards {
        grid-auto-rows: 1fr;
    }
}

/* The "HN", "PS" and "AR" letter tiles read as unfinished placeholders. Each
   tile now shows a drawn icon (a climbing net, a paddle, a target) in navy on
   the yellow tile; the letters stay in the markup but are not painted. */
body .coachford-aa-card .coachford-aa-icon {
    font-size: 0;
    color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 54%;
}

body .coachford-aa-card:nth-child(1) .coachford-aa-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321272F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v18M20 3v18M4 6.5q8 5 16 0M4 13q8 5 16 0M9.3 8.6v6.5M14.7 8.6v6.5M4 6.5l5.3 2.1M20 6.5l-5.3 2.1'/%3E%3C/svg%3E");
}

body .coachford-aa-card:nth-child(2) .coachford-aa-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321272F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 14.5l8-8'/%3E%3Cpath d='M14.5 6.5c.5-2 2-3.5 3.5-4 1 .3 2.2 1.5 2.5 2.5-.5 1.5-2 3-4 3.5z'/%3E%3Cpath d='M6.5 14.5c-.5 2-2 3.5-3.5 4 .3 1 1.5 2.2 2.5 2.5'/%3E%3Cpath d='M9 21c1.5-1 3-1 4.5 0s3 1 4.5 0 3-1 4-.5'/%3E%3C/svg%3E");
}

body .coachford-aa-card:nth-child(3) .coachford-aa-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321272F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='13' r='8'/%3E%3Ccircle cx='11' cy='13' r='4'/%3E%3Cpath d='M11 13l9-9M16 4h4v4'/%3E%3C/svg%3E");
}

/* "Book now" sat 2px under the third review card. */
body .coachford-aa-build .coachford-aa-bottomlinks {
    margin-top: 20px;
}

/* "Google review" under each quote: #72839A on #F8FAFC, 3.7:1 at 12px.
   #56657A is 5.7:1. */
body .coachford-aa-testimonial .coachford-aa-source {
    color: #56657A;
}

/* "It feels like a real outing" (dark) ended about 100px above the three
   cards beside it. It now runs their height with its copy centred. */
@media (min-width: 1025px) {
    body .coachford-aa-rhythm-highlight {
        align-items: stretch;
    }

    body .coachford-aa-rhythm-highlight .coachford-aa-rhythm-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body .coachford-aa-rhythm-highlight .coachford-aa-rhythm-main > :first-child {
        align-self: flex-start;
    }
}

/* Included Activities: the white torn edge starts a pixel or two inside the
   yellow section, so a 2-3px yellow line ran down its left side below the
   tear. The tear starts a few pixels further left. */
body .included-pass::after {
    left: -4px;
}

/* Phones: Included Activities was a 789px table in a 358px scroller, so the
   ticks sat off screen away from their column names. Each ticket type is now
   a card: its name as the title and every column labelled. */
@media (max-width: 767px) {
    body .included-pass .table-responsive {
        overflow: visible;
    }

    body .included-pass .pass-details,
    body .included-pass .pass-details tbody,
    body .included-pass .pass-details tr,
    body .included-pass .pass-details th,
    body .included-pass .pass-details td {
        display: block;
    }

    body .included-pass .pass-details {
        padding: 0 16px;
    }

    body .included-pass .pass-details thead {
        display: none;
    }

    body .included-pass .pass-details tbody tr {
        margin-bottom: 14px;
        padding: 16px 18px;
        border: 0;
        border-radius: 20px;
        background: #FFFFFF;
    }

    body .included-pass .pass-details tbody th {
        min-width: 0;
        margin-bottom: 6px;
        padding: 0;
        font-size: 16px;
        font-weight: 800;
        text-align: left;
    }

    body .included-pass .pass-details tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 0;
        min-height: 36px;
        padding: 6px 0;
        border-left: 0;
        border-top: 1px solid rgba(33, 39, 47, 0.10);
        font-size: 15px;
        font-weight: 700;
        text-align: right;
    }

    body .included-pass .pass-details tbody td img {
        width: 22px;
        height: auto;
    }

    body .included-pass .pass-details tbody td::before {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #21272F;
    }

    body .included-pass .pass-details tbody td:nth-of-type(1)::before {
        content: "Cost";
    }

    body .included-pass .pass-details tbody td:nth-of-type(2)::before {
        content: "Aquapark";
    }

    body .included-pass .pass-details tbody td:nth-of-type(3)::before {
        content: "Target Sports";
    }

    body .included-pass .pass-details tbody td:nth-of-type(4)::before {
        content: "Kayaking Tour";
    }

    body .included-pass .pass-details tbody td:nth-of-type(5)::before {
        content: "High Nets";
    }
}

/* /gift-vouchers/ */

/* "Gift vouchers", "Flexible Ballyhass gifting" and "Experience pick" tags:
   white on #23B4D4 at 11px, 2.5:1. Navy is 6.1:1. */
body .bh-gv-page .bh-gv-card-tag-highlight {
    color: #21272F;
}

/* "The easier way to gift Ballyhass" ran about 430px below the dark
   "Year-round gifting" card beside it. As on the Adventure Pass page: a
   wider column and a card-sized heading for the white card, and the dark
   card runs the full height with its details and button at the foot. */
@media (min-width: 1121px) {
    body .bh-gv-page .bh-gv-top-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        align-items: stretch;
    }

    body .bh-gv-page .bh-gv-main-card h2 {
        font-size: 56px;
        line-height: 1;
    }

    body .bh-gv-page .bh-gv-price-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    body .bh-gv-page .bh-gv-price-card .bh-gv-price-meta {
        align-self: stretch;
        margin-top: auto;
    }
}

/* /padel-coming-soon/ */

/* "Get launch updates": the HubSpot v4 form is a cross-origin iframe 892px
   tall with its own light grey (#EEEEEE) panel, so it cannot be restyled.
   Beside it, "Join the First Serve List" floated in about 600px of dark
   space. On wide screens the section is now one centred column, heading
   first and the card under it, and the form sits in a rounded panel of its
   own grey so it reads as a deliberate light card inside the dark one. */
@media (min-width: 981px) {
    body .bh-padel__signup-grid {
        grid-template-columns: minmax(0, 760px);
        justify-content: center;
        gap: 44px;
    }

    body .bh-padel__signup-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
    }
}

body .bh-padel__signup-form {
    overflow: hidden;
    border-radius: 20px;
    background: #EEEEEE;
}

/* "Your details will only be used for relevant Ballyhass Padel updates":
   11px #858A94 on the dark card, 3.5 to 4.1:1. 12px at 78% white. The
   legacy rule sets both with !important, so these must too. */
body .bh-padel__signup-card .bh-padel__privacy {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Phones: 34px of card padding left the form 288px wide. */
@media (max-width: 760px) {
    body .bh-padel__signup-card {
        padding: 26px 18px;
    }
}

/* Small cyan type on the off-white sections failed: the "Why Ballyhass
   Padel" eyebrow (2.1:1), "join in." (2.1:1, under even the 3:1 large text
   minimum) and the "Groups" / "Recover" circle badges. A deeper teal is 5.1:1
   on #F3F1EC. */
body .bh-padel__origin .bh-padel__eyebrow,
body .bh-padel__first h2 span,
body .bh-padel__ecosystem-tag {
    color: #097083;
}

/* The padel purple #8D4489 on the dark panels was 2.7 to 2.8:1: "play.",
   "placed onto it.", the "02" / "04" card numbers and the "01 Movement" /
   "03 Social" labels. A lighter tint of the same purple is 5.6 to 5.8:1. */
body .bh-padel__why-feature h3 span,
body .bh-padel__landscape h2 span,
body .bh-padel__why-card-number,
body .bh-padel__venue-row:not(:nth-child(2)) .bh-padel__venue-row-index {
    color: #C07BBB;
}

/* The circle badges ("Groups", "Youth", "Recover", "Events") set their words
   at 10.9px on desktop and 9.4px on phones. 12px bold, in a slightly larger
   circle. */
body .bh-padel__ecosystem-tag {
    width: 84px;
    height: 84px;
    font-size: 12px;
}

@media (max-width: 760px) {
    body .bh-padel__ecosystem-tag {
        width: 72px;
        height: 72px;
        font-size: 12px;
    }
}

/* Desktop: the four "Try something new" step tiles were 96px wide with 12px
   labels. They now sit two by two with 15px labels; the connector between
   the rows is dropped. */
@media (min-width: 981px) {
    body .bh-padel__origin-visual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 16px;
    }

    body .bh-padel__origin-step {
        min-height: 0;
        padding: 22px 18px;
    }

    body .bh-padel__origin-step strong {
        font-size: 15px;
    }

    body .bh-padel__origin-step:nth-child(2)::after {
        display: none;
    }

    body .bh-padel__origin-step::after {
        right: -15px;
        width: 14px;
    }
}

/* The decorative court drawn behind the "Outdoor courts" panel ran its
   centre lines and service boxes through the feature headings and
   paragraphs. On wide screens only the court outline stays, which runs
   clear of the text; phones, where the panel stacks, leave it out. */
body .bh-padel__venue-court-bg::before,
body .bh-padel__venue-court-bg::after,
body .bh-padel__venue-court-bg .bh-padel__venue-service {
    display: none;
}

@media (max-width: 980px) {
    body .bh-padel__venue-court-bg {
        display: none;
    }
}

/* Phones: the dashed arc and dot in the "Movement that feels like play"
   card are pinned to its foot and ran through the paragraph. The drawing
   now follows the text instead. */
@media (max-width: 760px) {
    body .bh-padel__why-feature {
        min-height: 0;
    }

    body .bh-padel__why-feature-line {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        height: 96px;
        margin-top: 28px;
    }
}

/* Phones: the dark padel wrapper stopped 16px short of each screen edge with
   rounded corners and a wide grey shadow, so every dark section showed grey
   slivers at its sides. It now runs edge to edge. The page column's
   overflow-x:auto has to be released for that, as nothing here scrolls. */
@media (max-width: 760px) {
    .wysywig .col-12:has(.bh-padel-launch-v8) {
        overflow-x: visible;
    }

    body .bh-padel-launch-v8 {
        width: auto;
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        border-radius: 0;
        box-shadow: none;
    }

    /* With the wrapper at the screen edge, the inner column keeps the
       site's 16px phone gutter rather than its own 12px. */
    body .bh-padel-launch-v8 .bh-padel__shell {
        width: min(100% - 32px, 1240px);
    }
}

/* The rounded "04" courts panel let its dark inner columns show square at
   the corners. Clipping the panel to its own radius keeps them inside. */
body .bh-padel__venue-panel {
    clip-path: inset(0 round 32px);
}

@media (max-width: 760px) {
    body .bh-padel__venue-panel {
        border-radius: 24px;
        clip-path: inset(0 round 24px);
    }
}

/* /breathe-and-balance/ */

/* The hero now sits under the navy bar with no photo strip. The gap between
   the event card and "Meet the Facilitators" on a phone is the hero's own
   58px bottom padding; nothing to change there. The accordion headers are
   covered by the shared rule at the top of this group. */

/* "Event snapshot" panel: white text on 10% white glass, with fact tiles at
   8% white, over the light timber of the photo. Labels (11px) were 3.7 to
   4.3:1 and some values 2.9:1. The panel takes a 72% navy fill, as on the
   Wellness hero. */
body .bh-breathe-hero .bh-breathe-panel {
    background: rgba(7, 26, 47, 0.72);
}

/* /nature-biodiversity-workshop/ */

/* "Click here." in "Reserve your place": #0B7A8E on the navy-to-teal
   gradient, 2 to 3:1. Brand yellow, underlined, is 7.1:1 at the gradient's
   lighter end and 11.8:1 at the darker. */
body .bh-bio-final p a {
    color: #E4FF1A;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "What you will explore": five cards in a three-column grid left an empty
   slot. The grid now has six tracks: three cards to the first row, two wider
   ones to the second. On tablets (two columns) the fifth card spans both. */
@media (min-width: 1081px) {
    body .bh-bio-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body .bh-bio-grid > .bh-bio-card {
        grid-column: span 2;
    }

    body .bh-bio-grid > .bh-bio-card:nth-child(4),
    body .bh-bio-grid > .bh-bio-card:nth-child(5) {
        grid-column: span 3;
    }
}

@media (min-width: 701px) and (max-width: 1080px) {
    body .bh-bio-grid > .bh-bio-card:nth-child(5):last-child {
        grid-column: 1 / -1;
    }
}

/* "Reserve your place" sat on the "Workshop Highlights" accordion with no
   space between them. */
body .bh-biodiversity-event {
    padding-bottom: 48px;
}

/* /wellness/ */

/* "Find your Ballyhass reset": white text on 12% white frosted glass over
   the lightest part of the photo, light blurred water. The panel now has a
   72% navy fill: even over pure white the text is 7.0:1 and its 86% white
   copy 5.9:1. */
body .bh-wellness-hero .bh-wellness-hero-panel {
    background: rgba(7, 26, 47, 0.72);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Breathe & Balance feature: the photo filled only the top 330px of a 520px
   frame, because a percentage height cannot resolve against a min-height.
   The photo now fills the frame. */
body .bh-wellness-feature-image img {
    position: absolute;
    inset: 0;
}

/* "Why Ballyhass wellness": on two-column widths the third card, "Better for
   repeat visits", sat alone beside an empty column. It spans the row. Its
   one short sentence is a content matter (see report). */
@media (min-width: 761px) and (max-width: 1160px) {
    body .bh-wellness-proof-grid > .bh-wellness-proof-card:nth-child(3):last-child {
        grid-column: 1 / -1;
    }
}

/* /family-adventure-weekends/ */

/* The Bunkhouse Village logo is drawn for a light background: its
   "Ballyhass" and "Family | Adventure | Camping" words are navy, and on the
   dark aerial photo they all but disappeared. The logo now sits on a white
   plate, unaltered, with room around it. */
body .bunkhouse-weekend-hero__logo img {
    max-width: 300px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(7, 26, 47, 0.25);
}

/* "Friday to Sunday" under each date (13px at 84% white) and the "From
   EUR110pp" note sat on 12% white tiles over the purple panel, 3.4 to 3.7:1.
   The tiles take a 20% navy tint instead: 5.2:1 and 5.6:1. The labels also
   go up to 14px. */
body .bunkhouse-weekend-dates__card,
body .bunkhouse-weekend-dates__summary {
    background: rgba(33, 39, 47, 0.2);
    border-color: rgba(255, 255, 255, 0.14);
}

body .bunkhouse-weekend-dates__card span,
body .bunkhouse-weekend-hero__date span {
    font-size: 14px;
}

/* /ballyhass-open-2026/ */

/* "Ride for the top spot" prize cards: 11px labels at 80% white and bold
   white titles on 13% white glass over the aqua end of the gradient, about
   2:1 on the lightest card. The cards take a 60% navy fill: titles 7.1:1 and
   the 90% white labels 6.1:1 even over pure #00B6D9. Labels go to 12px. */
body .bh-open-prizes .bh-open-prizeCards > div {
    background: rgba(33, 39, 47, 0.6);
    border-color: rgba(255, 255, 255, 0.16);
}

body .bh-open-prizes .bh-open-prizeCards p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

/* The prizes section runs from #08678A to the aqua #00B6D9, and its copy
   ("Wakeboards are on offer...") sat over the middle of that at 3.1:1 (the
   kicker 4.4:1 on phones). The section now runs from a deeper blue through
   brand teal #0B7A8E behind the copy and only reaches aqua at the far
   corner, behind the navy prize cards. */
body .bh-open-prizes {
    background: linear-gradient(125deg, #07526E 0%, #0B7A8E 55%, #00B6D9 100%);
}

/* Its copy goes from 80% to solid white: 5.4:1 at its lightest. */
body .bh-open-prizes .bh-open-prizeInner > div > p {
    color: #FFFFFF;
}

/* "Two steps to secure your place." The paragraph sat directly on the
   heading's last line. */
body .bh-open-entryIntro h2 + p {
    margin-top: 20px;
}

/* Event card: "Step 1: Register" wrapped its arrow onto a second line in a
   127px button. Letter spacing and side padding come in so it stays on one
   line. */
body .bh-open-eventActions .bh-open-btn {
    padding-right: 8px;
    padding-left: 8px;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Phones: "Your place is secured only when both steps are complete" was
   12px at 62% white over the busiest part of the photo. It now sits on a
   dark plate at 88% white and 13px: 7.9:1 even where the photo under the
   plate is pure white. */
@media (max-width: 600px) {
    body .bh-open-hero .bh-open-micro {
        display: inline-block;
        margin-top: 12px;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(12, 17, 22, 0.78);
        font-size: 13px;
        color: rgba(255, 255, 255, 0.88);
    }
}

/* Small type on the light sections fell just short of AA: the teal kickers
   ("The big day is back", 4.3:1 at 11px), the "Beginner friendly" and
   "Obstacle standard" tags (4.2 to 4.5:1 at 10px), the grey "01" / "02"
   numbers (3.2:1) and the itinerary notes (#748292, 3.9:1 at 13px). A
   deeper teal is 5.4 to 5.6:1 on all three tints, the greys go darker
   (5.5:1 and 6.2:1) and the tags go up to 11px. */
body .bh-open-page .bh-open-kicker:not(.bh-open-dark) {
    color: #066C80;
}

body .bh-open-category:not(.bh-open-open) .bh-open-categoryTop b {
    font-size: 11px;
    color: #066C80;
}

body .bh-open-category:not(.bh-open-open) .bh-open-categoryTop span {
    color: #5E6B78;
}

body .bh-open-dayCard li small {
    color: #56636F;
}

/* "01" to "03" on the dark format cards were 25% white, 2.2:1. 60% white
   is 5.5:1. */
body .bh-open-formatGrid article > strong {
    color: rgba(255, 255, 255, 0.6);
}

/* /ballyhass-showcase-day/ */

/* "Register your interest": the contact panel repeated the card's own
   heading, and the card was stretched to the dark "Join the Priority List"
   card beside it with the panel at its top, so most of it was empty. The
   repeated heading is not painted, the card gets a narrower column (so the
   two cards are close in natural height: 349px and 242px), the panel fills
   the card with its copy centred, and the contact copy goes up to 16px with
   bold links. */
@media (min-width: 981px) {
    body .bh-showcase-form-block {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    }
}

body .bh-showcase-form-shell {
    display: flex;
    flex-direction: column;
}

body .bh-showcase-form-shell .bh-showcase-form-placeholder {
    flex: 1 1 auto;
}

body .bh-showcase-form-placeholder > div > strong:first-child {
    display: none;
}

body .bh-showcase-form-placeholder span {
    font-size: 16px;
    color: #21272F;
}

body .bh-showcase-form-placeholder a {
    font-weight: 700;
    color: #0B7A8E;
}

/* Phones: the "Groups • Schools • Corporate • Clubs" pill wrapped and left
   "CLUBS" alone on a second line. Tighter tracking and size keep it on one
   line at 390px; on narrower phones it breaks into two even lines. */
@media (max-width: 640px) {
    body .bh-showcase-kicker {
        padding: 8px 12px;
        font-size: 11px;
        letter-spacing: 0.04em;
        text-wrap: balance;
    }
}

/* Hero: the navy-to-aqua wash over the photo turns light towards the lower
   right, so the intro copy fell to 4.0:1 and the "No date live right now"
   card (white on 12% white glass) to 2.7:1; on phones the "Explore Group
   Experiences" outline button was 3.8:1. A further navy-to-teal layer sits
   over the photo, and the card and the outline button take navy fills. */
body .bh-showcase-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(33, 39, 47, 0.3) 0%, rgba(7, 60, 72, 0.55) 100%);
    pointer-events: none;
}

body .bh-showcase-hero .bh-showcase-hero-inner {
    z-index: 1;
}

body .bh-showcase-hero .bh-showcase-hero-card {
    background: rgba(33, 39, 47, 0.62);
}

body .bh-showcase-hero .bh-showcase-btn-secondary {
    background: rgba(33, 39, 47, 0.45);
}

/* Phones (Gift Vouchers, same design family as the Adventure Pass page):
   the big headings kept their 0.95 line height at 43px, so descenders met
   the capitals of the next line. */
@media (max-width: 640px) {
    body .bh-gv-page .bh-gv-hero h1,
    body .bh-gv-page .bh-gv-section-intro h2,
    body .bh-gv-page .bh-gv-main-card h2,
    body .bh-gv-page .bh-gv-membership-link-copy h2,
    body .bh-gv-page .bh-gv-final-cta h2,
    body .bh-gv-page .bh-gv-uses-copy h2 {
        line-height: 1.06;
    }
}

/* ===========================================================================
 * Camps, calculators and birthday pages
 * ======================================================================== */

/* ===========================================================================
 * Group 2: camps, calculators and birthday pages (review fixes, 24 Oct 2026)
 * ======================================================================== */

/* /mallow-cadets/, /mallow-cutting-edge/, /asd-active-adventurers1/
   The three pages share one recovered design (bh-cadets-v1,
   bh-cutting-edge-v1, bh-asd-camp-v1), so they share these rules. */

/* "Cadets at a glance": each fact row carries an inline border-color, and
   WordPress's global styles turn any inline border-color into a solid border
   on all four sides at the default 3px. The rows became boxes with the labels
   on their left edge and the values on their right. The design is a divider
   under each row, as in the booking card. */
.bh-cadets-v1__panel--dark .bh-cadets-v1__fact {
    border-width: 0 0 1px;
}

.bh-cadets-v1__panel--dark .bh-cadets-v1__fact:last-child {
    border-bottom-width: 0;
}

/* "The parent translation", "Pricing" and "Join the waiting list" headings
   sat directly on their first paragraph. */
.bh-cadets-v1__panel--yellow h3,
.bh-cutting-edge-v1__panel--yellow h3,
.bh-asd-camp-v1__panel--yellow h3,
.bh-asd-camp-v1__waitlist-card h3 {
    margin-bottom: 12px;
}

/* "Book online" touched the last price card. */
.bh-cadets-v1__price-stack + .bh-cadets-v1__btn,
.bh-cutting-edge-v1__price-stack + .bh-cutting-edge-v1__btn {
    margin-top: 18px;
}

/* Comparison cards: the button is pushed to the foot of the card, so on the
   fullest card it sat straight under the description. The description keeps
   a gap; the buttons still line up across the row. */
.bh-cadets-v1 .bh-cadets-v1__compare-card p,
.bh-cutting-edge-v1 .bh-cutting-edge-v1__compare-card p {
    margin-bottom: 18px;
}

/* "What to bring" cards had a fixed 132px height, about 25px more than their
   text needs, and 60px more on phones where they stack. Rows still share the
   height of their tallest card. */
.bh-cadets-v1__bring,
.bh-cutting-edge-v1__bring,
.bh-asd-camp-v1__bring {
    min-height: 0;
}

/* Booking card ("Age", "Time", "Location"): 12px grey labels on the card's
   pale gradient, 4.2 to 4.4:1. */
.bh-cadets-v1__booking-card .bh-cadets-v1__fact b,
.bh-cutting-edge-v1__booking-card .bh-cutting-edge-v1__fact b,
.bh-asd-camp-v1__booking-card .bh-asd-camp-v1__fact b {
    color: #57606A;               /* 5.9:1 */
}

/* Closing call to action ("Ready for their first Ballyhass week?"): a
   yellow glow sat right behind the start of the heading and turned olive on
   the navy, which reads as a smudge. The blue glow on the right stays. */
.bh-cadets-v1__cta {
    background:
        radial-gradient(circle at 85% 20%, rgba(0, 182, 217, 0.3) 0, rgba(0, 182, 217, 0) 32%),
        linear-gradient(135deg, #21272F 0%, #142F3A 100%);
}

.bh-cutting-edge-v1__cta {
    background:
        radial-gradient(circle at 85% 20%, rgba(0, 182, 217, 0.3) 0, rgba(0, 182, 217, 0) 32%),
        linear-gradient(135deg, #21272F 0%, #123E62 100%);
}

.bh-asd-camp-v1__cta {
    background:
        radial-gradient(circle at 85% 20%, rgba(0, 182, 217, 0.3) 0, rgba(0, 182, 217, 0) 32%),
        linear-gradient(135deg, #21272F 0%, #143D4D 100%);
}

/* "Join the waiting list" (ASD): the same olive glow beside the heading and
   intro. */
.bh-asd-camp-v1__waitlist-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.22), transparent 34%),
        linear-gradient(135deg, #17222B 0%, #21272F 100%);
}

/* ASD: the page ends with two legacy accordion cards ("How to book?",
   "FAQ's"), and the footer's torn edge rose over the last one's rule. */
.wysywig:has(.bh-asd-camp-v1) + .accordion {
    margin-bottom: 56px;
}

/* Cutting Edge, "Summer 2026 wake weeks": two week rows on the left beside a
   pricing column of four cards, which ran 540px further down and left a
   white hole under the dates. Pricing takes the full width under the dates,
   its four cards in one row. */
@media (min-width: 981px) {
    .bh-cutting-edge-v1__date-price {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-cutting-edge-v1__date-price .bh-cutting-edge-v1__price-stack {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-cutting-edge-v1__date-price .bh-cutting-edge-v1__panel--yellow p {
        max-width: 46rem;
    }
}

@media (max-width: 640px) {
    /* Hero eyebrow: the text wraps on a phone, the dot was squeezed into a
       tall capsule and floated beside the middle of the two lines. The dot
       keeps its size and sits on the first line; the pill becomes a rounded
       box, and smaller text lets the Cadets line fit on one line. */
    .bh-cadets-v1 .bh-cadets-v1__eyebrow,
    .bh-cutting-edge-v1 .bh-cutting-edge-v1__eyebrow,
    .bh-asd-camp-v1 .bh-asd-camp-v1__eyebrow {
        align-items: flex-start;
        border-radius: 18px;
        font-size: 12px;
        letter-spacing: 0.06em;
        line-height: 1.45;
        text-wrap: balance;
    }

    .bh-cadets-v1__eyebrow span,
    .bh-cutting-edge-v1__eyebrow span,
    .bh-asd-camp-v1__eyebrow span {
        flex: none;
        margin-top: 4px;
    }

    /* The four hero chips ("Half Day Format", "Aquapark Included") stacked
       as full-width boxes that looked like four more buttons under the real
       ones. They wrap as chips. */
    .bh-cadets-v1__mini-trust,
    .bh-cutting-edge-v1__mini-trust,
    .bh-asd-camp-v1__mini-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .bh-cadets-v1__mini-trust span,
    .bh-cutting-edge-v1__mini-trust span,
    .bh-asd-camp-v1__mini-trust span {
        min-height: 0;
        padding: 7px 12px;
        border-radius: 999px;
    }

    /* Week dates: the text sat at the top of each row beside a month badge
       centred in it. */
    .bh-cadets-v1__date,
    .bh-cutting-edge-v1__date {
        align-items: center;
    }
}

/* /mallow-troopers/ and /coachford-explorers/ */

/* "Activity highlights": the text fills the whole card, but the shade only
   darkened its bottom third, so the badges, titles and descriptions sat on
   bright sky and spray (badges 1.3 to 3.5:1, titles from 2.1:1, body from
   3.1:1, measured over the lightest 5% of each photo). The shade is darker
   from the top, the photo still shows through it, and the badges and the
   activity chips get a dark fill of their own. */
.bh-troopers-week-v4__activity::before,
.bh-explorers-week-v4__activity::before {
    background: linear-gradient(180deg, rgba(18, 22, 26, 0.52) 0%, rgba(18, 22, 26, 0.72) 42%, rgba(18, 22, 26, 0.9) 100%);
}

.bh-troopers-week-v4__badge,
.bh-explorers-week-v4__badge,
.bh-troopers-week-v4__activity-list li,
.bh-explorers-week-v4__activity-list li {
    background: rgba(18, 22, 26, 0.72);
    border-color: rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
}

/* Hero fact tiles ("Group size", "Good to know"): 11px labels in 72% white
   on frosted glass over the photo, 4.3:1 where the photo is lightest. */
.bh-troopers-main-hero__micro-label,
.bh-explorers-main-hero__micro-label {
    color: rgba(255, 255, 255, 0.86);
}

/* Explorers section eyebrows ("Planning Support", "Find the Right Fit",
   "Practical Help", "Need-to-Know Answers") were Ballyhass Blue on white,
   2.3 to 2.4:1. */
.bh-explorers-bus__eyebrow,
.bh-explorers-bestfor__eyebrow,
.bh-explorers-bring-v2__eyebrow,
.bh-explorers-faq-grouped__eyebrow {
    color: #0B5D6B;               /* 7.5:1 */
}

/* Troopers "Is Troopers the right fit?": the "At a glance" card is a 28%
   dark glass over a header that fades to Ballyhass Blue, and its label and
   list fell to 3.8 to 4.1:1 at the light end. A darker glass. */
.bh-troopers-fit__side-card {
    background: rgba(9, 19, 28, 0.6);
}

/* "What a Troopers week can look like": the shade over the photo faded to
   a 45% Ballyhass Blue at the bottom right, where the intro ends on a
   phone, 3.0:1 over the lightest sky. The fade ends on a dark teal. */
.bh-troopers-week-v4__hero {
    background:
        linear-gradient(135deg, rgba(33, 39, 47, 0.88) 0%, rgba(17, 51, 69, 0.82) 55%, rgba(11, 79, 92, 0.8) 100%),
        url("/wp-content/uploads/2026/10/Islander_-_Pure_Cork_-_Ballyhass_-_828229-scaled.jpg") center center / cover no-repeat;
}

.bh-explorers-week-v4__hero {
    background:
        linear-gradient(135deg, rgba(33, 39, 47, 0.88) 0%, rgba(17, 51, 69, 0.82) 55%, rgba(11, 79, 92, 0.8) 100%),
        url("/wp-content/uploads/2026/10/P1073514-scaled.jpg") center center / cover no-repeat;
}

/* The yellow badge variant was pale yellow text on a 22% yellow tint over
   the photo (1.9:1). The brand's yellow chip with navy text. */
.bh-troopers-week-v4__badge--yellow,
.bh-explorers-week-v4__badge--yellow {
    background: #E4FF1A;
    border-color: #E4FF1A;
    color: #21272F;               /* 13.34:1 */
}

/* /birthday-chaos-calculator/ */

/* Pink labels on white and on a pale pink tint: "Ballyhass Party Lab" in
   the hero card (2.7:1) and the "Party crew size" count (3.1:1). A deeper
   shade of the brand pink. */
.bh-chaos-birthday .bh-chaos-birthday__lab-label,
.bh-chaos-birthday__range-row span:last-child {
    color: #B8295F;               /* 5.2:1 on the tint, 6.0:1 on white */
}

/* Section eyebrows ("Run the numbers", "The serious science bit") were
   yellow text on a 14% yellow tint over white, 1.1:1. The brand's yellow
   chip with navy text, which also reads on the dark cards. */
.bh-chaos-birthday .bh-chaos-birthday__eyebrow {
    background: #E4FF1A;
    color: #21272F;               /* 13.34:1 */
}

/* Party card headers: Paddle and Zipline faded to Ballyhass Blue and Add A
   Second Activity to Ballyhass Pink on the right, under white titles (2.7 to
   2.9:1) and white tags (2.2 to 3.0:1). Each gradient now ends on a darker
   shade of its colour, and the light glows in the corner are gone. White
   text clears 4.6:1 at the light end of every header. */
.bh-chaos-birthday__release-top {
    background: linear-gradient(135deg, #21272F, #18324A);
}

.bh-chaos-birthday__release:nth-child(2) .bh-chaos-birthday__release-top {
    background: linear-gradient(135deg, #0B4F5C, #007F9B);   /* white 4.66:1 at #007F9B */
}

.bh-chaos-birthday__release:nth-child(3) .bh-chaos-birthday__release-top {
    background: linear-gradient(135deg, #14516E, #0B7A8E);   /* white 5.0:1 at #0B7A8E */
}

.bh-chaos-birthday__release:nth-child(4) .bh-chaos-birthday__release-top {
    background: linear-gradient(135deg, #143D2F, #226E54);
}

.bh-chaos-birthday__release:nth-child(5) .bh-chaos-birthday__release-top {
    background: linear-gradient(135deg, #59243D, #B8295F);   /* white 6.0:1 at #B8295F */
}

.bh-chaos-birthday .bh-chaos-birthday__tag {
    background: rgba(18, 22, 26, 0.42);
}

/* The yellow glows on the navy cards turned olive where they sat behind the
   headings ("Indoor containment failure likely", "Parents choose
   Ballyhass", "Send us your birthday details") and read as a smudge, and on
   the white "A Ballyhass birthday" card as a stain. A small blue glow in the
   corner instead, clear of the text. */
.bh-chaos-birthday__serious-card,
.bh-chaos-birthday__form-intro {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.22), transparent 34%),
        linear-gradient(135deg, #21272F, #18324A);
}

.bh-chaos-birthday__result {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.22), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(255, 79, 142, 0.28), transparent 30%),
        linear-gradient(135deg, #21272F, #18324A);
}

.bh-chaos-birthday__versus-card--outdoor {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.14), transparent 40%),
        linear-gradient(135deg, #FFFFFF, #ECFAFE);
}

/* "Send us your birthday details": a 220px card beside a 1,600px enquiry
   form, then a long empty dark column. The card travels with the form while
   it is in view, as the Feedback page's tips card does (refinements.css,
   section 26). Two scroll containers that never scroll stopped sticky
   working: main.min.css gives every .wysywig .col-12 overflow-x: auto, and
   the page's own section hides its overflow to trim the hero decorations.
   The column is released here only, and the section clips instead, which
   trims the same overflow without making a scroll container. The score
   panel beside the calculator (already sticky in refinements.css) starts
   working too. */
@media (min-width: 981px) {
    .wysywig .col-12:has(.bh-chaos-birthday) {
        overflow-x: visible;
    }

    .bh-chaos-birthday {
        overflow: clip;
    }

    .bh-chaos-birthday__form-shell > .bh-chaos-birthday__form-intro {
        position: sticky;
        top: 120px;
    }
}

/* /plan-your-ballyhass-birthday-party/ and /birthday-parties-at-ballyhass/
   Two versions of one design (bh-bp-*, bh-bday-party-v5__*). The party cards
   and glows match the Birthday Chaos Calculator's. */

/* Section eyebrows ("Birthday party finder", "Party calculator") were
   Ballyhass Blue on a 14% blue tint, 2.1 to 2.2:1. #0B7A8E reaches only
   4.4:1 on that tint, so the darker teal used for venue tags. */
.bh-bp-safe .bh-bp-eye:not(.light),
.bh-bday-party-v5 .bh-bday-party-v5__eyebrow:not(.bh-bday-party-v5__eyebrow--light) {
    color: #0B5D6B;               /* 6.6:1 on the tint */
}

/* Venue tags on the activity cards ("Mallow / Coachford") and the
   calculator's head count ("12") were #0089C6 on near-white, 3.7 to 3.9:1. */
.bh-bday-party-v5 .bh-bday-party-v5__location,
.bh-bp-safe .bh-bp-control label span {
    color: #0B7A8E;               /* 4.8:1 on #F2FAFD, 5.0:1 on white */
}

/* Party card headers: Paddle and Zipline faded to Ballyhass Blue under white
   titles (2.7 to 3.0:1) and white tags (2.2 to 2.5:1). Darker gradient ends,
   no light glow in the corner, and a darker fill behind the tags. */
.bh-bp-act-top {
    background: linear-gradient(135deg, #21272F, #18324A);
}

.bh-bp-act:nth-child(2) .bh-bp-act-top {
    background: linear-gradient(135deg, #0B4F5C, #007F9B);   /* white 4.66:1 at #007F9B */
}

.bh-bp-act:nth-child(3) .bh-bp-act-top {
    background: linear-gradient(135deg, #14516E, #0B7A8E);   /* white 5.0:1 at #0B7A8E */
}

.bh-bp-act:nth-child(4) .bh-bp-act-top {
    background: linear-gradient(135deg, #143D2F, #226E54);
}

.bh-bp-safe .bh-bp-tag {
    background: rgba(18, 22, 26, 0.42);
}

/* The yellow glows behind the headings of the navy cards turned olive and
   read as smudges; on the light cards they read as stains. A small blue glow
   in the corner instead, clear of the text. */
.bh-bp-main,
.bh-bp-result,
.bh-bp-form-intro,
.bh-bday-party-v5__offer-main,
.bh-bday-party-v5__package-top,
.bh-bday-party-v5__form-intro {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.22), transparent 34%),
        linear-gradient(135deg, #21272F, #18324A);
}

.bh-bp-side,
.bh-bday-party-v5__offer-side {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.14), transparent 40%),
        linear-gradient(135deg, #EAF9FC, #FFFFFF);
}

/* The grey body text on those light cards ("Your Ballyhass adventure rep
   meets the group...") was #617582 on the pale blue, 4.5:1 at best. */
.bh-bp-safe .bh-bp-side p,
.bh-bday-party-v5 .bh-bday-party-v5__offer-side p {
    color: #57606A;               /* 5.8:1 */
}

.bh-bp-compare-card.good {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.14), transparent 40%),
        linear-gradient(135deg, #FFFFFF, #ECFAFE);
}

/* "Minimum group: 8 paid" broke onto two lines in its 150px tile. */
.bh-bp-price strong,
.bh-bday-party-v5__price-card strong {
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    white-space: nowrap;
}

/* "2 hrs" filled its 46px square edge to edge. The badge grows with its
   text and keeps the square for single words. */
.bh-bp-icon,
.bh-bday-party-v5__icon {
    width: fit-content;
    min-width: 46px;
    padding: 0 9px;
}

/* The page resets every ul and p margin to zero, which beat the margins the
   design gave its own lists and notes: the last bullet of a party card or of
   the package sat 0 to 3px above its button, and the estimate's footnote
   touched the last chip above it. */
.bh-bp-safe .bh-bp-list {
    margin-bottom: 18px;
}

.bh-bday-party-v5 .bh-bday-party-v5__list {
    margin: 18px 0 24px;
}

/* The birthday page's bullet lists with a live price inside a sentence (Eoghan, 5 November 2026,
   comment 11932724 point 4: "pricing and minimum-number wording is wrapping awkwardly into very short
   lines"). The legacy rule makes each item a two-column grid, a 10px dot then the text, so a price
   shown by [ballyhass_birthday_price] became a third and fourth grid cell: "per paid participant" and
   "8 children" each wrapped in a 10px column. Each item is a block with its dot placed beside it, so
   the sentence runs on as one line of text. The prices and terms are unchanged. */
.bh-bday-party-v5 .bh-bday-party-v5__form-points > div,
.bh-bday-party-v5 .bh-bday-party-v5__list > li,
body .bh-bp-form-points > div {
    display: block;
    position: relative;
    padding-left: 20px;
}

.bh-bday-party-v5 .bh-bday-party-v5__form-points > div::before,
.bh-bday-party-v5 .bh-bday-party-v5__list > li::before,
body .bh-bp-form-points > div::before {
    position: absolute;
    top: 0.45em;
    left: 0;
    margin: 0;
}

.bh-bp-safe .bh-bp-calc-note,
.bh-bday-party-v5 .bh-bday-party-v5__summary {
    margin-top: 16px;
}

/* Calculator drop-downs: bootstrap-select replaces the select with a 220px
   grey button inside the select's own bordered box, so the box showed a
   second border and grey pill inside it, and cut the labels to "Aquapark
   Birthday" and "No extra cost for nc". The box is the control now: full
   width, one border, the label left-aligned and whole. The plugin's width
   rule has four classes of weight, hence the extra classes here. */
body .bh-bp-control .dropdown.bootstrap-select.bh-bp-select,
body .bh-bday-party-v5__control .dropdown.bootstrap-select.bh-bday-party-v5__select {
    width: 100%;
    padding: 0;
}

.bh-bp-control .bootstrap-select > .dropdown-toggle,
.bh-bday-party-v5__control .bootstrap-select > .dropdown-toggle {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #21272F;
    font-weight: 800;
    text-align: left;
}

/* Party finder: the four route cards (Aquapark, Paddle, Zipline, High Nets)
   were squeezed four across the left column, about 120px each, one or two
   words a line. Two across. */
@media (min-width: 1121px) {
    .bh-bp-finder .bh-bp-routes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Hero card ("One activity, a Ballyhass host, food afterwards..."): the
   white panel is pinned to the bottom of a fixed-height photo card and is
   taller than it, so its "Birthday package" label and the start of its
   heading were cut off at the card's top edge (on a phone the whole
   heading). The panel sits in the flow, so the card grows to fit it and
   keeps a band of photo above. */
.bh-bp-hero-card,
.bh-bday-party-v5__hero-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bh-bp-safe .bh-bp-hero-card-inner,
.bh-bday-party-v5 .bh-bday-party-v5__hero-card-inner {
    position: relative;
    inset: auto;
    margin: 72px 22px 22px;
}

@media (max-width: 720px) {
    .bh-bp-safe .bh-bp-hero-card-inner,
    .bh-bday-party-v5 .bh-bday-party-v5__hero-card-inner {
        margin: 56px 14px 14px;
    }
}

/* That label was #0089C6 on the white panel, 3.9:1. */
.bh-bp-card-kicker,
.bh-bday-party-v5__hero-card-kicker {
    color: #0B5D6B;               /* 7.0:1 on the panel */
}

/* Party estimate: "Estimated party total" was #617582 (4.45:1) and "€30 per
   paid participant" #0089C6 (3.7:1) on the panel's pale blue. */
.bh-bp-safe .bh-bp-total-line span,
.bh-bday-party-v5 .bh-bday-party-v5__price-line span {
    color: #57606A;               /* 5.8:1 */
}

.bh-bp-safe .bh-bp-per,
.bh-bday-party-v5 .bh-bday-party-v5__price-per {
    color: #0B5D6B;               /* 6.8:1 */
}

/* FAQs: 900px wide under sections and card grids 1,065px wide. Same width
   as the rest of the page. */
.bh-bp-safe .bh-bp-faq,
.bh-bday-party-v5 .bh-bday-party-v5__faq {
    max-width: none;
}

/* The first answer is open on load, but every toggle is a fixed "+" that
   the page's script never changes. An open item shows a minus. */
.bh-bp-faq-item.open .bh-bp-faq-q span:last-child {
    font-size: 0;
}

.bh-bp-faq-item.open .bh-bp-faq-q span:last-child::before {
    content: "\2212";
    font-size: 1.2rem;
}

/* "Send us your birthday details" beside the 1,600px enquiry form: as on
   the Chaos Calculator, the card travels with the form, and the finder's
   result panel (sticky in refinements.css) starts working. */
@media (min-width: 981px) {
    .wysywig .col-12:has(.bh-bp-safe),
    .wysywig .col-12:has(.bh-bday-party-v5) {
        overflow-x: visible;
    }

    .bh-bp-safe,
    .bh-bday-party-v5 {
        overflow: clip;
    }

    .bh-bp-form > .bh-bp-form-intro,
    .bh-bday-party-v5__form-shell > .bh-bday-party-v5__form-intro {
        position: sticky;
        top: 120px;
    }
}

/* All three calculators (Chaos, Plan Your Birthday, Summer Survival), at
   980px and below: the result panel stops being sticky and stacks under the
   questions, but refinements.css section 28 still gives it top: 86px
   !important for the sticky case. On a relatively positioned panel that
   pushed it 86px down, leaving a 108px hole above it and sliding it 86px
   over the section below. !important to beat that rule. */
@media (max-width: 980px) {
    body .bh-chaos-birthday__result,
    body .bh-bp-result,
    body .bh-camp-survival__result {
        top: auto !important;
    }
}

/* /parent-summer-survival-calculator/ */

/* Camp card headers: Cadets and Coachford Explorers faded to Ballyhass
   Blue, Teenage Watersports to Ballyhass Pink and Residential Camp to a
   light orange, under white titles (from 2.7:1) and white tags such as
   "Smallies sorted" (from 2.8:1). Each gradient ends on a darker shade of
   its colour, with no light glow in the corner, and the tags get a darker
   fill. White clears 4.6:1 at the light end of every header. */
.bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #21272F, #18324A);
}

.bh-camp-survival__camp:nth-child(2) .bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #0B4F5C, #007F9B);   /* white 4.66:1 at #007F9B */
}

.bh-camp-survival__camp:nth-child(3) .bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #14516E, #0B7A8E);   /* white 5.0:1 at #0B7A8E */
}

.bh-camp-survival__camp:nth-child(4) .bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #143D2F, #226E54);
}

.bh-camp-survival__camp:nth-child(5) .bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #59243D, #B8295F);   /* white 6.0:1 at #B8295F */
}

.bh-camp-survival__camp:nth-child(6) .bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #2B214A, #7C3AED);   /* white 5.7:1 at #7C3AED */
}

.bh-camp-survival__camp:nth-child(7) .bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #3C3C3B, #1862B0);   /* white 6.2:1 at #1862B0 */
}

.bh-camp-survival__camp:nth-child(8) .bh-camp-survival__camp-top {
    background: linear-gradient(135deg, #5A351A, #A86214);   /* white 4.75:1 at #A86214 */
}

.bh-camp-survival .bh-camp-survival__tag {
    background: rgba(18, 22, 26, 0.42);
}

/* Hero eyebrow ("The parent summer survival calculator"): yellow on a 14%
   yellow tint, over the hero's pink glow on a phone, 4.3:1 at worst. A dark
   fill under it. */
.bh-camp-survival__hero .bh-camp-survival__eyebrow {
    background: rgba(18, 22, 26, 0.6);
}

/* "Ballyhass Parent Lab" was Ballyhass Pink on a pale pink tint, 2.7:1. */
.bh-camp-survival .bh-camp-survival__lab-label {
    color: #B8295F;               /* 5.2:1 on the tint */
}

/* The yellow glows on the navy cards turned olive behind the headings and
   read as smudges; on the light "A Ballyhass camp plan" card as a stain. A
   small blue glow in the corner instead, clear of the text. */
.bh-camp-survival__serious-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.22), transparent 34%),
        linear-gradient(135deg, #21272F, #18324A);
}

.bh-camp-survival__result {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.22), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(255, 79, 142, 0.26), transparent 30%),
        linear-gradient(135deg, #21272F, #18324A);
}

.bh-camp-survival__compare-card--highlight {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 182, 217, 0.14), transparent 40%),
        linear-gradient(135deg, #FFFFFF, #ECFAFE);
}

/* The result panel beside the calculator is sticky in refinements.css but
   never stuck: the page's section hid its overflow and .wysywig .col-12
   scrolls on x, two scroll containers that never scroll. The column is
   released here only and the section clips instead. */
@media (min-width: 981px) {
    .wysywig .col-12:has(.bh-camp-survival) {
        overflow-x: visible;
    }

    .bh-camp-survival {
        overflow: clip;
    }
}

/* /mallow-troopers/, /residential-camp-new/, /mallow-one-day-warriors/
   Everything below the hero is a legacy accordion whose cards each hold a
   whole designed section. The first card is open on load, so a blue
   accordion header with a minus sign sat over a designed section that
   repeats the same title ("What A Troopers Week Looks like" over "What a
   Troopers week can look like", "Settling In", "When It Runs"), and
   pressing it, or opening any other card, hid that section. Each rule below
   is keyed to the section in that page's first card. */

/* The first card's header is hidden and its section always shows, so it
   reads as the next section of the page. Bootstrap animates a closing card
   with an inline height, which only !important can override. */
.accordion:has(> .card:first-child .bh-troopers-week-v4) > .card:first-child > .card-header,
.accordion:has(> .card:first-child .bh-residential-support) > .card:first-child > .card-header,
body.bh-page-mallow-one-day-warriors .accordion:has(> .card:first-child section[style^="padding: 78px 24px"]) > .card:first-child > .card-header {
    display: none;
}

.accordion:has(> .card:first-child .bh-troopers-week-v4) > .card:first-child > :is(.collapse, .collapsing),
.accordion:has(> .card:first-child .bh-residential-support) > .card:first-child > :is(.collapse, .collapsing),
body.bh-page-mallow-one-day-warriors .accordion:has(> .card:first-child section[style^="padding: 78px 24px"]) > .card:first-child > :is(.collapse, .collapsing) {
    display: block;
    height: auto !important;      /* beats Bootstrap's inline height */
    transition: none;
}

/* (Coachford Explorers already has its week section outside the cards,
   so only the two rules below apply to it.) */

/* The card body's 20px padding inset every designed section inside the
   accordion from the hero above it, and on a phone it stacked on the
   section's own padding: text started 60px from the screen edge. */
.accordion:has(> .card:first-child .bh-troopers-week-v4) > .card > .collapse > .card-body,
.accordion:has(> .card:first-child .bh-residential-support) > .card > .collapse > .card-body,
body.bh-page-mallow-one-day-warriors .accordion:has(> .card:first-child section[style^="padding: 78px 24px"]) > .card > .collapse > .card-body,
.accordion:has(> .bh-explorers-week-v4) > .card > .collapse > .card-body {
    padding: 0;
}

/* One Day Warriors, "FAQs" card: an orange answer-box style (#FED7AA
   border, 18px corners, 14px padding) was pasted onto both the card's
   collapse and its body as style attributes, so the open card drew two
   nested orange frames round the whole FAQ section. Only !important beats
   a style attribute. */
body.bh-page-mallow-one-day-warriors .accordion:has(> .card:first-child section[style^="padding: 78px 24px"]) :is(.collapse, .card-body)[style*="#fed7aa"] {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Residential Summer Camp: the section eyebrows ("Ballyhass Residential
   Camps", "Support, Communication & Settling In" and five more) were
   #1FB8D9 on near-white, 2.2:1. */
.bh-residential-hero__eyebrow,
.bh-residential-support__eyebrow,
.bh-residential-experience__eyebrow,
.bh-residential-practical__eyebrow,
.bh-residential-faq__eyebrow,
.bh-residential-booking__eyebrow,
.bh-residential-final__eyebrow {
    color: #0B5D6B;               /* 7.0:1 or better on these pale fills */
}

/* The accordion ends the page, and the footer's torn edge rose over the
   last header's rule. */
.accordion:has(> .card:first-child .bh-troopers-week-v4),
.accordion:has(> .card:first-child .bh-residential-support),
body.bh-page-mallow-one-day-warriors .accordion:has(> .card:first-child section[style^="padding: 78px 24px"]),
.accordion:has(> .bh-explorers-week-v4) {
    margin-bottom: 56px;
}

/* Troopers and Explorers schedule: the column headings ("Day", "Week flow")
   were #607684 on #F4F9FC, 4.48:1. */
.bh-troopers-week-v4__board-head div,
.bh-explorers-week-v4__board-head div {
    color: #57606A;               /* 6.0:1 */
}

/* /mallow-one-day-warriors/ (inline-styled design, so the overrides below
   need !important to beat the style attributes) */

/* "Sample day flow": four fixed 280px cards in a sideways scroller. On a
   desktop all four fit and "Scroll across to see the full day" sat under
   them for nothing; on a phone the second card was cut off flush at the
   screen edge. The four cards form a grid, four across, two on a tablet,
   one on a phone, and the scroll hint goes. */
body.bh-page-mallow-one-day-warriors .entry-content div[style*="overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth"] {
    display: grid !important;     /* beats the inline display: flex */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible !important;
}

body.bh-page-mallow-one-day-warriors .entry-content div[style*="overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth"] + p {
    display: none;
}

@media (max-width: 991.98px) {
    body.bh-page-mallow-one-day-warriors .entry-content div[style*="overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body.bh-page-mallow-one-day-warriors .entry-content div[style*="overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The times on those cards ("10:00", "Morning") were #F25C05 on #F8FBFF,
   3.2:1. The page's own darker orange from its "Action-packed" pill. */
body.bh-page-mallow-one-day-warriors .entry-content div[style*="color: #f25c05"] {
    color: #C2410C !important;    /* 5.0:1; beats the inline colour */
}

/* Hero price chips: "Great for" broke onto two lines beside its value on a
   phone. The labels stay on one line and the values wrap instead. */
body.bh-page-mallow-one-day-warriors .entry-content span[style*="color: #93c5fd"] {
    flex: none;
    white-space: nowrap;
}

/* /summer-camp-finder/ */

/* Phones: the twelve filters stacked as full-width buttons, about 1,000px
   of buttons before the first result. They wrap as chips, several to a
   line. */
@media (max-width: 720px) {
    .bh-camp-finder-v2 .bh-camp-filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .bh-camp-finder-v2 .bh-camp-filter {
        width: auto;
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 999px;
    }
}

/* The yellow glow in the corner of the intro card sat behind the end of
   the intro text on a phone and read as a smudge. Blue, as on the other
   camp pages. */
.bh-camp-finder-v2__hero-copy::before {
    background: radial-gradient(circle, rgba(0, 182, 217, 0.18) 0%, rgba(0, 182, 217, 0) 70%);
}

/* Ready for the proposed content change (report.md): when the card's "Summer
   Camp Finder" heading becomes the page's H1, the photo banner and its
   second copy of the title go, and the heading keeps its current look. */
.bh-camp-finder-v2__hero-copy h1 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 0.96;
}

/* /adult-summer-camps/ */

/* "That is how most people do it.": white and yellow on Ballyhass Pink,
   which the brand rules out (eyebrow 2.75:1, intro 2.70:1, step titles
   3.11:1, step notes 2.24:1). Navy throughout, 4.8:1 on the pink. */
.bh-adult-camp-v3__section--pink {
    color: #21272F;
}

.bh-adult-camp-v3 .bh-adult-camp-v3__solo-copy .bh-adult-camp-v3__eyebrow,
.bh-adult-camp-v3 .bh-adult-camp-v3__solo-copy h2,
.bh-adult-camp-v3 .bh-adult-camp-v3__solo-copy > p,
.bh-adult-camp-v3 .bh-adult-camp-v3__solo-step strong,
.bh-adult-camp-v3 .bh-adult-camp-v3__solo-step span {
    color: #21272F;               /* 4.8:1 on #FF4F8E */
}

/* The steps' notes were a fainter white than their titles; in navy they
   keep the difference by weight instead of by a paler colour, which would
   fail on the pink. */
.bh-adult-camp-v3 .bh-adult-camp-v3__solo-step span {
    font-weight: 500;
}

/* "Meet your host" was Ballyhass Pink on white, 3.11:1. */
.bh-adult-camp-v3 .bh-adult-camp-v3__host-copy .bh-adult-camp-v3__eyebrow {
    color: #B8295F;               /* 6.0:1 */
}

/* The 12px teal eyebrows, kickers and press links (#087F98) were 4.1 to
   4.3:1 on the page's off-white and mist sections. A darker teal. */
.bh-adult-camp-v3 {
    --bh-blue-deep: #0B5D6B;      /* 6.9:1 on #F6F7F4, 6.6:1 on #EAF2F4 */
}

/* The "+" on the pink "More weekends are in planning" tile: navy on pink. */
.bh-adult-camp-v3__date-showcase-footer-icon {
    color: #21272F;
}

/* Season and press cards: white text on drawn artwork. "Spring" sat across
   the pale sky (from 1.4:1), the small labels ("Weekend 01", "Waiting list
   open", "Ballyhass 2027", "The Hub", "Lifestyle") on light paint at 2.2 to
   3.4:1. The lower half of each picture is shaded where the titles sit, the
   labels get a dark fill, and the small print is nearly full white. */
.bh-adult-camp-v3__date-showcase-visual::after {
    background: linear-gradient(0deg, rgba(18, 22, 26, 0.66) 0%, rgba(18, 22, 26, 0.38) 48%, rgba(18, 22, 26, 0) 78%);
}

.bh-adult-camp-v3__press-showcase-visual::after {
    background: linear-gradient(0deg, rgba(18, 22, 26, 0.6) 0%, rgba(18, 22, 26, 0.3) 45%, rgba(18, 22, 26, 0) 70%);
}

.bh-adult-camp-v3 .bh-adult-camp-v3__date-showcase-label,
.bh-adult-camp-v3 .bh-adult-camp-v3__press-showcase-type {
    background: rgba(18, 22, 26, 0.72);
}

.bh-adult-camp-v3 .bh-adult-camp-v3__date-showcase-season span,
.bh-adult-camp-v3 .bh-adult-camp-v3__press-showcase-masthead span {
    color: rgba(255, 255, 255, 0.94);
}

/* Host card: "Your host" sat on the pink part of the card's gradient on a
   phone, 4.3:1. A shade along the foot of the card, under the name. */
.bh-adult-camp-v3__host-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(18, 22, 26, 0.45) 0%, rgba(18, 22, 26, 0) 45%);
    pointer-events: none;
}

/* Host card: the white "RC" monogram sat on the bright blue disc, 1.4:1. */
.bh-adult-camp-v3 .bh-adult-camp-v3__host-monogram {
    background: rgba(18, 22, 26, 0.6);
}

/* /coachford-one-day-warrior/ and /mallow-easter-camp1/ (prose pages)
   Both read acceptably in the centred prose column. One thing was still
   broken: they end in a legacy accordion, and the footer's torn edge rose
   over the last header's rule. This rule reaches every prose page that ends
   in an accordion, which all share the fault; it could equally live in
   refinements.css beside section 28. */
.bh-prose .entry-content > .accordion:last-child {
    margin-bottom: 56px;
}

/* ===========================================================================
 * Brand, story, report, swim and wakeboard course pages
 * ======================================================================== */

/* ===========================================================================
   Group 6: brand, story and info pages (review of 24 Oct 2026)
   ======================================================================== */

/* /careers/ */

/* The body ran the full 1320px container, about 180 characters a line. It
   is now one centred 46rem column, the same measure as the prose pages,
   with the logo strips, gallery, video and CV form inside it. The page has
   no class of its own, so the column is keyed on its careers__ markup. */
.page-content .entry-content:has(> .careers__logos) {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Every H2 sat straight on the paragraph, image or button before it. They
   now open each section with clear space above, and a line height that
   keeps two-line headings on a phone from touching. */
.page-content .entry-content:has(> .careers__logos) > h2 {
    margin: 3.5rem 0 0.75rem;
    font-size: 2.25rem;
    line-height: 1.15;
    text-wrap: balance;
}

.page-content .entry-content:has(> .careers__logos) > h3 {
    margin: 2.25rem 0 0.5rem;
    font-size: 1.375rem;
    line-height: 1.3;
}

.page-content .entry-content:has(> .careers__logos) > h2 + h3 {
    margin-top: 1rem;
}

.page-content .entry-content:has(> .careers__logos) > p {
    margin-bottom: 1.1rem;
}

.page-content .entry-content:has(> .careers__logos) > ul:not([class]),
.page-content .entry-content:has(> .careers__logos) > .careers__courses {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
}

.page-content .entry-content:has(> .careers__logos) > figure {
    margin: 1.5rem 0 1.75rem;
}

.page-content .entry-content:has(> .careers__logos) figcaption {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
}

/* The accreditation and partner strips were 70px marks in a loose flex row,
   and the fourth partner sat alone on a phone. They are an even grid with
   larger logos: six or four across on desktop, three or two on a phone. */
.careers__logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 1.5rem;
    align-items: center;
    margin: 1.75rem 0 2.5rem;
}

.careers__logos li {
    min-width: 0;
}

.careers__logos img {
    max-width: 100%;
    max-height: 104px;
}

/* The partner tiles are cyan squares with a white mark built into the
   image; at 70px the marks could not be read, so they are shown larger. */
.careers__logos:has(> li:nth-child(4):last-child) {
    grid-template-columns: repeat(4, 1fr);
}

.careers__logos:has(> li:nth-child(4):last-child) img {
    max-height: 136px;
}

/* The B Corp logo is an SVG that app.js swaps for inline markup, and its
   own style block fills it white (.s0), so on this white page it was
   invisible and left an empty first cell. It is filled black, the official
   B Corp colourway, and sized like the other logos. */
.careers__logos svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: 104px;
    margin: 0 auto;
}

.careers__logos li svg .s0 {
    fill: #000000;
}

/* Team photographs as a two by two grid inside the column. */
.careers__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* Staff testimonials were plain paragraphs that read as body copy. Each is
   now a quotation card: a blue rule, a large quote mark in the accessible
   blue (#0B7A8E on #F4F6F8 is 4.6:1) and navy text (13.9:1). */
.page-content .entry-content:has(> .careers__logos) > blockquote {
    position: relative;
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem 1.25rem 3.5rem;
    background-color: #F4F6F8;
    border-left: 6px solid #00B6D9;
    color: #21272F;
}

.page-content .entry-content:has(> .careers__logos) > blockquote::before {
    content: "\201C";
    position: absolute;
    top: 0.35rem;
    left: 0.9rem;
    color: #0B7A8E;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.page-content .entry-content:has(> .careers__logos) > blockquote p {
    margin: 0;
}

.page-content .entry-content:has(> .careers__logos) > blockquote + :not(blockquote) {
    margin-top: 2rem;
}

/* The CV form (.bh-apply) prints its own style block inside the page,
   after this file, so the rules below carry two extra classes to win
   rather than !important.

   The form sat in a thin black box. It is a light panel instead, so the
   white fields stand out from it. A sitewide section rule also left 100px
   under it, which the zero bottom margin removes. */
.page-content .entry-content .bh-apply {
    margin: 2rem 0 0;
    padding: 2rem;
    background-color: #F4F6F8;
    border: 0;
    border-radius: 8px;
}

.page-content .entry-content .bh-apply__form > p:last-child {
    margin-bottom: 0;
}

/* Paired fields stacked on a phone with the row gap and the field margin
   added together, 36px against 20px everywhere else. */
.page-content .entry-content .bh-apply__row {
    gap: 0 1rem;
}

.page-content .entry-content .bh-apply h3 {
    margin-bottom: 0.75rem;
    font-size: 1.375rem;
}

.page-content .entry-content .bh-apply__form {
    margin-top: 1.5rem;
}

.page-content .entry-content .bh-apply__field {
    margin-bottom: 1.25rem;
}

.page-content .entry-content .bh-apply :is(input[type=text], input[type=email], input[type=tel], textarea) {
    min-height: 3rem;
    margin-top: 0.35rem;
}

.page-content .entry-content .bh-apply ::placeholder {
    color: #5B6573;
    opacity: 1;
}

.page-content .entry-content .bh-apply legend {
    margin-bottom: 0.5rem;
}

/* The site and availability options were 13px native checkboxes in a
   single column. Each is now a tappable chip at least 44px high that
   wraps in rows and turns yellow when ticked (navy on yellow 13.3:1). */
.page-content .entry-content .bh-apply .bh-apply__check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.4rem 1rem 0.4rem 0.75rem;
    background-color: #FFFFFF;
    border: 2px solid #21272F;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.page-content .entry-content .bh-apply .bh-apply__check:has(input:checked) {
    background-color: #E4FF1A;
}

.page-content .entry-content .bh-apply :is(.bh-apply__check, .bh-apply__check-line) input[type=checkbox] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: #21272F;
}

.page-content .entry-content .bh-apply .bh-apply__note {
    margin-top: 0.5rem;
}

/* The two consent lines: box and text side by side, the text wrapping
   under itself rather than under the box. */
.page-content .entry-content .bh-apply .bh-apply__check-line label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.page-content .entry-content .bh-apply .bh-apply__check-line input[type=checkbox] {
    margin-top: 0.2rem;
}

/* The CV upload was the bare browser control. The field is a dashed drop
   area and its button a navy block (white on navy 15.0:1). */
.page-content .entry-content .bh-apply input[type=file] {
    margin-top: 0.35rem;
    padding: 0.75rem;
    border-style: dashed;
    cursor: pointer;
}

.page-content .entry-content .bh-apply input[type=file]::file-selector-button {
    margin-right: 1rem;
    padding: 0.6rem 1.1rem;
    background-color: #21272F;
    border: 0;
    border-radius: 4px;
    color: #FFFFFF;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.page-content .entry-content .bh-apply .bh-apply__notice {
    background-color: #FFFFFF;
}

/* Send application was a small black square. It is the yellow primary
   button at full size: navy on yellow 13.3:1. The hover keeps the site's
   own slide to pink with navy text. */
.page-content .entry-content .bh-apply .button--dark {
    min-height: 3rem;
    margin-top: 0.5rem;
    padding: 0.8rem 2rem;
    border-color: #E4FF1A;
    color: #21272F;
    font-size: 0.9375rem;
}

.page-content .entry-content .bh-apply .button--dark::before {
    background-color: #E4FF1A;
}

.page-content .entry-content .bh-apply .button--dark:hover,
.page-content .entry-content .bh-apply .button--dark:focus-visible {
    border-color: #FF4F8E;
}

@media (max-width: 767.98px) {
    .page-content .entry-content:has(> .careers__logos) > h2 {
        margin-top: 2.75rem;
        font-size: 1.875rem;
    }

    .careers__logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem 1rem;
    }

    .careers__logos img {
        max-height: 84px;
    }

    .careers__logos:has(> li:nth-child(4):last-child) {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .careers__logos:has(> li:nth-child(4):last-child) img {
        max-height: 128px;
    }

    .page-content .entry-content:has(> .careers__logos) > blockquote {
        padding: 1rem 1.1rem 1rem 3rem;
    }

    .page-content .entry-content:has(> .careers__logos) > blockquote::before {
        left: 0.6rem;
        font-size: 3rem;
    }

    /* On a phone the panel runs to the screen edges, so the fields gain
       the width their placeholders need. */
    .page-content .entry-content .bh-apply {
        margin-left: -16px;
        margin-right: -16px;
        padding: 1.5rem 16px;
        border-radius: 0;
    }

    .page-content .entry-content .bh-apply :is(input[type=text], input[type=email], input[type=tel], textarea) {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .page-content .entry-content .bh-apply .button--dark {
        width: 100%;
    }
}

/* /news/ */

/* The featured post opened about 230px below the banner: the section's own
   100px top margin stacked on the article padding. At the other end the
   footer's torn edge rose over the bottom of the post image, so the
   section keeps 4rem clear below it. */
body.bh-page-news .section--featured-article {
    margin-top: 0;
    padding-bottom: 4rem;
}

/* On desktop the headline and excerpt were absolutely placed over the
   left half of the post image, overlapping it by about 100px. Text and
   image now sit in two grid columns with a gap, the text column at about
   45%, vertically centred on the image. */
@media (min-width: 992px) {
    body.bh-page-news .featured-article {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 3.5rem;
        align-items: center;
    }

    body.bh-page-news .featured-article .featured-article__content {
        position: static;
        width: auto;
    }

    body.bh-page-news .featured-article .featured-article__image {
        display: block;
        width: auto;
    }

    body.bh-page-news .featured-article .featured-article__image img {
        width: 100%;
        height: auto;
    }

    /* The 40px headline had a 36px line height, so its lines touched. */
    body.bh-page-news .featured-article .featured-article__content h2 {
        margin-bottom: 1rem;
        font-size: 2.25rem;
        line-height: 1.15;
    }

    body.bh-page-news .featured-article .featured-article__content p {
        margin-bottom: 1.5rem;
    }
}

/* /impact-report-2023-25-pt-21/ */

/* "Why this matters" in Community was white on an orange gradient
   (#F59F28 to #DD7F08, 2.1 to 3.0:1) and in Environment white on a green
   one (#46C48F to #2EA06F, 2.2 to 3.3:1). Neither colour is in the brand. They become
   the brand yellow and blue with navy text: navy on #E4FF1A is 13.3:1,
   navy on #00B6D9 is 6.2:1. */
.bh-impact-community-card.orange {
    background: #E4FF1A;
    color: #21272F;
}

.bh-impact-environment-card.green {
    background: #00B6D9;
    color: #21272F;
}

.bh-impact-community-card.orange :is(h2, h3, p),
.bh-impact-environment-card.green :is(h2, h3, p) {
    color: #21272F;
}

/* The right-hand column had its grid and gap only from 1040px, so on a
   phone its three cards touched. It is a column with the same 22px gap as
   the grid around it. */
.bh-impact-community-side,
.bh-impact-environment-side,
.bh-impact-customers-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* On desktop the dark card and the right-hand column ended at different
   heights. Both now stretch to the taller one; when the column is the
   shorter, its cards share the difference and centre their content. */
@media (min-width: 1040px) {
    .bh-impact-community-grid,
    .bh-impact-environment-grid,
    .bh-impact-customers-grid {
        align-items: stretch;
    }

    .bh-impact-community-side,
    .bh-impact-environment-side,
    .bh-impact-customers-side {
        gap: 18px;
    }

    .bh-impact-community-side > *,
    .bh-impact-environment-side > *,
    .bh-impact-customers-side > * {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
    }
}

/* On a phone the intro card sat on the 16px page gutter while every
   section after it added 20px of its own, so the cards stepped in. The
   sections drop their side padding and all cards share the gutter. */
@media (max-width: 767.98px) {
    .bh-impact-community,
    .bh-impact-environment,
    .bh-impact-customers,
    .bh-impact-timeline,
    .bh-impact-closing {
        padding-left: 0;
        padding-right: 0;
    }
}

/* /impact-report-23-25-pt-1/ */

/* Three cards were white on a green gradient (#46C48F to #2EA06F, 2.2 to
   3.3:1), which is neither readable nor a brand colour: "Our guiding
   belief" in the hero, "178 team members" and "Why this matters beyond
   Ballyhass". They take the brand yellow or blue with navy text: navy on
   #E4FF1A is 13.3:1, navy on #00B6D9 is 6.2:1. */
.bh-impact-info-card.green,
.bh-impact-workers-card.green {
    background: #E4FF1A;
    color: #21272F;
}

.bh-impact-number-card.green {
    background: #00B6D9;
    color: #21272F;
}

.bh-impact-info-card.green :is(h2, h3, p, .bh-impact-info-kicker),
.bh-impact-workers-card.green :is(h2, h3, p),
.bh-impact-number-card.green :is(h3, p, .bh-impact-number-kicker, .bh-impact-number-value, .bh-impact-number-sub) {
    color: #21272F;
    opacity: 1;
}

/* Journey steps 3 and 4 were white on green (2.2:1) and on orange
   (2.1:1). All four steps share navy, white on navy 15.0:1. */
.bh-impact-step-num.n1,
.bh-impact-step-num.n2,
.bh-impact-step-num.n3,
.bh-impact-step-num.n4 {
    background: #21272F;
    color: #FFFFFF;
}

/* The five impact-area numbers were white on five colours, four of them
   failing (green, orange, dark green, pale blue). On the navy section
   they are one brand yellow with navy text, 13.3:1. */
.bh-impact-pillar-top .bh-impact-pillar-icon {
    background: #E4FF1A;
    color: #21272F;
}

/* "What B Corp gave us", "What it challenged" and "What comes next" were
   three 160px columns of narrow text. Each is now a full-width row with
   its label beside the text. */
@media (min-width: 900px) {
    .bh-impact-mini-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bh-impact-mini-card {
        display: grid;
        grid-template-columns: 10.5rem minmax(0, 1fr);
        gap: 1rem;
        align-items: baseline;
        padding: 14px 18px;
    }

    .bh-impact-mini-card .bh-impact-mini-card-kicker {
        margin-bottom: 0;
    }
}

/* Cards stacked in one column touched with no gap on a phone: the number
   stacks and the Governance and Workers side columns only had their grid
   gap from 980px or 1040px. */
.bh-impact-number-stack,
.bh-impact-governance-side,
.bh-impact-workers-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* On desktop the Governance and Workers side columns ended 300px and
   220px above the dark card beside them, and the journey columns 30px
   apart. Both sides now stretch to the taller one, and the side cards
   share the difference with their content centred. The two Governance
   "already in place" tiles stack, as at 177px each they were too narrow
   to read. */
@media (min-width: 1040px) {
    .bh-impact-journey-grid,
    .bh-impact-governance-grid,
    .bh-impact-workers-grid {
        align-items: stretch;
    }

    .bh-impact-number-stack,
    .bh-impact-governance-side,
    .bh-impact-workers-side {
        gap: 18px;
    }

    .bh-impact-governance-side > *,
    .bh-impact-workers-side > * {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
    }

    .bh-impact-governance-mini-grid {
        grid-template-columns: 1fr;
    }

    /* When the journey card is the one stretched, its "Ballyhass belief"
       box stays at the foot of the card and the space opens above it. */
    .bh-impact-journey-grid > .bh-impact-panel {
        display: flex;
        flex-direction: column;
    }

    .bh-impact-journey-grid > .bh-impact-panel > .bh-impact-kicker-pill {
        align-self: flex-start;
    }

    .bh-impact-journey-grid > .bh-impact-panel > .bh-impact-belief {
        margin-top: auto;
    }
}

/* The Part 2 card sat in a section nested inside another of the same
   class, so it took both paddings: inset 56px on a phone against 36px
   for every other card, and about 180px above the footer. The inner
   section gives up its padding. */
.bh-impact-continue .bh-impact-continue {
    padding: 0;
}

/* On a phone the hero sat on the 16px page gutter while every section
   after it added 20px of its own, so the cards stepped in. The sections
   drop their side padding and all cards share the gutter. The navy
   impact-areas band keeps its padding, as its text sits on the band
   itself. */
@media (max-width: 767.98px) {
    .bh-impact-journey,
    .bh-impact-numbers,
    .bh-impact-governance,
    .bh-impact-workers,
    .bh-impact-continue {
        padding-left: 0;
        padding-right: 0;
    }
}

/* /our-story/ */

/* The four stat cards (15+ Years, 2 Locations, 20+ Activities, People
   First) are meant to overlap the foot of the hero, but their bar had a
   white background that painted over the hero's last 18px, so the cards
   looked tucked under its edge with their tops and corners lost. The bar
   is transparent and the overlap is deeper, so the whole of each card,
   rounded top included, sits over the photograph. The hero gains the
   same depth at its foot so its badges stay clear of the cards. */
.bh-about-stats-bar {
    background: transparent;
    margin-top: -40px;
}

.bh-about-hero {
    padding-bottom: 72px;
}

@media (max-width: 767px) {
    .bh-about-stats-bar {
        margin-top: -24px;
    }

    .bh-about-hero {
        padding-bottom: 52px;
    }
}

/* Timeline cards all took the height of the tallest one (the 2025 stats
   card), leaving 140px to 350px of empty card under most entries. Each
   card is now the height of its own content. */
.bh-history-scroll {
    align-items: start;
}

/* Seven value cards in three columns left "Champion The Outdoors" alone
   on a third row. On desktop they run four then three, the three centred
   under the four. Only applies while there are exactly seven. */
@media (min-width: 1101px) {
    .bh-values-section .bh-values-grid:has(> .bh-value-card:nth-child(7):last-child) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .bh-values-section .bh-values-grid:has(> .bh-value-card:nth-child(7):last-child) > .bh-value-card {
        grid-column: span 2;
    }

    .bh-values-section .bh-values-grid:has(> .bh-value-card:nth-child(7):last-child) > .bh-value-card:nth-child(5) {
        grid-column: 2 / span 2;
    }
}

/* Two partner logos read as specks. The Gaisce "Challenge Partner" disc
   sits in a wide white canvas and the IAAT mark fills under half of its
   image, so at the strip's 56px cap both were about 25px of logo. Each
   is cropped to its mark and shown at the size of its neighbours. */
.bh-trust-logo-item img[src*="ballyhass-logo-4"] {
    width: 84px;
    height: 84px;
    max-height: none;
    object-fit: cover;
}

.bh-trust-logo-item img[src*="IAAT"] {
    width: 140px;
    height: 76px;
    max-height: none;
    object-fit: cover;
    object-position: 50% 48%;
}

@media (max-width: 767px) {
    .bh-trust-logo-item img[src*="ballyhass-logo-4"] {
        width: 72px;
        height: 72px;
    }

    .bh-trust-logo-item img[src*="IAAT"] {
        width: 120px;
        height: 65px;
    }
}

/* /b-corp-certified/ */

/* "Officially certified in August 2023." was grey-blue (#55687B) on the
   navy card, about 2.2:1: the light-card paragraph colour won over the
   dark card's own. It is white at 85% on the navy gradient, 9.4:1 at
   its lightest end. */
.bh-bcorp-proof-grid .bh-bcorp-proof-card-dark p {
    color: rgba(255, 255, 255, 0.85);
}

/* The five-score strip sat 1 to 2px above the topic cards. It now keeps
   the same 18px gap the cards keep between themselves. */
.bh-bcorp-breakdown {
    margin-bottom: 18px;
}

/* New: on a phone the B Corp badge in the hero sat on the headline with
   no space between them. The headline block keeps 20px clear. */
@media (max-width: 767px) {
    .bh-bcorp-hero .bh-bcorp-hero-copy {
        margin-top: 20px;
    }
}

/* /experience-guarantee/ */

/* Promise numbers 3 to 6 were white 18px text on green #46C48F (2.2:1),
   orange #F59F28 (2.1:1), green #2EA06F (3.3:1) and pale blue #6EA8E5
   (2.5:1), none of them brand colours. All six share brand navy, white
   on navy 15.0:1. */
.bh-guarantee-card-top .bh-guarantee-num {
    background: #21272F;
    color: #FFFFFF;
}

/* /videos/ */

/* The seven value numbers used seven colours, and "6" was white on pale
   blue at 2.5:1. They share brand navy, white on navy 15.0:1. */
.bh-values-page .bh-values-card-top .bh-values-num {
    background: #21272F;
    color: #FFFFFF;
}

/* New: the body's wrapping section kept the sitewide 100px bottom margin,
   because an empty legacy .dccom div follows it and the trailing-margin
   rule only clears a last child. That left about 150px of white above the
   footer. */
section.wysywig:has(.bh-values-page) {
    margin-bottom: 0;
}

/* /sustainability/ */

/* The last cards ended 50px above the footer, so its torn top edge rose
   onto them. The page keeps 3rem clear below its last section. */
.susx-wrap {
    padding-bottom: 3rem;
}

/* On a phone the B Corp badge wraps under the main logo and its bottom
   edge sat on the headline. The headline block keeps 20px clear. */
@media (max-width: 767px) {
    .susx-hero .susx-hero-copy {
        margin-top: 20px;
    }

    /* The six focus areas (Biodiversity, Water stewardship and the rest)
       have no card behind them but kept a card's 24px padding, so on a
       phone their text started 24px in from the cards above and below.
       They now share the cards' outer edge. */
    .susx-pillars-grid .susx-pillar-card {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Beside the Nature Network panel the video card stretched to the
   panel's height, leaving about 200px of empty white card under the
   16:9 video. The video card is its own height, centred on the panel. */
@media (min-width: 1101px) {
    .susx-feature {
        align-items: center;
    }
}

/* /junior-learn-to-wakeboard-course1/ and /ladies-learn-to-wakeboard-course/ */

/* The two course pages share one design under two class prefixes. Their
   body ran a 1240px shell, wider than the 1100px column of every other
   designed page. */
.bh-learn-wake-course,
.bh-ladies-wake-v3 {
    --shell: 1100px;
}

/* Sections sat about 30px apart, so each heading read as part of the
   cards above it, while a sitewide 100px margin left a far bigger gap
   under the hero. Every section, the closing panel included, now opens
   about 64px (48px on a phone) below the one before. */
.bh-learn-wake-course .bh-learn-wake-course-section,
.bh-ladies-wake-v3 .bh-ladies-wake-v3-section {
    padding-top: 64px;
}

.bh-learn-wake-course .bh-learn-wake-course-hero,
.bh-ladies-wake-v3 .bh-ladies-wake-v3-hero {
    margin-bottom: 0;
}

.bh-learn-wake-course .bh-learn-wake-course-final,
.bh-ladies-wake-v3 .bh-ladies-wake-v3-final {
    margin-top: 64px;
}

/* The closing headline's lines touched at a line height of 1. */
.bh-learn-wake-course-final h2,
.bh-ladies-wake-v3-final h2 {
    line-height: 1.12;
}

@media (max-width: 820px) {
    .bh-learn-wake-course .bh-learn-wake-course-section,
    .bh-ladies-wake-v3 .bh-ladies-wake-v3-section {
        padding-top: 48px;
    }

    .bh-learn-wake-course .bh-learn-wake-course-final,
    .bh-ladies-wake-v3 .bh-ladies-wake-v3-final {
        margin-top: 48px;
    }
}

/* The hero's information cards were white text on 13% white glass over
   the photograph; where the photo is pale blue or pink the text fell
   below 3:1. The glass is a dark tint instead: over even a white patch
   of photo, headings are 6.9:1 and the 84% white body text 5.4:1. */
.bh-learn-wake-course .bh-learn-wake-course-side-card,
.bh-ladies-wake-v3 .bh-ladies-wake-v3-side-card {
    background: rgba(20, 26, 32, 0.72);
    border-color: rgba(255, 255, 255, 0.18);
}

/* New, ladies only: the hero headline and introduction are white on the
   photograph under a navy to blue to pink tint, and over the pale water
   the background measured up to 0.30 luminance, so about 3:1. A navy
   scrim behind the copy side brings the lightest point behind the text
   above 4.5:1; the cards side keeps the designed colour. On a phone the
   copy runs the full width, so the scrim does too. */
.bh-ladies-wake-v3-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(12, 18, 28, 0.62) 0%, rgba(12, 18, 28, 0.5) 50%, rgba(12, 18, 28, 0) 78%);
    pointer-events: none;
}

@media (max-width: 1080px) {
    .bh-ladies-wake-v3-hero::after {
        background: rgba(12, 18, 28, 0.5);
    }
}

/* New, junior only: on a phone the introduction runs down over the pale
   lower half of the photo, where it fell to about 4.2:1. A light navy
   scrim there brings it above 4.5:1. */
@media (max-width: 1080px) {
    .bh-learn-wake-course-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(12, 18, 28, 0.32);
        pointer-events: none;
    }
}

/* "Explore Learn To Wake" in the closing panel was white on 12% white
   over the light end of the gradient (cyan on the junior page, pink on
   the ladies page), about 2.3:1. It is a navy button with white text,
   15.0:1, which stands clear of every part of the gradient. */
.bh-learn-wake-course-final .bh-learn-wake-course-btn-secondary,
.bh-ladies-wake-v3-final .bh-ladies-wake-v3-btn-secondary {
    background: #21272F;
    border-color: #21272F;
    color: #FFFFFF;
}

/* New: on a phone the closing panel's text runs down into the light end
   of its gradient (cyan on the junior page, pink on the ladies page),
   where the 88% white paragraph fell to about 2.8:1 and 3.7:1. A navy
   scrim over the panel on phone widths keeps the copy above 4.5:1; the
   desktop panel, where the copy sits on the dark end, is unchanged. */
@media (max-width: 1080px) {
    .bh-learn-wake-course-final::after,
    .bh-ladies-wake-v3-final::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(12, 18, 28, 0.4);
        pointer-events: none;
    }
}

/* Ladies: the four highlight tiles sit on a navy to pink gradient, and
   "Result" was white on the pink end at about 3:1. Each tile gets a dark
   tint: over the pink end the white copy is 8.5:1 and the 74% white
   label 5.4:1. The junior page's tiles get the same tint, as their 74%
   white labels measured 4.2:1 on the blue end of its band. */
.bh-ladies-wake-v3-highlight-band .bh-ladies-wake-v3-highlight,
.bh-learn-wake-course-highlight-band .bh-learn-wake-course-highlight {
    background: rgba(20, 26, 32, 0.55);
}

/* New: the "How it works" step numbers were white on a blue gradient
   (junior, from #00B6D9, 2.4:1) or a pink one (ladies, from #FF4F8E,
   3.1:1). Each takes its page's brand colour solid with navy text: navy
   on #00B6D9 is 6.2:1, navy on #FF4F8E 4.8:1. */
.bh-learn-wake-course-step .bh-learn-wake-course-step-no {
    background: #00B6D9;
    color: #21272F;
}

.bh-ladies-wake-v3-step .bh-ladies-wake-v3-step-no {
    background: #FF4F8E;
    color: #21272F;
}

/* New, ladies only: the section labels were pink #FF4F8E on white
   (3.1:1) and the "Course 1" and "Course 2" chips dark pink on pale pink
   (3.8:1), both small capitals. Both are navy: 15.0:1 and 13.8:1. The
   closing panel's white label is untouched. */
.bh-ladies-wake-v3-section .bh-ladies-wake-v3-eyebrow,
.bh-ladies-wake-v3-date .bh-ladies-wake-v3-date-label {
    color: #21272F;
}

/* On a phone the yellow "Book Ladies Learn To Wakeboard" wrapped to two
   left-aligned lines and was wider than the ghost button under it. Both
   course pages' buttons are full width with centred labels there. */
@media (max-width: 820px) {
    .bh-learn-wake-course-cta-row > .bh-learn-wake-course-btn,
    .bh-ladies-wake-v3-cta-row > .bh-ladies-wake-v3-btn {
        width: 100%;
        padding: 10px 18px;
        text-align: center;
    }
}

/* /adult-swim-lessons/ */

/* The four hero facts (5 Weeks, Beginner & Intermediate, Small Groups,
   From EUR125) were small white text on 10% white glass over a bright
   orange cap and pale water. The glass is a dark tint: over even a white
   patch of photo, the headings are 6.5:1 and the 84% white text 5.1:1. */
.bh-adult-swim-summary .bh-adult-swim-summary-card {
    background: rgba(9, 27, 42, 0.7);
}

/* New: the hero's dark tint never showed. It is the hero's ::before at
   z-index 0, and the photograph is a later positioned element at the
   same level, so the photo painted over its own tint and the white
   headline and introduction sat on pale spray at about 2:1. The tint is
   lifted above the photo and the copy above the tint. */
.bh-adult-swim-hero::before {
    z-index: 1;
}

.bh-adult-swim-hero .bh-adult-swim-wrap {
    position: relative;
    z-index: 2;
}

/* On a phone the four facts stacked one per row; they are two by two. */
@media (max-width: 720px) {
    .bh-adult-swim-hero .bh-adult-swim-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bh-adult-swim-summary .bh-adult-swim-summary-card {
        padding: 14px;
    }

    .bh-adult-swim-summary .bh-adult-swim-summary-card strong {
        font-size: 1rem;
    }
}

/* "Session times" and "Important to know" rows were set to block on a
   phone, so label and value ran together ("6:00pmBeginner"). They keep
   their two ends apart at every width, and wrap if a pair is long. */
.bh-adult-swim-times-card li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
}

.bh-adult-swim-times-card li strong {
    text-align: right;
}

/* On a phone the dark FAQ and booking panels stopped 16px short of each
   screen edge, leaving thin white strips beside them. They run to the
   edges; their content keeps its place. */
@media (max-width: 767px) {
    .bh-adult-swim-page .bh-adult-swim-section--dark,
    .bh-adult-swim-page .bh-adult-swim-cta {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* /mallow-swim-lessons/ */

/* New: the hero's "Quick details" card was 10% white glass over the
   photograph, so its 84% white copy came to about 3.9:1 at its lightest
   point. The glass takes a navy tint. */
.bh-swim-lessons-hero .bh-swim-lessons-card {
    background: rgba(10, 28, 44, 0.62);
}

/* New: the "Common questions" label was #0089C6 on white, 3.9:1 at 12px.
   It takes the accessible blue #0B7A8E, 5.0:1. */
.bh-swim-lessons-faq .bh-swim-lessons-kicker {
    color: #0B7A8E;
}

/* A blurred yellow-green disc sat clipped in the bottom right corner of
   the "Ready to book?" panel. It is removed. */
.bh-swim-lessons-cta::before {
    display: none;
}

/* The "Course Dates and Times" accordion after the designed body ran
   the full container, out of line with the panels above it, and sat
   70px below them. It takes the body's own width and a tighter gap, and
   keeps clear of the footer's torn edge. */
.bh-swim-lessons-page {
    padding-bottom: 32px;
}

.wysywig:has(> .bh-swim-lessons-page) + .accordion {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3rem;
}

@media (max-width: 860px) {
    .wysywig:has(> .bh-swim-lessons-page) + .accordion {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ===========================================================================
 * Activity pages, the activities archive and All Activities
 * ======================================================================== */

/* =========================================================================
 * Group 3: activity pages (single-activity.php) and the activities archive
 * (archive-activity.php). Full-site screenshot review, 24 Oct 2026.
 * ========================================================================= */

/* Activity pages: space above "Two amazing locations" */

/* main.min.css gives the last section in every parent a 100px bottom
   margin. In the designed activity bodies that put 100px after the final
   panel, 100px more after the wrapper round it, and 100px inside each open
   accordion panel, and the wrappers added 42 to 72px of empty padding:
   170 to 340px of white above the locations block, and 140px between
   accordion items on phones. Inside an activity body that margin is
   zeroed, and the empty wrappers lose their trailing padding. */
.single-activity .main__body section:last-of-type {
    margin-bottom: 0;
}

.single-activity .main__body :is(.bh-zip-shell, .bh-ows-page, .bh-kayak-sup-page, .bh-axe-v2-final) {
    padding-bottom: 0;
}

/* The one place that margin did a job: it separated a designed panel
   (Aqua Park, Kayaking, Wakeboarding) from the accordion under it. */
.single-activity .main__body .wysywig > .wysywig + .accordion {
    margin-top: 64px;
}

@media (max-width: 767.98px) {
    .single-activity .main__body .wysywig > .wysywig + .accordion {
        margin-top: 48px;
    }
}

/* The floated Summary kept its 66px bottom margin, which became the gap
   whenever the Summary is taller than the body (Archery, Low Ropes). The
   locations block sets its own space instead: 100px on desktop, 80px on
   phones. */
@media (min-width: 768px) {
    .single-activity .main:not(.main--wide) .main__side {
        margin-bottom: 0;
    }
}

@media (min-width: 992px) {
    .single-activity .locations {
        margin-top: 100px;
    }
}

/* Activity pages: "Two amazing locations" */

/* The block sat in a fluid container with a 10px gutter, so the Coachford
   photo ran to 10px from the window edge while the page above keeps the
   container's 30 / 60 / 130px gutter. Same gutter as the rest of the page. */
@media (min-width: 768px) {
    .single-activity .locations .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 992px) {
    .single-activity .locations .container-fluid {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 1800px) {
    .single-activity .locations .container-fluid {
        padding-left: 130px;
        padding-right: 130px;
    }
}

/* On a phone "Coachford" at 60px is wider than the photo, and its last
   letters were cut off by the torn frame. */
@media (max-width: 575.98px) {
    .single-activity .locations__content h3 {
        font-size: 48px;
    }
}

/* Activity pages: "Popular Activities" carousel */

/* The section sat in a 10-of-12 column offset by one, so it started 112px
   right of the page content above it. Full container width. */
@media (min-width: 1440px) {
    .single-activity .section--reveal .col-xxl-10 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
    }
}

/* Three 395px cards did not fit the column, so the third was cut at the
   edge with the next arrow over its price. Cards are sized to fit whole:
   three across on desktop, two on tablets, and on phones one with the
   next card showing at the edge so the row reads as scrollable. */
.single-activity .section--reveal .carousel-cell {
    width: 85%;
    min-width: 0;
    max-width: none;
    margin-right: 20px;
}

@media (min-width: 768px) {
    .single-activity .section--reveal .carousel-cell {
        width: calc((100% - 20px) / 2);
    }
}

@media (min-width: 1200px) {
    .single-activity .section--reveal .carousel-cell {
        width: calc((100% - 40px) / 3);
    }
}

/* The arrows sat over the cards. They move above the row, level with the
   heading, in the yellow used by the theme's other product sliders
   (navy arrow on yellow, 13.3:1). The heading keeps clear of them. */
.single-activity .section--reveal .section__title {
    padding-right: 112px;
}

.single-activity .section--reveal .flickity-prev-next-button {
    top: auto;
    bottom: calc(100% + 27px);
    transform: none;
    background: #E4FF1A;
}

.single-activity .section--reveal .flickity-prev-next-button .flickity-button-icon {
    fill: #21272F;
}

.single-activity .section--reveal .flickity-prev-next-button.previous {
    left: auto;
    right: 56px;
}

.single-activity .section--reveal .flickity-prev-next-button.next {
    right: 0;
}

/* Activity pages: Summary sidebar */

/* "Find Us" was laid over the top-left corner of the map picture, grey
   on grey, so it read as a caption stuck to the image edge. It sits above
   the map as the box's subheading. */
.single-activity .summary .map h3 {
    position: static;
    margin: 0 0 12px;
    color: #21272F;
}

/* The location pins are a thin yellow outline (1.1:1 on white) beside
   blue venue names. They are tinted to the names' own blue, #15429B,
   which is 9.2:1 on white. */
.single-activity .summary__places img {
    filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(7768%) hue-rotate(220deg) brightness(66%) contrast(84%);
}

/* Activity cards (related carousel and archive grid) */

/* .product__text is a flex row, so the sitewide display: block on its
   Adventure Pass span did nothing: the pass price was still squeezed into
   45% of the width beside the main price. The paragraph is a block here,
   so the pass price takes its own line. */
body:is(.single-activity, .post-type-archive-activity) .card.product .product__text {
    display: block;
}

/* Activities archive: card grid */

/* The grid sat in a 10-of-12 column offset by one, 112px right of the
   heading, filters and carousel above it. Full container width. */
@media (min-width: 1440px) {
    .post-type-archive-activity .section--reveal .col-xxl-10 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
    }
}

/* Book buttons sat straight under each card's text, so in a row of cards
   they started at different heights, and Book Mallow and Book Coachford
   were two different widths. The buttons sit at the foot of every card
   and share the row equally, wrapping to full width when two do not fit. */
.post-type-archive-activity .card.product .card-body {
    display: flex;
    flex-direction: column;
}

.post-type-archive-activity .card.product .card-link-container {
    margin-top: auto;
}

.post-type-archive-activity .card.product .card-link-container .card-link {
    flex: 1 1 180px;
    min-width: 0;
    max-width: none;
    text-align: center;
    white-space: nowrap;
}

/* /activities/aqua-park/ */

/* Pricing: the three price cards shared the content column with the
   "Important booking notes" panel, so each card was 140px wide and
   "€20pp" broke into "€20p / p". In the column beside the Summary the
   notes go under the cards, and a price never breaks. */
@media (min-width: 992px) {
    .single-activity .bh-aqua-pricing-block .bh-price-top {
        grid-template-columns: minmax(0, 1fr);
    }
}

.single-activity .bh-aqua-pricing-block .bh-price-value {
    white-space: nowrap;
}

/* "Book Mallow" and "Compare Parks" were white pills on a white card and
   did not read as buttons. Book is the yellow primary with navy text
   (13.3:1); Compare is navy with white text (15.0:1). The design sets
   colour through var(--navy) with !important, so the primary changes the
   variable, and the navy button needs !important to beat it. */
.single-activity .bh-aquapark-hero .bh-cta-actions .bh-btn--primary {
    --navy: #21272F;
    background: #E4FF1A;
}

.single-activity .bh-aquapark-hero .bh-cta-actions .bh-btn--ghost {
    border-color: #21272F;
    background: #21272F;
    color: #FFFFFF !important;
}

/* "Explore Coachford Options" was a white pill on the white pricing card
   with a 10% border. A navy outline makes it a button beside the navy
   "Book Aquapark Now". */
.single-activity .bh-aqua-pricing-block .bh-price-btn--secondary {
    border: 2px solid #21272F;
}

/* /activities/zipline/ */

/* "Pair Zipline with Aquapark Mallow": the copy card and its photo shared
   the content column, so the three route cards were 117px wide, their
   text broke after a word or two, and "See Aquapark" and "See More
   Activities" spilled out of their cards. The design's own rule for this
   width (under 1180px) is used beside the Summary: the photo goes under
   the copy and the route cards share the full width. */
@media (min-width: 992px) {
    .single-activity .bh-zip-shell .bh-upsell {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-activity .bh-zip-shell .bh-upsell-media,
    .single-activity .bh-zip-shell .bh-upsell-media img {
        min-height: 0;
        height: 300px;
    }
}

/* Legacy activity bodies (Archery, High Ropes, Low Ropes) */

/* The bodies are pasted legacy HTML: Archery opens with an h4 the size of
   body text, and High Ropes names its three elements in bold paragraphs
   no bigger than the list text under them. The opening h4 and a bold-only
   paragraph that introduces a list are set as subheadings. */
.single-activity .main__body > .wysywig > h4:first-child {
    font-size: 24px;
    line-height: 1.2;
}

.single-activity .main__body > .wysywig > p:has(> strong:only-child):has(+ ul) {
    margin: 24px 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

/* /activities/team-challenge/ */

/* The Summary band ran the full container width (1320px) while the
   designed body under it sits in a 10-of-12 column offset by one, so the
   band stuck out 112px either side of every panel. On wide screens the
   band takes the same column. */
@media (min-width: 1440px) {
    .single-activity .main--wide .main__side {
        width: calc((100% + 20px) * 10 / 12 - 20px);
        margin-left: calc((100% + 20px) / 12);
    }
}

/* The band was pulled 96px up over the banner and covered the breadcrumb
   completely. It starts under the breadcrumb instead. */
@media (min-width: 992px) {
    .single-activity .main--wide .main__side {
        margin-top: -24px;
    }
}

/* "Why teams choose Ballyhass" stretched to the height of the hero copy
   beside it, and its footer was pushed down to leave 186px of empty card.
   The card is as tall as its content. */
.single-activity .bh-corp-v3-hero-card {
    align-self: start;
    min-height: 0;
}

/* Hero chips: on phones each of the four chips was stretched to the full
   width, so they read as four buttons. They keep their own width and
   wrap. */
@media (max-width: 767.98px) {
    .single-activity .bh-corp-v3-pill {
        width: auto;
    }
}

/* "Adult atmosphere" tile: the heading sat over the white lettering of the
   Wake Park sign. A navy wash behind the tile's text, at least 70% where
   the words sit, keeps white text above 5.6:1 over the brightest part of
   any photo. */
.single-activity .bh-corp-v3-proof-content {
    padding-top: 56px;
    background: linear-gradient(180deg, rgba(33, 39, 47, 0) 0%, rgba(33, 39, 47, 0.7) 48px, rgba(33, 39, 47, 0.78) 100%);
}

/* Timeline: each step's dot sits astride the card's top edge, but the card
   clipped its own overflow, so only the lower half of every dot showed.
   The card no longer clips; the photo step clips its own photo, which is
   no longer scaled past the card's rounded corners. */
.single-activity .bh-corp-v3-timeline-card {
    overflow: visible;
}

.single-activity .bh-corp-v3-timeline-image {
    border-radius: inherit;
    transform: none;
}

/* "STEP 03" on the photo step was stretched across the card as a 250px
   frosted band. It is a label the width of its text, like the others. */
.single-activity .bh-corp-v3-timeline-image-inner .bh-corp-v3-timeline-tag {
    align-self: flex-start;
}

/* Wellness options: the three points were indented 20px with no surface,
   so they looked misaligned under the heading. They take the card surface
   the rest of the page uses, with space between them and the paragraph
   above and the button below. */
.single-activity .bh-corp-v3-wellness-point {
    border: 1px solid #DDE7EE;
    border-radius: 18px;
    background: #F6F9FC;
}

.single-activity .bh-corp-v3-wellness-points {
    margin: 20px 0 24px;
}

/* /activities/axe-throwing/ */

/* "Friday night format" was 8% white glass over the hero photo, so the red
   signage behind it showed through its text. It is dark glass now: 88%
   near-black with a stronger blur. Its lightest text (82% white) is 10:1
   even over a white patch of photo. */
.single-activity .bh-axe-v2-sidecard {
    background: rgba(12, 12, 12, 0.88);
    backdrop-filter: blur(12px);
}

/* The card's own artwork, the AXE THROWING sign drawn over the glass,
   ran behind the session times at any strength. It is dropped from this
   card; the hero photo behind still carries the look. */
.single-activity .bh-axe-v2-sidecard::before {
    display: none;
}

/* "Friday nights with bite": the copy sat on the AXE THROWING sign artwork
   at 74% black, and the white sign lettering ran through the words. The
   lower half of the panel, where the text is, darkens to 85%; the artwork
   stays visible above it. White text is 19:1 there over the brightest
   lettering. */
.single-activity .bh-axe-v2-panel-dark .bh-axe-v2-panel-copy {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.85) 55%);
    border-radius: inherit;
}

/* Its label was stretched across the panel as a full-width red bar. It is
   the width of its text, like every other label on the page. */
.single-activity .bh-axe-v2-panel-dark .bh-axe-v2-brush {
    align-self: flex-start;
}

/* "More than a gimmick": the white graffiti in the photo ran behind the
   heading and paragraph. The text sits on a dark glass panel (65% black,
   blurred). On its own that keeps 86% white text at 5.7:1 over pure
   white; over the photo's own shading it is 13:1. */
.single-activity .bh-axe-v2-promo-copy {
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
}

/* "Pricing & practicals" sat 24px under the full-width dark band, closer
   to it than to its own heading's section. It gets the room the other
   sections have between them. */
.single-activity .bh-axe-v2-darkband + .bh-axe-v2-section {
    padding-top: 48px;
}

/* FAQs: the question text ran under the round +/- button on phones
   ("Can we book outside the listed times?"). The text keeps clear of it. */
.single-activity .bh-axe-v2-faq summary {
    padding-right: 64px;
}

/* "Call 022 27773" was a 28px pill under the 52px Enquire button: the
   sitewide 24px minimum for tel: links (a[href^="tel:"], which outranks
   the design's .bh-axe-v2-btn) replaced the button's own 52px. */
.single-activity .bh-axe-v2-btn[href^="tel:"] {
    min-height: 52px;
}

/* /activities/wakeboarding/ */

/* "Watch the Wakepark in Action": the frame had a 340px minimum height on
   top of its 16:9 padding, so it was 492x340 on desktop and 332x340 on a
   phone. It is 16:9 at any width, centred against the copy beside it. */
.single-activity .bh-wake-video {
    align-items: center;
}

.single-activity .bh-wake-video__embed {
    height: auto;
    min-height: 0;
    padding-top: 0;
    aspect-ratio: 16 / 9;
}

/* "Find the Right Session": the buttons in the Page Link column broke
   "View Beginner Sets" over two or three lines and ran to the panel edge.
   They stay on one line, and the cells are a little tighter so the table
   still fits the column. */
.single-activity .wakepark-table .wakepark-btn {
    white-space: nowrap;
}

@media (min-width: 981px) {
    .single-activity .wakepark-table thead th,
    .single-activity .wakepark-table tbody td {
        padding: 16px 12px;
    }

    .single-activity .wakepark-table :is(th, td):last-child {
        padding-right: 20px;
    }
}

/* Phones: the six filter chips were a sideways-scrolling row cut off at
   the screen edge, which also clipped the active chip's glow. They wrap
   onto two lines instead. */
@media (max-width: 640px) {
    .single-activity .wakepark-filters {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* /activities/open-water-swimming/ */

/* "A proper open water setting": three points in a two-column grid left
   "Freshwater setting" alone on its row. An odd last point takes the full
   row. The same applies to the other point grids on the page. */
.single-activity :is(.bh-ows-value-grid, .bh-ows-pass-grid, .bh-ows-practical-grid) > .bh-ows-point:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* "Open Water Swim or Lake Swim?": on phones the 820px table sat in a
   304px sideways scroller, so two thirds of it was off screen. Each row
   now reads as a block: the row label across the top, then the Open Water
   and Lake Swim answers side by side under the column headings, which
   stay in place. No text is repeated in CSS. */
@media (max-width: 640px) {
    .single-activity .bh-ows-table-wrap {
        overflow: visible;
    }

    .single-activity .bh-ows-table,
    .single-activity .bh-ows-table thead,
    .single-activity .bh-ows-table tbody {
        display: block;
        min-width: 0;
    }

    .single-activity .bh-ows-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .single-activity .bh-ows-table thead th:first-child {
        display: none;
    }

    .single-activity .bh-ows-table th,
    .single-activity .bh-ows-table td {
        padding: 12px 14px;
        font-size: 14px;
    }

    .single-activity .bh-ows-table tbody td:first-child {
        grid-column: 1 / -1;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* /activities/kayaking/ */

/* "Kayak the Lee Valley": the hero's copy and its tabbed panel shared the
   920px column beside the Summary, so the H1 ran to six lines, the four
   fact tiles were 114px wide and the panel's feature cards 156px. The
   design's own rule for this width (under 1100px) is used beside the
   Summary: the panel goes under the copy and both take the full width. */
@media (min-width: 992px) {
    .single-activity .bh-kayak-hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-activity .bh-kayak-title {
        max-width: 16ch;
    }
}

/* /activities/paddle-boarding/ */

/* Pricing: refinements.css keeps three columns at every width, which beat
   the design's own phone rule, so on a phone each card was 85px wide:
   "€18pp" was clipped, "Adventure Pass" cut and the descriptions ran a
   word to a line. Below 768px the cards stack, as the design intended. */
@media (max-width: 767.98px) {
    body.single-activity .bh-ksp-pricing {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* /all-activities/ (page 32). The review filed these under the
   activities archive; they are on this page's static card grid. */

/* The Adventure Pass price was squeezed into 45% of the card beside the
   main price, and "From FREE ENTRY!!" pushed it past the card edge. The
   pass price takes its own line. */
.bh-page-all-activities .pricing--alt .card.product .product__text {
    display: block;
}

/* Book Mallow and Book Coachford were inline buttons of two widths, the
   second indented 10px, and every card's buttons started at a different
   height. The buttons are full width, 8px apart, at the foot of the
   card. */
.bh-page-all-activities .pricing--alt .card.product .card-body {
    display: flex;
    flex-direction: column;
}

.bh-page-all-activities .pricing--alt .card.product .card-body > .card-link {
    margin: 8px 0 0;
}

.bh-page-all-activities .pricing--alt .card.product .card-body > .product__text + .card-link,
.bh-page-all-activities .pricing--alt .card.product .card-body > .product__title + .card-link {
    margin-top: auto;
}

/* Tabs: each tab was bottom-aligned, so "Adventure Pass", the only one on
   two lines, stood 24px taller than the rest, and on a phone the row ran
   14px past the screen edge. Every tab is the same height with its label
   centred, and phone labels are a step smaller so all four fit. */
.bh-page-all-activities .pricing--alt .nav-tabs li {
    align-self: stretch;
}

.bh-page-all-activities .pricing--alt .nav-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

@media (max-width: 575.98px) {
    .bh-page-all-activities .pricing--alt .nav-tabs .nav-link {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 14px;
    }
}

/* Family Adventure Weekend: the poster was cropped to the card shape and
   its dates ran under the torn edge. The whole poster shows, top-aligned
   on white, with the torn edge over the white below it. */
.bh-page-all-activities .card.product .card-img-top[src*="FamilyAdventureWeekend"] {
    object-fit: contain;
    object-position: center top;
    background: #FFFFFF;
}

/* Activity pages: text colours that failed WCAG 2.2 AA (1.4.3) */

/* Zipline: the small blue overlines ("Why people love it") and the blue
   prices in "Simple options" were Ballyhass Blue on white, 2.42:1 and
   2.32:1. They take the accessible blue, #0B7A8E: 5.0:1 on white and
   4.8:1 on the price cards' tint. :where() keeps the overline rule weak
   enough that the dark band's own white overline still wins. */
:where(.single-activity .bh-zip-shell) .bh-overline,
.single-activity .bh-zip-shell .bh-access-price {
    color: #0B7A8E;
}

/* Team Challenge: the section kickers, card labels and the soft format
   tag were #00B6D9 on white or on the #EAF7FB tint, 2.2 to 2.4:1. Same
   accessible blue: 4.6:1 on the tint, 5.0:1 on white. The featured
   package keeps its own yellow label. The hero card is 94% white over the
   dark hero, so its label takes a deeper shade, #08697A, 5.6:1. */
.single-activity .bh-corp-v3-section-kicker,
.single-activity .bh-corp-v3-format-tag-soft,
:where(.single-activity) .bh-corp-v3-package-label {
    color: #0B7A8E;
}

.single-activity .bh-corp-v3-card-label {
    color: #08697A;
}

/* Axe Throwing: white on the page's red (#EF0F0F) is 4.43:1, just under
   the line, on every label, number badge and red button. The red is one
   step deeper, #D10D0D, which is 5.6:1; the private groups card's own
   gradient starts at the same red. */
.single-activity .bh-axe-open-v2 {
    --axe-red: #D10D0D;
}

.single-activity .bh-axe-v2-group-copy {
    background: linear-gradient(135deg, #D10D0D 0%, #7F0808 100%);
}

/* Aqua Park: the small blue badges ("Best current online rate", "For
   U16s", "New for") were #1A73E8 on pale blue, 3.8 to 4.2:1, the teal
   Coachford tag and Wibit icon #0EA5A4 on pale teal, 2.4 to 2.8:1, and
   the "2026" card's grey caption #5F7488 on pale blue, 4.46:1. Darker
   shades of the same hues: #1557B0 is 6.3:1, #0B6E6D 5.5:1, #4E6275
   5.8:1. */
.single-activity :is(.bh-price-badge, .bh-upgrade-tag, .bh-brand-card-kicker) {
    color: #1557B0;
}

.single-activity .bh-upgrade-card--coachford .bh-upgrade-tag,
.single-activity .bh-trust-card--wibit .bh-trust-card-icon {
    color: #0B6E6D;
}

.single-activity .bh-brand-card-text {
    color: #4E6275;
}

/* Kayaking: the hero's tile labels and proof notes were 68% and 74% white
   on the frosted tiles, down to 3.5:1 on the lighter right of the hero.
   At 92% white they are 4.9:1 there. */
.single-activity :is(.bh-kayak-meta-label, .bh-kayak-proof-note) {
    color: rgba(255, 255, 255, 0.92);
}

/* Open Water Swimming: the "Common questions" kicker was #0089C6 on white,
   3.9:1. Accessible blue, 5.0:1. */
.single-activity .bh-ows-faq .bh-ows-kicker {
    color: #0B7A8E;
}

/* ===========================================================================
 * Groups, corporate, team, planning and visitor information pages
 * ======================================================================== */

/**
 * Page-level fixes, group 5: groups, corporate and team pages (screenshot
 * review, 24 Oct 2026). Tested by injection on the dev site at 1440px and
 * 390px, loaded after each page's own legacy CSS, as review-fixes.css is.
 * Each block is scoped to its page's own classes and says what was wrong.
 */


/* /groups/ */

/* The page is a default template with a scraped body, so its sections are
   scoped through the welcome block only this page carries. */

/* Intro: the brochure column was centred against a 1,100px intro and its
   image started some 400px below the heading. The columns now stretch to
   the intro's height, so the image starts level with the heading and stays
   in view beside the "Help me choose" panel while the intro scrolls. The
   !important beats the one on Bootstrap's .align-items-center utility. */
@media (min-width: 992px) {
    .sellpoint--welcome-groups .row.align-items-center {
        align-items: stretch !important;
    }

    .sellpoint--welcome-groups .sellpoint__img {
        position: sticky;
        top: 140px;
        padding-top: 8px;
    }
}

/* Phones and tablets: main.min.css reserves 100px above the intro for a
   badge image that this page does not have, so the heading sat 180px under
   the banner. */
@media (max-width: 991.98px) {
    .sellpoint--welcome-groups .sellpoint__head {
        padding-top: 0;
    }
}

/* Phone: refinements.css put the brochure stamp in the flow, but the link is
   inline, so its width and height were ignored and it collapsed to nothing.
   A block again, tucked over the photo's lower right corner, and the image
   box (a fixed 350px in main.min.css) grows to hold it. */
@media (max-width: 767.98px) {
    .sellpoint--welcome-groups .sellpoint__img {
        height: auto;
    }

    .sellpoint--welcome-groups .sellpoint__img img {
        height: 350px;
        width: 100%;
        object-fit: cover;
    }

    .sellpoint--welcome-groups .download-brochure {
        display: block;
        margin: -64px 8px 0 auto;
    }
}

/* "Full Range of Activities": the heading kept col-8 on a phone and was
   squeezed into three lines beside the arrows. The heading takes the free
   width and the arrows only what they need. */
@media (max-width: 767.98px) {
    .entry-content:has(.sellpoint--welcome-groups) .section--activities .col-8 {
        flex: 1 1 0;
        max-width: none;
    }

    .entry-content:has(.sellpoint--welcome-groups) .section--activities .col-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .entry-content:has(.sellpoint--welcome-groups) .section--activities .carousel-controls {
        white-space: nowrap;
    }

    .entry-content:has(.sellpoint--welcome-groups) .section--activities h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 24px;
    }
}

/* Wide screens: the intro and "Our Partners" sit one column in from the
   container, but the activities heading and cards started on its edge. Both
   now start on the intro's line. */
@media (min-width: 1200px) {
    .entry-content:has(.sellpoint--welcome-groups) .section--activities {
        padding-left: calc((100% + 20px) / 12);
    }
}

/* Gallery: the heading and photo sat flush on the blue panel's edge on a
   phone, and an empty caption box plus arrows pushed 8rem below the panel
   left about 180px of bare blue under the photo. The panel gets side
   padding, the blank caption no reserved height, and the arrows sit in the
   flow under the photo. */
.entry-content:has(.sellpoint--welcome-groups) .section--gallery-carousel .slider__caption {
    min-height: 0;
    margin: 0;
}

.entry-content:has(.sellpoint--welcome-groups) .section--gallery-carousel {
    padding-bottom: 5rem;
}

@media (min-width: 992px) {
    .entry-content:has(.sellpoint--welcome-groups) .section--gallery-carousel h2 {
        margin-left: calc((100% + 20px) / 12);
    }
}

@media (max-width: 991.98px) {
    .entry-content:has(.sellpoint--welcome-groups) .section--gallery-carousel {
        padding: 4rem 20px 4.5rem;
    }

    .entry-content:has(.sellpoint--welcome-groups) .section--gallery-carousel h2 {
        margin-bottom: 1.5rem;
    }

    .entry-content:has(.sellpoint--welcome-groups) .gsap-gallery .slider {
        padding-bottom: 64px;
    }

    .entry-content:has(.sellpoint--welcome-groups) .gsap-gallery .nav-wrapper {
        top: 100%;
        bottom: auto;
        transform: none;
        padding-top: 16px;
    }
}

/* Reviews: Flickity sizes the viewport to the tallest review, so a short
   quote left about 200px of white above the page dots. The viewport now
   takes the height of the review on show, and the dots sit under it. The
   !important rules beat the height and position Flickity writes inline. */
.entry-content:has(.sellpoint--welcome-groups) .reviews-carousel .flickity-viewport {
    height: auto !important;
}

.entry-content:has(.sellpoint--welcome-groups) .reviews-carousel .flickity-slider {
    position: relative;
}

.entry-content:has(.sellpoint--welcome-groups) .reviews-carousel .review-card.is-selected {
    position: relative !important;
}

.entry-content:has(.sellpoint--welcome-groups) .reviews .reviews-container {
    padding-bottom: 64px;
}

.entry-content:has(.sellpoint--welcome-groups) .reviews .carousel-controls {
    bottom: 0;
}

.entry-content:has(.sellpoint--welcome-groups) section.reviews {
    padding-bottom: 24px;
}

@media (max-width: 767.98px) {
    .entry-content:has(.sellpoint--welcome-groups) section.reviews {
        padding-top: 24px;
    }
}

/* Partners: the strip ran past the container to both screen edges with a
   cut-off logo on the left. It is held to the container, fades at its ends,
   and on wide screens starts on the heading's line. */
.entry-content:has(.sellpoint--welcome-groups) .partners .flickity-viewport {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.entry-content:has(.sellpoint--welcome-groups) .partners {
    padding-top: 24px;
}

@media (min-width: 1400px) {
    .entry-content:has(.sellpoint--welcome-groups) .partners .main-carousel-partners {
        margin-left: calc((100% + 20px) / 12 - 10px);
    }
}

/* FAQ panel: no side padding, so the heading touched the panel's left edge
   and the accordion its right. Questions that wrapped were centred (the
   button's default alignment) while one-liners sat left, and the chevrons
   were 8px wide. */
.entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion > div {
    padding: 0 20px;
}

@media (min-width: 768px) {
    .entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion > div {
        padding: 0 40px;
    }
}

@media (min-width: 1200px) {
    .entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion > div {
        padding: 0 64px;
    }
}

@media (max-width: 767.98px) {
    .entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion {
        padding: 5.5rem 0 6rem;
    }

    .entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion .section-intro {
        margin: 0 0 32px;
    }

    .entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion .section-intro h2 {
        margin-bottom: 1rem;
    }
}

.entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion .accordion-header {
    text-align: left;
    gap: 16px;
}

.entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion .accordion-header svg {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

/* Found in this pass: links inside the FAQ answers ("what to bring page",
   "found here") take the sitewide #0B7A8E link colour, which is 2.5:1 on
   the panel's dark answer cards. Brand yellow, underlined: 11:1. */
.entry-content:has(.sellpoint--welcome-groups) .section--faq-accordion .accordion-content a {
    color: #E4FF1A;
    text-decoration: underline;
}

/* "Book your group activities today": 100px of margin plus 150px of padding
   left a 250px gap under the FAQ panel and another 210px above the form. */
.entry-content:has(.sellpoint--welcome-groups) .letterbox--inverted {
    margin: 0;
    padding: 96px 0 120px;
}

/* Phone: the yellow brush is a fixed 796px image pinned to the heading's
   right edge, so on a narrow screen it ran 400px off the left edge and
   stopped short on the right. Centred and scaled to the heading. */
@media (max-width: 767.98px) {
    .entry-content:has(.sellpoint--welcome-groups) .letterbox--inverted {
        padding: 72px 0;
    }

    .entry-content:has(.sellpoint--welcome-groups) .letterbox h2::after {
        left: 50%;
        right: auto;
        top: -20px;
        transform: translateX(-50%) scale(0.5);
        transform-origin: 50% 0;
    }
}

/* Enquiry form (also on /component-library/) */

/* Group Type, Venue and Day or overnight are bootstrap-select widgets. The
   wrapper kept the plugin's 220px width and also took the input's border and
   padding, so a grey button sat inside a bordered box narrower than the text
   fields, and "Select a group type" ran under the caret. The wrapper is now
   bare and full width, and the button is drawn like the other fields. */
.section--group-enquiry .group-enquiry__form .bootstrap-select.group-enquiry__select {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
}

.section--group-enquiry .group-enquiry__form .bootstrap-select > .dropdown-toggle {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--bh-field-edge);   /* was #DDE0E8, 1.32:1 (WCAG 1.4.11) */
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #21272F;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: none;
}

.section--group-enquiry .group-enquiry__form .bootstrap-select > .dropdown-toggle:focus,
.section--group-enquiry .group-enquiry__form .bootstrap-select.show > .dropdown-toggle {
    border-color: #0B7A8E;
}

.section--group-enquiry .group-enquiry__form .bootstrap-select .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
}

.section--group-enquiry .group-enquiry__form .bootstrap-select > .dropdown-toggle::after {
    margin-left: 12px;
}

/* Bootstrap 4 has no g-3 gutter class, so each label sat directly on the
   field above it. */
.section--group-enquiry .group-enquiry__form > .row > [class*="col-"] {
    margin-bottom: 14px;
}

/* Contrast: the School Tours link was #05BCD9 on white (2.2:1) and the
   EMAIL and PHONE labels #888 (3.5:1). Blue text on white is #0B7A8E
   (5.0:1), and the labels take the grey refinements.css uses for
   placeholders (6.4:1). The focus ring was the same pale blue at 15%
   opacity, and is now a solid #0B7A8E ring. */
.section--group-enquiry .group-enquiry__note a {
    color: #0B7A8E;
    text-decoration: underline;
}

.section--group-enquiry .group-enquiry__contact-details strong {
    color: #57606A;
}

.section--group-enquiry .group-enquiry__input:focus,
.section--group-enquiry .group-enquiry__textarea:focus {
    border-color: #0B7A8E;
    box-shadow: 0 0 0 2px #0B7A8E;
}

/* The goal and interest checkboxes were the browser's 13px defaults. Larger,
   navy when ticked, and spaced as tap targets. */
.section--group-enquiry .group-enquiry__form fieldset label {
    gap: 8px;
    margin: 0 20px 10px 0;
    font-size: 0.95rem;
    cursor: pointer;
}

.section--group-enquiry .group-enquiry__form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #21272F;
    cursor: pointer;
}


/* /corporate-and-team-days/ */

/* Photo cards: the large card's heading sat on the white "BALLYHASS WAKE
   PARK" sign lettering, behind a scrim that is only 72% navy at the very
   bottom. The text block now carries its own navy fade, solid enough under
   the words (90%) to hold white at 11:1 over the brightest part of any photo,
   and the heading runs to 17 characters a line instead of 12, so it takes
   three lines instead of five. The frosted tags (16% white) become navy
   chips: white on them is 7.8:1 even over a white background. */
.bh-corp-v3-proof-content {
    padding-top: 72px;
    background: linear-gradient(180deg, rgba(33, 39, 47, 0) 0%, rgba(33, 39, 47, 0.9) 45%, rgba(33, 39, 47, 0.92) 100%);
}

.bh-corp-v3-proof-content h3 {
    max-width: 17ch;
}

.bh-corp-v3-proof-tag {
    background: rgba(33, 39, 47, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

/* Section kickers and the "Special option" tag were Ballyhass Blue on pale
   cyan (2.2:1), and the package labels blue on white (2.4:1). #0B7A8E is
   4.6:1 on the pale cyan and 5.0:1 on white. */
.bh-corp-v3-section-kicker,
.bh-corp-v3-format-tag-soft,
.bh-corp-v3-package-label {
    color: #0B7A8E;
}

/* The hero card's "Why teams choose Ballyhass" label sits on 94% white over
   the dark hero (#F2F2F3 at worst), where blue was 2.2:1 and #0B7A8E would
   be 4.48:1. One step darker: 4.9:1. */
.bh-corp-v3-card-label {
    color: #0A7385;
}

/* Wellness list: the three points kept a card's 18px by 20px padding but
   had no card, so they sat 20px in from the heading with wide unexplained
   gaps between them. They are now soft cards like the reassurance points
   above, and the button no longer touches the last one. */
.bh-corp-v3-wellness-point {
    padding: 16px 20px;
    background: #F5F8FB;
    border: 1px solid #DDE7EE;
    border-radius: 18px;
}

.bh-corp-v3-wellness-point strong {
    margin-bottom: 4px;
}

.bh-corp-v3-wellness-points {
    gap: 12px;
    margin-top: 22px;
}

.bh-corp-v3-wellness-actions {
    margin-top: 24px;
}

/* Found in this pass, the same fault as the hero on
   /plan-your-corporate-day/ (same photo, same overlay): the "BALLYHASS
   WAKE PARK" signage read through the overlay behind the buttons and the
   three small cards. A second layer darkens the lower half of the hero, so
   the rider stays at the top and the lettering no longer reads. */
.bh-corp-v3-hero-overlay {
    background:
        linear-gradient(180deg, rgba(33, 39, 47, 0) 35%, rgba(33, 39, 47, 0.75) 60%, rgba(33, 39, 47, 0.9) 75%),
        linear-gradient(110deg, rgba(33, 39, 47, 0.92) 0%, rgba(33, 39, 47, 0.84) 42%, rgba(33, 39, 47, 0.6) 68%, rgba(33, 39, 47, 0.78) 100%);
}

/* Found in this pass, the same fault as /plan-your-corporate-day/: on a
   phone the four hero tags were stretched into full-width centred pills
   that read as four buttons above the real ones. They wrap as compact tags
   again. */
@media (max-width: 767px) {
    .bh-corp-v3-hero-pills {
        gap: 8px;
    }

    .bh-corp-v3-hero-pills .bh-corp-v3-pill {
        width: auto;
        padding: 7px 12px;
        justify-content: flex-start;
        font-size: 12.5px;
    }
}


/* /plan-your-corporate-day/ */

/* Eyebrows, the "Start your enquiry" form label and the "Corporate" quote
   label were Ballyhass Blue on pale cyan or pale grey (2.2:1). #0B7A8E is
   4.6:1 on the pale cyan and 4.6:1 on the form card's grey. The white
   "Next step" kicker on the dark closing panel is left as it is. */
.bh-corp-enquiry-section-kicker:not(.bh-corp-enquiry-section-kicker-light),
.bh-corp-enquiry-form-label,
.bh-corp-enquiry-social-label {
    color: #0B7A8E;
}

/* Hero: the photo's "BALLYHASS WAKE PARK" signage sits in its lower third
   and showed through the overlay under the copy cards and the form. A
   second layer darkens the lower half of the hero to near solid navy, so
   the rider stays at the top and the lettering no longer reads. */
.bh-corp-enquiry-hero-overlay {
    background:
        linear-gradient(180deg, rgba(33, 39, 47, 0) 35%, rgba(33, 39, 47, 0.75) 60%, rgba(33, 39, 47, 0.9) 75%),
        linear-gradient(110deg, rgba(33, 39, 47, 0.92) 0%, rgba(33, 39, 47, 0.84) 42%, rgba(33, 39, 47, 0.62) 68%, rgba(33, 39, 47, 0.8) 100%);
}

/* Phone: the four info tags were stretched into full-width centred pills
   that read as four buttons. They wrap as compact tags again. */
@media (max-width: 767.98px) {
    .bh-corp-enquiry-badges {
        gap: 8px;
    }

    .bh-corp-enquiry-badges span {
        width: auto;
        min-height: 0;
        padding: 6px 12px;
        justify-content: flex-start;
        font-size: 12px;
    }
}

/* Closing "Next step" panel: it has no button, so the page ended on a call
   to action with nothing to press. These rules style the link proposed in
   the report (class bh-corp-enquiry-close-btn, pointing at
   #bhCorpEnquiryForm) and do nothing until that link is added. The form
   lands clear of the fixed header. */
.bh-corp-enquiry-close-card .bh-corp-enquiry-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 22px;
    padding: 12px 24px;
    border-radius: 10px;
    background: #E4FF1A;
    color: #21272F;               /* 13.3:1 */
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
}

.bh-corp-enquiry-close-card .bh-corp-enquiry-close-btn:hover,
.bh-corp-enquiry-close-card .bh-corp-enquiry-close-btn:focus-visible {
    background: #FFFFFF;
    color: #21272F;               /* 15.0:1 */
}

#bhCorpEnquiryForm {
    scroll-margin-top: 140px;
}


/* /overnight-groups/ */

/* Bunkhouse card: the copy and photo shared the first row and the three
   feature boxes took the left half of a second row, leaving a 520px by
   380px blank under the photo. The feature boxes now run in three columns
   across the full width of the card, under both. */
@media (min-width: 1081px) {
    .bh-rs-accom .bh-rs-accom-side {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0 30px 30px;
    }
}

/* "Make the retreat feel easy to organise": each row put a 150px chip, the
   text and a button side by side, which left the text about 170px wide and
   wrapping to five or six lines. The chip now sits above the text, so the
   text has the row's width less the button. */
@media (min-width: 768px) {
    .bh-rs-practical-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 10px;
    }

    .bh-rs-practical-chip {
        grid-column: 1 / -1;
        justify-self: start;
        min-height: 28px;
    }
}

/* Phone: the full-width "Ask about" buttons had their labels pushed to the
   left edge. Centred, like every other button on the page. The topic chips
   above them, and the retreat style tags, were stretched to full width too
   and read as more buttons. They are compact tags again. */
@media (max-width: 767px) {
    .bh-rs-practical-action {
        justify-content: center;
    }

    .bh-rs-practical-chip,
    .bh-rs-fit-tag {
        width: auto;
        justify-self: start;
    }
}

/* Photo cards ("Village atmosphere", "Inside the stay", "Reason to
   travel"): white captions over a scrim that was 2% at the caption's top
   and 78% at the bottom, so the titles sat on bright photo. The fade now
   starts above the caption and is 88% under the words, which holds white
   at 10:1 over the brightest part of any photo. */
.bh-rs-gallery-overlay {
    padding-top: 48px;
    background: linear-gradient(180deg, rgba(16, 33, 27, 0) 0%, rgba(16, 33, 27, 0.88) 42%, rgba(16, 33, 27, 0.9) 100%);
}

.bh-rs-gallery-overlay span {
    color: #FFFFFF;
}

/* "Price on enquiry PER PERSON" wrapped the unit across two lines and read
   as one broken phrase. The pricing basis now sits on its own line under
   the amount on all three cards. */
.bh-rs-price-amount span {
    display: block;
    margin-top: 6px;
}


/* /sports-and-youths/ */

/* Three summary cards under the hero sat in a four-column grid and left the
   last column empty. Three columns when there are three cards. */
@media (min-width: 768px) {
    .bh-sy-strip:not(:has(> :nth-child(4))) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Pricing cards: the button sat straight under the last bullet in the
   fullest card. A clear gap above every card's button. */
.bh-sy-build-list {
    margin-bottom: 20px;
}

/* Activity bands: white "Water" and "Height" headers on light blue (2.7:1
   falling to 1.8:1) and on pink (3.4:1 falling to 2.4:1), with the small
   "2 hours duration" line failing outright. The page's own dark green, as
   on the "Land" band: 6.2:1 on the darkest blue, 9.6:1 on the lightest,
   4.9:1 and 7.8:1 on the two pinks. (Brand navy would be 4.4:1 on the
   darker pink.) */
.bh-sy-band.water .bh-sy-band-head,
.bh-sy-band.height .bh-sy-band-head {
    color: #10211B;
}

/* Coachford All Access photo: the image is a 2021 screen capture with
   black bars across its top and bottom. Enlarged by 13% inside its frame so
   the bars fall outside it. The picture itself should still be replaced
   (see the report). */
.bh-sy-access-v2-media {
    overflow: hidden;
}

.bh-sy-access-v2-media img {
    transform: scale(1.13);
}

/* Photo cards ("Proper energy", "More memorable setting"): white captions
   over a scrim that was 2% at the caption's top, so the titles sat on
   bright sky. The fade now starts above the caption and is 88% under the
   words, which holds white at 10:1 over the brightest part of any photo. */
.bh-sy-image-overlay {
    padding-top: 48px;
    background: linear-gradient(180deg, rgba(16, 33, 27, 0) 0%, rgba(16, 33, 27, 0.88) 42%, rgba(16, 33, 27, 0.9) 100%);
}

.bh-sy-image-overlay span {
    color: #FFFFFF;
}

/* Found in this pass: the "Club coach" style labels and the pricing tier
   tags were the page's blue on its pale blue (4.1:1 at 12px), and the "Ask
   About Coachford Groups" link sits on the Coachford card's blue-tinted
   corner (3.8:1 at its deepest). A shade darker in the same blue: 5.0:1 on
   the pale blue and 4.6:1 on the deepest tint. */
.bh-sy-bestfor-label,
.bh-sy-build-tier,
.bh-sy-access-v2-link.secondary {
    color: #1A6BBD;
}


/* /downloads/ */

/* "Price Lists" and "Before You Visit" were stretched to the height of the
   longer card beside them and stood half empty. Each card now ends after
   its own last download. */
.bh-downloads-grid {
    align-items: start;
}

/* Phone: each row kept the button beside the text, which squeezed the
   title and description into a 130px column, five or six words to a line.
   The button now sits under the text. */
@media (max-width: 599.98px) {
    .bh-downloads-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bh-downloads-item .bh-downloads-btn {
        justify-self: start;
    }
}


/* /first-time-at-ballyhass/ */

/* main.min.css gives the last section of its type a 100px bottom margin,
   and the hero is a section followed only by divs, so it left a 154px gap
   above the first row of cards. */
.bh-first-time-page .bh-ft-hero {
    margin-bottom: 0;
}

/* The "First time at Ballyhass" eyebrow is a flex child of a column and
   stretched to the full width of the hero copy. It hugs its text again. */
.bh-ft-hero-copy > .bh-ft-kicker {
    align-self: flex-start;
}

/* Phone: the dark hero ran to the 16px gutter with its text 11px inside,
   while every card below sits 27px from the screen edge with 20px of
   padding. The hero now lines up with the cards and pads like them. */
@media (max-width: 820px) {
    .bh-first-time-page .bh-ft-hero {
        margin: 0 11px;
        border-radius: 24px;
    }

    .bh-ft-hero > .bh-ft-shell {
        width: calc(100% - 40px);
    }
}

/* Eyebrows and route tags: #0F7F99 on their 10% blue tint was 4.2:1 at
   12px. One step darker: 5.0:1. */
.bh-ft-kicker-dark,
.bh-ft-route-tag {
    color: #0A7385;
}

/* "Big energy" and "Calmer choice" cards: the tags were teal on a 10% tint
   over the photo, and the white headings sat on pale sky and a white wall
   behind a scrim of 6% at the top. The tags become solid white chips
   (5.5:1), and the scrim reaches 88% behind the heading and copy (white
   holds 11:1 over any photo). */
.bh-ft-option-card .bh-ft-route-tag {
    background: #FFFFFF;
}

.bh-ft-option-card::before {
    background: linear-gradient(180deg, rgba(16, 33, 27, 0.15) 0%, rgba(16, 33, 27, 0.72) 32%, rgba(16, 33, 27, 0.88) 55%, rgba(16, 33, 27, 0.9) 100%);
}

.bh-ft-option-inner p {
    color: #FFFFFF;
}

/* Buttons in sibling cards sat at different heights because each followed
   its own copy. Pinned to the bottom of every card in a row. */
.bh-ft-route-card > .bh-ft-btn-row,
.bh-ft-feature-copy > .bh-ft-btn-row,
.bh-ft-final-card > .bh-ft-btn-row {
    margin-top: auto;
}

/* "Why people love it": a decorative 220px circle in the corner showed
   through the translucent "Built around clear next steps" card and looked
   like a stain on it. Removed. */
.bh-ft-proof::before {
    display: none;
}

/* Found in this pass: the four hero cards ("New to Ballyhass?" and the
   rest) are 10% white glass over the lighter right-hand side of the hero
   photo, and their 14px white text measured 2.7:1 to 4.1:1 against the
   brightest pixels behind it. A 60% dark green fill under the glass blur
   brings the worst of them to 8.5:1. */
.bh-ft-quick-card {
    background: rgba(16, 33, 27, 0.6);
}


/* /what-to-bring/ */

/* Packing planner: the "Most forgotten items" and "Quick heads-up" cards
   share a grid that is stretched to the height of the packing list beside
   it, so each card grew to half that height and the first stood about
   230px empty. The cards now end after their own text. */
.bh-output .bh-side-stack {
    align-content: start;
}


/* /faqs2/ */

/* Hero: the four feature tiles sat inside the copy's 860px measure and
   stopped about 176px short of the card's right edge. The tiles now span
   the card. The heading keeps its 860px measure and the lead its 740px. */
.bh-faq-hero .bh-faq-hero-inner {
    max-width: none;
}

.bh-faq-hero .bh-faq-hero-inner h1 {
    max-width: 860px;
}

/* "The full Ballyhass FAQ library" began 22px under the cards above it and
   read as part of them. A section's worth of space above it. */
.bh-faq-page .bh-accordion-wrap {
    margin-top: 64px;
}

/* Found in this pass, the same fault as /what-to-bring/: the "Quick
   reminders" and "Best next mindset" cards were stretched to the height of
   the answer card beside them and stood half empty. */
.bh-answer-grid .bh-side-stack {
    align-content: start;
}


/* /camp-faqs/ */

/* Filter chips: the nine chips needed 1px more than the row at 1440px, so
   "On The Day" dropped to a line of its own. On wide screens the chips take
   the 13px size they already use on phones, with slightly tighter padding,
   and all nine fit on one line with room to spare. */
@media (min-width: 1200px) {
    .bh-camp-faq-filters {
        gap: 8px;
    }

    .bh-camp-faq-filters .bh-camp-filter {
        padding: 11px 12px;
        font-size: 13px;
    }
}

/* Keyboard focus on a chip only turned its border Ballyhass Blue (2.2:1
   against white) because the legacy rule removes the outline. It takes the
   site's focus ring now (refinements.css section 6), which wins over that rule. */


/* /newsletter-sign-up/ */

/* "Keep exploring" cards: "Explore First Time Guide" needs two lines in a
   quarter-width card, so its button was taller than its three neighbours
   and its top sat higher. Every button in the row now has the height of a
   two-line button, so all four line up top and bottom. */
@media (min-width: 768px) {
    .bh-newsletter-route a {
        min-height: 58px;
        padding: 10px 14px;
        line-height: 1.25;
        text-align: center;
    }
}

/* Phone: the form sat three cards deep (panel, tinted card, white box), so
   its inputs were about 230px wide on a 390px screen. The panel's padding
   and the inner white box are dropped, leaving one tinted card. */
@media (max-width: 767px) {
    .bh-newsletter-form-wrap {
        padding: 0;
    }

    .bh-newsletter-form-wrap .bh-newsletter-form-card {
        padding: 20px 16px 12px;
        border: 0;
        border-radius: inherit;
    }

    .bh-newsletter-form-card .bh-newsletter-form-top {
        margin-bottom: 8px;
        padding: 0;
    }

    .bh-newsletter-form-card .bh-newsletter-form-embed {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
}

/* Found in this pass: the "What you can expect" eyebrow and the route tags
   were Ballyhass Blue on white and on #F4F9FB (2.4:1 and 2.3:1). #0B7A8E is
   5.0:1 and 4.7:1. */
.bh-newsletter-eyebrow,
.bh-newsletter-route-tag {
    color: #0B7A8E;
}

/* Found in this pass: the "Why join?" card and the four topic pills are
   12% white glass over the brightest part of the hero photo (the
   helmets). The card's white text measured about 3.2:1 against what shows
   through, and on a phone two pills fell to 3.8:1 and 4.3:1. A navy fill
   under each keeps the glass look and brings the card to about 9:1 and
   every pill above 4.5:1. */
.bh-newsletter-side-card {
    background: rgba(33, 39, 47, 0.62);
}

.bh-newsletter-pill-row li {
    background: rgba(33, 39, 47, 0.55);
}


/* /bus-and-train-info/ */

/* "Drop-off is Sunday evening..." had no top margin and sat on the last
   date in the list above it. */
.bh-camp-train-weeks .bh-camp-train-collection {
    margin-top: 14px;
}

/* "Transport pricing" and "Residential camp weeks" used the browser's disc
   bullets while every other list on the page is a designed one. Small
   brand-blue dots on the same indent. */
.bh-camp-train-pricebox ul,
.bh-camp-train-weeks ul {
    padding-left: 0;
    list-style: none;
}

.bh-camp-train-pricebox li,
.bh-camp-train-weeks li {
    position: relative;
    padding-left: 18px;
}

.bh-camp-train-pricebox li::before,
.bh-camp-train-weeks li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00B6D9;
}

/* Week picker: below 1080px it became nine full-width tiles stacked down
   the screen. "All weeks" now takes a row of its own and the eight weeks
   sit four across on a tablet and two across on a phone. */
@media (max-width: 1080px) {
    .bh-camp-week-selector {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-camp-week-selector .bh-camp-week-btn[data-week="all"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .bh-camp-week-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* In a half-width tile "Almost sold out" broke over two lines. */
    .bh-camp-week-selector .bh-camp-week-status {
        padding: 5px 7px;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }
}

/* Keyboard focus on a week only turned its border Ballyhass Blue (2.2:1
   against white) because the legacy rule removes the outline. It takes the
   site's focus ring now (refinements.css section 6), which wins over that rule. */


/* /feedback/ */

/* Phone: the Google Form sat inside the page panel's 20px padding, the
   navy card's 24px and a white box's 12px, so it was 246px wide on a 390px
   screen. The paddings are trimmed and the white box adds none of its own
   (the form brings its own), which gives the form 314px. */
@media (max-width: 767px) {
    .bh-feedback-page .bh-feedback-main {
        padding-right: 10px;
        padding-left: 10px;
    }

    .bh-feedback-page .bh-feedback-embed-wrap {
        padding: 22px 12px 12px;
    }

    .bh-feedback-page .bh-feedback-embed-box {
        padding: 0;
        border-radius: 14px;
    }
}

/* Found in this pass: the numbers on the "Before you fill it in" prompts
   were white on the off-brand green (2.2:1). Navy is 6.8:1. */
.bh-feedback-prompt-num {
    color: #21272F;
}

/* /schools-hub/ with the Hub hero: the design's shells take the container so
   the body lines up with the hero, and the docked journey bar is lifted off
   the photograph like the booking strip. */
body.bh-page-schools-hub.has-hub-hero .bh-schools-hub-page .bh-sh-shell {
    max-width: none;
}

body.bh-page-schools-hub .is-docked .bh-sh-journey {
    box-shadow: 0 16px 40px rgba(33, 39, 47, 0.22);
}

/* /schools-hub/ on phones: the six journey steps stacked to 400px under the
   hero (Teamwork 11929472). Two columns of compact steps instead. */
@media (max-width: 767.98px) {
    body.bh-page-schools-hub .bh-sh-journey {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    body.bh-page-schools-hub .bh-sh-journey > a {
        min-height: 44px;
        padding: 8px 10px !important;
    }
}

/* ===========================================================================
 * axe-core 4.14 colour contrast on the designed pages (31 October 2026)
 *
 * Small labels in Ballyhass Blue, or the camps' own #0089C6, read as text on
 * white and pale tints: 2.25:1 to 3.99:1 where 4.5:1 is needed. The text-safe
 * blue (--bh-blue-text, #0B7A8E) is 4.58:1 or better on every one of those
 * surfaces. The highlighted and dark variants keep their own colours (the
 * dark cards' kickers by their own, more specific, rules).
 * ======================================================================== */

/* /sauna-and-swim-coachford/ and /sauna-and-swim/ */
body .bh-sauna-hours-coachford .bh-hours-tag:not(.bh-hours-tag-highlight),
body .bh-sauna-first-coachford .bh-first-tag:not(.bh-first-tag-highlight),
body .bh-sauna-first-coachford .bh-first-mini-kicker,
body .bh-sauna-prepare-coachford-v2 .bh-prepare-tag:not(.bh-prepare-tag-highlight),
body .bh-sauna-prepare-coachford-v2 .bh-prepare-mini-kicker,
body .bh-sauna-why-coachford-v2 .bh-why-tag:not(.bh-why-tag-highlight):not(.bh-why-tag-dark),
body .bh-sauna-why-coachford-v2 .bh-why-mini-kicker,
body .bh-day-tag:not(.bh-day-tag-highlight) {
    color: var(--bh-blue-text);
}

/* "Watch the story": white on Ballyhass Blue, 2.45:1. Navy on it is 6.13:1. */
body .bh-video-card .bh-video-kicker {
    color: var(--bh-on-blue);
}

/* Camp pages: Cutting Edge, Cadets and the ASD camps. */
body .bh-cutting-edge-v1__kicker,
body .bh-cutting-edge-v1__compare-card:not(.featured) .bh-cutting-edge-v1__tag,
body .bh-cadets-v1__kicker,
body .bh-cadets-v1__compare-card:not(.featured) .bh-cadets-v1__tag,
body .bh-asd-camp-v1__kicker,
body .bh-asd-camp-v1__day b {
    color: var(--bh-blue-text);
}

/* Coachford Explorers' bus summary and stop list labels. */
body .bh-explorers-bus__summary-label,
body .bh-explorers-bus__stops-label {
    color: var(--bh-blue-text);
}

/* Accessibility assessment, 3 November 2026 ------------------------------------------------- */

/* WCAG 1.4.11: a field's edge at 3:1 or more against the page. The recovered designs
   (assets/css/legacy, rebuilt and never edited) gave their own fields pale edges, #CFE1E9 and
   #D7E3EC, 1.3:1 to 1.4:1 on white: the birthday party planner and the corporate enquiry
   wrapper. Only the edge colour changes; their focus colours stay. */
body .bh-bday-party-v5__select,
body .bh-bday-party-v5__input,
body .bh-bp-select,
body .bh-corp-enquiry-form-wrap :is(.hs-input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea):not(:focus) {
    border-color: var(--bh-field-edge);
}

/* WCAG 1.4.3: a link in the text-safe teal on a dark panel, about 2.4:1 to 2.8:1: the Camp Finder
   link in the opening panels of Mallow Troopers and Coachford Explorers, and the Lake Swim link in
   Open Water Swimming's hero note. Found by checking every page for the teal on a dark ground. On a
   dark panel a link is white, underlined (15:1 or more). */
body .bh-troopers-main-hero__panel a:not([class]),
body .bh-explorers-main-hero__panel a:not([class]),
body .bh-ows-hero-note a:not([class]) {
    color: var(--bh-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* WCAG 1.4.3: Aqua Park's "Choose your park" label was #1A73E8 at 12px on the panel's #F8F8F9,
   4.24:1. The text-safe blue is 4.7:1 there. */
body .bh-aquapark-panel .bh-panel-kicker {
    color: var(--bh-blue-text);
}

/* Our Story timeline on a phone (Eoghan, 7 November 2026, comment 11933032: "slightly off on
   mobile"). Measured at 390px: the connecting line was one screen wide and scrolled away after the
   first card, it sat 22px below the dots so the cards hid it, the dots were cut in half by each
   card's overflow clip, and the four photo cards had no dot at all. Now: the line is the scroller's
   own background, fixed to its content, so it runs the whole way through the cards' top edges at the
   dots' centre; cards no longer clip (the photo is rounded itself); every card has a dot. */
.bh-history-scroll {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.35) 0%, rgba(29, 79, 145, 0.35) 45%, rgba(249, 115, 22, 0.35) 100%) 0 36px / 100% 4px no-repeat local;
}

.bh-history-scroll .bh-history-line {
    display: none;
}

.bh-history-card {
    overflow: visible;
}

.bh-history-image-bg {
    border-radius: inherit;
}

.bh-history-image-card::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 22px;
    z-index: 3;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #22d3ee 0%, #f97316 100%);
    box-shadow: 0 8px 18px rgba(7, 21, 51, 0.16);
}

@media (max-width: 767px) {
    .bh-history-scroll {
        background-position: 0 30px;
    }
}

/* Adventure Pass savings table: the venue after a product's name (comment 11933030). */
body .bh-adventure-pass-page .bh-ap-row .bh-ap-venue {
    font-weight: 500;
    color: #4b5563;
}

body .bh-adventure-pass-page .bh-ap-row > div:first-child a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}