/* OnzonThai — custom styles (Tailwind utilities come from the CDN) */
/* Theme tokens: fallback = Theme 1 (Classic Gold). layouts/public.php injects the
   active theme's channels into :root (id="oz-theme") right after this file, so the
   whole site recolours by swapping these 8 RGB-channel variables. */
:root {
  --c-cream-rgb:250 246 241;
  --c-sand-rgb:239 230 218;
  --c-taupe-rgb:154 137 120;
  --c-cocoa-rgb:74 63 53;
  --c-ink-rgb:43 38 34;
  --c-gold-rgb:176 141 87;
  --c-gold-light-rgb:201 168 120;
  --c-gold-dark-rgb:138 109 63;
  --gold: rgb(var(--c-gold-rgb));
  --cocoa: rgb(var(--c-cocoa-rgb));
}

html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---- Navbar ---- */
#nav .nav-logo, #nav .nav-links a, #nav #navToggle { color:#fff; }
#nav.scrolled, #nav.solid {
  background:rgb(var(--c-cream-rgb) / .95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 4px 30px rgba(0,0,0,.06);
}
#nav.scrolled .nav-logo, #nav.scrolled .nav-links a, #nav.scrolled #navToggle,
#nav.solid .nav-logo, #nav.solid .nav-links a, #nav.solid #navToggle { color:rgb(var(--c-ink-rgb)); }
#nav.scrolled .nav-links a.text-gold, #nav.solid .nav-links a.text-gold { color:var(--gold); }

/* ---- Reveal (only when motion allowed + JS active) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity:0; transform:translateY(28px); will-change:opacity,transform; }
}

/* ---- Hero ---- */
.hero-overlay {
  background:linear-gradient(180deg, rgb(var(--c-ink-rgb) / .55) 0%, rgb(var(--c-ink-rgb) / .28) 45%, rgb(var(--c-cocoa-rgb) / .72) 100%);
}

/* ---- Section title accent ---- */
.title-accent::after {
  content:''; display:block; width:64px; height:3px; background:var(--gold);
  margin:1.1rem auto 0; border-radius:2px;
}
.title-accent.left::after { margin-left:0; margin-right:auto; }

/* ---- Service / price ---- */
.price-pill { background:rgb(var(--c-sand-rgb)); color:rgb(var(--c-cocoa-rgb)); }
.card-img { transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.service-card:hover .card-img { transform:scale(1.06); }

/* ---- Rich text ---- */
.prose-spa p { margin-bottom:1rem; line-height:1.85; }
.prose-spa h2,.prose-spa h3 { font-family:"Cormorant Garamond",serif; margin:1.5rem 0 .6rem; }

/* ---- Single massage page body ---- */
.service-body { color:rgb(var(--c-ink-rgb) / .8); }
.service-body h3 {
  font-family:"Cormorant Garamond",serif; font-size:1.75rem; font-weight:600;
  color:rgb(var(--c-cocoa-rgb)); margin:2.5rem 0 .75rem;
}
.service-body h3:first-child { margin-top:0; }
.service-body p { margin-bottom:1rem; line-height:1.9; }
.service-body blockquote {
  margin:2rem 0; padding:1.5rem 1.75rem; border-left:3px solid var(--gold);
  background:rgb(var(--c-sand-rgb) / .45); border-radius:0 1rem 1rem 0;
  font-family:"Cormorant Garamond",serif; font-size:1.4rem; line-height:1.6;
  color:rgb(var(--c-cocoa-rgb));
}
.service-body blockquote p { margin:0; }
.service-body ul { margin:0 0 1rem 1.2rem; list-style:disc; }
.service-body li { margin-bottom:.4rem; line-height:1.8; }

/* ---- Navbar dropdown (Services → single massages) ---- */
.nav-dd { position:relative; }
.nav-dd-panel {
  position:absolute; top:100%; left:50%; transform:translate(-50%, 8px);
  min-width:19rem; padding:.5rem; border-radius:1rem;
  background:rgb(var(--c-cream-rgb)); box-shadow:0 24px 48px -20px rgb(var(--c-ink-rgb) / .45);
  border:1px solid rgb(var(--c-sand-rgb));
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
  max-height:min(70vh, 34rem); overflow-y:auto;
}
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel {
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.nav-dd-panel a { display:block; padding:.5rem .85rem; border-radius:.6rem; color:rgb(var(--c-ink-rgb)); }
.nav-dd-panel a:hover { background:rgb(var(--c-sand-rgb) / .7); color:rgb(var(--c-gold-dark-rgb)); }

/* ---- Swiper ---- */
.swiper-pagination-bullet { background:var(--gold) !important; opacity:.4; }
.swiper-pagination-bullet-active { opacity:1; }
.swiper-button-next, .swiper-button-prev { color:var(--gold) !important; }
.swiper-button-next:after, .swiper-button-prev:after { font-size:1.4rem !important; }

.text-balance { text-wrap:balance; }

/* ---- Gift cards carousel arrows (outside the swiper so they're never clipped) ---- */
.gift-carousel { position:relative; }
.swiper-nav-btn { position:absolute; top:44%; transform:translateY(-50%); z-index:20; width:44px; height:44px; border-radius:9999px; background:#fff; color:rgb(var(--c-cocoa-rgb)); box-shadow:0 12px 28px -12px rgb(var(--c-ink-rgb) / .45); cursor:pointer; transition:background .2s, color .2s; }
.swiper-nav-btn:hover { background:var(--gold); color:#fff; }
.gift-prev { left:-10px; } .gift-next { right:-10px; }
@media (min-width:1280px){ .gift-prev { left:-26px; } .gift-next { right:-26px; } }
.swiper-nav-btn.swiper-button-disabled { opacity:.3; pointer-events:none; }

/* ---- OverlayScrollbars custom theme (follows the active palette) ---- */
.os-theme-onz {
  --os-size:11px; --os-padding-perpendicular:2px; --os-padding-axis:2px;
  --os-handle-border-radius:8px;
  --os-handle-bg:rgb(var(--c-taupe-rgb) / .5); --os-handle-bg-hover:rgb(var(--c-gold-rgb) / .75); --os-handle-bg-active:rgb(var(--c-gold-dark-rgb) / .9);
}