/* =============================================================
   TREEBONES HEADER CSS
   All states: is-hero (over slideshow) | is-scrolled (sticky)
   Breakpoints: ≥1024px desktop | <1024px tablet/mobile
   ============================================================= */

/* ── Fixed shell ── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-dropdown);
    overflow: visible;
    transition:
        background var(--t-slow) ease,
        height var(--t-base) ease,
        backdrop-filter var(--t-slow) ease;
    will-change: background, height;
}

/* ── Hero state: gradient, full two-row height ── */
/* Deep Anchor — v1.2.2: stronger top hold, fast mid-fade, fully transparent base */
.site-header.is-hero {
    background: linear-gradient(180deg,
        rgba(10,14,12,.82)  0%,
        rgba(10,14,12,.60) 35%,
        rgba(10,14,12,.18) 70%,
        rgba(10,14,12,0)  100%);
    height: var(--hdr-full);
}

/* ── Scrolled state: solid dark, compressed ── */
.site-header.is-scrolled {
    background: rgba(50,48,46,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: var(--hdr-sticky);
}
/* v2.0.1: gold shimmer band on the scrolled header.
   2px horizontal gradient in the brand's warm gold palette —
   dryglass at the edges, latesun in the middle with a subtle
   lightened highlight. Replaces the previous brown border-bottom
   hairline (which was doing the same separator job in a duller way). */
.site-header.is-scrolled::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--tb-dryglass) 0%,
        var(--tb-latesun) 30%,
        #E0CEA0 50%,
        var(--tb-latesun) 70%,
        var(--tb-dryglass) 100%);
    pointer-events: none;
    z-index: var(--z-overlay);
}

/* ─────────────────────────────────────────────
   TOP ROW (desktop only)
───────────────────────────────────────────── */
.hdr-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
    height: var(--hdr-top);
    transition: height var(--t-base), opacity var(--t-base);
}
.is-scrolled .hdr-top-row {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
}

/* ── Logo ── */
.logo-area {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    gap: 0;
}
/* v2.0.9: Logo sizes consolidated. The original base values (52/34/30)
   were overridden by a v1.0.1 WCAG block further down the file with
   !important (60/40/34). Now the base has the correct final values and
   the override block is deleted. Scrolled + tablet variants added here. */
.logo-icon {
    mix-blend-mode: screen;
    object-fit: contain;
    flex-shrink: 0;
    width: 60px; height: 60px;
    margin-top: -4px;
    margin-bottom: -4px;
    transition: width var(--t-base), height var(--t-base);
}
.logo-sep {
    width: 0.5px; height: 34px;
    background: rgba(245,238,216,.14);
    margin: 0 18px;
    flex-shrink: 0;
}
.logo-wordmark {
    height: 40px; width: auto;
    mix-blend-mode: screen;
    object-fit: contain;
    flex-shrink: 0;
}
/* Scrolled state — compact */
.is-scrolled .logo-icon     { width: 38px; height: 38px; margin-top: 0; margin-bottom: 0; }
.is-scrolled .logo-wordmark { height: 26px; }
.is-scrolled .logo-sep      { height: 22px; }

/* ── Top-row right cluster ── */
.hdr-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* v4.3.1 — .hdr-utility-pill base. The wrapper was added in v4.0.26
   to support the Seaglass pill (phone + reserve grouped, CTA as a
   sibling). home-seaglass.css overrides this to display:flex with
   frosted styling when Seaglass is active. Outside Seaglass — i.e.
   on the v4.3.0+ reverted homepage and all interior pages — the
   wrapper must be layout-invisible so phone/pipe/reserve flex-align
   horizontally as direct children of .hdr-right. Without this rule,
   the wrapper's default display:block stacked them vertically. */
.hdr-utility-pill {
    display: contents;
}
.hdr-phone {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .15em;
    color: rgba(245,238,216,.88);
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(10,12,8,.7);
    white-space: nowrap;
    text-decoration: none;
}
.hdr-phone:hover { color: rgba(245,238,216,.95); }

.hdr-pipe {
    width: 0.5px; height: 20px;
    background: rgba(245,238,216,.18);
    margin: 0 20px;
    flex-shrink: 0;
}
.hdr-reserve {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    background: none;
    border: none;
    border-bottom:var(--b-hair) solid rgba(196,168,122,.38);
    padding-bottom: 1px;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
    margin-right: 20px;
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(10,12,8,.8);
}
.hdr-reserve:hover {
    color: var(--tb-goldenhour);
    border-bottom-color: rgba(216,168,85,.6);
}
.hdr-avail-btn {
    /* Uses .btn-outline from style.css */
    padding: 10px 22px;
    font-size: 9px;
}

/* ─────────────────────────────────────────────
   NAV ROW
───────────────────────────────────────────── */
.hdr-nav-row {
    display: flex;
    align-items: center;
    padding: 0 52px;
    height: var(--hdr-nav);
    border-top:var(--b-hair) solid rgba(245,238,216,.07);
    transition: height var(--t-base), border-color var(--t-base);
}
.is-scrolled .hdr-nav-row {
    height: var(--hdr-sticky);
    border-top: none;
}

/* ── Centered nav links ── */
.nav-center {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}
.nav-item { position: relative; }

.nav-link {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(245,238,216,.92);
    padding: 0 13px;
    line-height: var(--hdr-nav);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-fast);
    user-select: none;
    text-shadow: 0 1px 10px rgba(10,12,8,.8), 0 0 28px rgba(10,12,8,.4);
    text-decoration: none;
}
/* v4.4.3 — Scoped to direct-child nav-links only. Dropdown items also carry
   the .nav-link class (via the WP nav walker), so the previous unscoped rule
   inflated dropdown-item height from 58px → 78px in scrolled state. The
   `> .nav-item >` chain restricts the line-height bump to top-level links. */
.is-scrolled .nav-center > .nav-item > .nav-link { line-height: var(--hdr-sticky); }
.nav-link:hover  { color: #fff; }
.nav-link.active { color: var(--tb-dryglass); }

.nav-link.has-drop::after {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    border-right:var(--b-hair) solid currentColor;
    border-bottom:var(--b-hair) solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 6px;
    opacity: .5;
    vertical-align: middle;
}

/* Dropdown */
.nav-drop {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: rgba(46,44,42,.98);
    border:var(--b-hair) solid rgba(92,84,64,.45);
    border-top: 1px solid rgba(196,168,122,.28);
    padding: 8px 0;
    display: none;
    z-index: var(--z-dropdown);
}
.nav-item:hover .nav-drop { display: block; }

.nav-drop a {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tb-canvas);
    padding: 7px 20px;
    text-decoration: none;
    transition: color var(--t-fast), padding-left var(--t-fast);
    white-space: nowrap;
}
.nav-drop a:hover { color: var(--tb-parchment); padding-left: 26px; }

/* ── Scrolled-state compact CTAs ── */
.scrolled-only { display: none; }
.is-scrolled .scrolled-only { display: block; }

/* v2.0.9: Scrolled header CTA — "Option H" dual-tier pair.
   Replaces the v2.0.5 italic-only treatment which read as decorative
   rather than actionable. The new pair: an italic Cormorant prompt
   ("Ready to stay?") next to a solid gold pill (CHECK AVAILABILITY →).
   The prompt does the brand/editorial work, the pill does the UI work.
   On viewports ≤1279px the prompt hides to avoid crowding the nav. */
.nav-row-reserve { display: none; }

.nav-row-avail {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tb-nightfall);
    background: var(--tb-latesun);
    border: none;
    /* v4.3.16 — Was 9px 18px / radius 0. Bumped padding + added 6px corner
       round so the scrolled CTA matches the site's button language and sits
       proportionally in the now-64px scrolled bar (was funky-short at 52). */
    padding: 13px 24px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: background var(--t-fast);
}
.nav-row-avail:hover { background: var(--tb-dryglass); }
/* Italic conversational prompt — appears left of the pill on wide screens */
.nav-row-avail::before {
    content: "Ready to stay?";
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    font-weight: 400;
    color: rgba(245,238,216,.72);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
}
/* Arrow inside the pill */
.nav-row-avail::after {
    content: " \2192";
    font-family: var(--font-body);
    font-size: 11px;
    margin-left: 6px;
    display: inline-block;
    transition: transform var(--t-fast);
}
.nav-row-avail:hover::after { transform: translateX(3px); }
.is-scrolled .nav-row-avail { display: inline-block; }
/* Hide the italic prompt on narrower desktops so it doesn't crowd nav */
@media (max-width: 1280px) {
    .nav-row-avail::before { display: none; }
}

/* v2.0.9: Show compact logo in scrolled state on desktop.
   Without this the left side of the scrolled header is empty — the
   desktop .logo-area lives in .hdr-top-row which collapses to 0px
   when scrolled. The .tablet-logo is already sized for the 52px nav
   row (46px icon, 30px wordmark). Absolutely positioned so nav-center
   stays geometrically centered in the row.

   v4.0.9 — visual-center correction. The geometric-center approach
   (logo absolute, nav-center flex:1 centering across full row) makes
   the nav text appear off-balance because the logo (~154px) is wider
   than the CTA "Check Availability" button (~215px). Visual midpoint
   between logo-right and CTA-left differs from row midpoint by ~86px,
   so the nav crowds the logo while leaving a wide gap on the right.
   Adding padding-left to .nav-center matching the logo's footprint
   shifts the centering region into the actual gap between logo and
   CTA, giving symmetric ~117px margins on both sides. */
