/*
Theme Name: Newcastle Physio Clinic
Theme URI: https://newcastlephysioclinic.com
Description: Full Site Editing theme for Newcastle Physio Clinic headless WordPress with Next.js integration. Built with theme.json design system and WordPress VIP compliance.
Version: 1.5.15
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.3
Author: Newcastle Physio Clinic Team
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newcastlephysioclinic
Tags: full-site-editing, block-theme, accessibility-ready, translation-ready
*/

/**
 * Newcastle Physio Clinic — brand base layer
 *
 * theme.json is the single source of truth for design tokens. WordPress emits
 * them as `--wp--preset--*` and `--wp--custom--*` custom properties.
 *
 * This file does two jobs and nothing else:
 *
 * 1. Aliases — re-publishes the WordPress presets under the same token names
 *    the design system and the Next.js frontend use (`--np-*`, `--fg`, `--bg`,
 *    `--font-display`, `--fs-h2`, `--sp-5`, …). One definition, two consumers.
 *    Change a value in theme.json and both sides follow.
 *
 * 2. Brand rules that theme.json cannot express — italic olive headings, the
 *    eyebrow/label/meta type roles, the grain overlay, focus rings.
 */

/* ─────────────────────────────────────────────────────────────
   1. Token aliases — WordPress presets → design system names
   ───────────────────────────────────────────────────────────── */

:root {
	/* Raw colour tokens */
	--np-white: var(--wp--preset--color--white);
	--np-ink: var(--wp--preset--color--ink);
	--np-ink-soft: var(--wp--preset--color--ink-soft);
	--np-olive: var(--wp--preset--color--olive);
	--np-chartreuse: var(--wp--preset--color--chartreuse);
	--np-sand: var(--wp--preset--color--sand);
	--np-bone: var(--wp--preset--color--bone);
	--np-line: var(--wp--preset--color--line);
	--np-ring: var(--wp--custom--ring);

	/* Semantic colour aliases */
	--bg: var(--np-bone);
	--bg-elevated: var(--np-white);
	--bg-dark: var(--np-ink);
	--bg-hover: var(--np-sand);

	--fg: var(--np-ink);
	--fg-soft: var(--np-ink-soft);
	--fg-muted: var(--np-olive);
	--fg-on-dark: var(--np-bone);
	--fg-on-accent: var(--np-ink);

	--accent: var(--np-chartreuse);
	--accent-soft: var(--np-olive);

	--border: var(--np-line);
	--ring: var(--np-ring);

	/* Families */
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-mono: var(--wp--preset--font-family--mono);
	--font-eyebrow: var(--wp--preset--font-family--body);

	/* Sizes */
	--fs-display: var(--wp--preset--font-size--display);
	--fs-h1: var(--wp--preset--font-size--h-1);
	--fs-h2: var(--wp--preset--font-size--h-2);
	--fs-h3: var(--wp--preset--font-size--h-3);
	--fs-h4: var(--wp--preset--font-size--h-4);
	--fs-h5: var(--wp--preset--font-size--h-5);
	--fs-body-lg: var(--wp--preset--font-size--body-lg);
	--fs-body: var(--wp--preset--font-size--body);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-meta: var(--wp--preset--font-size--meta);
	--fs-eyebrow: var(--wp--preset--font-size--eyebrow);

	/* Letter-spacing */
	--ls-display: var(--wp--custom--letter-spacing--display);
	--ls-heading: var(--wp--custom--letter-spacing--heading);
	--ls-body: var(--wp--custom--letter-spacing--body);
	--ls-eyebrow: var(--wp--custom--letter-spacing--eyebrow);

	/* Line-heights */
	--lh-display: var(--wp--custom--line-height--display);
	--lh-heading: var(--wp--custom--line-height--heading);
	--lh-body: var(--wp--custom--line-height--body);
	--lh-tight: var(--wp--custom--line-height--tight);

	/* Shape */
	--radius-input: var(--wp--custom--radius--input);
	--radius-token: var(--wp--custom--radius--token);
	--radius-card: var(--wp--custom--radius--card);
	--radius-pill: var(--wp--custom--radius--pill);

	/* Shadows */
	--shadow-rest: var(--wp--preset--shadow--rest);
	--shadow-hover: var(--wp--preset--shadow--hover);

	/* Spacing */
	--sp-1: var(--wp--preset--spacing--1);
	--sp-2: var(--wp--preset--spacing--2);
	--sp-3: var(--wp--preset--spacing--3);
	--sp-4: var(--wp--preset--spacing--4);
	--sp-5: var(--wp--preset--spacing--5);
	--sp-6: var(--wp--preset--spacing--6);
	--sp-7: var(--wp--preset--spacing--7);
	--sp-8: var(--wp--preset--spacing--8);
	--sp-9: var(--wp--preset--spacing--9);
	--sp-10: var(--wp--preset--spacing--10);

	/* Motion */
	--ease-out: var(--wp--custom--motion--ease-out);
	--ease-in-out: var(--wp--custom--motion--ease-in-out);
	--dur-fast: var(--wp--custom--motion--dur-fast);
	--dur-base: var(--wp--custom--motion--dur-base);
	--dur-slow: var(--wp--custom--motion--dur-slow);

	/* Grain overlay */
	--grain-size: var(--wp--custom--grain--size);
	--grain-color: var(--wp--custom--grain--color);
}

