/*
Theme Name: Armstrong Hand & Wrist Surgery
Theme URI: https://handprocedures.com
Author: Dan Armstrong
Description: Custom theme for a consultant hand and wrist surgery practice. Responsive, with editable Conditions and Treatments.
Version: 2.7.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ahw
*/

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */

:root {
	--teal:        #0a6360;
	--teal-dark:   #084c4a;
	--teal-darker: #063b39;
	--teal-light:  #e6f0ef;
	--accent:      #f2e3bf;
	--accent-dark: #e3cf9e;
	--ink:         #16232c;
	--body:        #3d4d56;
	--muted:       #6b7a82;
	--line:        #e2ebe9;
	--bg:          #ffffff;
	--bg-soft:     #f4f8f7;

	--font-head: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--wrap: 1200px;
	--radius: 4px;
	--radius-lg: 8px;
	--shadow: 0 1px 3px rgba(22, 35, 44, .06), 0 6px 20px rgba(22, 35, 44, .05);
	--shadow-lift: 0 4px 10px rgba(22, 35, 44, .09), 0 12px 32px rgba(22, 35, 44, .08);
	--transition: .18s ease;
}

/* -------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-dark); text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	color: var(--ink);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--teal);
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
}
.skip-link:focus { left: 0; }

.container {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
	width: 100%;
}

.icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--teal);
	color: #fff;
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	padding: 15px 26px;
	border: 1px solid var(--teal);
	border-radius: var(--radius);
	cursor: pointer;
	text-align: center;
	transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover {
	background: var(--teal-dark);
	border-color: var(--teal-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.btn-outline { background: transparent; color: var(--teal); border-color: var(--line); }
.btn-outline:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--teal-darker); }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--teal-darker); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: #fff; color: var(--teal-dark); border-color: #fff; }

.btn-sm { padding: 11px 18px; font-size: .85rem; }
.btn-block { display: flex; width: 100%; }

/* -------------------------------------------------------------
   4. Utility bar
   ------------------------------------------------------------- */

.utility-bar {
	background: var(--teal-darker);
	color: rgba(255,255,255,.9);
	font-size: .85rem;
}

.utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding-block: 6px;
	flex-wrap: wrap;
}

.utility-strapline { margin: 0; letter-spacing: .01em; }

.utility-contact {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.utility-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.9);
}
.utility-link:hover { color: #fff; text-decoration: none; }
.utility-link .icon { width: 15px; height: 15px; }

/* -------------------------------------------------------------
   5. Header and navigation
   ------------------------------------------------------------- */

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 78px;
	position: relative;
}

/* The branding must never be squeezed by a long navigation — without this,
   flexbox shrinks it, the site name wraps onto two lines, and the menu
   overlaps the logo. */
.site-branding {
	flex: 0 0 auto;
	min-width: 0;
}

.logo-text { display: inline-flex; align-items: center; gap: 12px; }
.logo-text:hover { text-decoration: none; }

.logo-mark {
	display: grid;
	place-items: center;
	height: 44px;
	color: var(--teal);
	flex: 0 0 auto;
}
.logo-mark .icon { width: 34px; height: 34px; stroke-width: 1.3; }

/* Brand mark — the original Illustrator artwork, in its original orientation.
   Wider than it is tall (roughly 4:3). Heights are chosen so the original
   hairline stroke still lands on at least one device pixel. */
.brand-mark {
	height: 44px;
	width: auto;
	display: block;
	overflow: visible;
}
.logo-text--footer .brand-mark { height: 42px; }

@media (max-width: 820px) {
	.logo-mark { height: 38px; }
	.brand-mark { height: 38px; }
	.logo-words strong { font-size: 1.1rem; }
	.logo-words em { font-size: .6rem; letter-spacing: .14em; }
}

.logo-words { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo-words strong {
	font-family: var(--font-head);
	font-size: 1.24rem;
	font-weight: 400;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--teal-darker);
	white-space: nowrap;      /* never break the practice name across two lines */
}
.logo-words em {
	font-style: normal;
	font-size: .68rem;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 3px;
}

