/* Footer. The whole footer is ours: template-parts/footer.php renders it on `astra_footer` in place of
   Astra's footer builder (unhooked in inc/astra.php), so no builder row padding, background or separator
   is in play any more.
   Measurements: the round-4/4b live footer dumps (live-footer-1440.json, live-footer-390.json,
   live-footer-assets.json — working notes, not in the repository) and the committed reference shot
   docs/audit/screenshots/hf-reference/r4-live-footer-1440-outer.png (production). */
/*
 * Production's footer is a full-bleed white band with 80px of padding above and below a 1440px-max inner
 * box — 80 + 500 + 80 = 660px tall at 1440 — with no top border and nothing between it and the page
 * content above. The inner box's side padding steps 80 / 60 / 20 with live's own breakpoints, so at 1440
 * the content runs 80 -> 1360 (1280 wide).
 */
.hbd-footer { background: var(--hbd-white); border-top: 0; padding-block: var(--hbd-space-8); }
.hbd-footer__inner { max-width: calc(var(--hbd-container) + 160px); margin-inline: auto; padding-inline: var(--hbd-space-8); }

/* ------------------------------------------------------------------ main grid (two rows, card spans both)
 * Live columns at 1440 (content 80 → 1360): card 413 · brand 358 (content inset 40, so the logo starts at
 * x=533) · links-1 168 (x=851) · links-2 341 (x=1019). Expressed as fr so the proportions hold below 1440.
 * Row 1 is brand + the two link columns, row 2 is the LegitScript badge (centred in the brand column's
 * content area, 533–851) and the legal links (starting at x=893 = 851 + 42). Both are bottom-aligned to the
 * card's bottom edge, and the card's own natural height (40 + 70 + 16 + 44 + 16 + 314) is what makes the
 * whole block 500px tall.
 */
/* The two middle columns are fixed and the card/links-2 pair takes the rest, which is what production
   does: at 1280 (content 1120) live keeps the brand content 318 wide and links-1 168 and shrinks only the
   card (413 -> 360) and links-2. 32.266% is 413/1280, so the 1440 numbers are unchanged. */
.hbd-footer-main { display: grid; grid-template-columns: 32.266% 358px 168px minmax(0, 1fr); grid-template-rows: auto 1fr; }
/* The md/sm wrappers are transparent here, so the grid still sees six direct items (round 4b layout). */
.hbd-footer-main__aside, .hbd-footer-main__links-group { display: contents; }
.hbd-footer-main__card { grid-area: 1 / 1 / span 2 / auto; }
.hbd-footer-main__brand { grid-area: 1 / 2; padding-left: 2.5rem; }
.hbd-footer-main__links--1 { grid-area: 1 / 3; }
.hbd-footer-main__links--2 { grid-area: 1 / 4; }
.hbd-footer-main__badge { grid-area: 2 / 2; align-self: end; padding-left: 2.5rem; }
.hbd-footer-main__legal { grid-area: 2 / 3 / auto / span 2; align-self: end; padding-left: 2.625rem; }

/* Forum Health card: 413×500, 10px radius, 40px top padding, sky fill, image flush to the bottom edge. */
.hbd-forum-card { display: flex; flex-direction: column; text-align: center; padding: 2.5rem 0 0; overflow: hidden; border-radius: var(--hbd-radius-card); }
/* Two classes deep on purpose: Astra's own `p` rules are single-class, so this keeps winning without
   !important (it used to have to beat `.ast-builder-html-element p { margin: 0 }` from header.css). */
.hbd-footer .hbd-forum-card__heading { font-family: var(--hbd-font-display); font-style: italic; font-size: 2rem; line-height: var(--hbd-lh-tight); max-width: 263px; margin: 0 auto var(--hbd-space-4); }
/* Live's filled pills have no border and are 44px tall; `.hbd-btn` gives every button a 1px transparent
   border, which made these two 46. Dropped for the two filled footer pills so the card is exactly 500 tall
   and CONTACT US is exactly 134x44 like live. */