/* ─────────────────────────────────────────────────────────────
   2. Base
   ───────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Italic headings carry the olive "supporting voice" */
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.np-display em {
	font-style: italic;
	font-weight: 400;
	color: var(--np-olive);
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

/* Focus ring — chartreuse tint, never removed */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--ring);
}

hr.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--border);
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   3. Type roles theme.json cannot express
   ───────────────────────────────────────────────────────────── */

.np-display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 500;
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	text-transform: lowercase;
	color: var(--fg);
	margin: 0;
}

.np-eyebrow {
	font-family: var(--font-eyebrow);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--np-olive);
}

.np-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--fg-soft);
}

.np-body-lg {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--fg-soft);
}

.np-small {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--fg-soft);
}

.np-meta {
	font-size: var(--fs-meta);
	line-height: var(--lh-tight);
	color: var(--fg-muted);
}

.np-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--np-olive);
	transition: border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.np-link:hover {
	border-color: var(--np-chartreuse);
	color: var(--np-ink);
}

/* ─────────────────────────────────────────────────────────────
   4. Block styles — applied from the editor's Styles panel

   Only what block supports cannot describe lives here: hover behaviour,
   texture overlays, contrast inversion and breakpoint art direction.
   Colour, spacing, typography and borders stay on the blocks themselves.
   ───────────────────────────────────────────────────────────── */

/* Eyebrow — the tracked uppercase label above a heading. */
.is-style-eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--accent-soft);
}

.is-style-meta-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent-soft);
}

/* Display headings — the design sets these tighter than the base heading
   rhythm and lets them run large and fluid. */
.has-hero-title-font-size,
.has-section-title-font-size {
	line-height: 1;
	letter-spacing: -0.025em;
}

/* Measure limits from the design: headings stay short, body copy stays narrow. */
.is-style-hero :where(h1) {
	max-width: 18ch;
}

.is-style-hero :where(p):not(.is-style-eyebrow) {
	max-width: 46ch;
}

.is-style-section-header :where(h1, h2, h3) {
	max-width: 16ch;
}

.is-style-section-header :where(p):not(.is-style-eyebrow) {
	max-width: 46ch;
}

/* The numbered label on a service card — display face, italic, olive. */
.is-style-number {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	color: var(--accent-soft);
}

/* Secondary buttons. The design keeps these transparent with a hairline
   border; core's own outline style is avoided because it hardcodes padding. */
.wp-block-button.is-style-ghost > .wp-block-button__link,
.wp-block-button.is-style-ghost-dark > .wp-block-button__link {
	background: transparent;
	border-style: solid;
	border-width: 1.5px;
}

.wp-block-button.is-style-ghost > .wp-block-button__link {
	color: var(--fg);
	border-color: var(--accent-soft);
}

.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background: var(--bg-hover);
	border-color: var(--fg);
}

.wp-block-button.is-style-ghost-dark > .wp-block-button__link {
	color: var(--fg-on-dark);
	border-color: rgba(217, 212, 168, 0.4);
}

.wp-block-button.is-style-ghost-dark > .wp-block-button__link:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* Every button keeps the design's touch target. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 52px;
	white-space: nowrap;
}

/* Contrast inversion for dark surfaces. */
.is-style-on-dark {
	color: var(--fg-on-dark);
}

.is-style-on-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--fg-on-dark);
}

.is-style-on-dark :where(h1, h2, h3, h4, h5, h6) em {
	color: var(--accent);
}

.is-style-on-dark :where(p, li, dd) {
	color: var(--border);
}

.is-style-on-dark .is-style-eyebrow,
.is-style-on-dark .is-style-meta-label {
	color: var(--accent);
}