.custom-logo-link img { max-height: 56px; width: auto; }

.nav-list {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;          /* wrap onto a second line rather than overlap the logo */
	gap: 8px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav { min-width: 0; }

.nav-list a {
	color: var(--ink);
	font-size: .93rem;
	font-weight: 500;
	padding-block: 8px;
	position: relative;
	white-space: nowrap;
}
.nav-list a:hover { color: var(--teal); text-decoration: none; }

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a { color: var(--teal); }
.nav-list .current-menu-item > a::after,
.nav-list .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--teal);
}

/* Dropdowns */
.nav-list li { position: relative; }
.nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
	list-style: none;
	margin: 0;
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-list .sub-menu a {
	display: block;
	padding: 9px 18px;
	white-space: normal;
}
.nav-list .sub-menu a:hover { background: var(--bg-soft); }

.nav-toggle-label { display: none; }
.nav-mobile-extras { display: none; }

/* -------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--teal-darker);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
}

/* Darkening wash for legibility — only when there is a photograph behind the
   text. Without a photo it tints the hero unevenly, and the portrait's flat
   edge-fade then shows up as a rectangle against the graded background. */
.hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(6,40,39,.95) 0%, rgba(6,40,39,.86) 42%, rgba(6,40,39,.42) 72%, rgba(6,40,39,.25) 100%);
}

.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: 40px;
	min-height: 480px;
	padding-block: 72px;
}

.hero-eyebrow {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #7fd4cd;
	margin: 0 0 14px;
}

.hero h1 { color: #fff; margin: 0 0 26px; }

.hero-rule {
	width: 64px;
	height: 3px;
	background: #7fd4cd;
	border: 0;
	margin: 0 0 26px;
}

.hero-text {
	font-size: 1.06rem;
	color: rgba(255,255,255,.9);
	max-width: 46ch;
	margin: 0 0 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero portrait — a photograph standing on the right of the hero, with its
   edges dissolved into the teal so a rectangular photo reads as part of the
   band rather than a pasted-on box. Works with an ordinary photo; works even
   better with a transparent cut-out. */
.hero-portrait {
	position: relative;
	justify-self: end;
	align-self: stretch;
	width: 100%;
	max-width: 560px;
	min-height: 420px;
	overflow: hidden;
}
.hero-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;   /* keep the face, lose the shoes */
}
.hero-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Fade all four edges into the hero so no rectangle boundary is visible.
	   Left is the strongest because the headline sits that side; top and right
	   are gentle so they dissolve the edge without washing out the face. */
	background:
		linear-gradient(to right,  var(--teal-darker) 0%, rgba(6,59,57,0) 46%),
		linear-gradient(to left,   var(--teal-darker) 0%, rgba(6,59,57,0) 20%),
		linear-gradient(to top,    var(--teal-darker) 0%, rgba(6,59,57,0) 18%),
		linear-gradient(to bottom, var(--teal-darker) 0%, rgba(6,59,57,0) 22%);
}

/* If a portrait photo is used as the full-bleed background instead, at least
   favour the top of the frame so faces survive the crop. */
.hero-bg { background-position: center 22%; }

/* -------------------------------------------------------------
   7. Sections
   ------------------------------------------------------------- */

.section { padding-block: 76px; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: 54px; }

.section-head { margin-bottom: 42px; max-width: 60ch; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--muted); margin: 0; }

.section-rule {
	width: 56px;
	height: 3px;
	background: var(--teal);
	border: 0;
	margin: 0 0 20px;
}

/* Value propositions */
.features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
}

.feature-icon {
	color: var(--teal);
	margin-bottom: 14px;
}
.feature-icon .icon { width: 32px; height: 32px; stroke-width: 1.3; }

.feature h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.feature p { font-size: .92rem; color: var(--muted); margin: 0; }