@media (min-width: 1024px) {
    .site-header.is-scrolled .tablet-logo {
        display: flex;
        align-items: center;
        position: absolute;
        left: var(--pad-x);
        top: 50%;
        transform: translateY(-50%);
    }
    .site-header.is-scrolled .hdr-nav-row {
        position: relative;
    }
    .site-header.is-scrolled .nav-center {
        padding-left: 172px;
    }
}

/* ─────────────────────────────────────────────
   TABLET / MOBILE HEADER (≤1023px)
───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hdr-top-row { display: none; }

    .hdr-nav-row {
        padding: 0 28px;
        border-top: none;
        height: var(--hdr-mobile) !important;
        justify-content: space-between;
    }
    .is-scrolled .hdr-nav-row { height: var(--hdr-mobile) !important; }

    .nav-center { display: none; }
    .nav-row-reserve,
    .nav-row-avail { display: none !important; }

    .site-header.is-hero {
        height: var(--hdr-mobile);
        /* Deep Anchor — mobile: same curve, tuned for single-row height */
        background: linear-gradient(180deg,
            rgba(10,14,12,.82)  0%,
            rgba(10,14,12,.52) 42%,
            rgba(10,14,12,.14) 72%,
            rgba(10,14,12,0)  100%);
    }
    .site-header.is-scrolled { height: var(--hdr-mobile); }
}

/* ── Tablet logo (shows in nav row on tablet/mobile) ── */
.tablet-logo {
    display: none;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}
.tablet-logo .logo-icon    { width: 46px; height: 46px; }
.tablet-logo .logo-sep     { width: 0.5px; height: 26px; background: rgba(245,238,216,.12); margin: 0 12px; flex-shrink: 0; }
.tablet-logo .logo-wordmark { height: 30px; width: auto; }

@media (max-width: 1024px) { .tablet-logo { display: flex; } }

/* v3.6.2 — punch list Mobile Nav fix: keep "Treebones" wordmark visible
   on standard iPhones (375-430px). Only hide on very narrow phones
   (<360px, e.g. iPhone SE 1st gen / older Galaxy). Tighten icon, sep,
   and wordmark at 480px so they fit alongside the avail button. */
@media (max-width: 480px) {
    .tablet-logo .logo-icon     { width: 38px; height: 38px; }
    .tablet-logo .logo-sep      { height: 22px; margin: 0 9px; }
    .tablet-logo .logo-wordmark { height: 22px; }
}
@media (max-width: 359px) {
    .tablet-logo .logo-sep,
    .tablet-logo .logo-wordmark { display: none; }
}

/* ── Tablet right cluster ── */
.tablet-right {
    display: none;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
@media (max-width: 1024px) { .tablet-right { display: flex; } }

.tablet-avail {
    /* .btn-outline base */
    /* v4.3.16 — Padding bumped 8/14 → 10/16 so the tablet button matches the
       height of the desktop hero CTA (38.5px). Was reading as the runt next
       to the bigger logo + nav row at this breakpoint. */
    padding: 10px 16px;
    font-size: 8.5px;
    letter-spacing: .2em;
}
/* v3.6.2 — Check Availability stays visible on iPhones; hides only on
   very narrow phones (<360px). Sized down at 480px so it fits cleanly
   alongside the wordmark + burger. */
@media (max-width: 480px) {
    .tablet-avail {
        /* v4.3.16 — Bumped 7/10 → 9/12 for the same reason; still fits beside
           the burger on iPhone widths without crowding. */
        padding: 9px 12px;
        font-size: 7.5px;
        letter-spacing: .14em;
    }
}
@media (max-width: 359px) { .tablet-avail { display: none; } }

/* ─────────────────────────────────────────────
   HAMBURGER BUTTON
   v3.6.6 — UX audit: bumped tap target 38×38 → 44×44 to clear the
   WCAG 2.5.5 / iOS HIG mobile minimum. Visual icon (the 3 .b-line
   strips) stays the same size; the extra space is internal padding,
   so the burger looks identical but the hit zone is bigger.
───────────────────────────────────────────── */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 44px;
    cursor: pointer;
    background: none;
    border: none;
    flex-shrink: 0;
    padding: 8px;
}
@media (max-width: 1024px) { .burger { display: flex; } }

.b-line {
    display: block;
    width: 22px; height: 1.5px;
    background: rgba(245,238,216,.88);
    border-radius: var(--r-card);
    transform-origin: center;
    transition:
        transform var(--t-base) ease,
        opacity var(--t-base) ease,
        width var(--t-base) ease;
}
.burger.open .b-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open .b-line:nth-child(2) { opacity: 0; width: 0; }
.burger.open .b-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─────────────────────────────────────────────
   MOBILE NAV DRAWER
───────────────────────────────────────────── */
/* v3.6.6 — UX audit: max-height 100vh on iOS Safari was clipping the
   bottom drawer items behind the dynamic Safari URL bar. Switched to
   100dvh (dynamic viewport height) which respects the actual visible
   area as the toolbar shows/hides on scroll. The 100vh fallback stays
   first so older browsers without dvh support still get a reasonable
   drawer (slightly clipped on iOS but usable). */
.nav-drawer {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-sticky);
    background: rgba(46,44,42,.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateY(-100%);
    transition: transform .42s var(--ease-smooth);
    padding-bottom: 32px;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    border-bottom:var(--b-hair) solid rgba(92,84,64,.4);
}
.nav-drawer.open { transform: translateY(0); }

.drawer-spacer { height: var(--hdr-mobile); }

.drawer-inner { padding: 12px 28px 8px; }

/* v3.6.6 — UX audit caught this: 8px / weight 300 was a clear violation
   of our 11px footnote floor, and on the dark drawer bg it read as a
   ghost watermark. Bumped 8→11px and weight 300→400 to match the v3.4.0
   legibility pass that updated the rest of the small-type tokens. */
.drawer-section-lbl {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(196,168,122,.78);
    padding: 16px 0 8px;
    border-top:var(--b-hair) solid rgba(92,84,64,.22);
    margin-top: 4px;
}
.drawer-section-lbl:first-child { border-top: none; padding-top: 6px; }

.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245,238,216,.95);
    padding: 13px 0;
    border-bottom:var(--b-hair) solid rgba(92,84,64,.2);
    cursor: pointer;
    background: none;
    border-left: none; border-right: none; border-top: none;
    width: 100%;
    text-align: left;
    transition: color var(--t-fast);
    text-decoration: none;
}
.drawer-link:hover { color: #fff; }

.chevron {
    width: 8px; height: 8px;
    border-right:var(--b-hair) solid rgba(196,168,122,.45);
    border-bottom:var(--b-hair) solid rgba(196,168,122,.45);
    transform: rotate(45deg);
    transition: transform .25s;
    flex-shrink: 0;
    margin-right: 4px;
}
.drawer-link.expanded .chevron { transform: rotate(-135deg); }

.drawer-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-medium) ease;
    padding-left: 16px;
}
.drawer-sub.open { max-height: 400px; }

.drawer-sub a {
    display: block;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(196,178,148,.78);
    padding: 13px 0;
    border-bottom:var(--b-hair) solid rgba(92,84,64,.15);
    text-decoration: none;
    transition: color var(--t-fast);
}
.drawer-sub a:hover { color: var(--tb-parchment); }
.drawer-sub a:last-child { border-bottom: none; }

.drawer-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 0 6px;
    border-top:var(--b-hair) solid rgba(92,84,64,.28);
    margin-top: 6px;
}

.drawer-cta-primary {
    /* .btn-primary base — override width */
    width: 100%;
    padding: 15px;
    text-align: center;
    font-size: 10px;
}

.drawer-dining {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ddl {
    border:var(--b-hair) solid rgba(92,84,64,.32);
    padding: 12px;
    border-radius: var(--r-card);
    cursor: pointer;
    transition: border-color var(--t-fast);
    text-decoration: none;
    display: block;
}
.ddl:hover { border-color: rgba(196,168,122,.45); }
/* v3.4.0: drawer dropdown labels — 7px → 10px, 12px → 13px, 9px → 11px;
   all weights 300 → 400 for legibility on parchment dropdown bg. */
.ddl-lbl  { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tb-earth); margin-bottom: 3px; font-weight: 400; }
.ddl-name { font-size: 13px; color: var(--tb-driftwood); font-weight: 400; }
.ddl-cta  { font-size: 11px; color: var(--tb-canvas); letter-spacing: .1em; margin-top: 3px; font-weight: 400; }

.drawer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0 2px;
    border-top:var(--b-hair) solid rgba(92,84,64,.18);
    margin-top: 10px;
}
.drawer-phone {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: .14em;
    color: rgba(245,238,216,.5);
    text-decoration: none;
}
.drawer-addr {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 9px;
    letter-spacing: .1em;
    color: rgba(245,238,216,.26);
    text-align: right;
    line-height: 1.6;
}

/* Backdrop */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-sticky);
    background: rgba(42,41,39,0);
    pointer-events: none;
    transition: background .42s ease;
}
.drawer-backdrop.show {
    background: rgba(42,41,39,.55);
    pointer-events: all;
}