/* Templates butt header, main and footer together: core's block gap
   between the site's top-level blocks is not wanted anywhere. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Inline links on a dark band need the accent, not the light-surface ink. */
.is-style-on-dark :where(p, li, dd) a {
	color: var(--accent);
}

/* Grain overlay — 3px dots at ~4%. */
.is-style-grain {
	position: relative;
	isolation: isolate;
}

.is-style-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(var(--grain-color) 1px, transparent 1px);
	background-size: var(--grain-size) var(--grain-size);
	mix-blend-mode: multiply;
}

/* Card — an elevated surface that lifts on hover and keeps its footer pinned
   to the bottom so a row of cards aligns regardless of copy length. */
.is-style-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition:
		background var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.is-style-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.is-style-card:focus-within {
	outline: 0;
	box-shadow: 0 0 0 3px var(--ring);
}

/* Split section header: description beside the heading, both on the baseline. */
.is-style-section-header-aside {
	max-width: 46ch;
}

@media (min-width: 1025px) {
	.wp-block-group.section-header-split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		gap: var(--wp--preset--spacing--8);
	}

	.wp-block-group.section-header-split > .is-style-section-header {
		max-width: none;
	}
}

.is-style-on-dark .is-style-number {
	color: var(--accent);
}

/* Conditions — regions of linked rows on the dark band. */
.condition-region {
	border-top: 1px solid rgba(217, 212, 168, 0.18);
	padding-top: var(--wp--preset--spacing--5);
}

.wp-block-nimue-blocks-hyperlink-group.condition-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	position: relative;
	overflow: hidden;
	padding: 22px 22px 22px 26px;
	color: inherit;
	background: rgba(250, 248, 236, 0.02);
	border: 1px solid rgba(217, 212, 168, 0.18);
	border-radius: var(--wp--custom--radius--card);
	transition:
		background var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.condition-row::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 0;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--accent);
	opacity: 0.35;
	transition: opacity var(--dur-base) var(--ease-out);
}

.wp-block-nimue-blocks-hyperlink-group.condition-row:hover {
	color: inherit;
	background: rgba(250, 248, 236, 0.06);
	border-color: rgba(176, 172, 5, 0.45);
	transform: translateY(-2px);
}

.condition-row:hover::before {
	opacity: 1;
}

.condition-row .is-style-number {
	min-width: 22px;
	padding-top: 6px;
}

.condition-row .wp-block-post-excerpt p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.condition-row-arrow {
	align-self: center;
	font-family: var(--font-display);
	font-size: 18px;
	transition:
		color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.condition-row:hover .condition-row-arrow {
	color: var(--accent);
	transform: translateX(4px);
}

.condition-footnote {
	padding: var(--wp--preset--spacing--5);
	background: rgba(250, 248, 236, 0.02);
	border: 1px solid rgba(217, 212, 168, 0.18);
	border-radius: var(--wp--custom--radius--card);
}

.condition-footnote p {
	max-width: 52ch;
}

.is-style-on-dark .condition-footnote strong {
	color: var(--fg-on-dark);
}

/* Testimonials — one-up carousel: portrait beside the quote. */
.testimonial-portrait {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 2px;
}

.testimonial-portrait .wp-block-post-featured-image {
	margin: 0;
}

.testimonial-portrait .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(26, 25, 12, 0) 45%, rgba(26, 25, 12, 0.82) 100%);
}

.testimonial-stars,
.testimonial-caption {
	position: absolute;
	z-index: 1;
	margin: 0;
}

.testimonial-stars {
	top: 20px;
	right: 20px;
	padding: 8px 12px 7px;
	border-radius: 999px;
	background: rgba(26, 25, 12, 0.58);
	backdrop-filter: blur(6px);
	color: var(--accent);
	font-size: 14px;
	letter-spacing: 4px;
}

.testimonial-caption {
	bottom: 20px;
	left: 20px;
	right: 20px;
	color: var(--fg-on-dark);
}

.testimonial-qmark {
	margin: 0 0 -18px -4px;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(120px, 18vw, 220px);
	line-height: 0.7;
	color: var(--accent);
	pointer-events: none;
}

.is-style-on-dark .testimonial-quote {
	max-width: 26ch;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(22px, 3.2vw, 34px);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--fg-on-dark);
}

.testimonial-quote em {
	color: var(--accent);
	font-weight: 400;
}

/* The carousel is as tall as its tallest slide, so one long story would
   stretch every slide. Cap the quote; the full text lives on its own page. */
