/*
 * Header "Locations" click drawer — production parity.
 * Every number here was measured on hormonesbydesign.com at 1440×900 / 390×844 (see
 * the header/footer fidelity round-3 brief — a working note, not in the repository; the behaviour is
 * in CLAUDE.md). Markup: [hbd_locations_drawer] in inc/shortcodes.php.
 * Behaviour: assets/js/locations-drawer.js.
 */

/* ---------------------------------------------------------------- shell */
/* Live: fixed left panel, 400px from 640px up and full-viewport-width below, white, 24px padding,
   Tailwind shadow-lg, translateX(-100%) when closed with a 300ms ease. Body scroll is NOT locked
   (production doesn't lock it either). */
.hbd-drawer {
	position: fixed; top: 0; left: 0; z-index: 50;
	display: flex; flex-direction: column;
	width: 100vw; height: 100vh; padding: var(--hbd-space-5);
	background: var(--hbd-white); box-shadow: var(--hbd-shadow-drawer);
	transform: translateX(-100%);
	/* visibility keeps the off-screen drawer out of the tab order; it flips back only after the slide-out
	   has finished (0s transition delayed by the transform's duration), so the animation is still visible. */
	visibility: hidden;
	transition: transform .3s var(--hbd-ease), visibility 0s linear .3s;
}
.hbd-drawer[aria-hidden="false"] { transform: translateX(0); visibility: visible; transition: transform .3s var(--hbd-ease), visibility 0s linear 0s; }
@media (min-width: 640px) { .hbd-drawer { width: var(--hbd-drawer-w); } }
.hbd-drawer-backdrop {
	position: fixed; inset: 0; z-index: 40;
	background: var(--hbd-black-a50);
	opacity: 0; pointer-events: none;
	transition: opacity .3s var(--hbd-ease);
}
.hbd-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
/* The two views (list / clinic detail) share the drawer box; only one is ever un-hidden. */
.hbd-drawer__view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.hbd-drawer__view[hidden] { display: none; }

/* ---------------------------------------------------------------- header row */
/* 352×40 at 1440 (342 on mobile): 40px spacer | centred 20px title | 36px close button. */
.hbd-drawer__head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
.hbd-drawer__spacer { width: 2.5rem; height: 2.5rem; }
.hbd-drawer__title { margin: 0; font-family: var(--hbd-font-serif-2); font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; color: var(--hbd-ink); text-align: center; }
/* Astra skins every <button>; these reset its fill/shadow/radius for the drawer's icon buttons.
   Close: 10px icon + 12px padding + 1px dashed border = 36×36. Back: 14×12 arrow => 40×38. */
.hbd-drawer__icon-btn,
.hbd-drawer__icon-btn:hover,
.hbd-drawer__icon-btn:focus {
	display: inline-flex; align-items: center; justify-content: center;
	padding: var(--hbd-space-3); margin: 0;
	background: transparent; color: var(--hbd-ink);
	border: 1px dashed var(--hbd-ink); border-radius: var(--hbd-radius-pill);
	box-shadow: none; cursor: pointer;
}
.hbd-drawer__icon-x { width: 10px; height: 10px; }
.hbd-drawer__icon-arrow { width: 14px; height: 12px; }

