/**
 * Component + layout styles: site header, site footer, and the /partials
 * UI kit (button, card, section-heading). Same cascade rule as base.css:
 * a section-level wrapper owns its own padding, and nothing in here sets
 * a bare element's own top/bottom margin. Component-internal spacing uses
 * flexbox `gap` instead of margins, so it can never collide with a
 * surrounding section's padding.
 */

/* Site header: fixed, semi-transparent with backdrop blur. Because it's
   fixed, the page content needs matching top padding or the nav would
   cover it — that's the body rule right below. */
body {
	padding-block-start: var(--nav-height);
}

/* Announcement bar sits above the fixed nav when active — both the nav's
   own offset and the body's top padding shift down to match its real
   rendered height. That height is a fixed --announcement-bar-height
   (44px) on desktop where the message reliably fits one line, but on a
   narrow phone a longer message wraps to two or three — so the offsets
   below use --announcement-bar-actual-height instead, which
   assets/js/navigation.js measures and sets on every load/resize. The
   `, var(--announcement-bar-height)` fallback keeps everything correct
   even for the first paint before that JS runs. */
body.has-announcement-bar {
	padding-block-start: calc(var(--nav-height) + var(--announcement-bar-actual-height, var(--announcement-bar-height)));
}

/* Locks background scroll while the full-screen mobile nav panel is open
   — added/removed by assets/js/navigation.js. Desktop never adds this
   class in the first place (the toggle that triggers it is hidden there),
   so no min-width override is needed to undo it. */
body.has-open-nav {
	overflow: hidden;
}

.announcement-bar {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 110;
	min-height: var(--announcement-bar-height);
	padding-block: var(--space-2);
	background-color: var(--color-ink);
	display: flex;
	align-items: center;
}

.announcement-bar__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-5);
	text-align: center;
}

@media (min-width: 640px) {
	.announcement-bar__inner {
		padding-inline: var(--container-padding);
	}
}

.announcement-bar__message {
	margin: 0;
	color: var(--color-cream);
	font-size: var(--text-sm);
	text-decoration: none;
	/* No nowrap here on purpose — this is the "wraps rather than
	   overflows" requirement. Combined with the min-height (not a fixed
	   height) above, a longer message on a narrow screen grows the bar
	   downward instead of clipping or forcing the page wider. */
}

a.announcement-bar__message:hover,
a.announcement-bar__message:focus-visible {
	color: var(--color-gold-soft);
	text-decoration: underline;
}

/* On the ink-dark announcement bar, --color-blue's focus ring fails 3:1
   contrast (1.83:1) — gold is the correct dark-background exception,
   same reasoning as the Services section and the hero stamp card. */
a.announcement-bar__message:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	height: var(--nav-height);
	background-color: rgba(var(--color-cream-rgb), 0.82);
	backdrop-filter: blur(var(--backdrop-blur));
	-webkit-backdrop-filter: blur(var(--backdrop-blur));
	border-bottom: 1px solid transparent;
	transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* Added by assets/js/navigation.js once the page has scrolled past 20px —
   at the very top, the nav reads as glass floating over the hero; once
   there's content behind it, it earns a hairline and a lift off the page. */
.site-header--scrolled {
	border-bottom-color: var(--color-line);
	box-shadow: var(--shadow-sm);
}

.has-announcement-bar .site-header {
	inset-block-start: var(--announcement-bar-actual-height, var(--announcement-bar-height));
}

