/*
 * ChicMama 2027 — responsive/cross-browser hardening.
 * v0.9.7-staging12
 *
 * Goals:
 * - prevent horizontal overflow by fixing component geometry, never with a page-level kill switch;
 * - keep typography/spacing fluid only between compact mobile and standard desktop;
 * - use dynamic viewport units with safe fallbacks;
 * - preserve a bounded editorial measure on ultrawide/Retina screens;
 * - provide conservative Safari/older-browser fallbacks.
 */

:root {
  --cm-content-max: var(--wp--style--global--content-size, 1280px);
  --cm-content-max-wide: var(--wp--style--global--wide-size, 1920px);
  --cm-gutter: var(--wp--preset--spacing--cm-gutter, clamp(18px, 2.75vw, 40px));
  --cm-container: min(calc(100% - (2 * var(--cm-gutter))), var(--cm-content-max));
  --cm-body-fluid: clamp(15px, calc(14.67px + 0.0926vw), 16px);
  --cm-body-small-fluid: clamp(13.5px, calc(13.17px + 0.0926vw), 14.5px);
  --cm-label-fluid: clamp(11px, calc(10.67px + 0.0926vw), 12px);
  --cm-btn-py: clamp(14px, calc(13px + 0.278vw), 17px);
  --cm-btn-px: clamp(22px, calc(18px + 1.11vw), 34px);
  --cm-gap-sm: clamp(10px, calc(8px + 0.56vw), 16px);
  --cm-gap-md: clamp(18px, calc(12px + 1.67vw), 36px);
  --cm-gap-lg: clamp(28px, calc(12px + 4.44vw), 76px);
}

/* 1. Root sizing only. Horizontal overflow is intentionally not hidden here:
 * when QA finds overflow, the offending component must be corrected. */
html,
body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

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

#cm-root,
#cm-main,
#cm-header,
#cm-mobnav,
#cm-main > section,
footer {
  width: 100%;
  max-width: 100%;
}

/* Flex/grid children must be allowed to shrink. This is the most common cause
 * of the Samsung/iPhone one- or two-pixel horizontal overflow. */
#cm-root :where(section, div, article, aside, nav, header, footer, main) {
  min-inline-size: 0;
}

img,
picture,
video,
canvas,
svg,
iframe {
  max-inline-size: 100%;
}

img,
picture,
video,
canvas {
  height: auto;
}

/* Absolute decorative/media layers never define layout width. */
#cm-root [style*="position:absolute"],
#cm-root [style*="position: absolute"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* The standard editorial shell. Runtime templates use var(--cm-container). */
.cm-container,
[data-cm-container] {
  width: var(--cm-container);
  max-width: var(--cm-content-max);
  margin-inline: auto;
}

/* 2. Fluid type: only scale from compact mobile to 1440-ish desktop and stop.
 * Existing display headlines already use clamp() in the frozen templates. */
body {
  font-size: var(--cm-body-fluid);
  line-height: 1.6;
}

#cm-main p,
#cm-main li {
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#cm-main :where(h1, h2, h3, p, li, a, span) {
  max-width: 100%;
}

#cm-main h1,
#cm-main h2,
#cm-main h3 {
  text-wrap: balance;
}

#cm-main p {
  text-wrap: pretty;
}

/* Common interactive controls: fluid hit area, capped at desktop values. */
#cm-root a[data-cm-booking],
#cm-root .cm-mob-reserve,
#cm-root .cm-btn {
  max-width: 100%;
  padding-block: var(--cm-btn-py) !important;
  padding-inline: var(--cm-btn-px) !important;
  font-size: var(--cm-label-fluid) !important;
}

/* 3. Dynamic viewport stack. Unsupported declarations are ignored in order,
 * leaving the classic vh fallback in place. */
#cm-root {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

#cm-mobnav {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(var(--cm-gutter), env(safe-area-inset-left));
  padding-right: max(var(--cm-gutter), env(safe-area-inset-right));
}