/* ---------------------------------------------------------------- scroller */
/* Grows to fill the drawer; scrollbar hidden like live. */
.hbd-drawer__scroll { display: flex; flex-direction: column; gap: var(--hbd-space-3); margin-top: var(--hbd-space-4); flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.hbd-drawer__scroll::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- list view */
/* Clinic card: 1px @20% ink, 10px radius, 12px padding, no hover change (live has none). It is a
   <button> rather than the live <div> so it is reachable by keyboard; the type/box is identical. */
.hbd-drawer__card,
.hbd-drawer__card:hover,
.hbd-drawer__card:focus {
	display: block; width: 100%; margin: 0; padding: var(--hbd-space-3);
	/* Astra's button reset makes every <button> 500-weight; live's card text is 400. */
	font-weight: 400; text-align: left; background: transparent; color: var(--hbd-ink);
	border: 1px solid var(--hbd-ink-a20); border-radius: var(--hbd-radius-card);
	box-shadow: none; cursor: pointer; flex: none;
}
.hbd-drawer__card-name { display: block; margin-bottom: var(--hbd-space-2); font-family: var(--hbd-font-display); font-style: italic; font-weight: 300; font-size: 1.5rem; line-height: 2rem; color: var(--hbd-ink); }
.hbd-drawer__card-addr,
.hbd-drawer__addr-text { display: block; font-family: var(--hbd-font-body); font-weight: 400; font-size: var(--hbd-fs-body); line-height: 1.5rem; color: var(--hbd-ink); }
/* The optional "(Inside the Sola Salon Studios)" line is Loretta italic at 500 on live. */
.hbd-drawer__addr-note { font-family: var(--hbd-font-display); font-style: italic; font-weight: 500; font-size: var(--hbd-fs-body); line-height: 1.5rem; }
.hbd-drawer__question { margin: 0; font-family: var(--hbd-font-body); font-weight: 400; font-size: var(--hbd-fs-body); line-height: 1.5rem; color: var(--hbd-ink); text-align: center; }
/* Full-width navy pill, 40px tall (10px/0 padding). */
.hbd-drawer__online {
	display: block; margin-bottom: var(--hbd-space-4); padding: .625rem 0;
	background: var(--hbd-navy); color: var(--hbd-white); text-align: center; text-decoration: none;
	font-family: var(--hbd-font-mono); font-size: var(--hbd-fs-btn); line-height: 1.25rem; text-transform: uppercase;
	border-radius: var(--hbd-radius-pill); transition: background-color var(--hbd-dur) var(--hbd-ease);
}
.hbd-drawer__online:hover { background: var(--hbd-slate); color: var(--hbd-white); }
/* Forum Health card, pinned to the bottom of the drawer: 106px tall, 8px radius, orange gradient. */
.hbd-drawer__forum {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hbd-space-2);
	margin-top: auto; padding: var(--hbd-space-5) var(--hbd-space-3);
	background: var(--hbd-grad-forum-drawer); border-radius: var(--hbd-radius-xs); color: var(--hbd-white); text-decoration: none;
}
.hbd-drawer__forum-text { font-family: var(--hbd-font-body); font-size: var(--hbd-fs-body); line-height: 1.5rem; color: var(--hbd-white); text-align: center; }
.hbd-drawer__forum-logo { display: block; width: 256px; max-width: 100%; height: auto; }
@media (max-width: 639px) { .hbd-drawer__forum-text { font-size: var(--hbd-fs-meta); line-height: 1.25rem; } }

/* ---------------------------------------------------------------- detail view */
.hbd-drawer__detail[hidden] { display: none; }
.hbd-drawer__detail-name { margin: 0 0 var(--hbd-space-3); font-family: var(--hbd-font-display); font-style: italic; font-weight: 300; font-size: 2rem; line-height: 1.2; color: var(--hbd-ink); }
.hbd-drawer__addr { display: flex; flex-direction: row; gap: var(--hbd-space-2); align-items: flex-start; margin: 0 0 var(--hbd-space-3); font-size: var(--hbd-fs-body); line-height: 1.2; color: var(--hbd-ink); }
.hbd-drawer__addr .hbd-drawer__addr-text { line-height: 1.2; }
.hbd-drawer__addr-icon { width: 20px; height: 20px; flex: none; }
.hbd-drawer__phone { display: flex; flex-direction: row; gap: var(--hbd-space-2); align-items: center; margin: 0 0 var(--hbd-space-3); font-family: var(--hbd-font-body); font-size: var(--hbd-fs-body); line-height: 1.5rem; color: var(--hbd-ink); }
.hbd-drawer__phone-icon { width: 16px; height: 16px; flex: none; }
.hbd-drawer__phone a { color: var(--hbd-ink); text-decoration: none; }
/* Live renders this box at 352×235 — 3:2, the aspect of the source photos (the 400×250 in the markup is
   just Next/Image's width/height hint, and the rendered box does not follow it). */