.hbd-forum-card .hbd-btn, .hbd-footer-brand .hbd-btn { align-self: center; border-width: 0; }
/* Live renders a 238×314 crop of the phone mockup. Our media-library asset is a different crop (577×674,
   the whole phone), so the box is pinned to the live 314px height and the image is scaled to it rather than
   cover-cropped — which would slice the phone's sides off. It ends up 269px wide instead of 238; every y
   coordinate in the card, and the 500px block height, are unaffected. */
.hbd-forum-card__img { display: flex; justify-content: center; height: 314px; margin-top: var(--hbd-space-4); overflow: hidden; }
.hbd-forum-card__img img { display: block; height: 100%; width: auto; }

/* Brand column: 275px logo, 36px of air, then the 44px CONTACT US pill and 40px dashed social circles. */
.hbd-footer-brand, .hbd-menu-list { text-align: left; }
.hbd-footer-brand__logo img { max-width: 275px; height: auto; display: block; margin-bottom: calc(var(--hbd-space-6) + var(--hbd-space-1)); }
.hbd-footer-brand__actions { display: flex; align-items: center; gap: var(--hbd-space-2); flex-wrap: wrap; }
/* Live's three glyphs are different sizes inside the same 40px circle (Instagram 14x14, Facebook 12x21,
   YouTube 20x16 — assets/img/icons/social-*.svg carry those dimensions), and hovering only turns the
   dashed border solid: no fill, no colour change. */
.hbd-social { display: inline-flex; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; border: 1px dashed var(--hbd-ink-a40); align-items: center; justify-content: center; color: var(--hbd-ink); }
.hbd-social:hover { border-color: var(--hbd-ink); color: var(--hbd-ink); } /* live: the dashed border darkens to ink; it stays dashed and the glyph is unchanged */

/* Link columns: 16px rows on a 40px pitch (24px line-height + 16px gap). */
.hbd-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hbd-space-4); }
.hbd-menu-list li { line-height: 1.5; }
.hbd-menu-list a { color: var(--hbd-ink); text-decoration: none; font-size: var(--hbd-fs-body); } .hbd-menu-list a:hover { color: var(--hbd-ink-a60); } /* live: text fades to 60% ink */

/* LegitScript badge: 128px wide, centred in the brand column's content area. */
.hbd-legitscript { display: block; text-align: center; }
.hbd-legitscript img { width: 128px; height: auto; display: inline-block; }
/* Legal links: 14px at 60% ink, laid out left to right with 28px gaps and wrapping onto a 52px-pitch second
   row — a flex wrap, not a fixed grid, is what reproduces live's exact x positions (Disclaimer 893,
   Privacy Policy 989, Terms and Conditions 1106, then Notice of Complaint back at 893). */