/* About split */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
}
.split-media img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	width: 100%;
	aspect-ratio: 4 / 5;          /* keeps a tall portrait from dwarfing the copy */
	max-height: 560px;
	object-fit: cover;
	object-position: center 20%;  /* bias towards the face, not the chest */
}

/* Narrower copy column when the right side holds a row of cards */
.split--info { grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr); gap: 44px; align-items: start; }

/* -------------------------------------------------------------
   8. Condition / treatment cards
   ------------------------------------------------------------- */

.card-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 20px 46px;
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card:hover {
	box-shadow: var(--shadow-lift);
	border-color: #cfe0dd;
	transform: translateY(-2px);
	text-decoration: none;
}

.card-thumb {
	margin: -22px -20px 16px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--teal-light);
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.card-icon { color: var(--teal); margin-bottom: 12px; }
.card-icon .icon { width: 28px; height: 28px; stroke-width: 1.3; }

.card h3 {
	font-family: var(--font-body);
	font-size: .97rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 7px;
	line-height: 1.35;
}

.card p {
	font-size: .85rem;
	color: var(--muted);
	margin: 0;
}

.card-arrow {
	position: absolute;
	right: 16px;
	bottom: 14px;
	color: var(--muted);
	transition: transform var(--transition), color var(--transition);
}
.card:hover .card-arrow { color: var(--teal); transform: translateX(3px); }
.card-arrow .icon { width: 17px; height: 17px; }

/* Larger info cards */
.info-card {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px 40px;
	position: relative;
	transition: box-shadow var(--transition), transform var(--transition);
}
.info-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); text-decoration: none; }
.info-card .card-icon { margin: 0; }
.info-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.info-card p { font-size: .87rem; color: var(--muted); margin: 0; }

/* -------------------------------------------------------------
   9. Page content
   ------------------------------------------------------------- */

.page-hero {
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
	padding-block: 56px;
}
.page-hero h1 { margin: 0 0 10px; }
.page-hero p { color: var(--muted); margin: 0; max-width: 60ch; }

.breadcrumb {
	font-size: .82rem;
	color: var(--muted);
	margin: 0 0 14px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal); }

.entry {
	max-width: 760px;
	padding-block: 60px;
}
.entry--wide { max-width: none; }

.entry h2 { margin-top: 1.8em; }
.entry h3 { margin-top: 1.6em; font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; }
.entry img { border-radius: var(--radius); margin-block: 1.4em; }
.entry ul, .entry ol { padding-left: 1.4em; }
.entry li { margin-bottom: .5em; }

.entry blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--teal);
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 1.12rem;
}

.entry table { width: 100%; border-collapse: collapse; margin-block: 1.5em; }
.entry th, .entry td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.entry th { background: var(--bg-soft); font-weight: 600; color: var(--ink); }

.entry-footer {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Medical safety notice */
.notice {
	background: var(--teal-light);
	border-left: 3px solid var(--teal);
	border-radius: var(--radius);
	padding: 18px 22px;
	font-size: .9rem;
	color: var(--ink);
	margin-block: 1.6em;
}
.notice p:last-child { margin-bottom: 0; }

/* Search form */
.search-form { display: flex; gap: 8px; max-width: 440px; }
.search-form input[type="search"] {
	flex: 1;
	font: inherit;
	font-size: .95rem;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
}
.search-form input[type="search"]:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }

/* Pagination */
.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-size: .9rem;
}
.pagination .page-numbers:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.pagination .current { background: var(--teal); border-color: var(--teal); color: #fff; }

/* -------------------------------------------------------------
   9b. Booking page
   ------------------------------------------------------------- */

.page-hero--split { padding-block: 0; overflow: hidden; }
.page-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	padding-block: 0;
}
.page-hero--split .page-hero-inner > div:first-child { padding-block: 56px; }
.page-hero-lede { color: var(--muted); max-width: 46ch; margin: 0; }
.page-hero-media { align-self: stretch; margin-right: calc(-50vw + 50%); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.section-head--centred { margin-inline: auto; text-align: center; }
.section-head--centred .section-rule { margin-inline: auto; }

/* Five locations, five columns — a four-column grid orphaned the fifth card on
   a row of its own, where it sized independently and came out shorter than the
   rest. One row means every card is the same height automatically.
   If the number of locations changes, revisit this. */
.location-grid {
	align-items: stretch;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 1200px) { .location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .location-grid { grid-template-columns: 1fr; } }

/* Cards sit flush to the top of their cell and fill it, so a shorter
   description does not leave the button floating mid-card. */
.location-card { height: 100%; }

.location-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}
.location-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.location-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--teal-light); }
.location-media img { width: 100%; height: 100%; object-fit: cover; }

