/* Cordiant Website Widget — layout-only styles.
 * Visual skin (buttons, typography, colors) comes from the host site's CSS.
 * Everything here uses the .cw- prefix to avoid collisions. */

/* --- Hero slot: button fills its slot width on mobile ------------------ */
/* `<div data-cordiant-slot="hero-cta" class="cordiant-slot">` is a block
 * container, but its `<a class="btn">` child is `inline-block` and only
 * takes its natural width. On desktop the hero CTA group is a horizontal
 * flex row and the natural width is correct. On mobile the brochure
 * stacks the group vertically (`align-items: stretch`) but the inline
 * anchor doesn't honor it. Make the anchor block-level full-width on
 * narrow viewports so the stretch layout works. */
@media (max-width: 480px) {
  [data-cordiant-slot="hero-cta"] {
    display: block;
    width: 100%;
  }
  [data-cordiant-slot="hero-cta"] > a,
  [data-cordiant-slot="hero-cta"] > .btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* --- iOS Safari phone-number auto-link reset -------------------------- */
/* iOS Safari auto-wraps phone numbers in `<a href="tel:…">` tags styled
 * with the default link color (blue). We don't want that — phone numbers
 * embedded in body copy should inherit the surrounding text color.
 * Disable the detection with the meta tag (added per-page), and as a
 * belt-and-braces fallback, force any iOS-injected `<a x-apple-data-
 * detectors>` wrappers to inherit color so they don't appear blue.
 *
 * IMPORTANT: only target Apple's data-detector wrappers, NOT every
 * `a[href^="tel:"]`. Brochures intentionally use `<a class="site-footer__
 * link" href="tel:…">` for the phone number in the footer; that anchor
 * already has the right color via its class. Overriding `color: inherit`
 * on all `tel:` links makes the footer phone number drift from the other
 * footer links. */
a[x-apple-data-detectors],
a[x-apple-data-detectors]:visited,
a[x-apple-data-detectors]:hover,
a[x-apple-data-detectors]:focus,
a[x-apple-data-detectors]:active {
  color: inherit !important;
  text-decoration: none !important;
  cursor: text;
  pointer-events: none;
}

/* --- Hero tagline / eyebrow: solid badge style ------------------------- */
/* Brochures style `.hero__tagline` (index) and `.page-hero__eyebrow` (other
 * pages) as plain gold-accent uppercase text inside the hero image. Replace
 * with a solid badge: primary background, white text, sharp corners. */
.hero__tagline,
.page-hero__eyebrow {
  display: inline-block !important;
  padding: 6px 14px;
  background: var(--color-primary) !important;
  color: var(--color-on-primary, #fff) !important;
  border-radius: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
}
/* Brochures style anchor-buttons (`<a class="btn btn--cta">`, etc.) but the
 * underlying browser default underline still surfaces in some contexts
 * (focus, hover on certain pages). Strip it universally across every
 * button variant and across every state. */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited,
.btn--cta,
.btn--cta:hover,
.btn--cta:focus,
.btn--cta:active,
.btn--cta:visited,
.btn--primary,
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active,
.btn--primary:visited,
.btn--secondary,
.btn--secondary:hover,
.btn--secondary:focus,
.btn--secondary:active,
.btn--secondary:visited,
.btn--cta-dark,
.btn--cta-dark:hover,
.btn--cta-dark:focus,
.btn--cta-dark:active,
.btn--cta-dark:visited,
.cw-strip__btn,
.cw-strip__btn:hover,
.cw-strip__btn:focus,
.cw-strip__btn:active,
.cw-strip__btn:visited {
  text-decoration: none !important;
}

/* --- Demo watermark suppression --------------------------------------- */
/* The CORDIANT DEMO watermark element was removed from every page except
 * index.html (root + 12 locales). Defensive `display: none` here catches:
 *   1. Cached HTML in user browsers / CDNs that still have the element.
 *   2. Any future page that accidentally re-introduces the markup.
 * `html:not(.cordiant-keep-watermark)` lets the index pages opt-in via a
 * class on `<html>` — see the per-index injection below. */
html:not(.cordiant-keep-watermark) .demo-watermark {
  display: none !important;
}

/* --- Discover FAB position ---------------------------------------------- */
/* Each brochure page sets `.discover-fab { bottom: 52px }` (desktop) and
 * `bottom: 48px` (mobile) inline. That clearance exists so the FAB sits
 * above the ~36px tall demo watermark on index.html. Pages that no longer
 * ship the watermark can drop the FAB closer to the bottom edge. The
 * index pages keep the current position via `.cordiant-keep-watermark`. */
html:not(.cordiant-keep-watermark) .discover-fab {
  bottom: 24px !important;
}
@media (max-width: 768px) {
  html:not(.cordiant-keep-watermark) .discover-fab {
    bottom: 20px !important;
  }
}

/* --- Footer clearance for FAB + demo-watermark ------------------------- */
/* The Discover FAB (`bottom: 52px`, `bottom: 48px` on mobile) and the demo
 * watermark (`bottom: 0`, ~36px tall) both stack at the bottom-right with
 * `position: fixed`. Without bottom padding on the site footer, the last
 * row of footer links sits underneath these fixed elements and can't be
 * tapped on phones. This padding pushes the page's last scrollable content
 * above both layers on every brochure page. */
.site-footer {
  padding-bottom: 140px !important;
}
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: 120px !important;
  }
}