.hbd-drawer__photo { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 6px; margin: var(--hbd-space-4) 0; }
.hbd-drawer__actions { display: flex; flex-direction: column; gap: var(--hbd-space-3); margin-top: var(--hbd-space-4); padding-bottom: var(--hbd-space-5); border-bottom: 1px solid var(--hbd-black-a20); }
.hbd-drawer__btn,
.hbd-drawer__btn:hover,
.hbd-drawer__btn:focus {
	display: inline-flex; align-items: center; justify-content: center; width: 100%; margin: 0;
	padding: var(--hbd-space-3) var(--hbd-space-5);
	font-family: var(--hbd-font-mono); font-weight: 400; font-size: var(--hbd-fs-btn); line-height: 1.25rem; text-transform: uppercase; text-decoration: none;
	border-radius: var(--hbd-radius-pill); box-shadow: none; cursor: pointer;
	transition: all var(--hbd-dur) var(--hbd-ease);
}
.hbd-drawer__btn--primary, .hbd-drawer__btn--primary:focus { background: var(--hbd-navy); color: var(--hbd-white); border: 0; }
.hbd-drawer__btn--primary:hover { background: var(--hbd-slate); color: var(--hbd-white); }
.hbd-drawer__btn--outline, .hbd-drawer__btn--outline:hover, .hbd-drawer__btn--outline:focus { background: transparent; color: var(--hbd-ink); border: 1px solid var(--hbd-ink-a16); }
.hbd-drawer__switch { margin-top: var(--hbd-space-4); }
.hbd-drawer__switch-icon { display: inline-flex; margin-left: var(--hbd-space-2); }
.hbd-drawer__switch-icon svg { width: 14px; height: 14px; }

