/* =====================================================================
   Spine & Wellness Center - PREMIUM DESIGN SYSTEM (swc-premium.css)
   ---------------------------------------------------------------------
   The single source of truth for the premium "feel". Loaded LAST on every
   page so it authoritatively governs the design PRIMITIVES (colour ground,
   display type, the mono eyebrow, motion) over any per-page inline <style>
   redeclarations. Edit THIS ONE FILE to evolve the look sitewide.

   Shared COMPONENTS still live in site.css; page-specific styles still live
   in each page's inline <style>. This layer only standardises the primitives,
   so it never fights an intentional per-page component design.

   Principles (inspired by, not copied from, restrained-luxury brand systems):
   earned whitespace, confident display type, ONE disciplined accent (our teal),
   an instrument-grade mono label, and calm short motion.
   Version bump the ?v= on the <link> in every page whenever you edit this file.
   ===================================================================== */

/* 1. GROUND & ACCENT --------------------------------------------------
   Soft near-white page ground so white cards/sections read as "lifted".
   Teal stays a SIGNAL (CTAs, the italic accent word, eyebrows), never a wash. */
:root {
  --c-bg: #F7F9FA;
  /* Bigger, more confident display scale */
  --ts-4xl: clamp(40px, 4.4vw, 72px);
  --ts-5xl: clamp(52px, 6.6vw, 110px);
}
body { background: var(--c-bg); }

/* 2. DISPLAY TYPE -----------------------------------------------------
   Authority through subtraction: large, tightly-tracked, tight-leading serif
   display. Fraunces stays our head font; we just carry it with more confidence.
   Page-specific hero rules (e.g. .hero h1) are more specific and still win
   wherever a page intends something custom. */
h1 { letter-spacing: -0.026em; line-height: 1.04; }
h2 { letter-spacing: -0.018em; line-height: 1.1; }
h3 { letter-spacing: -0.012em; }

/* 3. THE MONO EYEBROW -------------------------------------------------
   The clever borrow: a spaced monospace label reads as clinical,
   instrument-grade precision - the credibility a premium practice wants.
   System mono stack = zero extra font download. */
.eyebrow {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  font-size: clamp(11px, 0.72rem, 12.5px);
  font-weight: 600;
  letter-spacing: 0.2em;
}

/* 4. CALM, CONFIDENT MOTION -------------------------------------------
   Luxury moves are small and slow, not big and bouncy: shorter travel,
   no scale-bounce, expo-out easing, tighter stagger. */
.reveal {
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transform: translateY(22px);
}
.reveal[data-reveal="up"]    { transform: translateY(22px); }
.reveal[data-reveal="left"]  { transform: translateX(-30px); }
.reveal[data-reveal="right"] { transform: translateX(30px); }
.reveal[data-reveal="top"]   { transform: translateY(-22px); }
.reveal[data-reveal="zoom"],
.reveal[data-reveal="fade"]  { transform: scale(.985); }
.reveal.is-revealed { transform: none; }
.stagger > .reveal:nth-child(2) { transition-delay: .07s; }
.stagger > .reveal:nth-child(3) { transition-delay: .14s; }
.stagger > .reveal:nth-child(4) { transition-delay: .21s; }
.stagger > .reveal:nth-child(5) { transition-delay: .28s; }
.stagger > .reveal:nth-child(6) { transition-delay: .35s; }
.stagger > .reveal:nth-child(7) { transition-delay: .42s; }
.stagger > .reveal:nth-child(8) { transition-delay: .49s; }
.stagger > .reveal:nth-child(9) { transition-delay: .56s; }

/* Never paint-gate the above-the-fold LCP element (mirror site.css so this
   load-order layer can't re-gate the hero H1 / eager blog hero and cost
   mobile LCP). Specificity (0,2,1)/(0,3,1) - no !important, card-tilt safe. */
.js-on h1.reveal,
.js-on .hero h1[data-cascade],
img.post-hero.reveal,
img.post-hero { opacity: 1; transform: none; animation: none; }

/* Reduced-motion safety net */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-cascade] { opacity: 1 !important; transform: none !important; }
  .nav-amalfi .has-mega > .mega { transition: none; }
}

/* 5. THE CENTERED "AMALFI" NAV ---------------------------------------
   A centered crescent+name mark, primary links to the LEFT, a prominent
   tap-to-call number and the Book pill to the RIGHT, and two CURATED,
   visual mega-panels (Treatments = featured programs with imagery;
   Conditions = grouped so a confused visitor self-orients fast). This is
   the OPPOSITE of the old 14/21-link megamenus we removed: a few featured
   items + one clear "start here" path, so it serves the diagnosis-first
   purpose instead of adding clutter. Everything here is scoped to
   .nav-amalfi so it is purely additive (pages without the class are
   untouched). Mobile is deliberately left as the clean flat menu: hover
   does not exist on touch and mobile is the KPI, so we never ship the
   dropdown weight to phones. */
.nav-amalfi .site-logo--center .site-logo-img { height: 62px; width: auto; }
.site-header.is-scrolled.nav-amalfi .site-logo--center .site-logo-img { height: 52px; }
/* trim the bar padding a touch so the bigger logo does not balloon the header */
.nav-amalfi .site-header-inner { padding-top: 10px; padding-bottom: 10px; }

