/* ---------------------------------------------------------------------------
 * The help hub on the main FAQ page, and the customer information band on the
 * Terms pages (inc/help-hub.php).
 *
 * The look is the help page Ballyhass designed for the old site (page 456,
 * /faqs2/): dark green hero and panels, a white answer planner lifted over the
 * hero, pill choices, rounded cards. Eoghan asked for it back on 30 October
 * 2026 (Teamwork 11931155). Built from tokens (tokens.css, including the
 * support green), Poppins throughout, buttons in bold capitals on a rounded
 * square, and no white text on blue or pink anywhere.
 *
 * Loaded only on a page that holds the hub's shortcodes, and on the Terms pages.
 * ------------------------------------------------------------------------ */

.bh-help,
.bh-help-band {
    --bh-help-radius-lg: 24px;
    --bh-help-radius: 16px;
    --bh-help-shadow: 0 18px 42px rgba(15, 51, 42, 0.10);
    --bh-help-edge: rgba(18, 78, 63, 0.14);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
}

/* The compiled theme leaves boxes at content-box, which adds padding to every minimum height. */
.bh-help *,
.bh-help *::before,
.bh-help *::after,
.bh-help-band *,
.bh-help-band *::before,
.bh-help-band *::after {
    box-sizing: border-box;
}

/* main.min.css gives every section a 100px bottom margin, and Bootstrap styles bare fieldsets. */
.bh-help section,
.bh-help aside,
.bh-help fieldset {
    margin: 0;
}

.bh-help fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.bh-help :is(h1, h2, h3, h4, h5) {
    font-family: var(--bh-font);
    letter-spacing: -0.01em;
}

/* Paragraphs are spaced by the component they sit in, and answers by their own rule below. */
.bh-help :is(.bh-help-hero__lead, .bh-help-finder__intro, .bh-help-finder__ask, .bh-help-solve__lead, .bh-help-guides__lead, .bh-help-contact__lead, .bh-help-contact__more) {
    margin: 0;
}

.bh-help :is(.bh-help-issue__answer, .bh-help-guide__answer) p {
    margin: 0 0 var(--bh-space-3);
}

.bh-help :is(.bh-help-issue__answer, .bh-help-guide__answer) p:last-child {
    margin-bottom: 0;
}

/* Kickers: small capitals on a rounded chip, as the old page had them. */
.bh-help-kicker {
    display: inline-block;
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-2) var(--bh-space-3);
    color: var(--bh-on-green);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--bh-radius-pill);
}

.bh-help-kicker--dark {
    color: var(--bh-green);
    background: var(--bh-green-mint);
}

/* ---------------------------------------------------------------------------
 * Buttons: bold capitals, rounded square (the brand guide).
 * ------------------------------------------------------------------------ */

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

.bh-help-btn:hover,
.bh-help-btn:focus {
    text-decoration: none;
}

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

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

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

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

.bh-help-btn--light:hover {
    color: var(--bh-on-navy);
    background: var(--bh-navy);
}

.bh-help-btn--green {
    color: var(--bh-on-green);
    background: var(--bh-green);
}

.bh-help-btn--green:hover {
    color: var(--bh-on-green);
    background: var(--bh-green-deep);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.bh-help-hero {
    position: relative;
    padding: var(--bh-space-8) var(--bh-space-8) calc(var(--bh-space-12) + var(--bh-space-4));
    color: var(--bh-on-green);
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08), transparent 45%),
        linear-gradient(135deg, var(--bh-green-deep) 0%, var(--bh-green) 100%);
    border-radius: var(--bh-help-radius-lg);
    box-shadow: var(--bh-help-shadow);
}

.bh-help-hero .bh-help-hero__title {
    max-width: 820px;
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-on-green);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--bh-weight-bold);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.bh-help-hero .bh-help-hero__lead {
    max-width: 720px;
    color: var(--bh-on-green);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* The customer information navigation, in the hero and on the Terms band. */
.bh-help-nav {
    margin: 0 0 var(--bh-space-6);
}

.bh-help-nav__label {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-on-green);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

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

.bh-help .bh-help-nav__link,
.bh-help-band .bh-help-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-4);
    color: var(--bh-on-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    white-space: nowrap;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--bh-radius-pill);
}