/* ─────────────────────────────────────────────
   BOOKING OVERLAY
───────────────────────────────────────────── */
.booking-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, background .35s ease;
    background: rgba(42,41,39,0);
}
/* v3.7.15 — Tier 2c: backdrop color + blur merged from Z2 (~L1184).
   Z2's rgba(19,21,16,.72) + 6px blur is the v2.10.2 parchment-redesign
   winner; supersedes the old solid rgba(42,41,39,.84). */
.booking-overlay.open {
    opacity: 1;
    pointer-events: all;
    background: rgba(19,21,16,.72) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* v3.7.15 — Tier 2c: collapsed from 3 stacked rules. Width/bg/border/
   border-radius/padding/box-shadow from Z2 v2.10.2 parchment redesign
   (~L1190); position/transform/transition/max-height/overflow from Z1. */
/* v4.4.3 — !important stripped. Theme-specific selector, no third-party fight. */
.booking-panel {
    width: 640px;
    max-width: calc(100vw - 32px);
    background: var(--tb-parchment);
    border: none;
    border-radius: var(--r-modal);
    padding: clamp(36px, 5vw, 52px) clamp(32px, 5vw, 48px) clamp(28px, 4vw, 40px);
    box-shadow: 0 32px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(196,168,122,.15);
    position: relative;
    transform: translateY(20px);
    transition: transform .42s var(--ease-smooth);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.booking-overlay.open .booking-panel { transform: translateY(0); }

/* v3.7.15 — Tier 2c: collapsed from 3 stacked rules. v3.0.2 a11y
   hit-target (44×44 flex-centered) + 28px font-size + right:12px from Z2
   (~L1202); :hover --tb-nightfall from Z2 (~L1214) supersedes old
   --tb-driftwood. */
/* v4.4.3 — !important stripped (theme-specific selector). */
.bp-close {
    position: absolute;
    /* v4.3.17 — Color shifted from --tb-earth (brown) → --tb-parchment so
       the × reads over the John Handy photo (sky + ocean). Subtle text-
       shadow keeps it legible against the brightest photo zones. */
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--tb-parchment);
    text-shadow: 0 1px 6px rgba(10,12,8,.55), 0 0 14px rgba(10,12,8,.3);
    font-size: 28px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: color var(--t-fast);
    font-weight: 300;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bp-close:hover { color: #fff; }

/* v3.7.13 — collapsed from 3 stacked rules into single source. Effective
   values: weight/size/letter-spacing/margin from Z2 (L1208), color from
   Z3 (v3.7.12 contrast fix, L1669). */
.bp-eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tb-earth);
    margin-bottom: 10px;
}
/* v3.7.13 — collapsed from 3 stacked rules. Z2 wins font-size/margin,
   Z3 wins color (--tb-nightfall is the v3.0.2 WCAG winner). */
.bp-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 4.5vw, 36px);
    color: var(--tb-nightfall);
    letter-spacing: .03em;
    margin-bottom: 6px;
}
/* v3.7.2 — new .bp-body sits between the H2 and the policy-points
   sub. Carries the brief verbatim body line ("Choose your stay,
   reserve your dining, and experience one of the most memorable stays
   in Big Sur."). Sized between H2 and sub: 13px / 400 / line-height
   1.7 — readable, warm, doesn't fight the H2 for hierarchy.
   .bp-sub margin-bottom dropped from 20 → 14 since it now sits closer
   to the form, with the .bp-body absorbing the prior breathing room. */
.bp-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--tb-earth);
    letter-spacing: .02em;
    line-height: 1.7;
    margin: 0 0 10px;
    max-width: 460px;
}
/* v3.7.13 — collapsed from 3 stacked rules. Z2 wins everything except
   font-family/letter-spacing/line-height; Z3 confirms color. */
.bp-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: .05em;
    color: var(--tb-earth);
    line-height: 1.65;
    margin-bottom: 28px;
}

/* v3.7.13 — collapsed from 3 stacked rules + dropped dead
   #webrezWidgetMount margin sibling (Tier 1: orphan removal). */
.bp-note {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--tb-deadwood);
    letter-spacing: .05em;
    text-align: center;
    margin-top: 16px;
    line-height: 1.7;
}
.bp-note a { color: var(--tb-tungsten); font-weight: 500; }

/* v3.7.15 — Tier 2c: collapsed dining cards from 3 stacked layers.
   Z2 (parchment-redesign, ~L1266) wins layout/bg/borders; Z3 (WCAG
   contrast, ~L1603) wins text colors. */
.bp-dining {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}
.bp-dl {
    border: var(--b-hair) solid rgba(168,149,110,.25);
    background: var(--tb-parchment);
    border-radius: var(--r-card);
    padding: 14px 16px;
    border-left: 3px solid var(--tb-tungsten);
    transition: background var(--t-fast);
    cursor: pointer;
    text-decoration: none;
    display: block;
}
.bp-dl:hover {
    background: var(--tb-parchment);
    border-color: rgba(168,149,110,.4);
    border-left-color: var(--tb-goldenhour);
}
.bp-dl-lbl  { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--tb-earth); margin-bottom: 2px; font-weight: 400; }
.bp-dl-name { font-size: 14px; color: var(--tb-nightfall); font-weight: 400; }
.bp-dl-cta  { font-size: 10px; color: var(--tb-tungsten); letter-spacing: .1em; margin-top: 2px; font-weight: 400; }

/* ─────────────────────────────────────────────
   FOOTER STYLES
───────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(180deg, var(--tb-shadow) 0%, var(--tb-nightfall) 100%);
    border-top:var(--b-hair) solid rgba(92,84,64,.35);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 48px;
    padding: clamp(40px,6vw,64px) var(--pad-x);
}
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* v3.7.4 — wordmark swapped in for the round icon (NEW6). Size cap
   keeps it legible without dominating the brand column. */
.footer-logo img { mix-blend-mode: screen; height: 38px; width: auto; max-width: 200px; }
.footer-tagline {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tb-canvas);
    margin-top: 4px;
}
.footer-address,
.footer-phone,
.footer-email {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(196,178,148,.70);
    line-height: 1.65;
    text-decoration: none;
    transition: color var(--t-fast);
}
.footer-address a { color: inherit; text-decoration: none; }
.footer-address:hover,
.footer-phone:hover,
.footer-email:hover { color: var(--tb-parchment); }

.footer-social {
    display: flex;
    gap: 14px;
    margin-top: 16px;
}
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border:var(--b-hair) solid rgba(168,149,110,.2);
    color: var(--tb-dryglass);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-social-link:hover {
    color: var(--tb-parchment);
    border-color: rgba(168,149,110,.45);
}

.footer-col-title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    margin-bottom: 14px;
}
.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-links li a {
    display: block;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .1em;
    color: rgba(196,178,148,.68);
    padding: 4px 0;
    transition: color var(--t-fast);
    text-decoration: none;
}
@media (max-width: 768px) { .footer-links li a { padding: 9px 0; } }
.footer-links li a:hover { color: var(--tb-parchment); }

.footer-bottom {
    background: var(--tb-nightfall);
    padding: 14px var(--pad-x);
    border-top:var(--b-hair) solid rgba(92,84,64,.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-copy {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 9px;
    letter-spacing: .1em;
    color: rgba(196,178,148,.55);
}
.footer-legal {
    display: flex;
    gap: 12px;
    align-items: center;
}
.footer-legal a {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 9px;
    letter-spacing: .1em;
    color: rgba(196,178,148,.55);
    text-decoration: none;
    transition: color var(--t-fast);
}
.footer-legal a:hover { color: var(--tb-canvas); }
.footer-legal span { color: rgba(196,178,148,.2); }

/* ─────────────────────────────────────────────────────────────────
   Footer Press Bar — v3.7.5 grid layout
   Replaces the v3.6.5 dual-track marquee with a centered "As
   Featured In" label stacked above a 3×3 publication grid. Same nine
   pubs, same /about/press/ destination, but now a static, scannable
   block at all viewports. Mobile collapses to 2 columns (5 rows incl.
   trailing single) so names never wrap mid-publication.
   ────────────────────────────────────────────────────────────────── */
.footer-press-bar {
    padding: 26px var(--pad-x) 22px;
    border-top: var(--b-hair) solid rgba(92,84,64,.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.footer-press-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tb-earth);
    text-align: center;
}
.footer-press-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 28px;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    justify-items: center;
}
.footer-press-pub {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .06em;
    color: rgba(168,149,110,.55);
    text-decoration: none;
    transition: color var(--t-fast);
    text-align: center;
    white-space: nowrap;
}
.footer-press-pub:hover,
.footer-press-pub:focus-visible { color: var(--tb-canvas); }

@media (max-width: 600px) {
    .footer-press-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
        max-width: 360px;
    }
}