.location-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.location-body h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; margin: 0 0 4px; }

.location-city {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--teal);
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.location-note { font-size: .87rem; color: var(--muted); margin: 0 0 14px; }

.clinic-times {
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
}
.clinic-times li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .82rem;
	color: var(--body);
	margin-bottom: 6px;
}
.clinic-times li:last-child { margin-bottom: 0; }
.clinic-times .icon { width: 14px; height: 14px; color: var(--teal); margin-top: 3px; }
.clinic-times--stacked { border-top: 0; padding-top: 0; margin-bottom: 0; }
.clinic-times--stacked li { font-size: .88rem; }
.location-btn { margin-top: auto; font-size: .85rem; padding-inline: 16px; }
.location-btn .icon { width: 15px; height: 15px; }

.location-footnote {
	margin: 26px 0 0;
	font-size: .85rem;
	color: var(--muted);
	text-align: center;
}

.panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }

.panel {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}
.panel-icon { color: var(--teal); margin-bottom: 12px; }
.panel-icon .icon { width: 26px; height: 26px; }
.panel h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.panel p { font-size: .89rem; margin-bottom: .9em; }
.panel-note { color: var(--muted); font-size: .84rem !important; margin-bottom: 0 !important; }

.tick-list, .insurer-list, .contact-list { list-style: none; padding: 0; margin: 0 0 16px; }
.tick-list li, .insurer-list li {
	position: relative;
	padding-left: 24px;
	font-size: .88rem;
	margin-bottom: 6px;
}
.tick-list li::before, .insurer-list li::before {
	content: "";
	position: absolute;
	left: 2px; top: .45em;
	width: 12px; height: 7px;
	border-left: 2px solid var(--teal);
	border-bottom: 2px solid var(--teal);
	transform: rotate(-45deg);
}
.contact-list li { display: flex; align-items: center; gap: 9px; font-size: .89rem; margin-bottom: 7px; }
.contact-list .icon { width: 15px; height: 15px; color: var(--muted); }

.fee {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 14px;
}
.fee-label { font-size: .8rem; color: var(--muted); }
.fee-value { font-family: var(--font-head); font-size: 2rem; color: var(--teal-darker); line-height: 1; }

.strip {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 26px;
}
.strip-icon { color: var(--teal); flex: 0 0 auto; }
.strip-icon .icon { width: 30px; height: 30px; }
.strip h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.strip p { margin: 0; font-size: .9rem; }

.notice--wide { max-width: none; }

/* -------------------------------------------------------------
   9c. Condition and treatment pages
   ------------------------------------------------------------- */