.bh-help .bh-help-nav__link:hover,
.bh-help-band .bh-help-nav__link:hover {
    color: var(--bh-on-green);
    text-decoration: underline;
    background: rgba(255, 255, 255, 0.2);
}

.bh-help .bh-help-nav__link[aria-current="page"],
.bh-help-band .bh-help-nav__link[aria-current="page"] {
    color: var(--bh-on-yellow);
    background: var(--bh-yellow);
    border-color: var(--bh-yellow);
}

.bh-help .bh-help-nav__link:focus-visible,
.bh-help-band .bh-help-nav__link:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* Common problems: shortcuts into "Solve your issue quickly". */
.bh-help-quick {
    margin-top: var(--bh-space-6);
}

.bh-help-quick__label {
    margin: 0 0 var(--bh-space-2) !important;
    color: var(--bh-on-green);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

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

.bh-help .bh-help-quick__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-4);
    color: var(--bh-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    text-decoration: none;
    background: var(--bh-white);
    border-radius: var(--bh-radius-pill);
}

.bh-help .bh-help-quick__link:hover {
    color: var(--bh-on-yellow);
    background: var(--bh-yellow);
}

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

/* ---------------------------------------------------------------------------
 * Find the right answer for your visit
 * ------------------------------------------------------------------------ */

.bh-help-finder {
    position: relative;
    z-index: 1;
    margin: calc(-1 * var(--bh-space-8)) var(--bh-space-4) 0 !important;
    padding: var(--bh-space-8);
    background: var(--bh-white);
    border: 1px solid var(--bh-help-edge);
    border-radius: var(--bh-help-radius-lg);
    box-shadow: var(--bh-help-shadow);
    scroll-margin-top: 120px;
}

.bh-help-finder__top {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--bh-space-8);
    align-items: start;
}

.bh-help .bh-help-finder__title {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-on-white);
    font-size: clamp(1.625rem, 3.2vw, 2.375rem);
    font-weight: var(--bh-weight-bold);
    line-height: 1.08;
}

