/* ==========================================================================
   elevate.css — site-wide premium polish layer (loaded after premium.css,
   before mobile-fixes.css). Preserves Dory's identity (blue #2b70e4 + gold
   #f59e0b, Inter/Poppins) while raising the finish across every page so a
   visitor wants to stay: sharper buttons, lifting cards, calmer section
   rhythm, a trust strip, refined hero + stat counters. No new colors.
   ========================================================================== */

:root {
  --elev-blue: #2b70e4;
  --elev-blue-dark: #1a5bc4;
  --elev-gold: #f59e0b;
  --elev-gold-dark: #d97706;
  --elev-ink: #1a1a2e;
  --elev-ring: 0 0 0 3px rgba(43, 112, 228, 0.35);
}

/* --- Accessibility: a single, consistent focus ring everywhere ----------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--elev-ring);
  border-radius: var(--radius-md, 8px);
}

/* --- Sticky, self-shadowing header --------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}
.header:hover { box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08); }

/* Desktop: fit logo + 9-item nav + phone CTA without clipping the CTA off
   the right edge (the reported "telefone cortado"). Tighten nav spacing and
   let the nav shrink so the CTA always fits. */
@media (min-width: 1025px) {
  .header__wrapper { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; }
  .header__nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .nav-list { flex-wrap: nowrap; gap: 0; }
  .nav-link { padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.92rem; white-space: nowrap; }
  .header__cta { flex: 0 0 auto; margin-left: 0.6rem; white-space: nowrap; }
}
/* The hamburger's three bars (markup added in Header.tsx) */
.header__toggle-icon span:nth-child(1) { top: 0; }
.header__toggle-icon span:nth-child(2) { top: 8px; }
.header__toggle-icon span:nth-child(3) { top: 16px; }

/* Mobile drawer: critical.min.css ships TWO conflicting .header__nav rules
   (one uses transform:translateX, the other right:-100%), so .is-open only
   reset ONE axis and the drawer stayed off-screen. Force the open state to
   reset BOTH, and show the overlay for whatever class navigation.js sets. */
@media (max-width: 1024px) {
  .header__nav.is-open {
    right: 0 !important;
    transform: translateX(0) !important;
  }
  .header__overlay.is-open,
  .header__overlay.is-active,
  .header__overlay.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.nav-open, body.menu-open { overflow: hidden; }
}

/* --- Trust strip (new): thin band of proof under the top bar ------------- */
.trust-strip {
  background: linear-gradient(90deg, var(--elev-blue) 0%, var(--elev-blue-dark) 100%);
  color: #fff;
}
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.trust-strip__item { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.trust-strip__item svg { width: 15px; height: 15px; flex: none; opacity: 0.95; }
.trust-strip__divider { opacity: 0.4; }
@media (max-width: 768px) {
  .trust-strip__inner { gap: 0.35rem 1rem; font-size: 0.74rem; }
  .trust-strip__item:nth-child(n+5), .trust-strip__divider:nth-child(n+5) { display: none; }
}

/* --- Buttons: gradient, weight, hover lift, gold CTA --------------------- */
.btn {
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md, 10px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  will-change: transform;
}
.btn.btn--primary {
  background: linear-gradient(135deg, var(--elev-blue) 0%, var(--elev-blue-dark) 100%);
  box-shadow: 0 6px 18px rgba(43, 112, 228, 0.28);
  border: none;
  color: #fff;
}
.btn.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(43, 112, 228, 0.38);
}
.btn.btn--gold,
.btn.btn--cta {
  background: linear-gradient(135deg, var(--elev-gold) 0%, var(--elev-gold-dark) 100%);
  color: #1a1a2e;
  border: none;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.32);
}
.btn.btn--gold:hover,
.btn.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(245, 158, 11, 0.42); }
.btn.btn--secondary:hover { transform: translateY(-2px); }

/* --- Cards: calmer border, tinted diffused depth (high-end agency feel) --- */
/* redesign-existing-projects audit: replace harsh pure-black shadows with
   soft, blue-tinted, layered shadows + hairline border → "expensive" depth
   without leaving Dory's clinical light theme. */
.card,
.service-card,
.trust-card,
.service-card--premium,
.benefit-card,
.highlight-card {
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -12px rgba(43, 112, 228, 0.12);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease;
}
.card:hover,
.service-card:hover,
.trust-card:hover,
.service-card--premium:hover,
.benefit-card:hover,
.highlight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04), 0 22px 50px -16px rgba(43, 112, 228, 0.26);
  border-color: rgba(43, 112, 228, 0.16);
}

/* --- Typography polish: balanced headlines, no orphan words ------------- */
h1, h2, h3,
.section__title, .hero-premium__title,
.section__subtitle, .section__description,
.benefit-card__title, .service-card__title, .card__title {
  text-wrap: balance;
}
#main-content p, .section__description, .footer__cta-text { text-wrap: pretty; }

