/*
   Repository-wide responsive safeguards.
   This file is deliberately limited to sizing behavior so each site keeps its
   own typography, palette, spacing, and component design.
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

pre,
code,
input,
textarea,
.mobile-menu-contact a {
    overflow-wrap: anywhere;
}

/* Prevent long content from widening common flex and grid layouts. */
.grid > *,
.cards > *,
.footer-grid > *,
.content-grid > *,
.hero-grid > *,
.split > *,
.desktop-navigation > *,
.mobile-navigation > * {
    min-width: 0;
}

/* Keep the primary header action recognisable as a button on every page. */
.desktop-navigation a[data-page="booking"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-inline-start: 4px;
    padding: 10px 16px;
    border: 1px solid var(--nav-gold-light, #f0c45a);
    border-radius: 999px;
    background: var(--nav-gold-light, #f0c45a);
    color: #101010;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(212, 166, 55, 0.24);
}

.desktop-navigation a[data-page="booking"]::after {
    display: none;
}

.desktop-navigation a[data-page="booking"]:hover,
.desktop-navigation a[data-page="booking"]:focus-visible {
    border-color: #fff1a6;
    background: #fff1a6;
    color: #101010;
    transform: translateY(-1px);
}


/* Stack the mobile calls to action and keep their labels readable. */
.mobile-menu-cta:not(a) {
    display: grid;
    gap: 12px;
}

.mobile-menu-cta a {
    width: 100%;
    min-width: 0;
    padding-inline: 18px;
    text-align: center;
    white-space: nowrap;
}

.mobile-menu-cta .mobile-menu-booking {
    border: 1px solid var(--nav-gold-light, #f0c45a);
    background: transparent;
    color: var(--nav-gold-light, #f0c45a);
}

@media (max-width: 650px) {
    .desktop-navigation a[data-page="booking"] {
        margin-inline-start: 0;
    }
}