/* ==========================================================================
   Laguna Heights Dental — brand stylesheet (bespoke; replaces the shared
   dental template look entirely).

   Loading order enforced by @dental/core's Meta.astro:
     bootstrap → calander.css → THIS FILE (or issa-home.css) → responsive.css
   Two consequences this file lives with:
     1. Bootstrap is already loaded, so every class here is `lhd-` prefixed and
        can never collide with a Bootstrap class.
     2. The shared dental `responsive.css` loads AFTER this file and rewrites
        bare p/h1..h4 sizes. The site's Layout.astro re-asserts the type scale
        in a bundled <style> block (which loads last) — don't move that.
        For the same reason the header is `.lhd-header`, NOT `.headerMain`, and
        the mobile collapse id is `#lhdNav`, NOT `#navbarSupportedContent`:
        responsive.css targets those two names with the old design's rules.

   Palette sampled from the practice's own logo (navy frame, sailboat crest,
   pale-blue "DENTAL" wordmark) plus the two accents their live site uses:
   #4d97c2 hero wash and #ff9933 sunset orange.
   ========================================================================== */

:root {
  /* Brand colours as given by the practice:
       primary   #4d97c2  (section/hero backgrounds)
       secondary #FF9933  (buttons and highlights)
     `--lhd-primary-deep` is the same hue darkened only where white text sits on
     it (a solid button on #4d97c2 is ~3:1 against white, below AA); `--lhd-blue`
     stays the link/heading colour for the same reason. */
  --lhd-primary: #4d97c2;
  --lhd-primary-deep: #2b719b;
  --lhd-navy: #17216d;
  --lhd-blue: #1f5aa0;
  --lhd-sky: var(--lhd-primary);
  --lhd-mist: #b0ccd5;
  --lhd-sun: #ff9933;
  --lhd-sun-dark: #e8801a;

  --lhd-ink: #12202f;
  --lhd-body: #46586a;
  --lhd-line: #dce6ee;
  --lhd-wash: #eff6fa;
  --lhd-cream: #fdfbf4;
  --lhd-paper: #ffffff;

  --lhd-font-head: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lhd-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale. */
  --lhd-step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --lhd-step-0: clamp(1rem, 0.97rem + 0.16vw, 1.07rem);
  --lhd-step-1: clamp(1.12rem, 1.05rem + 0.33vw, 1.3rem);
  --lhd-step-2: clamp(1.32rem, 1.18rem + 0.66vw, 1.7rem);
  --lhd-step-3: clamp(1.55rem, 1.3rem + 1.1vw, 2.25rem);
  --lhd-step-4: clamp(1.95rem, 1.5rem + 2vw, 3.05rem);

  --lhd-radius: 12px;
  --lhd-radius-lg: 20px;
  --lhd-shadow: 0 10px 30px rgba(23, 33, 109, 0.08);
  --lhd-shadow-lg: 0 20px 50px rgba(23, 33, 109, 0.16);
}

/* ============================ shared bits ============================ */

/* overflow-x: clip contains .lhd-split__media--framed::after, the decorative
   border that is intentionally offset 0.9rem right/down of the image. There is
   room for it inside the centred container on desktop, but on a phone the
   container is nearly the full viewport, so the frame hung ~14px off-screen and
   made the whole page scroll sideways (a Google mobile-UX flag). Clipping here
   rather than on .lhd-split keeps the frame fully visible wherever it fits and
   only trims it at the screen edge. `clip`, not `hidden`, so the section does
   not become a scroll container. */
.lhd-section { padding: clamp(3rem, 6vw, 5.5rem) 0; overflow-x: clip; }
.lhd-section--wash { background: var(--lhd-wash); }
.lhd-section--cream { background: var(--lhd-cream); }
/* Soft-blue accent for standalone differentiator callouts (e.g. Biological
   Dentistry) that need more visual weight than the flat --lhd-wash tint used
   elsewhere. Built from the same brand blues (--lhd-wash/--lhd-mist), since the
   palette has no green — see --lhd-eyebrow--bio below for the leaf icon. */
.lhd-section--bio { background: linear-gradient(135deg, var(--lhd-wash) 0%, #dcedf3 55%, var(--lhd-mist) 145%); }

.lhd-eyebrow {
  display: inline-block;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lhd-primary-deep);
  margin-bottom: 0.75rem;
}

.lhd-eyebrow--bio { display: inline-flex; align-items: center; gap: 0.45rem; }
.lhd-bio__icon { width: 1.2em; height: 1.2em; flex: none; color: var(--lhd-primary-deep); }

/* Anchor targets (e.g. #cost) land below the sticky header instead of behind it. */
h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
/* Zero-size jump targets inside a <ul> list item (e.g. the Services mega menu's
   deep links into Laser/Biological Dentistry's treatment lists), same offset. */
.lhd-anchor { display: inline-block; scroll-margin-top: 6.5rem; }

.lhd-h2 { margin-bottom: 1rem; }
.lhd-h2::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 0.85rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-h2--center { text-align: center; }
.lhd-h2--center::after { margin-left: auto; margin-right: auto; }
.lhd-lead { font-size: var(--lhd-step-1); color: var(--lhd-body); }

.lhd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lhd-btn:hover { transform: translateY(-2px); text-decoration: none; }
/* ONE call-to-action look across the whole site: the same orange pill as the
   header's "Schedule Online" button, and on hover it deepens and the label turns
   white. `--primary` is kept as an alias so older markup can't drift out of step.
   Secondary buttons are outlines of the same colour and fill in on hover, so
   their text also ends up white. */
.lhd-btn--sun,
.lhd-btn--primary { background: var(--lhd-sun); color: #23303d; }
.lhd-btn--sun:hover,
.lhd-btn--primary:hover { background: var(--lhd-sun-dark); color: #fff; box-shadow: var(--lhd-shadow); }

.lhd-btn--ghost { background: transparent; color: var(--lhd-sun-dark); border-color: var(--lhd-sun); }
.lhd-btn--ghost:hover { background: var(--lhd-sun-dark); color: #fff; border-color: var(--lhd-sun-dark); }

.lhd-btn--light { background: #fff; color: var(--lhd-navy); }
.lhd-btn--light:hover { background: var(--lhd-sun-dark); color: #fff; }

.lhd-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.lhd-btn--outline-light:hover { background: var(--lhd-sun-dark); color: #fff; border-color: var(--lhd-sun-dark); }

.lhd-btn--sm { padding: 0.6rem 1.1rem; font-size: var(--lhd-step--1); }

/* Body copy links inside ported content.
   `:not(.lhd-btn)` is load-bearing: CTA buttons sit INSIDE .lhd-prose, and
   `.lhd-prose a:hover` (0-2-1) outranks `.lhd-btn--sun:hover` (0-2-0), so without
   it the hover rule below repainted button labels in --lhd-sun-dark — the exact
   colour of the button's hover background, i.e. the label vanished.
   Colour is the brand orange, not blue: on the white/wash/cream backgrounds
   these sections use, `--lhd-blue` reads fine on its own, but the sitewide
   rule is that inline text links on any LIGHT background use the orange
   accent (underline kept for contrast/accessibility) while `.lhd-band a`
   above uses white+underline on DARK backgrounds — see that rule's comment
   for the inverse case. `--lhd-sun-dark`, not the lighter `--lhd-sun`, matches
   how orange is used as TEXT everywhere else on light surfaces (e.g.
   `.lhd-btn--ghost`'s label) for adequate contrast on white. */
.lhd-prose a:not(.lhd-btn), .lhd-list a:not(.lhd-btn) {
  color: var(--lhd-sun-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lhd-prose a:not(.lhd-btn):hover, .lhd-list a:not(.lhd-btn):hover { color: var(--lhd-navy); }
.lhd-prose p:last-child { margin-bottom: 0; }

/* ============================ top bar ============================ */

.lhd-topbar {
  background: var(--lhd-navy);
  color: #dce9f5;
  font-size: var(--lhd-step--1);
  padding: 0.5rem 0;
}
.lhd-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
}
.lhd-topbar__hours { margin: 0; }
.lhd-topbar__call { margin: 0; font-weight: 600; }
.lhd-topbar__call a { color: #fff; text-decoration: none; }
.lhd-topbar__call a:hover { color: var(--lhd-sun); }

/* ============================ header / nav ============================ */

.lhd-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  box-shadow: 0 2px 16px rgba(23, 33, 109, 0.08);
}
.lhd-header .navbar { padding: 0.5rem 0; }
.lhd-header__logo img { display: block; width: 132px; height: auto; }

.lhd-nav { gap: 0.15rem; }
.lhd-nav__link {
  display: block;
  font-family: var(--lhd-font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lhd-ink);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: none;
  border: 0;
  white-space: nowrap;
}
.lhd-nav__link:hover, .lhd-nav__link:focus { color: var(--lhd-blue); background: var(--lhd-wash); }
.lhd-nav__link::after { margin-left: 0.35rem; }
.lhd-nav .dropdown-menu {
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius);
  box-shadow: var(--lhd-shadow);
  padding: 0.4rem;
  min-width: 15rem;
}
.lhd-nav .dropdown-item {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--lhd-body);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  white-space: normal;
}
.lhd-nav .dropdown-item:hover, .lhd-nav .dropdown-item:focus {
  background: var(--lhd-wash);
  color: var(--lhd-blue);
}

.lhd-header__phone {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  font-family: var(--lhd-font-head);
}
.lhd-header__phone span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lhd-sky); }
.lhd-header__phone strong { font-size: 1.05rem; color: var(--lhd-navy); }
.lhd-header__phone:hover strong { color: var(--lhd-blue); }

.lhd-toggler {
  display: inline-grid;
  place-items: center;
  background: none;
  color: var(--lhd-navy);
  border: 0;
  padding: 0 0.5rem;
  cursor: pointer;
}
.lhd-toggler:hover { color: var(--lhd-blue); }
/* Bars/cross stacked in one grid cell and cross-faded — display can't transition. */
.lhd-toggler__bars,
.lhd-toggler__close {
  grid-area: 1 / 1;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.lhd-toggler__close { opacity: 0; transform: rotate(-90deg); }
.lhd-toggler[aria-expanded="true"] .lhd-toggler__bars { opacity: 0; transform: rotate(90deg); }
.lhd-toggler[aria-expanded="true"] .lhd-toggler__close { opacity: 1; transform: rotate(0); }
@media (prefers-reduced-motion: reduce) {
  .lhd-toggler__bars, .lhd-toggler__close { transition: none; transform: none; }
}
@media (min-width: 1200px) { .lhd-toggler { display: none; } }

/* The menu has six top-level items with submenus, so it collapses at xl (1200px)
   rather than lg — hence navbar-expand-xl in Navbar.astro. */
@media (max-width: 1199.98px) {
  .lhd-header__actions { width: 100%; }
  .lhd-nav { padding: 0.5rem 0 0.75rem; }
  .lhd-nav__link { padding: 0.7rem 0.25rem; }
  .lhd-nav .dropdown-menu { border: 0; box-shadow: none; padding-left: 0.9rem; }
  .lhd-nav .nav-item { border-bottom: 1px solid var(--lhd-line); }
  .lhd-nav .nav-item:last-child { border-bottom: 0; }
}

/* A parent that is both a page and a dropdown: label navigates, caret opens. */
.lhd-nav__split { display: flex; align-items: center; }
.lhd-nav__split .lhd-nav__link { padding-right: 0.35rem; }
/* Mobile menu: Bootstrap makes .dropdown-menu static here, so it opened beside the label. */
@media (max-width: 1199.98px) {
  .lhd-nav__split { flex-wrap: wrap; }
  .lhd-nav__split .dropdown-menu { flex: 0 0 100%; width: 100%; }

  /* fixed, not sticky: the topbar offsets a sticky header so 100dvh overran the screen. */
  .lhd-header:has(#lhdNav.show),
  .lhd-header:has(#lhdNav.collapsing) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    z-index: 1050;
  }
  /* Hidden, not out-z-indexed; the consent banner/modal stay on top by design. */
  body:has(#lhdNav.show) .lhd-callfab,
  body:has(#lhdNav.show) #dnConsentReopen { display: none; }

  /* .show only — a growing height during .collapsing flashes a scrollbar. 8rem = brand row. */
  #lhdNav.show {
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lhd-primary) transparent;
  }
  #lhdNav.show::-webkit-scrollbar { width: 6px; }
  #lhdNav.show::-webkit-scrollbar-track { background: transparent; }
  #lhdNav.show::-webkit-scrollbar-thumb { background: var(--lhd-primary); border-radius: 999px; }
}
.lhd-nav__caret {
  display: inline-grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--lhd-body);
  padding: 0.5rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
}
.lhd-nav__caret:hover, .lhd-nav__caret[aria-expanded="true"] { color: var(--lhd-primary-deep); background: var(--lhd-wash); }
.lhd-nav__caret svg { transition: transform 0.2s ease; }
.lhd-nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.lhd-nav__link.is-active { color: var(--lhd-primary-deep); background: var(--lhd-wash); }
.lhd-nav .dropdown-item.is-active { color: var(--lhd-primary-deep); background: var(--lhd-wash); font-weight: 600; }

/* ============================ Services mega menu ============================ */
/* Every category AND every treatment is a real <a href> (crawlable without JS).
   Desktop: a wide multi-column panel, each column always expanded — the native
   <details>/<summary> toggle is disabled via pointer-events (see .lhd-mega__cat
   below) so it reads as a plain grid, not an accordion.
   Mobile (<1200px): Bootstrap's own navbar-expand-xl CSS makes `.dropdown-menu`
   `position: static` below that breakpoint (same mechanism every other dropdown
   on this site already relies on), so the mega panel simply stacks full-width in
   the collapsed menu, and pointer-events are restored so each <details> becomes
   a native, no-JS accordion. */
/* `.lhd-nav .dropdown-menu` (0-2-0) also sets border/border-radius/box-shadow/
   padding/min-width — matching its specificity here (instead of the bare
   `.lhd-mega` class alone) so this panel's own sizing reliably wins. */
.lhd-nav .lhd-mega {
  width: min(94vw, 62rem);
  max-width: 62rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius);
  box-shadow: var(--lhd-shadow-lg);
  min-width: 0;
}
/* Native CSS multi-column layout: the browser balances column HEIGHT on its
   own (shortest possible max-column-height for the given column count) while
   keeping categories in their exact source/DOM order (so the mobile
   accordion below — which just turns this into column-count:1 — shows the
   owner's exact requested order). A short category (e.g. the solo links with
   no treatments) will stack UNDER a taller one in the same visual column
   rather than starting a new row, which is what keeps a 13-item category like
   General Dentistry from forcing a second, mostly-empty row below the fold. */
.lhd-mega__grid {
  column-count: 4;
  column-gap: 1.75rem;
}
.lhd-mega__col {
  border: 0;
  break-inside: avoid;
  margin-bottom: 1.25rem;
}
.lhd-mega__col--solo { display: flex; align-items: flex-start; }
.lhd-mega__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  list-style: none;
  cursor: default;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--lhd-line);
}
.lhd-mega__cat::-webkit-details-marker { display: none; }
.lhd-mega__catlink {
  font-family: var(--lhd-font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--lhd-navy);
  text-decoration: none;
  pointer-events: auto;
}
.lhd-mega__catlink:hover, .lhd-mega__catlink:focus { color: var(--lhd-blue); }
.lhd-mega__chev { display: none; color: var(--lhd-body); flex: none; }
.lhd-mega__list { list-style: none; margin: 0; padding: 0; }
.lhd-mega__sublink {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--lhd-body);
  text-decoration: none;
  padding: 0.3rem 0;
  border-radius: 6px;
}
.lhd-mega__sublink:hover, .lhd-mega__sublink:focus { color: var(--lhd-blue); }

@media (min-width: 1200px) {
  /* Lock every column permanently open: disable the summary's native toggle
     (pointer-events: none) but re-enable it on the nested <a> so the category
     link itself stays clickable. */
  .lhd-mega__cat { pointer-events: none; }
  .lhd-mega__list { display: block !important; }

  /* Center the panel under the WHOLE header instead of under wherever the
     "Services" toggle happens to sit in the nav row — Bootstrap auto-disables
     Popper for navbar dropdowns (it treats any `.navbar .dropdown` as
     "static display" automatically), so plain CSS positioning is all that's
     driving this and nothing will fight it. Un-setting `position: relative`
     on the <li> promotes `.lhd-header` (already `position: sticky`, which is
     itself a containing block) to be the mega panel's positioning context,
     so `left: 50%` below centers it on the viewport, not on the toggle —
     the only way a ~62rem panel reliably stays on-screen regardless of
     where "Services" lands in the menu. */
  .lhd-nav__mega-wrap { position: static; }
  .lhd-nav .lhd-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* Belt-and-braces: on a very short browser window this scrolls INSIDE the
       panel instead of letting it run off the bottom of the screen
       undetected. The multi-column balancing above (sized for ~1366x768 and
       up) should make this a no-op in practice at normal desktop heights. */
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
  }

  /* Opening on hover (not just click) is handled in Navbar.astro's <script>,
     not here: a pure-CSS `:hover { display:block }` rule closes the instant
     the pointer leaves the element, which is the opposite of what's wanted
     (stay open until an explicit click elsewhere) — that needs real "did the
     user click away" state, which only JS can track. */
}

@media (max-width: 1199.98px) {
  .lhd-nav .lhd-mega {
    width: 100%;
    max-width: none;
    padding: 0.25rem 0 0.5rem;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }
  .lhd-mega__grid { column-count: 1; }
  .lhd-mega__col { border-bottom: 1px solid var(--lhd-line); padding: 0.1rem 0; margin-bottom: 0; break-inside: auto; }
  .lhd-mega__col--solo { border-bottom: 1px solid var(--lhd-line); padding: 0.6rem 0.25rem; }
  .lhd-mega__col:last-child, .lhd-mega__col--solo:last-child { border-bottom: 0; }
  .lhd-mega__cat { padding: 0.6rem 0.25rem; margin-bottom: 0; border-bottom: 0; cursor: pointer; }
  .lhd-mega__chev { display: inline-grid; place-items: center; }
  .lhd-mega__col[open] > .lhd-mega__cat .lhd-mega__chev svg { transform: rotate(180deg); }
  .lhd-mega__chev svg { transition: transform 0.2s ease; }
  .lhd-mega__list { padding: 0 0 0.5rem 0.75rem; }
  .lhd-mega__sublink { padding: 0.45rem 0; }
}

/* ============================ hero ============================ */

.lhd-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 62vh, 40rem);
  background-color: var(--lhd-navy);
  background-image: var(--lhd-hero-img);
  background-size: cover;
  /* Homepage hero only (interior pages use .lhd-phero below, which stays
     top-anchored). Owner asked for this specific photo to crop from the top
     instead — i.e. anchor the visible frame to the BOTTOM of the source
     image — rather than the top-anchored fix applied everywhere else. */
  background-position: center bottom;
  overflow: hidden;
}
/* Their own hero treatment: the photo under a #4d97c2 wash. */
.lhd-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 32, 74, 0.84) 0%, rgba(43, 113, 155, 0.74) 46%, rgba(77, 151, 194, 0.4) 100%);
}
.lhd-hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.5rem); }
.lhd-hero__content { max-width: 42rem; }
.lhd-hero__eyebrow {
  display: inline-block;
  color: #fff;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(2px);
}
.lhd-hero__title { color: #fff; margin-bottom: 0.9rem; }
.lhd-hero__sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--lhd-step-1);
  max-width: 34rem;
  margin-bottom: 1.6rem;
}
.lhd-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.lhd-hero__late {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  color: #fff;
  font-family: var(--lhd-font-head);
  font-weight: 600;
}
.lhd-hero__late::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--lhd-sun);
  box-shadow: 0 0 0 4px rgba(255, 153, 51, 0.3);
}

.lhd-offer {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  border-top: 5px solid var(--lhd-sun);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow-lg);
  padding: 1.6rem;
  text-align: center;
  max-width: 22rem;
}
.lhd-offer__title { font-size: var(--lhd-step-2); color: var(--lhd-navy); margin-bottom: 0.35rem; }
.lhd-offer__note { font-size: var(--lhd-step--1); color: var(--lhd-body); margin-bottom: 1.1rem; }
.lhd-offer img { width: 130px; height: auto; margin: 0 auto 1rem; display: block; }

/* ============================ split content bands ============================ */

.lhd-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 992px) {
  .lhd-split { grid-template-columns: 1.05fr 1fr; }
  .lhd-split--flip .lhd-split__media { order: 2; }
}
.lhd-split__media { position: relative; z-index: 0; } /* z-index:0 = own stacking context, so the ::after frame below is not buried by the section background */
.lhd-split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
}
/* Red Light Therapy intro photo (src/pages/[...slug].astro, isRedLightPage):
   the source photo is a tall shot of the NovoTHOR bed, which read as
   oversized next to the intro copy. Capping the rendered height near 451px
   and cropping with object-fit keeps the split row compact; object-position
   trims from the top/bottom (not the sides) so the whole bed stays in frame,
   and the height cap itself is the "zoom out" — it shows more of the source
   photo than the full-bleed square crop the raw image would otherwise get. */
.lhd-split__media--rlintro img {
  height: clamp(20rem, 32vw, 28.2rem); /* 28.2rem ≈ 451px */
  object-fit: cover;
  object-position: center;
}
/* Dental Exams "Advanced Diagnostic Technology" band: the video is a
   YouTube Short (9:16), so it uses .lhd-video__frame's own portrait ratio
   rather than stretching to fill the (much wider) split column — capped and
   centred at the same width as a single testimonial card (.lhd-vgrid's
   card), so it reads as one deliberate video, not an oversized column-filling
   box. */
.lhd-split__media--portrait { max-width: 22rem; margin-inline: auto; }
.lhd-split__media--framed::after {
  content: '';
  position: absolute;
  inset: auto -0.9rem -0.9rem auto;
  width: 62%;
  height: 62%;
  border: 3px solid var(--lhd-mist);
  border-radius: var(--lhd-radius-lg);
  z-index: -1;
}

.lhd-list { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.7rem; }
.lhd-list li { position: relative; padding-left: 2rem; color: var(--lhd-body); }
.lhd-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--lhd-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232b719b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* Two-column variant of .lhd-list, used for the standalone "What Our Team
   Offers" section on the Meet the Doctors page (see isDoctorsPage in
   [...slug].astro) — a page-level summary, not tied to a bio's narrow prose
   column, so it gets its own centred, wider measure and a 2-up grid at tablet
   and up instead of the single-column list ported page bodies normally use. */
.lhd-list--2col { max-width: 44rem; margin-left: auto; margin-right: auto; }
/* .lhd-list's base li relies on left-aligned text with an absolutely
   positioned checkmark at the left edge, which reads fine in a left-aligned
   prose column but looks off-centre under this section's centred heading. Here
   each item becomes its own centred icon+text unit instead. */
.lhd-list--2col li { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding-left: 0; text-align: center; }
.lhd-list--2col li::before { position: static; flex: none; }
@media (min-width: 576px) { .lhd-list--2col { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

/* Doctor bio card (sections[].layout: "bio") — same hover motion as .lhd-team-card. */
.lhd-biocard {
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-biocard:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
/* Closing copy: no box, opened by the brand dash; last line is the attribution. */
.lhd-bio-note { max-width: 44rem; }
.lhd-bio-note--dash::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: 1.4rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-bio-note p:last-child { font-size: var(--lhd-step-0); }

/* Doctors index lead: centred measure under the brand dash. */
.lhd-intro-lead { max-width: 46rem; }
.lhd-intro-lead::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 auto 1.4rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}

/* Panel register (panelBlocks): brand gradient rule, wash fill, list items as chips. */
.lhd-biopanel {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--lhd-wash) 100%);
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
  overflow: hidden;
}
.lhd-biopanel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-biopanel .lhd-list { margin: 0; }
.lhd-biopanel .lhd-list li {
  background: #fff;
  border-radius: 0.65rem;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  box-shadow: 0 2px 10px rgba(23, 33, 109, 0.06);
}
.lhd-biopanel .lhd-list li::before { left: 1rem; top: 1.05em; }
@media (prefers-reduced-motion: reduce) {
  .lhd-biocard { transition: none; }
  .lhd-biocard:hover { transform: none; }
}