/* --- Section rhythm: generous, consistent breathing room ----------------- */
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section__title { letter-spacing: -0.02em; }
.section__subtitle,
.section__description { color: #64748b; }

/* --- Hero: neutral BLACK overlay over the photo (no blue tint) ----------- */
/* Override the legacy navy-blue gradient overlay with a pure black scrim,
   darker on the text side (left) fading right so the image still reads. */
.hero-premium__overlay {
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.42) 100%) !important;
}
.hero-premium__title { letter-spacing: -0.025em; }
.hero-premium__cta .btn { padding: 0.95rem 1.8rem; font-size: 1.02rem; }

/* --- Trust badge chips (hero / sections) --------------------------------- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.trust-badge,
.trust-badges > * {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.8rem;
  font-weight: 600;
}

/* --- Hero form service picker: real contrast + clear selected state ------ */
/* Audit flagged white text on rgba(255,255,255,0.06) (~1:1). Give the pills a
   solid dark base so the white label has genuine contrast, and make the
   chosen pill obvious (gold) — "make the next action obvious". */
.service-picker__btn {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}
.service-picker__btn:hover { background: rgba(15, 23, 42, 0.72) !important; }
.service-picker__btn[aria-checked="true"],
.service-picker__btn.is-selected,
.service-picker__btn.active {
  background: linear-gradient(135deg, var(--elev-gold) 0%, var(--elev-gold-dark) 100%) !important;
  border-color: var(--elev-gold) !important;
  color: #1a1a2e !important;
}

/* --- Stat counters: tighter, more confident ------------------------------ */
.stats-grid--premium { gap: 1.25rem; }
.stat-card { text-align: center; padding: 1.25rem 0.5rem; }
.stat-card .stat-card__number,
.stat-card strong,
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, #cfe0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* (Removed the scroll-reveal animation: it relied on animation-timeline:view()
   with opacity:0 + fill 'both', which left whole sections invisible — long
   blank spaces — in browsers without scroll-timeline support. Content
   visibility must never depend on an optional animation.) */

/* === FAIL-SAFE: legacy scroll-reveal must never hide content ============= */
/* The legacy .animate-on-scroll / .animate-fade-* / .stagger-children classes
   start at opacity:0 and only become visible when main.js adds .is-visible via
   IntersectionObserver. Under Next.js (content in dangerouslySetInnerHTML,
   afterInteractive hydration) that reveal is unreliable, leaving whole
   sections invisible — the "blank white space" across ~1,490 pages. Force the
   revealed end-state by default so content ALWAYS shows; the animation, when
   the JS does run, is pure progressive enhancement. Continuous decorative
   loops (spin/pulse/float/shimmer/gradient/bounce) are intentionally excluded. */
.animate-on-scroll,
.animate-on-load,
.animate-fade-up,
.animate-fade-down,
.animate-fade-left,
.animate-fade-right,
.animate-fade-scale,
.animate-zoom-in,
.animate-rotate-in,
.stagger-children > * {
  opacity: 1;          /* visible by default — safe if JS is off */
  transform: none;
}

/* JS-confirmed scroll reveal (ScrollReveal island adds html.reveal-ready, and
   .in-view per element as it enters the viewport). Content stays visible when
   JS is off; with JS it fades up on scroll — the modern motion RS has. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .animate-on-scroll,
  html.reveal-ready .animate-fade-up,
  html.reveal-ready .animate-fade-down,
  html.reveal-ready .animate-fade-left,
  html.reveal-ready .animate-fade-right,
  html.reveal-ready .animate-fade-scale,
  html.reveal-ready .animate-zoom-in,
  html.reveal-ready .stagger-children > * {
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.reveal-ready .animate-on-scroll:not(.in-view),
  html.reveal-ready .animate-fade-up:not(.in-view),
  html.reveal-ready .animate-fade-down:not(.in-view),
  html.reveal-ready .animate-fade-scale:not(.in-view),
  html.reveal-ready .animate-zoom-in:not(.in-view),
  html.reveal-ready .stagger-children:not(.in-view) > * {
    opacity: 0;
    transform: translateY(24px);
  }
  html.reveal-ready .animate-fade-left:not(.in-view) { opacity: 0; transform: translateX(-24px); }
  html.reveal-ready .animate-fade-right:not(.in-view) { opacity: 0; transform: translateX(24px); }
  /* staggered children cascade in */
  html.reveal-ready .stagger-children.in-view > *:nth-child(2) { transition-delay: 0.08s; }
  html.reveal-ready .stagger-children.in-view > *:nth-child(3) { transition-delay: 0.16s; }
  html.reveal-ready .stagger-children.in-view > *:nth-child(4) { transition-delay: 0.24s; }
  html.reveal-ready .stagger-children.in-view > *:nth-child(5) { transition-delay: 0.32s; }
}

/* --- Hero form: frame the embedded form as a clean white panel ---------- */
/* The GHL iframe was bleeding edge-to-edge as a raw white slab against the
   dark glass card. Inset it with radius + shadow so it reads as an intentional
   white input panel inside the card (header → steps → framed form). */