.site-header__inner {
	height: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	/* Mobile-first, matching .container's own gutter (base.css) — the
	   header previously used the tablet-up 32px gutter unconditionally,
	   which left too little room for the wordmark + a properly-sized
	   44px toggle at 320-360px. */
	padding-inline: var(--space-5); /* 24px */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

@media (min-width: 640px) {
	.site-header__inner {
		padding-inline: var(--container-padding); /* 32px tablet+ */
		gap: var(--space-4);
	}
}

.site-title {
	font-size: var(--text-md);
	margin: 0;
	min-width: 0; /* lets the flex child actually shrink/ellipsis instead of forcing the row wider than the viewport */
}

@media (min-width: 400px) {
	.site-title {
		font-size: var(--text-lg);
	}
}

.site-title a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: var(--weight-display-medium);
	text-decoration: none;
	background-image: none; /* this is the wordmark, not a body link — no underline-on-hover here */
	color: var(--color-ink);
	/* Belt-and-suspenders against horizontal page overflow on very narrow
	   phones: if the wordmark still doesn't fit even at the smaller
	   font-size above, it ellipsizes instead of pushing the header wider
	   than the viewport. */
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-logo {
	display: block;
	height: 26px;
	width: auto;
	flex-shrink: 0;
}

@media (min-width: 400px) {
	.site-logo {
		height: 34px;
	}
}

.site-title__accent {
	color: var(--color-gold);
	font-style: italic;
}

/* Condensed wordmark below 400px ("MG GlobalMed") — full "MG GlobalMed
   Connect" from 400px up. A responsive brand treatment, not a content
   change: the fixed wordmark text itself is unchanged, this only hides
   one word at sizes too narrow to comfortably show it next to a
   correctly-sized 44px tap target. */
.site-title__suffix {
	display: none;
}

@media (min-width: 400px) {
	.site-title__suffix {
		display: inline;
	}
}

/* Hamburger toggle — hidden on desktop, see the min-width block below.
   44x44 is the minimum comfortable tap target (WCAG 2.5.5); it also stays
   above the full-screen panel (z-index) so it keeps working as the close
   control once the panel is open. */
.nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	z-index: 102;
}

.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-ink);
	border-radius: var(--radius-sm);
	transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Nav panel — a full-width/full-height overlay below the header on
   mobile, not a narrow side drawer (the header itself, with the toggle
   now doubling as the close control, stays visible above it). visibility
   (not display) is what's toggled, so the closed panel's links correctly
   drop out of tab order without any manual tabindex bookkeeping. */
.site-nav {
	position: fixed;
	inset-block-start: var(--nav-height);
	inset-inline: 0;
	width: 100%;
	/* Explicit height instead of relying on inset-block-end:0 to derive
	   it — a position:fixed flex container's auto-height-from-opposing-
	   insets didn't resolve reliably in testing, so this is the more
	   robust, explicit equivalent. */
	height: calc(100vh - var(--nav-height));
	background-color: var(--color-cream);
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
	z-index: 101;
	/* Below 980px this holds two regions: the scrollable link list
	   (.site-nav > nav) and the CTA pinned as its own flex-shrink:0
	   footer — see the max-width block below. Nothing here scrolls
	   itself; that's why overflow-y:auto moved off this rule. */
}

.has-announcement-bar .site-nav {
	inset-block-start: calc(var(--nav-height) + var(--announcement-bar-actual-height, var(--announcement-bar-height)));
	height: calc(100vh - var(--nav-height) - var(--announcement-bar-actual-height, var(--announcement-bar-height)));
}

.site-nav--open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.site-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-body-medium);
	font-size: var(--text-base);
}

.site-nav__list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.site-nav__cta {
	align-self: flex-start;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Mobile panel: a plain vertical LIST (hairline dividers, no fills, no
   borders on individual links) with the CTA as the one real button,
   pinned to the bottom. Everything here is scoped to max-width so none
   of it touches the >=980px inline nav, which keeps its own separate
   rules in the block below completely unchanged. */
@media (max-width: 979px) {
	.site-nav > nav {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding-inline: 20px;
	}

	.site-nav__list a {
		min-height: 52px; /* the row IS the tap target — no extra padding stacked on top */
		font-size: 15px;
		font-weight: var(--weight-body-medium);
		color: var(--color-charcoal);
		border-block-end: 1px solid var(--color-line);
	}

	.site-nav__list li:last-child a {
		border-block-end: none;
	}

	/* Specificity bump (.site-nav .site-nav__cta) so this reliably wins
	   over .btn--secondary's transparent/outline look regardless of
	   source order — the shared "btn btn--secondary" classes on this
	   link are what the >=980px desktop button still uses unchanged. */
	.site-nav .site-nav__cta {
		flex-shrink: 0;
		align-self: stretch;
		justify-content: center;
		width: auto;
		margin: var(--space-4) 20px;
		min-height: 52px;
		background-color: var(--color-blue);
		color: var(--color-cream);
		border-color: var(--color-blue);
	}

	.site-nav .site-nav__cta:hover,
	.site-nav .site-nav__cta:focus-visible {
		background-color: var(--color-blue-deep);
		color: var(--color-cream);
	}
}

@media (min-width: 980px) {
	.nav-toggle {
		display: none;
	}

	.site-nav {
		position: static;
		width: auto;
		height: auto;
		visibility: visible;
		opacity: 1;
		transform: none;
		background: none;
		border: none;
		padding: 0;
		flex-direction: row;
		align-items: center;
		gap: var(--space-6);
	}

	.site-nav__list {
		flex-direction: row;
		gap: var(--space-5);
	}
}

/* Site footer */
.site-footer {
	border-top: var(--border-hairline);
	background-color: var(--color-ink);
	color: var(--color-cream);
}

/* Same ink-background exception as the announcement bar, enquiry CTA, and
   Services section — every link in the footer sits on --color-ink. */
.site-footer a:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-9) var(--space-6); /* generous 96px separating the footer from page content */
	padding-inline: var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.site-footer__grid {
		grid-template-columns: 1.2fr 1fr 1fr;
	}
}

.site-footer__contact a {
	color: var(--color-gold-soft);
	text-decoration: none;
}

.site-footer__address-label,
.site-footer__phone-label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-mist);
}

.site-footer__phone-label {
	margin-inline-start: var(--space-2);
}

.site-footer__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-ok);
}

.site-footer__whatsapp-note {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-mist);
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-size: var(--text-sm);
}

.site-footer__list a {
	color: var(--color-gold-soft);
	text-decoration: none;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__social a {
	color: var(--color-gold-soft);
	text-decoration: none;
	font-size: var(--text-sm);
}

.site-footer__meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-mist);
}

.site-footer__trademark-note {
	margin: 0;
	font-size: 11.5px;
	line-height: var(--leading-normal);
	color: rgba(var(--color-cream-rgb), 0.48);
	max-width: 60ch;
}

/* Medical disclaimer — deliberately its own bordered band, not buried in
   the meta line, so it reads as a standalone statement rather than fine
   print. Present on every page, since it's a structural fact about the
   business, not page-specific content. */
.site-footer__disclaimer {
	padding: var(--space-4) var(--space-5);
	border: var(--border-hairline);
	border-radius: var(--radius-sm);
	background-color: rgba(var(--color-cream-rgb), 0.04);
}

.site-footer__disclaimer p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-cream);
}

.site-footer__disclaimer a {
	color: var(--color-gold-soft);
}

/* Main content region owns its own vertical padding */
.site-main {
	padding-block: var(--space-7);
}

/* Section heading partial */
.section-heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-4); /* 16px, eyebrow → heading */
}

.section-heading--center {
	align-items: center;
	text-align: center;
}

.section-heading__title {
	margin: 0;
	font-size: var(--text-section-heading);
	font-weight: var(--weight-display-regular);
	line-height: var(--leading-section-heading);
	letter-spacing: var(--tracking-section-heading);
	font-variation-settings: 'opsz' 72, 'WONK' 1;
}

.section-heading__subtitle {
	margin-block-start: var(--space-2); /* the flex gap above already contributes 16px; +8px here brings heading → lead to the full 24px */
	color: var(--color-mist);
	font-size: var(--text-md);
	max-width: 60ch;
}

/* Button partial — crisp corners, no pill shapes (per design system) */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-weight: var(--weight-body-semibold);
	font-size: var(--text-sm);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.btn--primary {
	background-color: var(--color-blue);
	color: var(--color-cream);
	transform: translateY(0);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--color-blue-deep);
	color: var(--color-cream);
	transform: translateY(-2px);
}

.btn--primary:active {
	transform: translateY(0);
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-cream);
}

.btn--ghost {
	background-color: transparent;
	color: var(--color-blue);
	padding-inline: var(--space-2);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	color: var(--color-ink);
}

/* Card partial. The dashed "ticket-stub" border used to live here, but
   the partner referral-document card's real perforated tear-line is now
   the one place dashes mean something — a plain card repeating the same
   dash pattern would just compete with it, so this gets a solid hairline. */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6); /* 32px */
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background-color: var(--color-cream);
	text-decoration: none;
	color: inherit;
	box-shadow: var(--shadow-sm);
}