/* ─────────────────────────────────────────────
   BREADCRUMB BAR
   v2.12.0 — bark-gradient brown band (was empty parchment strip).
   Sits below interior page heroes as a transitional element between
   the dark hero and the parchment editorial sections. Not sticky —
   scrolls away naturally, doesn't compete with the page content.
───────────────────────────────────────────── */
.breadcrumb-bar {
    position: relative;
    z-index: 4;
    background: linear-gradient(180deg, #4D473E 0%, var(--tb-bark) 50%, #3D3832 100%);
    border-top:var(--b-hair) solid rgba(0,0,0,.18);
    border-bottom:var(--b-hair) solid rgba(196,168,122,.18);
    padding: 0 var(--pad-x);
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumb-bar a,
.breadcrumb-bar span {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tb-canvas);
    text-decoration: none;
    transition: color var(--t-fast) ease;
}
.breadcrumb-bar a:hover { color: var(--tb-dryglass); }
.breadcrumb-bar .breadcrumb-current { color: var(--tb-parchment); }
.breadcrumb-sep { color: var(--tb-trail); opacity: .6; font-size: 10px; }


/* =============================================================
   CONTRAST & LEGIBILITY BOOST
   Addresses WCAG AA compliance and visual readability
   across footer, nav, drawer, and overlay.
   ============================================================= */

/* ── FOOTER: brand-section descendant overrides (Zone B) ──
   v3.7.16 — Tier 3a: dropped six plain-selector rules from this block
   (.footer-col-title, .footer-links li a + :hover, .footer-copy,
   .footer-legal a + :hover) — all were fully shadowed by the WCAG-AA
   pass at ~L1450 (Zone D, same specificity, later in cascade).
   Kept the .footer-brand descendant rules — those win via specificity
   over Zone D's plain-selector rules and are load-bearing. */
.footer-brand .footer-tagline {
    color: rgba(196,178,148,.68) !important;
    letter-spacing: .18em;
}
.footer-brand .footer-address,
.footer-brand .footer-phone,
.footer-brand .footer-email {
    color: rgba(196,178,148,.75) !important;
}
.footer-brand .footer-address a {
    color: rgba(196,178,148,.75) !important;
}

/* v3.7.17 — Tier 3b: deleted Z2 nav/header rules (.nav-link,
   .is-scrolled .nav-link + :hover + .active, .hdr-phone). All were
   fully shadowed by the v1.0.1 WCAG AA pass at ~L1479 (Zone D, same or
   higher specificity, later in cascade). The .is-scrolled :hover/.active
   rules deferred safely to plain .nav-link:hover/.active (same colors). */

/* ── DRAWER: all text significantly brighter ── */
.drawer-section-lbl {
    color: rgba(196,168,122,.65) !important;
    letter-spacing: .28em !important;
}
.drawer-link {
    color: rgba(245,238,216,.95) !important;
    font-size: 13px !important;
    letter-spacing: .18em !important;
}
/* v3.7.18 — Tier 3c: deleted Z2 color-only overrides for .drawer-sub a,
   .drawer-sub a:hover, .drawer-phone, .drawer-addr, .ddl-lbl, .ddl-name,
   .ddl-cta. All shadowed by Zone D at ~L1502-1515 (same selector + same
   specificity, later in cascade with !important).
   Kept .drawer-section-lbl and .drawer-link Z2 rules above — their
   letter-spacing properties are not redefined in Zone D and are still
   load-bearing. */

/* v3.7.15 — Tier 2c: removed .bp-dl-* legacy color overrides (the dark-
   mode comment was already wrong — Z3 below at ~L1603 superseded these
   anyway). Removed obsolete .booking-panel border-top patch (parchment
   redesign at L1190 set border-top: none and won this fight). */

/* ── SCROLL HINT ── */
.scroll-text {
    color: rgba(196,168,122,.70) !important;
    letter-spacing: .28em !important;
}
.scroll-line {
    background: rgba(196,168,122,.45) !important;
}

/* ── SLIDE COUNTER ── */
.slide-counter {
    color: rgba(245,238,216,.65) !important;
}

/* ── DOT INDICATORS ── */
.dot {
    background: rgba(245,238,216,.38) !important;
}
.dot.active {
    background: var(--tb-dryglass) !important;
}

/* ── HERO EYEBROW ── */
.hero-eyebrow {
    color: var(--tb-dryglass) !important;
    letter-spacing: .36em !important;
}

/* ── HERO BODY ── */
.hero-body {
    color: rgba(245,238,216,.88) !important;
}

/* v3.7.17 — Tier 3b: deleted Z2 .nav-drop a, .nav-drop a:hover,
   .hdr-reserve overrides. All shadowed by Zone D at ~L1496-1500 (same
   selector + same specificity, later in cascade with !important). */

/* ── TABLET AVAIL BUTTON ── */
.tablet-avail {
    color: rgba(245,238,216,.95) !important;
    border-color: rgba(245,238,216,.55) !important;
}

/* ── CHECK AVAILABILITY button ── */
.btn-outline,
.hdr-avail-btn {
    color: rgba(245,238,216,.95) !important;
    border-color: rgba(245,238,216,.60) !important;
    font-weight: 300 !important;
}
.btn-outline:hover {
    background: rgba(245,238,216,.16) !important;
    border-color: rgba(245,238,216,.95) !important;
}


/* v3.7.15 — Tier 2c: BOOKING OVERLAY — PARCHMENT & GOLD v2.10.2 block
   removed. Its .booking-overlay.open / .booking-panel / .bp-close /
   .bp-close:hover overrides were merged into the Z1 originals at ~L654
   (parchment-redesign values are the cascade winners and were preserved
   exactly). */

/* v3.7.13 — Tier 2a: .bp-eyebrow / .bp-title / .bp-sub Z2 overrides
   removed; their effective values were merged into the Z1 originals at
   ~L702. .bp-title em kept (it's a separate descendant selector). */
.bp-title em { color: var(--tb-tungsten) !important; }

/* Form fields — cream on parchment */
.bp-field input,
.bp-field select {
    background: var(--tb-parchment) !important;
    border:var(--b-hair) solid rgba(168,149,110,.25) !important;
    color: var(--tb-bark) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 12px 14px !important;
    border-radius: var(--r-card) !important;
    width: 100% !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color var(--t-fast), background var(--t-fast) !important;
}
.bp-field input:focus,
.bp-field select:focus {
    border-color: var(--tb-tungsten) !important;
    background: var(--tb-parchment) !important;
}
/* v3.7.14 — Tier 2b: placeholder color migrated up from former Z3 rule
   so the Z3 block can be deleted. Was --tb-deadwood !important = 3.0:1
   acceptable for placeholder per WCAG. */
.bp-field input::placeholder { color: var(--tb-deadwood) !important; }
/* v3.0.2: form labels bumped from --tb-trail to --tb-earth for 55-75 demo readability.
   All-caps + tracked + light = triple legibility hit. Color comes up; tracking + caps stay. */
.bp-field label {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--tb-earth) !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* v3.7.13 — Tier 1: dead #webrezWidgetMount submit-button block removed.
   The real button is .btn-bp (id=bpSearch) styled at ~L1509; nothing in
   the DOM ever matched the #webrezWidgetMount input[type=submit] selector.
   Tier 2a: .bp-note Z2 override removed; merged into Z1 at ~L747. */

/* v3.7.15 — Tier 2c: dining-cards Z2 block removed; merged into Z1
   originals at ~L767. Note .bp-dl-lbl Z2 had color --tb-trail but Z3
   (~L1603, the v3.0.2 contrast pass) won with --tb-earth — preserved
   that as the merged value. .bp-field select option migrated up into
   the form-fields Z2 block. */
.bp-field select option { background: var(--tb-parchment) !important; color: var(--tb-bark) !important; }

/* =============================================================
   MOBILE DRAWER — SUB-ITEM LEGIBILITY
   ============================================================= */

/* Sub items: bigger, more contrast */
.drawer-sub a {
    font-size: 12px !important;
    letter-spacing: .16em !important;
    color: rgba(210,190,148,.82) !important;
    padding: 11px 0 !important;
    border-bottom:var(--b-hair) solid rgba(92,84,64,.18) !important;
}
/* v3.7.18 — Tier 3c: Z3 .drawer-sub a:hover deleted; Zone D at L1503
   wins with --tb-parchment !important (later in cascade, same
   specificity). The Z3 #fff was shadowed. */

/* v3.6.0 — punch list C1: removed the URL-targeted override block that
   was dimming + shrinking the Resort Map (and what-to-bring / Big-Sur)
   drawer links to 11px / 60% opacity. The intent was "dash-prefixed
   hierarchy" but the dash was just inside URL slugs. Result: Resort Map
   read as a different style from Getting Here in the FAQs sub-drawer.
   Now all drawer-sub a links use the canonical 14px / 400 / --tb-ash
   styling from earlier in this file. */

/* Indent sub items slightly more */
.drawer-sub {
    padding-left: 20px !important;
}

/* Drawer dining cards — better contrast */
.ddl {
    border:var(--b-hair) solid rgba(120,108,80,.45) !important;
    background: rgba(255,255,255,.03) !important;
}
.ddl:hover {
    border-color: rgba(196,168,122,.5) !important;
    background: rgba(255,255,255,.05) !important;
}
.ddl-name { 
    color: rgba(210,190,148,.92) !important; 
    font-size: 13px !important;
}
.ddl-cta  { 
    color: var(--tb-dryglass) !important; 
    font-size: 10px !important;
}

/* Check Availability button in drawer — full gold */
.drawer-cta-primary {
    background: var(--tb-tungsten) !important;
    color: var(--tb-nightfall) !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    letter-spacing: .28em !important;
    padding: 16px !important;
}
.drawer-cta-primary:hover {
    background: var(--tb-goldenhour) !important;
}

/* Mobile header: more space between avail button and burger */
@media (max-width: 1024px) {
    .tablet-right {
        gap: 14px !important;
    }
    .tablet-avail {
        font-size: 8px !important;
        letter-spacing: .18em !important;
        padding: 8px 12px !important;
    }
}

/* v3.6.2 — punch list Mobile Nav: Check Availability + wordmark stay
   visible at iPhone widths. The previous rule hid .tablet-avail at
   ≤480px which also wiped the button on every modern iPhone (375-430).
   Now we only collapse on very narrow phones (<360px) and tighten the
   button at 480px so it fits next to the wordmark. */
@media (max-width: 480px) {
    .tablet-right { gap: 10px !important; }
    .tablet-avail {
        font-size: 7.5px !important;
        letter-spacing: .14em !important;
        padding: 7px 10px !important;
    }
}
@media (max-width: 359px) {
    .tablet-avail { display: none !important; }
}

/* =============================================================
   MOBILE DRAWER — HEADER AREA
   ============================================================= */
/* Make sure the logo + avail + burger don't crowd */
.nav-drawer .drawer-spacer {
    height: var(--hdr-mobile) !important;
    border-bottom:var(--b-hair) solid rgba(92,84,64,.35) !important;
}

/* v3.7.16 — Tier 3a: "FOOTER — FINAL CONTRAST PASS" (Zone C) block
   removed. Every rule (.footer-col-title, .footer-links li a + :hover,
   .footer-tagline, .footer-address a / .footer-phone / .footer-email,
   .footer-copy, .footer-legal a) was fully shadowed by the v1.0.1
   WCAG AA pass at ~L1450 (same specificity, later in cascade). */

/* =============================================================
   INLINE BOOKING FORM (inside overlay)
   ============================================================= */
.bp-form-inner { margin: 0 0 4px; }

.bp-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}
.bp-3 { grid-template-columns: 1fr 1fr 1fr; }
.bp-2 { grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
/* v3.7.0 — bp-1: full-width single field row, used for the lodging-type
   select after the promo-code field was removed. */
.bp-1 { grid-template-columns: 1fr; margin-bottom: 18px; }

@media (max-width: 480px) {
    .bp-3 { grid-template-columns: 1fr 1fr; }
    .bp-2 { grid-template-columns: 1fr; }
}

/* v3.7.14 — Tier 2b: kept the structural .bp-field flex wrapper here
   (single source). Visual rules (label, input/select, focus, option,
   placeholder) were dark-themed Z1 origins fully shadowed by Z2 at
   ~L1222 — deleted. */
.bp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.btn-bp {
    width: 100%;
    /* v4.3.17 — Pacific → Deepwater gradient. Was flat Tungsten; new
       direction ties the primary CTA to the photo's Pacific gradient
       and the .bp-badge's Pacific tint above. Three intentional Pacific
       moments now thread through the popup (photo → badge → button). */
    background: linear-gradient(135deg, var(--tb-pacific) 0%, var(--tb-tide) 55%, var(--tb-deepwater) 100%);
    border: none;
    color: var(--tb-parchment);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 14px;
    cursor: pointer;
    border-radius: var(--r-card);
    transition: background var(--t-fast);
    box-shadow: 0 2px 14px rgba(33,59,58,.18), 0 1px 0 rgba(196,216,214,.18) inset;
    margin-top: 2px;
}
.btn-bp:hover {
    background: linear-gradient(135deg, #6FBDB9 0%, #3A6463 55%, #2A4644 100%);
}


/* =============================================================
   v4.3.17 — BOOKING POPUP PHOTO + BADGE
   Photo column was previously gated to the Seaglass preview page
   via `if ( tb_seaglass_active() )` in header.php. Un-gated in
   v4.3.17 so the John Handy 1986 photo + sentiment band renders
   on every booking popup, with the Pacific gradient and badge
   threading the coastal palette through three intentional spots.
   The seaglass-scoped rules in home-seaglass.css still override
   on the preview page (body.tb-seaglass-active wins by specificity).
   ============================================================= */

/* Photo band — uses negative margins to break out of the panel's
   clamp padding so the photo bleeds edge-to-edge while the rest of
   the content stays within the original padding rhythm. */
.bp-photo {
    display: block;
    position: relative;
    width: auto;
    min-height: 240px;
    background-image: url(/wp-content/uploads/2026/05/John-Handy-Looking-Out-Over-Land-1986.webp);
    background-size: cover;
    background-position: center 40%;
    border-radius: var(--r-modal) var(--r-modal) 0 0;
    overflow: hidden;
    margin-top: calc(clamp(36px, 5vw, 52px) * -1);
    margin-left: calc(clamp(32px, 5vw, 48px) * -1);
    margin-right: calc(clamp(32px, 5vw, 48px) * -1);
    margin-bottom: clamp(20px, 3vw, 32px);
}
@media (min-width: 768px) {
    .bp-photo { min-height: 280px; }
}

/* Pacific → Deepwater gradient ties the photo to the page palette
   without committing to a full Seaglass surface — used only in the
   bottom-third of the photo for caption legibility. */
.bp-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(33,59,58,0)    0%,
        rgba(33,59,58,0)    38%,
        rgba(48,88,87,.55)  68%,
        rgba(27,48,65,.92)  100%);
    pointer-events: none;
}

