/*
Theme Name: Straits Podiatry
Theme URI: https://straitspodiatry.com/
Author: Straits Podiatry
Author URI: https://straitspodiatry.com/
Description: Custom block theme for Straits Podiatry. Built from scratch for performance, accessibility, and full editorial control. No third-party page builder. Designed for clean, clinical, warm, and trustworthy presentation of podiatric care.
Version: 0.2.0
Tested up to: 6.8
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: straits-podiatry
Tags: block-theme, full-site-editing, accessibility-ready, healthcare, custom-colors, custom-logo, custom-menu
*/

/* -----------------------------------------------------------------------------
   Most styling lives in theme.json.
   This file is only for the small set of utilities that block styling alone
   cannot reach: accessibility focus polish, smooth scrolling, small typographic
   polish on links inside post content.
   ---------------------------------------------------------------------------*/

/* Smooth in-page anchor scrolling */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Visible focus ring on all interactive elements — WCAG 2.4.7 */
:where(a, button, input, select, textarea, .wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #1F6FB5);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Skip link for keyboard users (the .skip-link class is the WP default) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 100000;
}
.skip-link:focus {
	left: 1rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--primary, #031B4E);
	color: var(--wp--preset--color--surface, #fff);
	text-decoration: none;
	border-radius: 4px;
}

/* Better in-content link readability — keep the brand accent but reduce the underline weight to feel less heavy on long-form clinical reading */
.entry-content a,
.wp-block-post-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
	text-decoration-thickness: 2px;
}

/* Site logo should not have a default link underline */
.wp-block-site-logo a { text-decoration: none; }

