/*
 * Global primitives: fonts, tokens, reset, header, hero, booking band, footer.
 * Values captured from the approved production presentation (see
 * migration/config/design-tokens.json). Route-specific rules live in their own
 * stylesheet and are enqueued only where the route ledger requires them.
 */

/* ---------- Self-hosted fonts ------------------------------------------- */
/* Latin subsets load first; latin-ext is fetched only when the page needs it. */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('../fonts/lato-100-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('../fonts/lato-100-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/lato-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/lato-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Baskervville';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/baskervville-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Baskervville';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/baskervville-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------ */

:root {
    --gbm-paper: #ffffff;
    --gbm-cream: #fffaf5;
    --gbm-ink: #333333;
    --gbm-body: #595959;
    --gbm-plum: #5a5066;
    --gbm-teal: #407283;
    --gbm-teal-deep: #3a6574;
    --gbm-sage: #bfd1b5;
    --gbm-shell: #f2e9e9;
    --gbm-sand: #e3e0d4;

    --gbm-font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --gbm-font-display: 'Baskervville', 'Baskerville', Georgia, serif;

    --gbm-content: 1140px;
    --gbm-narrow: 800px;
    --gbm-gutter: 20px;
}

/* ---------- Reset ------------------------------------------------------- */

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

body {
    margin: 0;
    background: var(--gbm-paper);
    color: var(--gbm-ink);
    font-family: var(--gbm-font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--gbm-font-display);
    font-weight: 400;
    line-height: 1;
}

a { color: var(--gbm-teal); }

:focus-visible { outline: 3px solid var(--gbm-teal); outline-offset: 3px; }

.skip-link {
    position: fixed;
    inset: 8px auto auto 8px;
    z-index: 1000;
    padding: 12px;
    background: var(--gbm-paper);
    color: var(--gbm-ink);
    transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* Core normally ships this with the block styles we dequeue. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    word-wrap: normal !important;
}

.shell {
    width: min(100% - (var(--gbm-gutter) * 2), var(--gbm-content));
    margin-inline: auto;
}

/* ---------- Header ------------------------------------------------------ */
/* One row on every route: brand left, links and actions right. The front page
   overlays it on the hero in white; every other route sits it on paper in teal
   under a hairline rule. `.site-header--overlay` is the only switch between
   them, and the two header actions carry their geometry in navigation.css. */

.site-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.site-brand { display: inline-flex; }
.site-logo { width: 150px; height: auto; }

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

.site-header--overlay {
    position: absolute;
    inset: 0 0 auto 50%;
    width: min(100% - 80px, 1400px);
    padding-block: 14px;
    transform: translateX(-50%);
}

/* -- Inner routes: on paper, under a hairline rule -- */

.site-header--stacked {
    width: min(100% - 80px, 1400px);
    margin-inline: auto;
    padding-block: 14px;
    border-bottom: 1px solid #ececec;
}

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

.hero { position: relative; height: 600px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__image { width: 100%; height: 100%; object-fit: cover; }

/* Source darkens the top of the hero so the white overlay nav stays legible. */
/* Scrim behind the overlay header. Measured against this hero photograph, the
   source gradient left the white nav links at 4.46:1 — under the 4.5:1 WCAG AA
   floor for text this size. The stops are in pixels, not percentages, so the
   dark band tracks the height of the header rather than the height of the
   hero, and stays correct when the hero shortens on small screens. Alphas are
   stated directly instead of via `opacity` so the value at the nav band can be
   reasoned about. */
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, .58) 0px,
        rgba(0, 0, 0, .42) 90px,
        rgba(0, 0, 0, .12) 220px,
        rgba(0, 0, 0, .01) 100%
    );
}

/* ---------- Booking band ------------------------------------------------ */

.booking-band {
    padding: 60px var(--gbm-gutter) 50px;
    background: var(--gbm-teal-deep);
    text-align: center;
}
.booking-band__inner { width: min(100%, var(--gbm-content)); margin-inline: auto; }

