/* ============================================================================
   LAC MEDICAL — SHARED SHELL STYLESHEET
   assets/shell.css  ·  Phase 3 / ticket T2  ·  Agent C (visual)
   Section 7 (nav) + assorted selectors reconciled by the T2 integrator against
   the markup actually shipped in tools/shell_parts/ and assets/shell-nav.js.

   HOW THIS FILE IS LOADED
   -----------------------
   Injected by tools/build_shell.py immediately before </head>, i.e. AFTER each
   page's own inline <style> block. Source order is therefore on our side: a
   rule here beats a page-inline rule of EQUAL specificity. That is the whole
   override strategy — !important is a last resort and every use is commented.

   TWO JOBS
   --------
   1. Style the shared shell (all `.lac-`-prefixed markup written by Agent A
      [header/nav] and Agent B [footer/appointment block]).
   2. A sitewide visual tune-up of the EXISTING page classes (.hero, .lede,
      card grids, section rhythm, mobile). Tune-up, not rebrand — the palette,
      button shapes, borders and shadows below are copied from index.html.

   NAMESPACING
   -----------
   Shell markup is `.lac-`-prefixed only. The legacy `.topbar` / `.header` /
   `.header-nav` / bare `footer` rules in each page's inline <style> are simply
   left alone: their markup is being replaced, so those rules go unused. We do
   not fight them.

   NO external resources. No @import. No fonts beyond the Montserrat +
   Source Sans 3 already loaded by every page. No analytics of any kind.

   BREAKPOINTS (mobile-first)
   --------------------------
     (default)          phone, 320px and up
     >= 560px           large phone / small tablet
     >= 768px           tablet
     >= 860px           desktop nav appears; <=859.98px is the burger +
                        off-canvas panel. 859.98 == MOBILE_MAX in
                        assets/shell-nav.js. The two halves tile with no gap.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. TOKENS
   Re-declared per the shell contract so the shell is self-sufficient on stub
   pages. Values are IDENTICAL to every page's inline :root, so redeclaring is
   a no-op on existing pages.
   ------------------------------------------------------------------------ */
:root {
  --navy: #0A005C;
  --navy-soft: #1a1075;
  --cream: #faf6ed;
  --cream-warm: #f5efe0;
  /* --gold is the brand accent and is DECORATIVE ONLY: button fills, rules,
     borders, dots, the focus halo. At 2.92:1 on --cream it fails WCAG 1.4.3
     for text. Never set `color:` to it.
     --gold-text is the text/icon variant: 4.95:1 on --cream, 4.66:1 on
     --cream-warm — passes AA normal text. Use it for every gold `color:`,
     including :hover states, which 1.4.3 also governs.
     --gold-soft is for gold text on NAVY fields only (topbar, footer, navy
     CTA strips); it is ~1.9:1 on cream and must never appear on a light
     surface. */
  --gold: #B8893A; --gold-text: #8a6425;
  --gold-soft: #d4ad65;

  --text: #0A005C;
  --text-muted: #5a5482;
  --border: #d8d2bf;
  --shadow-card: 0 1px 2px rgba(10,0,92,0.04), 0 4px 12px rgba(10,0,92,0.05);

  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Shell-only tokens */
  --lac-shadow-pop: 0 8px 24px rgba(10,0,92,0.14);
  --lac-radius: 10px;
  --lac-radius-sm: 6px;
  --lac-tap: 44px;                 /* WCAG 2.5.5 minimum touch target */
  --lac-gutter: 20px;              /* phone gutter */
  --lac-gutter-lg: 24px;           /* >=560px gutter */
  --lac-maxw: 1120px;
  --lac-header-h: 64px;            /* approximate sticky header height, phone */
  --lac-ring: var(--navy);         /* focus ring on cream surfaces */
  --lac-ring-inverse: var(--cream);/* focus ring on navy surfaces */
}


/* ---------------------------------------------------------------------------
   2. GLOBAL GUARDS — overflow, smooth scroll, media sizing
   ------------------------------------------------------------------------ */

/* No horizontal overflow anywhere. `clip` (not `hidden`) is used deliberately:
   `overflow-x: hidden` on the root creates a scroll container and breaks
   position:sticky on the header in several engines. `clip` does not. */
html { overflow-x: clip; }

html { scroll-behavior: smooth; }

img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img, svg, video { height: auto; }

/* Long unbroken strings (URLs, emails) must not push the layout wide. */
body { overflow-wrap: break-word; }

/* Sticky header offset for in-page anchors (#services, #request-appointment…) */
main [id],
section[id],
h2[id], h3[id],
.lac-appt[id] {
  scroll-margin-top: calc(var(--lac-header-h) + 16px);
}


/* ---------------------------------------------------------------------------
   3. FOCUS VISIBILITY (WCAG 2.4.7 / 1.4.11)
   Navy ring on cream surfaces: 16.7:1 against #faf6ed — passes AA comfortably.
   Gold (#B8893A) on cream is only 2.7:1 and therefore is NOT used as the ring
   colour on light surfaces; gold appears as the secondary halo only.
   Cream ring on navy surfaces: 16.7:1 against #0A005C.
   ------------------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--lac-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Gold halo — decorative second ring, never the sole indicator. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  box-shadow: 0 0 0 5px rgba(184, 137, 58, 0.35);
}

/* Navy-field surfaces flip the ring to cream. */
.lac-topbar :focus-visible,
.lac-footer :focus-visible,
.lac-appt--navy :focus-visible,
.lac-cta-strip :focus-visible,
.referrers :focus-visible,
.cta-strip :focus-visible {
  outline-color: var(--lac-ring-inverse);
  box-shadow: 0 0 0 5px rgba(212, 173, 101, 0.45);
}

/* Skip link — shell version and legacy version both get the same treatment. */
.lac-skip-link,
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  z-index: 200;
}
.lac-skip-link:focus,
.skip-link:focus {
  left: 8px;
  top: 8px;
}


/* ---------------------------------------------------------------------------
   4. LAYOUT — .lac-container
   Mirrors the page-level `.container` (max-width 1120px) so the shell lines up
   pixel-for-pixel with page content above and below it.
   ------------------------------------------------------------------------ */
.lac-container {
  width: 100%;
  max-width: var(--lac-maxw);
  margin-inline: auto;
  padding-inline: var(--lac-gutter);
}
.lac-container--narrow {
  max-width: 820px;
}
@media (min-width: 560px) {
  .lac-container { padding-inline: var(--lac-gutter-lg); }
}