.clinical-hero {
	position: relative;
	background: var(--teal-darker);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.clinical-hero-bg {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center;
}
.clinical-hero.has-image::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(95deg, rgba(6,40,39,.96) 0%, rgba(6,40,39,.88) 45%, rgba(6,40,39,.35) 100%);
}
.clinical-hero-inner { padding-block: 52px; max-width: var(--wrap); }
.clinical-hero h1 { color: #fff; margin: 8px 0 0; max-width: 18ch; }
.clinical-hero .hero-rule { margin-block: 20px; }
.clinical-hero-lede { color: rgba(255,255,255,.88); max-width: 52ch; margin: 0; font-size: 1rem; }
.clinical-hero .breadcrumb { color: rgba(255,255,255,.7); margin: 0; }
.clinical-hero .breadcrumb a { color: rgba(255,255,255,.7); }
.clinical-hero .breadcrumb a:hover { color: #fff; }
.clinical-hero .breadcrumb span { margin-inline: 6px; }

.section-nav {
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 78px;
	z-index: 60;
}
.admin-bar .section-nav { top: 110px; }
.section-nav-inner {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.section-nav a {
	display: inline-block;
	white-space: nowrap;
	padding: 15px 0;
	font-size: .89rem;
	font-weight: 500;
	color: var(--body);
	border-bottom: 2px solid transparent;
}
.section-nav a:hover { color: var(--teal); border-bottom-color: var(--teal); text-decoration: none; }

.clinical-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 52px;
	align-items: start;
	padding-block: 56px;
}
.clinical-main { max-width: none; padding-block: 0; }
.clinical-main > h2:first-of-type { margin-top: 0; }
.clinical-main h2 {
	scroll-margin-top: 150px;      /* clears the sticky header + section nav */
	padding-top: 26px;
	border-top: 1px solid var(--line);
}
.clinical-main > h2:first-child { border-top: 0; padding-top: 0; }

.resources h2 { margin-top: 1.8em; }
.resource-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.resource-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
}
.resource-list .icon { width: 14px; height: 14px; }

.clinical-side { display: grid; gap: 20px; position: sticky; top: 150px; }

.side-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.side-card--pad { padding: 24px; }
.side-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--teal-light); }
.side-media img { width: 100%; height: 100%; object-fit: cover; }
.side-body { padding: 22px; }
.side-icon { color: var(--teal); margin-bottom: 12px; }
.side-icon .icon { width: 28px; height: 28px; }

.side-title {
	font-family: var(--font-head);
	font-size: 1.12rem;
	line-height: 1.3;
	margin-bottom: 10px;
}
.side-card p { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }

.side-card--cta {
	background: var(--teal-darker);
	border-color: var(--teal-darker);
	color: #fff;
	padding: 26px 24px;
}
.side-card--cta .side-title { color: #fff; }
.side-card--cta p { color: rgba(255,255,255,.8); }
.side-phone { margin: 14px 0 0 !important; text-align: center; font-size: .85rem !important; }
.side-phone a { color: #fff; font-weight: 600; }

.entry--flush { padding-block: 0; }

/* -------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------- */

.site-footer {
	background: var(--teal-darker);
	color: rgba(255,255,255,.8);
	padding-top: 62px;
	font-size: .9rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
	gap: 40px;
	padding-bottom: 46px;
}

.logo-text--footer .logo-mark { color: #fff; }
.logo-text--footer .logo-words strong { color: #fff; }
.logo-text--footer .logo-words em { color: rgba(255,255,255,.65); }

.footer-strapline { margin: 16px 0 0; color: rgba(255,255,255,.7); }

.footer-heading {
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}
.footer-heading--follow { margin-top: 26px; }

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 9px; }
.footer-list a { color: rgba(255,255,255,.8); }
.footer-list a:hover { color: #fff; }

.footer-list--icons li { display: flex; align-items: center; gap: 10px; }
.footer-list--icons .icon { width: 16px; height: 16px; color: rgba(255,255,255,.6); }

.social-link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: var(--radius);
	color: #fff;
}
.social-link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

.footer-legal {
	border-top: 1px solid rgba(255,255,255,.15);
	padding-block: 22px;
	font-size: .8rem;
	color: rgba(255,255,255,.6);
}
.footer-legal p { margin: 0; }
.footer-gmc { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.25); }

/* -------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------- */

@media (max-width: 1200px) {
	.header-inner { gap: 22px; }
	.nav-list { gap: 6px 20px; }
	.nav-list a { font-size: .89rem; }
	.logo-words strong { font-size: 1.12rem; }
	.logo-words em { font-size: .62rem; }
}

@media (max-width: 1080px) {
	.nav-list { gap: 6px 16px; }
	.nav-list a { font-size: .85rem; }
	.card-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 1080px) {
	.clinical-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; }
	.panel-grid { gap: 16px; }
}

@media (max-width: 980px) {
	.clinical-layout { grid-template-columns: 1fr; padding-block: 40px; }
	.clinical-side { position: static; grid-template-columns: 1fr 1fr; }
	.side-card--cta { grid-column: 1 / -1; }

	.page-hero-inner { grid-template-columns: 1fr; }
	.page-hero-media { display: none; }
	.page-hero--split .page-hero-inner > div:first-child { padding-block: 44px; }

	.panel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.features { grid-template-columns: 1fr 1fr; gap: 28px; }
	.card-grid--4, .card-grid--3 { grid-template-columns: repeat(2, 1fr); }

	.split { grid-template-columns: 1fr; gap: 34px; }
	.split-media { order: -1; }

	.hero-inner { grid-template-columns: 1fr; min-height: 0; padding-block: 56px; }
	.hero-portrait { display: none; }
	.hero--has-bg::before { background: linear-gradient(180deg, rgba(6,40,39,.93), rgba(6,40,39,.88)); }
}

/* Mobile navigation */
@media (max-width: 820px) {
	.utility-strapline { display: none; }
	.utility-inner { justify-content: center; }
	.utility-contact { gap: 14px; font-size: .8rem; }
	.utility-link span { display: none; }
	.utility-link .icon { width: 17px; height: 17px; }

	.nav-toggle-label {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		color: var(--ink);
		cursor: pointer;
		border: 1px solid var(--line);
		border-radius: var(--radius);
	}
	.nav-toggle-label .icon { width: 22px; height: 22px; grid-area: 1 / 1; }
	.nav-toggle-label .icon-close { display: none; }
	.nav-toggle:checked ~ .nav-toggle-label .icon-open { display: none; }
	.nav-toggle:checked ~ .nav-toggle-label .icon-close { display: block; }

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-lift);
		padding: 8px 24px 24px;
		max-height: calc(100vh - 122px);
		overflow-y: auto;
	}
	.nav-toggle:checked ~ .site-nav { display: block; }

	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list > li { border-bottom: 1px solid var(--line); }
	.nav-list a { display: block; padding: 15px 0; font-size: 1rem; }
	.nav-list .current-menu-item > a::after,
	.nav-list .current_page_item > a::after { display: none; }

	.nav-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 8px 16px;
		min-width: 0;
	}
	.nav-list .sub-menu a { padding: 9px 0; font-size: .92rem; color: var(--muted); }

	.nav-mobile-extras { display: grid; gap: 10px; margin-top: 20px; }
}

@media (max-width: 820px) {
	.section-nav { top: 68px; }
	.admin-bar .section-nav { top: 114px; }
	.section-nav-inner { gap: 22px; }
	.section-nav a { font-size: .84rem; padding-block: 13px; }
	.clinical-main h2 { scroll-margin-top: 130px; }
}

@media (max-width: 620px) {
	body { font-size: 16px; }
	.section { padding-block: 52px; }
	.clinical-side { grid-template-columns: 1fr; }
	.location-grid { grid-template-columns: 1fr; }
	.strip { flex-direction: column; gap: 14px; }
	.clinical-hero h1 { max-width: none; }
	.features { grid-template-columns: 1fr; gap: 26px; }
	.card-grid, .card-grid--4, .card-grid--3 { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 30px; }
	.hero-actions .btn { width: 100%; }
	.entry { padding-block: 40px; }
}

/* -------------------------------------------------------------
   12. Accessibility and print
   ------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.utility-bar, .site-nav, .nav-toggle-label, .site-footer, .hero-portrait { display: none !important; }
	body { font-size: 12pt; color: #000; }
	.site-header { position: static; }
	a { color: #000; text-decoration: underline; }
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption-text, figcaption { font-size: .82rem; color: var(--muted); text-align: center; margin-top: .6em; }

/* Keeps the admin bar from covering the sticky header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }