/*
 * Header (a theme part, loaded on every page by inc/assets.php).
 *
 * Mobile first; desktop from 900px. The clinic's header options arrive as
 * <body> classes (inc/tokens.php):
 *   hdr-sticky  hdr-d-full|pill  hdr-m-full|pill  hdr-bg-look|solid|blur|clear|clear-solid
 *   hdr-above|over  hdr-scroll-stay|shrink|hide  logo-left|center|right  has-utility
 * and header.js adds is-scrolled and hdr-hidden to <body> while scrolling.
 *
 * Variables used: --hb (background) --hs (shadow) --hf (blur filter)
 *   --hbp (pill background) --hsp (pill shadow) --hlp (pill line) --hdr-h (height, for "over the hero")
 * Source: the builder's "HEADER OPTIONS" section and docs/LOOKS-SPEC.md section 3.
 */

	--hb: var(--hdr-bg);
	--hs: none;
	--hf: none;
	--hbp: var(--surface);
	--hsp: 0 10px 30px -16px rgb(0 0 0 / 0.35);
	--hlp: var(--line);
	--hdr-h: 70px;
	--hi: var(--ink); /* header text and menu */
	--hh: var(--brand-text, var(--brand)); /* menu hover and current page */
}

/* ---------- Background options ---------- */

body.hdr-bg-solid { --hb: var(--surface); --hs: 0 1px 0 var(--line); }

body.hdr-bg-blur {
	--hb: color-mix(in srgb, var(--surface) 72%, transparent);
	--hs: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent);
	--hf: saturate(1.5) blur(14px);
	--hbp: color-mix(in srgb, var(--surface) 72%, transparent);
}

body.hdr-bg-clear,
body.hdr-bg-clear-solid {
	--hb: transparent;
	--hs: none;
	--hbp: transparent;
	--hsp: none;
	--hlp: color-mix(in srgb, currentcolor 28%, transparent);
}

body.hdr-bg-clear-solid.is-scrolled {
	--hb: var(--surface);
	--hs: 0 8px 24px -14px rgb(0 0 0 / 0.4);
	--hbp: var(--surface);
	--hsp: 0 10px 30px -16px rgb(0 0 0 / 0.35);
	--hlp: var(--line);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.hdr-bg-blur { --hb: var(--surface); --hbp: var(--surface); }
}

/* ---------- A custom header colour (Clinic → Look and feel → Element colours) ---------- */
/* Beats the background options above, except "clear" (which stays see-through over a photo until scrolled). */
body.hdr-custom { --hb: var(--hdr-custom); --hbp: var(--hdr-custom); --logo-ink: var(--hi); --m-ink: var(--hi); --m-bg: color-mix(in srgb, var(--hi) 12%, transparent); }
body.hdr-custom.hdr-bg-blur { --hb: color-mix(in srgb, var(--hdr-custom) 78%, transparent); --hbp: var(--hb); }
body.hdr-custom.hdr-bg-clear,
body.hdr-custom.hdr-bg-clear-solid:not(.is-scrolled) { --hb: transparent; --hbp: transparent; }
body.hdr-custom.hdr-bg-clear-solid.is-scrolled { --hb: var(--hdr-custom); --hbp: var(--hdr-custom); }

/* ---------- The header bar ---------- */

.hdr {
	position: relative;
	z-index: 10;
	background: var(--hb);
	box-shadow: var(--hs);
	-webkit-backdrop-filter: var(--hf);
	backdrop-filter: var(--hf);
	transition: background-color 0.25s, box-shadow 0.25s, transform 0.3s ease;
}

/* Header spacing options (Clinic → Header): height, side space, width, menu size and gaps. Body classes from tokens.php. */
body.hdr-py-compact { --hdr-mh: 58px; --hdr-mh-d: 70px; }
body.hdr-py-roomy { --hdr-mh: 84px; --hdr-mh-d: 110px; }
body.hdr-px-tight { --hdr-px: 0.75rem; }
body.hdr-px-roomy { --hdr-px: 1.75rem; }
body.hdr-px-wide { --hdr-px: 3rem; }
body.hdr-w-wide { --hdr-max: 90rem; }
body.hdr-w-full { --hdr-max: 120rem; }
body.hdr-ms-sm { --hdr-ms: 0.8125rem; }
body.hdr-ms-lg { --hdr-ms: 1.0625rem; }
body.hdr-ms-xl { --hdr-ms: 1.1875rem; }
body.hdr-mg-tight { --hdr-mg: 14px; }
body.hdr-mg-wide { --hdr-mg: clamp(26px, 3.4vw, 46px); }

/* Look C: a hairline under the header (F sits on the page). */
.look-c .hdr { border-bottom: 1px solid var(--line); }

body.hdr-bg-blur .hdr,
body.hdr-bg-clear .hdr,
body.hdr-bg-clear-solid:not(.is-scrolled) .hdr { border-bottom-color: transparent; }