/* ---------------------------------------------------------------------------
   5. TOP BAR — .lac-topbar
   Navy utility strip: status line, phone, email, EN|ES switch.
   Not sticky — it scrolls away so the sticky header stays slim.
   ------------------------------------------------------------------------ */
.lac-topbar {
  background: var(--navy);
  color: var(--cream);
  font-size: 0.85rem;
  padding: 8px 0;
}
.lac-topbar a { color: var(--cream); text-decoration: none; }
.lac-topbar a:hover,
.lac-topbar a:focus-visible { color: var(--gold-soft); }

/* The inner flex row. Agent A may name this wrapper .lac-topbar-inner or use
   .lac-container directly — both are covered. */
.lac-topbar > .lac-container,
.lac-topbar-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
@media (min-width: 768px) {
  .lac-topbar > .lac-container,
  .lac-topbar-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
}

.lac-topbar-left,
.lac-topbar-status { font-weight: 500; margin: 0; }
.lac-topbar-right,
.lac-topbar-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

/* Topbar links are small; give them real tap area on touch devices without
   inflating the bar on desktop. See §15b for the 44px floor — this rule only
   establishes the inline-flex box so a min-height can bite at all. */
@media (max-width: 859.98px) {
  .lac-topbar-right a,
  .lac-topbar-contact a,
  .lac-topbar a,
  .lac-topbar button { display: inline-flex; align-items: center; min-height: 32px; }
}

/* The email address is the longest thing in the bar; drop it on small phones
   rather than let it wrap the row. It survives in the footer and mobile panel. */
@media (max-width: 479.98px) {
  .lac-topbar-email { display: none; }
}

/* --- EN | ES switch ------------------------------------------------------ */
/* Two shapes exist by design:
   · bilingual index.html — <button id="lang-en"> / <button id="lang-es"> inside
     a .lac-lang-toggle group, `.active` marks the current language;
   · single-language pages — a single <a class="lac-lang-link"> to the peer URL. */
.lac-lang-toggle,
.lac-lang-switch {
  display: inline-flex;
  border: 1px solid var(--cream);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
}
.lac-lang-toggle button,
.lac-lang-switch button,
.lac-lang-toggle a,
.lac-lang-switch a {
  background: transparent;
  color: var(--cream);
  border: 0;
  padding: 6px 14px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
.lac-lang-toggle button.active,
.lac-lang-switch button.active,
.lac-lang-toggle [aria-current="true"],
.lac-lang-toggle [aria-pressed="true"] {
  background: var(--cream);
  color: var(--navy);
}
.lac-lang-toggle button:not(.active):hover,
.lac-lang-switch button:not(.active):hover {
  background: rgba(255,255,255,0.12);
}

.lac-lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cream);
  border-radius: 999px;
  padding: 5px 14px;
  min-height: 32px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cream);
}
.lac-lang-link:hover { background: rgba(255,255,255,0.12); color: var(--cream); }

/* Touch-target floor for the id-bound bilingual buttons specifically.
   (The general floor lives in §15b; this keeps the pill wide enough too.) */
@media (max-width: 859.98px) {
  .lac-topbar #lang-en,
  .lac-topbar #lang-es { min-width: 48px; min-height: var(--lac-tap); }
}


/* ---------------------------------------------------------------------------
   6. HEADER — .lac-header
   Sticky, cream, one hairline border. Kept deliberately short so it never eats
   the phone viewport: ~64px on phones, ~84px on desktop.
   ------------------------------------------------------------------------ */
.lac-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
/* Slight lift once the page has scrolled, if Agent A's JS sets the flag.
   Purely additive — absence of the flag is fine. */
.lac-header[data-scrolled="true"],
.lac-header.is-scrolled {
  box-shadow: 0 2px 10px rgba(10,0,92,0.07);
}

.lac-header > .lac-container,
.lac-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (min-width: 1000px) {
  .lac-header { padding: 16px 0; }
  .lac-header > .lac-container,
  .lac-header-inner { gap: 24px; }
}

/* --- Wordmark ------------------------------------------------------------ */
.lac-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  user-select: none;
  flex: 0 0 auto;
}
.lac-wordmark:hover { color: var(--navy); }
.lac-wordmark .lac,
.lac-wordmark-mark,
.lac-wordmark-lac {
  display: block;
  font-size: 1.65rem;
}
.lac-wordmark .medical,
.lac-wordmark-sub,
.lac-wordmark-medical {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  margin-top: 4px;
  color: var(--navy);
}
@media (min-width: 560px) {
  .lac-wordmark .lac, .lac-wordmark-mark, .lac-wordmark-lac { font-size: 2rem; }
  .lac-wordmark .medical, .lac-wordmark-sub, .lac-wordmark-medical { font-size: 0.68rem; margin-top: 5px; }
}

/* --- Header right cluster ------------------------------------------------ */
.lac-header-right,
.lac-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1000px) {
  .lac-header-right,
  .lac-header-actions { gap: 18px; }
}


/* ---------------------------------------------------------------------------
   7. PRIMARY NAV — .lac-nav / .lac-dropdown / .lac-burger / .lac-mobile-nav

   RECONCILED BY THE INTEGRATOR against the markup Agent A actually shipped
   (tools/shell_parts/header_*.html) and the behaviour assets/shell-nav.js
   actually implements. Agent C styled a guessed class vocabulary blind; the
   selectors below are the real ones.

   Two independent navigations, never both visible:
     · >= 860px    — `.lac-nav` horizontal bar with a `.lac-dropdown` flyout.
     · <= 859.98px — `.lac-burger` opens the off-canvas `.lac-mobile-nav` panel,
                  which is a SIBLING of <header> (fixed positioning + scroll
                  lock require it to escape the sticky header).

   859.98px is `MOBILE_MAX` in assets/shell-nav.js. The two must agree or hover
   state and the panel disagree at the seam. Do not change one alone.

   NO `hidden` attribute is used anywhere in the shell markup — that is
   deliberate. Dropdown visibility is 100% CSS so that with JS disabled
   `:hover` / `:focus-within` still opens the menu and every <a href> is in
   the raw HTML for crawlers and for the verify script's grep.
   ------------------------------------------------------------------------ */

.lac-nav { font-family: var(--font-body); }

/* Generic legacy `[hidden]` guard (pages may still use it in their own markup). */
[hidden] { display: none; }

/* --- Scroll lock ---------------------------------------------------------
   shell-nav.js sets body.style.top = "-<scrollY>px" on open and restores the
   scroll position on close. That only works if the body is position:fixed. */
