/**
 * Domino 2026 — layout. Container, grid, header/footer shells, section rhythm.
 */

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2rem, var(--container-wide)); margin-inline: auto; }
.container--measure { max-width: var(--measure); }
.container--article { max-width: var(--article-measure); }

/* Section rhythm: 48-56 mobile, 64-80 tablet, 96-128 desktop */
.section { padding-block: var(--s48); }
@media (min-width: 48rem) { .section { padding-block: var(--s64); } }
@media (min-width: 64rem) { .section { padding-block: var(--s96); } }

/* Header: deep navy, 78-84px desktop, one hairline, restrained shadow.
 * Plain premium text nav — no capsules, no boxes, no pills. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--domino-sea); color: #fff;
  min-height: var(--header-h-mobile);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}
/* Header surface: deep navy w/ blur, hairline, restrained sticky shadow. */
.site-header {
  background: rgba(7, 34, 49, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Desktop: real 3-zone GRID (brand | centered nav | actions).
 * 1280px container, 76-80px bar. Grid (not flex) guarantees the center
 * zone truly centers instead of being pushed by brand/actions widths. */
@media (min-width: 64rem) {
  .site-header { min-height: 5rem; }
  .site-header__inner {
    min-height: 5rem;
    width: min(100% - 3rem, 80rem);
  }
}
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(11.25rem, 13.75rem) 1fr auto;
  align-items: center; gap: var(--s24);
  min-height: inherit; padding-block: var(--s8);
}
/* Header order: brand | nav | language+book. */
.site-header__branding { margin-right: 0; min-width: 0; }
.site-nav { justify-self: center; min-width: 0; }
.site-header__actions { justify-self: end; }
/* Intentional logo sizing: CSS-constrained, aspect preserved, never pushes
 * nav off the bar. Bumped from the undersized 40/46px to a present 56/64px.
 * Footer overrides below keep it subordinate there. */
.custom-logo-link { display: inline-flex; max-width: 15rem; }
.custom-logo { width: auto; max-width: 100%; height: 3.5rem; }
@media (min-width: 64rem) {
  /* Desktop brand presence: ~145-170px wide, aspect kept, bar stays 78-84px. */
  .site-header__branding .custom-logo-link { max-width: 10.625rem; }
  .site-header__branding .custom-logo { height: auto; max-height: 3.375rem; }
}
.site-footer .custom-logo-link { max-width: 10rem; }
.site-footer .custom-logo { height: 2.75rem; }
.site-title { color: #fff; text-decoration: none; font-family: var(--font-display); font-size: 1.25rem; }
.site-header__actions { display: flex; align-items: center; gap: var(--s12); }
/* BOOK CTA: the ONLY strong button in the header. 44-46px, 10px radius,
 * brand primary fill, generous padding. Language stays a quiet utility. */
.site-header__actions .btn--book {
  order: 2; min-height: 2.875rem;
  padding: 0.625rem 1.625rem; border-radius: 10px;
  position: relative; isolation: isolate;
  background-clip: padding-box;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background-color 0.18s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
/* Gold light that orbits the CTA border: keeps the button legible on bright or busy hero photos. */
@property --domino-cta-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.site-header__actions .btn--book::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  padding: 2px; border-radius: 12px; pointer-events: none;
  background: conic-gradient(from var(--domino-cta-angle), rgba(198, 161, 59, 0.35) 0deg, #F3E4B8 50deg, #C6A13B 95deg, rgba(198, 161, 59, 0.35) 150deg, rgba(198, 161, 59, 0.35) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: domino-cta-orbit 4.5s linear infinite;
}
.site-header__actions .btn--book:hover,
.site-header__actions .btn--book:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(198, 161, 59, 0.18);
}
@keyframes domino-cta-orbit { to { --domino-cta-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .site-header__actions .btn--book::before { animation: none; background: linear-gradient(135deg, #9E7B2A, #F3E4B8 50%, #C6A13B); }
  .site-header__actions .btn--book:hover, .site-header__actions .btn--book:focus-visible { transform: none; }
}
.site-header__actions .lang-switcher { order: 1; opacity: 1; }
/* Drawer Book CTA: hidden on desktop/tablet (header CTA owns it), shown as
 * the prominent first action inside the mobile menu on narrow screens. */
.site-nav .drawer-book { display: none; }
@media (max-width: 63.99rem) {
  /* Mobile bar = Brand + hamburger ONLY, at every mobile width.
   * Language lives in the drawer; booking lives in drawer + quick bar.
   * The header actions cluster never renders on mobile. */
  .site-header__inner { gap: var(--s8); }
  .site-header__actions { display: none; }
  .site-nav.is-open #primary-menu { padding-top: var(--s16); }
  /* Drawer extras render ONLY inside the OPEN drawer (rules live with the
   * containment block below). The nav element sits in the header flow (it
   * owns the toggle), so unscoped display:block leaked the drawer Book CTA
   * into the persistent bar (mobile bug). */
}
.site-nav__toggle {
  display: inline-flex; align-items: center; gap: var(--s8);
  background: none; border: 0; color: #fff; min-height: 2.75rem; cursor: pointer;
}
.site-nav__toggle-box { display: inline-flex; flex-direction: column; gap: 5px; }
.site-nav__toggle-box span { display: block; width: 22px; height: 2px; background: #fff; }
/* Mobile header: Brand | toggle only. Label hidden, switcher + header CTA
 * leave the bar (drawer top + quick bar own those actions). 64-72px row. */
.brand-mobile { display: none; }
@media (max-width: 63.99rem) {
  .site-header__inner {
    min-height: 4.25rem; max-height: 4.25rem; overflow: hidden;
    display: flex; align-items: center; gap: var(--s8);
  }
  /* The nav is inline in the bar: only the toggle may paint collapsed.
   * Menu, drawer extras and submenus stay out of the bar until .is-open.
   * margin-left:auto pins the toggle to the far right edge (brand left). */
  .site-nav { margin-left: auto; }
  .site-nav #primary-menu,
  .site-nav .drawer-book,
  .site-nav .drawer-lang,
  .site-nav .sub-menu { display: none; }
  .site-nav.is-open #primary-menu { display: block; }
  .site-nav.is-open .drawer-book { display: block; margin-bottom: var(--s16); }
  .site-nav.is-open .drawer-book .btn { width: 100%; }
  .site-nav.is-open .drawer-lang { display: block; margin-bottom: var(--s16); }
  .site-nav .site-nav__toggle { display: inline-flex; margin-left: 0; padding: var(--s8) var(--s12); }
  .brand-desktop { display: none; }
  .brand-mobile { display: inline-flex; }
  /* (actions cluster hidden wholesale above — no per-item rules needed) */
  .site-nav__toggle .site-nav__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .custom-logo--mobile, .site-header__branding .custom-logo { height: 2.875rem; max-height: 3rem; }
}
/* Drawer top: language trigger as first row (full native name).
 * Dropdown flows in-document inside the drawer (no absolute overlay —
 * the drawer already scrolls and is position:fixed itself). */
.drawer-lang { display: none; }
@media (max-width: 63.99rem) {
  .drawer-lang .lang-switcher__trigger { width: 100%; justify-content: space-between; }
  .drawer-lang .lang-switcher__list {
    position: static; box-shadow: none; margin-top: var(--s8);
    max-height: none;
  }
  .drawer-lang .lang-switcher.is-open .lang-switcher__list { display: block; }
}
@media (min-width: 64rem) {
  .site-nav__toggle { display: none; }
  /* Drawer-only disclosure buttons must never paint on desktop, even if a
   * stale/cached menu.js injected them before the matchMedia cleanup ran. */
  .site-nav .submenu-toggle,
  .site-nav .menu-parent-row { display: none; }
  .site-nav li > a { display: inline-flex; }
}
.site-nav ul { list-style: none; padding: 0; }
@media (max-width: 63.99rem) {
  /* Hard cut at 1024px: full drawer below, full grid above.
   * Never progressively crush the desktop row. Mobile bar keeps
   * Brand | hamburger ONLY (actions cluster hidden wholesale). */
  .site-nav { order: 4; }
  .site-nav #primary-menu { display: none; }
  .site-nav.is-open #primary-menu {
    display: block; position: fixed; inset: var(--header-h-mobile) 0 auto 0;
    max-height: calc(100vh - var(--header-h-mobile)); overflow-y: auto;
    background: var(--domino-sea); padding: var(--s24) var(--s16) var(--s32);
  }
  .site-nav.is-open #primary-menu a { display: block; padding: var(--s12) var(--s8); color: rgba(255, 255, 255, 0.88); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
  .site-nav.is-open #primary-menu a:hover { color: #fff; }
  /* Mobile submenu: collapsed until disclosed (JS accordion). Parents stay
   * reachable links; the disclosure button owns expand/collapse. */
  .site-nav .sub-menu { display: none; padding-left: var(--s16); }
  .site-nav .is-sub-open > .sub-menu { display: block; }
  /* Drawer rows: full-width, 48-52px, translucent separators, no boxes. */
  .site-nav.is-open #primary-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .site-nav.is-open #primary-menu > li:last-child { border-bottom: 0; }
  .site-nav .submenu-toggle {
    background: none; border: 0; color: rgba(255, 255, 255, 0.75);
    min-width: 2.75rem; min-height: 3rem;
    font-size: 1rem; line-height: 1; cursor: pointer; margin-left: var(--s8);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .site-nav .submenu-toggle--drawer span {
    width: 0.5rem; height: 0.5rem; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .site-nav .submenu-toggle span { display: inline-block; transition: transform 0.15s ease; }
  .site-nav .is-sub-open > .menu-parent-row .submenu-toggle span { transform: rotate(180deg); }
  .site-nav .menu-parent-row { display: flex; align-items: center; }
  .site-nav .menu-parent-row > a { flex: 1; }
}
@media (min-width: 64rem) {
  /* Plain premium text navigation: no capsule, no boxes, no fills. */
  .site-nav #primary-menu {
    display: flex; gap: 0; align-items: stretch; justify-content: center;
    border: 0; border-radius: 0; background: none; padding: 0;
  }
  .site-nav #primary-menu > li { position: relative; display: flex; align-items: stretch; }
  .site-nav #primary-menu > li > a {
    position: relative;
    color: rgba(255, 255, 255, 0.88); text-decoration: none;
    font-size: 1rem; font-weight: 500; letter-spacing: 0.02em;
    display: inline-flex; align-items: center; gap: var(--s4);
    min-height: 2.75rem; padding: var(--s8) 0.8125rem;
    white-space: nowrap;
  }
  .site-nav #primary-menu > li > a { border-radius: 0; transition: color 0.15s ease; }
  .site-nav #primary-menu > li > a:hover { color: #fff; background: none; }
  /* Gold underline: hover AND current. Hairline item separators keep the
   * light bordered rhythm without boxes or fills. */
  .site-nav #primary-menu > li > a::after {
    content: ""; position: absolute; left: 0.8125rem; right: 0.8125rem; bottom: 4px;
    height: 2px; border-radius: 2px; background: var(--domino-gold);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.18s ease;
  }
  .site-nav #primary-menu > li > a:hover::after,
  .site-nav #primary-menu > li.current-menu-item > a::after,
  .site-nav #primary-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }
  .site-nav #primary-menu > li + li { border-left: 1px solid rgba(255, 255, 255, 0.07); }
  .site-nav #primary-menu > li.current-menu-item > a,
  .site-nav #primary-menu > li.current-menu-ancestor > a { color: #fff; }
  /* Subtle chevron for parents (replaces the old square disclosure box).
   * Pure CSS marker on the link — keyboard/focus behaviour unchanged. */
  .site-nav #primary-menu > li.menu-item-has-children > a { padding-right: var(--s8); }
  .site-nav #primary-menu > li.menu-item-has-children > a::before {
    content: ""; order: 2; flex: none;
    width: 0.5rem; height: 0.5rem; margin-left: var(--s4);
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: 0.75;
  }
  /* Submenu: hidden by default, opens on hover AND keyboard focus. */
  .site-nav .sub-menu {
    display: none;
    position: absolute; top: calc(100% + var(--s4)); left: 0; z-index: 120;
    width: 16rem; max-width: 17.5rem;
    background: #0D2839;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: var(--s8);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  }
  .site-nav li:hover > .sub-menu,
  .site-nav li:focus-within > .sub-menu { display: block; }
  .site-nav .sub-menu a {
    display: block; color: rgba(255, 255, 255, 0.88); text-decoration: none;
    font-weight: 500;
    padding: var(--s8) var(--s12); border-radius: 6px;
    min-height: 2.75rem;
  }
  .site-nav .sub-menu a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  /* Deeper levels open sideways without shifting header layout. */
  .site-nav .sub-menu .sub-menu { top: 0; left: 100%; }
}

/* Language switcher: ONE compact trigger showing the current language.
 * Dropdown holds all provider languages (scales to 10+). Hidden entirely
 * when fewer than 2 languages exist (part renders nothing server-side).
 * No flags, no fake URLs, no hardcoded language list. */
.lang-switcher { position: relative; }
.lang-switcher__trigger {
  display: inline-flex; align-items: center; gap: var(--s4);
  background: none; border: 0; color: rgba(255, 255, 255, 0.88);
  border-radius: 0;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em;
  min-height: 2.75rem; padding: var(--s8) var(--s4); cursor: pointer;
  white-space: nowrap;
}
.lang-switcher__trigger:hover { color: #fff; }
.lang-switcher__globe { font-size: 0.9375rem; line-height: 1; }
.lang-switcher__chevron {
  width: 0.45rem; height: 0.45rem; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.8;
}
.lang-switcher__trigger[aria-expanded="true"] .lang-switcher__chevron {
  transform: translateY(1px) rotate(225deg);
}
.lang-switcher__list {
  display: none;
  position: absolute; top: calc(100% + var(--s8)); right: 0; z-index: 130;
  min-width: 12rem; max-height: 60vh; overflow-y: auto;
  list-style: none; padding: var(--s8); margin: 0;
  background: var(--domino-sea);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-field);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.lang-switcher.is-open .lang-switcher__list { display: block; }
.lang-switcher__list a {
  color: rgba(255, 255, 255, 0.88); text-decoration: none;
  font-size: 0.875rem; font-weight: 500;
  padding: var(--s8) var(--s12); min-height: 2.75rem;
  display: flex; align-items: center; gap: var(--s8);
  border-radius: var(--radius-field); white-space: nowrap;
}
.lang-switcher__list a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.lang-switcher__list a[aria-current="true"] { color: #fff; font-weight: 700; }
.lang-switcher__list a[aria-current="true"] .lang-switcher__code { color: var(--domino-gold); }
.lang-switcher__code { font-weight: 700; letter-spacing: 0.06em; font-size: 0.8125rem; min-width: 2rem; }
/* Footer sits on dark sea: compact trigger + dropdown reuse the header
 * treatment (light text every state). Inline list styles retired with the
 * old horizontal switcher. */
.site-footer .lang-switcher__trigger { border-color: rgba(255, 255, 255, 0.3); }

/* Footer */
/* Short-page layout: footer pins to viewport bottom on thin pages, flows
 * naturally after long content. Flex column on body; main grows. Verified
 * against fixed header, sticky bar and consent (all position:fixed/sticky,
 * unaffected by body flex). Admin bar adds its own offset above body. */
.site-footer { background: var(--domino-sea); color: #fff; padding-block: var(--s48); flex-shrink: 0; margin-top: auto; }
.site-footer a { color: #fff; }
.site-footer__grid { display: grid; gap: var(--s32); }
/* Three columns: brand, navigation, trust. Each column is a widget area and
 * falls back to built-in markup, so the grid is always balanced — the trust
 * column is always present, which is why there is no :has() collapse rule for
 * missing nav any more. */
@media (min-width: 56rem) {
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1.15fr; align-items: start; }
}
.site-footer__nap { font-style: normal; }
.site-footer__nav ul, .site-footer__legal ul { list-style: none; padding: 0; display: grid; gap: var(--s8); }
.site-footer__copy { color: rgba(255, 255, 255, 0.72); font-size: 0.875rem; }
.social-links { list-style: none; padding: 0; display: flex; gap: var(--s16); }

/* Breadcrumbs */
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s8); font-size: 0.875rem; }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--s8); color: var(--domino-muted); }

/* Sticky mobile booking bar */
/* Sticky booking bar: hidden by default on all viewports; the RESPONSIVE
 * layer decides visibility (mobile-first booking), JS only toggles the
 * hidden attribute for behavioural state (scroll/consent/keyboard). */
.sticky-book {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: var(--s8) var(--s16) calc(var(--s8) + env(safe-area-inset-bottom));
  background: rgba(10, 34, 49, 0.96);
  backdrop-filter: blur(8px);
}
.sticky-book[hidden] { display: none; }
/* Desktop and wide tablets never show the thumb bar — the header Book CTA
 * owns that viewport. No server-side device detection involved. */
@media (min-width: 48rem) {
  .sticky-book { display: none; }
}
.sticky-book__btn { width: 100%; }
.sticky-book__dates { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.85; }

/* Consent */
.consent {
  position: fixed; left: var(--s16); right: var(--s16); bottom: var(--s16); z-index: 120;
  background: var(--domino-card); border: 1px solid var(--domino-line);
  border-radius: var(--radius-card); padding: var(--s16);
  box-shadow: 0 12px 40px rgba(10, 34, 49, 0.22);
}
.consent[hidden] { display: none; }
.consent__actions { display: flex; gap: var(--s12); margin-top: var(--s12); flex-wrap: wrap; }

/* Pass 05: transparent→solid overlay header on accommodation hero pages.
 * The header floats over the hero (fixed, out of flow so the hero reaches
 * the very top) and gains the solid navy surface once the hero scrolls past
 * (JS toggles .is-solid via IntersectionObserver). A top scrim keeps the
 * light nav/logo readable over photography while transparent. */
.has-hero-header .site-header { position: fixed; left: 0; right: 0; top: 0; }
.site-header--overlay {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; border-bottom-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header--overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 18, 27, 0.55), rgba(5, 18, 27, 0));
  opacity: 1; transition: opacity 0.3s ease;
}
.site-header--overlay.is-solid {
  background: rgba(7, 34, 49, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header--overlay.is-solid::before { opacity: 0; }
/* Open mobile drawer forces the solid surface (no transparent bar over the
 * solid drawer panel). */
.site-header--overlay:has(.site-nav.is-open) {
  background: rgba(7, 34, 49, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.site-header--overlay:has(.site-nav.is-open)::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .site-header--overlay, .site-header--overlay::before { transition: none; }
}