/* From Bumps 2 Babies. Cream / dusty-blush / muted-sage palette.
   Token NAMES kept stable (sage/terra/sand) so utility classes keep working,
   but hex values remapped to the low-saturation, gender-neutral spec palette:
   bg cream #FAF6F1, text warm charcoal #4A3F3A, accent dusty blush #E3B7AE,
   accent-2 muted sage #B8C4AC, border greige #E7DED5. */
:root {
  --cream:   #FAF6F1; /* bg cream */
  --sand:    #EFE6DA; /* warm sand surface for cards / alt sections */
  --border:  #E7DED5; /* soft greige border */
  /* "sage" scale = dusty blush accent family (deepened at 700/900 for cream-text contrast) */
  --sage-50: #F7ECE8;
  --sage-200:#E9CFC8;
  --sage-500:#D9A79D; /* dusty blush */
  --sage-700:#B27E77; /* deep blush/mauve, AA on cream */
  --sage-900:#8C5F59; /* deepest blush, footer/dark bands */
  /* "terra" scale = muted sage accent-2 family */
  --terra-400:#C2CDB7;
  --terra-500:#9FB08F;
  --terra-600:#7E9070;
  --ink:     #4A3F3A; /* warm charcoal/greige */
}
html { scroll-behavior: smooth; }
/* Fixed nav is 64px tall (py-3.5 = ~14px each + content ~36px). */
html, body { max-width: 100vw; overflow-x: clip; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--cream); color: var(--ink); padding-top: 64px; }
@media (min-width: 640px) { body { padding-top: 72px; } }
/* Prevent any image / iframe from spilling out of its container on mobile */
img, iframe, video { max-width: 100%; height: auto; }
/* Inputs / selects / textareas honor box-sizing border-box and never overflow their container */
input, select, textarea { max-width: 100%; box-sizing: border-box; }
/* Wrap long words instead of forcing horizontal scroll */
p, h1, h2, h3, h4, li, a { overflow-wrap: anywhere; word-break: break-word; }
/* Break long code blocks (the BOOKING_WEBHOOK explainer has them) */
code, pre { overflow-wrap: anywhere; word-break: break-all; }
.serif { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-weight: 500; }
.text-balance { text-wrap: balance; }

/* Scroll-triggered fade-up animations.
   Visible by default (no-JS / no-IntersectionObserver / slow JS fallback).
   When body has .js-anim set by partials.js, the initial hidden state applies. */
.reveal { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.js-anim .reveal:not(.in) { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }

/* Hero blob parallax-ish drift */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(8px, -8px) scale(1.02); }
}
.drift { animation: none; } /* hero movement removed per request - static */

/* Card hover lift */
.card-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 36px -16px rgba(75, 100, 70, 0.25); }

/* ── Contained image hover-zoom ──────────────────────────────────────────
   Any image inside a clipping frame may scale subtly on hover, but the frame
   keeps it clipped so it never spills out of frame. Apply .img-frame to the
   container (forces overflow:hidden) and the inner <img> gets a gentle zoom.
   Also a defensive global: rounded image wrappers always clip. */
.img-frame { overflow: hidden; }
.img-frame > img { display: block; }/* image transform transition removed - static per client */
.img-frame:hover > img,
a.img-frame:hover > img,
a:hover > .img-frame > img { transform: none; }/* hover zoom removed - static per client */
/* Safety net: never let a transformed image escape a rounded container. */
[class*="rounded"] > img { max-width: 100%; }
.overflow-hidden { overflow: hidden; }

/* Booking modal multi-step */
.modal-step.hidden { display: none; }

/* Subtle button shine */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(250, 246, 241, 0.18), transparent);
  transition: left 0.6s ease;
}
.btn-shine:hover::after { left: 100%; }

/* FAQ accordion */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform 0.25s ease; }

/* Number counter (animates via JS) */
.counter { font-variant-numeric: tabular-nums; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(74,63,58,0.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 100;
  animation: fade 0.2s ease;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--cream); border-radius: 24px; padding: 32px; max-width: 540px; width: calc(100% - 32px);
  max-height: 90vh; overflow-y: auto;
  animation: pop 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Mobile WhatsApp bubble */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  color: white; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 50; transition: transform 0.2s ease;
}
.whatsapp-fab:hover { transform: scale(1.08); }
@media (min-width: 768px) { .whatsapp-fab { display: none; } }

/* Nav active link */
.nav-link.active { color: var(--sage-700); }
.nav-link.active::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--sage-500);
  margin-top: 2px;
}

/* ── Skip link (keyboard accessibility) ─────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: var(--sage-700);
  color: var(--cream);
  padding: 12px 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 9999;
  transition: top 0.18s ease;
  border-radius: 999px;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--terra-500); outline-offset: 2px; }

/* ── Focus visibility (keyboard nav) ─────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--sage-700); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--sage-700); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .reveal, .drift, .btn-shine::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}