html.lac-nav-open { overflow: hidden; }
body.lac-nav-open,
body[data-lac-nav="open"] {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* =========================== DESKTOP BAR ================================= */

.lac-nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lac-nav-item { position: relative; }

.lac-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  color: var(--navy);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
}
.lac-nav-link:hover { color: var(--gold-text); }

/* Current page — shell-nav.js sets both aria-current and .is-current. */
.lac-nav-link[aria-current="page"],
.lac-nav-link.is-current,
.lac-dropdown.is-current-section > .lac-dropdown-toggle {
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 0 var(--gold);
}

/* --- Services dropdown --------------------------------------------------- */
.lac-dropdown { position: relative; }

.lac-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--lac-tap);
  padding: 6px 0;
  background: transparent;
  border: 0;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.lac-dropdown-toggle:hover,
.lac-dropdown-toggle[aria-expanded="true"] { color: var(--gold-text); background: transparent; }

.lac-dropdown-caret {
  display: inline-block;
  font-size: 0.7em;
  line-height: 1;
  transition: transform 140ms ease;
}
.lac-dropdown-toggle[aria-expanded="true"] .lac-dropdown-caret,
.lac-dropdown.is-open .lac-dropdown-caret { transform: rotate(180deg); }

/* Panel. Closed by default; opened by .is-open (JS) or :hover / :focus-within
   (no-JS fallback). All three are handled inside the desktop media query. */
.lac-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  z-index: 70;
  min-width: 288px;
  padding: 14px 10px 10px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--lac-radius);
  box-shadow: var(--lac-shadow-pop);
}
/* Gold hairline across the top — the shell's one gold accent up here. */
.lac-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
}

.lac-dropdown-groups,
.lac-dropdown-sublist { list-style: none; margin: 0; padding: 0; }
.lac-dropdown-group + .lac-dropdown-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lac-dropdown-group-link {
  display: block;
  padding: 8px 12px;
  border-radius: var(--lac-radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
  text-decoration: none;
}
.lac-dropdown-sublist { padding-left: 12px; margin-top: 2px; }
.lac-dropdown-sublink {
  display: block;
  padding: 7px 12px;
  border-radius: var(--lac-radius-sm);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-decoration: none;
}
.lac-dropdown-group-link:hover,
.lac-dropdown-sublink:hover { background: var(--cream-warm); color: var(--gold-text); }

.lac-dropdown-group-link[aria-current="page"],
.lac-dropdown-group-link.is-current,
.lac-dropdown-sublink[aria-current="page"],
.lac-dropdown-sublink.is-current {
  color: var(--navy);
  font-weight: 700;
  background: var(--cream-warm);
  box-shadow: inset 2px 0 0 0 var(--gold);
}

/* --- Burger -------------------------------------------------------------- */
.lac-burger {
  display: none;                 /* shown only at <=860px, below */
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: var(--lac-tap);
  min-height: var(--lac-tap);
  padding: 8px 12px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: var(--lac-radius-sm);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lac-burger:hover { border-color: var(--navy); }
.lac-burger[aria-expanded="true"],
.lac-burger.is-open {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.lac-burger-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
}
.lac-burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 140ms ease, opacity 140ms ease;
}
.lac-burger.is-open .lac-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lac-burger.is-open .lac-burger-bar:nth-child(2) { opacity: 0; }
.lac-burger.is-open .lac-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.lac-burger-text { line-height: 1; }

/* =========================== MOBILE PANEL ================================ */

/* The overlay is a full-viewport fixed layer sitting ABOVE the sticky header
   (z-index 90 vs 60). At <=859.98px the breakpoint block below sets it to
   display:block unconditionally, so without an explicit pointer-events rule it
   swallows every tap on the page while invisible (opacity:0). It must only
   intercept input while the panel is actually open.
   `visibility` is belt-and-braces: it also keeps the (empty) overlay out of the
   a11y tree, and it is delayed on close so the fade-out is still seen. */
.lac-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 0, 92, 0.48);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.lac-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 0s;
}

/* The closed panel is only pushed off-screen by a transform — that leaves its
   14 links tabbable and readable by assistive tech. `visibility: hidden` takes
   it out of BOTH the tab order and the a11y tree with no JS involved (so the
   no-JS case is safe too); shell-nav.js layers `inert` / `aria-hidden` and the
   dialog role on top. Visibility flips instantly on open and is delayed to the
   end of the slide-out on close so the animation is still visible. */
.lac-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(88vw, 380px);
  background: var(--cream);
  border-left: 1px solid var(--border);
  box-shadow: var(--lac-shadow-pop);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
.lac-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms ease, visibility 0s linear 0s;
}
/* `inert` (set by shell-nav.js on the closed panel) — polyfill-free engines
   already block hit-testing, this covers the attribute-only fallback path. */
[inert] { pointer-events: none; }
.lac-mobile-nav-inner { padding: 16px var(--lac-gutter) 32px; }

.lac-mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.lac-mobile-nav-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.lac-mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lac-tap);
  min-height: var(--lac-tap);
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--lac-radius-sm);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lac-mobile-close:hover { border-color: var(--navy); }

.lac-mobile-list,
.lac-mobile-sublist { list-style: none; margin: 0; padding: 0; }
.lac-mobile-item { border-bottom: 1px solid var(--border); }

.lac-mobile-link,
.lac-mobile-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--lac-tap);
  padding: 12px 2px;
  background: transparent;
  border: 0;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lac-mobile-link:hover,
.lac-mobile-accordion-toggle:hover { color: var(--gold-text); }

.lac-mobile-accordion-caret {
  font-size: 0.75em;
  line-height: 1;
  transition: transform 140ms ease;
}
.lac-mobile-accordion-toggle[aria-expanded="true"] .lac-mobile-accordion-caret,
.lac-mobile-accordion.is-open .lac-mobile-accordion-caret { transform: rotate(180deg); }

/* Collapsed by default; revealed when shell-nav.js adds .is-open to the <li>. */
.lac-mobile-accordion-panel { display: none; padding: 0 0 10px 10px; }
.lac-mobile-accordion.is-open > .lac-mobile-accordion-panel { display: block; }
/* `.is-current-section` marks the Services group when a Services page is the
   current page. It must NOT also open the panel: shell-nav.js adds the class
   without touching aria-expanded, so an auto-opened panel would read as
   collapsed to a screen reader. Emphasis only. */
.lac-mobile-accordion.is-current-section > .lac-mobile-accordion-toggle,
.lac-dropdown.is-current-section > .lac-dropdown-toggle { color: var(--navy); font-weight: 700; }

