/* Healing Place Hypnosis — BLUE brand palette.
   Re-themed to her real blue accent rgb(1,112,185)=#0170B9 (water/sky calm),
   per owner request (the sage green didn't fit). The former "sage" scale now
   carries blue shades so the whole site reads blue; near-black body text
   rgb(51,55,61)=#33373D, clean white/near-white backgrounds retained. */
:root {
  --cream:   #FFFFFF;   /* pure white page bg — matches her real site exactly */
  --sand:    #E8F2FA;   /* soft blue tint for chips/borders */
  --sage-50: #E8F2FA;   /* (legacy var name) very light blue tint */
  --sage-200:#A9D2EE;   /* light blue border */
  --sage-500:#3D98D5;   /* mid blue */
  --sage-700:#0170B9;   /* her real blue — primary */
  --sage-900:#014A7A;   /* deep blue */
  --terra-400:#3D98D5;
  --terra-500:#0170B9;  /* her real blue accent */
  --terra-600:#015A95;
  --ink:     #33373D;   /* her real body-text near-black */
}
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: 'DM Sans', 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: 'DM Serif Display', Georgia, serif; }

/* 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(1, 112, 185, 0.28); }

/* ── 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(1,74,122,0.6); 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: 'DM Sans', 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; }
}

/* logo-contrast-guard */
.logo-placeholder{background:var(--ink,#161616);color:#fff;border-radius:9px;}

/* heading-balance */
.display,h1,h2,h3{text-wrap:balance;}

/* hero-heading-fit */
#main-content .max-w-4xl{max-width:66rem;}
@media(min-width:1024px){#main-content .display{font-size:4.5rem;line-height:1.06;}}