.testimonial-carousel .testimonial-quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
	line-clamp: 10;
	overflow: hidden;
}

.testimonial-source {
	max-width: 420px;
	padding-top: 22px;
	border-top: 1px solid rgba(217, 212, 168, 0.18);
}

.testimonial-source-row .is-style-meta-label {
	flex: 0 0 96px;
	opacity: 0.7;
}

.is-style-on-dark .testimonial-source-row p:not(.is-style-meta-label) {
	color: var(--fg-on-dark);
	font-weight: 500;
}

/* The editor wraps the carousel's parts in two extra divs. Flatten them so the
   parts are grid items here, exactly as on the front end. */
.testimonial-carousel > .block-editor-inner-blocks,
.testimonial-carousel > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: contents;
}

.testimonial-carousel {
	--wp--custom--nimue-blocks--carousel--pagination--active-color: var(--accent);

	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--7);
}

.testimonial-carousel .wp-block-nimue-blocks-carousel-template {
	grid-column: 1 / -1;
	margin-bottom: var(--wp--preset--spacing--6);
}

/* Below desktop the pills scroll on their own row; count and arrows follow. */
@media (max-width: 1024px) {
	.testimonial-carousel {
		grid-template-columns: auto auto auto 1fr;
	}

	.testimonial-carousel .wp-block-nimue-blocks-carousel-pagination {
		grid-column: 1 / -1;
		margin: 0 calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left));
		padding-left: var(--wp--style--root--padding-left);
		padding-right: var(--wp--style--root--padding-right);
	}
}

/* Primary buttons invert on hover and keep a hairline ring, so they stay
   visible on the ink bands. */
.wp-block-button:not(.is-style-ghost):not(.is-style-ghost-dark) > .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* Small button: the header's book link. */
.wp-block-button.is-style-small > .wp-block-button__link {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 14px;
}

/* Header — sticky bar: logo, centred nav, phone and small button. */
.app-head {
	position: sticky;
	top: 0;
	z-index: 50;
}

.head-strip {
	border-bottom: 1px solid rgba(217, 212, 168, 0.14);
}

.head-strip .is-style-meta-label {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.2em;
}

.head-strip-hours {
	opacity: 0.75;
}

.head-bar {
	border-bottom: 1px solid rgba(217, 212, 168, 0.14);
}

.head-logo img {
	height: 72px;
	width: auto;
}

.head-nav {
	flex: 1 1 auto;
}

.head-nav .wp-block-navigation-item__content:hover {
	border-bottom: 1px solid var(--accent);
}

.head-phone {
	margin: 0;
	white-space: nowrap;
}

.head-nav .wp-block-navigation__responsive-container-open {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(217, 212, 168, 0.28);
	border-radius: 999px;
	color: var(--fg-on-dark);
}

.head-nav .wp-block-navigation__responsive-container-open:hover {
	background: rgba(250, 248, 236, 0.06);
}

.head-nav .wp-block-navigation__responsive-container-open,
.head-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
}

.head-nav .wp-block-navigation__responsive-container-close {
	display: flex;
}

.head-nav .wp-block-navigation__responsive-container-open svg,
.head-nav .wp-block-navigation__responsive-container-close svg {
	width: 22px;
	height: 22px;
}

/* The phone link and booking button only belong in the open mobile menu. */
.head-nav .nav-mobile-only {
	display: none;
}