.cm-hero {
  min-height: 92vh !important;
  min-height: 92svh !important;
}

[data-screen-label="Experience hero"] {
  min-height: 62vh !important;
  min-height: 62svh !important;
}

@supports (height: 100dvh) {
  .cm-hero { min-height: 92dvh !important; }
  [data-screen-label="Experience hero"] { min-height: 62dvh !important; }
}

/* 4. Ultrawide guardrails. Section/header/footer backgrounds stay genuinely
 * full bleed; only their inner editorial shells are capped at 1280px. */
html,
body,
#cm-root {
  background-color: var(--cm-cream);
}

/* Intentional horizontal scroller: contain it locally, never on the page. */
[role="tablist"] {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
[role="tablist"]::-webkit-scrollbar { display: none; }

/* Grids must never create an implicit minimum wider than their container. */
.cm-panel,
.cm-days,
.cm-timeline,
#cm-gal {
  max-width: 100%;
  min-width: 0;
}
.cm-panel > *,
.cm-days > *,
.cm-timeline > *,
#cm-gal > * {
  min-width: 0;
  max-width: 100%;
}

/* Long CTA/links can wrap on narrow devices rather than forcing overflow. */
@media (max-width: 520px) {
  #cm-root a,
  #cm-root button {
    overflow-wrap: anywhere;
  }

  #cm-root a[data-cm-booking],
  #cm-root .cm-mob-reserve,
  #cm-root .cm-btn {
    white-space: normal !important;
    text-align: center;
  }

  #cm-root [style*="min-width:280px"],
  #cm-root [style*="min-width: 280px"],
  #cm-root [style*="min-width:260px"],
  #cm-root [style*="min-width: 260px"] {
    min-width: 0 !important;
  }

  #cm-wordmark {
    font-size: clamp(18px, 5.2vw, 23px) !important;
    letter-spacing: clamp(.18em, 1vw, .30em) !important;
  }

  #cm-mobnav .cm-moblink {
    font-size: clamp(28px, 8.5vw, 36px) !important;
  }
}

/* 5. Cross-browser fallbacks. */
#cm-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.cm-header-mode-light #cm-header,
.cm-header-mode-night #cm-header {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cm-header-mode-light #cm-header { background: rgba(244,236,223,.98) !important; }
  .cm-header-mode-night #cm-header { background: rgba(14,26,43,.98) !important; }
}

@supports not (aspect-ratio: 1 / 1) {
  #cm-root img[style*="aspect-ratio"] {
    height: auto !important;
  }
}

@supports not (display: grid) {
  .cm-panel,
  .cm-days,
  .cm-timeline,
  #cm-gal {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--cm-gap-md);
  }
  .cm-panel > *, .cm-days > *, .cm-timeline > *, #cm-gal > * {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 280px;
    flex: 1 1 280px;
  }
}

@supports not (text-wrap: balance) {
  #cm-main h1,
  #cm-main h2,
  #cm-main h3 { overflow-wrap: break-word; }
}

/* Sticky is progressive enhancement: if unsupported, content stays in flow. */
@supports not (position: sticky) {
  .cm-faq-intro { position: static !important; top: auto !important; }
}

/* Respect accessibility settings and also avoid Safari animation glitches. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Tonight hero title: width limit that used to be inline (max-width:10ch), now in the stylesheet so a title with
   typed line breaks (<br> / Enter) can lift it. Desktop keeps each typed line whole ("Stasera" / "Above Positano");
   on small screens a long line may wrap instead of leaving the viewport. No :has() needed.
   Line rules apply only under [data-cm-multiline], which the renderer sets solely on the allow-listed title (cm27_multiline_title_slots()); no other title is affected. */
.cm-tonight-hero h1{max-width:10ch}
.cm-tonight-hero h1[data-cm-multiline]{max-width:none}
[data-cm-multiline]>.cm-line{display:block}
@media (min-width:640px){[data-cm-multiline]>.cm-line{white-space:nowrap}}