.lac-mobile-sublink {
  display: flex;
  align-items: center;
  min-height: var(--lac-tap);
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.98rem;
  text-decoration: none;
}
.lac-mobile-sublink:hover { color: var(--gold-text); border-left-color: var(--gold-soft); }
.lac-mobile-sublink--group {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  border-left-color: var(--gold-soft);
}
.lac-mobile-link[aria-current="page"],
.lac-mobile-link.is-current,
.lac-mobile-sublink[aria-current="page"],
.lac-mobile-sublink.is-current {
  color: var(--navy);
  font-weight: 700;
  border-left-color: var(--gold);
}

.lac-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.lac-mobile-cta { width: 100%; justify-content: center; }

/* Short viewports: the panel's own content is ~780px tall (accordion + list +
   actions + meta), so on a 560px-tall phone the primary CTA sat below the fold
   and was the LAST thing after a long accordion. The panel scrolls, so this was
   never unreachable — but the appointment CTA is the primary action on every
   page and should not require a scroll to find.
   Fix without touching the partial (not ours to edit): pin the actions row to
   the bottom of the scrolling panel and lay the two CTAs side by side, which
   costs ~68px instead of ~122px. `position: sticky; bottom: 0` inside the
   scroll container keeps it visible from the moment the panel opens and lets it
   settle into its natural position (above the meta links) at full scroll, so
   nothing is permanently occluded. */
@media (max-width: 859.98px) and (max-height: 720px) {
  .lac-mobile-nav-inner { padding-bottom: 16px; }
  .lac-mobile-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-direction: row;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 0;
    background: var(--cream);
    box-shadow: 0 -10px 14px -10px rgba(10, 0, 92, 0.28);
  }
  .lac-mobile-cta {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 8px;
    font-size: 0.9rem;
    text-align: center;
  }
  .lac-mobile-meta { margin-top: 14px; padding-top: 12px; }
}

.lac-mobile-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.lac-mobile-meta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lac-tap);
  color: var(--text-muted);
  text-decoration: none;
}
.lac-mobile-meta a:hover { color: var(--gold-text); }

/* ======================= BREAKPOINT SWITCH (860px) ======================= */

/* The two halves of the switch must tile the number line with no gap:
   `max-width: 859.98px` / `min-width: 860px`. The old 860 / 861 pair left the
   open interval (860, 861) matching NEITHER query, so at e.g. 860.5px CSS px
   (common on fractional-DPR/zoomed viewports) the desktop nav and the burger
   were both hidden. 859.98 is the standard sub-pixel epsilon. */
@media (max-width: 859.98px) {
  .lac-nav { display: none; }
  /* Phone + primary CTA live in the mobile panel and the top bar at this size;
     the header keeps only the wordmark and the burger. */
  .lac-header-actions { display: none; }
  .lac-burger { display: inline-flex; }
  .lac-nav-overlay { display: block; }
  .lac-mobile-nav { display: block; }
}

@media (min-width: 860px) {
  /* Dropdown open states. JS adds .is-open; hover/focus-within are the
     no-JS fallback and must work independently of it. */
  .lac-dropdown.is-open > .lac-dropdown-menu,
  .lac-dropdown:focus-within > .lac-dropdown-menu { display: block; }
}

@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .lac-dropdown:hover > .lac-dropdown-menu { display: block; }
  /* Hover bridge so the pointer can cross the 10px gap to the panel. */
  .lac-dropdown:hover::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 12px;
  }
}

/* --- Dismissal override for the no-JS-friendly open states ----------------
   `:focus-within` and `:hover` are deliberately kept (JS-off affordance), but
   they defeat JS dismissal: Escape / click-to-close removes `.is-open` and
   returns focus to the trigger, which immediately re-satisfies `:focus-within`
   — the menu stayed visibly open while aria-expanded said "false".
   shell-nav.js therefore marks the dropdown `.is-suppressed` when the user
   explicitly dismisses it, and clears that the moment focus or the pointer
   leaves the dropdown (or the user re-activates the trigger). With JS off the
   class is never added and the hover/focus-within affordance is untouched.
   Specificity: `.lac-dropdown.is-suppressed:not(.is-open)` scores (0,3,1),
   beating the (0,2,1) `:hover` / `:focus-within` / `.is-open` rules above
   regardless of source order. */
@media (min-width: 860px) {
  .lac-dropdown.is-suppressed:not(.is-open) > .lac-dropdown-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lac-mobile-nav,
  .lac-nav-overlay { transition: none; }
}


/* ---------------------------------------------------------------------------
   8. BUTTONS — .lac-btn
   Shape, weight and hover behaviour copied verbatim from index.html's `.btn`
   so shell buttons and page buttons are indistinguishable.
   ------------------------------------------------------------------------ */
/* `.lac-cta` / `.lac-cta--primary` / `.lac-cta--secondary` are the names Agent A
   actually shipped in the header and mobile panel; `.lac-btn*` is kept as the
   alias later tickets may reach for. Both are styled identically. */
.lac-btn,
.lac-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  padding: 14px 26px;
  min-height: var(--lac-tap);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 80ms ease, box-shadow 80ms ease, background-color 80ms ease, color 80ms ease;
}
.lac-btn-primary,
.lac-cta--primary {
  background: var(--navy);
  color: var(--cream);
}
.lac-btn-primary:hover,
.lac-cta--primary:hover {
  background: var(--navy-soft);
  color: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(10,0,92,0.25);
}
.lac-btn-secondary,
.lac-cta--secondary {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 12px 24px; /* keeps the 2px border from making it taller than primary */
}
.lac-btn-secondary:hover,
.lac-cta--secondary:hover { background: var(--navy); color: var(--cream); }

/* On navy fields the secondary button inverts. */
.lac-footer .lac-btn-secondary,
.lac-footer .lac-cta--secondary,
.lac-appt--navy .lac-btn-secondary,
.lac-appt--navy .lac-cta--secondary,
.lac-cta-strip .lac-btn-secondary,
.lac-cta-strip .lac-cta--secondary {
  color: var(--cream);
  border-color: var(--cream);
}
.lac-footer .lac-btn-secondary:hover,
.lac-footer .lac-cta--secondary:hover,
.lac-appt--navy .lac-btn-secondary:hover,
.lac-appt--navy .lac-cta--secondary:hover,
.lac-cta-strip .lac-btn-secondary:hover,
.lac-cta-strip .lac-cta--secondary:hover {
  background: var(--cream);
  color: var(--navy);
}
.lac-cta-strip .lac-btn-primary,
.lac-cta-strip .lac-cta--primary,
.lac-appt--navy .lac-btn-primary,
.lac-appt--navy .lac-cta--primary {
  background: var(--gold);
  color: var(--navy);
}
.lac-cta-strip .lac-btn-primary:hover,
.lac-cta-strip .lac-cta--primary:hover,
.lac-appt--navy .lac-btn-primary:hover,
.lac-appt--navy .lac-cta--primary:hover { background: var(--gold-soft); color: var(--navy); }

/* Compact header variants of the two CTAs. */
.lac-header .lac-btn,
.lac-header .lac-cta,
.lac-header-cta {
  font-size: 0.92rem;
  padding: 11px 18px;
}
@media (min-width: 1000px) {
  .lac-header .lac-btn,
  .lac-header .lac-cta,
  .lac-header-cta { font-size: 0.95rem; padding: 12px 20px; }
}

/* Phone — secondary CTA everywhere. */
/* The header phone carries BOTH .lac-cta--secondary and .lac-header-phone in the
   shipped markup. These rules come later in the file, so the phone renders as a
   quiet text link rather than a second bordered button beside the primary CTA. */
.lac-phone,
.lac-header .lac-header-phone,
.lac-header-phone {
  font-family: var(--font-display);
  background: transparent;
  border: 0;
  padding: 0 4px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lac-tap);
  white-space: nowrap;
}
.lac-phone:hover,
.lac-header-phone:hover { color: var(--gold-text); }
.lac-footer .lac-phone,
.lac-appt--navy .lac-phone { color: var(--cream); }
.lac-footer .lac-phone:hover,
.lac-appt--navy .lac-phone:hover { color: var(--gold-soft); }

/* Status pill (accepting new patients). */
.lac-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-warm);
  color: var(--navy);
  border: 1px solid var(--gold-soft);
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.lac-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  flex: 0 0 auto;
}


/* ---------------------------------------------------------------------------
   9. APPOINTMENT BLOCK — .lac-appt
   Sitewide "Request an appointment" section wrapping the T1 Google Form.
   Anchors: #request-appointment (EN + bilingual) / #solicitar-cita (ES).
   ------------------------------------------------------------------------ */
.lac-appt {
  background: var(--cream-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
@media (min-width: 768px) { .lac-appt { padding: 72px 0; } }

.lac-appt--navy {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.lac-appt--navy h2,
.lac-appt--navy h3,
.lac-appt--navy p { color: var(--cream); }

.lac-appt-head { max-width: 62ch; }
.lac-appt h2,
.lac-appt-title { margin-bottom: 10px; }
.lac-appt-lede,
.lac-appt-lead,
.lac-appt p.lede {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 62ch;
  margin-bottom: 8px;
}
.lac-appt--navy .lac-appt-lede,
.lac-appt--navy .lac-appt-lead { color: rgba(250,246,237,0.85); }

.lac-appt-rule {
  width: 96px; height: 3px;
  background: var(--gold);
  margin: 18px 0 0;
  border: 0;
}

/* Phone alternative sitting beside the form. */
.lac-appt-inner { max-width: 820px; }
.lac-appt-alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 20px;
  font-size: 0.98rem;
}
.lac-appt-alt p { margin: 0; }
.lac-appt-phone a,
.lac-appt-portal a {
  color: var(--navy);
  font-weight: 700;
  text-underline-offset: 3px;
}
.lac-appt-phone a { text-decoration: none; }
.lac-appt-phone a:hover,
.lac-appt-portal a:hover { color: var(--gold-text); }
.lac-appt-notes {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  max-width: 62ch;
}
.lac-appt-note {
  position: relative;
  margin-top: 8px;
  padding-left: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 62ch;
}
.lac-appt-notes .lac-appt-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-soft);
}
/* The 911 line is the one thing here a reader must not skim past. */
.lac-appt-note-urgent {
  font-weight: 700;
  color: var(--navy);
}
.lac-appt-notes .lac-appt-note-urgent::before { background: var(--gold); }
.lac-appt--navy .lac-appt-note { color: rgba(250,246,237,0.72); }
.lac-appt--navy .lac-appt-note-urgent { color: var(--cream); }

/* --- The embedded Google Form ------------------------------------------- */
/* `.appt-form` (unprefixed) is the class used in _APPOINTMENT-FORM-EMBED.md,
   so both it and the prefixed name are styled. */
.lac-appt-form,
.lac-appt .appt-form,
.appt-form {
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--lac-radius);
  box-shadow: var(--shadow-card);
  padding: 8px;
  /* The Google Forms document has its own minimum inline size; clipping here
     guarantees it can never push the page wider than the viewport. */
  overflow: hidden;
}
.lac-appt--navy .lac-appt-form,
.lac-appt--navy .appt-form { border-color: rgba(250,246,237,0.25); }

.lac-appt-form iframe,
.appt-form iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  border-radius: var(--lac-radius-sm);
}

/* --- Iframe height ladder (MEASURED — do not guess these numbers) ---------
   A Google Forms embed is cross-origin: it cannot report its own height, so
   the parent must reserve enough. The form gets TALLER as it gets NARROWER
   (labels and the radio list wrap), so one fixed height cannot serve every
   width. The old `height="760"` attribute + a single 820px phone rule left
   the last required question AND the Submit button outside the frame; the
   form still scrolls internally, so it looked complete and simply hid the
   button — the "if the form does not load" fallback never fires, because it
   does load.

   Heights below were measured in-browser against the real EN and ES forms
   (viewport -> iframe content width, accounting for --lac-gutter and this
   box's padding). The SPANISH form is the taller of the two at every width,
   so its numbers drive the ladder and both languages share it.

     content width  272    300    312    400    504    704
     ES doc height  1298   1226   1166   1058   1018    935

   Note the 60px drop between content 300 and 312: that is a label-wrap
   threshold, not noise, which is why the narrow end needs two steps rather
   than one. 375px is the most common phone width and sits in the 360-400
   band, so that band is measured rather than folded into the 320px worst case.

   Each step adds ~90px of headroom, which is what three "This is a required
   question" validation messages add when someone submits an empty form.
   Over-reserving costs a little cream whitespace; under-reserving costs the
   Submit button, so these round UP on purpose.
   Re-measure if either Google Form gains or loses a field. --------------- */
.lac-appt-form iframe,
.appt-form iframe { height: 1030px; }          /* >=768px: content 704 */