.bh-help-finder__intro {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* The old page's "start here" note, as a way into the full list. */
.bh-help .bh-help-finder__note {
    display: inline-block;
    margin: var(--bh-space-4) 0 0;
    padding: var(--bh-space-2) var(--bh-space-4);
    background: var(--bh-green-mint);
    border-radius: var(--bh-radius-pill);
}

.bh-help .bh-help-finder__note a {
    color: var(--bh-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

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

.bh-help-choice + .bh-help-choice {
    margin-top: var(--bh-space-5) !important;
}

.bh-help .bh-help-choice__label {
    width: auto;
    margin: 0 0 var(--bh-space-2);
    padding: 0;
    color: var(--bh-green);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

.bh-help .bh-help-chip {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

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

/* The radio is the control; the pill is how it looks. */
.bh-help-chip__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.bh-help-chip__text {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: var(--bh-space-2) var(--bh-space-4);
    color: var(--bh-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    white-space: nowrap;
    background: var(--bh-white);
    border: 2px solid var(--bh-green);
    border-radius: var(--bh-radius-pill);
}

.bh-help-chip:hover .bh-help-chip__text {
    background: var(--bh-green-mint);
}

.bh-help-chip__input:checked + .bh-help-chip__text {
    color: var(--bh-on-green);
    background: var(--bh-green);
    box-shadow: 0 10px 24px rgba(18, 78, 63, 0.22);
}

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

.bh-help-finder__submit {
    margin-top: var(--bh-space-5);
}

/* With the script, a choice shows its answers at once: no button to press. */
.bh-help-finder--live .bh-help-finder__submit {
    display: none;
}

.bh-help-finder__results {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--bh-space-5);
    margin-top: var(--bh-space-8);
}

.bh-help-finder__answers {
    padding: var(--bh-space-6);
    background: var(--bh-green-mint);
    border-radius: var(--bh-help-radius);
}

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

.bh-help .bh-help-finder__count {
    margin: var(--bh-space-1) 0 var(--bh-space-4);
    color: var(--bh-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

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

.bh-help .bh-faq__answer a,
.bh-help-guide__answer a,
.bh-help-issue__answer a {
    color: var(--bh-green);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
}

.bh-help .bh-faq__marker::before,
.bh-help .bh-faq__marker::after {
    background: var(--bh-green);
}

.bh-help-finder__side {
    align-self: start;
    padding: var(--bh-space-5);
    background: var(--bh-white);
    border: 1px solid var(--bh-help-edge);
    border-radius: var(--bh-help-radius);
}

.bh-help .bh-help-finder__side-title {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-on-white);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

.bh-help .bh-help-finder__links {
    margin: 0 0 var(--bh-space-4);
    padding: 0;
    list-style: none;
}

.bh-help .bh-help-finder__links li {
    padding: var(--bh-space-2) 0;
    border-bottom: 1px solid var(--bh-help-edge);
}

.bh-help .bh-help-finder__links li[hidden] {
    display: none;
}

.bh-help .bh-help-finder__links a,
.bh-help-finder__ask a {
    color: var(--bh-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

.bh-help-finder__ask {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* ---------------------------------------------------------------------------
 * Solve your issue quickly
 * ------------------------------------------------------------------------ */

.bh-help-solve {
    display: grid;
    grid-template-areas: "intro list" "person list";
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    gap: var(--bh-space-4) var(--bh-space-8);
    margin-top: var(--bh-space-8) !important;
    padding: var(--bh-space-8);
    color: var(--bh-on-green);
    background: linear-gradient(135deg, var(--bh-green-deep) 0%, var(--bh-green) 100%);
    border-radius: var(--bh-help-radius-lg);
    box-shadow: var(--bh-help-shadow);
    scroll-margin-top: 120px;
}

.bh-help .bh-help-solve__title {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-on-green);
    font-size: clamp(1.625rem, 3.2vw, 2.375rem);
    font-weight: var(--bh-weight-bold);
    line-height: 1.08;
}

.bh-help-solve__lead,
.bh-help-solve__person {
    color: var(--bh-on-green);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-help .bh-help-solve__person {
    grid-area: person;
    align-self: start;
    margin: 0;
    font-size: var(--bh-text-xs);
}

.bh-help .bh-help-solve__person a,
.bh-help-contact a:not(.bh-help-btn) {
    color: var(--bh-yellow);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

.bh-help .bh-help-solve__person a:focus-visible,
.bh-help-contact a:not(.bh-help-btn):focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
}

/* The introduction stays in view beside the list on a wide screen. */
.bh-help-solve__intro {
    grid-area: intro;
    align-self: start;
}

@media (min-width: 992px) {
    .bh-help-solve__intro {
        position: sticky;
        top: 130px;
    }
}

.bh-help-solve__list {
    grid-area: list;
    display: grid;
    gap: var(--bh-space-3);
    align-content: start;
}

.bh-help-issue {
    overflow: hidden;
    background: var(--bh-white);
    border-radius: var(--bh-help-radius);
    scroll-margin-top: 120px;
}

.bh-help-issue__summary {
    display: flex;
    gap: var(--bh-space-4);
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: var(--bh-space-3) var(--bh-space-5);
    cursor: pointer;
    list-style: none;
}

.bh-help-issue__summary::-webkit-details-marker {
    display: none;
}

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

.bh-help-issue[open] .bh-help-issue__summary {
    background: var(--bh-yellow);
}

.bh-help .bh-help-issue__label {
    margin: 0;
    color: var(--bh-green);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    letter-spacing: 0;
}

.bh-help .bh-help-issue[open] .bh-help-issue__label {
    color: var(--bh-on-yellow);
}

/* A plus that turns into a cross. */
.bh-help-issue__marker {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: var(--bh-green-mint);
    border-radius: var(--bh-radius-full);
}

.bh-help-issue__marker::before,
.bh-help-issue__marker::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    content: "";
    background: var(--bh-green);
    transform: translate(-50%, -50%);
}

.bh-help-issue__marker::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.bh-help-issue[open] .bh-help-issue__marker {
    background: var(--bh-white);
}

.bh-help-issue[open] .bh-help-issue__marker::before,
.bh-help-issue[open] .bh-help-issue__marker::after {
    background: var(--bh-navy);
}

.bh-help-issue[open] .bh-help-issue__marker::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

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

.bh-help-issue__answer + .bh-help-issue__answer {
    margin-top: var(--bh-space-5);
    padding-top: var(--bh-space-5);
    border-top: 1px solid var(--bh-help-edge);
}

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

.bh-help .bh-help-issue__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: var(--bh-space-5) 0 0;
}

/* ---------------------------------------------------------------------------
 * Before you visit: the practical cards
 * ------------------------------------------------------------------------ */

.bh-help-guides {
    margin-top: var(--bh-space-12) !important;
}

.bh-help-guides__head {
    max-width: 760px;
    margin-bottom: var(--bh-space-5);
}

.bh-help .bh-help-guides__title,
.bh-help .bh-faq-library__heading {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-on-white);
    font-size: clamp(1.625rem, 3.2vw, 2.375rem);
    font-weight: var(--bh-weight-bold);
    line-height: 1.08;
}

.bh-help-guides__lead,
.bh-help .bh-faq-library__lead {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

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

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

.bh-help-guide {
    display: flex;
    flex-direction: column;
    padding: var(--bh-space-6);
    background: var(--bh-white);
    border: 1px solid var(--bh-help-edge);
    border-top: 6px solid var(--bh-green);
    border-radius: var(--bh-help-radius);
    box-shadow: var(--bh-help-shadow);
}

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

.bh-help-guide__answer {
    flex: 1 1 auto;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-help .bh-help-guide__more {
    margin: var(--bh-space-4) 0 0;
}

.bh-help .bh-help-guide__more a {
    color: var(--bh-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * The full library, inside the hub
 * ------------------------------------------------------------------------ */

.bh-help-library {
    margin-top: var(--bh-space-12) !important;
    scroll-margin-top: 120px;
}

/* ---------------------------------------------------------------------------
 * Still have a question?
 * ------------------------------------------------------------------------ */

.bh-help-contact {
    margin-top: var(--bh-space-12) !important;
    padding: var(--bh-space-8);
    color: var(--bh-on-green);
    background: linear-gradient(135deg, var(--bh-green-deep) 0%, var(--bh-green) 100%);
    border-radius: var(--bh-help-radius-lg);
}

.bh-help .bh-help-contact__title {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-on-green);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
}

.bh-help-contact__lead {
    color: var(--bh-on-green);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

/* The Bookings team's hours (inc/visitor-info.php; comment 11931965, point 1). White on the
   green gradient, 9.60:1 at its lightest. */
.bh-help .bh-help-contact__hours {
    max-width: 46rem;
    margin: var(--bh-space-3) 0 0;
    color: var(--bh-on-green);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-help .bh-help-contact__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3) var(--bh-space-8);
    margin: var(--bh-space-5) 0;
    padding: 0;
    list-style: none;
}

.bh-help-contact__label {
    display: block;
    color: var(--bh-on-green);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * The Terms pages: the same customer information navigation, as a band.
 * ------------------------------------------------------------------------ */

.bh-help-band {
    margin: 0 0 var(--bh-space-8);
    padding: var(--bh-space-4) var(--bh-space-5);
    background: linear-gradient(135deg, var(--bh-green-deep) 0%, var(--bh-green) 100%);
    border-radius: var(--bh-help-radius);
}

.bh-help-band .bh-help-nav {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * Tablet and phone
 * ------------------------------------------------------------------------ */

@media (max-width: 991px) {
    .bh-help-finder__top,
    .bh-help-finder__results,
    .bh-help-solve {
        grid-template-columns: minmax(0, 1fr);
    }

    /* On a narrower screen the problems come straight after the heading. */
    .bh-help-solve {
        grid-template-areas: "intro" "list" "person";
        grid-template-rows: auto;
    }

    .bh-help-finder__top {
        gap: var(--bh-space-5);
    }

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

@media (max-width: 767px) {
    .bh-help {
        --bh-help-radius-lg: 20px;
    }

    .bh-help-hero {
        padding: var(--bh-space-5) var(--bh-space-5) calc(var(--bh-space-8) + var(--bh-space-4));
    }

    .bh-help-hero .bh-help-hero__lead {
        font-size: var(--bh-text-sm);
    }

    .bh-help-nav {
        margin-bottom: var(--bh-space-4);
    }

    /* Rows that scroll sideways rather than stacking, so the help starts higher up the screen. */
    .bh-help .bh-help-nav__list,
    .bh-help-band .bh-help-nav__list,
    .bh-help-choice__row {
        flex-wrap: nowrap;
        margin-right: calc(-1 * var(--bh-space-5));
        padding-right: var(--bh-space-5);
        padding-bottom: var(--bh-space-1);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* A cut-off pill at the edge shows there is more; a scrollbar under the first one read as an underline. */
    .bh-help .bh-help-nav__list::-webkit-scrollbar,
    .bh-help-band .bh-help-nav__list::-webkit-scrollbar,
    .bh-help-choice__row::-webkit-scrollbar {
        display: none;
    }

    /* The hero is the way in, not the help: no second label above the heading. */
    .bh-help-hero .bh-help-kicker {
        display: none;
    }

    .bh-help-quick {
        margin-top: var(--bh-space-4);
    }

    .bh-help-finder {
        margin: calc(-1 * var(--bh-space-6)) 0 0 !important;
        padding: var(--bh-space-5);
    }

    .bh-help-finder__results {
        margin-top: var(--bh-space-5);
    }

    .bh-help-finder__answers {
        margin: 0 calc(-1 * var(--bh-space-2));
        padding: var(--bh-space-4) var(--bh-space-3);
    }

    .bh-help .bh-faq__question {
        padding: var(--bh-space-3) var(--bh-space-4);
    }

    .bh-help .bh-faq__answer {
        padding: 0 var(--bh-space-4) var(--bh-space-4);
    }

    .bh-help-solve {
        gap: var(--bh-space-5);
        padding: var(--bh-space-5);
    }

    .bh-help-issue__summary {
        padding: var(--bh-space-3) var(--bh-space-4);
    }

    .bh-help-issue__body {
        padding: var(--bh-space-4);
    }

    .bh-help-guides {
        margin-top: var(--bh-space-8) !important;
    }

    /* The cards in one row that scrolls sideways: one card's height, not six. */
    .bh-help-guides__grid {
        display: flex;
        align-items: flex-start;   /* each card its own height, not the tallest one's */
        gap: var(--bh-space-3);
        margin-right: calc(-1 * var(--bh-space-4));
        padding: var(--bh-space-1) var(--bh-space-4) var(--bh-space-3) var(--bh-space-1);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .bh-help-guide {
        flex: 0 0 84%;
        padding: var(--bh-space-5);
        scroll-snap-align: start;
        box-shadow: none;
    }

    .bh-help-library,
    .bh-help-contact {
        margin-top: var(--bh-space-8) !important;
    }

    .bh-help-contact {
        padding: var(--bh-space-5);
    }

    .bh-help-band {
        padding: var(--bh-space-3) var(--bh-space-4);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bh-help-issue__marker::after,
    .bh-help-chip__text {
        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }
}