/* --- Discover sheet — iOS Safari dvh fix ------------------------------- */
/* Brochures use `max-height: 70vh`; iOS Safari's vh includes the URL bar
 * so the sheet overflows the visible area when the bar hides. Override to
 * dvh (dynamic) with a vh fallback. Also enable touch momentum scrolling. */
.discover-sheet {
  max-height: 70vh;
  max-height: 70dvh;
  -webkit-overflow-scrolling: touch;
}

/* On index pages the CORDIANT DEMO watermark sits at the bottom (~36px tall
 * with padding). Lift the discover sheet above it so its last items don't
 * disappear behind the watermark. Non-index pages have no watermark, so the
 * default `bottom: 0` is fine. */
html.cordiant-keep-watermark .discover-sheet {
  bottom: 44px;
  max-height: calc(70dvh - 44px);
}
@media (max-width: 768px) {
  html.cordiant-keep-watermark .discover-sheet {
    bottom: 40px;
    max-height: calc(70dvh - 40px);
  }
}

/* --- Mobile: prevent iOS form input auto-zoom -------------------------- */
/* iOS Safari auto-zooms when an input/select with < 16px font-size gains
 * focus and doesn't un-zoom afterwards. Lift to 16px on phones to suppress
 * the zoom while keeping the design's 15px on tablets/desktop. */