.bp-photo-content {
    position: absolute;
    inset: auto clamp(20px, 3vw, 28px) clamp(20px, 3vw, 24px) clamp(20px, 3vw, 28px);
    z-index: 2;
}

.bp-photo-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tb-pacific);
    margin-bottom: 10px;
}

.bp-photo-quote {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.18;
    color: var(--tb-parchment);
    margin: 0 0 8px;
    text-shadow: 0 2px 14px rgba(10,12,8,.6);
}
.bp-photo-quote em {
    font-style: italic;
    color: #C4D8D6;  /* soft seaglass-mint — italic accent */
}

.bp-photo-attribution {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(245,238,216,.7);
}


/* Two-night minimum notice — inline tap-to-call row, full-width.
   Click-to-call only (tel:); the number itself is not displayed to
   keep the row clean. The whole row is one anchor for a generous
   tap target on mobile. */
.bp-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 18px;
    padding: 10px 14px;
    text-decoration: none;
    border: 0.5px solid rgba(98,177,174,.4);
    border-radius: var(--r-card);
    background: rgba(98,177,174,.07);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.bp-badge:hover {
    border-color: var(--tb-pacific);
    background: rgba(98,177,174,.13);
}

.bp-badge-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tb-bark);
}

.bp-badge-sep {
    color: rgba(70,65,57,.4);
    font-size: 14px;
    line-height: 1;
}

.bp-badge-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--tb-deepwater);
    letter-spacing: .04em;
}
.bp-badge-cta svg { color: var(--tb-pacific); }


/* =============================================================
   ADA / WCAG AA COMPLIANCE PASS — v1.0.1
   All contrast ratios verified against #2A2927 background.
   No opacity-based text colors on dark sections.
   Ratios: normal text ≥4.5:1, large/UI text ≥3:1
   ============================================================= */

/* v2.0.9: Logo sizing override block deleted. All values consolidated
   into the base rules above (lines 87–115). See that section for the
   canonical logo sizes across hero, scrolled, and tablet states. */

/* ── FOOTER: WCAG AA compliant solid colors (no opacity) ── */

/* Column headings: var(--tb-canvas) = approved 11px/400/0.32em ✅ */
.footer-col-title {
    color: var(--tb-canvas) !important;
    font-size: 11px !important;
    letter-spacing: .32em !important;
    font-weight: 400 !important;
    margin-bottom: 18px !important;
    text-transform: uppercase !important;
}

/* Navigation links: approved 14px/300 ✅ */
.footer-links li a {
    color: rgba(245,238,216,0.55) !important;
    font-size: 14px !important;
    letter-spacing: .04em !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    padding: 5px 0 !important;
}
.footer-links li a:hover {
    color: var(--tb-parchment) !important;  /* --tb-parchment: 17:1 ✅ */
}

/* Brand address/phone/email: var(--tb-stone-warm) = 4.55:1 ✅ */
.footer-address a,
.footer-phone,
.footer-email,
.footer-brand .footer-address {
    color: var(--tb-stone-warm) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}
.footer-address a:hover,
.footer-phone:hover,
.footer-email:hover {
    color: var(--tb-dryglass) !important;
}

/* Brand tagline: #9C9080 = 5.9:1 ✅ */
.footer-tagline {
    color: var(--tb-ash) !important;
    font-size: 10px !important;
    letter-spacing: .2em !important;
}

/* Copyright bar: #69615B = 3.0:1 ✅ (acceptable for small print/legal) */
.footer-copy {
    color: var(--tb-deadwood) !important;
    font-size: 10px !important;
}

/* Legal links: var(--tb-stone-warm) = 4.55:1 ✅ */
.footer-legal a {
    color: var(--tb-stone-warm) !important;
    font-size: 10px !important;
}
.footer-legal a:hover { color: var(--tb-dryglass) !important; }
.footer-legal span    { color: var(--tb-bark) !important; }

/* Footer background — confirm darkest */
.site-footer,
.footer-grid,
.footer-bottom {
    background: var(--tb-nightfall) !important;
}