a.card {
	transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

a.card:hover,
a.card:focus-visible {
	border-color: var(--color-gold);
	box-shadow: var(--shadow-lg);
	transform: translateY(-6px);
}

.card__title {
	margin: 0;
	font-size: var(--text-card-heading);
	font-weight: var(--weight-display-medium);
	line-height: var(--leading-card-heading);
	letter-spacing: var(--tracking-card-heading);
	font-variation-settings: 'opsz' 36;
}

.card__body {
	margin: 0;
	color: var(--color-mist);
	font-size: var(--text-sm);
	line-height: var(--leading-body-sm);
}

.card__icon {
	font-size: var(--text-2xl);
	color: var(--color-gold);
}

/* Reusable related-content grid — used after partner pages and articles,
   anywhere a set of .card partials needs to sit in a simple 1-2 column
   layout. Kept here (not in a page-specific stylesheet) since it's no
   longer specific to any one page. */
.related-grid {
	margin-block-start: var(--space-6);
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Enquiry CTA banner (partials/enquiry-cta.php) — used on the homepage
   and at the end of every article. */
.enquiry-cta {
	padding-block: var(--space-8); /* 64px mobile */
	background-color: var(--color-ink); /* dark section fill is always --color-ink — --color-blue is reserved for buttons/links/interactive states, and doesn't have enough contrast against ink to work as an accent on it (1.83:1) */
	color: var(--color-cream);
}

@media (min-width: 640px) {
	.enquiry-cta {
		padding-block: var(--space-9); /* 96px tablet */
	}
}

@media (min-width: 1024px) {
	.enquiry-cta {
		padding-block: var(--space-10); /* 128px desktop */
	}
}

.enquiry-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

@media (min-width: 700px) {
	.enquiry-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.enquiry-cta__title {
	margin: 0;
	color: var(--color-cream);
}

.enquiry-cta__text {
	margin: 0;
	color: var(--color-gold-soft);
	max-width: 55ch;
}

.enquiry-cta .btn--primary {
	background-color: var(--color-gold);
	color: var(--color-ink);
}

.enquiry-cta .btn--primary:hover,
.enquiry-cta .btn--primary:focus-visible {
	background-color: var(--color-gold-soft);
}

/* Same ink-background exception as the announcement bar — --color-blue's
   focus ring doesn't have enough contrast against --color-ink. */
.enquiry-cta .btn--primary:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* Floating WhatsApp widget (partials/whatsapp-widget.php) — mobile only,
   dismissible for the session (see assets/js/whatsapp-widget.js). Site-
   wide chrome, not page-specific, so it lives here rather than in a
   page's own stylesheet. */
.whatsapp-widget {
	position: fixed;
	inset-block-end: var(--space-5);
	inset-inline-end: var(--space-5);
	z-index: 150;
	display: none;
	align-items: center;
	gap: var(--space-3);
}

@media (max-width: 719px) {
	.whatsapp-widget {
		display: flex;
	}
}

.whatsapp-widget[hidden] {
	display: none;
}

/* Cookie consent banner — a full-width bottom bar, above the WhatsApp
   widget's own z-index so it takes priority while unanswered. Accept and
   Reject are both .btn.btn--secondary: identical size, weight, and
   position order in the DOM, so neither reads as the "encouraged" choice. */
.cookie-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5);
	background-color: var(--color-ink);
	border-top: 1px solid var(--color-gold);
	box-shadow: var(--shadow-md);
}

.cookie-consent[hidden] {
	display: none;
}

.cookie-consent p {
	margin: 0;
	flex: 1 1 320px;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-cream);
}

.cookie-consent p a {
	color: var(--color-gold-soft);
}

.cookie-consent__actions {
	display: flex;
	gap: var(--space-3);
	flex-shrink: 0;
}

.cookie-consent__actions .btn {
	background-color: transparent;
	color: var(--color-cream);
	border-color: var(--color-cream);
}

.cookie-consent__actions .btn:hover,
.cookie-consent__actions .btn:focus-visible {
	background-color: var(--color-cream);
	color: var(--color-ink);
}

