/*
 * The navigation, Option C (inc/nav-preview.php; Teamwork 11932755 and 11932856).
 *
 * Loaded on every page since 10 November 2026, when it stopped being a preview. Tokens only (tokens.css):
 * navy text on yellow, blue and pink, never white on blue or pink, and yellow is a fill, not text on
 * white. There is deliberately no focus rule in this file: the one keyboard ring is drawn by
 * refinements.css section 6 over every control, and FocusRingTest forbids a second.
 */

/* ---------------------------------------------------------------------------------------------
 * 1. The Book Now button: one expandable button, or a split button.
 *    It reuses .btn-booking, so the colours, the hover and the compact header are the live button's.
 * ------------------------------------------------------------------------------------------- */
.navc-book {
    display: inline-flex;
    align-items: stretch;
}

.theme-25 .c-navbar .navc-book .btn-booking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.navc-book__chevron {
    flex: none;
    transition: transform 0.2s ease;
}

.navc-book [aria-expanded="true"] .navc-book__chevron,
.navc-book [aria-expanded="true"].navc-book__arrow .navc-book__chevron {
    transform: rotate(180deg);
}

/* Split: the main part is the live button; the arrow is its own, narrower part with a seam between. */
.theme-25 .c-navbar .navc-book--split .navc-book__main {
    border-radius: var(--bh-radius-sm) 0 0 var(--bh-radius-sm);
}

.theme-25 .c-navbar .navc-book--split .navc-book__arrow {
    margin-left: 2px;
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 0 var(--bh-radius-sm) var(--bh-radius-sm) 0;
}

.theme-25 .c-navbar .navc-book--split .navc-book__arrow[hidden] {
    display: none;
}

/* The bar on a phone has its own copy of the control; the desktop one is inside the folded menu. */
.navc-book--bar {
    display: none;
}