.hbd-legal-menu { display: flex; flex-wrap: wrap; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.hbd-legal-menu li { line-height: 1.5; }
.hbd-legal-menu a { font-size: var(--hbd-fs-meta); color: var(--hbd-ink-a60); text-decoration: none; }
.hbd-legal-menu a:hover { color: var(--hbd-ink-a60); text-decoration: underline; } /* live: underline only, colour unchanged */

/* --------------------------------------------------------------------------------- md (768-1279px)
 * Production's middle layout (measured at 1279/1200/1100/1024/960/921/900/768): 60px side gutters, a brand
 * row across the top (logo left, CONTACT US + the three social circles right-aligned and centred on the
 * logo), then two equal columns 40px apart. Left is the Forum Health card, whose phone image is the full
 * card width at its natural ratio, so the card height is 186 + image height. Right is a column the same
 * height: the two link lists side by side with a 24px gap at the top, then the LegitScript badge pushed to
 * the bottom with the legal links 40px under it, their bottom edge level with the card's.
 * Astra's own 921px tablet breakpoint must not leak in here — the whole 768-1279 range is one layout.
 */
@media (max-width: 1279px) {
	.hbd-footer__inner { padding-inline: 60px; }
	.hbd-footer-main { grid-template-columns: calc((100% - 40px) / 2) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 40px; }
	.hbd-footer-main__aside { display: flex; flex-direction: column; grid-area: 2 / 2; }
	.hbd-footer-main__links-group { display: flex; gap: var(--hbd-space-5); }
	.hbd-footer-main__links { min-width: 0; }
	.hbd-footer-main__brand { grid-area: 1 / 1 / auto / span 2; padding-left: 0; margin-bottom: 2.5rem; }
	.hbd-footer-main__card { grid-area: 2 / 1; }
	/* `align-self` is the cross axis inside the column flex aside, so the xl `align-self: end` would
	   right-align (and shrink) these two instead of bottom-aligning them. */
	.hbd-footer-main__badge { grid-area: auto; align-self: stretch; margin-top: auto; padding-left: 0; }
	.hbd-footer-main__legal { grid-area: auto; align-self: stretch; margin-top: 2.5rem; padding-left: 0; }
	/* Brand row: logo left, the pill + circles right-aligned and vertically centred on the logo. */
	.hbd-footer-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--hbd-space-5); }
	.hbd-footer-brand__logo img { margin-bottom: 0; }
	/* The card image is the card's full width at its natural ratio here, so the fixed 314px box is dropped. */
	.hbd-forum-card__img { height: auto; }
	.hbd-forum-card__img img { width: 100%; height: auto; }
	.hbd-legitscript { text-align: left; }
}
/* --------------------------------------------------------------------------------- sm (<=767px)
 * One full-width column, 20px gutters, in production's order: brand (logo, then the contact row at y=125),
 * card at y=209 (full content width, image full card width), links-2, links-1, badge, legal — with the
 * measured 40 / 40 / 24 / 40 / 40 gaps and one legal link per row on a 52px pitch.
 */
@media (max-width: 767px) {
	.hbd-footer__inner { padding-inline: var(--hbd-header-gutter); }
	.hbd-footer-main { display: flex; flex-direction: column; }
	.hbd-footer-main > *, .hbd-footer-main__aside > * { padding-left: 0; align-self: stretch; }
	.hbd-footer-main__brand { order: 1; margin-bottom: 0; }
	.hbd-footer-main__card { order: 2; margin-top: 2.5rem; }
	.hbd-footer-main__aside { order: 3; margin-top: 2.5rem; }
	/* The group's own 24px gap is the whole distance between the two stacked lists. */
	.hbd-footer-main__links-group { flex-direction: column; }
	.hbd-footer-main__links--2 { order: 1; }
	.hbd-footer-main__links--1 { order: 2; }
	.hbd-footer-main__badge { margin-top: 2.5rem; }
	/* Back to the stacked brand block: logo, 36px, then the CONTACT US + socials row. */
	.hbd-footer-brand { display: block; }
	.hbd-footer-brand__logo img { margin-bottom: calc(var(--hbd-space-6) + var(--hbd-space-1)); }
	.hbd-footer .hbd-forum-card__heading { font-size: 1.5rem; }
	/* One legal link per row on a 52px pitch (24px line + 28px gap); `nowrap` keeps "Terms and Conditions"
	   and "Notice of Complaint" on one line each, as on live. */
	.hbd-legal-menu { flex-direction: column; }
	.hbd-legal-menu li { white-space: nowrap; }
}

/* The copyright line under the columns (production's own; 2026-09-23 pass): 40px below the grid,
   centred, 12/18 in the body face's medium, inset 15px on a phone so it wraps as live's does. */
.hbd-footer__copyright { margin: var(--hbd-footer-copyright-gap) 0 0; padding-inline: var(--hbd-footer-copyright-inset); text-align: center; font-family: var(--hbd-font-body); font-weight: 500; font-size: var(--hbd-footer-copyright-fs); line-height: var(--hbd-footer-copyright-lh); color: var(--hbd-ink); }