.whatsapp-widget__note {
	max-width: 160px;
	padding: var(--space-2) var(--space-3);
	background-color: var(--color-ink);
	color: var(--color-cream);
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.whatsapp-widget__button-wrap {
	position: relative;
	flex-shrink: 0;
}

.whatsapp-widget__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--color-ok);
	color: var(--color-cream);
	box-shadow: var(--shadow-md);
}

.whatsapp-widget__button:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.whatsapp-widget__button svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.whatsapp-widget__dismiss {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--color-charcoal);
	color: var(--color-cream);
	border: 2px solid var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: var(--text-sm);
	cursor: pointer;
	padding: 0;
}

.whatsapp-widget__dismiss:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

/* Shared form-field styling (partials/form-field.php, partials/toggle-field.php)
   — used by the enquiry form and the Site Control Panel, so it lives here
   rather than in either page's own stylesheet. */
.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

fieldset.form-field {
	border: none;
	padding: 0;
	margin: 0;
}

.form-field label,
.form-field legend {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-mist);
}

.form-field__required {
	color: var(--color-blue);
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="date"],
.form-field textarea,
.form-field select {
	font-family: var(--font-body);
	font-size: var(--text-base);
	padding: var(--space-3);
	border: var(--border-hairline);
	border-radius: var(--radius-sm);
	background-color: var(--color-cream);
	color: var(--color-charcoal);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.form-field textarea {
	resize: vertical;
	min-height: 5rem;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
	outline: none;
	border-color: var(--color-blue);
	box-shadow: 0 0 0 3px rgba(var(--color-blue-rgb), 0.2);
}

.form-field--error label,
.form-field--error legend {
	color: var(--color-error);
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
	border-color: var(--color-error);
}

.form-field__error {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-error);
}

.form-field__help {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-mist);
}

/* Checkboxes and radios: normal-case label text, not the mono/uppercase
   treatment used for field labels above. */
.form-field--checkbox label,
.form-field__radio {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-charcoal);
	cursor: pointer;
}

.form-field--checkbox input[type="checkbox"],
.form-field__radio input[type="radio"] {
	margin-block-start: 2px;
	flex-shrink: 0;
}

/* Toggle switch (partials/toggle-field.php) */
.toggle-field__row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	cursor: pointer;
}

.toggle-field__switch {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: 40px;
	height: 22px;
}

.toggle-field__switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.toggle-field__track {
	position: absolute;
	inset: 0;
	background-color: var(--color-line);
	border-radius: var(--radius-tag);
	transition: background-color var(--t-fast) var(--ease);
}

.toggle-field__track::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--color-cream);
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-fast) var(--ease);
}

.toggle-field__switch input:checked + .toggle-field__track {
	background-color: var(--color-ok);
}

.toggle-field__switch input:checked + .toggle-field__track::before {
	transform: translateX(18px);
}

.toggle-field__switch input:focus-visible + .toggle-field__track {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.toggle-field__label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-charcoal);
}

/* Admin-only empty-section notice (partials/admin-empty-notice.php).
   Deliberately looks like a system message, not a page section — dashed
   border and a mono tag are used nowhere else on the public site, so a
   logged-in staff member immediately reads this as "not real content."
   Carries its own opaque background rather than inheriting, since this
   partial gets dropped into both light sections and the dark ink
   Services section — it needs to read correctly against either. */
.admin-empty-notice {
	margin-block: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border: 1px dashed var(--color-mist);
	border-radius: var(--radius-md);
	background-color: var(--color-cream);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.admin-empty-notice__text {
	margin: 0;
	flex: 1 1 320px;
	font-size: var(--text-sm);
	color: var(--color-mist);
}

.admin-empty-notice__tag {
	display: inline-block;
	margin-inline-end: var(--space-2);
	padding: 0.15em 0.5em;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-cream);
	background-color: var(--color-mist);
	border-radius: var(--radius-sm);
}

.admin-empty-notice__cta {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-blue);
	text-decoration: none;
}

.admin-empty-notice__cta:hover,
.admin-empty-notice__cta:focus-visible {
	text-decoration: underline;
}