#hero-form-card iframe,
.hero-premium__form iframe {
  border-radius: 12px !important;
  width: calc(100% - 1.8rem) !important;
  margin: 0 0.9rem 0.9rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* --- Hub city directory grouped by county (DOM + scannability) ---------- */
.cities-by-county { display: flex; flex-direction: column; gap: 1.75rem; }
.county-group { }
.county-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--elev-ink);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(43, 112, 228, 0.18);
}
.county-heading .county-count { color: #94a3b8; font-weight: 600; font-size: 0.85em; }

/* --- Home gallery: filterable (CSS-only) environments grid (RS-style) ---- */
.home-gallery .gallery-filter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gallery-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.gallery-tab {
  padding: 0.5rem 1.1rem; border-radius: 999px; background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1); color: #475569;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.gallery-tab:hover { border-color: var(--elev-blue); color: var(--elev-blue); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.gallery-item {
  margin: 0; border-radius: 14px; overflow: hidden; position: relative; aspect-ratio: 3 / 2;
  border: 1px solid rgba(15, 23, 42, 0.05); box-shadow: 0 10px 30px -12px rgba(43, 112, 228, 0.18);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 0.85rem 0.65rem;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.88)); color: #fff;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
}
/* active tab highlight */
#gf-all:checked ~ .gallery-tabs label[for="gf-all"],
#gf-medical:checked ~ .gallery-tabs label[for="gf-medical"],
#gf-specialty:checked ~ .gallery-tabs label[for="gf-specialty"],
#gf-ambulatory:checked ~ .gallery-tabs label[for="gf-ambulatory"],
#gf-rehab:checked ~ .gallery-tabs label[for="gf-rehab"],
#gf-admin:checked ~ .gallery-tabs label[for="gf-admin"],
#gf-action:checked ~ .gallery-tabs label[for="gf-action"] {
  background: linear-gradient(135deg, var(--elev-blue) 0%, var(--elev-blue-dark) 100%);
  color: #fff; border-color: transparent;
}
/* filtering — hide non-matching items for each selected category */
#gf-medical:checked ~ .gallery-grid .gallery-item:not(.cat-medical),
#gf-specialty:checked ~ .gallery-grid .gallery-item:not(.cat-specialty),
#gf-ambulatory:checked ~ .gallery-grid .gallery-item:not(.cat-ambulatory),
#gf-rehab:checked ~ .gallery-grid .gallery-item:not(.cat-rehab),
#gf-admin:checked ~ .gallery-grid .gallery-item:not(.cat-admin),
#gf-action:checked ~ .gallery-grid .gallery-item:not(.cat-action) { display: none; }

/* JS-enhanced mode (GalleryEnhancer island, like RS's React gallery): JS owns
   the filter state + animated transitions; the CSS-radio fallback is neutralised. */
.gallery--js .gallery-filter { display: none; }
.gallery--js .gallery-item.is-hidden { display: none !important; }
.gallery--js .gallery-tab { user-select: none; }
.gallery--js .gallery-tab.is-active {
  background: linear-gradient(135deg, var(--elev-blue) 0%, var(--elev-blue-dark) 100%);
  color: #fff; border-color: transparent;
}
.gallery--js .gallery-item.is-anim { animation: galleryIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes galleryIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery--js .gallery-item.is-anim { animation: none; }
}

/* --- Floating phone CTA on mobile: mobile-fixes.css hid it (display:none)
   expecting a .mobile-sticky-cta that the migration never rendered, leaving
   NO phone button on phones. Show the gold pill (it has a phone icon) on
   mobile too, compact, bottom-left (chat widget sits bottom-right). --------- */
@media (max-width: 768px) {
  .floating-phone-cta {
    display: inline-flex !important;
    bottom: 16px !important;
    left: 16px !important;
    padding: 0.7rem 1.05rem !important;
    font-size: 0.85rem !important;
    z-index: 9998 !important;
  }
}

/* --- Footer column headings: were inheriting dark h3 color (invisible on
   the navy footer). Give them a clean, light, premium footer-heading style. */
.footer__heading {
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 0.8rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  opacity: 0.95;
}

/* --- Footer service-area city band (RS-style inline directory) ---------- */
.footer__areas {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0 0.5rem;
}
.footer__areas-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #f59e0b !important;
  text-align: center;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}
.footer__areas-title svg { color: #f59e0b; }
.footer__areas-list {
  font-size: 0.78rem;
  line-height: 2;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  max-width: 1100px;
  margin: 0 auto;
}
.footer__areas-list a { color: rgba(255, 255, 255, 0.62); text-decoration: none; transition: color 0.15s ease; }
.footer__areas-list a:hover { color: #fff; }
.footer__areas-sep { color: rgba(255, 255, 255, 0.25); }

/* Honor reduced-motion globally for the button/card transforms */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .service-card, .trust-card, .service-card--premium { transition: none; }
  .btn:hover, .card:hover, .service-card:hover, .trust-card:hover { transform: none; }
}