/* Site accent + fixed parallax bands. Accent colour is set once here. */
:root { --accent: #a24e2b; --accent-light: #d68b62; }

/* --- accent details, used sparingly --- */
.stay-group-head .eyebrow-dark, .section-narrow .eyebrow-dark { color: var(--accent); }
.stay-group-head h2 { position: relative; padding-bottom: 16px; }
.stay-group-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 2px; background: var(--accent); }
.room { border-top: 2px solid transparent; }
.room:hover { border-top-color: var(--accent); }
.room-btn:hover { background: var(--accent); }
.room-price-single { color: var(--accent); }
.pkg-cta:hover { color: var(--accent); }
.stay-tag { background: color-mix(in srgb, var(--accent) 12%, transparent); color: color-mix(in srgb, var(--accent) 80%, #3a3a3a); }
.feature h4 { position: relative; padding-left: 14px; }
.feature h4::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 4px; height: 0.8em; background: var(--accent); }
.stay-feature-body .eyebrow { color: var(--accent); }
a { color: var(--accent); }
a:hover { color: color-mix(in srgb, var(--accent) 70%, var(--charcoal)); }
.nav-links a, .nav-dropdown a, .footer a, .nav-brand, .pkg-cta, .room-btn { color: inherit; }
.btn-primary, .btn-primary:hover { color: var(--cream); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-on-dark { color: var(--cream); }
.footer a:hover { color: var(--accent); }

/* --- fixed parallax band --- */
.stay-parallax { position: relative; height: 62vh; min-height: 380px; clip-path: inset(0); overflow: hidden; }
.stay-parallax-inner { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; }
.stay-parallax-inner image-slot { display: block; width: 100%; height: 100%; }
.stay-parallax::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,40,30,.55), rgba(28,40,30,.25) 45%, rgba(28,40,30,.6)); z-index: 1; pointer-events: none; }
.stay-parallax-quote { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0 30px; pointer-events: none; }
.stay-parallax-quote .eyebrow { color: var(--accent-light, var(--gold)); }
.stay-parallax-quote p { font-family: var(--font-head); font-style: italic; font-size: clamp(1.5rem, 3.2vw, 2.4rem); color: var(--cream); line-height: 1.35; max-width: 22ch; }
@media (max-width: 800px) { .stay-parallax { height: 48vh; } }

/* panoramic band: static, full width, nothing cropped */
.stay-band-wide { position: relative; width: 100%; overflow: hidden; }
.stay-band-wide .band-move { position: relative; width: 100%; aspect-ratio: 1000 / 417; }
.stay-band-wide image-slot { display: block; width: 100%; height: 100%; }

/* --- nav colour shift on scroll --- */
.nav { transition: background .35s ease, border-color .35s ease; }
.nav.is-scrolled { background: rgba(74, 103, 65, 0.94); border-bottom-color: rgba(255,255,255,.14); }
.nav.is-scrolled .nav-links > li > a, .nav.is-scrolled .nav-brand { color: var(--cream); }
.nav.is-scrolled .nav-links > li > a:hover, .nav.is-scrolled .nav-links > li > a.is-active { color: var(--accent-light); }
.nav.is-scrolled .nav-links > li > a::after { background: var(--accent-light); }
.nav.is-scrolled .nav-links li.has-dropdown > a::before { border-top-color: var(--cream); }
.nav.is-scrolled .lang-toggle { border-color: rgba(245,240,232,.35); }
.nav.is-scrolled .lang-toggle button { color: rgba(245,240,232,.7); }
.nav.is-scrolled .lang-toggle button.is-active { background: var(--gold); color: var(--forest-2); }
.nav.is-scrolled .btn-primary { background: var(--accent); border-color: var(--accent); }
.nav.is-scrolled .btn-primary:hover { background: var(--cream); border-color: var(--cream); color: var(--forest-2); }
.nav.is-scrolled .nav-toggle span { background: var(--cream); }

/* darker text on button hover */
.btn-primary:hover { color: #f7efe4; }
.btn-ghost:hover, .pkg-cta:hover { color: color-mix(in srgb, var(--accent) 45%, #1d2a1e); }
/* outline buttons on light backgrounds fill gold on hover, like .btn-on-dark */
.btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--forest); }
/* gold buttons hover to the same bronze as the Boka button */
.btn-gold:hover { background: color-mix(in srgb, var(--accent) 88%, #2a1408); border-color: color-mix(in srgb, var(--accent) 88%, #2a1408); color: #f7efe4; }
.room-btn:hover { color: var(--cream); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #2a1408); border-color: color-mix(in srgb, var(--accent) 88%, #2a1408); }

/* language toggle hover */
.lang-toggle button:hover { color: var(--accent); }
.lang-toggle button.is-active:hover { color: var(--cream); background: color-mix(in srgb, var(--forest) 80%, #000); }
.nav.is-scrolled .lang-toggle button:hover { color: var(--gold); }
.nav.is-scrolled .lang-toggle button.is-active:hover { background: color-mix(in srgb, var(--gold) 80%, #fff); color: var(--forest-2); }