/* Global typography and element defaults. Loaded after Astra; keeps specificity low. */
html { -webkit-text-size-adjust: 100%; }
body, .ast-container { font-family: var(--hbd-font-body); font-size: var(--hbd-fs-body); line-height: var(--hbd-lh-body); color: var(--hbd-text); }
h1, h2, h3, .hbd-heading { font-family: var(--hbd-font-display); font-weight: 300; line-height: var(--hbd-lh-tight); letter-spacing: -0.01em; color: var(--hbd-ink); margin: 0 0 var(--hbd-space-4); }
h1 { font-size: var(--hbd-fs-h1); } h2 { font-size: var(--hbd-fs-h2); } h3 { font-size: var(--hbd-fs-h3); }
h4, h5, h6 { font-family: var(--hbd-font-body); font-weight: 400; line-height: var(--hbd-lh-snug); color: var(--hbd-ink); margin: 0 0 var(--hbd-space-3); }
h4 { font-size: var(--hbd-fs-h4); }
h1 em, h2 em, h3 em, .hbd-heading em, .hbd-em { font-family: var(--hbd-font-display); font-style: italic; font-weight: 300; }
.hbd-hero h1 em { color: var(--hbd-blue); }
p { margin: 0 0 var(--hbd-space-4); }
a { color: var(--hbd-link); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--hbd-dur) var(--hbd-ease); }
a:hover { color: var(--hbd-navy); }
:focus-visible { outline: 2px solid var(--hbd-blue); outline-offset: 3px; border-radius: 4px; }
/* Astra's `button:focus { outline: none }` (0-1-1) outranks the bare pseudo-class above (0-1-0), which
   is why every <button> — the FAQ rows, the drawer's clinic cards and × — lost its ring (client QC
   2026-09-23). Same ring at Astra's own specificity (0-1-1) — it wins on source order, because
   `hbd-base` depends on `astra-theme-css` (inc/enqueue.php) and prints after it — and only for
   keyboard focus. Keep that dependency, or the tie flips back. */
button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--hbd-blue); outline-offset: 3px; }
/* Astra's `a:focus { outline: thin dotted }` is the same problem the other way round: a grey dotted box
   on every keyboard-focused link (a mega-menu entry, client QC 2026-09-23) and on a clicked one too. */
a:focus-visible { outline: 2px solid var(--hbd-blue); outline-offset: 3px; }
a:focus:not(:focus-visible) { outline: 0; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
/* Astra container override so page-builder rows can be full-bleed with contained inner content */
.ast-container, .hbd-container { max-width: var(--hbd-container); padding-left: var(--hbd-gutter); padding-right: var(--hbd-gutter); margin-left: auto; margin-right: auto; }
.site-content .ast-container { padding-top: 0; padding-bottom: 0; }
/* The routed templates' shell (`hbd_template_open()`, inc/templates.php). Astra's `.ast-container` is
   `display: flex` from its tablet breakpoint up, so `<main>` is a *flex item* there and sizes itself to
   its max-content — a full-bleed section inside it then measures wider than the viewport (1236px at
   1024 on /location/austin/, which is a real horizontal scroll). A flex item only shrinks below its
   content with `min-width: 0`, so both declarations are load-bearing. */
.hbd-tpl { width: 100%; min-width: 0; }