/* ── NAV: WCAG compliant ── */
/* Nav links: #E8E4DC = 14.5:1 ✅ */
.nav-link {
    color: var(--tb-parchment) !important;
    text-shadow: 0 1px 8px rgba(10,12,8,.6) !important;
}
.nav-link:hover  { color: #FFFFFF !important; }
.nav-link.active { color: var(--tb-dryglass) !important; }

/* Scrolled nav — no text-shadow needed, solid bg. v4.4.3: scoped to top-level
   nav-links only; dropdown items keep their own color (--tb-dryglass below). */
.is-scrolled .nav-center > .nav-item > .nav-link {
    color: var(--tb-parchment) !important;
    text-shadow: none !important;
}

/* Phone: #D4D0C8 = 12.5:1 ✅ */
.hdr-phone { color: var(--tb-latesun) !important; font-weight: 400; }

/* Reserve dining link (top-row only; scrolled-state variant was removed in v2.0.5) */
.hdr-reserve { color: var(--tb-dryglass) !important; }

/* Dropdown links: #C4B898 = 7.8:1 ✅ */
.nav-drop a { color: var(--tb-dryglass) !important; }
.nav-drop a:hover { color: var(--tb-parchment) !important; }

/* ── HERO: WCAG compliant ── */
/* Hero eyebrow: var(--tb-dryglass) = 8.1:1 ✅ */
.hero-eyebrow { color: var(--tb-dryglass) !important; }

/* Hero body: #D4CCC0 = 11.6:1 ✅ */
.hero-body { color: var(--tb-latesun) !important; }

/* Slide counter: #A09080 = 6.0:1 ✅ */
.slide-counter { color: var(--tb-ash) !important; }

/* Scroll text: #A09080 = 6.0:1 ✅ */
.scroll-text { color: var(--tb-ash) !important; }

/* ── DRAWER: WCAG compliant ── */
/* Main links: #E8E0D0 = 14.0:1 ✅ */
.drawer-link { color: var(--tb-parchment) !important; font-weight: 400; font-size: 14px !important; }

/* Sub-links: #A09080 = 6.0:1 ✅
   v3.4.0: weight 300 → 400 for sub-nav legibility on dark drawer bg. */
.drawer-sub a { color: var(--tb-ash) !important; font-weight: 400; font-size: 14px !important; }
.drawer-sub a:hover { color: var(--tb-parchment) !important; }

/* Section label: var(--tb-stone-warm) = 4.55:1 ✅ */
.drawer-section-lbl { color: var(--tb-stone-warm) !important; }

/* Phone/address in drawer */
.drawer-phone { color: var(--tb-ash) !important; }
.drawer-addr  { color: var(--tb-deadwood) !important; }

/* Dining card text */
.ddl-lbl  { color: var(--tb-stone-warm) !important; }
.ddl-name { color: var(--tb-dryglass) !important; }
.ddl-cta  { color: var(--tb-dryglass) !important; }

/* v3.7.13 — Tier 2a: typography Z3 overrides (eyebrow/title/sub/note)
   removed. All four colors are now defined once in their Z1 rules at
   ~L702 with !important to keep cascade strength intact. */

/* v3.7.15 — Tier 2c: .bp-dl-* color overrides removed; their values were
   merged into the Z1 originals at ~L767 (those colors are the WCAG
   contrast winners from v3.0.2). */

/* v3.7.14 — Tier 2b: .bp-field Z3 overrides removed.
   - .bp-field label color was redundant with Z2 (~L1245); Z2 already
     sets color: --tb-earth !important.
   - .bp-field input/select color was redundant with Z2 (~L1223); Z2
     already sets color: --tb-bark !important. The v3.7.12 contrast
     fix that bumped from --tb-dryglass overlapped Z2's existing value.
   - .bp-field input::placeholder migrated up to Z2 block to preserve
     the rule (Z2 didn't have one; Z1 had a paler version). */

/* ── GLOBAL SECTION TEXT on dark bg ── */
/* v2.0.6: CTA banner text was grouped with the above dark-wall rules, but
   the CTA now sits on a sunset PHOTO with varied warm tones (not a solid
   dark wall). On-wall values (var(--tb-parchment) H2, #A09080 body) desaturate into
   "muddy grey" against the photo. Pure white H2 + full cream body with
   proper text-shadow reads crisp and matches the dining-hero pattern. */
.cta-banner-h2 {
    color: #FFFFFF !important;
}
.cta-banner-body {
    color: var(--tb-parchment) !important;
}

/* FAQ question text on parchment bg */
.faq-q { color: #464139 !important; }  /* --tb-bark: excellent on parchment */
.faq-a { color: #5C5440 !important; }  /* --tb-deadwood: 4.8:1 on parchment ✅ */

/* ── PARCHMENT SECTION TEXT (light bg) ── */
.tb-eyebrow,
.section-eyebrow,
.type-card-eyebrow {
    color: var(--tb-trail) !important;  /* --tb-trail: 5.1:1 on parchment ✅ */
}

/* v3.7.18 — Tier 3c: breadcrumb Z4 color overrides removed. Z1 originals
   at L1030-1042 already set the same three colors (--tb-canvas, hover
   --tb-dryglass, current --tb-parchment) with no `!important` and no
   intervening overrides — Z1 wins after Z4 deletion with no visual
   change. WCAG ratios verified at v2.12.0: canvas/bark 4.6:1, dryglass/
   bark 5.9:1, parchment/bark 11:1 ✅. */

/* ── ADMIN BAR COMPENSATION ── */
.admin-bar .site-header {
    top: 32px !important;
}
@media (max-width: 768px) {
    .admin-bar .site-header { top: 46px !important; }
}

/* ── NAV ROW: ensure text is always readable over any photo ──
   Add text-shadow to punch through bright backgrounds */
.nav-link {
    text-shadow:
        0 1px 12px rgba(10,12,8,.85),
        0 0 32px rgba(10,12,8,.60),
        0 2px 4px rgba(10,12,8,.70) !important;
}
.hdr-reserve {
    text-shadow: 0 1px 10px rgba(10,12,8,.85) !important;
}
.hdr-phone {
    text-shadow: 0 1px 10px rgba(10,12,8,.85) !important;
}

/* ── STRONGER BACKDROP for top row area ── */
/* Semi-opaque band behind top-row ensures logo is always readable */
.hdr-top-row {
    position: relative;
}
.hdr-top-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,12,8,.45) 0%,
        rgba(10,12,8,.15) 70%,
        rgba(10,12,8,0) 100%);
    pointer-events: none;
    z-index: 0;
}
/* Keep logo and nav items above the pseudo-element */
.hdr-top-row > * { position: relative; z-index: 1; }






/* v4.4.2 — GLOBAL FONT WEIGHT FLOOR removed. The v2.0.9 comment validated
   that all elements naturally compute to ≥400 without intervention; the
   floor was defensive cruft. Its existence forced upstream rules to use
   `font-weight: X !important` to win against this floor. Floor deleted,
   upstream !important markers removed in tandem (see .bp-* rules above). */

/* =============================================================
   LIVESTREAM — CONCEPT C (homepage) + CONCEPT B (footer)
   v1.2.4
   ============================================================= */

/* ── Live dot pulse — shared ── */
@keyframes tb-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    60%       { opacity: .85; box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

/* v3.2.6: honor prefers-reduced-motion across header.css.
   Disables the looping live-dot pulse on the homepage livestream pill
   (.tb-ls-live-dot) and the footer livestream pill (.footer-stream-dot)
   so users with vestibular sensitivity or motion-sensitivity preferences
   don't get a heartbeat animation in their peripheral vision. The dots
   keep their static glow ring so the "Live" affordance stays visible. */
@media (prefers-reduced-motion: reduce) {
    .tb-ls-live-dot,
    .footer-stream-dot {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────
   CONCEPT C — Homepage section
   "The coast is always open"
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   LIVESTREAM
   "The coast is always open"
   v1.6.8 — Deep Pacific (brand teal) treatment.
   Borderless feed with layered drop shadow; only the LIVE label
   floats above the photo. Timestamp + bottom caption removed.
   CHECK AVAILABILITY relocated to bottom of left column below
   the meta rows. Warm amber type on cool teal field.
───────────────────────────────────────────── */
.tb-livestream-section {
    background: var(--tb-deepwater);
    background-image:
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(98, 177, 174, .25) 0%, transparent 70%),
        linear-gradient(180deg, var(--tb-tide) 0%, var(--tb-deepwater) 60%, #15282A 100%);
    border-top:var(--b-hair) solid rgba(98, 177, 174, .25);
    padding: clamp(56px, 8vw, 96px) var(--pad-x);
    position: relative;
}
/* Subtle warm rim light at the top — brand whisper across the section break */
.tb-livestream-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(216,168,85,.25) 50%, transparent 100%);
    pointer-events: none;
}

.tb-livestream-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 820px);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

/* ── Responsive stacking ──
   At tablet width, shrink the feed column so copy stays readable.
   At mobile, stack with the feed FIRST (the visual hook), copy below
   flowing full-width, meta rows go column layout under 520px. */
@media (max-width: 1024px) {
    .tb-livestream-inner {
        grid-template-columns: minmax(300px, 1fr) minmax(0, 620px);
        gap: clamp(32px, 4vw, 56px);
    }
}
@media (max-width: 1024px) {
    .tb-livestream-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        align-items: start;
    }
    /* Feed goes first on mobile — it's the moment */
    .tb-livestream-section .tb-ls-card { order: 1; }
    .tb-livestream-section .tb-ls-copy { order: 2; max-width: 100%; }
    /* Give the stacked feed breathing room */
    .tb-livestream-section .tb-ls-card-head { padding: 0 0 12px 2px; }
}

/* Copy column — v1.6.8 type colors tuned for deep Pacific bg */
.tb-ls-copy { padding-top: 0; max-width: 480px; }