@media (max-width: 767.98px) {
  .lac-appt-form iframe,
  .appt-form iframe { height: 1110px; }        /* 560-768: content 496-704 */
}
@media (max-width: 559.98px) {
  .lac-appt-form,
  .lac-appt .appt-form,
  .appt-form { padding: 4px; }
  .lac-appt-form iframe,
  .appt-form iframe { height: 1230px; }        /* 400-560: content 352-512 */
}
@media (max-width: 399.98px) {
  .lac-appt-form iframe,
  .appt-form iframe { height: 1260px; }        /* 360-400: content 312-352 */
}
@media (max-width: 359.98px) {
  .lac-appt-form iframe,
  .appt-form iframe { height: 1390px; }        /* <=360: content <=312 */
}

.lac-appt-form-fallback,
.appt-form-fallback {
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
  margin: 10px 0 4px;
}
.lac-appt--navy .lac-appt-form-fallback,
.lac-appt--navy .appt-form-fallback { color: rgba(250,246,237,0.8); }

/* Layout: stacked on phones, two columns from tablet up if Agent B uses a grid
   wrapper. Falls back gracefully to a single column if he does not. */
.lac-appt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 900px) {
  .lac-appt-grid { grid-template-columns: 1fr 1.1fr; gap: 44px; }
  .lac-appt-form,
  .lac-appt .appt-form { margin-top: 0; }
}


/* ---------------------------------------------------------------------------
   10. CTA STRIP — .lac-cta-strip (optional navy band above the footer)
   ------------------------------------------------------------------------ */
.lac-cta-strip {
  background: var(--navy);
  color: var(--cream);
  padding: 36px 0;
}
.lac-cta-strip h2,
.lac-cta-strip p { color: var(--cream); }
.lac-cta-strip p { margin: 6px 0 0; max-width: 60ch; }
.lac-cta-strip > .lac-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
@media (min-width: 768px) {
  .lac-cta-strip > .lac-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
}


/* ---------------------------------------------------------------------------
   11. FOOTER — .lac-footer
   Navy field, three columns from tablet up, disclosure band full-width.
   Contains the required healow portal link and the locked common-ownership
   disclosure (brand §8).
   ------------------------------------------------------------------------ */
.lac-footer {
  background: var(--navy);
  color: var(--cream);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 44px 0 28px;
}
@media (min-width: 768px) { .lac-footer { padding: 56px 0 32px; } }

.lac-footer h2,
.lac-footer h3,
.lac-footer h4,
.lac-footer-heading {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.lac-footer p { color: var(--cream); margin: 0.5em 0; }
.lac-footer a { color: var(--cream); text-decoration: none; }
.lac-footer a:hover { color: var(--gold-soft); }
.lac-footer ul { list-style: none; margin: 0; padding: 0; }
.lac-footer li { padding: 2px 0; }

/* Touch targets in the link columns. 44px is the contract floor (WCAG 2.5.5);
   the previous 40px was under it. Desktop drops back to text rhythm. */
.lac-footer li > a,
.lac-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lac-tap);
  padding: 2px 0;
}
@media (min-width: 768px) {
  .lac-footer li > a,
  .lac-footer-links a { min-height: 0; padding: 4px 0; }
}

/* Column grid — scoped to `.lac-footer-grid` ONLY.
   Agent B ships TWO `.lac-footer > .lac-container` elements: the column grid
   and a second one holding `.lac-footer-legal`. Gridding every direct
   `.lac-container` would have split the disclosure band into three columns. */
.lac-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 768px) {
  .lac-footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
  }
}
/* Anything that should span the full width if it IS a grid child. */
.lac-footer-grid > .lac-footer-disclosure,
.lac-footer-grid > .lac-footer-legal,
.lac-footer-grid > .lac-footer-bottom,
.lac-footer-grid > .disclosure { grid-column: 1 / -1; }

.lac-footer-blurb { margin-top: 0; }
.lac-footer-note,
.lac-footer-fineprint { font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.lac-footer-copyright { font-size: 0.78rem; color: rgba(255,255,255,0.72); }

/* Footer wordmark reverses to cream. */
.lac-footer .lac-wordmark,
.lac-footer .lac-wordmark .lac,
.lac-footer .lac-wordmark .medical,
.lac-footer .lac-wordmark-mark,
.lac-footer .lac-wordmark-sub,
.lac-footer .lac-wordmark-lac,
.lac-footer .lac-wordmark-medical { color: var(--cream); }

.lac-footer-address { font-style: normal; }
.lac-footer-address strong { color: var(--cream); }

/* Portal card — the healow link is a required element, so it gets emphasis.
   The class sits on the <li>; the box is drawn on the <a> inside it. */
.lac-footer-portal { margin-top: 10px; padding: 0; }
.lac-footer-portal > a,
.lac-footer-links .lac-footer-portal > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: var(--lac-tap);
  border: 1px solid var(--gold-soft);
  border-radius: var(--lac-radius-sm);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}
.lac-footer-portal > a:hover { background: rgba(212,173,101,0.16); color: var(--cream); }

/* Disclosure / legal band. */
.lac-footer-disclosure,
.lac-footer .disclosure {
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 28px;
  padding-top: 18px;
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}
.lac-footer-disclosure p,
.lac-footer .disclosure p { margin: 8px 0; color: inherit; }
.lac-footer-disclosure strong,
.lac-footer .disclosure strong { color: rgba(255,255,255,0.9); }
.lac-footer-disclosure a,
.lac-footer .disclosure a { color: rgba(255,255,255,0.9); text-decoration: underline; text-underline-offset: 3px; }

/* Small-print email caveat. */
.lac-footer-fineprint {
  margin-top: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
}


/* ===========================================================================
   ===  PART 2 — SITEWIDE VISUAL TUNE-UP  ====================================
   These rules target the EXISTING page classes found in index.html,
   menopause.html, es/menopausia.html, blog/index.html and the legal pages.
   They win on source order at equal specificity. Same brand, better rhythm.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   12. TYPOGRAPHY & RHYTHM
   ------------------------------------------------------------------------ */
body { line-height: 1.6; }

/* Slightly gentler minimums so headlines don't crowd a 360px screen, and a
   marginally lower maximum so they don't shout on a 1440px one. */
h1 { font-size: clamp(1.85rem, 1.35rem + 2.4vw, 3.1rem); line-height: 1.08; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); line-height: 1.18; }
h3 { line-height: 1.25; }

/* Comfortable measure for running text. Applied only to the lede/intro classes
   so multi-column card layouts are untouched. */