@media (max-width: 1198.98px) {
    .c-navbar .navc-book--bar {
        display: inline-flex;
        margin-left: auto;
        margin-right: 8px;
    }

    /* The cart already takes the auto margin when it is there; the Book control follows it. */
    .c-navbar .c-cart--bar + .navc-book--bar {
        margin-left: 0;
    }

    .theme-25 .c-navbar .navc-book--bar .btn-booking {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    .theme-25 .c-navbar .navc-book--bar.navc-book--split .navc-book__arrow {
        padding-right: 11px;
        padding-left: 11px;
    }
}

/* A narrow phone: the bar holds the logo, the cart, Book with its arrow and the menu button. With the
   cart's total shown as well the menu button wrapped onto a second line under the logo at 375 pixels
   (found 9 November 2026 walking Quick Book on a phone; an iPhone at 390 fitted only while the total
   was short). The total is hidden from sight there and kept for a screen reader, as the word is; the
   count stays, and the cart page shows the total. */
@media (max-width: 419.98px) {
    .c-navbar .c-cart--bar .c-cart__amount {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ---------------------------------------------------------------------------------------------
 * 2. The panel. A card under the header on a computer, a sheet from the foot of the screen on a phone.
 *    Two groups, said quietly: the experiences you can book (each with an action button), then the
 *    routes that help you choose (plain links). Hover is a yellow fill on the row and its button, the
 *    same on every row; the keyboard's ring is the central one (refinements.css section 6).
 * ------------------------------------------------------------------------------------------- */
.navc-panel {
    position: fixed;
    top: calc(var(--bh-header-height, 100px) - 6px);
    right: 24px;
    z-index: 1036;
    box-sizing: border-box;
    width: min(26rem, calc(100vw - 32px));
    max-height: calc(100vh - var(--bh-header-height, 100px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--bh-space-4) var(--bh-space-4);
    background: var(--bh-white);
    color: var(--bh-navy);
    border-radius: var(--bh-radius-md);
    box-shadow: var(--bh-shadow-md);
    font-family: var(--bh-font);
}

.navc-panel[hidden],
.navc-scrim[hidden] {
    display: none;
}

/* The title and the close control stay in view while the rows scroll under them. */
.navc-panel__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bh-space-3);
    padding: var(--bh-space-3) 0 var(--bh-space-2);
    background: var(--bh-white);
}

.navc-panel__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Close: for the phone sheet, where the page behind is dimmed and there is no Escape key. */
.navc-close {
    display: none;
    align-items: center;
    gap: var(--bh-space-2);
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--bh-space-3);
    background: var(--bh-white);
    color: var(--bh-navy);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.navc-close:hover {
    background: var(--bh-yellow);
}

.navc-panel__notice {
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-3);
    background: var(--bh-surface-2);
    font-size: 0.875rem;
    font-weight: 500;
}

/* A quiet sub-heading for each group: small capitals, muted, with room above. */
.navc-group {
    margin: var(--bh-space-2) 0 var(--bh-space-1);
    padding: 0 var(--bh-space-3);
    color: var(--bh-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navc-group--quiet {
    margin-top: var(--bh-space-4);
    padding-top: var(--bh-space-3);
    border-top: 1px solid var(--bh-line);
}

.navc-list,
.navc-routes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navc-row {
    margin: 0;
}

.navc-row__link,
.navc-row--centres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bh-space-2) var(--bh-space-3);
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px var(--bh-space-3);
    color: var(--bh-navy);
    text-decoration: none;
    border-radius: var(--bh-radius-sm);
}

.navc-row__link:hover {
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    text-decoration: none;
}

.navc-row__text {
    display: flex;
    flex: 1 1 8rem;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.navc-row__name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.navc-row__note {
    color: var(--bh-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* The action: a button-shaped label, the same shape as the centre buttons, so every row reads as a doing word. */
.navc-action,
.navc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bh-space-2);
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px var(--bh-space-4);
    background: var(--bh-white);
    color: var(--bh-navy);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.navc-action__icon {
    flex: none;
}

.navc-row__link:hover .navc-action,
.navc-chip:hover {
    background: var(--bh-yellow);
    color: var(--bh-navy);
    text-decoration: none;
}

/* A row with a choice of centre: the centre names are the buttons, under the name. */
.navc-chips {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
}

.navc-chip {
    flex: 1 1 auto;
    min-width: 44%;
}

/* A launch or a seasonal promotion: highlighted text, navy block with yellow text, square corners. */
.navc-tag {
    display: inline-block;
    margin-left: var(--bh-space-2);
    padding: 1px 6px;
    background: var(--bh-navy);
    color: var(--bh-yellow);
    border-radius: var(--bh-radius-none);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* The routes that help you choose: plain links, lighter than the rows, underlined so they read as links. */
.navc-route {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--bh-space-3);
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px var(--bh-space-3);
    color: var(--bh-blue-text);
    border-radius: var(--bh-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
}

.navc-route__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.navc-route__note {
    color: var(--bh-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.navc-route:hover {
    background: var(--bh-surface-2);
    color: var(--bh-navy);
}

.navc-scrim {
    position: fixed;
    inset: 0;
    z-index: 1034;
    background: rgba(33, 39, 47, 0.6);
}

/*
 * The sheet on a phone. It rises from the foot of the screen to at most 85% of the visible height (dvh,
 * so the browser's own bars are not counted), scrolls inside itself while the page behind stays put,
 * keeps its title and close control in view, and has compact rows so six or seven experiences and the
 * routes fit within about a screen and a half instead of three.
 */
@media (max-width: 1198.98px) {
    .navc-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 85vh;
        max-height: 85dvh;
        padding-right: var(--bh-space-3);
        padding-bottom: calc(var(--bh-space-3) + env(safe-area-inset-bottom, 0px));
        padding-left: var(--bh-space-3);
        border-radius: var(--bh-radius-md) var(--bh-radius-md) 0 0;
    }

    .navc-close {
        display: inline-flex;
    }

    /* The page behind does not scroll while the sheet is open: the sheet does. */
    body.navc-open {
        overflow: hidden;
    }

    .navc-group {
        padding-right: var(--bh-space-2);
        padding-left: var(--bh-space-2);
    }

    .navc-row__link,
    .navc-row--centres {
        min-height: 52px;
        padding: 6px var(--bh-space-2);
    }

    /* A thumb-sized button, but a shade tighter, and the note beside the name rather than a line of its own. */
    .navc-action,
    .navc-chip {
        gap: 6px;
        padding: 6px 10px;
        letter-spacing: 0.02em;
    }

    .navc-row__note {
        font-size: 0.75rem;
    }

    /* The name may give way before the button drops to a line of its own (Padel's longer label). */
    .navc-row__text {
        flex-basis: 5rem;
    }

    .navc-route {
        padding: 8px var(--bh-space-2);
    }

    /* The routes' notes repeat their names; on a phone the names are enough. */
    .navc-route__note {
        display: none;
    }

    .navc-group--quiet {
        margin-top: var(--bh-space-2);
    }
}

@media (min-width: 1199px) {
    .navc-scrim {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navc-book__chevron {
        transition: none;
    }
}

/* Short windows (a phone on its side): rows tighter again, so the sheet is not all padding. */
@media (max-height: 480px) {
    .navc-row__link,
    .navc-row--centres {
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------------------------------------
 * 3. Experiences with four columns. Padel and Wellness share the first, as two blocks that stay
 *    distinct: each has its own tint, rule and heading colour.
 * ------------------------------------------------------------------------------------------- */
.dropdown-menu--navc {
    width: min(64rem, calc(100vw - 32px));
}

.c-navbar .dropdown-menu--navc .col .content.navc-block {
    height: auto;
}

/* Two blocks in one column: compact, so both sit inside the panel (the live rule gives 100% height). */
.c-navbar .dropdown-menu--navc .col .content.navc-block--padel,
.c-navbar .dropdown-menu--navc .col .content.navc-block--wellness {
    margin: var(--bh-space-4) var(--bh-space-2) 0;
    padding: var(--bh-space-3) var(--bh-space-3) var(--bh-space-2);
    border-radius: var(--bh-radius-sm);
    border-left: 4px solid var(--bh-navy);
}

.c-navbar .dropdown-menu--navc .col .content.navc-block--wellness {
    margin-top: var(--bh-space-3);
}

.dropdown-menu--navc .navc-block--padel {
    background: #F3F1EC;
}

.dropdown-menu--navc .navc-block--wellness {
    background: #EEF7FA;
    border-left-color: var(--bh-blue);
}