/* Link pills (SERVICES: / TREATMENTS:) — dashed outline + navy arrow bubble. */
.hbd-drawer__groups { margin-top: var(--hbd-space-4); }
.hbd-drawer__group:first-child:not(:last-child) { margin-bottom: var(--hbd-space-4); }
/* Live renders these group headings in pure black, not the ink used everywhere else. */
.hbd-drawer__group-title { margin: 0 0 var(--hbd-space-1); font-family: var(--hbd-font-serif-2); font-weight: 400; font-size: var(--hbd-fs-meta); line-height: 1.3125rem; text-transform: uppercase; color: var(--hbd-black); }
.hbd-drawer__pills { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.hbd-drawer__pill { display: flex; flex-direction: row; align-items: center; gap: var(--hbd-space-3); width: fit-content; margin: 0 0 var(--hbd-space-2); padding: var(--hbd-space-2) var(--hbd-space-2) var(--hbd-space-2) 1.25rem; border: 1px dashed var(--hbd-black-a40); border-radius: var(--hbd-radius-pill); font-family: var(--hbd-font-mono); font-size: var(--hbd-fs-btn); line-height: 1.25rem; text-transform: uppercase; color: var(--hbd-ink); }
.hbd-drawer__pill a { display: flex; flex-direction: row; align-items: center; gap: var(--hbd-space-2); color: inherit; text-decoration: none; }
.hbd-drawer__pill-icon { display: inline-flex; align-items: center; justify-content: center; padding: var(--hbd-space-2); background: var(--hbd-navy); border-radius: var(--hbd-radius-pill); color: var(--hbd-cream); }
.hbd-drawer__pill-icon svg { width: 14px; height: 14px; }

/* Hours tables: a 105px day column and a mono time column, 16px on a 120% line-height. */
.hbd-drawer__hours { margin-top: var(--hbd-space-4); }
.hbd-drawer__hours-table { display: flex; flex-direction: column; gap: var(--hbd-space-2); margin-top: var(--hbd-space-2); font-family: var(--hbd-font-mono); font-size: var(--hbd-fs-btn); line-height: 1.2; color: var(--hbd-ink); }
.hbd-drawer__hours-table + .hbd-drawer__hours-table { margin-top: var(--hbd-space-4); }
.hbd-drawer__hours-title { margin: 0; font-family: var(--hbd-font-serif-2); font-weight: 400; font-size: var(--hbd-fs-meta); line-height: 1.2; text-transform: uppercase; color: var(--hbd-ink); }
.hbd-drawer__hours-row { display: flex; align-items: baseline; gap: var(--hbd-space-2); margin: 0; font-family: var(--hbd-font-mono); font-weight: 400; font-size: var(--hbd-fs-body); line-height: 1.2; }
.hbd-drawer__day { width: 105px; flex-shrink: 0; }

/* ---------------------------------------------------------------- triggers */
/* Desktop: the "Locations" primary-menu item. No hover pill on live — only a pointer cursor. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .hbd-drawer-trigger,
.ast-builder-menu-1 .main-header-menu > .menu-item > .hbd-drawer-trigger:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item.ast-menu-hover > .hbd-drawer-trigger,
.ast-builder-menu-1 .main-header-menu > .menu-item:focus-within > .hbd-drawer-trigger { background-color: transparent; cursor: pointer; }
/* Round 5 zeroed the horizontal padding here, reasoning that production's "Locations" is a plain label
   rather than one of the pill items and that the desktop row could not afford the extra 32px. Reverted
   on client QC (2026-09-21): with no padding the label butts straight against "About", which reads as a
   layout bug, and the row does fit — the trigger now takes the same 16px either side as every other
   top-level link (Astra's own `.menu-link` padding, so nothing is declared), leaving the measured 32px
   between labels that the rest of the nav has. Header width at 1280 is checked by tests/test-menus.php. */
/* The chevron is Astra's own arrow markup (see hbd_drawer_chevron() in inc/menus.php), so it draws the
   same glyph as the other five nav chevrons. Its *box* is not the same, though, and it cannot be: Astra
   gives `.dropdown-menu-toggle` a 10px right padding cancelled by a −10px right margin, so the glyph
   overhangs the link's own padding, and that rule only reaches a `.menu-item-has-children` — which this
   trigger deliberately is not (it opens a drawer, it has no submenu). Left alone the glyph sat 10px
   further in than every neighbour, which is what made the restored padding read as too much space rather
   than the right amount (client QC, 2026-09-21). Mirroring the two values is what makes the gap either
   side of "Locations" identical to the gap either side of "About". Production's chevron does NOT rotate
   or move when the drawer opens (it is a static glyph next to the label), so there is deliberately no
   open-state transform. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .hbd-drawer-trigger > .hbd-drawer-trigger__toggle { display: inline-flex; padding-right: 10px; margin-right: -10px; }
/* Mobile header element left of the hamburger. */
.hbd-loctrigger__btn,
.hbd-loctrigger__btn:hover,
.hbd-loctrigger__btn:focus { display: inline-flex; align-items: center; gap: .375rem; padding: var(--hbd-space-2); margin: 0; background: transparent; border: 0; box-shadow: none; cursor: pointer; font-family: var(--hbd-font-body); font-weight: 400; font-size: var(--hbd-fs-meta); line-height: 1.25rem; color: var(--hbd-ink); }
.hbd-loctrigger__chevron { display: inline-flex; flex: none; }
/* Production mobile row: `gap-2` (8px) between label and the same 10×7 chevron. */
.hbd-loctrigger__btn { gap: var(--hbd-space-2); }
.hbd-loctrigger__btn .ast-icon.icon-arrow svg,
.ast-header-break-point .hbd-loctrigger__btn .ast-icon.icon-arrow svg { width: .625rem; height: .4375rem; margin: 0; }
.hbd-loctrigger__btn .ast-icon.icon-arrow,
.ast-header-break-point .hbd-loctrigger__btn .ast-icon.icon-arrow { display: inline-flex; margin: 0; padding: 0; line-height: 0; } /* outranks Astra's `.ast-header-break-point .ast-icon.icon-arrow svg` (0.95em) */