/* Left-aligned 2-col list (unlike .lhd-list--2col, which centres) — just a column count. */
@media (min-width: 768px) {
  .lhd-list--cols { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* ============================ membership plan cards ============================ */
/* Live cards fetched from the practice's dentaloo /api/plans endpoint (see
   src/pages/index.astro) — name, monthly/yearly price, benefits, CTA. Styled
   like `.lhd-step`, in the site's own blue/orange palette rather than
   Dentaloo's default look. */
.lhd-plans-intro { max-width: 42rem; margin: 0 auto 2.5rem; }
.lhd-plans-intro .lhd-lead { margin: 0; }

/* ============================ team grid (Our Practice page) ============== */
/* "Meet Our Team" card grid — 3 columns desktop, 2 tablet, 1 mobile. Shares the
   centred-intro layout with .lhd-plans-intro above. */
.lhd-team-intro { max-width: 42rem; margin: 0 auto 2.5rem; }
.lhd-team-intro .lhd-lead { margin: 0; }
.lhd-team { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .lhd-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lhd-team { grid-template-columns: 1fr; } }
.lhd-team-card {
  text-align: center;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 1.75rem 1.25rem 1.6rem;
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-team-card:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
.lhd-team-card__photo {
  display: block;
  width: 11rem;
  height: 11rem;
  object-fit: cover;
  /* Anchor the crop to the top of the frame so a tight portrait crop trims
     shoulders/chest rather than the top of the head/hair — same fix as the
     hero banners (.lhd-hero, .lhd-phero use background-position: center 4x%). */
  object-position: top;
  border-radius: var(--lhd-radius-lg);
  border: 4px solid var(--lhd-wash);
  margin: 0 auto 1.1rem;
}
/* Our Practice team cards: .lhd-bannerphoto caption + .lhd-bcard hover zoom. */
.lhd-tcard {
  position: relative;
  margin: 0;
  border-radius: var(--lhd-radius-lg);
  overflow: hidden;
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-tcard:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
.lhd-tcard__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  transition: transform 0.4s ease;
}
.lhd-tcard:hover .lhd-tcard__photo { transform: scale(1.04); }
.lhd-tcard__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: linear-gradient(120deg, rgba(15, 32, 74, 0.88), rgba(43, 113, 155, 0.8));
  color: #fff;
  border-radius: var(--lhd-radius);
  padding: 0.85rem 1.1rem;
  display: grid;
  gap: 0.1rem;
}
.lhd-tcard__role {
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lhd-sun);
}
.lhd-tcard__name { font-family: var(--lhd-font-head); font-weight: 800; font-size: var(--lhd-step-1); }
@media (prefers-reduced-motion: reduce) {
  .lhd-tcard, .lhd-tcard__photo { transition: none; }
  .lhd-tcard:hover, .lhd-tcard:hover .lhd-tcard__photo { transform: none; }
}

/* Doctor cards: team-card shell, round, flex so CTAs share a baseline. */
.lhd-doccard { display: flex; flex-direction: column; }
.lhd-doccard__photo { width: 13rem; height: 13rem; border-radius: 50%; }
.lhd-doccard__cta { margin-top: auto; align-self: center; }
.lhd-team-card__name { font-size: var(--lhd-step-1); color: var(--lhd-navy); margin-bottom: 0.15rem; }
.lhd-team-card__role {
  font-size: var(--lhd-step--1);
  color: var(--lhd-primary-deep);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.lhd-plans { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.lhd-plan-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-top: 4px solid var(--lhd-primary);
  border-radius: var(--lhd-radius-lg);
  padding: 2.1rem 1.6rem 1.75rem;
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-plan-card:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
.lhd-plan-card__name { font-size: var(--lhd-step-1); color: var(--lhd-navy); margin-bottom: 0.6rem; }
.lhd-plan-card__price {
  font-family: var(--lhd-font-head);
  font-weight: 800;
  font-size: var(--lhd-step-3);
  color: var(--lhd-primary-deep);
  margin: 0;
}
.lhd-plan-card__price span { font-size: var(--lhd-step--1); font-weight: 600; color: var(--lhd-body); }
.lhd-plan-card__yearly { font-size: var(--lhd-step--1); color: var(--lhd-body); margin: 0.15rem 0 1.4rem; }
.lhd-plan-card__benefits { text-align: left; flex: 1 1 auto; margin-bottom: 1.5rem; }

/* ============================ numbered benefits grid ============================ */
/* Ported "Applications of X" style sections (e.g. Red Light Therapy) used to
   flow as a flat run of h4/p pairs with a bare "1", "2", "3"… paragraph in
   between — this rebuilds it as the practice's actual 3-up boxed grid with a
   numbered circle badge per card. */
.lhd-numgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--lhd-cream);
  border-radius: var(--lhd-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin: 1.75rem 0;
}
@media (min-width: 576px) { .lhd-numgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .lhd-numgrid { grid-template-columns: repeat(3, 1fr); } }
.lhd-numgrid__item { background: #fff; border-radius: var(--lhd-radius); padding: 1.5rem 1.35rem; box-shadow: var(--lhd-shadow); }
.lhd-numgrid__num {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--lhd-blue);
  color: #fff;
  font-family: var(--lhd-font-head);
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.lhd-numgrid__item h4 { font-size: var(--lhd-step-1); color: var(--lhd-navy); margin-bottom: 0.4rem; }
.lhd-numgrid__item p { margin: 0; font-size: var(--lhd-step--1); color: var(--lhd-body); }

/* ============================ family discounts (shared component) ========= */
/* Restyles @dental/core's <FamilyDiscounts /> to the brand palette instead of
   its default look, entirely via the documented --dfd-* custom properties —
   never by copying/overriding its markup. Soft blue wash-to-mist gradient
   (matching .lhd-section--bio) with the sun-orange accent for the "best value"
   tier, since the palette has no green. */
/* `!important` on every custom property here is deliberate: the component's
   own scoped Astro styles set its default theme on a selector scoped with a
   data-astro-cid attribute (e.g. `.dfd[data-astro-cid-…]`), which is MORE
   specific than a plain `.dfd` class rule in this external stylesheet. Without
   `!important` the component's own (greenish) default wins regardless of the
   values below — that was the site showing green after the first attempt at
   this. `!important` on a custom property is valid CSS and is the only way
   left to beat a same-file, higher-specificity default we cannot edit
   (packages/core is outside this site's sandbox). */
.dfd {
  --dfd-from: var(--lhd-wash) !important;
  --dfd-to: #dcedf7 !important;
  --dfd-ink: var(--lhd-navy) !important;
  --dfd-muted: var(--lhd-body) !important;
  --dfd-accent: var(--lhd-sun) !important;
  --dfd-tile-bg: #ffffff !important;
  --dfd-tile-border: var(--lhd-primary) !important;
  --dfd-best-bg: var(--lhd-sun) !important;
  --dfd-best-ink: #23303d !important;
  --dfd-radius: var(--lhd-radius-lg) !important;
  --dfd-max-width: 54rem !important;
}

/* ============================ in-house plan band ============================ */

.lhd-plan {
  background: linear-gradient(120deg, var(--lhd-navy), var(--lhd-primary-deep) 58%, var(--lhd-primary));
  color: #fff;
  border-radius: var(--lhd-radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  gap: 1.5rem;
  align-items: center;
  box-shadow: var(--lhd-shadow-lg);
}
@media (min-width: 992px) { .lhd-plan { grid-template-columns: 1.6fr auto; } }
.lhd-plan h2 { color: #fff; margin-bottom: 0.75rem; }
.lhd-plan p { color: rgba(255, 255, 255, 0.93); margin: 0; }
.lhd-plan__price {
  display: inline-block;
  font-family: var(--lhd-font-head);
  font-weight: 800;
  color: var(--lhd-sun);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

/* ============================ reviews / CTA bands with photo ============================ */

.lhd-band {
  position: relative;
  background-color: var(--lhd-navy);
  background-size: cover;
  /* Top-anchored for the same reason as .lhd-hero/.lhd-phero: this band is not
     currently used with a photo background on this site (only the plain
     gradient .lhd-band--plain variant is), but keep it consistent in case a
     photo band is ever added here. */
  background-position: center top;
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.lhd-band__scrim { position: absolute; inset: 0; background: rgba(11, 26, 56, 0.72); }
.lhd-band__inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.lhd-band h2 { color: #fff; }
.lhd-band p { color: rgba(255, 255, 255, 0.9); }
.lhd-band .lhd-h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, var(--lhd-sun), #fff); }
/* A ported numbered list (e.g. the "Happy Patients" band's 3-step process) sits
   inside this centred, text-align:center band. A plain <ol> is block-level, so
   under text-align:center its default left-indent marker stays pinned to the
   left edge of the full-width band while the (centered) text floats away from
   it — the number and its item read as unrelated. Made inline-block so the
   list shrinks to its content width and is centered as ONE unit by the band's
   text-align, with left-aligned text inside so each number sits directly next
   to its own line. */
.lhd-band ol {
  display: inline-block;
  text-align: left;
  margin: 1.5rem auto;
  padding-left: 1.4rem;
}
.lhd-band ol li { color: #fff; margin-bottom: 0.5rem; }
.lhd-band ol li:last-child { margin-bottom: 0; }
/* Body-copy links ported into a CTA band (e.g. "our highly skilled Drs." on
   the General Dentist page) otherwise inherit the site-wide `a { color:
   var(--lhd-blue) }` default — a mid blue that is nearly invisible on this
   band's dark navy background. Style them white + underlined so they read as
   links against the dark scrim instead of blending into the surrounding text. */
.lhd-band a:not(.lhd-btn) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.lhd-band a:not(.lhd-btn):hover { color: var(--lhd-sun); }

/* ============================ doctors ============================ */

.lhd-doctor__credential {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  color: var(--lhd-navy);
  background: var(--lhd-wash);
  border: 1px solid var(--lhd-line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1rem;
  text-decoration: none;
}
/* Only real links get the hover affordance — "Serving Laguna Niguel Since …"
   is a plain <span> (not clickable) sharing this badge class, so scoping the
   hover to `a.lhd-doctor__credential` leaves it static while the PPO badge
   and the CA-license "verify" link (both real <a> elements) keep their
   hover state. */
a.lhd-doctor__credential:hover { border-color: var(--lhd-blue); color: var(--lhd-blue); }

/* ============================ steps ============================ */

.lhd-steps { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: lhdstep; }
@media (min-width: 576px) { .lhd-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .lhd-steps { grid-template-columns: repeat(4, 1fr); } }
.lhd-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 2.25rem 1.35rem 1.5rem;
  box-shadow: var(--lhd-shadow);
}
.lhd-step::before {
  counter-increment: lhdstep;
  content: counter(lhdstep);
  position: absolute;
  top: -1.1rem;
  left: 1.35rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lhd-blue);
  color: #fff;
  font-family: var(--lhd-font-head);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(31, 90, 160, 0.3);
}
.lhd-step h3 { font-size: var(--lhd-step-1); margin-bottom: 0.5rem; }
.lhd-step p { margin: 0; font-size: var(--lhd-step--1); }

/* ==================== practice info panel (Our Practice page) ==================== */
/* Sits directly under the 4 numbered "What to Expect" .lhd-step cards. These
   two items (location, hours) are not sequential steps, so they deliberately
   do NOT reuse .lhd-step's ::before counter badge — an icon circle instead
   makes clear this is reference info, not step 5 and 6 of the process. */
.lhd-infogrid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; max-width: 46rem; margin: 0 auto; }
@media (min-width: 576px) { .lhd-infogrid { grid-template-columns: 1fr 1fr; } }
.lhd-infocard {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--lhd-shadow);
}
.lhd-infocard__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  margin-bottom: 0.9rem;
}
.lhd-infocard h3 { font-size: var(--lhd-step-1); color: var(--lhd-navy); margin-bottom: 0.5rem; }
.lhd-infocard p { margin: 0; font-size: var(--lhd-step--1); color: var(--lhd-body); }
.lhd-infocard__hours { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: var(--lhd-step--1); }
.lhd-infocard__hours li { display: flex; justify-content: space-between; gap: 0.75rem; border-bottom: 1px dashed var(--lhd-line); padding-bottom: 0.45rem; color: var(--lhd-body); }
.lhd-infocard__hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.lhd-infocard__hours li span:first-child { color: var(--lhd-navy); font-weight: 600; }

/* ============================ FAQ ============================ */

/* Opt-in "Related Articles" aside (FaqList `relatedLinks`) — the accordion
   keeps its own 54rem measure inside a wider column instead of centering
   full-width, and a narrow card of internal links sits beside it. */
.lhd-faq-with-aside { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 992px) { .lhd-faq-with-aside { grid-template-columns: 2fr 1fr; align-items: start; } }
.lhd-faq-with-aside .lhd-faq { max-width: none; margin: 0; }
.lhd-faq-aside {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
  padding: 1.5rem;
}
.lhd-faq-aside__photo { width: 100%; height: auto; border-radius: var(--lhd-radius); margin-bottom: 1.1rem; }
.lhd-faq-aside__title { font-size: var(--lhd-step-0); color: var(--lhd-navy); margin-bottom: 0.9rem; }
/* Second (and later) titled list in the same aside — e.g. Invisalign's
   "Related Services" + "Related Articles" (FaqList `relatedGroups`) — needs
   breathing room above it so the two lists read as distinct groups. */
.lhd-faq-aside__list + .lhd-faq-aside__title { margin-top: 1.5rem; }
.lhd-faq-aside__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.lhd-faq-aside__list li { border-bottom: 1px dashed var(--lhd-line); }
.lhd-faq-aside__list li:last-child { border-bottom: 0; }
.lhd-faq-aside__list a {
  display: block;
  padding: 0.65rem 0.1rem;
  color: var(--lhd-ink);
  font-weight: 600;
  text-decoration: none;
}
/* "Related Services"/"Related Articles" aside sits on a white card — orange,
   not blue, per the sitewide light-background link rule. */
.lhd-faq-aside__list a:hover { color: var(--lhd-sun-dark); }

.lhd-faq { max-width: 54rem; margin: 0 auto; display: grid; gap: 0.85rem; }
.lhd-faq__item {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius);
  box-shadow: 0 4px 14px rgba(23, 33, 109, 0.05);
  overflow: hidden;
}
.lhd-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step-1);
  font-weight: 700;
  color: var(--lhd-navy);
}
.lhd-faq__q::-webkit-details-marker { display: none; }
.lhd-faq__q::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f5aa0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.lhd-faq__item[open] .lhd-faq__q::after { transform: rotate(180deg); }
.lhd-faq__item[open] .lhd-faq__q { background: var(--lhd-wash); }
.lhd-faq__a { padding: 1.1rem 1.25rem 1.35rem; border-top: 1px solid var(--lhd-line); }
.lhd-faq__a p { color: var(--lhd-body); }
.lhd-faq__a p:last-child { margin-bottom: 0; }
.lhd-faq__ask {
  background: var(--lhd-cream);
  border-left: 3px solid var(--lhd-sun);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  font-size: var(--lhd-step--1);
  color: var(--lhd-ink);
}
.lhd-faq__ask strong { display: block; font-family: var(--lhd-font-head); color: var(--lhd-navy); }

.lhd-faq__group {
  font-size: var(--lhd-step-2);
  color: var(--lhd-navy);
  margin: 1.75rem 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--lhd-primary);
}
.lhd-faq__group:first-child { margin-top: 0; }

/* Opt-in per-page layout (FaqList `splitGroups`): each topic group gets its
   own centered heading, its question list, then its image — all full-width
   and stacked, questions first. Naturally responsive since nothing splits
   into columns. */
.lhd-faqsplit__group:last-child { margin-bottom: 0; }
.lhd-faqsplit__media { max-width: 40rem; }
.lhd-faqsplit__media img { border-radius: var(--lhd-radius-lg); box-shadow: var(--lhd-shadow); }
.lhd-faqsplit__plain { max-width: 54rem; }
.lhd-faqsplit__plain:last-child { margin-bottom: 0; }

/* Opt-in two-level layout (FaqList `categories`, used by /faqs-2/): a
   centered category heading, then each subcategory left-aligned with its
   question list and image in a 6/6 row. Reuses .lhd-split's existing grid —
   1 column under 992px, 2 columns above — for the same responsive behavior
   as every other split band on the site. Spacing/alignment that maps onto a
   stock Bootstrap utility (mb-5, mt-4, mt-3, mw-100, m-0, justify-content-*)
   is applied inline in FaqList.astro instead of a rule here — only the
   :last-child override and the 5rem sub-heading gap (off Bootstrap's scale)
   need real CSS. */
.lhd-faqcats__cat:last-child { margin-bottom: 0; }
/* Everything in a category — the subcategory heading AND the question list —
   shares .lhd-faq's 54rem measure, so the heading's left edge lines up with
   the questions under it instead of running the full container width. */
.lhd-faqcats__sub { max-width: 54rem; margin: 1.25rem auto 0; }
.lhd-faqcats__sub:first-of-type { margin-top: 0; }
/* Each subcategory is itself a <details>, so a long FAQ page opens as a short
   list of topics rather than every question at once. Same chevron + navy rule
   as .lhd-faq__group/.lhd-faq__q so the two accordion levels read as one
   family, one step larger at the topic level. */
.lhd-faqcats__grouptoggle {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step-2);
  font-weight: 700;
  color: var(--lhd-navy);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--lhd-primary);
}
.lhd-faqcats__grouptoggle::-webkit-details-marker { display: none; }
.lhd-faqcats__grouptoggle::after {
  content: '';
  flex: none;
  margin-left: auto;
  margin-top: 0.3em;
  width: 1.1rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f5aa0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.lhd-faqcats__group[open] .lhd-faqcats__grouptoggle::after { transform: rotate(180deg); }
.lhd-faqcats__group .lhd-faq { margin-top: 1rem; }

/* Banner shown in place of page body copy when a ported page has no blocks
   (currently only the membership page — see [...slug].astro). A bordered,
   wash-blue card with a phone CTA reads as an intentional call-to-action strip
   rather than a lone sentence floating in the page. */
.lhd-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 1.5rem;
  background: var(--lhd-wash);
  border: 1px solid var(--lhd-line);
  border-left: 4px solid var(--lhd-sun);
  border-radius: var(--lhd-radius-lg);
  padding: 1.5rem 1.75rem;
}
.lhd-callout p { margin: 0; color: var(--lhd-ink); font-size: var(--lhd-step-0); font-weight: 500; flex: 1 1 20rem; }
.lhd-callout .lhd-btn { flex: none; }