/* Eyebrow: amber pop on cool blue */
.tb-livestream-section .tb-eyebrow {
    color: var(--tb-goldenhour);
}

/* Body copy: lighter for legibility on deep blue */
.tb-livestream-section .tb-body--light {
    color: rgba(216, 234, 240, .75);
}

/* Headline italic stays brand gold */
.tb-livestream-section .tb-h2--light em {
    color: var(--tb-goldenhour);
}

.tb-ls-rule {
    width: 100%;
    height: 0.5px;
    background: rgba(120, 160, 185, .25);
    margin-bottom: 36px;
}
.tb-livestream-section .tb-rule {
    background: rgba(120, 160, 185, .25);
}
@media (max-width: 1024px) { .tb-ls-rule { display: none; } }

.tb-ls-meta {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}
.tb-ls-meta-row {
    display: flex;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.6;
}
.tb-ls-meta-row dt {
    color: var(--tb-goldenhour);
    font-weight: 400;
    flex-shrink: 0;
    min-width: 80px;
}
.tb-ls-meta-row dd {
    color: rgba(216, 234, 234, .75);
    font-weight: 400;
    margin: 0;
}
/* Narrow screens: stack dt/dd vertically so long dd text doesn't crush */
@media (max-width: 640px) {
    .tb-ls-meta { gap: 14px; }
    .tb-ls-meta-row { flex-direction: column; gap: 3px; }
    .tb-ls-meta-row dt { min-width: 0; }
}

/* Relocated CTA — sits below meta rows in left column, v1.6.8 */
.tb-ls-cta-relocated {
    margin-top: 36px;
    padding-top: 28px;
    border-top:var(--b-hair) solid rgba(98, 177, 174, .2);
}
.tb-ls-cta-relocated .tb-ls-book-link {
    color: var(--tb-goldenhour);
    border-bottom:var(--b-hair) solid rgba(216,168,85,.45);
    font-size: 10px;
    letter-spacing: .26em;
    padding-bottom: 4px;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 400;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tb-ls-cta-relocated .tb-ls-book-link:hover {
    color: var(--tb-parchment);
    border-bottom-color: rgba(216,168,85,.8);
}

/* Stream card — v1.6.8 borderless, shadow goes on frame (not card) so
   the LIVE label above sits clean without inheriting shadow glow. */
.tb-ls-card {
    border: none;
    border-radius: var(--r-card);
    overflow: visible;
    background: transparent;
    box-shadow: none;
    /* Removed sticky: breaks when stacked on mobile, also no longer needed
       since card is no longer chrome-y. */
}

/* Card header bar — clean caption above the photo, no chrome */
.tb-ls-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px 0;
    border-bottom: none;
    background: transparent;
    border-left: none;
    gap: 12px;
}
.tb-ls-card-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tb-ls-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tb-goldenhour);
    font-weight: 400;
    background: transparent;
    border: none;
    padding: 0;
}
.tb-ls-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tb-goldenhour);
    flex-shrink: 0;
    animation: tb-live-pulse 2s ease-in-out infinite;
}
.tb-ls-cam-name {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(196,168,122,.55);
    font-weight: 400;
}
.tb-ls-clock {
    /* v1.6.8: timestamp hidden — label-only head */
    display: none;
}

/* Stream frame — photo with layered drop shadow, floats on teal field */
.tb-ls-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tb-nightfall);
    border-radius: var(--r-img);
    box-shadow:
        0 2px 8px rgba(0,0,0,.25),
        0 30px 80px -20px rgba(0,0,0,.55),
        0 60px 120px -40px rgba(0,0,0,.4);
}
.tb-ls-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Placeholder (shown when no src configured) */
.tb-ls-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--tb-nightfall);
    color: var(--tb-canvas);
}
.tb-ls-placeholder span {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(168,149,110,.5);
    font-weight: 400;
}
.tb-ls-placeholder-link {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tb-canvas);
    border-bottom:var(--b-hair) solid rgba(168,149,110,.35);
    padding-bottom: 1px;
    text-decoration: none;
    transition: color var(--t-fast);
}
.tb-ls-placeholder-link:hover { color: var(--tb-dryglass); }

/* Card footer bar — v1.6.8 removed entirely (PHP no longer renders).
   Kept hidden via CSS as safety in case cached pages still have it. */
.tb-ls-card-foot {
    display: none;
}
.tb-ls-place {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(196,168,122,.5);
    font-weight: 400;
}
.tb-ls-book-link {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tb-goldenhour);
    border-bottom: 1px solid rgba(216,168,85,.45);
    padding-bottom: 2px;
    text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast), letter-spacing var(--t-fast);
    white-space: nowrap;
    font-weight: 400;
}
.tb-ls-book-link:hover {
    color: var(--tb-goldenhour);
    border-bottom-color: rgba(216,168,85,.7);
    letter-spacing: .28em;
}

/* ─────────────────────────────────────────────
   CONCEPT B — Footer brand column inset
   Compact, always-on, every page
───────────────────────────────────────────── */
.footer-stream {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.footer-stream-label {
    display: flex;
    align-items: center;
    gap: 7px;
}
/* v3.2.8: switched from off-brand Tailwind green (#4ADE80) to
   var(--tb-goldenhour) so the footer live-indicator dot matches the
   homepage live-pill (.tb-ls-live-dot) — same warm gold across the
   site. Glow ring updated to match. The red pulse halo from
   tb-live-pulse stays as the "live broadcast" semantic. */
.footer-stream-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tb-goldenhour);
    box-shadow: 0 0 0 3px rgba(216, 168, 85, .22);
    flex-shrink: 0;
    animation: tb-live-pulse 2s ease-in-out infinite;
}
.footer-stream-text {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tb-canvas);
    font-weight: 400;
}
.footer-stream-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border:var(--b-hair) solid rgba(92,84,64,.38);
    border-radius: var(--r-img);
    background: var(--tb-nightfall);
}
.footer-stream-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* v3.2.6: scrim deepened (.72 → .92) and pushed up so the labels sit on
   a controlled dark band instead of fighting whatever's in the bottom of
   the live video frame. Label colors bumped from .65/.38 transparent
   dryglass to ~.95 parchment so they read consistently regardless of
   the camera scene. */
.footer-stream-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(20,16,12,.92) 0%, rgba(20,16,12,.72) 60%, transparent 100%);
    padding: 12px 12px 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
    z-index: 2;
}
.footer-stream-loc {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245,238,216,.95);
    font-weight: 400;
}
.footer-stream-coords {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-size: 9px;
    color: rgba(245,238,216,.72);
    letter-spacing: .04em;
}

/* Responsive: hide footer stream on mobile */
@media (max-width: 640px) {
    .footer-stream { display: none; }
}

/* ── Live clock JS (Concept C) ── */
/* Applied via JS in footer.php wp_footer hook — see below */

/* ── Livestream controls suppressor ──────────────────────────
   The Turing iframe shows player controls on hover (top-left
   expand/PiP buttons, bottom "Live Broadcast" bar, timestamp).
   These live inside a cross-origin iframe so we can't target
   them with CSS directly.

   Fix: a transparent overlay div sits above the iframe,
   intercepting pointer events so hover never reaches Turing's
   player UI. The video plays through visually — 100% unaffected.
   The overlay itself is invisible and non-interactive beyond
   blocking hover. The card footer's "Check Availability" link
   sits outside the frame so it remains fully clickable.
   ─────────────────────────────────────────────────────────── */
.tb-ls-frame-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: default;
    /* Transparent — purely a pointer-events blocker */
    background: transparent;
}

/* Footer stream — same shield for the compact version */
.footer-stream-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: default;
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER v4.3.0 — Ocean Footer (Seaglass preview only)
   Was site-wide v4.2.1 → v4.2.12. v4.3.0 re-scoped to
   body.tb-seaglass-active so the live homepage + interior pages
   revert to the prior earlier-defined .site-footer rules.
   Easy revert (site-wide again): drop the body.tb-seaglass-active
   prefix from both selectors below.
   ═══════════════════════════════════════════════════════════ */
body.tb-seaglass-active .site-footer {
    background: linear-gradient(180deg,
        rgba(27,48,65,0.98) 0%,    /* Abyss */
        rgba(19,21,16,0.99) 100%); /* Nightfall floor */
    border-top: 1px solid rgba(98,177,174,0.32);
    position: relative;
}
/* Pacific horizon line — the "ocean surface" marker */
body.tb-seaglass-active .site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(98,177,174,0.42) 50%,
        transparent 100%);
    pointer-events: none;
}
.ft-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: clamp(48px,6vw,72px) var(--pad-x) clamp(32px,4vw,48px);
}

/* ── Top row: badge + nav ── */
.ft-top {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(48px,5vw,80px);
    margin-bottom: clamp(40px,5vw,56px);
}
@media (max-width: 768px) {
    .ft-top { grid-template-columns: 1fr; }
}