@media (max-width: 768px) {
  .form-input,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* --- Strip wrappers ----------------------------------------------------- */
.cw-strip-wrapper {
  position: relative;
  width: 100%;
  z-index: 50;
}
.cw-strip-wrapper--top {
  /* Stays in normal flow at the top of body — scrolls away with the page.
   * Only the .site-nav (sticky) pins to the top once the strip scrolls off. */
  position: relative;
  z-index: 50;
}

/* --- Generic strip layout ---------------------------------------------- */
.cw-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--color-surface-warm, #FAF6F0);
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 14px;
  color: var(--color-text-primary, #1A1A1A);
}
.cw-strip--bottom {
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  border-bottom: none;
}
.cw-strip__message {
  flex: 1;
  min-width: 0;
}
.cw-strip__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-strip__btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-primary, #4C0D16);
  border: 1px solid var(--color-primary, #4C0D16);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cw-strip__btn:hover {
  background: var(--color-primary, #4C0D16);
  color: var(--color-on-primary, #fff);
}
.cw-strip__btn--ghost {
  border-color: var(--color-border-subtle, rgba(0,0,0,0.2));
  color: var(--color-text-primary, #1A1A1A);
}

/* --- Sara-style bottom strip ------------------------------------------- */
.cw-strip--sara {
  align-items: flex-start;
  padding: 20px 24px;
  gap: 16px;
}
.cw-strip__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-base, #fff);
}
.cw-strip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cw-strip__body {
  flex: 1;
  min-width: 0;
}
.cw-strip__headline {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cw-strip__copy {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary, #555);
}
.cw-strip__cta {
  flex: 0 0 auto;
}

/* --- Reservation card bottom strip ------------------------------------- */
/* Polished reservation summary mirroring the SPA's ReservationCard primitive.
 * Layout: [calendar icon] [confirmation kicker / room headline / meta chips] [CTA].
 * Meta uses pill-style chips (rounded background) for dates / nights / guests
 * instead of dot-separated text, which scans much better. The dates chip
 * gets the accent color to anchor the eye. */
.cw-strip--reservation {
  align-items: stretch;
  padding: 0 24px 0 0;          /* right padding only — left + top/bottom absorbed by the thumbnail */
  gap: 18px;
  background: var(--color-surface-warm, #FAF6F0);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
}
/* The strip uses `align-items: stretch` so the room thumbnail spans the
 * full height of the strip. That side effect also stretches the CTA
 * button taller than its natural size. Pull the CTA back to its intrinsic
 * height and center it vertically. */
.cw-strip--reservation > .cw-strip__cta {
  align-self: center;
}
.cw-reservation-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body, system-ui, sans-serif);
  padding: 18px 0;             /* same vertical breathing room the strip used to provide */
}
/* When a thumbnail is present, the strip padding moves INTO the thumbnail
 * (which fills the left edge and full height). The content body's own
 * padding-left provides the gutter between the image and the text. */
.cw-reservation-card:has(.cw-reservation-card__thumb) {
  padding: 0;
}
/* `:has()` is iOS Safari 15.4+. Older Safari falls through and shows the
 * default vertical card padding — image still floats inside, no visual
 * regression for unsupported browsers. */
.cw-reservation-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-base, #fff);
  color: var(--color-accent, #AC7F42);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
}
.cw-reservation-card__icon svg {
  display: block;
}
/* Room thumbnail — fills the left edge of the strip flush, absorbing the
 * strip's left + top + bottom padding so the image reaches each edge
 * without inset. Sharp corners (matches the rest of the design language). */
.cw-reservation-card__thumb {
  flex: 0 0 auto;
  width: 120px;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-surface-base, #fff);
}
.cw-reservation-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Body sits next to the flush thumbnail — restore vertical padding so
 * text doesn't touch the strip's top/bottom. No left padding: content sits
 * directly against the image edge. */
.cw-reservation-card__thumb + .cw-reservation-card__body {
  padding: 18px 0;
}
.cw-reservation-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cw-reservation-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  line-height: 1;
}
.cw-reservation-card__kicker-label {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #AC7F42);
}
.cw-reservation-card__kicker-value {
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary, #666);
  font-variant-numeric: tabular-nums;
}
.cw-reservation-card__room {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-reservation-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.cw-reservation-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border-radius: 0;
  background: var(--color-surface-base, #fff);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  color: var(--color-text-secondary, #555);
  white-space: nowrap;
}
.cw-reservation-card__chip--dates {
  background: var(--color-accent, #AC7F42);
  border-color: var(--color-accent, #AC7F42);
  color: var(--color-on-accent, #fff);
  font-weight: 600;
}

/* Package / add-on badges row — sits below the meta chips. Mirrors the
 * SPA's FeatureChip primitive: warm-bg pill on a 1px subtle border, sharp
 * corners, small uppercase-feeling label. Hidden entirely when the
 * reservation has no packages. */
.cw-reservation-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cw-reservation-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border-radius: 0;
  background: var(--color-surface-warm, #FAF6F0);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  color: var(--color-text-secondary, #555);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .cw-strip--reservation {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 14px 16px 16px;
    gap: 12px;
  }
  .cw-reservation-card {
    flex: 1 0 100%;
    align-items: flex-start;
    gap: 12px;
  }
  .cw-reservation-card__icon {
    width: 36px;
    height: 36px;
  }
  .cw-reservation-card__icon svg {
    width: 18px;
    height: 18px;
  }
  .cw-reservation-card__thumb {
    width: 80px;
    height: auto;
    align-self: stretch;
  }
  .cw-reservation-card__thumb + .cw-reservation-card__body {
    padding: 14px 0;
  }
  /* On mobile the strip stacks (CTA wraps below). The card itself has
   * already been told to take 100% width, but the right edge still needs
   * its own padding for the CTA wrap below — keep the original `padding-
   * right: 16px` from the responsive .cw-strip--reservation rule. */
  .cw-strip--reservation {
    padding-right: 0;
  }
  .cw-strip--reservation .cw-strip__cta {
    margin: 0 16px 16px;
  }
  .cw-reservation-card__badge {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .cw-reservation-card__room {
    font-size: 16px;
    white-space: normal;
  }
  .cw-strip--reservation .cw-strip__cta {
    width: 100%;
    text-align: center;
  }
  .cw-reservation-card__chip {
    font-size: 11px;
    padding: 3px 9px;
  }
}

/* --- Account chip (footer-account etc.) -------------------------------- */
.cw-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cw-account-chip__greeting {
  font-size: 13px;
  color: var(--color-text-secondary, #555);
}

/* --- Profile menu (authed top strip, right of the CTA) -----------------
   Mirrors the SPA's UserProfileDropdown (theme-components/26-user-dropdown.css)
   so guests get a consistent account-menu feel across the marketing site and
   the SPA. Trigger sits to the right of the CTA on the cream strip. */
.cw-profile {
  position: relative;
  flex: 0 0 auto;
  margin-left: 10px;
}
/* Concierge nav profile host: when the user isn't authed, the widget leaves
 * `<li data-cw-profile-host>` empty. Hide it so the lang-select doesn't gain
 * a trailing 28px gap on the right. */
li[data-cw-profile-host]:empty {
  display: none;
}
.cw-profile__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-surface-subtle, var(--color-surface-base, #fff));
  border: 2px solid var(--color-border, #e5e5e5);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-secondary, #555);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}
.cw-profile__trigger:hover {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cw-profile__trigger:focus-visible {
  outline: 2px solid var(--color-accent, #AC7F42);
  outline-offset: 2px;
}
.cw-profile__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary, #555);
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
}
.cw-profile__menu {
  display: none;
  position: absolute;
  right: 0; /* LTR fallback for Safari < 15 */
  inset-inline-end: 0;
  top: 100%;
  margin-top: 8px;
  width: 288px;
  background: var(--color-surface-base, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 9000;
  overflow: hidden;
  animation: cwProfileSlideDown 0.2s ease;
}
.cw-profile--open .cw-profile__menu {
  display: block;
}
@keyframes cwProfileSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cw-profile__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  text-align: start;
  color: var(--color-text-primary, #1a1a1a);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cw-profile__item:hover,
.cw-profile__item:focus {
  background: var(--color-surface-warm, var(--color-surface-subtle, #faf6f0));
  outline: none;
}
.cw-profile__item:active {
  background: var(--color-surface-subtle, #fafafa);
}
.cw-profile__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent, #AC7F42);
}
.cw-profile__divider {
  height: 1px;
  background: var(--color-border, #e5e5e5);
  margin: 4px 0;
}
@media (max-width: 640px) {
  .cw-profile__menu { width: 250px; }
  .cw-profile__item { padding: 10px 14px; font-size: 13px; }
}

/* --- Header nav: fixed to viewport top --------------------------------- */
/* `position: sticky` is fragile — any ancestor with overflow:hidden|auto,
 * a transform, or a will-change property breaks it silently, and the nav
 * starts scrolling away with the page instead of pinning. `position: fixed`
 * has no such trap and is the reliable choice for an always-on header.
 * Body padding-top: 64px reserves the space the now out-of-flow nav used
 * to occupy so page content doesn't slide under it. The cw-strip-wrapper--
 * top sits in body normal flow ABOVE the nav visually (it has its own
 * fixed positioning below). */
.site-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}
body {
  padding-top: 64px;
}

/* Anchor-scroll offset for the fixed nav.
 *
 * When a guest clicks a discover-sheet item with `link: "rooms.html#rooms-pets"`
 * or any other in-page anchor (`<a href="#section-id">`), the browser scrolls
 * the target to the very top of the viewport. With the nav `position: fixed`
 * and 64px tall, that means the first 64px of the section sits behind the nav
 * — the heading is hidden. `scroll-margin-top` is the modern fix: it tells
 * the browser to leave that much space above the target when anchor-scrolling.
 *
 * Scoped to elements with an `id` inside `<main>` so it applies uniformly to
 * every section-anchor on every brochure page without listing them. 80px gives
 * a small breathing gap below the nav (64px) plus 16px visual padding.
 *
 * Brochure pages that don't use `<main>` (none currently — every page wraps
 * content in `<main id="main-content">`) wouldn't get this; that's by design,
 * the discover sheet anchors all target sections inside the page body. */
main [id] {
  scroll-margin-top: 80px;
}
@media (max-width: 768px) {
  /* Mobile nav has the same 64px height — keep the same offset. If the nav
   * height ever changes responsively, update this and `body { padding-top }`
   * together. */
  main [id] {
    scroll-margin-top: 80px;
  }
}

/* --- Mobile nav drawer -------------------------------------------------- */
/* Standard mobile-nav drawer pattern. Brochure pages ship
 * `<button class="site-nav__mobile-toggle">` (the hamburger) and the same
 * `<ul class="site-nav__links">` that desktop uses. The widget toggles
 * `cw-nav-open` on `<body>` when the hamburger is tapped; this stylesheet
 * turns the list into a full-width panel that drops down directly under the
 * nav bar, covering page content with menu items stacked vertically.
 * Mobile only — desktop CSS is untouched. The `!important` on `display`
 * beats brochure-local `display: none` rules that hide the list on mobile. */
@media (max-width: 768px) {
  /* Hamburger moves to the LEFT edge on mobile, brand sits to its right.
   * DOM order stays `[brand] … [hamburger]` (good for screen readers /
   * keyboard tab order), but flex `order` flips the visual sequence. */
  .site-nav__mobile-toggle {
    order: -1;
    margin-right: 12px;
  }
  .site-nav__brand {
    order: 0;
    flex: 1;
    text-align: left;
  }

  /* Lift the whole nav above page content while open so the drawer (a
   * descendant) can paint over the hero / sections. The brochure ships
   * `.site-nav { position: sticky; z-index: 100 }` — bumping to 9100
   * guarantees we beat anything except the cordiant top strip. */
  body.cw-nav-open .site-nav {
    z-index: 9100;
  }
  /* Drawer anchored to the nav itself via `position: absolute; top: 100%`.
   * The brochure's `.site-nav { position: sticky }` creates a positioned
   * containing block for the descendant drawer, so `top: 100%` means
   * "100% of the nav height below the nav's top edge" — i.e. flush below
   * the nav bar regardless of how far down the page-flow has pushed the
   * nav (e.g. when the cw-strip top sits above it).
   *
   * Full viewport width. `left: 0; right: 0` plus `box-sizing: border-box`
   * makes the panel span edge-to-edge without horizontal overflow even when
   * the parent `.site-nav` has its own horizontal padding. */
  body.cw-nav-open .site-nav__links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-base, #fff);
    border-top: 1px solid var(--color-border, #e5e5e5);
    border-bottom: 1px solid var(--color-border, #e5e5e5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 9200;
    /* iOS Safari: use dvh so the drawer doesn't overflow when the URL bar
     * hides. `100vh` includes the bar even when collapsed. dvh is dynamic. */
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    animation: cwNavMenuOpen 0.18s ease;
  }
  body.cw-nav-open .site-nav__links > li {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body.cw-nav-open .site-nav__link {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    color: var(--color-text-primary, #1a1a1a);
    text-decoration: none;
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
    box-sizing: border-box;
  }
  body.cw-nav-open .site-nav__links > li:last-child .site-nav__link {
    border-bottom: none;
  }
  body.cw-nav-open .site-nav__link:hover,
  body.cw-nav-open .site-nav__link:focus {
    background: var(--color-surface-warm, var(--color-surface-subtle, #faf6f0));
    outline: none;
  }
  body.cw-nav-open .site-nav__link--active {
    color: var(--color-accent, #ac7f42);
    font-weight: 600;
  }
  /* Book Now button inside the open drawer — centered horizontally rather
   * than spanning edge-to-edge.
   *
   * Two markup shapes exist in the wild:
   *   a) `<li> > <div data-cordiant-slot="nav-book-now"> > <a class="site-nav__book">`
   *      (pages where the brochure added the slot marker for hydration)
   *   b) `<li> > <a class="site-nav__book">` (bare brochure shape — concierge.html)
   *
   * Centering strategy: turn the immediate parent of the anchor (either the
   * slot div or the bare `<li>`) into a flex row with `justify-content:
   * center`. `text-align: center` on the `<li>` alone wouldn't work because
   * an anchor with `margin-left: 8px` (from the brochure) ignores text-align.
   * The slot div (shape a) also gets the same treatment. */
  body.cw-nav-open .site-nav__links > li:last-child,
  body.cw-nav-open .site-nav__links > li:nth-last-child(2),
  body.cw-nav-open [data-cordiant-slot="nav-book-now"] {
    /* Reset list-item flow so flex centering applies. */
    list-style: none;
  }
  body.cw-nav-open [data-cordiant-slot="nav-book-now"] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 12px 0 !important;
    padding: 0 16px;
    box-sizing: border-box;
  }
  /* Bare-anchor shape: the `<li>` directly contains the .site-nav__book
   * anchor. The widget JS tags such `<li>`s with `data-cw-book-now="1"` at
   * hydrate time (see tagBookNowLi in cordiant-widget.js) so the CSS can
   * flex-center without relying on `:has()` which iOS Safari ≤15.3 lacks. */
  body.cw-nav-open .site-nav__links > li > a.site-nav__book {
    /* Neutralise the brochure's margin-left so flex centering takes hold. */
    margin: 0 !important;
  }
  /* Profile host <li> is the slot for the avatar dropdown on concierge.html.
   * On mobile it's pulled out of the drawer flow and floated to the top-right
   * of the nav bar (rule below) — it stays visible whether the drawer is
   * open or closed. No `display: none` in the drawer-open state. */
  body.cw-nav-open .site-nav__links > li[data-cw-book-now] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
  }
  /* The anchor itself across both shapes: natural-width pill, centered by
   * its flex parent. */
  body.cw-nav-open [data-cordiant-slot="nav-book-now"] > a,
  body.cw-nav-open [data-cordiant-slot="nav-book-now"] > .btn,
  body.cw-nav-open a.site-nav__book {
    display: inline-block;
    width: auto;
    min-width: 200px;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  /* Lang-select and profile dropdown float to the RIGHT of the nav bar on
   * mobile — visible in the bar itself even when the drawer is closed. They
   * live inside `.site-nav__links > li` in the DOM, but we lift them out of
   * the drawer's flex flow via absolute positioning so they sit alongside
   * the hamburger / brand. The drawer below still renders, just without
   * these two items.
   *
   * Anchored to the nav's right edge. The brochure ships `.site-nav` as a
   * sticky positioned element — that creates the positioning context. */
  .site-nav__links > li:has(> .lang-select),
  .site-nav__links > li[data-cw-profile-host] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9050;
  }
  .site-nav__links > li:has(> .lang-select) {
    right: 56px; /* leave room for the profile avatar to its right */
  }
  .site-nav__links > li[data-cw-profile-host] {
    right: 16px;
  }
  /* When profile-host is empty (guest, not authed), the lang-select can use
   * the rightmost slot. :has() is supported on iOS Safari 15.4+; older Safari
   * falls through to the default 56px offset which still looks fine. */
  .site-nav__links > li:has(> .lang-select):has(~ li[data-cw-profile-host]:empty) {
    right: 16px;
  }

  /* Hamburger → X transformation when drawer is open. Hide the original
   * `<svg><use href="#icon-menu"/></svg>` and draw two crossed lines on the
   * button's ::before and ::after. Avoids needing an `icon-x` symbol in
   * every concierge.html / brochure-page sprite. */
  .site-nav__mobile-toggle {
    position: relative;
  }
  body.cw-nav-open .site-nav__mobile-toggle svg {
    display: none;
  }
  body.cw-nav-open .site-nav__mobile-toggle::before,
  body.cw-nav-open .site-nav__mobile-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
  }
  body.cw-nav-open .site-nav__mobile-toggle::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  body.cw-nav-open .site-nav__mobile-toggle::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .site-nav__mobile-toggle svg {
    transition: transform 0.2s ease;
  }
}

@keyframes cwNavMenuOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
  .cw-strip {
    padding: 10px 16px;
    font-size: 13px;
  }
  .cw-strip--sara {
    flex-wrap: wrap;
    padding: 16px;
  }
  .cw-strip--sara .cw-strip__cta {
    width: 100%;
    text-align: center;
  }
  .cw-strip__actions {
    flex-wrap: wrap;
  }

  /* Authed top strip — phones can't fit headline + subline + CTA + profile
   * on one row. Stack the body above an action row that contains the CTA
   * (full-width, label-only) plus the profile avatar on the trailing edge. */
  .cw-strip--top.cw-strip--authed {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }
  .cw-strip--top.cw-strip--authed .cw-strip__body {
    flex: 1 0 100%;
    min-width: 0;
  }
  .cw-strip--top.cw-strip--authed .cw-strip__headline {
    font-size: 14px;
    line-height: 1.25;
  }
  .cw-strip--top.cw-strip--authed .cw-strip__copy {
    font-size: 12px;
    line-height: 1.35;
  }
  .cw-strip--top.cw-strip--authed .cw-strip__cta {
    flex: 1 1 auto;
    text-align: center;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .cw-strip--top.cw-strip--authed .cw-profile {
    margin-left: 0;
    flex: 0 0 auto;
  }
  /* Dropdown is anchored to the avatar and goes full-screen-ish on mobile
   * so the menu items are tap-friendly even when the strip itself is small. */
  .cw-strip--top.cw-strip--authed .cw-profile__menu {
    width: min(280px, calc(100vw - 32px));
    right: 0; /* LTR fallback for Safari < 15 */
    inset-inline-end: 0;
  }
}

@media (max-width: 400px) {
  .cw-strip--top.cw-strip--authed .cw-strip__copy {
    /* Subline is supplementary — drop it on very narrow screens to keep the
     * top strip compact and the CTA + avatar reachable without scrolling. */
    display: none;
  }
}

/* --- Discover sheet item link reset ------------------------------------
 * The widget renders each Discover sheet row as `<a class="discover-sheet__item">`
 * so users get real link semantics + keyboard navigation. Brochure pages style
 * `.discover-sheet__item` for the row container but never reset the default
 * `<a>` link visuals (blue text + underline) on the descendant `<p>` elements,
 * because the static fallback markup used `<div onclick>` instead. Reset here
 * so widget-rendered items pick up the host typography rather than browser
 * link defaults. */
.discover-sheet__item,
.discover-sheet__item:visited,
.discover-sheet__item:hover,
.discover-sheet__item:focus,
.discover-sheet__item:active {
  text-decoration: none;
  color: inherit;
}
.discover-sheet__item .discover-sheet__item-label,
.discover-sheet__item .discover-sheet__item-desc {
  text-decoration: none;
  color: inherit;
}