/* Below desktop the nav collapses to the burger and the actions hide, as on the design. */
@media (max-width: 1023px) {
	.head-strip-hours {
		display: none;
	}

	.head-logo img {
		height: 56px;
	}

	.head-nav {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.head-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.head-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.head-bar .head-actions {
		display: none;
	}
}

/* Open mobile menu: big left-aligned links, then the phone number and booking button. */
@media (max-width: 1023px) {
	.head-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 20px var(--wp--style--root--padding-right, 20px) 32px;
	}

	.head-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 12px;
		right: 12px;
		width: 48px;
		height: 48px;
		border: 1px solid rgba(217, 212, 168, 0.28);
		border-radius: 999px;
		color: var(--fg-on-dark);
	}

	/* Core reads this variable to align the items; the nav is centred on desktop. */
	.head-nav .is-menu-open .wp-block-navigation__responsive-container-content,
	.head-nav .is-menu-open .wp-block-navigation__container {
		--navigation-layout-justification-setting: flex-start;
	}

	.head-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		justify-content: flex-start;
		padding-top: 72px;
	}

	.head-nav .is-menu-open .wp-block-navigation__container {
		width: 100%;
		align-items: stretch;
		gap: 0;
	}

	.head-nav .is-menu-open .wp-block-navigation-item {
		width: 100%;
		justify-content: flex-start;
		border-bottom: 1px solid rgba(217, 212, 168, 0.16);
		text-align: left;
	}

	.head-nav .is-menu-open .wp-block-navigation-item__content {
		display: block;
		padding: 18px 0;
		border-bottom: 0;
		font-size: 28px;
		line-height: 1.1;
	}

	.head-nav .is-menu-open .nav-mobile-only {
		display: block;
	}

	.head-nav .is-menu-open .nav-phone {
		--navigation-layout-justification-setting: center;

		margin-top: 28px;
		border-bottom: 0;
	}

	.head-nav .is-menu-open .nav-phone .wp-block-navigation-item__content {
		padding: 0;
		font-size: 24px;
		color: var(--fg-on-dark);
	}

	.head-nav .is-menu-open .nav-phone .wp-block-navigation-item__content:hover {
		color: var(--accent);
	}

	.head-nav .is-menu-open .nav-book {
		width: 100%;
		margin-top: 20px;
	}

	.head-nav .is-menu-open .nav-book .wp-block-button,
	.head-nav .is-menu-open .nav-book .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Footer — eyebrow column titles and the legal row with the social circles. */
.app-foot .is-style-eyebrow {
	margin-bottom: 6px;
	color: var(--accent);
}

.footer-social .wp-block-social-link {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(217, 212, 168, 0.25);
	border-radius: 999px;
	background: transparent;
	transition:
		background var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.footer-social .wp-block-social-link .wp-block-social-link-anchor {
	width: 100%;
	height: 100%;
	padding: 0;
	justify-content: center;
}

.footer-social .wp-block-social-link:hover {
	border-color: var(--accent);
	background: var(--accent);
}

.footer-social .wp-block-social-link:hover svg {
	fill: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.footer-legal .is-style-meta-label {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.2em;
}

.footer-legal-nav .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.footer-legal {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Clinics — photo card with the address pill, rows and a directions button. */
.clinic-card {
	overflow: hidden;
	border-radius: 18px;
	box-shadow: var(--shadow-rest);
}

.clinic-photo {
	position: relative;
	background: var(--wp--preset--color--sand);
}

.clinic-photo .wp-block-post-featured-image {
	margin: 0;
}

.clinic-photo .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.clinic-pill {
	position: absolute;
	top: 16px;
	left: 16px;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--wp--preset--color--ink);
	font-size: 10px;
}

.clinic-name p em {
	color: var(--accent-soft);
	font-family: var(--font-display);
	font-weight: 400;
}

.clinic-address {
	white-space: pre-line;
	color: var(--fg-soft);
}

.clinic-rows {
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--border);
}

.clinic-row p:not(.is-style-meta-label) {
	margin: 0;
	font-family: var(--font-display);
	font-size: 16px;
	letter-spacing: -0.01em;
}

.clinic-directions > .wp-block-button__link {
	display: flex;
	justify-content: space-between;
	background: var(--wp--preset--color--ink);
	color: var(--fg-on-dark);
}

.clinic-directions > .wp-block-button__link:hover {
	background: var(--accent);
	color: var(--wp--preset--color--ink);
}

/* CTA band — the big line, one button and the phone link, with a soft glow. */
.cta-band {
	position: relative;
	overflow: hidden;
}

.cta-band::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -10%;
	width: 90%;
	height: 200%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(176, 172, 5, 0.13), transparent 70%);
}

.cta-band > * {
	position: relative;
}

.cta-band :where(h2) {
	max-width: 14ch;
	line-height: 0.95;
}

/* Actions stack on small screens and sit side by side from 720px. */
.cta-band .cta-actions {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

@media (min-width: 720px) {
	.cta-band .cta-actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 24px;
	}
}

/* The phone link is a hyperlink group: tag, hairline divider, number. */
.cta-band .cta-phone {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: auto;
	min-height: 44px;
	padding: 4px 0;
	border-bottom: 1px solid var(--accent);
	color: var(--fg-on-dark);
	transition: color var(--dur-base) var(--ease-out);
}

.cta-band .cta-phone:hover,
.cta-band .cta-phone:focus-visible {
	color: var(--accent);
}

.cta-band .cta-phone p {
	margin: 0;
}

.cta-band .cta-phone-tag {
	padding-right: 10px;
	border-right: 1px solid rgba(217, 212, 168, 0.3);
	color: var(--accent);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.6;
	text-transform: uppercase;
}