/* ── Badge card ── */
.ft-badge {
    background: linear-gradient(168deg, var(--tb-bark) 0%, var(--tb-floor) 100%);
    border: 1px solid rgba(196,136,48,0.28);
    border-radius: var(--r-card);
    padding: 36px 32px 30px;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(212,188,144,0.06);
}
.ft-badge-owl {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.55;
}
.ft-badge-label {
    font-size: 9px; font-weight: 400;
    letter-spacing: 0.32em;
    color: var(--tb-canvas);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ft-badge-sep {
    width: 56px; height: 1px;
    background: rgba(196,136,48,0.18);
    margin: 0 auto 16px;
}
.ft-badge-recognized {
    font-size: 8px; font-weight: 400;
    letter-spacing: 0.4em;
    color: var(--tb-driftwood);
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ft-badge-name {
    font-family: var(--font-display);
    font-size: 36px; font-weight: 300;
    color: var(--tb-parchment);
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}
.ft-badge-resort {
    font-size: 9px; font-weight: 300;
    letter-spacing: 0.45em;
    color: var(--tb-driftwood);
    text-transform: uppercase;
    margin-bottom: 18px;
}
.ft-badge-tc {
    font-size: 12px; font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--tb-latesun);
    margin-bottom: 10px;
}
.ft-badge-pill {
    display: inline-block;
    font-size: 8px; font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--tb-tungsten);
    text-transform: uppercase;
    border: 1px solid rgba(196,136,48,0.35);
    background: rgba(196,136,48,0.1);
    padding: 6px 20px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
}
.ft-badge-stat {
    font-size: 13px; font-weight: 300;
    color: var(--tb-canvas);
    font-style: italic;
    margin-bottom: 5px;
}
.ft-badge-rank {
    font-size: 8px; font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--tb-tungsten);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ft-badge-stars {
    color: var(--tb-tungsten);
    font-size: 13px;
    letter-spacing: 5px;
    margin-bottom: 12px;
}
.ft-badge-year {
    font-size: 24px; font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--tb-driftwood);
}

/* ── Nav columns ── */
.ft-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px,3vw,40px);
    align-content: start;
}
@media (max-width: 768px) {
    .ft-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ft-nav { grid-template-columns: 1fr; }
}
.ft-nav-col ul {
    list-style: none; padding: 0; margin: 0;
}
.ft-nav-heading {
    font-size: 11px; font-weight: 400;
    letter-spacing: 0.32em;
    color: var(--tb-canvas);
    text-transform: uppercase;
    margin-bottom: 18px;
}
.ft-nav-heading--gap { margin-top: 28px; }
.ft-nav-col a {
    display: block;
    font-size: 14px; font-weight: 300;
    color: rgba(245,238,216,0.55);
    text-decoration: none;
    margin-bottom: 11px;
    transition: color var(--t-fast);
    letter-spacing: 0.02em;
}
.ft-nav-col a:hover { color: var(--tb-parchment); }
.ft-nav-gap { margin-top: 18px; }

/* ── Press bar ── */
.ft-press {
    border-top: 1px solid rgba(196,136,48,0.18);
    padding-top: clamp(24px,3vw,32px);
    margin-bottom: clamp(24px,3vw,32px);
}
.ft-press-label {
    display: block;
    font-size: 11px; font-weight: 400;
    letter-spacing: 0.32em;
    color: var(--tb-driftwood);
    text-transform: uppercase;
    margin-bottom: 20px;
    text-decoration: none;
    transition: color var(--t-fast);
}
.ft-press-label:hover { color: var(--tb-canvas); }
.ft-press-logos {
    display: flex;
    align-items: center;
    gap: clamp(28px,3vw,48px);
    flex-wrap: wrap;
}
.ft-press-logos a {
    text-decoration: none;
    transition: color var(--t-fast);
}
.ft-press-name {
    font-size: 15px;
    color: var(--tb-earth);
    font-weight: 300;
    letter-spacing: 0.04em;
    transition: color var(--t-fast);
}
.ft-press-logos a:hover .ft-press-name { color: var(--tb-canvas); }
.ft-press--italic { font-style: italic; font-weight: 400; font-size: 18px; }
.ft-press--caps { font-weight: 500; font-size: 14px; letter-spacing: 0.08em; }
.ft-press--sm { font-size: 13px; }

/* ── Bottom bar ── */
.ft-bottom {
    border-top: 1px solid rgba(196,136,48,0.18);
    padding-top: clamp(20px,2vw,28px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.ft-bottom-left {
    font-size: 11px; font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--tb-driftwood);
    line-height: 1.8;
}
.ft-bottom-right {
    font-size: 8px; font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--tb-earth);
    text-align: right;
    line-height: 2.2;
    text-transform: uppercase;
}
@media (max-width: 480px) {
    .ft-bottom { flex-direction: column; align-items: flex-start; }
    .ft-bottom-right { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════
   AWARD STRIP v2.17.5
   ═══════════════════════════════════════════════════════════ */
.tb-award-strip {
    background: linear-gradient(135deg, var(--tb-bark) 0%, var(--tb-floor) 100%);
    border-top: 1px solid rgba(196,136,48,0.22);
    border-bottom: 1px solid rgba(196,136,48,0.12);
}
.tb-as-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 22px var(--pad-x);
    display: flex; align-items: center; justify-content: center;
    gap: clamp(20px, 3vw, 44px);
    flex-wrap: wrap;
}
/* v3.6.3: switched to a white SVG (tripadvisor-white.svg). White on
   the bark-gradient background reads as a clean canvas brand mark;
   nudged opacity .5 → .72 to keep weight without flattening the
   wordmark. SVG is crisp at any display size, no DPR concerns. */
.tb-as-owl { width: 64px; height: 64px; object-fit: contain; opacity: 0.72; flex-shrink: 0; }
.tb-as-sep { width: 1px; height: 32px; background: rgba(196,136,48,0.2); flex-shrink: 0; }
.tb-as-block { display: flex; flex-direction: column; align-items: center; gap: 1px; }
/* v3.4.0: 8px → 10px for the Tripadvisor "Tripadvisor" wordmark. */
.tb-as-label { font-size: 10px; font-weight: 400; letter-spacing: 0.3em; color: var(--tb-canvas); text-transform: uppercase; }
.tb-as-title { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 26px); font-weight: 300; color: var(--tb-parchment); letter-spacing: 0.02em; white-space: nowrap; }
.tb-as-title em { font-style: italic; color: var(--tb-goldenhour); }
/* v3.7.0 — Jenna feedback (A2): pill enlarged to read alongside the
   "Travelers' Choice" title at near-equal weight instead of looking
   like a subtitle. 7px / 4×14 padding → 10px / 7×20 padding. */
.tb-as-pill { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; color: var(--tb-tungsten); text-transform: uppercase; border: 1px solid rgba(196,136,48,0.45); background: rgba(196,136,48,0.12); padding: 7px 20px; border-radius: var(--r-pill); white-space: nowrap; }
/* v3.7.0 — A3: Top 1% / 2022 & 2025 tagline beneath the pill. */
.tb-as-pill-block { gap: 6px; }
.tb-as-pill-meta { font-size: 10px; font-weight: 400; color: var(--tb-canvas); font-style: italic; letter-spacing: 0.04em; white-space: nowrap; }
.tb-as-hero { font-family: var(--font-display); font-size: clamp(16px, 2vw, 22px); font-weight: 400; color: var(--tb-parchment); letter-spacing: 0.02em; white-space: nowrap; }
.tb-as-hero strong { color: var(--tb-goldenhour); font-weight: 500; }
.tb-as-stars { color: var(--tb-tungsten); font-size: 11px; letter-spacing: 4px; }
.tb-as-decade { font-size: 10px; font-weight: 300; color: var(--tb-canvas); font-style: italic; letter-spacing: 0.04em; white-space: nowrap; }
@media (max-width: 768px) {
    .tb-as-inner { padding: 16px var(--pad-x); gap: 16px; }
    .tb-as-hero { font-size: 18px; }
}

/* v3.6.3 — Mobile badge treatment.
   Below 640px the horizontal strip wraps into an awkward 2-row layout
   (owl + Travelers' Choice + pill on row 1, then #1 Hotel + stars on
   row 2). Borrow the .ft-badge visual language from the old footer
   (centered card, gradient bg, rounded edge, gold-tint stroke) and
   stack everything vertically so it reads as a deliberate award badge
   instead of a broken strip. The strip outer goes transparent; the
   inner becomes the card. Desktop layout (≥641px) is unchanged. */
@media (max-width: 640px) {
    .tb-award-strip {
        background: transparent;
        border-top: none;
        border-bottom: none;
        padding: 28px var(--pad-x);
    }
    .tb-as-inner {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        max-width: 320px;
        padding: 30px 24px 26px;
        background: linear-gradient(168deg, var(--tb-bark) 0%, var(--tb-floor) 100%);
        border: 1px solid rgba(196,136,48,0.28);
        border-radius: var(--r-card);
        box-shadow: 0 12px 48px rgba(0,0,0,0.35),
                    inset 0 1px 0 rgba(212,188,144,0.06);
    }
    .tb-as-owl {
        display: block;
        width: 64px; height: 64px;
        margin-bottom: 4px;
        opacity: 0.78;
    }
    .tb-as-sep    { display: none; }
    .tb-as-block  { gap: 4px; }
    .tb-as-title  { font-size: 24px; white-space: normal; text-align: center; }
    .tb-as-pill   {
        display: inline-block;
        font-size: 7.5px;
        letter-spacing: .22em;
        padding: 5px 16px;
        margin-top: 4px;
    }
    .tb-as-hero {
        font-size: 18px;
        white-space: normal;
        text-align: center;
        margin-top: 10px;
    }
    .tb-as-stars  { font-size: 13px; letter-spacing: 5px; margin-top: 4px; }
    .tb-as-decade {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        text-align: center;
    }
}