/* ---------- Patient disclosure block (partials/patient-disclosure.php).
   Contractual — required reading before a patient commits to a referral.
   A teal left edge (the design system's "trust/medical moment" colour)
   marks it as important without borrowing the admin-empty-notice's
   dashed-border "this isn't real content" language, since this content
   is very much real and shown to every visitor. ---------- */
.patient-disclosure {
	margin-block: var(--space-6);
	padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
	border: var(--border-hairline);
	border-inline-start: 3px solid var(--color-teal);
	border-radius: var(--radius-md);
	background-color: var(--color-cream);
}

.patient-disclosure__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-lg);
}

.patient-disclosure__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding-inline-start: 1.25em;
}

.patient-disclosure__list li {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-charcoal);
}

/* ---------- Accordion (FAQ page; also an international partner page's
   Specialties panels — same component, see faq-accordion.js) ---------- */
.faq-group {
	margin-block-start: var(--space-8);
}

.faq-group__title {
	margin: 0 0 var(--space-4);
}

.faq-item {
	border-bottom: var(--border-hairline);
}

.faq-item h3 {
	margin: 0;
}

.faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	background: none;
	border: none;
	text-align: start;
	font-family: var(--font-body);
	font-weight: var(--weight-body-medium);
	font-size: var(--text-md);
	color: var(--color-ink);
	cursor: pointer;
}

/* Plus → minus by rotating the vertical bar flat, not by swapping glyphs
   — a single property animates cleanly, where a content swap can only
   snap. Two bars, both var(--color-gold); the vertical one rotates 90deg
   on expand and lands exactly on top of the horizontal one. */
.faq-item__icon {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.faq-item__icon::before,
.faq-item__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--color-gold);
	transform: translate(-50%, -50%);
}

.faq-item__icon::before {
	width: 16px;
	height: 1px;
}

.faq-item__icon::after {
	width: 1px;
	height: 16px;
	transition: transform var(--t-base) var(--ease);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__question:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.faq-item__answer {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin: 0;
	color: var(--color-mist);
	max-width: 68ch;
	transition: max-height var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}

.faq-item__answer.is-open {
	max-height: 1000px; /* generous cap — no real answer gets close to it, CSS just can't transition to height:auto */
	opacity: 1;
	padding-block-end: var(--space-5);
}

/* ---------- Route-line process (homepage "How it works" AND an
   international partner page's "The Journey") — a real sequence, so it's
   the one place numbered markers stay — the route line is the signature element: it
   draws itself down the page as the visitor scrolls (assets/js/
   process-route.js), and each marker fills solid once the line reaches
   it. See process__route-fill's stroke-dashoffset, driven by scroll
   position, never a timer. */
.process {
	position: relative;
	margin-block-start: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.process__route {
	position: absolute;
	top: 26px; /* vertical centre of the first 52px marker */
	bottom: 26px; /* vertical centre of the last 52px marker */
	left: 25px; /* horizontal centre of the 52px marker */
	width: 2px;
	pointer-events: none;
}

.process__route-svg {
	display: block;
	overflow: visible;
}

.process__route-track,
.process__route-fill {
	fill: none;
	stroke-width: 1;
	stroke: var(--color-blue);
	vector-effect: non-scaling-stroke;
}

.process__route-track {
	opacity: 0.25;
}

.process__route-fill {
	opacity: 0.7;
}

.process__step {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
}

.process__marker {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(var(--color-cream-rgb), 0.25);
	background-color: transparent;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	color: rgba(var(--color-cream-rgb), 0.7);
	transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.process__marker.is-filled {
	border-color: var(--color-blue);
	background-color: var(--color-blue);
	color: var(--color-cream);
}

.process__content {
	padding-block-start: var(--space-2);
}

.process__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-card-heading);
	font-weight: var(--weight-display-medium);
	line-height: var(--leading-card-heading);
	letter-spacing: var(--tracking-card-heading);
	font-variation-settings: 'opsz' 36;
	color: var(--color-cream);
}

.process__text {
	margin: var(--space-2) 0 0;
	color: var(--color-gold-soft);
	font-size: var(--text-sm);
	line-height: var(--leading-body-sm);
}