.cta-band .cta-phone-number {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.2;
	text-transform: lowercase;
}

/* Booking — copy and checklist beside the enquiry card. */
.booking-band {
	border-top: 1px solid var(--border);
}

.booking-band :where(h2) {
	max-width: 14ch;
}

.booking-checks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--3);
}

.booking-checks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: -0.01em;
}

.booking-checks li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border: 1px solid var(--accent-soft);
	border-radius: 999px;
	background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FAF8EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/10px no-repeat;
}

.booking-actions > .wp-block-buttons,
.booking-actions > .wp-block-buttons .wp-block-button,
.booking-actions > .wp-block-buttons .wp-block-button__link {
	display: flex;
	flex: 1 1 200px;
	justify-content: center;
}

.booking-phone {
	flex: 1 1 200px;
	margin: 0;
}

.booking-phone a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	color: var(--fg);
	text-decoration: none;
	transition: border-color var(--dur-base) var(--ease-out);
}

.booking-phone a:hover {
	border-color: var(--accent-soft);
}

.booking-phone-tag {
	color: var(--accent-soft);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.booking-phone-number {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.booking-card {
	border: 1px solid var(--border);
	border-radius: 22px;
	box-shadow: var(--shadow-rest);
}

.booking-card .nb-form__label {
	display: block;
	margin-bottom: 8px;
	color: var(--accent-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.booking-card .nb-form__control {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 15px;
}

.booking-card .nb-form__control:focus {
	outline: 0;
	border-color: var(--accent-soft);
	box-shadow: 0 0 0 3px var(--ring);
}

.booking-card .nb-form__choices {
	gap: 8px;
}

.booking-card .nb-form__choices.is-buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

/* nimue draws the choice on the span; restyle that, not the label. */
.booking-card .nb-form__choice span,
.booking-card .nb-form__choices.is-buttons .nb-form__choice span {
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: var(--fg);
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: -0.01em;
	transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.booking-card .nb-form__choices:not(.is-buttons) .nb-form__choice span {
	padding: 6px 14px;
	border-radius: 999px;
	color: var(--fg-soft);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.booking-card .nb-form__choices .nb-form__choice:hover span {
	border-color: var(--accent-soft);
}

.booking-card .nb-form__choices .nb-form__choice input:checked + span {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--fg-on-dark);
}

.booking-card-phone {
	color: var(--accent-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.booking-card-phone a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--accent-soft);
}

/* The card is one link. Keep the copy in its own colours, not the link's. */
.is-style-card > .wp-block-nimue-blocks-hyperlink-group,
.is-style-card > .wp-block-nimue-blocks-hyperlink-group:hover {
	color: inherit;
}

.is-style-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.is-style-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.is-style-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Card copy sits a step below body text, per the design. */
.is-style-card .wp-block-post-excerpt,
.is-style-card .wp-block-post-excerpt p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--fg-soft);
	margin: 0;
}

.is-style-card .is-style-card-body {
	flex: 1;
	/* Core's vertical flex layout shrink-wraps children; the card's rows should
	   span its full width. */
	align-items: stretch;
}

/* Pin the footer to the bottom of the card body. The border support paints all
   four sides once a border colour is set, so only the top rule is kept. */
.is-style-card-footer {
	margin-top: auto;
	width: 100%;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}

.is-style-card-footer .wp-block-paragraph:last-child {
	transition: transform var(--dur-base) var(--ease-out);
}

.is-style-card:hover .is-style-card-footer .wp-block-paragraph:last-child {
	transform: translateX(6px);
}

/* Post titles inside a card link the whole heading, not a nested anchor. */
.is-style-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* Hero — the eyebrow carries a short rule, and the veil is the cover's own
   gradient overlay (the hero-veil preset). The design switches it from a
   vertical wash on small screens to a horizontal one on desktop, which no
   single overlay setting can express, so the desktop one is swapped in here. */
.is-style-hero .is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
}

.is-style-hero .is-style-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

/* Image, then veil, then content — stated explicitly so the editor canvas
   layers them the same way the front end does. */
.wp-block-cover.is-style-hero > .wp-block-cover__background {
	z-index: 0;
}

.wp-block-cover.is-style-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

@media (min-width: 1025px) {
	.is-style-hero > .wp-block-cover__background.has-hero-veil-gradient-background {
		background: var(--wp--preset--gradient--hero-veil-horizontal) !important;
	}
}

/* ─────────────────────────────────────────────────────────────
   5. Reduced motion
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}