.booking-band h2 {
    margin-bottom: 30px;
    color: var(--gbm-shell);
    font-size: 43.2px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, .09);
}

.booking-locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.booking-locations h3 {
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 27.2px;
    font-weight: 700;
    line-height: 1;
}

.button--book {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 3px;
    background: var(--gbm-sage);
    color: var(--gbm-plum);
    /* Source sets these buttons in Roboto 500; not worth self-hosting a face
       for two buttons, so match where the system has it and fall back. */
    font-family: 'Roboto', var(--gbm-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}
.button--book:hover { filter: brightness(.95); }

/* ---------- Footer ------------------------------------------------------ */

.site-footer { background: var(--gbm-cream); }

/* Hours: a sand panel beside a fixed image column (990 / 450 in the source). */

.hours {
    display: grid;
    /* Source keeps the image column at a fixed 450px; the panel takes the rest. */
    grid-template-columns: minmax(0, 1fr) 450px;
    min-height: 360px;
}
.hours__panel {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 20px;
    background: var(--gbm-sand);
    text-align: center;
}
.hours__panel > * { width: min(100%, 66%); }
.hours h2 {
    margin-bottom: 16px;
    color: var(--gbm-plum);
    font-size: 28px;
    font-weight: 700;
    line-height: 42px;
}
.hours p {
    margin: 0;
    color: var(--gbm-plum);
    font-size: 18px;
    line-height: 30px;
}
/* The image is a real <img> so it can carry alt text and reach image search;
   object-fit reproduces what `background-size: cover` used to do. */
.hours__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--gbm-sand);
}

/* Main footer: brand + tagline beside Explore / Visit / Contact columns,
   all on the site's own tokens, closed by a dotted rule that echoes the
   one under the header logo. */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr 1.3fr 1.1fr;
    gap: 40px;
    width: min(100% - 40px, var(--gbm-content));
    margin-inline: auto;
    padding-block: 50px 40px;
}

.footer-logo { width: 155px; }
.site-footer__tagline {
    max-width: 30ch;
    margin: 16px 0 0;
    color: var(--gbm-body);
    font-size: 15px;
    line-height: 24px;
}

.site-footer__col h2 {
    margin: 0 0 14px;
    color: var(--gbm-plum);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.site-footer__col p { margin: 0 0 14px; color: var(--gbm-ink); font-size: 15px; line-height: 24px; }
.site-footer__col p:last-child { margin-bottom: 0; }
.site-footer__col .footer-label { color: var(--gbm-plum); font-weight: 400; }

.site-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.site-footer__nav li { margin-bottom: 10px; }
.site-footer__nav a,
.site-footer__col a {
    color: var(--gbm-teal);
    font-size: 15px;
    line-height: 24px;
    text-decoration: none;
    transition: color .18s ease;
}
.site-footer__nav a:hover,
.site-footer__col a:hover { color: var(--gbm-teal-deep); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .site-footer__nav a, .site-footer__col a { transition: none; }
}

.site-footer__bottom {
    width: min(100% - 40px, var(--gbm-content));
    margin-inline: auto;
    border-top: 1px dotted #c6c5c5;
    padding-block: 18px 26px;
    text-align: center;
}
.copyright { margin: 0; color: rgba(0, 0, 0, .55); font-size: 13px; line-height: 20px; }
.copyright a { color: inherit; text-decoration: none; }
.copyright a:hover { color: var(--gbm-teal); }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 900px) {
    .site-header { width: min(100% - 40px, 1400px); gap: 12px; }
    .site-header--stacked { width: min(100% - 40px, 1400px); }
    .site-logo { width: 132px; }
    .booking-locations, .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__grid { gap: 30px; text-align: center; }
    .footer-logo, .site-footer__tagline { margin-inline: auto; }
    .hero { height: 420px; }
    .hours { grid-template-columns: 1fr; }
    .hours__panel > * { width: 100%; }
    .hours__image { min-height: 220px; }
}