/**
 * Header — five primary links plus a separated "Book a stay" action.
 * Loaded after hero.css so it can override the transparent-hero link colours.
 */

.desktop-nav--cluster {
    gap: clamp(1.5rem, 2.4vw, 2.5rem);
}

.desktop-nav a.nav-book {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-left: clamp(0.5rem, 1.2vw, 1.25rem);
    padding: 0 1.35rem;
    border: 1px solid var(--sv-color-ink);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-color-ink);
    color: var(--sv-color-surface);
    letter-spacing: var(--sv-tracking-caps);
    transition:
        background-color var(--sv-duration-fast) var(--sv-ease-luxury),
        border-color var(--sv-duration-fast) var(--sv-ease-luxury),
        color var(--sv-duration-fast) var(--sv-ease-luxury);
}

.desktop-nav a.nav-book::after {
    content: none;
}

.desktop-nav a.nav-book:hover {
    background: var(--sv-accent-hover);
    border-color: var(--sv-accent-hover);
    color: var(--sv-color-surface);
}

.desktop-nav a.nav-book:focus-visible {
    outline: 2px solid var(--sv-color-bronze);
    outline-offset: 3px;
}

/* Over the hero image the header is transparent: use a light outline button. */
body:has(.sv-hero) .main-header:not(.sticky) .desktop-nav a.nav-book {
    background: transparent;
    border-color: rgba(255, 252, 248, 0.55);
    color: var(--sv-color-surface);
}

body:has(.sv-hero) .main-header:not(.sticky) .desktop-nav a.nav-book:hover {
    background: var(--sv-color-surface);
    border-color: var(--sv-color-surface);
    color: var(--sv-color-ink);
}