.hdr__inner {
	display: grid;
	align-items: center;
	column-gap: 10px;
	width: min(100% - 2 * var(--hdr-px, 1rem), var(--hdr-max, 72rem));
	min-height: var(--hdr-mh, 70px);
	margin-inline: auto;
	grid-template-columns: auto 1fr auto auto;
	grid-template-areas: "logo . call menu";
	transition: min-height 0.25s;
}

body.logo-center .hdr__inner { grid-template-columns: auto 1fr auto 1fr auto; grid-template-areas: "menu . logo . call"; }
body.logo-right  .hdr__inner { grid-template-columns: auto auto 1fr auto;      grid-template-areas: "menu call . logo"; }

.logo { grid-area: logo; }
.m-call { grid-area: call; }
.hdr__menu { grid-area: menu; }

/* Sticky, and over the hero. */
body.hdr-sticky .hdr { position: sticky; top: 0; z-index: 45; }
body.hdr-over .hdr { margin-bottom: calc(var(--hdr-h) * -1); }
body.hdr-over .site-main > :first-child { padding-top: calc(var(--hdr-h) + 14px); }

/* On scroll. */
body.hdr-scroll-shrink.is-scrolled .hdr__inner { min-height: 56px; }
body.hdr-scroll-shrink.is-scrolled .logo__img { height: calc(var(--logo-h) * 0.66); }
body.hdr-scroll-hide.hdr-hidden .hdr { transform: translateY(calc(-100% - 14px)); }

/* ---------- Logo ---------- */

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--logo-ink);
	text-decoration: none;
}

.logo__img { width: auto; max-width: 60vw; height: var(--logo-h); object-fit: contain; transition: height 0.25s; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-family: var(--fh); font-weight: var(--hw); font-size: 1.3rem; letter-spacing: var(--hls); }
.logo__tag { margin-top: 3px; font-size: 0.7rem; font-weight: 600; opacity: 0.75; }

/* ---------- Round phone and menu buttons (mobile) ---------- */

.m-btn {
	display: grid;
	place-items: center;
	width: var(--mb, 44px);
	height: var(--mb, 44px);
	border-radius: var(--m-r);
	background: var(--m-bg);
	color: var(--m-ink);
	cursor: pointer;
}

.m-btn .ico { width: var(--mbi, 22px); height: var(--mbi, 22px); }

.hdr__menu > summary { list-style: none; }
.hdr__menu > summary::-webkit-details-marker { display: none; }
.hdr__menu:not([open]) .hdr__icon-close,
.hdr__menu[open] .hdr__icon-open { display: none; }

.hdr__panel {
	position: absolute;
	inset: 100% 0 auto;
	display: grid;
	gap: 1rem;
	padding: 1rem 1.25rem 1.5rem;
	/* The panel always pairs the card colour with the text colour, never the header's own text colour (--hi): a dark header has light --hi text, which vanished on this light panel. */
	background: var(--surface);
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 18px 30px -20px rgb(0 0 0 / 0.35);
}

.hdr__panel ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.hdr__panel li a { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: var(--wm, 600); text-decoration: none; }
.hdr__panel li a[aria-current="page"] { color: var(--brand-text, var(--brand)); }
.hdr__panel .button { width: 100%; }

/* The desktop menu and Book button are hidden on mobile. */
.hdr__nav, .hdr__cta, .hdr__call-d { display: none; }

/* ---------- Utility bar (look C by default) ---------- */

.u {
	background: var(--u-bg);
	color: var(--u-ink);
	font-size: 13px;
	font-weight: 500;
}

.u__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: min(100% - 2rem, 72rem);
	min-height: 36px;
	margin-inline: auto;
}