.lede,
.section-lede,
.hero .lede,
.page-head p.lede,
.doc-hero p.meta { max-width: 64ch; }

.section-lede,
section .section-lede { margin-bottom: 32px; }

/* Section rhythm — a touch more air than the current 60–64px, and noticeably
   tighter on phones where 64px of dead space costs a whole screen. */
section { padding: 48px 0; }
@media (min-width: 768px) { section { padding: 72px 0; } }
section + section { border-top: 0; }
section h2 { margin-bottom: 12px; }
section.alt { background: var(--cream-warm); }

/* Container gutters: 20px on phones (was 24px) buys real line length back. */
.container,
.container-narrow { padding-left: var(--lac-gutter); padding-right: var(--lac-gutter); }
@media (min-width: 560px) {
  .container,
  .container-narrow { padding-left: var(--lac-gutter-lg); padding-right: var(--lac-gutter-lg); }
}


/* ---------------------------------------------------------------------------
   13. HERO POLISH  (index.html, menopause.html, es/menopausia.html)
   ------------------------------------------------------------------------ */
.hero { padding: 44px 0 40px; }
@media (min-width: 768px) { .hero { padding: 76px 0 68px; } }

.hero h1 { max-width: 20ch; }
@media (min-width: 768px) { .hero h1 { max-width: 24ch; } }

.hero .lede {
  margin-top: 18px;
  line-height: 1.5;
  max-width: 58ch;
}
.hero .eyebrow { margin-bottom: 12px; }
.hero-rule { margin-top: 26px; }

.hero-cta-row { gap: 12px; margin-top: 28px; }
@media (min-width: 768px) { .hero-cta-row { gap: 14px; margin-top: 34px; } }

.accepting-badge { margin-bottom: 18px; }
.hero-meta { gap: 14px 28px; margin-top: 32px; }

/* Document heroes on the legal pages. */
.doc-hero { padding: 36px 0 24px; }
@media (min-width: 768px) { .doc-hero { padding: 52px 0 32px; } }
.page-head { padding: 40px 0 34px; }
@media (min-width: 768px) { .page-head { padding: 60px 0 48px; } }


/* ---------------------------------------------------------------------------
   14. CARD POLISH
   One radius, one border, one shadow, one hover behaviour — across every card
   family on the site so the pages read as one system.
   ------------------------------------------------------------------------ */
.audience-card,
.resource-card,
.team-card,
.step,
.treatment-card,
.side-card,
.provider-card,
.contact-card,
.post-card,
.insurance-pill {
  border-radius: var(--lac-radius);
  border: 1px solid var(--border);
  background: var(--cream);
}
.audience-card,
.resource-card,
.step,
.treatment-card,
.side-card,
.contact-card {
  box-shadow: var(--shadow-card);
}

/* Interactive cards get a single consistent lift. */
.resource-card,
.post-card {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.resource-card:hover,
.post-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
  box-shadow: 0 8px 20px rgba(10,0,92,0.10);
}
.resource-card.is-pending:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

/* Grid gaps: a hair wider, and the min track shrinks so nothing overflows at
   360px inside a 20px-gutter container. */
.audience-grid,
.resources-grid,
.services-grid,
.steps-grid,
.insurance-grid,
.treatment-grid,
.chip-grid,
.team-grid { gap: 16px; }
@media (min-width: 768px) {
  .audience-grid,
  .resources-grid,
  .steps-grid,
  .insurance-grid { gap: 20px; }
  .services-grid, .team-grid { gap: 28px; }
}
.audience-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.resources-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.services-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.steps-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.insurance-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.team-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Blog post cards: prevent the fixed 300px thumb column from overflowing on
   narrow tablets before the 640px collapse kicks in. */