.lhd-safety {
  max-width: 54rem;
  margin: 2rem auto 0;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-left: 4px solid var(--lhd-blue);
  border-radius: var(--lhd-radius);
  padding: 1.35rem 1.5rem;
}
.lhd-safety h3 { font-size: var(--lhd-step-1); margin-bottom: 0.5rem; }
.lhd-disclaimer {
  max-width: 54rem;
  margin: 1.25rem auto 0;
  font-size: var(--lhd-step--1);
  font-style: italic;
  color: #6b7a89;
}

/* ============================ footer ============================ */

.lhd-footer { background: var(--lhd-navy); color: #cfdcea; }
.lhd-footer a { color: #cfdcea; text-decoration: none; }
.lhd-footer a:hover { color: var(--lhd-sun); text-decoration: none; }
/* padding-block, NOT the `padding: <v> 0 <v>` shorthand this used to be. This
   element is also a Bootstrap `.container`, whose 12px horizontal padding is
   what cancels the -12px negative margins on the `.row` inside it. Zeroing
   left/right let those negative margins escape, so the row was 24px wider than
   the viewport and the whole page scrolled sideways on mobile (a Google
   mobile-UX flag). Setting only the block axis leaves the container padding
   intact. Same trap applies to any `.container` here — never set its
   horizontal padding to 0. */
.lhd-footer__top { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.lhd-footer h4, .lhd-footer h5, .lhd-footer h6 { color: #fff; font-family: var(--lhd-font-head); }
.lhd-footer__brand img { width: 168px; height: auto; background: #fff; border-radius: 12px; padding: 0.5rem; }
.lhd-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: var(--lhd-step--1); }
/* A heading-only entry inside a link list (e.g. "Patient Education" grouped
   under "Patient Resources" rather than getting its own top-level column —
   see the FooterLinkItem.heading flag in site-data.ts). Not a link: smaller,
   muted-white, uppercase, with a little breathing room above it so it reads
   as a sub-group label, not another clickable item. */
.lhd-footer__sublabel {
  margin-top: 0.35rem;
  font-family: var(--lhd-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.lhd-footer__hours { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; display: grid; gap: 0.4rem; }
/* Column is only 3/12 wide, so day + time must not wrap onto a second line
   (that broke the neat list into a ragged one). white-space: nowrap on each
   half, a tight 0.5rem gap and the slightly smaller font above keep even the
   longest row ("Wednesday" + "8:00 AM - 6:00 PM") on one line all the way
   down to the 992px (iPad-landscape) container width. */
.lhd-footer__hours li { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.14); padding-bottom: 0.4rem; }
.lhd-footer__hours li span { white-space: nowrap; }
.lhd-footer__hours li:last-child { border-bottom: 0; }
.lhd-footer__note { font-size: var(--lhd-step--1); color: var(--lhd-sun); margin-top: 0.75rem; }
.lhd-footer__social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.lhd-footer__social a {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lhd-footer__social a:hover { background: var(--lhd-sun); transform: translateY(-2px); }
.lhd-footer__social svg { width: 1.1rem; height: 1.1rem; fill: #fff; }
.lhd-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1.15rem 0;
  font-size: var(--lhd-step--1);
}

/* Contact form (kept on this site so leads reach /api/contact). */
.lhd-form {
  background: #fff;
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
}
.lhd-form h4 { color: var(--lhd-navy); margin-bottom: 0.35rem; }
.lhd-form__hint { font-size: var(--lhd-step--1); color: var(--lhd-body); margin-bottom: 1.1rem; }
.lhd-form .form-control {
  border: 1px solid var(--lhd-line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  font-size: var(--lhd-step-0);
  color: var(--lhd-ink);
  background: #fff;
}
.lhd-form .form-control:focus {
  border-color: var(--lhd-sky);
  box-shadow: 0 0 0 3px rgba(77, 151, 194, 0.18);
}
.lhd-form textarea.form-control { min-height: 7.5rem; resize: vertical; }
.lhd-form .lhd-err { display: block; font-size: 0.8rem; color: #c0392b; margin-top: 0.3rem; }
.lhd-form .lhd-btn { width: 100%; }

/* Floating call button (mobile-first quick tap). */
.lhd-callfab {
  position: fixed;
  right: 0.9rem;
  bottom: 1rem;
  z-index: 1040;
  box-shadow: var(--lhd-shadow-lg);
}

@media (max-width: 575.98px) {
  .lhd-offer { max-width: none; }
  .lhd-callfab { left: 0.9rem; right: 0.9rem; }
}

/* ============ light contact block (top half of Footer.astro) ============ */

.lhd-contact { margin: 0 0 1.75rem; display: grid; gap: 1rem; }
.lhd-contact li { display: flex; gap: 0.85rem; align-items: flex-start; }
.lhd-contact svg { flex: none; margin-top: 0.25rem; color: var(--lhd-blue); }
.lhd-contact strong {
  display: block;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lhd-sky);
}
.lhd-contact a { color: var(--lhd-ink); text-decoration: none; font-weight: 600; }
.lhd-contact a:hover { color: var(--lhd-blue); }

.lhd-contact__note { font-size: var(--lhd-step--1); font-weight: 600; color: var(--lhd-sun-dark); margin: 0.75rem 0 0; }

.lhd-mapcard {
  border-radius: var(--lhd-radius-lg);
  overflow: hidden;
  box-shadow: var(--lhd-shadow);
  border: 1px solid var(--lhd-line);
}
.lhd-mapcard iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Band without a photo (the closing "Get Started" call to action). */
.lhd-band--plain { background-image: linear-gradient(120deg, var(--lhd-navy), var(--lhd-primary-deep) 66%, var(--lhd-primary)); }
.lhd-band--plain .lhd-band__scrim { background: none; }
/* .lhd-ctarow is a flex row (not centered by default — see PageBlocks.astro),
   but every `.lhd-band` is itself centred text; without this a lone CTA
   button sits flush left instead of under the centred heading/paragraph. */
.lhd-band .lhd-ctarow { justify-content: center; }

/* ============ small practice-info sidebar (Red Light Therapy intro) ============ */
/* A narrower companion to .lhd-split for pages that pair their opening copy
   with a compact "get in touch" card instead of a photo — reuses the same
   contact/hours/licence pieces as Footer.astro's #contact section and
   .lhd-infocard__hours, just at card scale. */
@media (min-width: 992px) { .lhd-split--sidebar { grid-template-columns: 2fr 1fr; } }
.lhd-sidebar {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
  padding: 1.5rem;
  align-self: start;
}
.lhd-sidebar__map { margin-bottom: 1.25rem; }
.lhd-sidebar__map iframe { height: 180px; }
.lhd-sidebar__contact { margin-bottom: 1.25rem; }
.lhd-sidebar__title { font-size: var(--lhd-step-0); color: var(--lhd-navy); margin-bottom: 0.6rem; }
.lhd-sidebar .lhd-infocard__hours { margin-bottom: 1.25rem; }
.lhd-sidebar .lhd-doctor__credential { display: flex; justify-content: center; text-align: center; margin-bottom: 1rem; }
.lhd-sidebar .lhd-btn { display: block; text-align: center; }

/* ============ photo with a caption overlay (Red Light Therapy banner) ============ */
.lhd-bannerphoto { position: relative; }
.lhd-bannerphoto__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: linear-gradient(120deg, rgba(15, 32, 74, 0.88), rgba(43, 113, 155, 0.8));
  color: #fff;
  border-radius: var(--lhd-radius);
  padding: 0.9rem 1.15rem;
  display: grid;
  gap: 0.15rem;
}
.lhd-bannerphoto__eyebrow {
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lhd-sun);
}
.lhd-bannerphoto__title { font-family: var(--lhd-font-head); font-weight: 800; font-size: var(--lhd-step-1); }

/* Full-width photo stacked above a section's text (Sleep Apnea Treatment's
   "Oral Appliance Therapy Explained" — a photo banner, not a side-by-side
   split). */
.lhd-stackphoto { width: 100%; height: auto; border-radius: var(--lhd-radius-lg); box-shadow: var(--lhd-shadow); margin-bottom: 2rem; }
.lhd-band .lhd-eyebrow { color: var(--lhd-sun); }

/* ==========================================================================
   Interior pages (src/pages/[...slug].astro): compact photo/gradient hero,
   breadcrumb, and the block types the ported markdown produces.
   ========================================================================== */

.lhd-phero {
  position: relative;
  background-color: var(--lhd-navy);
  background-size: cover;
  /* Every ported interior page, the blog index and every blog post share this
     one hero rule, so this single default covers all of them site-wide.
     Was a hard "center top" (0% down); nudged to 20% down as a sitewide
     starting point after the Cosmetic Dentistry hero photo (a person) was
     cropping her chin/shoulders at the very top-anchored position — shows a
     little more of the lower part of each photo while still favoring the
     top. A page whose own photo needs a different balance can override this
     per-page via `heroPosition` in its JSON (see cosmetic-dentistry.json),
     which renders as a higher-specificity inline style. */
  background-position: center 20%;
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
/* Fixed 545px height on desktop only (451px until 2026-09-17), per owner request, for every interior
   hero (ported pages, blog index, blog posts) — NOT the homepage, which keeps
   its own fluid .lhd-hero height. min-height (not height) so a page with an
   unusually long h1/tagline can still grow rather than clip; flex +
   align-items centers the crumbs/title/CTA block inside it, same technique
   .lhd-hero already uses. Below this breakpoint the fluid clamp() padding
   above still governs the height, so mobile/tablet are unaffected. */
@media (min-width: 992px) {
  .lhd-phero {
    min-height: 545px;
    display: flex;
    align-items: center;
    padding-block: 0;
  }
}
.lhd-phero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 32, 74, 0.88) 0%, rgba(43, 113, 155, 0.78) 55%, rgba(77, 151, 194, 0.5) 100%);
}
.lhd-phero--plain { background-image: linear-gradient(120deg, var(--lhd-navy), var(--lhd-primary-deep) 66%, var(--lhd-primary)); }
.lhd-phero--plain .lhd-phero__scrim { background: none; }
.lhd-phero__inner { position: relative; z-index: 2; max-width: 52rem; }
.lhd-phero h1 { color: #fff; margin-bottom: 0.75rem; }
.lhd-phero__tagline { color: rgba(255, 255, 255, 0.93); font-size: var(--lhd-step-1); margin-bottom: 1.5rem; }
.lhd-phero__tagline a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.lhd-phero__tagline a:hover { color: var(--lhd-sun); }
.lhd-phero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.lhd-crumbs {
  position: relative;
  z-index: 2;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0 0 1rem;
  font-size: var(--lhd-step--1);
  color: rgba(255, 255, 255, 0.8);
}
.lhd-crumbs a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.lhd-crumbs a:hover { color: #fff; text-decoration: underline; }
.lhd-crumbs li + li::before { content: '/'; margin-right: 0.4rem; opacity: 0.6; }

/* Ported page body. Max width for readability; every block styled here. */
.lhd-page { max-width: 54rem; margin-inline: auto; }
.lhd-page > h2 { margin: 2.5rem 0 1rem; clear: both; }
.lhd-page > h2:first-child { margin-top: 0; }
.lhd-page > h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-page > h3 { margin: 2rem 0 0.75rem; font-size: var(--lhd-step-1); }
.lhd-page > h4 { margin: 1.75rem 0 0.6rem; font-size: var(--lhd-step-0); color: var(--lhd-primary-deep); text-transform: uppercase; letter-spacing: 0.06em; clear: both; }

/* A headshot floated beside the paragraphs right after it (see PageBlocks.astro's
   "portrait" block — currently only the "Meet the Doctors" page). `clear: both`
   on the h2/h4 rules above means the float can never bleed into the next
   doctor's heading; it only ever sits next to that one doctor's own bio text. */
.lhd-portrait {
  float: right;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: var(--lhd-shadow);
  margin: 0.25rem 0 1.25rem 1.75rem;
}
.lhd-portrait--left { float: left; margin: 0.25rem 1.75rem 1.25rem 0; }
@media (max-width: 575.98px) {
  .lhd-portrait, .lhd-portrait--left {
    float: none;
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto 1.25rem;
  }
}
/* .lhd-portrait circle in a flex row; only the size + crop Bootstrap cannot do. */
.lhd-portrait-sm { width: 200px; height: 200px; object-fit: cover; object-position: top; }
@media (max-width: 575.98px) {
  .lhd-portrait-sm { width: 160px; height: 160px; }
}
.lhd-page p { color: var(--lhd-body); }
.lhd-page > .lhd-btn { margin: 0.5rem 0 1.5rem; }

.lhd-page ol { padding-left: 1.25rem; margin: 1.25rem 0; display: grid; gap: 0.5rem; color: var(--lhd-body); }
.lhd-page ol::marker { color: var(--lhd-primary-deep); font-weight: 700; }

/* Their service link columns (see PageBlocks.astro's "services" group: a
   single-item `ul` badge followed by one or more `links` blocks). Each
   original `links` block becomes its own icon-topped column instead of one
   shared auto-fill grid, so item counts stay grouped exactly as authored
   instead of wrapping unpredictably across grid tracks. */
.lhd-services { margin: 1.75rem 0; }
.lhd-services__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  font-family: var(--lhd-font-head);
  font-weight: 800;
  font-size: var(--lhd-step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}
.lhd-services__badge svg { width: 1.1em; height: 1.1em; flex: none; }

.lhd-servicecols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem 2.25rem;
}
.lhd-servicecol__icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  margin-bottom: 0.9rem;
}
.lhd-servicecol__icon svg { width: 1.4rem; height: 1.4rem; }
.lhd-servicecol__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
/* Specificity must match/beat `.lhd-prose a:not(.lhd-btn)` (0,2,1) — .lhd-page
   is the same element as .lhd-prose (see the "Ported page body" rules below),
   so without the extra `.lhd-page` ancestor class here the generic prose-link
   underline would keep winning and reintroduce the permanent-underline look
   this replaces. */
.lhd-page .lhd-servicecol__list a { color: var(--lhd-ink); text-decoration: none; font-weight: 600; }
/* Orange, not blue, on hover — these service columns sit on the same
   light page background as `.lhd-prose`/`.lhd-list` links above. */
.lhd-page .lhd-servicecol__list a:hover { color: var(--lhd-sun-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Comparison tables (laser vs traditional, CPAP vs appliance, …). */
.lhd-tablewrap { overflow-x: auto; margin: 1.5rem 0; border-radius: var(--lhd-radius); border: 1px solid var(--lhd-line); }
.lhd-table { width: 100%; border-collapse: collapse; min-width: 34rem; background: #fff; }
.lhd-table th, .lhd-table td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--lhd-line); vertical-align: top; font-size: var(--lhd-step--1); }
.lhd-table thead th { background: var(--lhd-wash); color: var(--lhd-navy); font-family: var(--lhd-font-head); }
.lhd-table tbody tr:last-child td { border-bottom: 0; }

/* Review videos (YouTube shorts, 9:16). */
.lhd-video { margin: 1.5rem 0; max-width: 22rem; }
.lhd-video__frame { position: relative; padding-top: 177.78%; border-radius: var(--lhd-radius-lg); overflow: hidden; box-shadow: var(--lhd-shadow); background: #000; }
.lhd-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   Runs the practice's own pages lay out side by side (see PageBlocks.astro):
   paired CTA buttons, and their 3-column video-testimonial rows.
   ===================================================================== */
.lhd-ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}
.lhd-ctarow .lhd-btn { margin: 0; }

.lhd-vgrid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.75rem 0;
}
@media (max-width: 900px) { .lhd-vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lhd-vgrid { grid-template-columns: 1fr; } }

.lhd-vcard { margin: 0; }
.lhd-vcard__title {
  margin: 0.9rem 0 0.35rem;
  font-size: var(--lhd-step-1);
}
.lhd-vcard__quote {
  margin: 0;
  color: var(--lhd-body);
  font-size: var(--lhd-step--1);
  line-height: 1.6;
}

.lhd-citation { font-size: 0.82rem; color: #6b7a89; margin: 0.35rem 0 1.25rem; }
.lhd-citation a { color: #6b7a89; }



/* ==========================================================================
   Buttons always win.
   Every button label follows the header's "Schedule Online" pill: readable at
   rest, WHITE on hover. These `a.lhd-btn…` selectors are deliberately the most
   specific colour rules in the file and sit last, so no descendant link rule
   (.lhd-prose a, .lhd-footer a, a future one someone adds) can ever recolour a
   button's text into its own background again.
   ========================================================================== */

a.lhd-btn, a.lhd-btn:hover, a.lhd-btn:focus { text-decoration: none; }

a.lhd-btn--sun,
a.lhd-btn--primary { color: #23303d; }
a.lhd-btn--sun:hover, a.lhd-btn--sun:focus-visible,
a.lhd-btn--primary:hover, a.lhd-btn--primary:focus-visible { color: #fff; }

a.lhd-btn--ghost { color: var(--lhd-sun-dark); }
a.lhd-btn--ghost:hover, a.lhd-btn--ghost:focus-visible { color: #fff; }

a.lhd-btn--light { color: var(--lhd-navy); }
a.lhd-btn--light:hover, a.lhd-btn--light:focus-visible { color: #fff; }

a.lhd-btn--outline-light,
a.lhd-btn--outline-light:hover,
a.lhd-btn--outline-light:focus-visible { color: #fff; }



/* ===========================================================================
   Blog Insights — /blog-insights/ index and the post pages
   ---------------------------------------------------------------------------
   The index renders EVERY post up front and the script only toggles [hidden],
   so these rules must never assume a card is present or absent: layout comes
   from the grid, not from counting children.
   =========================================================================== */

/* --- filter bar ---------------------------------------------------------- */
.lhd-bfilter {
  border-bottom: 1px solid var(--lhd-line);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.lhd-bfilter__label {
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lhd-primary-deep);
  margin: 0 0 0.85rem;
}

.lhd-bfilter__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lhd-bfilter__chip {
  appearance: none;
  border: 1px solid var(--lhd-line);
  background: #fff;
  color: var(--lhd-body);
  font-family: var(--lhd-font-body);
  font-size: var(--lhd-step--1);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.lhd-bfilter__chip:hover { border-color: var(--lhd-primary); color: var(--lhd-primary-deep); }

.lhd-bfilter__chip.is-active {
  background: var(--lhd-primary-deep);
  border-color: var(--lhd-primary-deep);
  color: #fff;
}

.lhd-bcount {
  font-size: var(--lhd-step--1);
  color: var(--lhd-body);
  margin-bottom: 1.5rem;
}

/* --- card grid ----------------------------------------------------------- */
.lhd-bgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

@media (max-width: 991px) { .lhd-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 575px) { .lhd-bgrid { grid-template-columns: minmax(0, 1fr); } }

.lhd-bcard {
  display: flex;
  flex-direction: column;
  background: var(--lhd-paper);
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lhd-bcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--lhd-shadow);
  border-color: var(--lhd-mist);
}

/* `hidden` must beat `display: flex` — the filter relies on it. */
.lhd-bcard[hidden] { display: none; }

.lhd-bcard__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--lhd-wash);
  overflow: hidden;
}

.lhd-bcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.lhd-bcard:hover .lhd-bcard__media img { transform: scale(1.04); }

.lhd-bcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.35rem 1.4rem;
  flex: 1 1 auto;
}

.lhd-bcard__cat {
  align-self: flex-start;
  appearance: none;
  border: 0;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  font-family: var(--lhd-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.lhd-bcard__cat:hover { background: var(--lhd-primary-deep); color: #fff; }
.lhd-bcard__cat--static { cursor: default; }
.lhd-bcard__cat--static:hover { background: var(--lhd-wash); color: var(--lhd-primary-deep); }

.lhd-bcard__title { font-size: var(--lhd-step-1); line-height: 1.3; margin: 0; }

.lhd-bcard__title a {
  color: var(--lhd-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--lhd-sun), var(--lhd-sun));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.18s ease;
}

.lhd-bcard__title a:hover { color: var(--lhd-primary-deep); background-size: 100% 2px; }

.lhd-bcard__excerpt {
  font-size: var(--lhd-step--1);
  color: var(--lhd-body);
  margin: 0;
  flex: 1 1 auto;
}

.lhd-bcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--lhd-body);
  opacity: 0.85;
  margin: 0;
}

.lhd-bempty { text-align: center; color: var(--lhd-body); padding: 3rem 0; }
.lhd-bmore { display: flex; justify-content: center; margin-top: 2.5rem; }
.lhd-bmore [hidden] { display: none; }

/* --- post page ----------------------------------------------------------- */
/* Posts always have a photo hero; the scrim is heavier than the page hero's
   because the title sits over an editorial image rather than a brand gradient. */
.lhd-phero--post .lhd-phero__scrim {
  background: linear-gradient(180deg, rgba(18, 32, 47, 0.55), rgba(18, 32, 47, 0.82));
}

.lhd-phero--post .lhd-phero__inner { max-width: 54rem; }

.lhd-bpost__cat {
  display: inline-block;
  background: var(--lhd-sun);
  color: #23303d;
  font-family: var(--lhd-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  margin-bottom: 0.9rem;
}

.lhd-bpost__cat:hover { background: var(--lhd-sun-dark); color: #fff; }

.lhd-bpost__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--lhd-step--1);
  margin: 0.9rem 0 0;
}

/* Article body. `.lhd-page` sets the measure; these rules cover the elements
   the ported WordPress copy brings that the block-built pages never emit. */
.lhd-bpost h2 { margin: 2.5rem 0 1rem; }
.lhd-bpost h2:first-child { margin-top: 0; }
.lhd-bpost h3 { margin: 2rem 0 0.75rem; font-size: var(--lhd-step-1); }
.lhd-bpost h4 { margin: 1.75rem 0 0.6rem; font-size: var(--lhd-step-0); }

.lhd-bpost ul, .lhd-bpost ol {
  padding-left: 1.25rem;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.5rem;
  color: var(--lhd-body);
}

.lhd-bpost li::marker { color: var(--lhd-primary-deep); font-weight: 700; }

.lhd-bpost img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lhd-radius);
  margin: 1.75rem 0;
}

/* Ported tables are wide and unpredictable — scroll them in their own box so
   the page body never scrolls sideways on a phone. The wrapper is emitted by
   the importer, not by script, so it is there before first paint. */
.lhd-tablewrap {
  overflow-x: auto;
  margin: 1.75rem 0;
  -webkit-overflow-scrolling: touch;
}

.lhd-bpost table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--lhd-step--1);
}

.lhd-bpost table :is(td, th) {
  border: 1px solid var(--lhd-line);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  color: var(--lhd-body);
}

.lhd-bpost table tr:first-child :is(td, th) { background: var(--lhd-wash); color: var(--lhd-ink); }

.lhd-bpost blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--lhd-sun);
  color: var(--lhd-ink);
  font-style: italic;
}

.lhd-bpost__cta {
  max-width: 54rem;
  margin: 3rem auto 0;
  background: var(--lhd-wash);
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 1.75rem;
}

.lhd-bpost__cta h2 { font-size: var(--lhd-step-2); margin-bottom: 0.6rem; }
.lhd-bpost__cta p { margin-bottom: 1.25rem; }

.lhd-bpost__relhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.lhd-bpost__relhead .lhd-h2 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .lhd-bcard, .lhd-bcard__media img { transition: none; }
  .lhd-bcard:hover { transform: none; }
  .lhd-bcard:hover .lhd-bcard__media img { transform: none; }
}


