/*
 * Primary navigation and the two header actions.
 *
 * Menu and Book share one geometry — the same pill, padding, type size and
 * height — so the header reads as a single control cluster. They differ only
 * in fill: Menu is the ghost, Book is the solid primary. Book is never folded
 * into the collapsed menu, so the booking path stays one tap away at every
 * width.
 *
 * The mobile toggle only takes effect once navigation.js marks the nav
 * enhanced, so the menu stays reachable without JavaScript.
 */

/* ---------- Shared action geometry -------------------------------------- */

.header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-family: var(--gbm-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* ---------- Front page: over the darkened hero -------------------------- */

.site-header--overlay .header-action--ghost {
    border-color: rgba(255, 255, 255, .7);
    color: #ffffff;
}
.site-header--overlay .header-action--ghost:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .16);
}

/* Solid white on the hero is the strongest contrast available, so the
   booking action reads as the one thing to press. */
.site-header--overlay .header-action--cta {
    background: #ffffff;
    color: var(--gbm-teal-deep);
    font-weight: 700;
}
.site-header--overlay .header-action--cta:hover {
    background: var(--gbm-teal-deep);
    color: #ffffff;
}

/* ---------- Inner routes: on paper -------------------------------------- */

.site-header--stacked .header-action--ghost {
    border-color: rgba(64, 114, 131, .45);
    color: var(--gbm-teal);
}
.site-header--stacked .header-action--ghost:hover {
    border-color: var(--gbm-teal);
    background: rgba(64, 114, 131, .08);
}

.site-header--stacked .header-action--cta {
    background: var(--gbm-teal-deep);
    color: #ffffff;
    font-weight: 700;
}
.site-header--stacked .header-action--cta:hover {
    background: var(--gbm-teal);
}

.header-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ---------- Links ------------------------------------------------------- */

.primary-navigation__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-navigation a {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    text-decoration: none;
}

.site-header--overlay .primary-navigation a {
    color: #ffffff;
    font-weight: 300;
}
.site-header--stacked .primary-navigation a {
    color: var(--gbm-teal);
    font-weight: 400;
}

/* A rule that grows from the centre reads as intentional where an underline
   on thin type reads as an accident. */
.primary-navigation a {
    position: relative;
}
.primary-navigation a::after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 4px;
    left: 16px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .18s ease;
}
.primary-navigation a:hover::after,
.primary-navigation a:focus-visible::after,
.primary-navigation .current-menu-item > a::after {
    transform: scaleX(1);
}

.primary-navigation a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* ---------- Toggle ------------------------------------------------------ */

.primary-navigation__toggle { display: none; }
.primary-navigation__toggle[hidden] { display: none; }

/* Two bars that become an X — enough to read as a menu control without
   shipping an icon font or an SVG sprite for one glyph. */
.primary-navigation__toggle-icon,
.primary-navigation__toggle-icon::before,
.primary-navigation__toggle-icon::after {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
}
.primary-navigation__toggle-icon { position: relative; }
.primary-navigation__toggle-icon::before,
.primary-navigation__toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
}
.primary-navigation__toggle-icon::before { top: -5px; }
.primary-navigation__toggle-icon::after  { top: 5px; }

.is-open .primary-navigation__toggle-icon { background: transparent; }
.is-open .primary-navigation__toggle-icon::before { transform: translateY(5px) rotate(45deg); }
.is-open .primary-navigation__toggle-icon::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Collapsed state --------------------------------------------- */

@media (max-width: 900px) {
    .primary-navigation.is-enhanced .primary-navigation__toggle {
        display: inline-flex;
    }

    /* The panel leaves the action row and spans the header, so links are
       readable against their own surface rather than the hero photograph. */
    .primary-navigation.is-enhanced .primary-navigation__menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
        border-radius: 14px;
        background: var(--gbm-paper);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    }
    .primary-navigation.is-enhanced.is-open .primary-navigation__menu {
        display: flex;
    }

    .primary-navigation.is-enhanced .primary-navigation__menu a {
        padding: 14px 16px;
        border-radius: 10px;
        color: var(--gbm-teal);
        font-size: 16px;
        font-weight: 400;
    }
    .primary-navigation.is-enhanced .primary-navigation__menu a:hover {
        background: rgba(64, 114, 131, .08);
    }
    /* The centre-out rule is a desktop affordance; in the panel the row
       highlight already carries the state. */
    .primary-navigation.is-enhanced .primary-navigation__menu a::after {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-action,
    .primary-navigation a::after,
    .primary-navigation__toggle-icon,
    .primary-navigation__toggle-icon::before,
    .primary-navigation__toggle-icon::after {
        transition: none;
    }
}

/* Narrow phones: the brand and both actions must share ~335px, so trim the
   action padding and drop the toggle's word rather than let anything wrap. */
@media (max-width: 599px) {
    .site-logo { width: 112px; }

    .header-action {
        gap: 7px;
        padding: 9px 15px;
        font-size: 13px;
    }
}

/* Only the narrowest handsets lose the word; at 375px it still fits, and the
   aria-label keeps the control named either way. */
@media (max-width: 359px) {
    .primary-navigation__toggle {
        padding-inline: 13px;
        font-size: 0;
        letter-spacing: 0;
    }
    .primary-navigation__toggle-icon { width: 15px; }
}