.u__item { display: flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.u__item .ico { width: 16px; height: 16px; }
.u__full { display: none; }
.look-c .u__em { padding: 4px 10px; border-radius: 6px; background: var(--accent-2); color: #fff; font-weight: 700; }

/* ---------- Pill on mobile ---------- */

@media (max-width: 899.98px) {
	body.hdr-m-pill { --hdr-h: 66px; }

	body.hdr-m-pill .hdr {
		padding: 8px 10px 0;
		background: none;
		border-bottom: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.hdr-m-pill .hdr__inner {
		width: 100%;
		min-height: 58px;
		padding-inline: 16px 8px;
		background: var(--hbp);
		border: 1px solid var(--hlp);
		border-radius: 999px;
		box-shadow: var(--hsp);
		-webkit-backdrop-filter: var(--hf);
		backdrop-filter: var(--hf);
	}

	body.hdr-m-pill .m-btn { width: var(--mb, 42px); height: var(--mb, 42px); border-radius: 50%; }
	body.hdr-m-pill .hdr__panel { inset-inline: 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: 20px; }
}

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
	body { --hdr-h: 88px; }

	.u__full { display: flex; }

	.hdr__inner {
		min-height: var(--hdr-mh-d, 88px);
		column-gap: clamp(14px, 2.2vw, 28px);
		grid-template-columns: auto auto auto 1fr auto;
		grid-template-areas: "logo navA navB . cta";
	}

	body.logo-center .hdr__inner { grid-template-columns: 1fr auto 1fr auto; grid-template-areas: "navA logo navB cta"; }
	body.logo-right  .hdr__inner { grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "navA navB . cta logo"; }

	/* Where the menu sits (Clinic → Header: Menu position). Left is the default, next to the logo. */
	body.hdr-menu-right:not(.logo-center):not(.logo-right) .hdr__inner { grid-template-areas: "logo . navA navB cta"; }
	body.hdr-menu-center:not(.logo-center):not(.logo-right) .hdr__inner { grid-template-columns: auto 1fr auto auto 1fr auto; grid-template-areas: "logo . navA navB . cta"; }

	/* Mobile-only controls off; menu and Book button on. */
	.m-call, .hdr__menu { display: none; }
	.hdr__nav { display: block; }
	.hdr__cta { display: flex; align-items: center; gap: 10px; grid-area: cta; }
	/* The round call button beside Book: same height as Book, icon dead centre, outlined in the header text colour so it reads on any header colour. */
	body.hdr-call .hdr__call-d {
		display: inline-grid;
		place-items: center;
		flex: none;
		width: 46px;
		height: 46px;
		border: 2px solid color-mix(in srgb, var(--hi) 32%, transparent);
		border-radius: 50%;
		background: transparent;
		color: var(--hi);
	}
	body.hdr-call .hdr__call-d:hover { background: color-mix(in srgb, var(--hi) 10%, transparent); }
	body.hdr-call .hdr__call-d .ico { width: 20px; height: 20px; }
	.hdr__nav--a { grid-area: navA; }
	.hdr__nav--b { grid-area: navB; }

	.hdr__nav ul { display: flex; align-items: center; gap: var(--hdr-mg, clamp(14px, 2.2vw, 28px)); margin: 0; padding: 0; list-style: none; }
	.hdr__nav a { color: var(--hi); font-size: var(--hdr-ms, 0.9375rem); font-weight: var(--wm, 600); text-decoration: none; white-space: nowrap; }
	.hdr__nav a:hover,
	.hdr__nav a[aria-current="page"] { color: var(--hh); text-decoration: underline; text-underline-offset: 6px; }
	.hdr__cta .button { min-height: 46px; }

	/* The clinic name stays on one line; on narrower desktops the small tagline steps aside to leave room for the menu. */
	.logo__name { white-space: nowrap; }
	.logo__text { flex: none; }

	body.hdr-scroll-shrink.is-scrolled .hdr__inner { min-height: 64px; }

	/* Narrow desktops (900-1099px): drop the tagline and tighten the menu and button so a menu of six pages fits. */
	@media (max-width: 1099.98px) {
		.logo__tag { display: none; }
		.hdr__inner { column-gap: 14px; }
		.hdr__nav ul { gap: 14px; }
		.hdr__nav a { font-size: min(var(--hdr-ms, 0.9375rem), 0.875rem); }
		.hdr__cta .button { min-height: 42px; padding: 0 16px; font-size: 0.9375rem; }
		body.hdr-call .hdr__call-d { width: 42px; height: 42px; }
	}

	/* Pill on desktop. */
	body.hdr-d-pill { --hdr-h: 86px; }

	body.hdr-d-pill .hdr {
		padding: 12px 24px 0;
		background: none;
		border-bottom: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.hdr-d-pill .hdr__inner {
		width: 100%;
		max-width: 1180px;
		min-height: 72px;
		padding-inline: 28px 14px;
		background: var(--hbp);
		border: 1px solid var(--hlp);
		border-radius: 999px;
		box-shadow: var(--hsp);
		-webkit-backdrop-filter: var(--hf);
		backdrop-filter: var(--hf);
	}

	body.hdr-d-pill.hdr-scroll-shrink.is-scrolled .hdr__inner { min-height: 58px; }

	/* Desktop full width but mobile pill: the pill styles above are mobile-only, so nothing more to reset. */
}

@media (prefers-reduced-motion: reduce) {
	.hdr, .hdr__inner, .logo__img { transition: none; }
}

/* ---------- Phones: button size and style, and the logo kept to half the screen ---------- */
/* Clinic → Header: "Mobile phone and menu buttons". Body classes hdr-mb-md|lg (size) and hdr-mbs-outline|bare (style). */

@media (max-width: 899px) {
	.logo { min-width: 0; max-width: 49vw; }
	.logo__img { max-width: 100%; }

	body.hdr-mb-md { --mb: 52px; --mbi: 26px; }
	body.hdr-mb-lg { --mb: 60px; --mbi: 32px; }

	body.hdr-mbs-outline .m-btn { border: 2px solid color-mix(in srgb, var(--m-ink) 85%, transparent); background: transparent; }
	body.hdr-mbs-bare .m-btn { background: transparent; }
	body.hdr-mb-md .hdr__inner, body.hdr-mb-lg .hdr__inner { column-gap: 12px; }
}