.nav-amalfi .nav-phone {
  display: none; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
  font-weight: 600; font-size: var(--ts-sm, .9rem); letter-spacing: .01em;
  color: var(--c-brand-deep, #1D6773); transition: color .2s var(--ease, ease);
}
.nav-amalfi .nav-phone svg { width: 15px; height: 15px; stroke: var(--c-brand, #3FB3C6); }
.nav-amalfi .nav-phone:hover { color: var(--c-brand, #3FB3C6); }

/* Mega panel — hidden until a desktop hover / keyboard focus */
.nav-amalfi .has-mega > .mega {
  position: absolute; top: 100%; left: 0;
  transform: translateY(-8px);
  width: min(940px, 94vw); background: #fff;
  border: 1px solid var(--c-border, #D8E5E7); border-radius: 20px;
  box-shadow: 0 26px 64px rgba(15,76,92,.17), 0 4px 14px rgba(15,76,92,.06);
  padding: 20px; margin-top: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
  z-index: 120;
}
/* invisible bridge so the cursor can cross the gap without dismissing */
.nav-amalfi .has-mega > .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }

/* Amalfi-style image TILES (Treatments): big landscape photos with the label
   overlaid on a gradient scrim + a corner arrow, image zooms on hover. */
.nav-amalfi .has-mega > .mega--treatments { width: min(1180px, 95vw); }
.mega-eyebrow { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted, #5a6a78); margin: 2px 6px 15px; }
.mega-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.mega-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; text-decoration: none; background: var(--c-brand-deep, #1D6773); isolation: isolate; }
.mega-tile img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
/* brand duotone unifies mismatched equipment photos (some are product-on-white)
   into one intentional teal set; multiply turns white grounds teal, not blank. */
.mega-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, rgba(63,179,198,.34) 0%, rgba(15,76,92,.5) 100%); mix-blend-mode: multiply; }
.mega-tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(8,26,30,.9) 0%, rgba(8,26,30,.34) 48%, rgba(8,26,30,0) 76%); }
.mega-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 13px 13px 14px; color: #fff; }
.mega-tile-cap b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.18; }
.mega-tile-cap i { display: block; font-style: normal; font-size: .72rem; opacity: .85; margin-top: 3px; }
.mega-tile .tile-arrow { width: 13px; height: 13px; vertical-align: middle; margin-left: 2px; opacity: .8; transition: transform .3s var(--ease, ease); }
.mega-tile:hover img { transform: scale(1.06); }
.mega-tile:hover .tile-arrow { transform: translate(3px, -3px); opacity: 1; }

/* Live Google reviews (swc-reviews.js renders these into #reviews-grid) */
.review__time { font-size: .75rem; color: var(--c-muted, #5a6a78); margin-top: 2px; }
#reviews-grid .review__text { display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 4px 6px; }
.mega-cols .mega-h { font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted, #5a6a78); margin: 0 0 12px; }
.mega-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mega-cols a { color: var(--c-ink, #0F1820); font-size: .9rem; text-decoration: none; }
.mega-cols a:hover { color: var(--c-brand-deep, #1D6773); }
.mega-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-border, #D8E5E7); }
.mega-foot a { font-weight: 600; font-size: .86rem; color: var(--c-brand-deep, #1D6773); text-decoration: none; }
.mega-foot a:hover { color: var(--c-brand, #3FB3C6); }
.mega-foot .mega-note { font-size: .82rem; color: var(--c-muted, #5a6a78); }

@media (min-width: 1024px) {
  /* 3-column grid centres the logo regardless of how wide the links are */
  .nav-amalfi .site-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; position: relative; }
  .nav-amalfi .site-nav { display: flex; flex: 0 1 auto; justify-self: start; }
  .nav-amalfi .site-nav-menu { display: flex; align-items: center; justify-content: flex-start; gap: 26px; margin: 0; padding: 0; list-style: none; }
  .nav-amalfi .site-nav-menu > li { position: static; }
  .nav-amalfi .site-logo--center { justify-self: center; }
  .nav-amalfi .site-actions { display: flex; align-items: center; gap: 18px; justify-self: end; }
  .nav-amalfi .site-cta { display: inline-flex; }
  .nav-amalfi .nav-phone { display: inline-flex; }
  .nav-amalfi .site-nav-toggle { display: none; }

  .nav-amalfi .nav-link { position: relative; font-weight: 500; color: var(--c-ink, #0F1820); letter-spacing: .005em; padding: 8px 0; }
  .nav-amalfi .has-mega > .nav-link::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .45; transition: transform .3s var(--ease, ease), opacity .3s var(--ease, ease); }
  .nav-amalfi .has-mega:hover > .nav-link::after,
  .nav-amalfi .has-mega.is-open > .nav-link::after { transform: translateY(1px) rotate(225deg); opacity: .85; }

  /* .is-open is driven by swc-nav.js (hover-intent grace); :focus-within is
     the keyboard/no-JS fallback. Either keeps the panel open. */
  .nav-amalfi .has-mega:focus-within > .mega,
  .nav-amalfi .has-mega.is-open > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}

/* Open on hover ONLY where hover is a real capability, so touch devices
   (which emulate a sticky :hover) never get a stuck-open panel; they use
   the .is-open path from swc-nav.js (first tap reveals, second follows). */
@media (min-width: 1024px) and (hover: hover) {
  .nav-amalfi .has-mega:hover > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}