/* ===========================================================================
   Scroll motion — the site-side half of core's <ScrollReveal />
   ---------------------------------------------------------------------------
   Core owns the reveal mechanism and ships the hidden/animating states. What
   belongs HERE is only what is specific to this brand: which of our classes
   react to scroll position, and what colour the reading bar is.

   `html.dsr-on` is present only when the reveal script is actually running and
   motion is allowed, so anything keyed on it is automatically off for a visitor
   with JS disabled or "reduce motion" set. Keep it that way.
   =========================================================================== */

/* Anchor jumps (the nav's #contact, the blog's filter) glide instead of
   teleporting. Guarded, because a forced smooth scroll is genuinely unpleasant
   for people who asked for less motion — and for anyone using find-in-page. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The sticky header tightens and lifts once the page has moved, so it reads as
   a bar sitting above the content rather than part of it. Only the shadow and
   the padding change — never the height of a sticky element by enough to shift
   what the visitor is reading. */
.lhd-header {
  transition:
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.dsr-scrolled .lhd-header {
  box-shadow: 0 6px 28px rgba(23, 33, 109, 0.16);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}

.lhd-header .navbar { transition: padding 0.3s ease; }
.dsr-scrolled .lhd-header .navbar { padding-block: 0.3rem; }

.lhd-header__logo img { transition: width 0.3s ease; }
.dsr-scrolled .lhd-header__logo img { width: 112px; }

/* Reading progress on article pages, in the brand's CTA orange over blue. */
.dsr-progress__fill {
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}

/* The hero photo drifts up a touch as it is revealed, which reads as depth
   against the copy sliding in over it. Contained by .lhd-hero's own
   `overflow: hidden`, and vertical only, so it cannot widen the page. */
@media (prefers-reduced-motion: no-preference) {
  html.dsr-on .lhd-hero { animation: lhd-hero-settle 1.4s var(--dsr-ease, ease-out) both; }
}

/* Drifts down into the same bottom-anchored rest position .lhd-hero now uses
   at all times, so the entrance animation never settles higher than the crop
   the page loads with. */
@keyframes lhd-hero-settle {
  from { background-position: center 94%; }
  to   { background-position: center bottom; }
}


/* --------------------------------------------------------------------------
   Blog post inline images that sit beside their related paragraph instead of
   stacking in their own block (used by root-canal-treatment-laguna-niguel-ca
   and available to any future post). Floats on desktop/tablet, stacks full
   width on small phones. */
.lhd-bpost__inline-img {
  display: block;
  width: 280px;
  max-width: 45%;
  height: auto;
  border-radius: 12px;
  margin: 0.25rem 0 1.25rem;
}
.lhd-bpost__inline-img--left { float: left; margin-right: 1.75rem; }
.lhd-bpost__inline-img--right { float: right; margin-left: 1.75rem; }
.lhd-bpost h2, .lhd-bpost h3 { clear: both; }
@media (max-width: 576px) {
  .lhd-bpost__inline-img--left,
  .lhd-bpost__inline-img--right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}