/* Footer — all links white with subtle hover */
.sp-footer a,
.sp-footer .wp-block-list a,
.sp-footer .wp-block-list-item a {
	color: var(--wp--preset--color--surface, #fff) !important;
	text-decoration: none;
	transition: opacity 0.18s ease;
}
.sp-footer a:hover,
.sp-footer a:focus {
	color: var(--wp--preset--color--surface, #fff) !important;
	opacity: 0.7;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.sp-footer h2 {
	color: var(--wp--preset--color--surface, #fff) !important;
	opacity: 0.9;
	font-size: 0.95rem;
	font-weight: 700;
	margin-top: 0;
}

/* Section spacing helpers used in homepage patterns */
.sp-section { padding-block: clamp(3rem, 4vw, 5rem); }
.sp-section--soft { background-color: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-section--primary { background-color: var(--wp--preset--color--primary, #031B4E); color: var(--wp--preset--color--surface, #fff); }

/* Eyebrow label (small uppercase accent text above big headings) */
.sp-eyebrow {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #1F6FB5);
	margin: 0 0 0.5rem;
}

/* Card with subtle border + lift on hover */
.sp-card {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #D8E2E8);
	border-radius: 10px;
	padding: 1.5rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	height: 100%;
}
/* Static content cards get NO hover lift: the animation made them read as clickable
 * buttons even though most have no link. Cards that ARE links (a.sp-card) keep their
 * own hover treatment further down. Links INSIDE a card underline on hover, so the
 * genuinely clickable bits are the only thing that signals clickability. */
.sp-card a { text-decoration: none; }
.sp-card a:hover,
.sp-card a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }

/* Conditions grid tile — image box style */
.sp-condition-tile {
	display: block;
	position: relative;
	background: var(--wp--preset--color--surface-soft, #F5F9FC);
	border: 1px solid var(--wp--preset--color--border, #D8E2E8);
	border-radius: 10px;
	padding: 1.5rem 1.25rem;
	transition: all 0.2s ease;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.sp-condition-tile:hover {
	background: var(--wp--preset--color--primary, #031B4E);
	color: var(--wp--preset--color--surface, #fff);
	border-color: var(--wp--preset--color--primary, #031B4E);
	transform: translateY(-2px);
}
.sp-condition-tile:hover h3,
.sp-condition-tile:hover p,
.sp-condition-tile:hover li,
.sp-condition-tile:hover .sp-condition-tile__cta { color: var(--wp--preset--color--surface, #fff); }
.sp-condition-tile h3 {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--primary, #031B4E);
}
.sp-condition-tile ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.7; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-condition-tile__cta {
	margin-top: 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #1F6FB5);
}

/* FAQ accordion using <details>/<summary> — static HTML, fully crawlable */
.sp-faq details {
	border-bottom: 1px solid var(--wp--preset--color--border, #D8E2E8);
	padding: 1.1rem 0;
}
.sp-faq summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--primary, #031B4E);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--wp--preset--color--accent, #1F6FB5);
	transition: transform 0.2s ease;
}
.sp-faq details[open] summary::after { transform: rotate(180deg); }
.sp-faq details > div { padding-top: 0.9rem; color: var(--wp--preset--color--text, #494444); line-height: 1.7; }

/* Stat numbers (large display) */
.sp-stat-number {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #031B4E);
	line-height: 1.1;
	margin: 0;
}
.sp-stat-label {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted, #5F6C88);
	margin: 0.25rem 0 0;
}

/* =================================================================
   IMAGE + LAYOUT PATTERNS for the redesigned homepage
   ================================================================= */

/* Hero — split layout with image on the right */
.sp-hero-split {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}
@media (max-width: 880px) {
	.sp-hero-split { grid-template-columns: 1fr; }
}
.sp-hero-split__media {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 5 / 6;
	box-shadow: var(--wp--preset--shadow--lifted);
}
.sp-hero-split__media img,
.sp-hero-split__media picture {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.sp-hero-split__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(120deg, rgba(3,27,78,0.0) 40%, rgba(3,27,78,0.15) 100%);
}
/* Alternating 50/50 split section (text + image), zig-zag */
.sp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}
.sp-split.is-reversed > :first-child { order: 2; }
@media (max-width: 800px) {
	.sp-split { grid-template-columns: 1fr; }
	.sp-split.is-reversed > :first-child { order: 0; }
	/* Only this section: image moves above the eyebrow/header when stacked. */
	.sp-split--media-first-mobile .sp-split__media { order: -1; }
	/* Centre the "See all conditions" button when stacked. */
	.sp-split--media-first-mobile .wp-block-button__link { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; }
}
.sp-split__media {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--wp--preset--shadow--medium);
}
.sp-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Image carousel inside a split section's media frame (About Us "Beyond the Clinic").
 * Native horizontal scroll + snap does the swiping; JS adds the dots/arrows. */
.sp-imgcar { position: relative; width: 100%; height: 100%; }
.sp-imgcar__track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sp-imgcar__track::-webkit-scrollbar { display: none; }
.sp-imgcar__slide { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; scroll-snap-align: center; }
.sp-imgcar__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.9); color: var(--wp--preset--color--primary, #031B4E); font-size: 1.5rem; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(3,27,78,0.2); transition: background 0.15s ease, opacity 0.15s ease; }
.sp-imgcar__arrow:hover:not([disabled]) { background: #fff; }
.sp-imgcar__arrow--prev { left: 0.6rem; }
.sp-imgcar__arrow--next { right: 0.6rem; }
.sp-imgcar__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none) { .sp-imgcar__arrow { display: none; } } /* touch: swipe instead */
.sp-imgcar__dots { position: absolute; left: 0; right: 0; bottom: 0.7rem; z-index: 2; display: flex; justify-content: center; gap: 0.4rem; }
.sp-imgcar__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 1px 3px rgba(3,27,78,0.3); }
.sp-imgcar__dot.is-active { background: #fff; transform: scale(1.3); }

/* Condition tile with icon at top */
.sp-condition-tile { padding: 1.5rem 1.25rem 1.4rem; }

/* Featured treatment — large hero card with photo background */
.sp-feature-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 320px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.75rem;
	box-shadow: var(--wp--preset--shadow--medium);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sp-feature-card::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(3,27,78,0.0) 0%, rgba(3,27,78,0.35) 50%, rgba(3,27,78,0.92) 100%);
}
.sp-feature-card > * { position: relative; z-index: 1; }
.sp-feature-card:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lifted); }
.sp-feature-card h3 { color: #fff; font-size: 1.4rem; margin: 0 0 0.4rem; line-height: 1.25; }
.sp-feature-card p { color: rgba(255,255,255,0.92); font-size: 0.95rem; margin: 0; }
.sp-feature-card .sp-feature-card__tag {
	display: inline-block;
	background: rgba(255,255,255,0.2);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
	backdrop-filter: blur(4px);
	width: fit-content;
}

/* Podiatrist circular portraits */
.sp-podiatrist-card {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #D8E2E8);
	border-radius: 14px;
	padding: 1.75rem 1.25rem 1.5rem;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
	display: block;
}
.sp-podiatrist-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary, #031B4E);
	box-shadow: var(--wp--preset--shadow--lifted);
}
.sp-podiatrist-card__portrait {
	width: 130px; height: 130px;
	border-radius: 50%;
	margin: 0 auto 1.1rem;
	overflow: hidden;
	border: 4px solid var(--wp--preset--color--surface-soft, #F5F9FC);
	box-shadow: 0 0 0 1px var(--wp--preset--color--border, #D8E2E8);
}
.sp-podiatrist-card__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.sp-podiatrist-card h3 { margin: 0 0 0.2rem; font-size: 1.1rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-podiatrist-card__role {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--accent, #1F6FB5);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.65rem;
}
.sp-podiatrist-card p { font-size: 0.85rem; color: var(--wp--preset--color--text-muted, #5F6C88); margin: 0; line-height: 1.55; }
/* Team page: grid + enriched profile cards (templates/page-our-podiatry-team.html) */
.sp-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; gap: 1.5rem; }
.sp-podiatrist-card__clinic { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 0.78rem; color: var(--wp--preset--color--text-muted, #5F6C88); margin-bottom: 0.85rem; }

/* Timeline — connected nodes for the "What to Expect" steps */
.sp-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	position: relative;
}
@media (min-width: 880px) {
	.sp-timeline::before {
		content: "";
		position: absolute;
		top: 28px;
		left: calc(8% + 28px);
		right: calc(8% + 28px);
		height: 2px;
		background: var(--wp--preset--color--border, #D8E2E8);
		z-index: 0;
	}
}
.sp-timeline__step {
	position: relative;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #D8E2E8);
	border-radius: 14px;
	padding: 2.5rem 1.25rem 1.5rem;
	text-align: center;
	z-index: 1;
}
.sp-timeline__node {
	position: absolute;
	top: -28px; left: 50%;
	transform: translateX(-50%);
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #031B4E);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.25rem;
	box-shadow: 0 0 0 6px var(--wp--preset--color--surface, #fff);
}
.sp-timeline__step h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-timeline__step__time {
	font-size: 0.85rem;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--accent, #1F6FB5);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.5rem;
}
.sp-timeline__step p { font-size: 0.88rem; color: var(--wp--preset--color--text-muted, #5F6C88); margin: 0; line-height: 1.6; }

/* Testimonial card — quote + avatar + 5 stars */
.sp-testimonial {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #D8E2E8);
	border-radius: 14px;
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}
.sp-testimonial::before {
	content: """;
	position: absolute;
	top: 0.5rem; right: 1.25rem;
	font-family: Georgia, serif;
	font-size: 5rem;
	line-height: 1;
	color: var(--wp--preset--color--surface-alt, #E8ECEF);
	font-weight: 700;
	user-select: none;
}
.sp-testimonial__stars { color: #F5B400; font-size: 1rem; letter-spacing: 0.1em; margin: 0 0 0.85rem; }
.sp-testimonial__quote {
	font-size: 0.96rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text, #494444);
	margin: 0 0 1.25rem;
	flex: 1;
}
.sp-testimonial__author { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.sp-testimonial__avatar {
	width: 44px; height: 44px;
	border-radius: 50%; overflow: hidden;
	background: var(--wp--preset--color--surface-soft, #F5F9FC);
	flex-shrink: 0;
}
.sp-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-testimonial__author strong { display: block; font-size: 0.9rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-testimonial__author span { font-size: 0.85rem; color: var(--wp--preset--color--text-muted, #5F6C88); }

/* Clinic image card — photo on top, content below */
.sp-clinic-image-card {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #D8E2E8);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
}
.sp-clinic-image-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
}
.sp-clinic-image-card__photo {
	height: 200px; /* fixed height (not aspect-ratio) so every card image is identical height regardless of the source photo's shape or the grid width */
	overflow: hidden;
	position: relative;
}
@media (max-width: 600px) { .sp-clinic-image-card__photo { height: 180px; } }
.sp-clinic-image-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sp-clinic-image-card:hover .sp-clinic-image-card__photo img { transform: scale(1.04); }
.sp-clinic-image-card__photo .sp-clinic-image-card__tag {
	position: absolute;
	top: 1rem; left: 1rem;
	background: rgba(255,255,255,0.95);
	color: var(--wp--preset--color--primary, #031B4E);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
}
.sp-clinic-image-card__body { padding: 1.5rem; }
.sp-clinic-image-card__body h3 { margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-clinic-image-card__body p { margin: 0 0 0.5rem; font-size: 0.92rem; color: var(--wp--preset--color--text, #494444); }
.sp-clinic-image-card__body .sp-meta { font-size: 0.85rem; color: var(--wp--preset--color--text-muted, #5F6C88); }

/* Trust strip — horizontal with vertical dividers */
.sp-trust-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}
.sp-trust-strip > div {
	text-align: center;
	padding: 0.5rem 1.25rem;
	border-left: 1px solid var(--wp--preset--color--border, #D8E2E8);
}
.sp-trust-strip > div:first-child { border-left: 0; }
@media (max-width: 700px) {
	.sp-trust-strip > div { border-left: 0; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); padding-top: 1rem; }
	.sp-trust-strip > div:first-child { border-top: 0; padding-top: 0; }
}

/* Final CTA with background image */
.sp-cta-photo {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem);
	color: #fff;
	background-size: cover;
	background-position: center;
	text-align: center;
}
.sp-cta-photo::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(3,27,78,0.92) 0%, rgba(3,27,78,0.78) 100%);
}
.sp-cta-photo > * { position: relative; z-index: 1; }
.sp-cta-photo h2 { color: #fff; margin: 0 0 1rem; }
.sp-cta-photo p { color: rgba(255,255,255,0.92); margin: 0 0 1.75rem; }

/* Two-column FAQ layout: questions left, sticky CTA right */
.sp-faq-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3rem;
	align-items: start;
}
@media (max-width: 880px) {
	.sp-faq-grid { grid-template-columns: 1fr; }
}
.sp-faq-grid__aside {
	background: var(--wp--preset--color--primary, #031B4E);
	color: #fff;
	border-radius: 14px;
	padding: 2rem 1.75rem;
	position: sticky;
	top: 5rem;
}
.sp-faq-grid__aside h3 { color: #fff; font-size: 1.15rem; margin: 0 0 0.75rem; }
.sp-faq-grid__aside p { font-size: 0.92rem; color: rgba(255,255,255,0.88); margin: 0 0 1.25rem; }

/* Section header — eyebrow + h2 + supporting paragraph, centered */
.sp-section-head { max-width: 700px; margin: 0 auto 2.5rem; text-align: center; }
.sp-section-head h2 { margin: 0.5rem 0 0.75rem; }
.sp-section-head p:not(.sp-eyebrow) { color: var(--wp--preset--color--text-muted, #5F6C88); margin: 0; font-size: 1.05rem; }

/* Buttons — force identical sizing across filled and outline variants.
   Both get a 1px border (transparent on filled), identical padding, and the
   same min-height. This neutralises the WordPress core "is-style-outline"
   :where() rule that injects border:2px and padding:.667em 1.333em, which
   would otherwise make the outline button visibly larger than the filled. */
.wp-block-button .wp-block-button__link,
a.wp-element-button,
button.wp-element-button {
	box-sizing: border-box;
	border: 1px solid transparent;
	padding: 0.85rem 1.5rem;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}

/* Outline variant — primary border, transparent background.
   Hover/focus fills it. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--primary, #031B4E);
	background-color: transparent;
	color: var(--wp--preset--color--primary, #031B4E);
	padding: 0.85rem 1.5rem;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary, #031B4E);
	color: var(--wp--preset--color--surface, #fff);
}

/* Tabular figures for numbers (better for prices, statistics, review counts) */
.is-style-tabular-numerals,
.wp-block-button__link,
.wp-block-navigation-item__content {
	font-variant-numeric: tabular-nums;
}

/* Print: clean, no unnecessary chrome */
@media print {
	header,
	footer,
	.wp-block-navigation,
	.wp-block-buttons { display: none !important; }
	body { background: #fff; color: #000; }
}

/* =================================================================
   Header tightening + remove default gap above the first section
   ================================================================= */
.wp-site-blocks > main { margin-block-start: 0; }

/* Homepage CTA with embedded lead form */
.sp-cta-photo--form { text-align: left; }
.sp-cta-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.75rem, 3vw, 3rem); align-items: center; }
@media (max-width: 880px) { .sp-cta-grid { grid-template-columns: 1fr; } }
.sp-cta-grid__intro h2 { color: #fff; margin: 0.4rem 0 0.75rem; }
.sp-cta-grid__intro > p { color: rgba(255,255,255,0.92); margin: 0 0 1rem; font-size: 1.02rem; }
.sp-cta-grid__call { font-size: 0.92rem; }
.sp-cta-grid__call a { color: #fff; text-decoration: underline; font-weight: 600; }
.sp-cta-grid__call span { opacity: 0.8; }
.sp-lead-form {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 14px;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	display: grid;
	gap: 0.55rem;
	box-shadow: var(--wp--preset--shadow--lifted);
}
.sp-lead-form label {
	display: flex; flex-direction: column; gap: 0.3rem;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 0.92rem; font-weight: 600;
	color: var(--wp--preset--color--primary, #031B4E);
}
.sp-lead-form__q { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.sp-lead-form__req { color: var(--wp--preset--color--danger, #9B2C2C); }
.sp-lead-form input,
.sp-lead-form textarea {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 1rem;
	color: var(--wp--preset--color--text, #494444);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #D8E2E8);
	border-radius: 8px;
	padding: 0.6rem 0.7rem;
	width: 100%;
	box-sizing: border-box;
}
.sp-lead-form input:focus,
.sp-lead-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent, #596789);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent, #596789);
}
.sp-lead-form textarea { resize: vertical; min-height: 84px; }
/* Keep typed input at 16px (prevents mobile zoom) but lighten the placeholder so the long hint does not dominate the labels. */
.sp-lead-form input::placeholder,
.sp-lead-form textarea::placeholder { font-size: 0.9rem; color: var(--wp--preset--color--text-muted, #5F6C88); opacity: 1; }
.sp-lead-form button { width: 100%; margin-top: 0.15rem; }
.sp-lead-form .sp-hp { position: absolute !important; left: -9999px !important; }
.sp-lead-form__fine { margin: -0.45rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--wp--preset--color--text-muted, #5F6C88); }


/* Cards use height:100% inside grids; ensure border-box so padding doesn't overflow the track */
.sp-card { box-sizing: border-box; }

/* =================================================================
   Conditions accordion: desktop = open cards in a grid; mobile = tap rows
   ================================================================= */
.sp-cond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1100px) { .sp-cond-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .sp-cond-grid { grid-template-columns: 1fr; gap: 0.6rem; } }
/* Paediatrics page grid: 3 grouped category boxes */
/* Three category cards fill the content width evenly (equal columns, no empty
   trailing track). Collapses to one column on small screens. */
/* Cap each card's width and centre the cluster (justify-content) so the boxes hug their short
   lists instead of stretching across the full wide width. This is independent of the .alignwide
   max-width, so it is not overridden by the constrained-layout container rule. */
.sp-cond-grid--paed { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; }
@media (max-width: 900px) { .sp-cond-grid--paed { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 600px) { .sp-cond-grid--paed { grid-template-columns: minmax(0, 340px); } }

.sp-cond { box-sizing: border-box; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 10px; overflow: hidden; }
.sp-cond > summary {
	list-style: none; cursor: pointer; padding: 1rem 1.2rem;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-weight: 600; font-size: 1rem; color: var(--wp--preset--color--primary, #031B4E);
	display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.sp-cond > summary::-webkit-details-marker { display: none; }
.sp-cond > summary::after { content: ""; flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--wp--preset--color--accent, #596789); transition: transform 0.2s ease; }
.sp-cond[open] > summary::after { transform: rotate(180deg); }
.sp-cond__body { padding: 0.85rem 1.2rem 1.2rem; }
.sp-cond__body ul { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; }
.sp-cond__body a { color: var(--wp--preset--color--text-muted, #5F6C88); text-decoration: none; }
.sp-cond__body a:hover { color: var(--wp--preset--color--accent, #596789); text-decoration: underline; }
.sp-cond__body .sp-cond__soon { color: var(--wp--preset--color--text-muted, #5F6C88); opacity: 0.55; cursor: default; }
.sp-cond__all { font-weight: 600; font-size: 0.85rem; color: var(--wp--preset--color--accent, #596789) !important; }

/* Desktop: show as open cards, disable the toggle and the +/- marker.
   Equal-height cards across rows, with the "All ..." link pinned to the bottom
   so every card lines up regardless of how many conditions it lists. */
@media (min-width: 761px) {
	.sp-cond-grid { grid-auto-rows: 1fr; }
	.sp-cond { display: flex; flex-direction: column; }
	.sp-cond > .sp-cond__body { display: flex !important; flex-direction: column; flex: 1; }
	.sp-cond::details-content { content-visibility: visible !important; }
	.sp-cond__body ul { flex: 1; }
	.sp-cond > summary { cursor: default; border-bottom: 1px solid var(--wp--preset--color--border, #D8E2E8); }
	.sp-cond > summary::after { display: none; }
}
/* Mobile: separated, rounded, subtly-raised cards (like the "why choose"
   accordion); all category bars navy. */
@media (max-width: 760px) {
	.sp-cond { border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; box-shadow: 0 1px 3px rgba(3, 27, 78, 0.06); }
	.sp-cond > summary { font-size: 1.02rem; padding: 1.05rem 1.2rem; }
}

/* Footer: remove list bullets and indent so links align with the category header */
.sp-footer ul, .sp-footer .wp-block-list { list-style: none !important; margin: 0; padding: 0 !important; }
.sp-footer li { margin: 0 0 0.45rem; }

/* Treatments grid: the featured card spans 2 cols on desktop; reset on mobile so it
   does not force a 560px two-column grid and overflow the viewport */
@media (max-width: 760px) {
	.sp-feature-card { grid-column: auto !important; min-height: 230px !important; }
}

/* =================================================================
   Homepage round of changes: hero link, trust strip, mobile menu,
   testimonials carousel, floating contact buttons
   ================================================================= */

/* Hero: "Find our nearest clinic" borderless text link */
.sp-find-clinic { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--wp--preset--color--accent, #596789); font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.sp-find-clinic:hover { text-decoration: underline; text-underline-offset: 0.2em; color: var(--wp--preset--color--primary, #031B4E); }
.sp-find-clinic svg { flex-shrink: 0; }
#clinics { scroll-margin-top: 130px; }

/* Trust strip: always one row (4 cells), compact on mobile */
.sp-trust-strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
	.sp-trust-strip { gap: 0.4rem; }
	.sp-trust-strip > div { border-left: 1px solid var(--wp--preset--color--border, #D8E2E8); border-top: 0; padding: 0 0.3rem; }
	.sp-trust-strip > div:first-child { border-left: 0; }
	.sp-trust-strip .sp-stat-number { font-size: clamp(1rem, 4.2vw, 1.5rem) !important; }
	.sp-trust-strip .sp-stat-label { font-size: 0.7rem; line-height: 1.2; margin-top: 0.15rem; }
}

/* Mobile nav overlay: left-aligned and on-screen */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; text-align: left; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { text-align: left; }
}

/* Testimonials: gentle infinite auto-scroll the visitor can take over.
 * Touch = native swipe; mouse = click-drag; trackpad = scroll; dots below = jump.
 * Auto motion pauses on hover/drag/touch/focus, then resumes. JS: inc/reviews-carousel.php. */
.sp-marquee { overflow-x: auto; overflow-y: hidden; padding: 0.5rem 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.sp-marquee::-webkit-scrollbar { display: none; }
.sp-marquee:focus-visible { outline: 2px solid var(--wp--preset--color--primary, #031B4E); outline-offset: 3px; }
.sp-marquee.is-grabbing { cursor: grabbing; }
.sp-marquee.is-grabbing .sp-testimonial { pointer-events: none; }
.sp-marquee__track { display: flex; align-items: flex-start; gap: 1.25rem; width: max-content; padding: 0 1.5rem; }
.sp-marquee .sp-testimonial { flex: 0 0 330px; width: 330px; }
/* Dots: the button is a 24x24 hit area (WCAG 2.5.8 minimum target size) and the
 * visible dot is the 9px ::before inside it. Sizing the button itself to 9px is
 * what failed the audit — a 9px tap target with 8px of spacing is unhittable for
 * anyone without fine motor control, and it looks identical either way. */
.sp-marquee__dots { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0; row-gap: 0.25rem; max-width: 90%; margin: 0.85rem auto 0; padding: 0; }
.sp-marquee__dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sp-marquee__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--border, #D8E2E8); transition: background 0.2s ease, transform 0.2s ease; }
.sp-marquee__dot:hover::before { background: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-marquee__dot.is-active::before { background: var(--wp--preset--color--primary, #031B4E); transform: scale(1.3); }
@media (max-width: 600px) { .sp-marquee .sp-testimonial { flex-basis: 280px; width: 280px; } }
.sp-testimonial__avatar { display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--primary, #031B4E); }

/* Floating WhatsApp + Call buttons (site-wide, bottom-right) */
.sp-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 9990; display: flex; flex-direction: column; gap: 0.6rem; }
.sp-fab__btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 16px rgba(3,27,78,0.28); transition: transform 0.15s ease; }
.sp-fab__btn:hover { transform: scale(1.07); color: #fff; }
.sp-fab__btn svg { width: 28px; height: 28px; }
.sp-fab__btn--wa { background: #25D366; }
.sp-fab__btn--call { background: var(--wp--preset--color--primary, #031B4E); }
@media (max-width: 600px) { .sp-fab { right: 0.85rem; bottom: 0.85rem; } .sp-fab__btn { width: 48px; height: 48px; } .sp-fab__btn svg { width: 25px; height: 25px; } }
/* WhatsApp FAB attention pulse: a brief enlarge + wobble every 10s to draw the eye.
 * Pure CSS, transform-only (GPU-composited, no layout/repaint) so no load/runtime cost.
 * Rests ~8s of each 10s cycle. Pauses on hover (so the hover-lift works) and is
 * disabled for users who prefer reduced motion. */
@keyframes sp-fab-attn {
	0%, 82%, 100% { transform: scale(1) rotate(0deg); }
	85% { transform: scale(1.18) rotate(-12deg); }
	88% { transform: scale(1.18) rotate(12deg); }
	91% { transform: scale(1.18) rotate(-10deg); }
	94% { transform: scale(1.14) rotate(8deg); }
	97% { transform: scale(1.06) rotate(0deg); }
}
.sp-fab__btn--wa { animation: sp-fab-attn 10s ease-in-out infinite; transform-origin: center; will-change: transform; }
.sp-fab__btn--wa:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .sp-fab__btn--wa { animation: none; } }

/* Mobile nav overlay: force items full-width and left-justified (overrides the
   desktop "justify right" which pushes each link to the right and off-screen) */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100% !important; align-items: stretch !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100% !important; justify-content: flex-start !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { justify-content: flex-start !important; text-align: left !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-left: 1.5rem !important; width: 100% !important; }
}

/* Conditions: navy category header with white title for contrast (body stays white) */
.sp-cond > summary { background: var(--wp--preset--color--primary, #031B4E); color: #fff; border-bottom: 0 !important; }
.sp-cond > summary::after { border-top-color: #fff !important; }

/* FAQ aside: icon sits beside the heading; left column holds the header */
.sp-faq-main { min-width: 0; }
.sp-faq-grid__asidehd { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.sp-faq-grid__asidehd svg { flex-shrink: 0; opacity: 0.85; }
.sp-faq-grid__asidehd h3 { margin: 0; }

/* Testimonials: uniform card height, slightly wider for full reviews */
.sp-marquee .sp-testimonial { flex: 0 0 360px; width: 360px; align-self: flex-start; }
@media (max-width: 600px) { .sp-marquee .sp-testimonial { flex-basis: 290px; width: 290px; } }

/* Lead form: secondary "Book appointment online" button under the submit */
.sp-lead-form__alt { width: 100%; text-align: center; text-decoration: none; background: transparent !important; color: var(--wp--preset--color--primary, #031B4E) !important; border: 1.5px solid var(--wp--preset--color--primary, #031B4E) !important; }
.sp-lead-form__alt:hover { background: var(--wp--preset--color--primary, #031B4E) !important; color: #fff !important; }

/* Mobile: thinner header + smaller logo */
@media (max-width: 600px) {
	.sp-site-header { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
	.sp-site-header .wp-block-site-logo img { width: 175px !important; height: auto !important; }
}

/* Testimonials: clamp reviews to 4 lines with a Read more toggle (uniform height) */
.sp-testimonial__quote { flex: 0 0 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-bottom: 0.6rem; }
.sp-testimonial.is-expanded .sp-testimonial__quote { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.sp-readmore { -webkit-appearance: none; appearance: none; align-self: flex-start; width: auto; margin: 0 0 1rem; padding: 0; background: none; border: 0; box-shadow: none; cursor: pointer; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.82rem; color: var(--wp--preset--color--accent, #596789); }

/* =================================================================
   Readability pass: lift body/content text toward 16px for SEO + mobile
   legibility. Compact labels (eyebrow, stat-label, time, badges) left as-is.
   ================================================================= */
.sp-condition-tile ul,
.sp-feature-card p,
.sp-podiatrist-card p,
.sp-timeline__step p,
.sp-testimonial__quote,
.sp-clinic-image-card__body p,
.sp-faq-grid__aside p,
.sp-cond__body ul,
.sp-cond__body a { font-size: 1rem; }
.sp-clinic-image-card__body .sp-meta,
.sp-cond__all,
.sp-cta-grid__call { font-size: 0.95rem; }
.sp-readmore { font-size: 0.9rem; }
.sp-lead-form__fine { font-size: 0.8rem; }

/* =================================================================
   Clinic location pages (clinic-location.html shell + page content)
   ================================================================= */
.sp-loc h2 { margin-top: 2.25rem; }
.sp-loc ul, .sp-loc ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; margin: 0.5rem 0 0; }
.sp-loc li { line-height: 1.6; }
.sp-loc-faq { border-bottom: 1px solid var(--wp--preset--color--border, #D8E2E8); padding: 0.9rem 0; }
.sp-loc-faq summary { cursor: pointer; font-weight: 600; font-family: var(--wp--preset--font-family--heading), sans-serif; list-style: none; position: relative; padding-right: 1.5rem; }
.sp-loc-faq summary::-webkit-details-marker { display: none; }
.sp-loc-faq summary::after { content: ""; position: absolute; right: 0; top: 0.5em; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--wp--preset--color--accent, #596789); transition: transform 0.2s ease; }
.sp-loc-faq[open] summary::after { transform: rotate(180deg); }
.sp-loc-faq p { margin: 0.6rem 0 0; }

/* Location page designed layout helpers */
.sp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.sp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 980px) { .sp-grid-3, .sp-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sp-grid-3, .sp-grid-4 { grid-template-columns: 1fr; } }
.sp-grid-3 .sp-card h3, .sp-grid-4 .sp-card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-grid-3 .sp-card p, .sp-grid-4 .sp-card p { margin: 0; font-size: 0.95rem; color: var(--wp--preset--color--text-muted, #5F6C88); line-height: 1.6; }
.sp-grid-3 .sp-card a, .sp-grid-4 .sp-card a { color: var(--wp--preset--color--accent, #596789); font-weight: 600; }
/* Card TITLE links keep the heading colour (not the accent link colour) so titles read
 * consistently whether or not they link out; hover underline still signals they are clickable. */
.sp-grid-3 .sp-card h3 a, .sp-grid-4 .sp-card h3 a { color: inherit; font-weight: inherit; }
.sp-grid-3 .sp-card h3 a:hover, .sp-grid-4 .sp-card h3 a:hover { text-decoration: underline; }
a.sp-card { text-decoration: none; display: block; transition: border-color 0.15s ease, transform 0.15s ease; }
a.sp-card:hover { border-color: var(--wp--preset--color--accent, #596789); transform: translateY(-2px); }
.sp-loc-detail { display: grid; grid-template-columns: 130px 1fr; gap: 0.4rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-loc-detail strong { color: var(--wp--preset--color--primary, #031B4E); }
.sp-loc-detail a { color: var(--wp--preset--color--accent, #596789); }
@media (max-width: 480px) { .sp-loc-detail { grid-template-columns: 1fr; gap: 0.15rem; } }
.sp-cond-list { list-style: none; padding: 0; columns: 2; column-gap: 2rem; max-width: 980px; margin: 0 auto; }
.sp-cond-list li { position: relative; padding-left: 1.4rem; line-height: 1.55; margin-bottom: 0.7rem; break-inside: avoid; -webkit-column-break-inside: avoid; }
.sp-cond-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--accent, #596789); }
.sp-cond-list a { color: var(--wp--preset--color--primary, #031B4E); font-weight: 600; text-decoration: none; }
.sp-cond-list a:hover { text-decoration: underline; }
@media (max-width: 600px) { .sp-cond-list { columns: 1; } }
.sp-steps { list-style: none; padding: 0; display: grid; gap: 1.1rem; margin: 0; }
.sp-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.sp-steps__n { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--primary, #031B4E); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; }
.sp-steps li > div { line-height: 1.6; padding-top: 0.4rem; }

/* ---- Location pages: distinct full-bleed photo hero ---- */
html { scroll-behavior: smooth; }
.sp-loc-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 54vh, 560px); color: #fff; isolation: isolate; overflow: hidden; }
.sp-loc-hero__media { position: absolute; inset: 0; z-index: -2; }
.sp-loc-hero .sp-loc-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-loc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,27,78,0.30), rgba(3,27,78,0.82)); }
.sp-loc-hero__inner { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; box-sizing: border-box; }
.sp-loc-hero .sp-eyebrow { color: #bcd6ef; }
.sp-loc-hero h1 { color: #fff; margin: 0.4rem 0 0.85rem; }
.sp-loc-hero__sub { color: rgba(255,255,255,0.92); font-size: 1.1rem; line-height: 1.6; max-width: 62ch; margin: 0 0 1.35rem; }
.sp-loc-hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; font-size: 0.95rem; color: rgba(255,255,255,0.95); }
.sp-loc-hero__facts span { display: inline-flex; align-items: center; gap: 0.45rem; }
.sp-loc-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.25rem; }
.sp-loc-hero__cta .wp-element-button { background: #fff !important; color: var(--wp--preset--color--primary, #031B4E) !important; border: 1.5px solid #fff !important; font-weight: 600; }
.sp-loc-hero__cta .wp-element-button.is-ghost { background: transparent !important; color: #fff !important; }
.sp-loc-hero__dir { display: inline-flex; align-items: center; gap: 0.4rem; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sp-loc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem; padding: 0.9rem 1.5rem; background: var(--wp--preset--color--primary, #031B4E); color: #fff; font-size: 0.95rem; text-align: center; }
.sp-loc-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ---- Direction guide: clickable steps + swapping side image (CSS-only) ---- */
.sp-dirguide { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 1.5rem 2.25rem; align-items: start; max-width: 1400px; margin: 0 auto; }
/* Hidden step radios pinned to the viewport (not the guide): tapping a step focuses its radio,
 * and a fixed 1px radio is always in view, so the browser never scrolls the page to reach it.
 * Pure CSS, out of flow, no layout shift (CLS-safe). */
.sp-dirguide > input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp-dirguide__steps { display: grid; gap: 0.7rem; }
.sp-dirguide__step { display: flex; flex-direction: column; padding: 0.9rem 1.1rem; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; line-height: 1.5; }
.sp-dirguide__steprow { display: flex; gap: 0.85rem; align-items: flex-start; }
.sp-dirguide__stepimg { display: none; }
.sp-dirguide__step:hover { border-color: var(--wp--preset--color--accent, #596789); }
.sp-dirguide__step .n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--color--surface-alt, #E8ECEF); color: var(--wp--preset--color--primary, #031B4E); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; font-size: 0.9rem; }
.sp-dirguide__stage { position: sticky; top: 1.5rem; border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-dirguide__stage img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
/* First image sits in flow (as a block, so no inline-baseline gap) and sets the box height to the
 * exact photo height with zero dead space; the rest overlay it and cover-fill. */
.sp-dirguide__stage img.di1 { position: relative; height: auto; }
/* Direction-photo lightbox (tap any step photo to open full-size; zoomable on mobile) */
.sp-dirzoom { cursor: zoom-in; }
.sp-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(3,27,78,0.92); padding: 1rem; cursor: zoom-out; }
.sp-lightbox.is-open { display: flex; }
.sp-lightbox__img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,0.5); }
.sp-lightbox__close { position: absolute; top: 0.9rem; right: 1.1rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; }
.sp-lightbox__close:hover { background: rgba(255,255,255,0.3); }
#d1:checked ~ .sp-dirguide__stage .di1, #d2:checked ~ .sp-dirguide__stage .di2, #d3:checked ~ .sp-dirguide__stage .di3, #d4:checked ~ .sp-dirguide__stage .di4, #d5:checked ~ .sp-dirguide__stage .di5, #d6:checked ~ .sp-dirguide__stage .di6, #d7:checked ~ .sp-dirguide__stage .di7, #d8:checked ~ .sp-dirguide__stage .di8, #d9:checked ~ .sp-dirguide__stage .di9, #d10:checked ~ .sp-dirguide__stage .di10, #d11:checked ~ .sp-dirguide__stage .di11, #d12:checked ~ .sp-dirguide__stage .di12 { opacity: 1; }
#d1:checked ~ .sp-dirguide__steps label[for="d1"], #d2:checked ~ .sp-dirguide__steps label[for="d2"], #d3:checked ~ .sp-dirguide__steps label[for="d3"], #d4:checked ~ .sp-dirguide__steps label[for="d4"], #d5:checked ~ .sp-dirguide__steps label[for="d5"], #d6:checked ~ .sp-dirguide__steps label[for="d6"], #d7:checked ~ .sp-dirguide__steps label[for="d7"], #d8:checked ~ .sp-dirguide__steps label[for="d8"], #d9:checked ~ .sp-dirguide__steps label[for="d9"], #d10:checked ~ .sp-dirguide__steps label[for="d10"], #d11:checked ~ .sp-dirguide__steps label[for="d11"], #d12:checked ~ .sp-dirguide__steps label[for="d12"] { border-color: var(--wp--preset--color--accent, #596789); background: var(--wp--preset--color--surface-soft, #F5F9FC); box-shadow: inset 4px 0 0 var(--wp--preset--color--accent, #596789); }
#d1:checked ~ .sp-dirguide__steps label[for="d1"] .n, #d2:checked ~ .sp-dirguide__steps label[for="d2"] .n, #d3:checked ~ .sp-dirguide__steps label[for="d3"] .n, #d4:checked ~ .sp-dirguide__steps label[for="d4"] .n, #d5:checked ~ .sp-dirguide__steps label[for="d5"] .n, #d6:checked ~ .sp-dirguide__steps label[for="d6"] .n, #d7:checked ~ .sp-dirguide__steps label[for="d7"] .n, #d8:checked ~ .sp-dirguide__steps label[for="d8"] .n, #d9:checked ~ .sp-dirguide__steps label[for="d9"] .n, #d10:checked ~ .sp-dirguide__steps label[for="d10"] .n, #d11:checked ~ .sp-dirguide__steps label[for="d11"] .n, #d12:checked ~ .sp-dirguide__steps label[for="d12"] .n { background: var(--wp--preset--color--accent, #596789); color: #fff; }
@media (max-width: 760px) {
	.sp-dirguide { grid-template-columns: 1fr; gap: 0.7rem; }
	.sp-dirguide__stage { display: none; }
	.sp-dirguide__stepimg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 0.85rem; cursor: zoom-in; }
	#d1:checked ~ .sp-dirguide__steps label[for="d1"] .sp-dirguide__stepimg, #d2:checked ~ .sp-dirguide__steps label[for="d2"] .sp-dirguide__stepimg, #d3:checked ~ .sp-dirguide__steps label[for="d3"] .sp-dirguide__stepimg, #d4:checked ~ .sp-dirguide__steps label[for="d4"] .sp-dirguide__stepimg, #d5:checked ~ .sp-dirguide__steps label[for="d5"] .sp-dirguide__stepimg, #d6:checked ~ .sp-dirguide__steps label[for="d6"] .sp-dirguide__stepimg, #d7:checked ~ .sp-dirguide__steps label[for="d7"] .sp-dirguide__stepimg, #d8:checked ~ .sp-dirguide__steps label[for="d8"] .sp-dirguide__stepimg, #d9:checked ~ .sp-dirguide__steps label[for="d9"] .sp-dirguide__stepimg, #d10:checked ~ .sp-dirguide__steps label[for="d10"] .sp-dirguide__stepimg, #d11:checked ~ .sp-dirguide__steps label[for="d11"] .sp-dirguide__stepimg, #d12:checked ~ .sp-dirguide__steps label[for="d12"] .sp-dirguide__stepimg { display: block; }
}
.sp-locpage img { max-width: 100%; height: auto; }
/* prevent the map iframe (and any media) from forcing the split column wider than the viewport */
.sp-split { min-width: 0; }
.sp-split > * { min-width: 0; }
.sp-split__media { max-width: 100%; overflow: hidden; }
.sp-split__media iframe, .sp-split__media img { max-width: 100%; }

/* =================================================================
   Conditions pillar pages (single-condition.html + inc/conditions.php)
   ================================================================= */
.sp-ghost { background: transparent !important; color: var(--wp--preset--color--primary, #031B4E) !important; border: 1.5px solid var(--wp--preset--color--primary, #031B4E) !important; font-weight: 600; }
.sp-cond-crumb { font-size: 0.8rem; color: var(--wp--preset--color--text-muted, #5F6C88); margin: 0 auto 0.85rem; }
.sp-cond-crumb a { color: var(--wp--preset--color--accent, #596789); text-decoration: none; }
.sp-cond-crumb span { margin: 0 0.3rem; }
.sp-cond-hero h1 { margin: 0.4rem 0 0; }
.sp-cond-hero__btns { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }
/* Shorter, wider hero photo (uniform on mobile + desktop). Overrides the
 * default 5/6 portrait frame on the media wrapper; the image fills it. */
.sp-cond-hero .sp-hero-split__media { aspect-ratio: 16 / 10; }

/* Condense the hero header on mobile so the page does not open with a tall,
 * scroll-heavy block of breadcrumb + eyebrow + tag + H1 before any content. */
@media (max-width: 600px) {
	.sp-condpage .sp-section--soft { padding-top: 1.35rem !important; padding-bottom: 0.85rem !important; }
	.sp-condpage .sp-section { padding-top: 1.1rem; padding-bottom: 2rem; }
	.sp-cond-crumb { font-size: 0.72rem; line-height: 1.4; margin-bottom: 0.55rem; }
	.sp-cond-hero .sp-eyebrow { font-size: 0.68rem; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
	.sp-cond-tag { font-size: 0.8rem; margin-bottom: 0.45rem; }
	.sp-cond-hero h1 { margin-top: 0.15rem; font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.15; }
	.sp-cond-hero__btns { margin-top: 1rem; gap: 0.6rem; }
	.sp-cond-hero.sp-hero-split { gap: 1.25rem; }
}

/* two-column layout */
.sp-cond-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2.75rem; align-items: start; }
.sp-cond-main { min-width: 0; }
.sp-cond-aside { position: sticky; top: 1.5rem; }
@media (max-width: 980px) { .sp-cond-wrap { grid-template-columns: 1fr; gap: 2rem; } .sp-cond-aside { position: static; } }

/* key summary */
.sp-cond-summary { background: var(--wp--preset--color--surface-soft, #F5F9FC); border-left: 4px solid var(--wp--preset--color--accent, #596789); border-radius: 12px; padding: 1.2rem 1.5rem; margin: 0 0 1.75rem; }
.sp-cond-summary__title { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; color: var(--wp--preset--color--primary, #031B4E); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; margin: 0 0 0.4rem; }
.sp-cond-summary p { margin: 0; line-height: 1.6; }
/* Treatment key-summary: promotional differentiator + Book CTA */
.sp-treat-summary__cta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-treat-summary__usp { font-size: 0.92rem; font-weight: 500; color: var(--wp--preset--color--primary, #031B4E); margin: 0 !important; line-height: 1.55; }

/* table of contents */
.sp-cond-toc { border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; padding: 1.1rem 1.4rem; margin: 0 0 2rem; background: #fff; }
.sp-cond-toc__title { font-weight: 700; color: var(--wp--preset--color--primary, #031B4E); margin: 0 0 0.5rem; }
.sp-cond-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.sp-cond-toc a { color: var(--wp--preset--color--link, #2B61A8); text-decoration: none; }
.sp-cond-toc a:hover { text-decoration: underline; }

/* article body typography */
.sp-cond-body h2 { margin: 2.25rem 0 0.75rem; scroll-margin-top: 1.5rem; }
.sp-cond-body h3 { margin: 1.5rem 0 0.5rem; }
.sp-cond-body p { margin: 0 0 1rem; line-height: 1.75; }
.sp-cond-body ul, .sp-cond-body ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.sp-cond-body li { margin-bottom: 0.4rem; line-height: 1.65; }
.sp-cond-body a:not(.wp-element-button) { color: var(--wp--preset--color--link, #2B61A8); text-decoration: none; }
.sp-cond-body a:not(.wp-element-button):hover { color: var(--wp--preset--color--primary, #031B4E); text-decoration: underline; text-underline-offset: 0.15em; }
.sp-cond-body img { max-width: 100%; height: auto; border-radius: 12px; }
.sp-cond-body figure { margin: 1.5rem 0; }

/* -------------------------------------------------------------------------
 * DEFAULT in-article image style (blog + condition/treatment body).
 * Any image dropped into the post via the block editor's Image block picks
 * this up automatically, in any section, with no per-image work. Image WEIGHT
 * is handled upstream (every upload is converted to WebP and capped at 120KB
 * per served size) — this block is purely the visual default: responsive,
 * rounded, centred, captioned, with left/right/wide alignment honoured from
 * the block toolbar. Images display at natural size up to the content width
 * (never upscaled), so a small graphic stays small and a wide photo fills the
 * column. The owner just inserts an Image block and it looks right.
 * ---------------------------------------------------------------------------*/
.sp-cond-body .wp-block-image { margin: 1.75rem 0; }
.sp-cond-body .wp-block-image img { display: block; height: auto; border-radius: 12px; }
/* default (no alignment chosen) = centred in the text column */
.sp-cond-body .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) img { margin-left: auto; margin-right: auto; }
.sp-cond-body .wp-block-image.aligncenter { text-align: center; }
.sp-cond-body .wp-block-image.aligncenter img { margin-left: auto; margin-right: auto; }
/* caption: muted, smaller, centred under the image */
.sp-cond-body figcaption,
.sp-cond-body .wp-block-image figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.5; color: var(--wp--preset--color--text-muted, #5F6C88); text-align: center; }
/* wrap-around alignment from the toolbar (text flows beside the image) */
.sp-cond-body .wp-block-image.alignleft { float: left; max-width: 48%; margin: 0.4rem 1.6rem 1rem 0; }
.sp-cond-body .wp-block-image.alignright { float: right; max-width: 48%; margin: 0.4rem 0 1rem 1.6rem; }
.sp-cond-body .wp-block-image.alignleft img,
.sp-cond-body .wp-block-image.alignright img { width: 100%; }
/* wide alignment breaks gently out of the text column */
.sp-cond-body .wp-block-image.alignwide { margin-left: -2rem; margin-right: -2rem; }
.sp-cond-body .wp-block-image.alignwide img { width: 100%; }
@media (max-width: 680px) {
	.sp-cond-body .wp-block-image.alignleft,
	.sp-cond-body .wp-block-image.alignright { float: none; max-width: 100%; margin: 1.4rem 0; }
	.sp-cond-body .wp-block-image.alignwide { margin-left: 0; margin-right: 0; }
}

/* mid-page CTA */
.sp-cond-midcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; background: var(--wp--preset--color--primary, #031B4E); color: #fff; border-radius: 16px; padding: 1.35rem 1.6rem; margin: 2rem 0; }
.sp-cond-midcta__txt strong { display: block; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 1.15rem; }
.sp-cond-midcta__txt span { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.sp-cond-midcta__btns { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sp-cond-midcta .wp-element-button { background: #fff; color: var(--wp--preset--color--primary, #031B4E); font-weight: 600; }
.sp-cond-midcta .sp-ghost { background: transparent !important; color: #fff !important; border: 1.5px solid #fff !important; }

/* hero category tag (icon + label, not a button) */
.sp-cond-tag { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; color: var(--wp--preset--color--primary, #031B4E); margin-bottom: 0.9rem; }
.sp-cond-tag svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--wp--preset--color--accent, #596789); }

/* full-width section images (placed at the end of a section, before the next H2) */
.sp-cond-bodyimg { margin: 0.5rem 0 2rem; }
.sp-cond-bodyimg img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* FAQ accordion (conditions) */
.sp-cfaq-list { margin: 1rem 0 0; border-top: 1px solid var(--wp--preset--color--border, #E3E8EF); }
.sp-cfaq { border-bottom: 1px solid var(--wp--preset--color--border, #E3E8EF); }
.sp-cfaq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0.25rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-cfaq > summary::-webkit-details-marker { display: none; }
.sp-cfaq > summary::after { content: ""; flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--wp--preset--color--accent, #596789); transition: transform 0.2s ease; }
.sp-cfaq[open] > summary::after { transform: rotate(180deg); }
.sp-cfaq__a { padding: 0 0.25rem 1.1rem; }
.sp-cfaq__a p { margin: 0 0 0.75rem; line-height: 1.65; }
.sp-cfaq__a p:last-child { margin-bottom: 0; }

/* Treatment cards: modality H4 cards as crawlable, single-open <details> accordions.
 * Borderless and compact: collapsed items are a tight list of headings; one open
 * at a time (native <details name> exclusive grouping); first open by default. */
/* Treatment section as a bullet list (owner 2026-06-30): bold modality label + explanation. */
.sp-treat-list { margin: 1rem 0 0; padding-left: 1.35rem; }
.sp-treat-list > li { margin-bottom: 0.9rem; }
.sp-treat-list > li:last-child { margin-bottom: 0; }
.sp-treat-list > li > p { margin: 0 0 0.5rem; }
.sp-treat-list > li > p:last-child { margin-bottom: 0; }
.sp-tcard > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; padding: 0.65rem 0.25rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 1rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-tcard > summary::-webkit-details-marker { display: none; }
/* Decorative bullet before each card heading: signals "one of several sibling items".
 * Pure CSS pseudo-element, no DOM / heading-text / outline change (SEO-safe). */
.sp-tcard > summary::before { content: "\2022"; flex: 0 0 auto; color: var(--wp--preset--color--accent, #596789); font-size: 1.1rem; line-height: 1; }
.sp-tcard > summary::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--wp--preset--color--accent, #596789); transition: transform 0.2s ease; }
.sp-tcard[open] > summary::after { transform: rotate(180deg); }
.sp-tcard__body { padding: 0 0.25rem 0.85rem; }
.sp-tcard__body p { margin: 0 0 0.7rem; line-height: 1.6; }
.sp-tcard__body p:last-child { margin-bottom: 0; }
/* Differential cards keep their condition name as an <h3> inside <summary> (stays
 * in the outline); strip its default heading styling so it matches the card head. */
.sp-tcard > summary > h3 { margin: 0; font: inherit; color: inherit; }

/* treatment section */
.sp-cond-treat { background: var(--wp--preset--color--surface-soft, #F5F9FC); border-radius: 16px; padding: clamp(1.35rem, 3vw, 2rem); margin: 2.5rem 0; }
.sp-cond-treat::after { content: ""; display: block; clear: both; }
/* Landscape 16/9 at every breakpoint (owner 2026-07-15). Floated right so it sits top-right
   of the closing card and the copy wraps beside it. Widened from 300px as the frame got
   shorter, so it holds the same visual weight it had as a portrait. */
.sp-cond-body .sp-cond-treat__media { float: right; width: 48%; max-width: 440px; margin: 0 0 1rem 1.6rem; }
.sp-cond-treat__media img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 9; border-radius: 12px; display: block; }
.sp-cond-treat > h2 { margin: 0 0 0.9rem; }
.sp-cond-treat > p { margin: 0 0 0.85rem; }
.sp-cond-treat__btns { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; clear: both; }
/* Mobile: full-bleed above the copy. Aspect ratio is inherited (16/9) — no override needed. */
@media (max-width: 680px) { .sp-cond-body .sp-cond-treat__media { float: none; width: 100%; max-width: none; margin: 0 0 1.1rem; } }

/* social share */
.sp-cond-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-cond-share > span { color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 0.9rem; margin-right: 0.25rem; }
.sp-cond-share a, .sp-cond-share__copy { height: 38px; min-width: 38px; border-radius: 999px; border: 1px solid var(--wp--preset--color--border, #D8E2E8); display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--primary, #031B4E); background: #fff; cursor: pointer; }
.sp-cond-share a:hover, .sp-cond-share__copy:hover { background: var(--wp--preset--color--surface-soft, #F5F9FC); border-color: var(--wp--preset--color--accent, #596789); }
.sp-cond-share svg { width: 18px; height: 18px; }
.sp-cond-share__copy { padding: 0 0.85rem; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; font-family: inherit; }
.sp-cond-share__copy.copied span { color: var(--wp--preset--color--success, #2E7D5B); }
.sp-cond-share__copy.copied span::after { content: " \2713"; }

/* sidebar lead form card */
.sp-cond-formcard { background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(3,27,78,0.05); }
.sp-cond-formcard h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.sp-cond-formcard > p { color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 0.95rem; margin: 0 0 1rem; }
.sp-cond-formcard__call { font-size: 0.9rem; margin: 1rem 0 0 !important; text-align: center; }
.sp-cond-formcard__call a { color: var(--wp--preset--color--accent, #596789); font-weight: 600; }
/* Location pages: tighter section rhythm + hero on small screens */
@media (max-width: 600px) {
	.sp-locpage .sp-section { padding-block: 2rem; }
	.sp-loc-hero { min-height: 0; padding: 2.25rem 1.25rem; }
	.sp-loc-hero__sub { font-size: 1rem; }
	.sp-loc-trust { gap: 0.35rem 1.25rem; padding: 0.85rem 1.25rem; font-size: 0.9rem; }
	.sp-dirguide { gap: 1rem; }
}
.sp-readmore:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* Header & footer: horizontal inset so content isn't flush to screen edges
   (root padding is 0; body sections have their own 1.5rem, these did not) */
.sp-site-header { padding-left: 1.5rem; padding-right: 1.5rem; }
.sp-footer { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 600px) { .sp-site-header, .sp-footer { padding-left: 1.25rem; padding-right: 1.25rem; } }

/* Footer logo: render white so it stands out on the navy background */
.sp-footer .wp-block-site-logo img { filter: brightness(0) invert(1); }

/* =================================================================
   Child-friendly Paediatrics page (scoped to .sp-kids)
   ================================================================= */
@font-face { font-family: "Fredoka"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("assets/fonts/fredoka.woff2") format("woff2"); }
@font-face { font-family: "Nunito";  font-weight: 400 700; font-style: normal; font-display: swap; src: url("assets/fonts/nunito.woff2") format("woff2"); }

.sp-kids { font-family: "Nunito", system-ui, sans-serif; background-color: #f8f2e6; }

/* Child-friendly font colours: cheerful blue headings + pink accents (blue/pink = the paediatric theme) */
.sp-kids h1, .sp-kids h2 { color: #1f8fcb; }
.sp-kids h3 { color: #e0699a; }
/* Treatment image cards sit on dark photos: their titles stay white (the paediatric pink is
   unreadable there) and carry no hover underline over the photo. Overrides .sp-kids h3 above. */
.sp-kids .sp-feature-card h3 { color: #fff; }
.sp-kids .sp-feature-card:hover, .sp-kids .sp-feature-card:focus-visible { text-decoration: none; }
.sp-kids .sp-eyebrow { color: #ec6ca0; }
.sp-kids .sp-cond__all { color: #1f8fcb; }
/* keep headings white where they sit on the dark CTA panel */
.sp-kids .sp-cta-photo h2, .sp-kids .sp-cta-grid__intro h2 { color: #ffffff; }
.sp-kids h1, .sp-kids h2, .sp-kids h3, .sp-kids .sp-eyebrow, .sp-kids .sp-cond > summary { font-family: "Fredoka", "Nunito", system-ui, sans-serif; letter-spacing: 0; }
.sp-kids p, .sp-kids li, .sp-kids a, .sp-kids span, .sp-kids strong, .sp-kids button, .sp-kids input, .sp-kids textarea, .sp-kids label { font-family: "Nunito", system-ui, sans-serif; }
.sp-kids .sp-section--soft { background-color: transparent; }
/* signs checklist grid (2-col within the split, 1-col on mobile) */
.sp-signs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; font-size: 1rem; }
@media (max-width: 600px) { .sp-signs-grid { grid-template-columns: 1fr; } }
/* tighten vertical rhythm between sections on the paediatric page (tighter on mobile) */
.sp-kids .sp-section { padding-block: clamp(2rem, 2.6vw, 3.25rem); }
@media (max-width: 600px) { .sp-kids .sp-section { padding-block: 1.5rem; } }
.sp-kids .sp-cond { border-radius: 16px; }
.sp-kids .sp-cond > summary { border-radius: 16px 16px 0 0; }
.sp-kids .wp-element-button { border-radius: 999px; }

/* Buttons + condition headers tinted to the paediatric blue/pink feel */
.sp-kids .wp-element-button,
.sp-kids .wp-block-button__link { background-color: #1f8fcb !important; color: #ffffff !important; border-color: #1f8fcb !important; }
.sp-kids .wp-element-button:hover,
.sp-kids .wp-block-button__link:hover { background-color: #1a7cb0 !important; }
/* the second button in each pair (outline / lead-form alt) -> filled pink */
.sp-kids .wp-block-button.is-style-outline .wp-block-button__link,
.sp-kids .sp-lead-form__alt { background-color: #e25b97 !important; color: #ffffff !important; border: 1.5px solid #e25b97 !important; }
.sp-kids .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sp-kids .sp-lead-form__alt:hover { background-color: #d04b86 !important; color: #ffffff !important; border-color: #d04b86 !important; }
/* second button in a buttons pair (e.g. hero "Call Us") -> filled pink */
.sp-kids .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link,
.sp-kids a.wp-element-button[href^="tel:"] { background-color: #e25b97 !important; color: #ffffff !important; border-color: #e25b97 !important; }
.sp-kids .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover,
.sp-kids a.wp-element-button[href^="tel:"]:hover { background-color: #d04b86 !important; border-color: #d04b86 !important; }
/* condition box headers: one calm pastel with a dark title */
.sp-kids .sp-cond > summary { background: #cfe6f7; color: #0e3354; }
.sp-kids .sp-cond > summary::after { border-top-color: #0e3354 !important; }
/* number badges (first-visit timeline) tinted to the blue accent */
.sp-kids .sp-timeline__node { background: #1f8fcb; }
/* paediatric conditions grid column layout is governed by .sp-cond-grid--paed */

/* =====================================================================
 * Primary navigation + Conditions mega menu  (inc/nav.php)
 * Mobile-first: hamburger drawer by default; horizontal menu at >=1100px.
 * ===================================================================== */
.sp-site-header { position: relative; z-index: 100; }
.sp-headbar { position: relative; }
.sp-nav { font-family: var(--wp--preset--font-family--heading), sans-serif; display: flex; align-items: center; gap: 0.6rem; }
.sp-nav a { text-decoration: none; color: var(--wp--preset--color--primary, #031B4E); }
/* "Book Online" CTA pill — rendered as the final menu item (end of bar on desktop, inside the drawer on mobile) */
.sp-nav__cta { display: flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: 600; font-size: 0.95rem; line-height: 1; color: #fff !important; background: var(--wp--preset--color--primary, #031B4E); border: 1.5px solid var(--wp--preset--color--primary, #031B4E); border-radius: 999px; padding: 0.8rem 1.1rem; transition: background .15s ease, color .15s ease; }
.sp-nav__cta:hover, .sp-nav__cta:focus-visible { background: #fff; color: var(--wp--preset--color--primary, #031B4E) !important; }
.sp-nav__list { list-style: none; margin: 0; padding: 0; }
.sp-nav__link { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; white-space: nowrap; color: var(--wp--preset--color--primary, #031B4E); }
/* Rainbow "Paediatrics" nav label — gradient-clipped text to make it stand out. */
.sp-nav-rainbow { font-weight: 700; background: linear-gradient(90deg, #e53935 0%, #fb8c00 20%, #fdd835 40%, #43a047 60%, #1e88e5 80%, #8e24aa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.sp-nav__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.6; transition: transform .18s ease; }
.sp-mega__col ul { list-style: none; margin: 0; padding: 0; }
.sp-mega__head { display: block; font-weight: 700; color: var(--wp--preset--color--primary, #031B4E); font-size: 0.92rem; }
.sp-mega__col ul a { color: var(--wp--preset--color--text-muted, #5F6C88); font-weight: 400; font-size: 0.875rem; line-height: 1.45; }
.sp-mega__col ul a:hover { color: var(--wp--preset--color--link, #2B61A8); }
.sp-mega__all { display: inline-block; font-weight: 600; color: var(--wp--preset--color--link, #2B61A8); }
.sp-subm { list-style: none; margin: 0; padding: 0; }

/* ---- Mobile drawer (default) ---- */
.sp-nav__tog { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sp-nav__burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 40px; padding: 0; cursor: pointer; }
.sp-nav__burger span, .sp-nav__burger::before, .sp-nav__burger::after { content: ""; display: block; height: 2px; width: 22px; background: var(--wp--preset--color--primary, #031B4E); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.sp-nav__tog:checked ~ .sp-nav__burger span { opacity: 0; }
.sp-nav__tog:checked ~ .sp-nav__burger::before { transform: translateY(7px) rotate(45deg); }
.sp-nav__tog:checked ~ .sp-nav__burger::after { transform: translateY(-7px) rotate(-45deg); }
.sp-nav__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.75rem; background: #fff; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); box-shadow: var(--wp--preset--shadow--lifted); max-height: 80vh; overflow-y: auto; padding: 0.4rem 1.25rem 1.25rem; z-index: 200; }
.sp-nav__tog:checked ~ .sp-nav__panel { display: block; }
.sp-nav__list { display: flex; flex-direction: column; }
.sp-nav__item { border-bottom: 1px solid var(--wp--preset--color--border, #EAF1F8); }
.sp-nav__link { justify-content: space-between; padding: 0.85rem 0.25rem; font-size: 1rem; }
/* Dropdowns collapse by default; the label (not a link) toggles them open inline.
   The desktop nav-link is hidden so tapping a parent expands instead of navigating. */
.sp-nav__dtog { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sp-nav__link--nav { display: none; }
.sp-nav__link--toggle { cursor: pointer; }
.sp-mega, .sp-megam, .sp-subm { display: none; }
/* Mobile reveals the per-category accordion (.sp-megam), not the flat desktop
   mega; .sp-mega stays hidden on mobile (it's the desktop hover grid). */
.sp-nav__dtog:checked ~ .sp-megam, .sp-nav__dtog:checked ~ .sp-subm { display: block; }
.sp-nav__dtog:checked ~ .sp-nav__link--toggle .sp-nav__caret { transform: rotate(180deg); }
.sp-mega { padding: 0.1rem 0 0.75rem 0.95rem; }
.sp-mega__grid { display: block; } /* stack categories vertically on mobile */
.sp-mega__col { margin: 0 0 0.85rem; }
.sp-mega__head { margin-bottom: 0.25rem; }
.sp-mega__col ul a { display: block; padding: 0.32rem 0; font-size: 0.95rem; }
.sp-mega__all { padding: 0.5rem 0 0.15rem; } /* "Browse all" sits at the end of the panel */

/* Mobile mega accordion: each category collapses; full list inside (mobile only) */
.sp-megam { padding: 0.1rem 0 0.4rem 0.6rem; }
.sp-megam__cat { border-bottom: 1px solid var(--wp--preset--color--border, #EAF1F8); }
.sp-megam__cat:last-of-type { border-bottom: 0; }
.sp-megam__cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.25rem; font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-megam__cat > summary::-webkit-details-marker { display: none; }
.sp-megam__caret { flex: 0 0 auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.6; transition: transform .2s ease; }
.sp-megam__cat[open] > summary .sp-megam__caret { transform: rotate(180deg); }
.sp-megam__cat ul { list-style: none; margin: 0; padding: 0 0 0.5rem; }
.sp-megam__cat ul a { display: block; padding: 0.4rem 0 0.4rem 0.6rem; font-size: 0.95rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-megam__cat ul a:hover { color: var(--wp--preset--color--link, #2B61A8); }
.sp-megam__viewall a { color: var(--wp--preset--color--link, #2B61A8); font-weight: 600; font-size: 0.9rem; }
.sp-megam__all { display: block; padding: 0.7rem 0 0.15rem; font-weight: 600; color: var(--wp--preset--color--link, #2B61A8); }
/* A direct page link placed at the TOP of a mobile mega panel (e.g. Paediatric Podiatry),
   separated from the collapsible category rows below it. */
.sp-megam__all--top { padding: 0.15rem 0 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-subm { padding: 0 0 0.6rem 0.95rem; }
.sp-subm li a { display: block; padding: 0.5rem 0; font-weight: 500; }
.sp-subm__head { margin: 0.5rem 0 0.15rem; padding: 0.25rem 0; font-weight: 700; font-size: 0.92rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-subm__head:first-child { margin-top: 0; }
.sp-nav__item--cta { border-bottom: 0; padding-top: 0.7rem; }

/* ---- Desktop horizontal menu + hover dropdowns ---- */
@media (min-width: 1200px) {
	.sp-nav__tog, .sp-nav__burger { display: none; }
	.sp-nav__dtog, .sp-nav__link--toggle { display: none; } /* desktop uses the link + hover, not the toggle */
	.sp-megam { display: none !important; } /* mobile-only accordion; desktop uses the hover mega grid */
	.sp-nav__link--nav { display: flex; }
	.sp-nav__panel { display: block; position: static; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; }
	.sp-nav { gap: 0.85rem; }
	.sp-nav__list { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 0.8rem; }
	.sp-nav__item { position: relative; border: 0; }
	.sp-nav__link { padding: 0.4rem 0; font-size: 0.88rem; }
	.sp-nav__caret { border-left-width: 3px; border-right-width: 3px; border-top-width: 4px; } /* slimmer caret to save width */
	.sp-nav__item--cta { border: 0; padding: 0; margin-left: 0.3rem; } /* CTA sits inline at the end of the bar */
	.sp-nav__cta { flex-shrink: 0; padding: 0.5rem 0.95rem; font-size: 0.85rem; }

	.sp-mega, .sp-subm { display: block; position: absolute; top: 100%; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; transition-delay: .25s; z-index: 200; }

	/* Clinic Locations: small dropdown anchored to its item */
	.sp-subm { right: 0; margin-top: 0.6rem; min-width: 210px; background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; box-shadow: var(--wp--preset--shadow--lifted); padding: 0.4rem; }
	.sp-subm::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; } /* hover bridge */
	.sp-subm li a { padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.92rem; }
	.sp-subm__head { padding-left: 0.7rem; padding-right: 0.7rem; }
	.sp-subm li a:hover { background: var(--wp--preset--color--surface-soft, #F5F9FC); }

	/* Conditions mega: spans the header content width (anchored to .sp-headbar) */
	.sp-nav__item--mega { position: static; }
	.sp-mega { display: block; left: 0; right: 0; margin-top: 0.85rem; background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 14px; box-shadow: var(--wp--preset--shadow--lifted); padding: 1.6rem 1.85rem; }
	.sp-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1.6rem; height: 1.6rem; } /* hover bridge */
	.sp-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.4rem 1.5rem; }
	.sp-mega__head { margin-bottom: 0.55rem; }
	.sp-mega__col ul { display: grid; gap: 0.32rem; }
	.sp-mega__all { margin-top: 1.3rem; }

	.sp-nav__item--mega:hover > .sp-mega, .sp-nav__item--mega:focus-within > .sp-mega,
	.sp-nav__item--sub:hover > .sp-subm, .sp-nav__item--sub:focus-within > .sp-subm { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
	.sp-nav__item--mega:hover .sp-nav__caret, .sp-nav__item--sub:hover .sp-nav__caret { transform: rotate(180deg); }
}

/* Conditions tiles grid wrapper (was an inline style on /conditions/) */
.sp-condition-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }

/* Mega menu "View all <category>" row */
.sp-mega__col ul .sp-mega__viewall { margin-top: 0.35rem; }
.sp-mega__col ul .sp-mega__viewall a { color: var(--wp--preset--color--link, #2B61A8); font-weight: 600; font-size: 0.85rem; }

/* =====================================================================
 * All-conditions A-Z directory  (inc/conditions-data.php)
 * ===================================================================== */
.sp-az { max-width: 1000px; margin: 0 auto; }
.sp-az__searchbar { position: relative; max-width: 520px; margin: 0 auto 1.5rem; }
.sp-az__searchicon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--wp--preset--color--text-muted, #5F6C88); pointer-events: none; }
.sp-az__input { width: 100%; box-sizing: border-box; font-size: 1rem; font-family: var(--wp--preset--font-family--body), sans-serif; color: var(--wp--preset--color--text, #494444); background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 999px; padding: 0.8rem 1.1rem 0.8rem 2.7rem; }
.sp-az__input:focus { outline: 2px solid var(--wp--preset--color--accent, #596789); outline-offset: 1px; border-color: var(--wp--preset--color--accent, #596789); }

.sp-az__catfilter { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.5rem; font-size: 0.98rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-az__catfilter strong { color: var(--wp--preset--color--primary, #031B4E); }
.sp-az__catclear { border: 1px solid var(--wp--preset--color--border, #D8E2E8); background: #fff; border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--accent, #596789); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sp-az__catclear:hover { background: var(--wp--preset--color--surface-soft, #F5F9FC); border-color: var(--wp--preset--color--accent, #596789); }

.sp-az__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; margin: 0 0 2rem; }
.sp-az__nav a, .sp-az__nav span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.sp-az__nav a { color: var(--wp--preset--color--link, #2B61A8); }
.sp-az__nav a:hover { background: var(--wp--preset--color--surface, #fff); }
.sp-az__nav span[aria-disabled] { color: var(--wp--preset--color--border, #C9D4DE); }

.sp-az__group { margin: 0 0 2rem; scroll-margin-top: 90px; }
.sp-az__letter { font-family: var(--wp--preset--font-family--heading), sans-serif; color: var(--wp--preset--color--primary, #031B4E); font-size: 1.15rem; margin: 0 0 0.85rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--wp--preset--color--border, #D8E2E8); }

/* Individual condition cards (thumbnail + name + category) */
.sp-cond-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; }
.sp-cond-card { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.85rem; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.sp-cond-card:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--accent, #596789); box-shadow: var(--wp--preset--shadow--lifted); }
/* The search / category filter toggles the [hidden] attribute; .sp-cond-card sets
   display:flex which would otherwise override the UA [hidden] rule, so re-assert it. */
.sp-cond-card[hidden] { display: none; }
.sp-cond-card__img { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 9px; overflow: hidden; background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-cond-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cond-card__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sp-cond-card__name { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--wp--preset--color--primary, #031B4E); line-height: 1.3; }
.sp-cond-card__cat { font-size: 0.78rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-az__empty { text-align: center; color: var(--wp--preset--color--text-muted, #5F6C88); padding: 1.5rem 0; }

/* =====================================================================
 * Interactive lower-limb body map  (inc/conditions-data.php)
 * ===================================================================== */
.sp-bodymap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .sp-bodymap { grid-template-columns: 1fr; } }
.sp-bodymap__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sp-bodymap__fig { position: relative; width: 100%; max-width: 310px; margin: 0 auto; padding: 0; box-sizing: border-box; }
.sp-bodymap__leg { width: 100%; height: auto; display: block; }

.sp-bodymap__pt { position: absolute; transform: translate(-50%, -50%); z-index: 2; cursor: pointer; }
.sp-bodymap__dot { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--wp--preset--color--accent, #596789); box-shadow: 0 2px 6px rgba(3,27,78,0.18); transition: transform 0.15s ease, background 0.15s ease; }
.sp-bodymap__pt:hover .sp-bodymap__dot { transform: scale(1.15); }
.sp-bodymap__lbl { position: absolute; white-space: nowrap; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.72rem; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); background: #fff; padding: 0.12rem 0.5rem; border-radius: 6px; box-shadow: 0 1px 5px rgba(3,27,78,0.18); pointer-events: none; }
/* leader line from the dot out to the offset label (keeps labels off the limb) */
.sp-bodymap__pt::after { content: ""; position: absolute; background: var(--wp--preset--color--accent, #596789); opacity: 0.65; }
/* label to the LEFT */
.sp-bodymap__pt--dir-l .sp-bodymap__lbl { right: calc(100% + 30px); top: 50%; transform: translateY(-50%); }
.sp-bodymap__pt--dir-l::after { right: 100%; top: 50%; width: 28px; height: 1.5px; transform: translateY(-50%); }
/* label to the RIGHT */
.sp-bodymap__pt--dir-r .sp-bodymap__lbl { left: calc(100% + 30px); top: 50%; transform: translateY(-50%); }
.sp-bodymap__pt--dir-r::after { left: 100%; top: 50%; width: 28px; height: 1.5px; transform: translateY(-50%); }
/* label BELOW */
.sp-bodymap__pt--dir-d .sp-bodymap__lbl { top: calc(100% + 26px); left: 50%; transform: translateX(-50%); }
.sp-bodymap__pt--dir-d::after { top: 100%; left: 50%; width: 1.5px; height: 24px; transform: translateX(-50%); }
/* smaller, tighter labels on mobile so they do not crowd the narrower figure */
@media (max-width: 760px) {
	.sp-bodymap__lbl { font-size: 0.6rem; padding: 0.08rem 0.38rem; }
	.sp-bodymap__pt--dir-l .sp-bodymap__lbl { right: calc(100% + 20px); }
	.sp-bodymap__pt--dir-r .sp-bodymap__lbl { left: calc(100% + 20px); }
	.sp-bodymap__pt--dir-l::after, .sp-bodymap__pt--dir-r::after { width: 18px; }
	.sp-bodymap__pt--dir-d .sp-bodymap__lbl { top: calc(100% + 20px); }
	.sp-bodymap__pt--dir-d::after { height: 18px; }
}
.sp-bodymap__pt.is-empty { cursor: default; opacity: 0.45; }
.sp-bodymap__pt.is-empty .sp-bodymap__dot { border-color: var(--wp--preset--color--border, #C9D4DE); box-shadow: none; }

/* active marker (per region) */
#bm-hips:checked ~ .sp-bodymap__fig .sp-bodymap__pt--hips .sp-bodymap__dot,
#bm-thigh:checked ~ .sp-bodymap__fig .sp-bodymap__pt--thigh .sp-bodymap__dot,
#bm-knee:checked ~ .sp-bodymap__fig .sp-bodymap__pt--knee .sp-bodymap__dot,
#bm-leg:checked ~ .sp-bodymap__fig .sp-bodymap__pt--leg .sp-bodymap__dot,
#bm-ankle:checked ~ .sp-bodymap__fig .sp-bodymap__pt--ankle .sp-bodymap__dot,
#bm-heel:checked ~ .sp-bodymap__fig .sp-bodymap__pt--heel .sp-bodymap__dot,
#bm-midfoot:checked ~ .sp-bodymap__fig .sp-bodymap__pt--midfoot .sp-bodymap__dot,
#bm-forefoot:checked ~ .sp-bodymap__fig .sp-bodymap__pt--forefoot .sp-bodymap__dot {
	background: var(--wp--preset--color--accent, #596789); transform: scale(1.25);
}
#bm-hips:checked ~ .sp-bodymap__fig .sp-bodymap__pt--hips .sp-bodymap__lbl,
#bm-thigh:checked ~ .sp-bodymap__fig .sp-bodymap__pt--thigh .sp-bodymap__lbl,
#bm-knee:checked ~ .sp-bodymap__fig .sp-bodymap__pt--knee .sp-bodymap__lbl,
#bm-leg:checked ~ .sp-bodymap__fig .sp-bodymap__pt--leg .sp-bodymap__lbl,
#bm-ankle:checked ~ .sp-bodymap__fig .sp-bodymap__pt--ankle .sp-bodymap__lbl,
#bm-heel:checked ~ .sp-bodymap__fig .sp-bodymap__pt--heel .sp-bodymap__lbl,
#bm-midfoot:checked ~ .sp-bodymap__fig .sp-bodymap__pt--midfoot .sp-bodymap__lbl,
#bm-forefoot:checked ~ .sp-bodymap__fig .sp-bodymap__pt--forefoot .sp-bodymap__lbl {
	background: var(--wp--preset--color--primary, #031B4E); color: #fff;
}

/* panels */
.sp-bodymap__panels { min-height: 220px; }
.sp-bodymap__hint { color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 0.95rem; }
.sp-bodymap__radio:checked ~ .sp-bodymap__panels .sp-bodymap__hint { display: none; }
.sp-bodymap__panel { display: none; }
.sp-bodymap__panel h3 { font-family: var(--wp--preset--font-family--heading), sans-serif; color: var(--wp--preset--color--primary, #031B4E); font-size: 1.25rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-bodymap__panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.4rem 1.25rem; }
.sp-bodymap__panel li a { display: block; padding: 0.45rem 0.25rem; color: var(--wp--preset--color--primary, #031B4E); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--wp--preset--color--surface-alt, #E8ECEF); }
.sp-bodymap__panel li a:hover { color: var(--wp--preset--color--link, #2B61A8); }
#bm-hips:checked ~ .sp-bodymap__panels .sp-bodymap__panel--hips,
#bm-thigh:checked ~ .sp-bodymap__panels .sp-bodymap__panel--thigh,
#bm-knee:checked ~ .sp-bodymap__panels .sp-bodymap__panel--knee,
#bm-leg:checked ~ .sp-bodymap__panels .sp-bodymap__panel--leg,
#bm-ankle:checked ~ .sp-bodymap__panels .sp-bodymap__panel--ankle,
#bm-heel:checked ~ .sp-bodymap__panels .sp-bodymap__panel--heel,
#bm-midfoot:checked ~ .sp-bodymap__panels .sp-bodymap__panel--midfoot,
#bm-forefoot:checked ~ .sp-bodymap__panels .sp-bodymap__panel--forefoot { display: block; }

/* =====================================================================
 * Podiatrist bio pages  (inc/podiatrists.php)
 * ===================================================================== */
.sp-bio { color: var(--wp--preset--color--text, #494444); }
.sp-bio h2 { font-family: var(--wp--preset--font-family--heading), sans-serif; color: var(--wp--preset--color--primary, #031B4E); }
/* The CTA band inside a bio page sits on a dark photo; keep its heading white
   (the generic .sp-cta rule is otherwise overridden by the darker .sp-bio h2). */
.sp-bio .sp-cta-grid__intro h2, .sp-bio .sp-cta-photo h2 { color: #fff; }
.sp-bio-section { margin: 2.75rem 0; }
.sp-bio-section > h2 { font-size: 1.4rem; margin: 0 0 1rem; }

.sp-btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--primary, #031B4E); color: #fff !important; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; text-decoration: none; padding: 0.8rem 1.4rem; border-radius: 999px; border: 1.5px solid var(--wp--preset--color--primary, #031B4E); transition: background .15s ease, color .15s ease; }
.sp-btn-primary:hover { background: #fff; color: var(--wp--preset--color--primary, #031B4E) !important; }

/* HERO */
.sp-bio-hero { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: center; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 20px; padding: 2rem; }
.sp-bio-hero__media { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--wp--preset--shadow--lifted); }
.sp-bio-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-bio-hero__name { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0.2rem 0 0.4rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-bio-hero__meta { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 1.2rem; }
.sp-bio-hero__metaitem { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; font-size: 0.95rem; color: var(--wp--preset--color--text-muted, #5F6C88); text-decoration: none; line-height: 1.35; }
.sp-bio-hero__metaitem strong { color: var(--wp--preset--color--primary, #031B4E); font-weight: 600; }
.sp-bio-hero__metaitem--link:hover { color: var(--wp--preset--color--accent, #596789); }
.sp-bio-hero__metaitem--link:hover strong { text-decoration: underline; }
.sp-bio-hero__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--wp--preset--color--accent, #596789); }
.sp-bio-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.sp-bio-chip { font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 999px; padding: 0.32rem 0.8rem; }
.sp-bio-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.sp-bio-share { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; }
.sp-bio-share__label { font-size: 0.85rem; color: var(--wp--preset--color--text-muted, #5F6C88); margin-right: 0.2rem; }
.sp-bio-share a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--wp--preset--color--border, #D8E2E8); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--wp--preset--color--primary, #031B4E); text-decoration: none; background: #fff; }
.sp-bio-share a:hover { background: var(--wp--preset--color--primary, #031B4E); color: #fff; border-color: var(--wp--preset--color--primary, #031B4E); }

.sp-bio-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.sp-bio-card { background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 16px; padding: 1.5rem 1.6rem; }
.sp-bio-card h2 { font-size: 1.1rem; margin: 0 0 0.9rem; }
.sp-bio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sp-bio-list li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; line-height: 1.5; }
.sp-bio-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--accent, #596789); }
.sp-bio-list--award li::before { content: "\2605"; background: none; color: #C99A2E; top: 0; width: auto; height: auto; font-size: 0.8rem; }

.sp-bio-interest-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.sp-bio-interest { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; padding: 0.7rem 1.1rem; }
.sp-bio-muted { color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 0.92rem; margin: 0.2rem 0 1rem; }

.sp-bio-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sp-bio-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--wp--preset--color--border, #D8E2E8); }
.sp-bio-step { position: relative; padding-left: 2rem; margin-bottom: 1.3rem; }
.sp-bio-step__dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--wp--preset--color--accent, #596789); }
.sp-bio-step__place { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); margin: 0; }
.sp-bio-step__note { color: var(--wp--preset--color--text-muted, #5F6C88); margin: 0.15rem 0 0; font-size: 0.92rem; }

.sp-bio-write p { line-height: 1.7; margin: 0 0 1rem; }

.sp-bio-video { aspect-ratio: 16 / 9; border-radius: 16px; background: linear-gradient(135deg, #0a2a5e, #031B4E); display: flex; align-items: center; justify-content: center; color: #fff; }
.sp-bio-video__inner { text-align: center; }
.sp-bio-video__play { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.18); font-size: 1.3rem; margin-bottom: 0.6rem; }
.sp-bio-video p { margin: 0; opacity: 0.9; }
.sp-bio-video--live { display: block; background: #000; overflow: hidden; }
.sp-bio-video--live .sp-bio-video__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-bio-video__embed { position: relative; width: 100%; height: 100%; }
.sp-bio-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sp-bio-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.sp-bio-review { margin: 0; background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 16px; padding: 1.4rem; }
.sp-bio-stars { color: #E8A93B; letter-spacing: 1px; }
.sp-bio-review blockquote { margin: 0.6rem 0; font-size: 0.95rem; line-height: 1.6; color: var(--wp--preset--color--text, #494444); }
.sp-bio-review figcaption { font-size: 0.82rem; color: var(--wp--preset--color--text-muted, #5F6C88); font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; }


@media (max-width: 760px) {
	.sp-bio-hero { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; padding: 1.5rem; }
	.sp-bio-hero__media { max-width: 240px; margin: 0 auto; }
	.sp-bio-hero__actions { justify-content: center; }
	/* Interest chips: stack full-width on mobile so the rows are uniform (no ragged wrap). */
	.sp-bio-chips, .sp-bio-interest-grid { flex-direction: column; align-items: stretch; }
	.sp-bio-chip, .sp-bio-interest { text-align: center; }
}

.sp-podiatrist-card__more { display:inline-block; margin-top:0.7rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight:600; font-size:0.82rem; color: var(--wp--preset--color--link, #2B61A8); }
.sp-podiatrist-card:hover .sp-podiatrist-card__more { text-decoration: underline; }

/* Lead-form card reused on the bio page bottom + contact page (standardised) */
.sp-bio-formcard { max-width: 560px; margin: 0 auto; }
.sp-bio-formwrap { margin-top: 2.5rem; }

/* =====================================================================
 * "Why Straits Podiatry" accordion with image swap (front-page.html S4)
 * Desktop: image left, accordion right. Mobile: image on top, accordion below.
 * ===================================================================== */
.sp-whyacc { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem 2.5rem; align-items: start; max-width: 1100px; margin: 0 auto; }
/* Hidden accordion radios pinned to the viewport (not the accordion): tapping an item focuses
 * its radio, and a fixed 1px radio is always in view, so the browser never scrolls the page up
 * to reach it. Keeps the next item visible. Pure CSS, out of flow, no layout shift (CLS-safe). */
.sp-whyacc > input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp-whyacc__stage { position: sticky; top: 1.5rem; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); }
/* Instant swap (no cross-fade): fading two different photos over each other leaves a blended
   midpoint frame that reads as a flicker. Toggling opacity 0/1 with NO transition swaps the
   photo in a single atomic paint, so there is never a blend frame — no flicker. */
.sp-whyacc__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
#why1:checked ~ .sp-whyacc__stage .wi1,
#why2:checked ~ .sp-whyacc__stage .wi2,
#why3:checked ~ .sp-whyacc__stage .wi3,
#why4:checked ~ .sp-whyacc__stage .wi4,
#why5:checked ~ .sp-whyacc__stage .wi5,
#why6:checked ~ .sp-whyacc__stage .wi6 { opacity: 1; }
/* Nothing selected yet (all points collapsed): show the first image so the stage
   is never empty; it hides as soon as another point is opened. */
.sp-whyacc__stage .wi1 { opacity: 1; }
#why2:checked ~ .sp-whyacc__stage .wi1,
#why3:checked ~ .sp-whyacc__stage .wi1,
#why4:checked ~ .sp-whyacc__stage .wi1,
#why5:checked ~ .sp-whyacc__stage .wi1,
#why6:checked ~ .sp-whyacc__stage .wi1 { opacity: 0; }

.sp-whyacc__items { display: grid; gap: 0.6rem; }
.sp-whyacc__item { display: block; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; background: #fff; cursor: pointer; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.sp-whyacc__item:hover { border-color: var(--wp--preset--color--accent, #596789); }
.sp-whyacc__head { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; }
.sp-whyacc__head .n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--color--primary, #031B4E); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; font-size: 0.9rem; transition: background 0.15s ease, color 0.15s ease; }
.sp-whyacc__head .t { flex: 1; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); line-height: 1.35; }
.sp-whyacc__caret { flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--wp--preset--color--accent, #596789); transition: transform 0.2s ease; }
.sp-whyacc__body { display: block; max-height: 0; overflow: hidden; padding: 0 1.1rem 0 3.05rem; color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 1rem; line-height: 1.6; opacity: 0; transition: opacity 0.18s ease; }
/* Per-item image: hidden on desktop (the side stage shows it); revealed inside the open box on mobile. */
.sp-whyacc__img { display: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-top: 0.9rem; }

/* active item: body drops down, caret flips, number + border highlight */
#why1:checked ~ .sp-whyacc__items .sp-whyacc__item--1,
#why2:checked ~ .sp-whyacc__items .sp-whyacc__item--2,
#why3:checked ~ .sp-whyacc__items .sp-whyacc__item--3,
#why4:checked ~ .sp-whyacc__items .sp-whyacc__item--4,
#why5:checked ~ .sp-whyacc__items .sp-whyacc__item--5,
#why6:checked ~ .sp-whyacc__items .sp-whyacc__item--6 { border-color: var(--wp--preset--color--accent, #596789); box-shadow: inset 4px 0 0 var(--wp--preset--color--accent, #596789); }
#why1:checked ~ .sp-whyacc__items .sp-whyacc__item--1 .sp-whyacc__body,
#why2:checked ~ .sp-whyacc__items .sp-whyacc__item--2 .sp-whyacc__body,
#why3:checked ~ .sp-whyacc__items .sp-whyacc__item--3 .sp-whyacc__body,
#why4:checked ~ .sp-whyacc__items .sp-whyacc__item--4 .sp-whyacc__body,
#why5:checked ~ .sp-whyacc__items .sp-whyacc__item--5 .sp-whyacc__body,
#why6:checked ~ .sp-whyacc__items .sp-whyacc__item--6 .sp-whyacc__body { max-height: 320px; padding-bottom: 1.05rem; opacity: 1; }
#why1:checked ~ .sp-whyacc__items .sp-whyacc__item--1 .n,
#why2:checked ~ .sp-whyacc__items .sp-whyacc__item--2 .n,
#why3:checked ~ .sp-whyacc__items .sp-whyacc__item--3 .n,
#why4:checked ~ .sp-whyacc__items .sp-whyacc__item--4 .n,
#why5:checked ~ .sp-whyacc__items .sp-whyacc__item--5 .n,
#why6:checked ~ .sp-whyacc__items .sp-whyacc__item--6 .n { background: var(--wp--preset--color--primary, #031B4E); color: #fff; }
#why1:checked ~ .sp-whyacc__items .sp-whyacc__item--1 .sp-whyacc__caret,
#why2:checked ~ .sp-whyacc__items .sp-whyacc__item--2 .sp-whyacc__caret,
#why3:checked ~ .sp-whyacc__items .sp-whyacc__item--3 .sp-whyacc__caret,
#why4:checked ~ .sp-whyacc__items .sp-whyacc__item--4 .sp-whyacc__caret,
#why5:checked ~ .sp-whyacc__items .sp-whyacc__item--5 .sp-whyacc__caret,
#why6:checked ~ .sp-whyacc__items .sp-whyacc__item--6 .sp-whyacc__caret { transform: rotate(180deg); }

@media (max-width: 760px) {
	/* On mobile the shared top stage is hidden and each item reveals its own image
	   inside the open box, so the photo travels with the content instead of being
	   scrolled away at the top of the section. */
	.sp-whyacc { grid-template-columns: 1fr; gap: 1rem; }
	.sp-whyacc__stage { display: none; }
	.sp-whyacc__body { font-size: 0.95rem; }
	.sp-whyacc__img { display: block; }
	/* Open box must be tall enough for text plus the inline image. */
	#why1:checked ~ .sp-whyacc__items .sp-whyacc__item--1 .sp-whyacc__body,
	#why2:checked ~ .sp-whyacc__items .sp-whyacc__item--2 .sp-whyacc__body,
	#why3:checked ~ .sp-whyacc__items .sp-whyacc__item--3 .sp-whyacc__body,
	#why4:checked ~ .sp-whyacc__items .sp-whyacc__item--4 .sp-whyacc__body,
	#why5:checked ~ .sp-whyacc__items .sp-whyacc__item--5 .sp-whyacc__body,
	#why6:checked ~ .sp-whyacc__items .sp-whyacc__item--6 .sp-whyacc__body { max-height: 900px; }
}

/* Reusable accordion (.sp-acc) — same visual language as the homepage .sp-whyacc
   items (numbered badge, caret, reveal) but driven by native <details> so it can
   appear multiple times on one page and pairs with a static photo in an sp-split. */
.sp-acc { display: grid; gap: 0.6rem; counter-reset: spacc; }
.sp-acc > details { border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.sp-acc > details:hover { border-color: var(--wp--preset--color--accent, #596789); }
.sp-acc > details[open] { border-color: var(--wp--preset--color--accent, #596789); box-shadow: inset 4px 0 0 var(--wp--preset--color--accent, #596789); }
.sp-acc > details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); line-height: 1.35; }
.sp-acc > details > summary::-webkit-details-marker { display: none; }
.sp-acc > details > summary::before { counter-increment: spacc; content: counter(spacc); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--color--primary, #031B4E); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; font-size: 0.9rem; }
.sp-acc > details > summary::after { content: ""; margin-left: auto; flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--wp--preset--color--accent, #596789); transition: transform 0.2s ease; }
.sp-acc > details[open] > summary::after { transform: rotate(180deg); }
.sp-acc > details > div { padding: 0 1.1rem 1.05rem 3.05rem; color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 1rem; line-height: 1.6; }
.sp-acc > details > div p { margin: 0; }
.sp-acc > details > div p + p { margin-top: 0.75rem; }
/* The paired photo keeps the standard 4:3 split-media shape (matches the homepage
   Why-Choose image). It is TOP-anchored (not vertically centred) so opening or closing
   an accordion item, which changes the column height, never re-centres and therefore
   never shifts or flickers the image. Its size is fixed by the 4:3 aspect ratio
   (width-driven), independent of the accordion. */
.sp-acc-split .sp-split__media { align-self: start; }

/* Mobile: podiatrist cards go horizontal (photo left, text right) so four cards
   take far less vertical space and the page stays short. */
@media (max-width: 600px) {
	.sp-team-grid { grid-template-columns: 1fr; gap: 0.85rem; }
	.sp-podiatrist-card { display: grid; grid-template-columns: 86px 1fr; column-gap: 1.1rem; text-align: left; padding: 1.1rem 1.25rem; align-items: start; }
	.sp-podiatrist-card__portrait { grid-column: 1; grid-row: 1 / span 5; align-self: center; width: 86px; height: 86px; margin: 0; }
	.sp-podiatrist-card > :not(.sp-podiatrist-card__portrait) { grid-column: 2; }
	.sp-podiatrist-card h3 { margin: 0; }
	.sp-podiatrist-card__role { margin-bottom: 0.1rem; }
	.sp-podiatrist-card__clinic { margin-bottom: 0.4rem; }
	.sp-podiatrist-card p { margin: 0 0 0.4rem; }
	.sp-podiatrist-card__more { margin-top: 0; }
}

/* "Who our podiatrists help" — collapsible profile rows (scannable, less wordy) */
.sp-profiles { display: grid; gap: 0.5rem; }
.sp-profile { border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; background: #fff; overflow: hidden; }
.sp-profile > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); line-height: 1.4; }
.sp-profile > summary::-webkit-details-marker { display: none; }
.sp-profile > summary::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--wp--preset--color--accent, #596789); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z"/></svg>') center / 14px no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z"/></svg>') center / 14px no-repeat; }
.sp-profile > summary::after { content: ""; margin-left: auto; flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--wp--preset--color--accent, #596789); transition: transform 0.2s ease; }
.sp-profile[open] > summary::after { transform: rotate(180deg); }
.sp-profile__body { padding: 0 1rem 0.95rem 2.7rem; color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 0.97rem; line-height: 1.6; margin: 0; }

/* ---- Prices page ---- */
.sp-pricing__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 760px) { .sp-pricing__grid { grid-template-columns: 1fr; } }
.sp-price-cat { background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; padding: 1.4rem 1.5rem; }
.sp-price-cat h3 { margin: 0 0 0.3rem; font-size: 1.1rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-price-list { list-style: none; margin: 0; padding: 0; }
.sp-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-price-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-price-row:first-child { padding-top: 0.4rem; }
.sp-price-row__name { color: var(--wp--preset--color--text, #494444); line-height: 1.45; }
.sp-price-row__name em { display: block; font-style: normal; font-size: 0.8rem; color: var(--wp--preset--color--text-muted, #5F6C88); margin-top: 0.15rem; }
.sp-price-row__fee { flex-shrink: 0; text-align: right; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; color: var(--wp--preset--color--primary, #031B4E); white-space: nowrap; }
.sp-price-row__fee small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--wp--preset--color--text-muted, #5F6C88); white-space: normal; }
.sp-paychips { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.sp-paychips li { font-size: 0.85rem; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 8px; padding: 0.45rem 0.6rem; color: var(--wp--preset--color--text, #494444); text-align: center; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .sp-paychips { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
/* Accepted methods as a categorised bullet list (owner 2026-06-30). */
.sp-paycats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 0.75rem; }
.sp-paycat h4 { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-paycat ul { margin: 0; padding-left: 1.15rem; list-style: disc; }
.sp-paycat li { font-size: 0.9rem; margin-bottom: 0.2rem; color: var(--wp--preset--color--text, #494444); }
@media (max-width: 520px) { .sp-paycats { grid-template-columns: 1fr; } }
.sp-price-note { font-size: 0.95rem; color: var(--wp--preset--color--text-muted, #5F6C88); line-height: 1.65; }
.sp-price-row__fee--enquire { font-size: 0.82rem; }
.sp-price-goodtoknow { margin-top: 1.25rem; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-left: 3px solid var(--wp--preset--color--accent, #1F7A8C); border-radius: 12px; padding: 1.1rem 1.4rem 1.2rem; }
.sp-price-goodtoknow h3 { margin: 0 0 0.45rem; font-size: 1rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-price-goodtoknow ul { margin: 0; padding-left: 1.15rem; }
.sp-price-goodtoknow li { color: var(--wp--preset--color--text-muted, #5F6C88); line-height: 1.6; margin: 0.25rem 0; }
.sp-price-hero, .sp-story-hero, .sp-glossary-hero { align-items: center; }
.sp-price-hero__h1, .sp-story-hero__h1, .sp-glossary-hero__h1 { margin: 0.4rem 0 1rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.2; color: var(--wp--preset--color--primary, #031B4E); }

/* Video placeholder (sits in an sp-split__media slot; swap inner markup for a
   real <iframe>/embed when the video is ready) */
/* Video sits in a split media slot but supplies its own 16:9 box, so strip the
 * slot's imposed 4:3 aspect / shadow / radius (was leaving an empty box below). */
.sp-split__media--video { aspect-ratio: auto; box-shadow: none; border-radius: 0; overflow: visible; }
.sp-video { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); display: grid; place-items: center; }
.sp-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3, 27, 78, 0.25), rgba(3, 27, 78, 0.55)); }
.sp-video__play { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(3, 27, 78, 0.32); }
.sp-video__play svg { width: 30px; height: 30px; margin-left: 3px; fill: var(--wp--preset--color--primary, #031B4E); }
.sp-video__tag { position: absolute; z-index: 2; top: 0.85rem; left: 0.85rem; background: rgba(255, 255, 255, 0.92); color: var(--wp--preset--color--primary, #031B4E); font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.28rem 0.6rem; border-radius: 999px; }
.sp-video__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.1rem 0.9rem; color: #fff; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.95rem; background: linear-gradient(0deg, rgba(3, 27, 78, 0.7), transparent); }
.sp-video__cap em { font-style: normal; font-weight: 400; opacity: 0.85; }
/* Real YouTube embed variant: fill the 16/9 frame, drop the placeholder overlay/play. */
.sp-video--embed { display: block; background: #000; border: 0; }
.sp-video--embed::before { display: none; }
.sp-video--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Contact page: icon contact-method cards */
.sp-contact-card { padding: 1.6rem 1.5rem; }
.sp-contact-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(3, 27, 78, 0.06); color: var(--wp--preset--color--primary, #031B4E); margin-bottom: 0.9rem; }
.sp-contact-card__icon svg { width: 24px; height: 24px; }
.sp-contact-card h3 { margin: 0.4rem 0 0.5rem; font-size: 1.15rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-contact-card h3 a { color: inherit; text-decoration: none; }
.sp-contact-card h3 a:hover { color: var(--wp--preset--color--link, #2B61A8); }
.sp-contact-card__note { color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 0.9rem; margin: 0; line-height: 1.5; }

/* FAQ page: category jump-nav (chips) + category headings */
/* FAQ category filter chips — matches the treatment-glossary .sp-catchips look,
 * sitting inside the hero below the split. */
.sp-faqnav, .sp-pricenav { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; max-width: 880px; margin: 1.75rem auto 0; }
.sp-faqnav svg, .sp-pricenav svg { width: 18px; height: 18px; flex-shrink: 0; }
.sp-faqnav a, .sp-pricenav a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #D8E2E8); font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--primary, #031B4E); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.sp-faqnav a:hover, .sp-pricenav a:hover { border-color: var(--wp--preset--color--accent, #596789); background: var(--wp--preset--color--surface-soft, #F5F9FC); transform: translateY(-1px); }
.sp-pricepage [id^="price-"] { scroll-margin-top: 1.75rem; }
/* Pagination dots for the chip-filter carousels (mobile only; built by theme.js).
 * Shared by the prices filter (.sp-pricenav) and the treatment glossary (.sp-catchips). */
.sp-chipdots { display: none; justify-content: center; gap: 0.45rem; margin: 0.85rem auto 0; }
.sp-chipdots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--wp--preset--color--border, #D8E2E8); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background 0.15s ease, transform 0.15s ease; }
.sp-chipdots button.is-active { background: var(--wp--preset--color--accent, #596789); transform: scale(1.4); }
.sp-faqcat { scroll-margin-top: 1.5rem; margin: 2.75rem 0 1rem; font-size: 1.35rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-faqcat:first-of-type { margin-top: 0; }

/* Inline check-list (used inside split text columns, e.g. physiotherapy) */
.sp-checklist { list-style: none; margin: 1.1rem 0 1.25rem; padding: 0; display: grid; gap: 0.6rem; }
.sp-checklist li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--wp--preset--color--text); line-height: 1.5; }
.sp-checklist li svg { flex-shrink: 0; margin-top: 0.2rem; }

/* Static (non-link) feature card: same look, no clickable hover-lift */
.sp-feature-card--static { cursor: default; }
.sp-feature-card--static:hover { transform: none; box-shadow: var(--wp--preset--shadow--medium); }

/* Signs checklist grouped in a soft card (keeps a contained, intentional width
   instead of spanning edge-to-edge) */
/* The signs section sits in a wp:html-heavy group whose constrained contentSize
 * does not reach its children; constrain them here so the intro/closing copy and
 * the card all line up at the same width instead of running full-bleed. */
.sp-signs-section > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.sp-signs-card { background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 16px; padding: 1.75rem 1.9rem; max-width: 880px; margin-left: auto; margin-right: auto; }
.sp-signs-card .sp-signs-grid { gap: 0.85rem 2rem; }
@media (max-width: 600px) { .sp-signs-card { padding: 1.3rem 1.25rem; } }

/* Four pillars of care */
.sp-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2rem; }
.sp-pillar { background: var(--wp--preset--color--surface, #fff); border: 1px solid rgba(3, 27, 78, 0.08); border-radius: 16px; padding: 1.6rem 1.4rem; }
.sp-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(3, 27, 78, 0.06); color: var(--wp--preset--color--primary, #031B4E); margin-bottom: 0.95rem; }
.sp-pillar__icon svg { width: 24px; height: 24px; }
.sp-pillar h3 { margin: 0 0 0.4rem; font-size: 1.12rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-pillar p { margin: 0; color: var(--wp--preset--color--text-muted, #5F6C88); font-size: 0.94rem; line-height: 1.6; }
@media (max-width: 900px) { .sp-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sp-pillars { grid-template-columns: 1fr; } }

/* Our Story photo gallery (mosaic) */
.sp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; gap: 0.9rem; grid-auto-flow: dense; }
.sp-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .sp-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; } }
/* Mobile: horizontal swipe carousel instead of a stacked grid. */
@media (max-width: 600px) {
	.sp-gallery { display: flex; grid-template-columns: none; grid-auto-rows: auto; grid-auto-flow: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; scroll-padding-left: 1.5rem; -webkit-overflow-scrolling: touch; }
	.sp-gallery figure { flex: 0 0 80%; scroll-snap-align: center; aspect-ratio: 4 / 3; }
	.sp-gallery figure:first-child { grid-column: auto; grid-row: auto; }
}

/* Treatments hero — category scroll-link chips */
.sp-catchips { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; max-width: 880px; margin: 1.75rem auto 0; }
.sp-catchips a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #D8E2E8); font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--primary, #031B4E); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.sp-catchips a:hover { border-color: var(--wp--preset--color--accent, #596789); background: var(--wp--preset--color--surface-soft, #F5F9FC); transform: translateY(-1px); }
.sp-catchips svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Mobile chip-filter carousel. Declared AFTER the .sp-pricenav and .sp-catchips
 * base rules above so it overrides them at <=600px (media queries add no
 * specificity, so source order decides between equal-specificity selectors). */
@media (max-width: 600px) {
	.sp-pricenav, .sp-catchips { flex-wrap: nowrap; justify-content: flex-start; max-width: none; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 1.25rem; padding-bottom: 0.15rem; }
	.sp-pricenav::-webkit-scrollbar, .sp-catchips::-webkit-scrollbar { display: none; }
	.sp-pricenav a, .sp-catchips a { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
	.sp-chipdots { display: flex; }
}
html { scroll-behavior: smooth; }
.sp-treatcat { scroll-margin-top: 90px; }

/* ---- Blog single ---- */
.sp-blog-hero__meta { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-blog-hero__meta time { white-space: nowrap; }
/* Suggested reading sits in the sidebar below the lead-form card. */
.sp-blog-related { margin-top: 1.25rem; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 14px; padding: 1.25rem 1.35rem; }
.sp-blog-related__title { margin: 0 0 0.9rem; font-size: 1.05rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-blog-rel { display: grid; grid-template-columns: 72px 1fr; gap: 0.8rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); text-decoration: none; }
.sp-blog-rel:first-of-type { border-top: 0; padding-top: 0; }
.sp-blog-rel__img { display: block; width: 72px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-blog-rel__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-blog-rel__body { display: block; }
.sp-blog-rel__t { display: block; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.9rem; line-height: 1.3; color: var(--wp--preset--color--primary, #031B4E); }
.sp-blog-rel:hover .sp-blog-rel__t { color: var(--wp--preset--color--accent, #596789); }
.sp-blog-rel__d { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--wp--preset--color--text-muted, #5F6C88); }

/* ---- Blog index (/blog/) ---- */
.sp-blogidx { max-width: 1180px; margin: 0 auto; }
.sp-blogidx__head { text-align: center; max-width: 640px; margin: 0 auto 1.75rem; }
.sp-blogidx__head h1 { margin: 0.3rem 0 0.6rem; }
.sp-blogidx__intro { color: var(--wp--preset--color--text-muted, #5F6C88); margin: 0; }
.sp-blogidx__tools { position: sticky; top: 0; z-index: 5; background: var(--wp--preset--color--surface, #fff); padding: 1rem 0 0.85rem; margin-bottom: 1.5rem; }
.sp-blogidx__search { position: relative; max-width: 560px; margin: 0 auto 1rem; }
.sp-blogidx__search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--wp--preset--color--text-muted, #5F6C88); pointer-events: none; }
.sp-blogidx__search input { width: 100%; box-sizing: border-box; padding: 0.8rem 1rem 0.8rem 2.7rem; border: 1.5px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 999px; font-size: 1rem; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.sp-blogidx__search input:focus { outline: none; border-color: var(--wp--preset--color--accent, #596789); box-shadow: 0 0 0 3px rgba(89,103,137,0.15); }
.sp-blogidx__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.sp-chip { cursor: pointer; font: inherit; font-size: 0.85rem; background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 999px; padding: 0.35rem 0.85rem; color: var(--wp--preset--color--text, #494444); display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.15s ease; }
.sp-chip span { font-size: 0.75rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-chip:hover { border-color: var(--wp--preset--color--accent, #596789); }
.sp-chip.is-active { background: var(--wp--preset--color--primary, #031B4E); border-color: var(--wp--preset--color--primary, #031B4E); color: #fff; }
.sp-chip.is-active span { color: rgba(255,255,255,0.7); }
.sp-blogidx__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .sp-blogidx__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sp-blogidx__grid { grid-template-columns: 1fr; } }
.sp-blogcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.sp-blogcard:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--accent, #596789); box-shadow: var(--wp--preset--shadow--medium); }
.sp-blogcard__img { display: block; aspect-ratio: 16 / 10; background: var(--wp--preset--color--surface-soft, #F5F9FC); overflow: hidden; }
.sp-blogcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-blogcard__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.sp-blogcard__topic { align-self: flex-start; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--accent, #596789); background: var(--wp--preset--color--surface-soft, #F5F9FC); border-radius: 999px; padding: 0.2rem 0.65rem; }
.sp-blogcard__title { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--wp--preset--color--primary, #031B4E); }
.sp-blogcard__date { font-size: 0.78rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-blogcard__exc { font-size: 0.9rem; line-height: 1.55; color: var(--wp--preset--color--text-muted, #5F6C88); margin-top: 0.1rem; }
.sp-blogidx__none { text-align: center; color: var(--wp--preset--color--text-muted, #5F6C88); padding: 2.5rem 0; font-size: 1.05rem; }
.sp-blogidx__pager { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 2.25rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sp-blogidx__pager::-webkit-scrollbar { display: none; }
.sp-blogidx__pager:empty { display: none; }
.sp-page-btn { flex: 0 0 auto; min-width: 40px; height: 40px; padding: 0 0.6rem; border: 1px solid var(--wp--preset--color--border, #D8E2E8); background: #fff; color: var(--wp--preset--color--primary, #031B4E); border-radius: 8px; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.95rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.sp-page-btn:hover:not([disabled]):not(.is-active) { background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-page-btn.is-active { background: var(--wp--preset--color--primary, #031B4E); color: #fff; border-color: var(--wp--preset--color--primary, #031B4E); }
.sp-page-btn[disabled] { opacity: 0.4; cursor: default; }
.sp-page-ell { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 0.1rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
@media (max-width: 560px) { .sp-blogidx__pager { gap: 0.3rem; } .sp-page-btn { min-width: 34px; height: 36px; padding: 0 0.35rem; font-size: 0.9rem; } }
/* Topic dropdown — fully themed (mobile only; chips shown on desktop) */
.sp-blogidx__dd { display: none; position: relative; max-width: 560px; margin: 0 auto; }
.sp-blogidx__dd-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1.1rem; border: 1.5px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 999px; background: #fff; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--primary, #031B4E); cursor: pointer; }
.sp-blogidx__dd-btn svg { width: 16px; height: 16px; color: var(--wp--preset--color--text-muted, #5F6C88); flex-shrink: 0; transition: transform 0.15s ease; }
.sp-blogidx__dd-btn[aria-expanded="true"] { border-color: var(--wp--preset--color--accent, #596789); box-shadow: 0 0 0 3px rgba(89,103,137,0.15); }
.sp-blogidx__dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sp-blogidx__dd-menu { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 14px; box-shadow: var(--wp--preset--shadow--medium); padding: 0.4rem; max-height: 320px; overflow-y: auto; }
.sp-blogidx__dd-opt { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border: 0; background: transparent; border-radius: 9px; font: inherit; font-size: 0.92rem; color: var(--wp--preset--color--text, #494444); cursor: pointer; }
.sp-blogidx__dd-opt span { font-size: 0.78rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-blogidx__dd-opt:hover { background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-blogidx__dd-opt.is-active { background: var(--wp--preset--color--primary, #031B4E); color: #fff; }
.sp-blogidx__dd-opt.is-active span { color: rgba(255,255,255,0.7); }
/* EEAT author box at the end of a blog article */
.sp-blog-author { display: grid; grid-template-columns: 84px 1fr; gap: 1.25rem; align-items: start; margin: 2.5rem 0 0; padding: 1.5rem; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 16px; }
.sp-blog-author__media { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #fff; }
.sp-blog-author__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-blog-author__by { margin: 0 0 0.15rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent, #596789); }
.sp-blog-author__name { margin: 0 0 0.2rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; font-size: 1.15rem; }
.sp-blog-author__name a { color: var(--wp--preset--color--primary, #031B4E); text-decoration: none; }
.sp-blog-author__name a:hover { color: var(--wp--preset--color--accent, #596789); }
.sp-blog-author__role { margin: 0 0 0.55rem; font-size: 0.85rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-blog-author__bio { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.6; color: var(--wp--preset--color--text, #494444); }
.sp-blog-author__link { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--accent, #596789); text-decoration: none; }
@media (max-width: 560px) { .sp-blog-author { grid-template-columns: 1fr; gap: 0.9rem; text-align: left; } .sp-blog-author__media { width: 72px; height: 72px; } }

/* ---- Treatments archive (/treatments/) ---- */
.sp-treatarchive { max-width: 1080px; margin: 0 auto; }
.sp-treatcat { margin-bottom: 2.75rem; }
.sp-treatcat:last-child { margin-bottom: 0; }
.sp-treatcat h2 { margin: 0 0 0.35rem; }
.sp-treatcat__intro { margin: 0 0 1.35rem; color: var(--wp--preset--color--text-muted, #5F6C88); max-width: 720px; line-height: 1.6; }
.sp-treat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (max-width: 700px) { .sp-treat-grid { grid-template-columns: 1fr; } }
.sp-treatcard { position: relative; display: flex; align-items: center; gap: 1rem; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; padding: 1rem 1.1rem; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.sp-treatcard__cover { position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.sp-treatcard__media { flex: 0 0 auto; width: 84px; height: 84px; margin: 0; overflow: hidden; border-radius: 10px; background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-treatcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-treatcard__body { min-width: 0; }
.sp-treatcard h3 { margin: 0 0 0.25rem; font-size: 1.05rem; line-height: 1.3; color: var(--wp--preset--color--primary, #031B4E); }
.sp-treatcard p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-treatcard--link:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--accent, #596789); box-shadow: var(--wp--preset--shadow--medium); }
.sp-treatcard__more { display: inline-block; margin-top: 0.45rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--wp--preset--color--accent, #596789); }
.sp-treatcard--plain { background: var(--wp--preset--color--surface-soft, #F5F9FC); }

/* ---- Physiotherapy page ---- */
.sp-physio-bio__meta { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-physio-bio__meta strong { color: var(--wp--preset--color--primary, #031B4E); }
.sp-physio-steps { list-style: none; counter-reset: step; padding: 0; max-width: 720px; margin: 0 auto; }
.sp-physio-steps li { position: relative; counter-increment: step; padding: 0.1rem 0 1.3rem 3.1rem; line-height: 1.6; color: var(--wp--preset--color--text, #494444); }
.sp-physio-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--wp--preset--color--primary, #031B4E); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; font-size: 0.9rem; }
.sp-physio-steps li:last-child { padding-bottom: 0; }
@media (max-width: 600px) {
	.sp-blogidx__chips { display: none; }
	.sp-blogidx__dd { display: block; }
	.sp-blogidx__grid { gap: 0.8rem; }
	/* Wide-and-short cards: photo left, text right, no excerpt — far less scrolling. */
	.sp-blogcard { flex-direction: row; align-items: stretch; min-height: 90px; }
	.sp-blogcard__img { width: 112px; flex-shrink: 0; aspect-ratio: auto; height: auto; }
	.sp-blogcard__body { padding: 0.7rem 0.9rem; gap: 0.25rem; justify-content: center; }
	.sp-blogcard__exc { display: none; }
	.sp-blogcard__topic { font-size: 0.62rem; padding: 0.15rem 0.5rem; }
	.sp-blogcard__title { font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Language switcher — segmented EN | 中文 toggle (bilingual). Active = filled. */
.sp-langswitch { display:inline-flex; align-items:center; border:1px solid var(--wp--preset--color--border,#D8E2E8); border-radius:999px; overflow:hidden; line-height:1; font-family:var(--wp--preset--font-family--heading),sans-serif; font-weight:600; font-size:0.82rem; }
.sp-langswitch__opt { display:inline-flex; align-items:center; white-space:nowrap; padding:0.42rem 0.82rem; color:var(--wp--preset--color--primary,#031B4E); text-decoration:none; transition:background .15s ease,color .15s ease; }
.sp-langswitch__opt:hover { background:var(--wp--preset--color--surface-soft,#F5F9FC); }
.sp-langswitch__opt.is-active { background:var(--wp--preset--color--primary,#031B4E); color:#fff; cursor:default; }
/* The shortcode block wraps the switcher in a <p>; align it in the header bar. */
.sp-headbar > p { margin:0; display:flex; align-items:center; }
.sp-headbar > p:empty { display:none; }
/* Desktop: the header's space-between would fling the switcher into the far
 * corner, isolated from the nav. Give the logo the auto margin instead so it
 * absorbs the free space and the nav + switcher cluster together on the right,
 * with the switcher sitting a short gap after the Book Online button. */
@media (min-width:1100px){
	.sp-headbar > .wp-block-site-logo { margin-right:auto; }
	.sp-headbar > p { margin-left:0.85rem; }
}
/* Mobile: hamburger stays furthest right, switcher to its left. */
@media (max-width:1099px){
	.sp-headbar > p { order:1; }
	.sp-headbar .sp-nav { order:2; }
}

/* In-body blog image (blog photo "2"), inserted after the first H2 section. */
.sp-blog-inline-img { margin: 1.75rem 0; }
.sp-blog-inline-img img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Footer social icon row (About column, below phone/email). */
.sp-footer-social { display: flex; gap: 0.85rem; margin-top: 1rem; }
.sp-footer-social a { display: inline-flex; color: var(--wp--preset--color--surface, #FFFFFF); opacity: 0.8; transition: opacity 0.15s ease; }
.sp-footer-social a:hover { opacity: 1; }
.sp-footer-social svg { width: 22px; height: 22px; fill: currentColor; }