/* Header: Astra builder chrome + mega menu panels styled to the live site.
Measurements: the header fidelity round's live computed styles at 1440/390 — a working note, not
in the repository. */
.ast-builder-html-element p { margin: 0; }
/* ---------------------------------------------------------------- bar, logo */
/* Live bar: the white band is full-bleed but the row inside it is a centred 1440px container with 20px
side padding (1400px of content) — measured live: logo x=260 / CTA right 1660 at 1920, 100 / 1500 at
1600, 20 / 1420 at 1440. 'hb-header-main-layout-width' => 'full' (inc/astra.php) drops Astra's own
centred container so the background reaches the edges; the container below puts the row back.
The #masthead id is needed to beat Astra's own `#masthead .ast-container{padding:0 35px}` inline rule. */
/* Live: `border-b border-b-black/20` on the header at every width — black at 20%, not ink. Astra also paints its
own separator colour on the mobile bar from `hb-header-main-sep-color` (set to the same value in inc/astra.php). */
.ast-primary-header-bar { border-bottom: 1px solid var(--hbd-black-a20); background: var(--hbd-white); box-sizing: border-box; }
/* Astra's 68px is a content-box min-height, so the hairline made the bar 69px; live's 68px includes the border. */
#masthead .ast-primary-header-bar { min-height: var(--hbd-header-h); }
#masthead .ast-primary-header-bar .site-primary-header-wrap { max-width: var(--hbd-header-max); margin-inline: auto; padding-left: var(--hbd-header-gutter); padding-right: var(--hbd-header-gutter); }
/* Astra pads every builder element by 0 10px (`.site-header-section > *`) and the logo block by 1em 0
(`.ast-logo-title-inline .ast-site-identity`); the 1em is what made the bar 88px tall instead of 68px,
and the 10px gutters pushed the logo to x=35 (live: x=20) and the row 40px past its content width. */
.ast-primary-header-bar .site-header-section > * { padding-left: 0; padding-right: 0; }
.ast-primary-header-bar .ast-site-identity { padding-top: 0; padding-bottom: 0; }
.ast-primary-header-bar .site-logo-img img { max-height: none; width: auto; }
/*
* Controller ruling (Task 9): `.ast-builder-grid-row.ast-grid-center-col-layout` (Astra core CSS) lays the
* primary header out as `grid-template-columns: 1fr auto 1fr` (logo | menu | html+button). Grid's `1fr`
* tracks fall back to their content's min-content floor under space pressure; without `white-space: nowrap`
* that floor for a text run is effectively single-character width, so once the right-hand track had a real
* floor (the Login/Request Appointment buttons below got `white-space: nowrap`), *all* the squeeze landed on
* the site title, which collapsed to ~20px and wrapped one letter per line. Site title needs the same
* nowrap floor so both 1fr tracks compete fairly on their real min-content.
*/
.ast-primary-header-bar .ast-site-identity, .ast-primary-header-bar .ast-site-identity .site-title, .ast-primary-header-bar .ast-site-identity a { white-space: nowrap; }
/* ---------------------------------------------------------------- desktop nav */
.ast-builder-menu-1 .main-header-menu { flex-wrap: nowrap; }
/* Live nav item: 16px Haas ink, 8px/16px padding => 40px tall, 8px radius, sky pill on hover (text stays ink). */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { font-family: var(--hbd-font-body); font-size: var(--hbd-fs-body); line-height: var(--hbd-lh-body); color: var(--hbd-ink); padding: .5rem 1rem; border-radius: var(--hbd-radius-xs); white-space: nowrap; transition: background-color var(--hbd-dur) var(--hbd-ease); }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item.ast-menu-hover > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.hbd-menu-open > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item:focus-within > .menu-link { background-color: var(--hbd-sky); color: var(--hbd-ink); }
/* The keyboard path (assets/js/menu.js, client QC 2026-09-23): a panel opened from its label is shown
exactly as the :hover one is. The label is the focusable control, so its ring is the theme's. */
.ast-desktop .main-header-menu > .menu-item.hbd-menu-open > .astra-megamenu,
.ast-desktop .main-header-menu > .menu-item.hbd-menu-open > .sub-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
/* A panel closed by click, Enter or Escape while the pointer is still over its label stays closed
until the pointer leaves (menu.js sets the class, its mouseleave clears it) — otherwise Astra's :hover
rule re-shows it the same instant and the menu cannot be closed with the mouse at all. */
.ast-desktop .main-header-menu > .menu-item.hbd-menu-closed > .astra-megamenu,
.ast-desktop .main-header-menu > .menu-item.hbd-menu-closed > .sub-menu { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* Astra hides a mega panel level by level (the column items are display:none and every nested list
and link is visibility:hidden until the ancestor is hovered), so the keyboard path reveals the whole
subtree — the same computed state a hover produces (measured 2026-09-23). */
.ast-desktop .main-header-menu > .menu-item.hbd-menu-open > .astra-megamenu > .menu-item { display: block; visibility: visible; }
.ast-desktop .main-header-menu > .menu-item.hbd-menu-open > .astra-megamenu .sub-menu { position: static; left: auto; right: auto; top: auto; width: auto; display: block; visibility: visible; opacity: 1; border: 0; background: transparent; box-shadow: none; } /* Astra parks a nested list at left:-999em and only its hover rule makes it static — and only that hover rule cancels the Customizer's 2px navy sub-menu top border and white panel, which otherwise drew a rule under each column heading on the keyboard path (client QC 2026-09-23) */
.ast-desktop .main-header-menu > .menu-item.hbd-menu-open > .astra-megamenu .menu-item,
.ast-desktop .main-header-menu > .menu-item.hbd-menu-open > .astra-megamenu .menu-link { visibility: visible; }
.ast-desktop .main-header-menu > .menu-item > .menu-link[role="button"] { cursor: pointer; }
/* The visible chevron is the one inside `.dropdown-menu-toggle` — the `.ast-icon` that Astra's walker puts
first inside `.menu-link` is display:none on desktop (verified in the rendered DOM: 0×0 box). */
/* Astra's toggle span carries `padding-right:10px; margin:0 -10px 0 4px`, which made every nav item ~12px
wider than live; reset it so the chevron sits 16px after the label like the live nav (measured: label
right edge → chevron left edge = 16px; the glyph is the production 10×7 path, swapped in via the
'astra_svg_icon_element' filter in inc/astra.php). */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .ast-header-navigation-arrow { padding: 0; margin: 0 0 0 .375rem; line-height: 0; } /* .375rem + the link's own trailing 10px = the live 16px gap */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .ast-header-navigation-arrow .ast-icon { display: inline-flex; }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .ast-header-navigation-arrow .ast-icon svg { width: .625rem; height: .4375rem; }
/* ---------------------------------------------------------------- login + CTA */
.ast-header-button-1 { flex-shrink: 0; }
/* Padding is set via the 'section-hb-button-1-padding' Astra option (inc/astra.php) — Astra's own dynamic CSS
for this selector loads after header.css and would win a plain padding override here. */
.ast-header-button-1 .ast-custom-button { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--hbd-font-mono); font-size: var(--hbd-fs-btn); line-height: var(--hbd-lh-btn); letter-spacing: var(--hbd-tracking-mono); text-transform: uppercase; background: var(--hbd-navy); color: var(--hbd-white); border-radius: var(--hbd-radius-pill); transition: background-color var(--hbd-dur) var(--hbd-ease); }
.ast-header-button-1 .ast-custom-button:hover { background: var(--hbd-slate); color: var(--hbd-white); }
.ast-header-html-1 { margin-right: .5rem; flex-shrink: 0; }
/* Live LOGIN pill: 14px mono, 12/24 padding (46px tall with the 1px border), border at 16% ink; on hover the
fill turns white and nothing else changes (measured 2026-09-17 — earlier rounds darkened the border, which
live does not do). */
.ast-header-html-1 .hbd-btn { white-space: nowrap; border-color: var(--hbd-ink-a16); color: var(--hbd-ink); background: transparent; }
.ast-header-html-1 .hbd-btn:hover { border-color: var(--hbd-ink-a16); background: var(--hbd-white); color: var(--hbd-ink); transform: none; }
/*
* The one remaining desktop squeeze band (round 5). The desktop nav now only exists from 1280 up, so the
* four 922-1339px bands are gone; what is left is the 1280-1349 step, because our row still needs ~1342px
* at live sizing with the longest selected clinic label ("Alamo Heights", 108px) — production fits 1280
* because its Locations item sits outside the nav list entirely and its REQUEST APPOINTMENT renders 16px
* narrower at the same font/padding (round 1 deviation 5). Trimming the nav-item padding from 16px to 10px
* and the two pills from 24px to 16px buys 104px, which clears 1280 in both the default and the
* clinic-selected state. Above 1349 everything is at live sizing.
*/
@media (min-width: 1280px) and (max-width: 1349px) {
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding-left: .625rem; padding-right: .625rem; }
.ast-header-html-1 .hbd-btn { padding-left: 1rem; padding-right: 1rem; }
.ast-header-button-1 .ast-custom-button { padding-left: 16px !important; padding-right: 16px !important; }
}
/*
* ------------------------------------------------- the desktop/mobile header switch (round 5)
*
* Production shows the desktop nav at >=1280px only (Tailwind `xl`) and the mobile header — logo,
* "Locations" trigger, hamburger — at <=1279px. Astra drives that switch from two places that have to
* agree: `astra_header_break_point` (the body class + the off-canvas JS, filtered to 1279 in inc/astra.php)
* and a pair of dynamic-CSS rules generated at the *tablet* breakpoint — `@media (max-width: 921.99px)
* { #ast-desktop-header { display: none } }` and `@media (min-width: 922px) { #ast-mobile-header
* { display: none } }` (astra/inc/class-astra-dynamic-css.php:1260-1280). Moving Astra's tablet breakpoint
* to line them up is not an option: it also drives tablet typography and spacing site-wide (and an earlier
* attempt at raising only the filter rendered both headers at once — see the note in inc/astra.php).
*
* So the visibility of both header wrappers is decided here instead, for every width, with two ids so it
* outranks Astra's single-id rules whatever order the stylesheets land in.
*/
@media (max-width: 1279px) {
#masthead #ast-desktop-header { display: none; }
#masthead #ast-mobile-header { display: block; }
}
@media (min-width: 1280px) {
#masthead #ast-desktop-header { display: block; }
#masthead #ast-mobile-header { display: none; }
}
/*
* Mobile header metrics (measured on production at 1279/1100/1024/921/768/767/640/480/390): a 68px bar with
* 40px side gutters and a 170px logo from 768 up, 20px gutters and a 120px logo below that; the hamburger is
* a bare 24x24 glyph flush against the right gutter, 40px (md) / 20px (sm) after the Locations trigger.
* The padding rule is not gated on `body.ast-header-break-point` the way Astra's own is, so the gutters are
* right on the very first paint rather than after frontend.js has classified the viewport.
*/
/* Two ids needed: Astra's own gutter rule is `.ast-header-break-point #masthead .ast-mobile-header-wrap
.ast-primary-header-bar { padding: 0 20px }`. */
#masthead #ast-mobile-header.ast-mobile-header-wrap .ast-primary-header-bar { padding-left: 40px; padding-right: 40px; }
/* The bar is a 68px block and its grid row is only as tall as the 55px logo; Astra centres the row at ≤768 but not
between 769 and 1279 (the range the 1280 breakpoint opened up), so the logo sat at y=0 there — live has it at y=6.
Give the row the bar's height and centre it at every mobile width. */
#masthead .ast-primary-header-bar .ast-builder-grid-row-container,
#masthead .ast-primary-header-bar .ast-builder-grid-row { min-height: calc(var(--hbd-header-h) - 1px); align-items: center; }
#masthead #ast-mobile-header .site-logo-img img { max-width: 170px; }
#masthead #ast-mobile-header .ast-header-html-2 { margin-right: 40px; }
/* Astra's trigger is a 46x46 pill with its own padding and border; production's is the glyph alone. */
#masthead #ast-mobile-header .ast-button-wrap .menu-toggle,
#masthead #ast-mobile-header .ast-button-wrap .menu-toggle:hover,
#masthead #ast-mobile-header .ast-button-wrap .menu-toggle:focus { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--hbd-ink); }
#masthead #ast-mobile-header .ast-button-wrap .menu-toggle svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 767px) {
#masthead #ast-mobile-header.ast-mobile-header-wrap .ast-primary-header-bar { padding-left: var(--hbd-header-gutter); padding-right: var(--hbd-header-gutter); }
#masthead #ast-mobile-header .site-logo-img img { max-width: 120px; }
#masthead #ast-mobile-header .ast-header-html-2 { margin-right: var(--hbd-header-gutter); }
}
/* ---------------------------------------------------------------- mega menu panels */
/*
* Astra's mega-menu JS (astra-addon addons/nav-menu/assets/js/unminified/mega-menu-frontend.js) writes
* inline `left`/`width` onto `.astra-megamenu` on every hover for 'content'-width mega menus, so the panel
* box can only be pinned from CSS with !important. Live panels are anchored to their own trigger's left
* edge (About li x=429 -> panel x=429, Services 527 -> 527, Treatments 646 -> 646) and flip to right-aligned
* when that would overflow (Resources li ends at 1038 -> panel 338–1038); the last two items get the same
* flip here. Widths: 800px for the Locations/Providers panels, 700px for the image+links panels (both
* measured live). The :has() rules narrow the image+links panels; without :has() support every panel falls
* back to the 800px default, which still renders correctly.
*/
.ast-desktop .astra-megamenu { width: var(--hbd-menu-panel-w) !important; left: 0 !important; display: flex; gap: 1rem; background: var(--hbd-white); border: 0; border-radius: var(--hbd-radius-xs); box-shadow: var(--hbd-shadow-menu) !important; padding: var(--hbd-space-5) !important; align-items: flex-start; max-height: calc(100vh - var(--hbd-header-h) - var(--hbd-space-6)); overflow-y: auto; }
.ast-desktop .astra-megamenu:has(.hbd-menu-panel) { width: 700px !important; }
.ast-desktop .main-header-menu > .menu-item:nth-last-child(-n+2) > .astra-megamenu { left: auto !important; right: 0 !important; }
.ast-desktop .astra-megamenu > .menu-item { width: auto; flex: 1 1 0; border: 0; padding: 0 !important; }
/* Astra pads the columns (0 15px) and the custom-content block (0 16px, plus a vertical margin that
centres it); both are per-menu-item dynamic CSS generated by the mega-menu walker, hence !important. */
.ast-desktop .astra-megamenu .ast-mm-custom-content { padding: 0 !important; margin: 0 !important; }
/* Column title = the live panel eyebrow ("ABOUT"): 14px/20px Neue Haas, ink, 16px below it.
Weight is 500, not 600 (round 4): live declares 600 on `NeueHaasGroteskTextPro_55Roman`, a single-weight
family, so Chrome renders the Roman (400) face with a light synthetic bold. Our family ships a real 500
(Medium) face, so `600` picked Medium *and* synthesised bold on top of it — visibly heavier than live.
`500` (Medium, no synthesis) is still heavier than live in a 4x crop comparison; `400` is the closest
match, because live's synthetic bold sits between our 400 and 500 faces and reads much nearer the Roman.
See the round-4 crop pair (section A) in the header/footer fidelity report — a working note, not
in the repository. */
.ast-desktop .astra-megamenu > .menu-item > .menu-link { font-family: var(--hbd-font-body); font-weight: 400; font-size: var(--hbd-fs-meta); line-height: 20px; letter-spacing: normal; text-transform: uppercase; color: var(--hbd-ink); padding: 0 0 1rem; }
.ast-desktop .astra-megamenu .ast-icon { display: none; }
/*
* Controller ruling (Task 9): `.astra-megamenu-li` is only ever the CLASS ON THE TOP-LEVEL trigger
* (the ancestor of `.astra-megamenu`, e.g. "About"), never on the column/link