.post-card { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
@media (max-width: 640px) { .post-card { grid-template-columns: minmax(0, 1fr); } }
.post-list { gap: 24px; padding: 36px 0 56px; }
@media (min-width: 768px) { .post-list { gap: 28px; padding: 48px 0 72px; } }

/* Chips and pills. */
.chip { border-radius: 999px; }

/* FAQ disclosure rows — bigger hit area on the summary. */
.faq summary {
  min-height: var(--lac-tap);
  display: flex;
  align-items: center;
}

/* Callouts. */
.callout,
.about-callout { border-radius: 0 var(--lac-radius-sm) var(--lac-radius-sm) 0; }

/* Map: shorter on phones so it doesn't swallow the screen. */
.map-frame { height: 260px; border-radius: var(--lac-radius); }
@media (min-width: 768px) { .map-frame { height: 320px; } }


/* ---------------------------------------------------------------------------
   15. PHONE POLISH (360–430px is the design target, not just the floor)
   ------------------------------------------------------------------------ */
@media (max-width: 559.98px) {
  /* Full-width CTAs read better than two half-width ones on a phone. */
  .hero-cta-row .btn,
  .hero-cta-row .lac-btn,
  .hero-cta-row .lac-cta,
  .lac-appt-alt .lac-btn,
  .lac-appt-alt .lac-cta { width: 100%; justify-content: center; }

  /* Tables and pre blocks scroll inside themselves, never the page. */
  table, pre { display: block; max-width: 100%; overflow-x: auto; }

  /* Legacy CTA strip stacks. */
  .cta-strip .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cta-strip .btn { width: 100%; justify-content: center; }

  /* Referring-providers band stacks. */
  .referrers .container { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Hours rows: keep day and time on one line at 360px. */
  .hours-row { font-size: 0.9rem; gap: 12px; }

  /* Cards: slightly tighter padding recovers a lot of vertical screen. */
  .audience-card,
  .resource-card,
  .step,
  .treatment-card,
  .side-card,
  .contact-card { padding: 20px; }

  /* Team headshots stay a portrait card, not a full-bleed poster. */
  .team-card .team-photo { max-width: 220px; margin: 18px auto 0; border-radius: var(--lac-radius-sm); }

  /* Any stray fixed-width iframe (maps, forms) becomes fluid. */
  iframe { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   15b. TOUCH-TARGET FLOOR FOR SHELL CHROME  (contract: >=44px on mobile)
   The pre-existing rules only sized the mobile PANEL and a single `#lang-es`
   selector that exists on the bilingual homepage alone — so on all 36 other
   pages the topbar, the wordmark and the whole footer shipped 21–40px targets.
   Measured before this block at 375px: footer phone 88x21, footer email
   160x21, footer legal links 197x40 / 83x40, topbar phone 83x32, topbar email
   151x32, topbar ES 43x32, wordmark 75x40.

   Strategy: padding / min-height only — no type-size changes, so the visual
   density of the footer and the topbar is preserved. Inline links inside
   running text (the address block) become inline-flex boxes with a min-height
   rather than buttons.
   ------------------------------------------------------------------------ */
@media (max-width: 859.98px) {
  /* --- Top bar: phone, email, EN|ES ------------------------------------- */
  .lac-topbar a,
  .lac-topbar button,
  .lac-topbar-contact a,
  .lac-topbar-right a,
  .lac-topbar-link,
  .lac-topbar-phone,
  .lac-topbar-email {
    display: inline-flex;
    align-items: center;
    min-height: var(--lac-tap);
  }
  /* "ES" is only ~43px wide — the 44px floor is two-dimensional. */
  .lac-topbar .lac-lang-link,
  .lac-topbar .lac-lang-toggle a,
  .lac-topbar .lac-lang-toggle button,
  .lac-topbar .lac-lang-switch a,
  .lac-topbar .lac-lang-switch button {
    min-width: var(--lac-tap);
    min-height: var(--lac-tap);
  }
  /* Growing the rows to 44px would otherwise add ~24px of bar; claw it back
     from the bar's own padding so the strip stays a thin utility band. */
  .lac-topbar { padding: 2px 0; }
  .lac-topbar > .lac-container,
  .lac-topbar-inner { gap: 2px; }

  /* --- Header wordmark (two stacked lines, measured 75x40) --------------- */
  .lac-wordmark {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--lac-tap);
  }

  /* --- Footer address block: the primary "call us" affordance ------------ */
  /* These live inside a <p> with <br> separators, so they are NOT covered by
     the `.lac-footer li > a` rule above. 88x21 / 160x21 measured. */
  .lac-footer-address a,
  .lac-footer .lac-footer-phone,
  .lac-footer .lac-footer-email {
    display: inline-flex;
    align-items: center;
    min-height: var(--lac-tap);
  }
  /* The two links now own their line box; trim the paragraph leading so the
     address column does not visibly balloon. */
  .lac-footer-address { line-height: 1.45; }

  /* --- Footer disclosure / legal band inline links ----------------------- */
  .lac-footer-disclosure a,
  .lac-footer .disclosure a,
  .lac-footer-legal a {
    display: inline-block;
    padding-block: 12px;
  }
}

/* Every link and button in body copy clears 44px on touch pointers. */
@media (pointer: coarse) {
  .lac-btn,
  .lac-cta,
  .lac-nav-link,
  .lac-dropdown-toggle,
  .lac-mobile-link,
  .lac-mobile-sublink,
  .lac-mobile-accordion-toggle,
  .lac-mobile-close,
  .lac-burger,
  .lac-phone,
  .lac-header-phone,
  .lac-footer-portal a { min-height: var(--lac-tap); }
}


/* ---------------------------------------------------------------------------
   16. MOTION
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    /* !important is required here: this must defeat transition/animation
       declarations already written into every page's inline <style>, some of
       which are more specific than anything we can write generically. This is
       the WCAG 2.3.3 / motion-sensitivity escape hatch and is the standard
       implementation of it. */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .resource-card:hover,
  .post-card:hover,
  .lac-btn-primary:hover,
  .lac-cta--primary:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   17. PRINT
   Navigation and the appointment form are useless on paper. The address, the
   phone number and the disclosure are the point of a printed page.
   ------------------------------------------------------------------------ */
@media print {
  /* !important throughout this block: printing must beat any inline `style`
     attribute or page-inline rule that would otherwise re-show these elements
     on paper. There is no cascade-only way to guarantee that. */
  .lac-topbar,
  .lac-nav,
  .lac-dropdown-menu,
  .lac-burger,
  .lac-nav-overlay,
  .lac-mobile-nav,
  .lac-header-actions,
  .lac-nav-toggle,
  .lac-menu-toggle,
  .lac-lang-toggle,
  .lac-lang-switch,
  .lac-lang-link,
  .lac-skip-link,
  .lac-appt-form,
  .lac-appt-form-fallback,
  .appt-form,
  .appt-form-fallback,
  .lac-cta-strip,
  .skip-link,
  .topbar,
  .header-nav,
  .lang-toggle,
  .lang-link,
  .map-frame,
  iframe { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  .lac-header {
    position: static !important;
    border-bottom: 1pt solid #000;
    padding: 0 0 8pt;
  }
  .lac-wordmark,
  .lac-wordmark .lac,
  .lac-wordmark .medical,
  .lac-wordmark-lac,
  .lac-wordmark-medical { color: #000 !important; }

  /* Keep the footer, but on white. Address, phone, portal URL and the
     common-ownership disclosure must survive to paper. */
  .lac-footer,
  footer {
    background: #fff !important;
    color: #000 !important;
    border-top: 1pt solid #000;
    padding: 12pt 0 0;
  }
  .lac-footer *,
  footer * { color: #000 !important; }
  .lac-footer-address,
  .lac-footer-portal,
  .lac-footer-portal > a,
  .lac-phone,
  .lac-header-phone { display: block !important; }
  .lac-footer-portal > a { border: 0 !important; padding: 0 !important; }

  /* Spell out link targets that a reader cannot click. */
  .lac-footer a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  section, .hero, .lac-appt { padding: 12pt 0 !important; }
  .audience-card, .resource-card, .step, .team-card, .post-card,
  .treatment-card, .side-card, .contact-card {
    box-shadow: none !important;
    border: 1pt solid #999;
    break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; }
  a { text-decoration: underline; }
}


/* ---------------------------------------------------------------------------
   18. BILINGUAL VISIBILITY GUARD  (bilingual index.html only)
   index.html's inline <style> hides the inactive language with
       body[lang="en"] [data-lang="es"] { display: none; }
   Shell rules above legitimately set `display` on many elements that carry a
   data-lang attribute (.lac-cta, .lac-mobile-list, .lac-footer-links a,
   .lac-appt-form, .lac-dropdown-group-link, …). Because shell.css is injected
   AFTER the page's inline <style>, those rules win on equal specificity and
   BOTH languages would render at once.

   `!important` is genuinely unavoidable here: the guard has to beat an unknown
   and open-ended set of shell display rules, several of which are more specific
   than any attribute selector we could write. This is the third and last
   !important in the file (the other two are prefers-reduced-motion and print).
   ------------------------------------------------------------------------ */
body[lang="en"] [data-lang="es"],
body[lang="es"] [data-lang="en"] { display: none !important; }