/*!
Theme Name: Engage Wellness
Author: NRG
Description: Theme for Engage Wellness (engagewellnessnow.com), built on the NRG Recovery theme with the "Serene Recovery Path" design. Underscores base, ACF blocks, custom post types, no page builder.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: engage-wellness
*/

/* ==========================================================================
   HOW THIS FILE IS ORGANISED
   ==========================================================================

   This is the only stylesheet for the theme (landing pages excepted - they
   use landing-page.css). It is plain CSS: no build step, edit and save.

   Sections run from general to specific. Search for the number to jump.

     1.  Design tokens ......... colours, fonts, spacing, radii, shadows
     2.  Base .................. reset, body, headings, links, media
     3.  Layout ................ container, sections, content + sidebar
     4.  Elements .............. buttons, chips, eyebrows, icons, forms
     5.  Header ................ notice bar, header, navigation, mobile menu
     6.  Page hero ............. dark band at the top of inner pages
     7.  Content ............... .entry-content: text written in the editor
     8.  Cards ................. featured-image cards and their grid
     9.  Blocks ................ Hero, Trust Cards, Image Cards,
                                 Feature Split, Section, Forms,
                                 Call to Action, Step Cards, Link Grid
     10. Sidebar ............... widgets and link lists
     11. Table of contents ..... floating button on posts and sub pages
     12. Blog & page extras .... pagination, post navigation,
                                 bylines, key points, FAQ, sources, author,
                                 team / press / location shortcodes,
                                 gallery grid + lightbox
     13. Footer
     14. Legacy content ........ colour classes left in old content
     15. Accessibility ......... screen-reader text, skip link, motion
     16. Motion ................ hero entrance, scroll reveals, accordions
     17. Service pages ......... article column, side rail, crisis notice,
                                 related links
     18. Converted content ..... card grids, CTA bands, check lists, accents
     19. Home page ............. hero rating, card rows, logos, two-column lists
     20. Landing pages ......... slim header/footer, phases, testimonials, form

   Conventions
     - Mobile first. Two breakpoints only:
         48em (768px)  tablet and up
         64em (1024px) desktop and up
     - Class names are "block__element--modifier", e.g. .card__title.
     - Never hard-code a colour or size that exists as a token in section 1.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Change a value here and it changes everywhere.
   ========================================================================== */

:root {
	/* Brand colours */
	/* "Serene Recovery Path" palette (Astro build, DESIGN.md). The "gold"
	   names are kept from the NRG Recovery theme: here they hold the sky-cyan
	   call-to-action colour. */
	--color-primary: #1d2c5e;        /* Deep navy: links, buttons, header text */
	--color-primary-dark: #041648;   /* Darkest navy: headings, dark bands, footer */
	--color-primary-darkest: #020d2e;/* Button hover, hero overlay */
	--color-primary-tint: #72d1f1;   /* Sky cyan: text and accents on dark backgrounds */
	--color-accent: #00677f;         /* Teal: eyebrow labels, link hover */
	--color-gold: #72d1f1;           /* Sky cyan: call-to-action buttons (navy text) */
	--color-gold-bright: #80deff;    /* Call to action on dark backgrounds */
	--color-gold-dark: #3fb6dd;      /* Call-to-action hover */
	--color-sage: #5e8b7e;           /* Check marks */
	--color-sand: #f2efe9;           /* Warm inset panels */
	--color-danger-bg: #ffdad6;      /* Crisis notice background */
	--color-danger-text: #93000a;    /* Crisis notice text */

	/* Neutrals */
	--color-text: #191c1d;           /* Body copy */
	--color-text-muted: #45464f;     /* Secondary copy */
	--color-white: #ffffff;
	--color-surface: #f8f9fa;        /* Page background */
	--color-surface-tint: #f3f4f5;   /* Alternating section background, page hero */
	--color-surface-mist: #edeeef;   /* Inset panels */
	--color-border: #e1e3e4;

	/* Typography */
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* Headings */
	--font-sans: "Inter", -apple-system, "Segoe UI", sans-serif;      /* Everything else */

	--text-sm: 0.875rem;   /* 14px */
	--text-md: 1rem;       /* 16px */
	--text-lg: 1.125rem;   /* 18px */
	--text-h4: 1.25rem;    /* 20px */
	--text-h3: 1.5rem;     /* 24px */
	--text-h2: 2rem;       /* 32px */
	--text-h1: clamp(2.25rem, 1.75rem + 2vw, 3rem); /* 36px to 48px */

	/* Spacing scale */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2.5rem;
	--space-2xl: 4rem;
	--space-section: clamp(3rem, 2rem + 5vw, 6rem); /* Top/bottom padding of a section */

	/* Layout */
	--width-site: 80rem;      /* 1280px: widest the layout gets */
	--width-content: 47.5rem; /* 760px: comfortable reading width */
	--gutter: 1rem;           /* Page side padding; grows at 48em */
	--header-height: 4.5rem;  /* Used to offset anchor links and sticky parts */

	/* Shape and depth */
	--radius-sm: 0.5rem;   /* Inputs, small panels */
	--radius-md: 0.5rem;   /* Cards */
	--radius-lg: 1rem;     /* Large media */
	--radius-pill: 999px;  /* Buttons, chips */

	/* "Soft glow": low opacity, large blur, tinted navy instead of grey. */
	--shadow-sm: 0 2px 8px -2px rgba(4, 22, 72, 0.08);
	--shadow-md: 0 8px 30px rgba(4, 22, 72, 0.08);
	--shadow-lg: 0 20px 40px -12px color-mix(in srgb, var(--color-primary-darkest) 30%, transparent);

	--transition: 0.2s ease;
}

@media (min-width: 48em) {

	:root {
		--gutter: 2rem;
	}
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

/* Fonts: @font-face for the chosen heading and body fonts is printed by
   inc/branding.php (Site Settings > Brand), from the files in /fonts. */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Keeps headings clear of the sticky header when jumping to an anchor. */
	scroll-padding-top: calc(var(--header-height) + var(--space-lg));
}

body {
	margin: 0;
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: 1.6;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-md);
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

h1 {
	font-size: var(--text-h1);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

h2 {
	font-size: var(--text-h2);
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--text-h3);
}

h4 {
	font-size: var(--text-h4);
}

h5,
h6 {
	font-size: var(--text-lg);
}

p,
ul,
ol,
blockquote,
figure,
table {
	margin: 0 0 var(--space-lg);
}

/* Links */
a {
	color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-accent);
}

:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* Media */
img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
	vertical-align: middle;
}

/* Imagify wraps images in <picture> for WebP (inc/imagify.php). The wrapper
   takes no box of its own, so the <img> lays out as if it were not there. */
picture.nrg-picture {
	display: contents;
}

hr {
	height: 1px;
	margin: var(--space-xl) 0;
	border: 0;
	background: var(--color-border);
}

::selection {
	background: var(--color-primary-tint);
	color: var(--color-primary-dark);
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* Centres content and adds the page side padding. */
.container {
	width: 100%;
	max-width: calc(var(--width-site) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Narrower container for centred text such as the call to action. */
.container--narrow {
	max-width: calc(var(--width-content) + var(--gutter) * 2);
}

/* Vertical rhythm: every band of the page is a .section. */
.section {
	padding-block: var(--space-section);
}

.section--tinted {
	border-block: 1px solid var(--color-border);
	background: var(--color-surface-tint);
}

/* Centred heading + intro that opens a section. */
.section-intro {
	max-width: 48rem;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.section-intro p:last-child {
	margin-bottom: 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

/* Content + sidebar: blog posts and service sub pages.
   One column on small screens, sidebar on the right from desktop up. */
.layout-sidebar {
	display: grid;
	gap: var(--space-2xl);
}

.layout-sidebar__main {
	min-width: 0; /* Lets wide content (tables, embeds) shrink instead of overflowing. */
}

@media (min-width: 64em) {

	.layout-sidebar {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}
}


/* ==========================================================================
   4. ELEMENTS
   ========================================================================== */

/* Icons ----------------------------------------------------------------
   Inline SVGs from nrg_icon(). They size with the text around them. */
.icon {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}

/* Buttons --------------------------------------------------------------
   Base .btn plus one colour modifier and an optional size modifier:
   <a class="btn btn--gold btn--large"> */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: scale(0.97);
}

/* Colours */
.btn--primary {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.btn--primary:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn--gold {
	background: var(--color-gold);
	box-shadow: var(--shadow-md);
	color: var(--color-primary-dark);
	font-weight: 800;
}

.btn--gold:hover {
	background: var(--color-gold-dark);
	color: var(--color-primary-dark);
}

.btn--white {
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	color: var(--color-primary-dark);
}

.btn--white:hover {
	background: var(--color-surface);
	color: var(--color-primary-dark);
}

/* Translucent button for use over photos. */
.btn--glass {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
	backdrop-filter: blur(12px);
}

.btn--glass:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--color-white);
}

/* Sizes */
.btn--small {
	padding: 0.625rem 1.25rem;
}

.btn--large {
	padding: 1rem 2rem;
}

.btn--block {
	display: flex;
	width: 100%;
}

/* A row of buttons that wraps on small screens. */
.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.btn-row--center {
	justify-content: center;
}

/* Eyebrow ---------------------------------------------------------------
   Small uppercase label above a heading. */
.eyebrow {
	margin-bottom: var(--space-md);
	color: var(--color-accent);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eyebrow--light {
	color: var(--color-primary-tint);
}

.eyebrow--gold {
	color: var(--color-gold-bright);
}

/* Chip ------------------------------------------------------------------
   Pill-shaped label. */
.chip {
	display: inline-block;
	margin-bottom: var(--space-lg);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: 600;
}

.chip--glass {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-primary-tint);
	backdrop-filter: blur(12px);
}

/* Text link with an arrow ------------------------------------------------ */
.text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-weight: 700;
	text-decoration: none;
}

.text-link::after {
	content: "\2192"; /* Right arrow */
	transition: transform var(--transition);
}

.text-link:hover::after {
	transform: translateX(4px);
}

/* Forms -----------------------------------------------------------------
   Applies to the search form and (as a baseline) Gravity Forms. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--color-primary);
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

::placeholder {
	color: #575c74;
}

button,
input[type="submit"],
input[type="button"] {
	font: inherit;
}

input[type="submit"] {
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-weight: 700;
	cursor: pointer;
}

input[type="submit"]:hover {
	background: var(--color-primary);
}

.search-form {
	display: flex;
	gap: var(--space-sm);
	max-width: 30rem;
	margin-bottom: var(--space-lg);
}

.search-form label {
	flex: 1;
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */

/* Notice bar -------------------------------------------------------------
   Thin bar above the header. Hidden on small screens, where the phone
   number is already in the header. Text comes from Site Settings. */
.site-notice {
	display: none;
	padding-block: var(--space-sm);
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.site-notice__inner,
.site-notice__group,
.site-notice__item {
	display: flex;
	align-items: center;
}

.site-notice__inner {
	justify-content: space-between;
	gap: var(--space-lg);
}

.site-notice__group {
	gap: var(--space-lg);
}

.site-notice__item {
	gap: 0.375rem;
}

/* Social media icons (Site Settings > Header). */
.site-notice__social {
	display: flex;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-notice__social a {
	display: flex;
	color: var(--color-primary-tint);
	transition: color var(--transition), transform var(--transition);
}

.site-notice__social a:hover {
	color: var(--color-white);
	transform: translateY(-1px);
}

.site-notice__social .icon {
	width: 1.0625rem;
	height: 1.0625rem;
}

@media (min-width: 48em) {

	.site-notice {
		display: block;
	}
}

/* Header -----------------------------------------------------------------
   White bar that sticks to the top of the screen. At the top of the page the
   bar and logo are larger; once the page scrolls, js/header.js adds
   .is-scrolled and they shrink to the compact size (--header-height).
   --header-now is the current height; the desktop menu items use it too, so
   their dropdowns always hang from the bottom of the bar. */
.site-header {
	--header-now: 4.25rem;
	--logo-height: 2.75rem;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 64em) {

	.site-header {
		--header-now: 5rem;
		--logo-height: 3.25rem;
	}
}

.site-header.is-scrolled {
	--header-now: 4.25rem;
	--logo-height: 2.75rem;
}

/* WordPress admin bar pushes the sticky header down for logged-in users. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {

	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {

	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: var(--header-now);
	transition: min-height var(--transition);
}

/* Logo */
.site-branding {
	flex-shrink: 0;
}

.site-branding .custom-logo {
	width: auto;
	height: var(--logo-height);
	transition: height var(--transition);
}

.site-branding__name {
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-size: var(--text-h4);
	font-weight: 600;
	text-decoration: none;
}

/* Phone number, button and menu toggle on the right. */
.site-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-lg);
}

.site-header__phone {
	display: none;
	align-items: center;
	gap: var(--space-sm);
	color: var(--color-primary-dark);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* "Call Now" shows at every size, as in the Astro header. */
.site-header__cta {
	white-space: nowrap;
}

@media (min-width: 48em) {

	.site-header__phone {
		display: inline-flex;
	}
}

/* Phone number shows from 48em; the four-item menu leaves room for it at
   every desktop width. */

/* Menu toggle (small screens only) */
.menu-toggle {
	display: inline-flex;
	padding: var(--space-sm);
	border: 0;
	background: none;
	color: var(--color-primary-dark);
	cursor: pointer;
}

.menu-toggle .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: block;
}

/* Navigation: shared ----------------------------------------------------- */
.main-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	display: block;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
	color: var(--color-primary-dark);
}

.sub-menu-toggle {
	display: inline-flex;
	padding: var(--space-xs);
	border: 0;
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;
}

.sub-menu-toggle .icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--transition);
}

.sub-menu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* Navigation: below 1024px ------------------------------------------------
   The menu sits behind the menu button: a panel below the header (full
   width on phones, a right-hand drawer on tablets). Sub menus are closed
   until their chevron is pressed. */
@media (max-width: 63.999em) {

	.main-nav {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: calc(100vh - var(--header-now));
		padding: var(--space-md) var(--gutter) var(--space-xl);
		overflow-y: auto;
		border-top: 1px solid var(--color-border);
		background: var(--color-white);
		box-shadow: var(--shadow-md);
	}

	.main-nav.is-open {
		display: block;
	}

	.main-nav li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--color-border);
	}

	.main-nav a {
		flex: 1;
		padding: 0.875rem 0;
	}

	.main-nav .sub-menu-toggle {
		padding: var(--space-md);
	}

	.main-nav .sub-menu {
		display: none;
		flex-basis: 100%;
		padding-left: var(--space-md);
	}

	.main-nav .is-open > .sub-menu {
		display: block;
	}

	.main-nav .sub-menu li:last-child {
		border-bottom: 0;
	}
}

/* Navigation: desktop -----------------------------------------------------
   A horizontal list. Sub menus are dropdown panels that open on hover,
   keyboard focus, or their chevron button. A third menu level (as under
   "What We Treat") is shown inside the dropdown as titled columns. */
@media (min-width: 64em) {

	.menu-toggle {
		display: none;
	}

	.main-nav__list {
		display: flex;
		align-items: center;
		gap: var(--space-xl);
	}

	.main-nav__list > li > a {
		color: var(--color-text-muted);
		font-weight: 700;
	}

	.main-nav__list > li > a:hover,
	.main-nav__list > .current-menu-item > a,
	.main-nav__list > .current-menu-ancestor > a {
		color: var(--color-accent);
	}

	.main-nav__list > li > a {
		white-space: nowrap;
	}

	.main-nav__list > li {
		display: flex;
		position: relative;
		align-items: center;
		gap: 0.125rem;
		min-height: var(--header-now);
		transition: min-height var(--transition);
	}

	/* Dropdown panel */
	.main-nav__list > li > .sub-menu {
		display: flex;
		visibility: hidden;
		position: absolute;
		top: 100%;
		left: calc(var(--space-xl) * -1);
		gap: var(--space-2xl);
		min-width: 16rem;
		padding: var(--space-xl);
		border: 0;
		border-radius: var(--radius-lg);
		background: var(--color-white);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		transform: translateY(0.5rem);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	}

	.main-nav__list > li:hover > .sub-menu,
	.main-nav__list > li:focus-within > .sub-menu,
	.main-nav__list > li.is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	/* Keep the last dropdowns from running off the right edge. */
	.main-nav__list > li:nth-last-child(-n + 2) > .sub-menu {
		right: 0;
		left: auto;
	}

	/* A dropdown with plain links stacks them in one column... */
	.main-nav__list > li > .sub-menu:not(:has(.sub-menu)) {
		flex-direction: column;
		gap: 0;
	}

	.main-nav .sub-menu a {
		padding: 0.375rem 0;
		color: var(--color-text);
		font-weight: 500;
		white-space: nowrap;
	}

	.main-nav .sub-menu a:hover {
		color: var(--color-accent);
	}

	/* ...and one with a third level shows each group as a titled column. */
	.main-nav .sub-menu .menu-item-has-children > a {
		margin-bottom: var(--space-sm);
		padding-bottom: var(--space-sm);
		border-bottom: 1px solid var(--color-surface-mist);
		color: var(--color-accent);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.main-nav .sub-menu .sub-menu-toggle {
		display: none;
	}
}

/* Header: Astro mockup behaviour -----------------------------------------
   The main header (header.php) is a fixed-height bar: 72px, 82px from 48em.
   It rests navy, or transparent over the home page's video hero
   (--overlay, which floats over the hero instead of pushing it down), with
   the logo turned white by a CSS filter so it stays readable over the
   video. Once the page scrolls, js/header.js adds .is-scrolled (white bar,
   real logo colours) and, for a short stretch, .is-hidden (slid up out of
   view, then back down). An open menu panel also turns the bar white. */
.site-header.site-header--main {
	--header-now: 4.5rem;
	--logo-height: 2.25rem;
}

@media (min-width: 48em) {

	:root {
		--header-height: 5.125rem;
	}

	.site-header.site-header--main {
		--header-now: 5.125rem;
		--logo-height: 3.125rem;
	}
}

.site-header--main {
	background: var(--color-primary-dark);
	box-shadow: none;
	transition: background-color 0.45s ease-out, box-shadow 0.45s ease-out, translate 0.45s ease-out;
}

.site-header--overlay {
	position: fixed;
	right: 0;
	left: 0;
	background: transparent;
}

.site-header--main.is-scrolled,
.menu-open .site-header--main {
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.site-header--main.is-hidden {
	translate: 0 -100%;
}

.site-header--main .custom-logo {
	transition: height 0.45s ease-out, filter 0.3s ease;
}

/* At the top of the page the logo is 25% larger (user, 2026-10-21); it
   shrinks back to the sizes above once .is-scrolled is added. */
.site-header.site-header--main:not(.is-scrolled) {
	--logo-height: 2.8125rem;
}

@media (min-width: 48em) {

	.site-header.site-header--main:not(.is-scrolled) {
		--logo-height: 3.9rem;
	}
}

/* Desktop: mega-nav in the bar, "Call Now" button instead of the menu
   button; the panel's call button is not needed. */
.site-header--main .site-header__cta {
	display: none;
}

@media (min-width: 64em) {

	.site-header--main .site-header__cta {
		display: inline-flex;
	}

	.site-header--main .main-nav .main-nav__call {
		display: none;
	}
}

/* Hamburger widths: no call link in the bar; the menu panel has the call
   button (user, 2026-10-20). */
@media (max-width: 63.999em) {

	.site-header.site-header--main .site-header__phone {
		display: none;
	}
}

/* Narrow desktops: the four menu items need the room, so the phone link
   hides up to 1200px ("Call Now" stays) and shows as an icon up to 1280px. */
@media (min-width: 64em) and (max-width: 74.999em) {

	.site-header.site-header--main .site-header__phone {
		display: none;
	}
}

@media (min-width: 75em) and (max-width: 79.999em) {

	.site-header--main .site-header__phone-number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Resting (not scrolled, menu closed): white logo, links and icons. */
body:not(.menu-open) .site-header--main:not(.is-scrolled) .custom-logo {
	filter: brightness(0) invert(1);
}

body:not(.menu-open) .site-header--main:not(.is-scrolled) :is(.site-branding__name, .site-header__phone, .menu-toggle) {
	color: var(--color-white);
}

/* Desktop menu links over the hero; dropdown panels keep their dark text. */
body:not(.menu-open) .site-header--main:not(.is-scrolled) .main-nav__list > li > :is(a, .sub-menu-toggle) {
	color: rgba(255, 255, 255, 0.9);
}

body:not(.menu-open) .site-header--main:not(.is-scrolled) .main-nav__list > li > a:hover,
body:not(.menu-open) .site-header--main:not(.is-scrolled) .main-nav__list > :is(.current-menu-item, .current-menu-ancestor) > a {
	color: var(--color-white);
}

body:not(.menu-open) .site-header--main:not(.is-scrolled) .site-header__cta {
	border-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-primary-dark);
}

.site-header--main :is(.site-header__phone, .menu-toggle, .site-branding__name) {
	transition: color 0.3s ease;
}

/* Call link beside the menu button, at every width. */
.site-header--main .site-header__actions {
	gap: var(--space-md);
}

.site-header--main .site-header__phone {
	display: inline-flex;
	font-size: 1rem;
}

.site-header--main .site-header__phone .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.site-header__phone-short {
	display: none;
}

/* Narrow phones: "Call" instead of the number (still read out in full). */
@media (max-width: 23.749em) {

	.site-header__phone-number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.site-header__phone-short {
		display: inline;
	}
}

/* Larger menu button. */
.site-header--main .menu-toggle {
	margin-right: calc(var(--space-sm) * -1);
}

.site-header--main .menu-toggle .icon {
	width: 2rem;
	height: 2rem;
}

/* Menu panel: fills the screen below the bar, call button first (the extra
   .main-nav keeps the panel's plain link styles off it). */
.main-nav .main-nav__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	width: 100%;
	margin-bottom: var(--space-md);
	padding: 0.875rem 1.5rem;
	color: var(--color-primary-dark);
	font-weight: 800;
}

.main-nav__call .icon {
	width: 1.125rem;
	height: 1.125rem;
}

@media (max-width: 63.999em) {

	.site-header--main .main-nav {
		height: calc(100vh - var(--header-now));
		height: calc(100dvh - var(--header-now));
		max-height: none;
		border-top: 0;
	}
}

/* Tablets: a drawer on the right instead of a full-width sheet. */
@media (min-width: 48em) and (max-width: 63.999em) {

	.site-header--main .main-nav {
		left: auto;
		width: 26rem;
		padding-inline: var(--space-xl);
		box-shadow: var(--shadow-lg);
	}
}


/* ==========================================================================
   6. PAGE HERO
   Band at the top of every inner page: breadcrumbs, eyebrow, title, intro
   and the call button. Light grey by default, as in the Astro design; with a
   featured image it turns dark, the image behind a navy gradient.
   Markup: template-parts/page-hero.php
   ========================================================================== */

.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	background: var(--color-surface-tint);
}

/* Blog posts: slimmer. */
.page-hero--compact {
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
}

.page-hero__inner > :not(.breadcrumbs) {
	max-width: 48rem;
}

.page-hero .breadcrumbs {
	margin-bottom: var(--space-lg);
}

.page-hero__title {
	margin: 0;
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-size: var(--text-h1);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.page-hero__intro {
	margin: var(--space-lg) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.page-hero__cta {
	margin: var(--space-xl) 0 0;
}

/* With a featured image: dark, image behind a gradient. */
.page-hero--has-image {
	padding-block: clamp(4rem, 3rem + 6vw, 7.5rem);
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.page-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero--has-image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, color-mix(in srgb, var(--color-primary-dark) 85%, transparent), color-mix(in srgb, var(--color-primary-dark) 50%, transparent) 60%, transparent);
	content: "";
}

.page-hero--has-image .page-hero__title {
	color: var(--color-white);
}

.page-hero--has-image .page-hero__intro {
	color: rgba(255, 255, 255, 0.85);
}

.page-hero--has-image .eyebrow {
	color: var(--color-primary-tint);
}

.page-hero--has-image .breadcrumbs,
.page-hero--has-image .breadcrumbs a {
	color: rgba(255, 255, 255, 0.8);
}

.breadcrumbs {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.breadcrumbs a {
	color: var(--color-primary);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* Blog post category, date and bylines, in one row that wraps. */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md) var(--space-lg);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.page-hero--has-image .entry-meta {
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.85);
}

.entry-meta .chip {
	margin: 0;
}


/* ==========================================================================
   7. CONTENT
   Everything written in the editor is printed inside .entry-content.
   These rules style core blocks and classic HTML alike.
   ========================================================================== */

.entry-content {
	font-size: var(--text-lg);
	line-height: 1.7;
	/* Long emails and URLs wrap instead of running off small screens. */
	overflow-wrap: break-word;
}

/* No gap above the first or below the last thing in the content. */
.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

/* Extra air above headings that follow other content. */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--space-xl);
}

/* Not on the theme blocks' own headings (card titles etc.), only on prose.
   Core Heading blocks placed inside a block keep the gap. */
.entry-content .nrg-block :is(h2, h3, h4):not(.wp-block-heading) {
	margin-top: 0;
}

/* Section-style blocks (Call to Action, Trust Cards, Image Cards, Feature
   Split) placed in page text: the text column already has its gutter, so
   the block's own container adds none. Not on the home page
   (.entry-content--full), where blocks run edge to edge and the container
   is the only gutter. */
.entry-content:not(.entry-content--full) .nrg-block > .container {
	padding-inline: 0;
}

.entry-content li {
	margin-bottom: var(--space-sm);
}

.entry-content li::marker {
	color: var(--color-gold);
}

.entry-content img,
.entry-content .wp-block-image img {
	border-radius: var(--radius-md);
}

.entry-content figcaption {
	margin-top: var(--space-sm);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: center;
}

.entry-content blockquote {
	padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
	border-left: 4px solid var(--color-gold);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--color-surface-mist);
	font-family: var(--font-serif);
	font-size: var(--text-h4);
	font-style: italic;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Tables scroll sideways on small screens instead of breaking the layout. */
.entry-content .wp-block-table,
.entry-content > table {
	display: block;
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-md);
}

.entry-content th,
.entry-content td {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	text-align: left;
}

.entry-content th {
	background: var(--color-surface-tint);
	color: var(--color-primary-dark);
}

/* A row of core buttons gets the same breathing room as a paragraph. */
.entry-content .wp-block-buttons {
	margin-block: var(--space-lg);
}

/* Core button block matches the theme's primary button. */
.entry-content .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.entry-content .wp-block-button__link:hover {
	background: var(--color-primary);
}

/* Core Details block (FAQ rows in converted pages). Matches the theme's own
   FAQ rows in 12.4: a ruled list, serif question, chevron on the right. */
.entry-content .wp-block-details {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

/* Top rule on the first row of each run of Details blocks only. */
.entry-content .wp-block-details:not(.wp-block-details + .wp-block-details) {
	margin-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.entry-content .wp-block-details + :not(.wp-block-details) {
	margin-top: var(--space-lg);
}

.entry-content .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.entry-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn with a mask so it takes the text colour. */
.entry-content .wp-block-details summary::after {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--transition);
}

.entry-content .wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

.entry-content .wp-block-details summary:hover {
	color: var(--color-accent);
}

.entry-content .wp-block-details > :not(summary) {
	margin-top: 0;
	color: var(--color-text-muted);
}

.entry-content .wp-block-details > :last-child:not(summary) {
	margin-bottom: 0;
	padding-bottom: var(--space-lg);
}

/* Theme blocks (Hero, Call to Action, ...) used on a regular page break out
   of the container so they span the full width of the screen. */
.site-main {
	overflow-x: clip;
}

.page .entry-content > section {
	margin-inline: calc(50% - 50vw);
}

/* Home page: blocks run edge to edge, so the wrapper adds no spacing and
   the theme blocks bring their own. */
.entry-content--full {
	font-size: var(--text-md);
	line-height: 1.6;
}

.page .entry-content--full > section {
	margin-inline: 0;
}

/* Core blocks placed directly on the home page still get a sensible width. */
.entry-content--full > :not(section) {
	max-width: var(--width-site);
	margin-inline: auto;
	padding-inline: var(--gutter);
}


/* ==========================================================================
   8. CARDS
   Featured image + title card. Used by the Therapy / Levels of Care /
   What We Treat archive grids, the Service Grid block, the blog and search.
   Markup: template-parts/card.php
   ========================================================================== */

/* Grid: 1 column on phones, 2 on tablets, 3 on desktop. */
.card-grid {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 48em) {

	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {

	.card-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

/* Heading above a group of cards (e.g. "Substance Abuse"). */
.card-grid__heading {
	margin-bottom: var(--space-lg);
}

.card-grid + .card-grid__heading {
	margin-top: var(--space-2xl);
}

.card {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}

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

.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* Image area keeps a 3:2 shape. Cards without a featured image have no
   image area at all (.card--text). */
.card__media {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-accent));
}

.card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.card:hover .card__image {
	transform: scale(1.05);
}

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--space-lg);
}

.card__meta {
	margin-bottom: var(--space-sm);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.card__title {
	margin-bottom: var(--space-sm);
	font-size: var(--text-h4);
}

.card__text {
	margin-bottom: var(--space-md);
	color: var(--color-text-muted);
}

/* "Learn more" sits at the bottom of the card whatever the text length. */
.card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: auto;
	color: var(--color-primary);
	font-size: 0.9375rem;
	font-weight: 700;
}

.card__more .icon {
	width: 1em;
	height: 1em;
	transition: transform var(--transition);
}

.card:hover .card__more .icon {
	transform: translateX(4px);
}


/* ==========================================================================
   9. BLOCKS
   One sub-section per ACF block. Markup: blocks/{name}/render.php
   ========================================================================== */

/* 9.1 Hero -----------------------------------------------------------------
   Tall opening section with a background photo and a left-to-right gradient. */
.hero {
	display: flex;
	position: relative;
	align-items: center;
	overflow: hidden;
	min-height: min(54rem, 85vh);
	padding-block: var(--space-2xl) calc(var(--space-2xl) + 4rem);
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Full screen (home, as in the Astro mockup): fills the whole screen under
   the transparent header, content centred over a light navy wash, with a
   bouncing arrow down to the next section. svh keeps mobile browser
   toolbars from cropping it. */
.hero--full {
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: calc(var(--header-height) + var(--space-xl)) calc(var(--space-2xl) + 3rem);
	text-align: center;
}

.hero--full .hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 56rem;
	margin-inline: auto;
}

.hero--full .hero__text {
	max-width: 42rem;
}

.hero--full .btn-row,
.hero--full .hero__note {
	justify-content: center;
}

.hero__scroll {
	display: flex;
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	z-index: 1;
	padding: var(--space-xs);
	color: var(--color-white);
	translate: -50% 0;
	animation: nrg-bounce 1s infinite;
}

.hero__scroll .icon {
	width: 2rem;
	height: 2rem;
}

@keyframes nrg-bounce {

	0%,
	100% {
		transform: translateY(-25%);
		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
	}

	50% {
		transform: none;
		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
	}
}

@media (prefers-reduced-motion: reduce) {

	.hero__scroll {
		animation: none;
	}
}

.hero__after {
	display: block;
}

/* The full-screen hero keeps its video clear: no cards pulled up over it. */
.hero__after + .trust-cards--overlap {
	margin-top: 0;
}

/* Background video: sits over the poster image and fades in once it plays
   (js/hero-video.js), so there is never a black flash. */
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.hero__video.is-playing {
	opacity: 1;
}

.hero::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, color-mix(in srgb, var(--color-primary-dark) 85%, transparent), color-mix(in srgb, var(--color-primary-dark) 45%, transparent) 55%, transparent);
	content: "";
}

.hero--full::after {
	background: color-mix(in srgb, var(--color-primary-dark) 45%, transparent);
}

.hero__inner {
	position: relative;
	z-index: 1;
}

.hero__content {
	max-width: 42rem;
}

.hero__title {
	margin-bottom: var(--space-lg);
	color: var(--color-white);
}

.hero__text {
	max-width: 32rem;
	margin-bottom: var(--space-xl);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--text-lg);
}

.text-highlight {
	color: var(--color-primary-tint);
}

.hero__stars {
	display: inline-flex;
	gap: 0.125rem;
	color: var(--color-primary-tint);
}

.hero__stars .icon {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
	stroke: none;
}

.hero__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin: var(--space-xl) 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* 9.2 Trust Cards ----------------------------------------------------------
   Row of white cards with an icon. "Overlap" pulls them up over the hero. */
.trust-cards {
	padding-block: var(--space-2xl);
}

.trust-cards--overlap {
	position: relative;
	z-index: 2;
	margin-top: -4rem;
	padding-top: 0;
}

.trust-cards__grid {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 48em) {

	.trust-cards__grid {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: 2rem;
	}
}

.trust-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding: 2rem;
	border: 0;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(12px);
	transition: transform var(--transition);
}

.trust-card:hover {
	transform: translateY(-4px);
}

/* Title-only cards: centre the title against the icon. */
.trust-card:not(:has(.trust-card__text, .trust-card__link)) {
	align-items: center;
}

.trust-card:not(:has(.trust-card__text, .trust-card__link)) .trust-card__title {
	margin-bottom: 0;
}

/* flex: none stops long titles squeezing the icon box. */
.trust-card__icon {
	display: flex;
	flex: none;
	padding: 0.75rem;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--color-primary-dark) 10%, transparent);
	color: var(--color-primary-dark);
}

.trust-card:nth-child(3n + 1) .trust-card__icon {
	background: color-mix(in srgb, var(--color-primary-tint) 18%, transparent);
}

.trust-card:nth-child(3n + 2) .trust-card__icon {
	background: color-mix(in srgb, var(--color-sage) 14%, transparent);
	color: var(--color-sage);
}

.trust-card:nth-child(3n) .trust-card__icon {
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	color: var(--color-accent);
}

.trust-card__icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.trust-card__title {
	margin-bottom: var(--space-sm);
}

.trust-card__text {
	margin: 0;
	color: var(--color-text-muted);
}

/* A small uploaded icon image in place of the SVG icon. */
.trust-card__icon--image {
	padding: 0.625rem;
	background: rgba(229, 155, 11, 0.12);
}

.trust-card__icon--image img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
}

.trust-card__link {
	margin-top: var(--space-md);
	font-size: 0.9375rem;
}

/* Row of accreditation logos under the cards. */
.logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xl) var(--space-2xl);
	margin-top: var(--space-2xl);
}

.logo-strip__logo {
	width: auto;
	max-width: 11rem;
	height: 4.5rem;
	object-fit: contain;
}

@media (min-width: 48em) {

	.logo-strip {
		gap: var(--space-xl) 4rem;
	}

	.logo-strip__logo {
		max-width: 15rem;
		height: 6rem;
	}
}

/* The LegitScript seal is a link around the image (see nrg_legitscript_seal()). */
.legitscript-seal {
	display: flex;
}

/* White logo on a light background: add the class "logo-dark" to the Image
   block (Advanced > Additional CSS class). The filter turns any single-colour
   image into --color-primary-dark (#063649): brightness(0) makes it black,
   the rest of the chain tints black to that exact colour. */
.entry-content .logo-dark img {
	width: auto;
	max-width: 16rem;
	border-radius: 0;
	filter: brightness(0) saturate(100%) invert(2%) sepia(59%) saturate(1608%) hue-rotate(167deg) brightness(612%) contrast(95%);
}

/* The same row in page content: a core Group with the class "logo-strip"
   holding core Image blocks (e.g. insurance logos on /locations/georgia/). */
.entry-content .wp-block-group.logo-strip {
	gap: var(--space-lg) var(--space-xl);
	margin-block: var(--space-xl);
}

.entry-content .wp-block-group.logo-strip .wp-block-image {
	margin: 0;
}

.entry-content .wp-block-group.logo-strip img {
	width: auto;
	max-width: 9rem;
	height: 3.5rem;
	border-radius: 0;
	object-fit: contain;
}

/* Trust Cards inside page text (e.g. Contact). */
.entry-content .trust-cards {
	padding-block: var(--space-xl);
}

/* 9.3 Image Cards ----------------------------------------------------------
   Large photo cards on a 12-column grid. Each card's "Width" field sets how
   many columns it spans on desktop: wide 8, half 6, narrow 4. */
.image-cards__grid {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 48em) {

	.image-cards__grid {
		grid-template-columns: repeat(12, 1fr);
	}

	.image-card--wide {
		grid-column: span 8;
	}

	.image-card--half {
		grid-column: span 6;
	}

	.image-card--narrow {
		grid-column: span 4;
	}
}

.image-card {
	display: flex;
	position: relative;
	align-items: flex-end;
	overflow: hidden;
	min-height: 24rem;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-primary-dark);
	box-shadow: var(--shadow-md);
	color: var(--color-white);
	text-decoration: none;
}

.image-card:hover {
	color: var(--color-white);
}

.image-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.image-card:hover .image-card__image {
	transform: scale(1.05);
}

/* Bottom-up gradient so the text stays readable over any photo. */
.image-card::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--color-primary-darkest) 95%, transparent), color-mix(in srgb, var(--color-primary-dark) 45%, transparent) 55%, transparent);
	content: "";
}

.image-card__body {
	position: relative;
	z-index: 1;
	padding: 2rem;
}

@media (min-width: 64em) {

	.image-card {
		min-height: 28rem;
	}

	.image-card__body {
		padding: 2.5rem;
	}
}

.image-card__title {
	margin-bottom: var(--space-sm);
	color: var(--color-white);
	font-size: var(--text-h3);
}

.image-card--wide .image-card__title {
	font-size: var(--text-h2);
}

.image-card__text {
	max-width: 32rem;
	margin-bottom: var(--space-md);
	color: rgba(255, 255, 255, 0.85);
}

.image-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--color-primary-tint);
	font-weight: 700;
}

.image-card__more .icon {
	width: 1em;
	height: 1em;
}

/* Inside page text (e.g. a "Treatment Options" section): a framed panel.
   Not on the home page (.entry-content--full), which uses the photo cards. */
.entry-content:not(.entry-content--full) .image-cards {
	margin-block: var(--space-2xl);
	padding: var(--space-xl) var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

/* Cards there carry full paragraphs, too long to read over a photo, so the
   photo sits on top and the text below it on the dark card. */
.entry-content:not(.entry-content--full) .image-card {
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
}

.entry-content:not(.entry-content--full) .image-card::after {
	content: none;
}

.entry-content:not(.entry-content--full) .image-card__image {
	position: static;
	height: auto;
	aspect-ratio: 3 / 2;
}

.entry-content:not(.entry-content--full) .image-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
}

.entry-content:not(.entry-content--full) .image-card__more {
	margin-top: auto;
}

/* 9.4 Feature Split --------------------------------------------------------
   Image beside text. Stacks on small screens; side by side from desktop. */
.feature-split {
	background: var(--color-white);
}

.feature-split__inner {
	display: grid;
	align-items: center;
	gap: var(--space-2xl);
}

@media (min-width: 64em) {

	.feature-split__inner {
		grid-template-columns: 5fr 6fr;
		gap: 4rem;
	}

	.feature-split--image-right .feature-split__inner {
		grid-template-columns: 6fr 5fr;
	}

	.feature-split--image-right .feature-split__media {
		order: 2;
	}
}

.feature-split__image {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.feature-split__content > p {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

/* Two-column list of small icon + label panels. */
.feature-list {
	display: grid;
	gap: var(--space-md);
	margin: var(--space-xl) 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {

	.feature-list {
		grid-template-columns: 1fr 1fr;
	}
}

.feature-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	color: var(--color-primary-dark);
	font-size: 0.9375rem;
	font-weight: 700;
}

.feature-list__item a:hover {
	color: var(--color-accent);
}

.feature-list__item a {
	color: inherit;
	text-decoration: none;
}

.feature-list__icon {
	display: flex;
	flex: none;
	padding: 0.625rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	color: var(--color-accent);
}

/* Inside page text (e.g. a "Why Choose Us" section). */
.entry-content .feature-split {
	padding-block: var(--space-xl);
}

.entry-content .feature-list__item {
	margin: 0;
}

/* 9.5 Section --------------------------------------------------------------
   Centred intro with any blocks inside it. Background: white, tint or dark.
   Theme blocks placed inside drop their own outer spacing. */
.section-block--white {
	background: var(--color-white);
}

.section-block--tint {
	border-block: 1px solid var(--color-border);
	background: var(--color-surface-tint);
}

.section-block--dark {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.section-block--dark h2,
.section-block--dark .eyebrow {
	color: var(--color-white);
}

.section-block--dark .section-intro p:last-child {
	color: var(--color-primary-tint);
}

/* No intro gap when the section has only a heading and buttons. */
.section-block .section-intro:last-child {
	margin-bottom: 0;
}

.section-block__content > section,
.section-block__content > .acf-innerblocks-container > section {
	padding: 0;
	background: none;
	border: 0;
}

.section-block__content > section .container,
.section-block__content > .acf-innerblocks-container > section .container {
	padding-inline: 0;
}

.section-block__content > .trust-cards--overlap,
.section-block__content > .acf-innerblocks-container > .trust-cards--overlap {
	margin-top: 0;
}

/* A Section with no blocks inside: no empty box and no gap under the intro. */
/* (ACF wraps the inner blocks in an .acf-innerblocks-container, so "empty"
   means nothing inside but that wrapper.) */
.section-block__content:empty,
.section-block__content:not(:has(:not(.acf-innerblocks-container))) {
	display: none;
}

/* The gap under the intro sits on the content instead, so it goes away with
   an empty content box. (Same 2xl gap as .section-intro's own margin.) */
.section-block .section-intro:has(+ .section-block__content) {
	margin-bottom: 0;
}

.section-block .section-intro + .section-block__content {
	margin-top: var(--space-2xl);
}

.section-block__buttons {
	margin-top: var(--space-xl);
}

/* Outline button, used for a section's second button. */
.btn--outline {
	border-color: var(--color-primary-dark);
	background: transparent;
	color: var(--color-primary-dark);
}

.btn--outline:hover {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.section-block--dark .btn--outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--color-white);
}

/* 9.6 Forms (Gravity Forms) ----------------------------------------------------
   Gravity Forms prints its own markup; these rules make it match the theme. */
.gform_wrapper .gform_fields {
	row-gap: var(--space-md) !important;
}

.gform_wrapper .gfield_label {
	color: var(--color-primary-dark);
	font-size: var(--text-sm);
	font-weight: 600;
}

.gform_wrapper .gform_footer {
	justify-content: center;
	margin-top: var(--space-lg) !important;
	padding: 0 !important;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	padding: 0.875rem 2.5rem !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	background: var(--color-gold) !important;
	box-shadow: var(--shadow-md);
	color: var(--color-primary-dark) !important; /* Navy on sky cyan, as .btn--gold (white was hard to read). */
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--transition), transform var(--transition);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	background: var(--color-gold-dark) !important;
	transform: translateY(-2px);
}

.gform_wrapper .gfield_required {
	color: var(--color-gold-dark);
}

/* Some forms have their own submit button in an HTML field, in line with the
   other inputs; hide the footer button only on those. (Was forms 2 and 8 by
   ID, which hid form 2's only submit button once its HTML button was gone.) */
.gform_wrapper:has(.gfield_html input[type="submit"]) .gform_footer {
	display: none !important;
}

.gform_wrapper .gfield_html:has(> input[type="submit"]) {
	grid-column: 1 / -1 !important;
}

.gform_wrapper .gfield_html input[type="submit"] {
	width: 100%;
	padding-inline: 1rem !important;
}

/* 9.7 Call to Action -------------------------------------------------------
   Dark centred band with the phone number and a button. */
.cta-band {
	background: var(--color-primary-dark);
	color: var(--color-white);
	text-align: center;
}

.cta-band__title {
	color: var(--color-white);
}

.cta-band__text {
	margin-bottom: var(--space-xl);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--text-lg);
}

/* One-line text stays in the accent colour, as in the mockups. */
.cta-band__text p:only-child {
	color: var(--color-primary-tint);
}

.image-cards__more {
	margin-top: var(--space-2xl);
}

.cta-band__note {
	margin: var(--space-xl) 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--text-sm);
	font-style: italic;
}

/* Inside page text (the closing call to action on most pages): a rounded
   panel instead of a full-width band. Not on the home page, where it is the
   full-width closing band. */
.entry-content:not(.entry-content--full) .cta-band {
	margin-block: var(--space-2xl);
	padding: var(--space-2xl) var(--space-lg);
	border-radius: var(--radius-lg);
}


/* 9.7a Card Grid -------------------------------------------------------------
   Cards with an icon, title, text and link (mockups: "Is IOP Right for You?").
   Styles: icon (default), plain, navy. Columns: auto or a fixed 2/3/4. */
.cards-block {
	margin-block: var(--space-2xl);
}

.cards-block__intro {
	max-width: var(--width-content);
	margin-bottom: var(--space-xl);
}

.cards-block__intro p:last-child {
	margin-bottom: 0;
	color: var(--color-text-muted);
}

.cards-block__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-lg);
}

@media (min-width: 48em) {

	.cards-block--cols-2 .cards-block__list,
	.cards-block--cols-3 .cards-block__list,
	.cards-block--cols-4 .cards-block__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {

	.cards-block--cols-3 .cards-block__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.cards-block--cols-4 .cards-block__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.grid-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}

.grid-card__icon {
	display: flex;
	margin-bottom: var(--space-lg);
	color: var(--color-gold-dark);
}

.grid-card__icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.entry-content .grid-card__title,
.grid-card__title {
	margin: 0 0 var(--space-sm);
	color: var(--color-primary-dark);
	font-size: var(--text-h4);
}

.grid-card__text {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.grid-card__text > :last-child {
	margin-bottom: 0;
}

/* Lists in cards: check marks, as in the converted cards. */
.grid-card__text ul {
	margin: var(--space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.grid-card__text ul li {
	position: relative;
	margin-bottom: 0.375rem;
	padding-left: 1.5rem;
}

.grid-card__text ul li::before {
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.875rem;
	height: 0.875rem;
	background: var(--color-sage);
	content: "";
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.grid-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: auto;
	padding-top: var(--space-lg);
	color: var(--color-primary);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.grid-card__link:hover {
	color: var(--color-accent);
}

.grid-card__link .icon {
	width: 1em;
	height: 1em;
}

/* Navy tiles (mockups: "Therapeutic Modalities"). */
.cards-block--navy .grid-card {
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--color-primary-dark);
	box-shadow: none;
}

.cards-block--navy .grid-card__icon {
	color: var(--color-primary-tint);
}

.entry-content .cards-block--navy .grid-card__title,
.cards-block--navy .grid-card__title {
	color: var(--color-white);
}

.cards-block--navy .grid-card__text {
	color: rgba(255, 255, 255, 0.8);
}

.cards-block--navy .grid-card__link {
	color: var(--color-primary-tint);
}

/* 9.7c Therapeutic Modalities (template-parts/modalities.php) -----------------
   Navy row of therapy tiles under service pages (mockup IOP page). */
.modalities {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.modalities .section-intro h2 {
	color: var(--color-white);
}

.modalities .section-intro p {
	color: var(--color-primary-tint);
}

.modalities__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 64em) {

	.modalities__list {
		grid-template-columns: repeat(5, 1fr);
	}
}

.modality-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	height: 100%;
	padding: 1.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-white);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background var(--transition), transform var(--transition);
}

.modality-tile:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
	transform: translateY(-2px);
}

.modality-tile .icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-primary-tint);
}

/* 9.7d Split hero, Contact Panel, Location (mockup Contact page) -------------- */
.page-hero--split {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	background: var(--color-surface);
}

.page-hero--split .page-hero__inner {
	display: grid;
	align-items: center;
	gap: var(--space-2xl);
}

@media (min-width: 64em) {

	.page-hero--split .page-hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

.page-hero--split .chip {
	background: color-mix(in srgb, var(--color-primary-tint) 22%, transparent);
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.page-hero--split .page-hero__title {
	color: var(--color-primary-dark);
}

.page-hero--split .text-highlight {
	color: var(--color-accent);
}

.page-hero--split .page-hero__intro {
	max-width: 36rem;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.page-hero__photo {
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	object-fit: cover;
}

.contact-panel {
	padding-top: 0;
}

.contact-panel__inner {
	display: grid;
	align-items: start;
	gap: var(--space-xl);
}

@media (min-width: 64em) {

	.contact-panel__inner {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 2rem;
	}
}

.contact-panel__form {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
}

.contact-panel__title {
	margin-bottom: var(--space-sm);
}

.contact-panel__text {
	color: var(--color-text-muted);
}

/* Form fields on warm sand, as in the mockup. */
.contact-panel .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-panel .gform_wrapper select,
.contact-panel .gform_wrapper textarea {
	border-color: transparent;
	background: var(--color-sand);
}

.contact-panel__side {
	display: grid;
	gap: var(--space-lg);
}

.contact-panel__steps {
	padding: 2rem;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: rgba(255, 255, 255, 0.85);
}

.contact-panel__steps-title {
	margin-bottom: var(--space-lg);
	color: var(--color-white);
	font-size: var(--text-h3);
}

.contact-steps {
	display: grid;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.contact-step {
	display: flex;
	gap: var(--space-md);
}

.contact-step__icon {
	display: flex;
	flex: none;
	align-self: flex-start;
	padding: 0.5rem;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-primary-tint);
}

.contact-step__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.contact-step__title {
	display: block;
	color: var(--color-white);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

.contact-panel__help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--color-primary-tint) 45%, white);
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-size: var(--text-h4);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--transition);
}

.contact-panel__help:hover {
	color: var(--color-primary-dark);
	transform: translateY(-2px);
}

.contact-panel__help small {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.contact-panel__help .icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.location-block__inner {
	display: grid;
	align-items: center;
	gap: var(--space-2xl);
}

@media (min-width: 64em) {

	.location-block__inner {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

.location-block__lead {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.location-block__list {
	display: grid;
	gap: var(--space-md);
	margin: var(--space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.location-block__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
}

.location-block__list .icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	color: var(--color-gold-dark);
}

.location-block__list a {
	color: var(--color-text);
	text-decoration: none;
}

.location-block__map {
	position: relative;
	overflow: hidden;
	min-height: 22rem;
	border-radius: var(--radius-lg);
	background: var(--color-surface-mist);
	box-shadow: var(--shadow-lg);
}

.location-block__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.location-block__directions {
	display: flex;
	position: absolute;
	bottom: 1.25rem;
	left: 1.25rem;
	align-items: center;
	gap: var(--space-md);
	padding: 0.75rem 1.25rem 0.75rem 0.75rem;
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	color: var(--color-primary-dark);
	text-decoration: none;
}

.location-block__directions strong,
.location-block__directions small {
	display: block;
}

.location-block__directions small {
	color: var(--color-text-muted);
	font-size: 0.75rem;
}

.location-block__directions-icon {
	display: flex;
	padding: 0.5rem;
	border-radius: var(--radius-sm);
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.location-block__directions-icon .icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* 9.7b FAQ --------------------------------------------------------------------
   Accordion of <details>; the questions also go out as FAQPage JSON-LD. */
.faq-block {
	margin-block: var(--space-xl) var(--space-2xl);
}

.faq-block__item {
	margin-bottom: var(--space-md);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.faq-block__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 1.125rem 1.5rem;
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.faq-block__question::-webkit-details-marker {
	display: none;
}

.faq-block__question .icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--color-accent);
	transition: transform var(--transition);
}

.faq-block__item[open] .faq-block__question .icon {
	transform: rotate(180deg);
}

.faq-block__answer {
	padding: 0 1.5rem 1.25rem;
	color: var(--color-text-muted);
}

.faq-block__answer > :last-child {
	margin-bottom: 0;
}

.cta-band .btn-row .btn--glass {
	border-color: rgba(255, 255, 255, 0.4);
}

/* 9.8 Step Cards and Link Grid --------------------------------------------
   Blocks that sit inside page text (.entry-content), so no section padding.
   Step Cards: numbered steps or a checklist. An odd last card spans the full
   width. Link Grid reuses the card design from section 8. */
.step-cards,
.link-grid {
	margin-block: var(--space-xl);
}

.step-cards__intro {
	margin-bottom: var(--space-lg);
}

.step-cards__intro > :last-child {
	margin-bottom: 0;
}

.entry-content .step-cards__list {
	display: grid;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {

	.entry-content .step-cards__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.step-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.entry-content .step-card {
	position: relative;
	margin: 0;
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.entry-content .step-card::marker {
	content: none;
}

/* Number badge: a gold circle, or a pill when it reads "Step 1". */
.step-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	margin-bottom: var(--space-md);
	padding-inline: 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-gold);
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.step-card__check {
	position: absolute;
	top: var(--space-lg);
	right: var(--space-lg);
	display: flex;
	color: var(--color-gold);
}

.step-card__check .icon {
	width: 1.5rem;
	height: 1.5rem;
}

.step-card__label {
	margin: 0 2rem var(--space-xs, 0.25rem) 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-style: italic;
}

.step-card__title {
	margin-bottom: var(--space-sm);
	font-size: var(--text-h4);
}

.step-cards--checklist .step-card__title {
	padding-right: 2rem;
}

.step-card__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-md);
}

.step-cards__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md) var(--space-lg);
	margin-top: var(--space-md);
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background: var(--color-surface-tint);
}

.step-cards__note {
	flex: 1 1 20rem;
	margin: 0;
	font-size: var(--text-md);
}

/* Editor placeholder for a block with no cards yet. */
.block-placeholder {
	padding: var(--space-lg);
	border: 1px dashed var(--color-border);
	color: var(--color-text-muted);
	text-align: center;
}

/* 9.9 Logo Carousel and Image Slider ----------------------------------------
   Logo Carousel: one row of logos. "--scroll" loops two copies of the row
   (translate by half its width); hover/focus pauses it and reduced motion
   turns it into a still, wrapped row. Image Slider: a scroll-snap row with
   arrow buttons (js/slider.js). */
.logo-carousel {
	margin-block: var(--space-xl);
}

.logo-carousel__track {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.logo-carousel__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 var(--space-lg);
}

.logo-carousel__logo {
	display: block;
	width: auto;
	max-width: 160px;
	height: auto;
	max-height: 56px;
	object-fit: contain;
}

.logo-carousel--static .logo-carousel__track {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--space-lg);
}

.logo-carousel--scroll .logo-carousel__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-carousel--scroll .logo-carousel__track {
	width: max-content;
	animation: logo-carousel-scroll calc(var(--lc-count, 6) * 3.5s) linear infinite;
}

.logo-carousel--scroll:hover .logo-carousel__track,
.logo-carousel--scroll:focus-within .logo-carousel__track {
	animation-play-state: paused;
}

@keyframes logo-carousel-scroll {

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {

	.logo-carousel--scroll .logo-carousel__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.logo-carousel--scroll .logo-carousel__track {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		row-gap: var(--space-lg);
		animation: none;
	}

	.logo-carousel__item--copy {
		display: none;
	}
}

.image-slider {
	--is-gap: var(--space-md);
	margin-block: var(--space-xl);
}

.image-slider__track {
	display: grid;
	grid-auto-columns: 100%;
	grid-auto-flow: column;
	gap: var(--is-gap);
	margin: 0;
	padding: 0 0 var(--space-xs);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	overscroll-behavior-x: contain;
}

.image-slider__track::-webkit-scrollbar {
	display: none;
}

.image-slider__track:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 4px;
}

@media (min-width: 48em) {

	.image-slider__track {
		grid-auto-columns: calc((100% - var(--is-gap)) / min(2, var(--is-per-view, 3)));
	}
}

@media (min-width: 64em) {

	.image-slider__track {
		grid-auto-columns: calc((100% - (var(--is-per-view, 3) - 1) * var(--is-gap)) / var(--is-per-view, 3));
	}
}

.image-slider__slide {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 3 / 2;
	scroll-snap-align: start;
	box-shadow: var(--shadow-sm);
}

.image-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-slider__controls {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.image-slider--static .image-slider__controls {
	display: none;
}

.image-slider__button {
	display: inline-grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-primary-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.image-slider__button:hover:not(:disabled),
.image-slider__button:focus-visible {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.image-slider__button:disabled {
	opacity: 0.35;
	cursor: default;
}

.image-slider__button svg {
	width: 1.125rem;
	height: 1.125rem;
}

.image-slider__button--prev svg {
	transform: scaleX(-1);
}

/* ==========================================================================
   10. SIDEBAR
   Beside blog posts and service sub pages. Each widget is a white card.
   On desktop the sidebar sticks while the content scrolls.
   Markup: sidebar.php
   ========================================================================== */

.sidebar {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 64em) {

	.sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-lg));
	}
}

.widget {
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.widget-title,
.widget h2 {
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-h4);
}

/* Link lists (menu widgets and the automatic section list). */
.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li + li {
	border-top: 1px solid var(--color-border);
}

.widget li a {
	display: block;
	padding: 0.625rem 0;
	color: var(--color-text-muted);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.widget li a:hover {
	color: var(--color-primary-dark);
}

/* The page being viewed is marked in the section list. */
.widget .current_page_item > a,
.widget .current-menu-item > a {
	padding-left: var(--space-md);
	border-left: 3px solid var(--color-gold);
	color: var(--color-primary-dark);
}

/* Reviews widget: the embed sizes itself; keep it inside the card. */
.reviews-embed {
	max-width: 100%;
	overflow: hidden;
}

/* "Speak with admissions" card. */
.widget--call {
	border-color: transparent;
	background: var(--color-primary-dark);
}

.widget--call .widget-title {
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--color-white);
}


/* ==========================================================================
   11. TABLE OF CONTENTS
   Floating button on the left edge of blog posts and service sub pages.
   Pressing it opens a panel listing the page's headings.
   Markup: template-parts/toc.php   Behaviour: js/toc.js
   ========================================================================== */

/* Small screens: a round button in the bottom-left corner. */
.toc {
	position: fixed;
	bottom: var(--space-lg);
	left: var(--space-md);
	z-index: 40;
}

.toc__button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.75rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary-dark);
	box-shadow: var(--shadow-md);
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color var(--transition);
}

.toc__button:hover,
.toc.is-open .toc__button {
	background: var(--color-primary);
}

/* The "Contents" label is hidden until there is room for it. */
.toc__button-label {
	display: none;
}

.toc__panel {
	position: absolute;
	bottom: calc(100% + var(--space-sm));
	left: 0;
	width: min(20rem, calc(100vw - var(--space-md) * 2));
	max-height: 60vh;
	padding: var(--space-lg);
	overflow-y: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
}

.toc__title {
	margin-bottom: var(--space-sm);
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc__list a {
	display: block;
	padding: 0.5rem 0 0.5rem var(--space-md);
	border-left: 2px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
}

.toc__list a:hover {
	color: var(--color-primary-dark);
}

/* The section currently being read. */
.toc__list a[aria-current="true"] {
	border-left-color: var(--color-gold);
	color: var(--color-primary-dark);
	font-weight: 700;
}

/* Desktop: a labelled tab fixed to the left edge, halfway down the screen.
   The panel opens to its right. */
@media (min-width: 64em) {

	.toc {
		top: 50%;
		bottom: auto;
		left: 0;
		transform: translateY(-50%);
	}

	.toc__button {
		flex-direction: column;
		padding: var(--space-lg) 0.625rem;
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
	}

	.toc__button-label {
		display: block;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	.toc__panel {
		top: 50%;
		bottom: auto;
		left: calc(100% + var(--space-sm));
		max-height: 70vh;
		transform: translateY(-50%);
	}
}


/* ==========================================================================
   12. BLOG & PAGE EXTRAS
   12.1 Pagination and post navigation; then the content kept from
   the old theme (inc/legacy-content.php).
   ========================================================================== */

/* Pagination under the blog grid and search results. */
.pagination {
	margin-top: var(--space-2xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.pagination .page-numbers {
	min-width: 2.75rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--color-primary-dark);
	background: var(--color-primary-dark);
	color: var(--color-white);
}

/* Previous / next links under a blog post. */
.post-navigation {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 48em) {

	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.post-navigation a {
	text-decoration: none;
}

.post-navigation .nav-subtitle {
	display: block;
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.post-navigation .nav-title {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
}


/* 12.2 Bylines -------------------------------------------------------------
   "Medically Reviewed By" / "Written By" in the bar under a blog post's hero. */
.bylines {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md) var(--space-xl);
}

.byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--color-primary-dark);
	text-decoration: none;
}

.byline__avatar {
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid var(--color-border);
	border-radius: 50%;
	object-fit: cover;
}

.byline__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.byline__label {
	color: var(--color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.byline__name {
	font-weight: 700;
}

.byline:hover .byline__name {
	text-decoration: underline;
}

.bylines__date {
	flex-basis: 100%;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* 12.3 Key Points ----------------------------------------------------------
   Summary box before a blog post's content. */
.key-points {
	margin-bottom: var(--space-2xl);
	padding: var(--space-lg) var(--space-xl);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-gold);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.key-points__title {
	font-size: var(--text-h4);
}

.key-points__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.key-points__list li {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.key-points__list .icon {
	margin-top: 0.2em;
	color: var(--color-gold);
}

/* 12.4 FAQ and Sources -----------------------------------------------------
   Collapsible rows built on <details>, so they work without JavaScript. */
.faq,
.sources {
	margin-top: var(--space-2xl);
}

.disclosure {
	border-bottom: 1px solid var(--color-border);
}

.disclosure:first-of-type {
	border-top: 1px solid var(--color-border);
}

.disclosure__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.disclosure__title::-webkit-details-marker {
	display: none;
}

.disclosure__icon {
	transition: transform var(--transition);
}

.disclosure[open] .disclosure__icon {
	transform: rotate(180deg);
}

.disclosure__body {
	padding-bottom: var(--space-lg);
	color: var(--color-text-muted);
}

.disclosure__body > :last-child {
	margin-bottom: 0;
}

.sources .disclosure__body {
	font-size: var(--text-sm);
	overflow-wrap: anywhere;
}

/* Page FAQs (FAQ field): the same card accordion as the FAQ block. */
.faq .disclosure {
	margin-bottom: var(--space-md);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.faq .disclosure:first-of-type {
	border-top: 0;
}

.faq .disclosure__title {
	padding: 1.125rem 1.5rem;
}

.faq .disclosure__icon {
	flex: none;
	color: var(--color-accent);
}

.faq .disclosure__body {
	padding: 0 1.5rem 1.25rem;
}

/* Forms in page text (e.g. Insurance Verification): a white card with warm
   sand fields, as on the Contact page. */
article .entry-content > .gform_wrapper {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
}

article .entry-content > .gform_wrapper :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
	border-color: transparent;
	background: var(--color-sand);
}

/* 12.5 Post call to action and editorial box ------------------------------- */
.post-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	margin-block: var(--space-2xl);
	padding: var(--space-xl);
	border-radius: var(--radius-lg);
	background: var(--color-primary-dark);
	color: var(--color-primary-tint);
}

.post-cta__text {
	flex: 1 1 22rem;
}

.post-cta__title {
	margin-bottom: var(--space-sm);
	color: var(--color-white);
	font-size: var(--text-h3);
}

.post-cta p {
	margin: 0;
}

.editorial {
	margin-top: var(--space-2xl);
	padding: var(--space-lg) var(--space-xl);
	border-radius: var(--radius-md);
	background: var(--color-surface-mist);
	font-size: var(--text-sm);
}

.editorial h2,
.editorial h3,
.editorial h4 {
	font-size: var(--text-h4);
}

.editorial > :last-child {
	margin-bottom: 0;
}

/* 12.6 Author card (blog sidebar) and author page -------------------------- */
.author-card {
	text-align: center;
}

.author-card__avatar {
	width: 6rem;
	height: 6rem;
	margin-bottom: var(--space-md);
	border-radius: 50%;
	object-fit: cover;
}

.author-card__name {
	margin-bottom: 0;
	font-family: var(--font-serif);
	font-size: var(--text-h4);
	font-weight: 600;
}

.author-card__name a {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.author-card__job {
	color: var(--color-gold-dark);
	font-size: var(--text-sm);
	font-weight: 700;
}

.author-card__bio {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: left;
}

.author-card__links {
	display: flex;
	justify-content: center;
	gap: var(--space-lg);
	margin: 0;
	font-size: var(--text-sm);
}

.author-hero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xl);
}

.author-hero__photo {
	width: 9rem;
	height: 9rem;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	object-fit: cover;
}

.author-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-md) 0 0;
}

.author-hero__badges .chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
	text-decoration: none;
}

/* 12.7 Page shortcodes: team, press, location, sitemap --------------------- */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: var(--space-xl) var(--space-lg);
	margin-block: var(--space-xl);
}

.team-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.team-member__photo {
	width: 100%;
	max-width: 14rem;
	height: auto;
	margin-bottom: var(--space-md);
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	object-fit: cover;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}

.team-member:hover .team-member__photo {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.team-member__name {
	color: var(--color-primary-dark);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
}

.team-member__job {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.press-list {
	display: grid;
	gap: var(--space-lg);
	margin-block: var(--space-xl);
}

.press-item {
	display: grid;
	gap: var(--space-lg);
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 48em) {

	.press-item {
		grid-template-columns: 12rem 1fr;
		align-items: center;
	}
}

.press-item__logo img {
	max-height: 6rem;
	object-fit: contain;
}

.press-item__title {
	font-size: var(--text-h4);
}

.location-box {
	display: grid;
	gap: var(--space-lg);
	margin-block: var(--space-xl);
	padding: var(--space-xl);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

@media (min-width: 64em) {

	.location-box {
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
	}
}

.location-box__line {
	display: flex;
	gap: var(--space-sm);
}

.location-box__line .icon {
	margin-top: 0.2em;
	color: var(--color-gold);
}

.location-box__map iframe {
	width: 100%;
	border-radius: var(--radius-md);
}

.sitemap-list {
	columns: 18rem;
	column-gap: var(--space-xl);
}

/* Two-column card grid and cards without a link wrapper (text cards). */
@media (min-width: 64em) {

	.card-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.card--text .card__body {
	gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   12.2 Gallery & lightbox
   Core Gallery block shown as an even grid of cropped photos. Set the block
   to "Link to: Media File" and js/lightbox.js opens the photos in a viewer.
   -------------------------------------------------------------------------- */

/* "#individual-image" matches core's own selector so these widths win. */
.entry-content .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	margin-block: var(--space-xl);
}

@media (min-width: 48em) {

	.entry-content .wp-block-gallery.has-nested-images {
		gap: var(--space-md);
	}
}

@media (min-width: 64em) {

	.entry-content .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(3, 1fr);
	}
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 3 / 2;
	box-shadow: var(--shadow-sm);
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.entry-content .wp-block-gallery figure.wp-block-image a {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.entry-content .wp-block-gallery figure.wp-block-image a:hover img,
.entry-content .wp-block-gallery figure.wp-block-image a:focus-visible img {
	transform: scale(1.05);
}

.entry-content .wp-block-gallery figure.wp-block-image a:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: -3px;
}

/* The viewer itself: a full-screen <dialog> built by js/lightbox.js. */
.has-lightbox {
	overflow: hidden;
}

.lightbox {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(6, 22, 30, 0.97);
	color: var(--color-white);
}

.lightbox::backdrop {
	background: transparent;
}

.lightbox[open] {
	display: grid;
	place-items: center;
	animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
	from { opacity: 0; }
}

.lightbox__figure {
	display: grid;
	gap: var(--space-sm);
	justify-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 4rem var(--gutter);
	place-content: center;
}

.lightbox__image {
	max-width: min(100%, 75rem);
	max-height: calc(100dvh - 9rem);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	object-fit: contain;
	transition: opacity var(--transition);
}

.lightbox.is-loading .lightbox__image {
	opacity: 0.3;
}

.lightbox__caption {
	color: var(--color-primary-tint);
	font-size: var(--text-md);
	text-align: center;
}

.lightbox__count {
	position: absolute;
	top: var(--space-lg);
	left: var(--gutter);
	margin: 0;
	color: var(--color-primary-tint);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.lightbox__button {
	position: absolute;
	display: grid;
	width: 3rem;
	height: 3rem;
	padding: 0;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}

.lightbox__button:hover,
.lightbox__button:focus-visible {
	border-color: var(--color-gold-bright);
	background: rgba(255, 255, 255, 0.18);
}

.lightbox__button:focus-visible {
	outline: 2px solid var(--color-gold-bright);
	outline-offset: 2px;
}

.lightbox__button[hidden] {
	display: none;
}

.lightbox__button svg {
	width: 1.375rem;
	height: 1.375rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lightbox__close {
	top: var(--space-md);
	right: var(--gutter);
}

/* Arrows sit at the bottom on phones (thumb reach), at the sides on wider screens. */
.lightbox__prev,
.lightbox__next {
	bottom: var(--space-lg);
}

.lightbox__prev {
	left: calc(50% - 3.5rem);
}

.lightbox__next {
	right: calc(50% - 3.5rem);
}

@media (min-width: 48em) {

	.lightbox__prev,
	.lightbox__next {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	.lightbox__prev {
		left: var(--gutter);
	}

	.lightbox__next {
		right: var(--gutter);
	}

	.lightbox__figure {
		padding-inline: 5.5rem;
	}
}

/* ==========================================================================
   13. FOOTER
   Markup: footer.php. Column headings are the names of the footer menus.
   ========================================================================== */

.site-footer {
	margin-top: 0;
	padding-block: var(--space-2xl);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--color-primary-dark);
	color: rgba(255, 255, 255, 0.8);
}

/* Brand column + up to three menu columns. */
.site-footer__columns {
	display: grid;
	gap: var(--space-xl);
	margin-bottom: var(--space-2xl);
}

@media (min-width: 48em) {

	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {

	/* Astro footer: brand, three link columns, contact + seals. */
	.site-footer__columns {
		grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr;
		gap: var(--space-2xl);
	}
}

/* The logo sits on a white tile so it reads on the dark background. */
.site-footer__logo {
	display: inline-block;
	margin-bottom: var(--space-lg);
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.site-footer__logo .custom-logo {
	width: auto;
	height: 3rem;
}

.site-footer__contact-col .site-footer__badges {
	margin-top: var(--space-lg);
}

.site-footer__heading {
	margin-bottom: var(--space-lg);
	color: var(--color-primary-tint);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* Site name in place of a logo, and the contact lines under the blurb. */
.site-footer__name {
	display: block;
	margin-bottom: var(--space-lg);
	color: var(--color-primary-tint);
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	font-weight: 600;
}

.site-footer__contact li {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.site-footer__contact .icon {
	color: var(--color-primary-tint);
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__nav li {
	margin-bottom: 0.75rem;
}

.site-footer a:not(.btn) {
	color: inherit;
	text-decoration: none;
}

.site-footer a:not(.btn):hover {
	color: var(--color-primary-tint);
}

/* Subheadings inside a footer column ("#" menu items), e.g. "Primary Services". */
.site-footer__subheading {
	display: block;
	margin: var(--space-lg) 0 var(--space-sm);
	color: var(--color-gold-bright);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.site-footer__nav li:first-child > .site-footer__subheading {
	margin-top: 0;
}

.site-footer__nav .sub-menu li {
	margin-bottom: 0.5rem;
}

/* Accreditation badges under the footer tagline. */
.site-footer__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.site-footer__badge {
	width: auto;
	height: 4.5rem;
}

.site-footer__credit {
	flex-basis: 100%;
}

/* Copyright and legal links. */
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md) var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.site-footer__legal p {
	margin: 0;
}

/* Privacy Policy and Terms links, right-aligned on the copyright line. */
.site-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
	margin-left: auto;
}

.site-footer .site-footer__policies a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer .site-footer__policies a:hover {
	color: var(--color-white);
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
}

/* Leave room so the floating contents button never covers the footer text. */
@media (max-width: 63.999em) {

	.has-toc .site-footer {
		padding-bottom: calc(var(--space-2xl) + 3rem);
	}
}


/* ==========================================================================
   14. LEGACY CONTENT
   Existing page content carries colour classes from the previous theme
   (Astra). They are mapped to this theme's palette here so that content
   displays correctly without being edited. Safe to delete once no content
   uses a "has-ast-global-color" class any more.
   ========================================================================== */

.has-ast-global-color-0-color { color: var(--color-gold-bright); }
.has-ast-global-color-1-color { color: var(--color-primary); }
.has-ast-global-color-2-color { color: var(--color-primary-darkest); }
.has-ast-global-color-3-color { color: var(--color-text-muted); }
.has-ast-global-color-4-color { color: var(--color-surface); }
.has-ast-global-color-5-color { color: var(--color-white); }
.has-ast-global-color-6-color { color: var(--color-surface-tint); }
.has-ast-global-color-7-color { color: var(--color-accent); }
.has-ast-global-color-8-color { color: var(--color-primary-tint); }

.has-ast-global-color-0-background-color { background-color: var(--color-gold-bright); }
.has-ast-global-color-1-background-color { background-color: var(--color-primary); }
.has-ast-global-color-2-background-color { background-color: var(--color-primary-darkest); }
.has-ast-global-color-3-background-color { background-color: var(--color-text-muted); }
.has-ast-global-color-4-background-color { background-color: var(--color-surface); }
.has-ast-global-color-5-background-color { background-color: var(--color-white); }
.has-ast-global-color-6-background-color { background-color: var(--color-surface-tint); }
.has-ast-global-color-7-background-color { background-color: var(--color-accent); }
.has-ast-global-color-8-background-color { background-color: var(--color-primary-tint); }

/* Highlighted text inside old lists used a colour class, not a background. */
mark.has-inline-color {
	background: none;
}


/* ==========================================================================
   15. ACCESSIBILITY
   ========================================================================== */

/* Text for screen readers only. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
	word-wrap: normal !important;
}

/* The skip link becomes visible when focused with the keyboard. */
.skip-link:focus {
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 100;
	width: auto;
	height: auto;
	padding: var(--space-md) var(--space-lg);
	clip: auto;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	color: var(--color-primary-dark);
	font-weight: 700;
}

/* Respect the "reduce motion" system setting. */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

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


/* ==========================================================================
   16. MOTION
   Subtle movement. Scroll reveals and accordions are driven by js/motion.js;
   the rest is CSS. Everything here is switched off by the reduced-motion
   rule in section 15, and motion.js does nothing for those visitors.
   ========================================================================== */

/* Heroes: text rises in on load, the photo settles from a slight zoom. */
@keyframes nrg-rise {

	from {
		opacity: 0;
		translate: 0 1rem;
	}
}

@keyframes nrg-settle {

	from {
		scale: 1.06;
	}
}

@keyframes nrg-fade {

	from {
		opacity: 0;
	}
}

.hero__content > *,
.page-hero .container > * {
	animation: nrg-rise 0.7s cubic-bezier(0.25, 0.8, 0.35, 1) both;
}

.hero__content > :nth-child(2),
.page-hero .container > :nth-child(2) {
	animation-delay: 0.1s;
}

.hero__content > :nth-child(3),
.page-hero .container > :nth-child(3) {
	animation-delay: 0.2s;
}

.hero__content > :nth-child(n + 4),
.page-hero .container > :nth-child(n + 4) {
	animation-delay: 0.3s;
}

.hero__image,
.page-hero__image {
	animation: nrg-settle 1.8s ease-out both;
}

/* Scroll reveal: js/motion.js adds .reveal, then .is-visible in view.
   Uses `translate`, not `transform`, so card hover lifts keep working; the
   stagger delay applies to the reveal only, never to hover effects. */
.reveal {
	transition:
		opacity 0.7s ease,
		translate 0.7s cubic-bezier(0.25, 0.8, 0.35, 1),
		transform var(--transition),
		box-shadow var(--transition);
	transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s;
}

.reveal:not(.is-visible) {
	opacity: 0;
	translate: 0 1.5rem;
}

/* Accordions (<details>): motion.js animates the height; the body fades in
   and the chevron turns back as soon as a row starts closing. */
details.is-animating {
	overflow: hidden;
}

details.is-animating:not(.is-closing) > :not(summary) {
	animation: nrg-fade 0.35s ease both;
}

.entry-content .wp-block-details.is-closing summary::after,
.disclosure.is-closing .disclosure__icon {
	transform: none;
}

/* Mobile menu panel drops in. */
@media (max-width: 63.999em) {

	.main-nav.is-open {
		animation: nrg-rise 0.25s ease both;
	}
}


/* ==========================================================================
   17. SERVICE PAGES
   Programs, therapies, what we treat, detox and local pages, and their
   archives. Markup: template-parts/single-service.php, archive-service.php,
   related-links.php
   ========================================================================== */

/* One reading column, left-aligned under the hero text. On wide screens the
   side rail (admissions card + "On this page") fills the space to its right. */
.service-article {
	max-width: 52rem;
}

/* Side rail. Shown from 75em (1200px) up so the reading column never gets
   squeezed; below that the floating contents button and the hero call
   button cover the same jobs. Markup: template-parts/service-rail.php */
.service-rail {
	display: none;
}

@media (min-width: 75em) {

	.layout-rail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 19rem;
		gap: var(--space-2xl);
	}

	.layout-rail > .service-article {
		max-width: none; /* Fill up to the rail. */
		min-width: 0; /* Lets wide content (tables, embeds) shrink instead of overflowing. */
	}

	.service-rail {
		display: block;
		align-self: stretch; /* Full height of the article, so the inner part can stick. */
	}

	/* Never taller than the screen: the contents card shrinks and its list
	   scrolls instead (see .rail-card--toc below). */
	.service-rail__inner {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
		position: sticky;
		top: calc(var(--header-height) + var(--space-lg));
		max-height: calc(100vh - var(--header-height) - var(--space-lg) * 2);
	}

	.service-rail__inner > .rail-card--cta,
	.service-rail__inner > .rail-card--location {
		flex-shrink: 0;
	}

	.rail-card--toc {
		display: flex;
		flex-direction: column;
		min-height: 9rem;
	}

	/* The rail lists the headings, so the floating button isn't needed. */
	.has-rail .toc {
		display: none;
	}
}

.rail-card {
	padding: var(--space-lg);
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}

.rail-card[hidden] {
	display: none;
}

.rail-card--cta {
	display: grid;
	gap: var(--space-sm);
	border-color: transparent;
	background: var(--color-primary-dark);
	box-shadow: var(--shadow-md);
	color: rgba(255, 255, 255, 0.85);
}

.rail-card__eyebrow {
	margin: 0;
	color: var(--color-gold);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rail-card__title {
	margin: 0;
	color: var(--color-primary-tint);
	font-size: var(--text-h4);
}

.rail-card--cta {
	padding: 1.75rem var(--space-lg);
}

/* Team photos + note at the foot of the admissions card. */
.rail-card__team {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rail-card__team p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.rail-card__faces {
	display: flex;
	flex: none;
}

.rail-card__face {
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--color-primary-dark);
	border-radius: 50%;
	object-fit: cover;
}

.rail-card__face + .rail-card__face {
	margin-left: -0.625rem;
}

/* Location card. */
.rail-card__address {
	display: flex;
	gap: var(--space-sm);
	margin: 0 0 var(--space-sm);
	color: var(--color-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.rail-card__address .icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.15em;
	color: var(--color-accent);
}

.rail-card__link {
	padding-left: 1.625rem;
	color: var(--color-accent);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.rail-card__link:hover {
	text-decoration: underline;
}

.rail-card__text {
	margin: 0 0 var(--space-sm);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.rail-card__heading {
	margin: 0 0 var(--space-sm);
	color: var(--color-primary-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Long pages: the list scrolls inside the card so the rail fits the screen. */
.rail-card--toc .toc__list {
	position: relative; /* Scroll-position reference for js/toc.js. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Text-only card (no featured image): a check mark before the title, as on
   the Astro program cards. */
.card--text .card__body {
	padding: var(--space-xl) var(--space-lg);
}

.card--text {
	border-color: transparent;
	box-shadow: var(--shadow-md);
}

/* Crisis notice (988), above the content on pages that ask for it. */
.crisis-notice {
	margin-bottom: var(--space-xl);
	padding: var(--space-lg);
	border-radius: var(--radius-md);
	background: var(--color-danger-bg);
	color: var(--color-danger-text);
}

.crisis-notice p:last-child {
	margin-bottom: 0;
}

.crisis-notice a {
	color: inherit;
	font-weight: 700;
}

/* "More in ..." links at the end of a service page. */
.related-links {
	border-top: 1px solid var(--color-border);
	background: var(--color-white);
}

.related-links__title {
	margin-bottom: var(--space-lg);
	font-size: var(--text-h3);
}

.related-links__list {
	display: grid;
	gap: var(--space-sm) var(--space-lg);
	margin: 0 0 var(--space-lg);
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {

	.related-links__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {

	.related-links__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.related-links__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 0.875rem var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--transition), transform var(--transition);
}

.related-links__list a:hover {
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
	transform: translateY(-2px);
}

.related-links__list .icon {
	width: 1rem;
	height: 1rem;
	color: var(--color-accent);
}

.related-links__all {
	margin: 0;
}


/* ==========================================================================
   18. CONVERTED CONTENT
   Classes the Fusion-to-blocks conversion put on the old page sections
   (tools/convert_fusion.py). They can also be picked in the editor under
   Advanced > Additional CSS class(es).
   ========================================================================== */

/* Highlighted words in headings (were inline Avada colours). */
.entry-content .accent {
	color: var(--color-accent);
}

/* Check-mark list (was a Fusion checklist). */
.entry-content .is-style-check {
	padding-left: 0;
	list-style: none;
}

.entry-content .is-style-check li {
	position: relative;
	margin-bottom: var(--space-sm);
	padding-left: 2rem;
}

.entry-content .is-style-check li::before {
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--color-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
	content: "";
}

/* Card grid (was "headingbox" / "state-tile" / "locationservice-box" columns). */
.entry-content .wp-block-columns.is-style-cards {
	flex-wrap: wrap !important;
	gap: var(--space-lg);
}

.entry-content .wp-block-column.is-style-card {
	flex: 1 1 15rem !important;
	padding: var(--space-lg);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}

.entry-content .is-style-card > :last-child {
	margin-bottom: 0;
}

.entry-content .is-style-card h2,
.entry-content .is-style-card h3,
.entry-content .is-style-card h4 {
	font-size: var(--text-h4);
}

/* Call-to-action band (was a "*-cta" / "call-bar" section): navy box,
   white text, sky-cyan button, as at the end of the Astro pages. */
.entry-content .wp-block-group.is-style-band {
	margin-block: var(--space-2xl);
	padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
	border-radius: var(--radius-lg);
	background: var(--color-primary-dark);
	color: rgba(255, 255, 255, 0.88);
	text-align: center;
}

.entry-content .is-style-band :is(h2, h3, h4) {
	color: var(--color-white);
}

.entry-content .is-style-band a:not(.wp-block-button__link) {
	color: var(--color-primary-tint);
}

.entry-content .is-style-band .wp-block-buttons {
	justify-content: center;
}

.entry-content .is-style-band .wp-block-button__link {
	background: var(--color-gold);
	color: var(--color-primary-dark);
}

/* Buttons written in the content: the theme's pill style. */
.entry-content .wp-block-button__link {
	display: inline-flex;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--transition), transform var(--transition);
}

.entry-content .wp-block-button__link:hover {
	background: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
}

/* Columns of image + text: images fill their column with rounded corners. */
.entry-content .wp-block-column .wp-block-image img {
	width: 100%;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

/* Rows of four or more columns are too narrow in the reading column:
   let them wrap, two or three to a line. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
	flex-wrap: wrap !important;
	gap: var(--space-lg);
}

.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column {
	flex: 1 1 14rem !important;
}


/* Two-photo collage (was Avada image frames sized to 300px, the first nudged
   right, the second pulled up over it). Column class: is-style-collage. */
.entry-content .wp-block-column.is-style-collage {
	display: flex;
	flex-direction: column;
}

.entry-content .is-style-collage > .wp-block-image {
	width: min(300px, 62%);
	margin: 0;
}

.entry-content .is-style-collage > .wp-block-image:first-child {
	margin-left: min(90px, 10%);
}

.entry-content .is-style-collage > .wp-block-image + .wp-block-image {
	position: relative;
	z-index: 1;
	align-self: flex-end;
	margin-top: calc(-1 * min(200px, 28vw));
}

.entry-content .is-style-collage img {
	width: 100%;
	height: auto;
}

/* Logo strip (was an Avada image carousel of insurance / accreditation
   logos). Gallery class: is-style-logos. Logos keep their shape, wrap and
   centre instead of being cropped into square tiles. */
.entry-content .wp-block-gallery.has-nested-images.is-style-logos {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg) var(--space-xl) !important;
	margin-block: var(--space-xl);
}

/* Same "#individual-image" trick as 12.2 so the photo-tile look is undone. */
.entry-content .wp-block-gallery.is-style-logos figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	overflow: visible;
	border-radius: 0;
	aspect-ratio: auto;
	box-shadow: none;
}

.entry-content .wp-block-gallery.is-style-logos figure.wp-block-image img {
	width: auto !important;
	max-width: 160px;
	height: auto !important;
	max-height: 64px !important;
	object-fit: contain !important;
}

/* ==========================================================================
   19. HOME PAGE
   Classes the home page content uses inside its Section blocks.
   ========================================================================== */

/* Hero note with images, e.g. the Google Reviews logo + stars + "(5.0)". */
.hero__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
}

.hero__note-image {
	width: auto;
	height: 1.75rem;
}

/* Card row: a core Group "home-cards" holding Groups "home-card". */
.entry-content .home-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--space-lg);
	margin-block: var(--space-xl) 0;
}

.entry-content .home-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 2rem;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	text-align: left;
	transition: transform var(--transition), box-shadow var(--transition);
}

.entry-content .home-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

/* On a dark Section (e.g. "Addictions We Treat"): glass tiles, as the
   mockups' "Therapeutic Modalities" row. */
.section-block--dark .home-card {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.section-block--dark .home-card:hover {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

.entry-content .section-block--dark .home-card h3 {
	color: var(--color-white);
}

.entry-content .section-block--dark .home-card p {
	color: rgba(255, 255, 255, 0.78);
}

.entry-content .section-block--dark .home-card .text-link {
	color: var(--color-primary-tint);
}

.entry-content .home-card h3 {
	margin-top: 0;
	margin-bottom: var(--space-sm);
	font-size: var(--text-h4);
}

.entry-content .home-card p {
	margin-bottom: var(--space-md);
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

/* "Learn More" sits at the foot of every card, whatever the text length. */
.entry-content .home-card .home-card__more {
	margin: auto 0 0;
}

.entry-content .home-card .wp-block-image {
	margin: 0 0 var(--space-md);
}

.entry-content .home-card .wp-block-image img {
	width: auto;
	max-width: 9rem;
	height: 3rem;
	border-radius: 0;
	object-fit: contain;
}

/* Second intro paragraph under a centred Section heading. */
.entry-content .home-lead {
	max-width: var(--width-content);
	margin-inline: auto;
	color: var(--color-text-muted);
}

/* Check list in two columns (therapies, city guides). */
.entry-content .is-style-check.is-two-col {
	column-gap: var(--space-xl);
}

@media (min-width: 48em) {

	.entry-content .is-style-check.is-two-col {
		columns: 2;
	}
}

.entry-content .is-style-check.is-two-col li {
	break-inside: avoid;
}

/* Accreditation badges beside their text. */
.entry-content .home-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xl);
}

.entry-content .home-badges .wp-block-image {
	margin: 0;
}

.entry-content .home-badges img {
	width: auto;
	height: 9rem;
	border-radius: 0;
	object-fit: contain;
}

/* Insurance logos: whole logos, never cropped. */
.entry-content .logo-strip.home-insurance img {
	max-width: 10rem;
	height: 4rem;
}

/* Buttons centred under a block (e.g. "See More Articles"). */
.entry-content--full > .wp-block-buttons.is-content-justification-center {
	margin-bottom: var(--space-section);
}

/* Sources on the home page: same width and gutters as the sections. */
.entry-content--full > .wp-block-details {
	width: min(100% - 2 * var(--gutter), var(--width-site) - 2 * var(--gutter));
	max-width: none;
	margin: 0 auto var(--space-xl);
	padding-inline: 0;
}


/* ==========================================================================
   20. LANDING PAGES
   Paid-ad pages using the Landing Page template (/rehab-lp/, /detox-lp/).
   The content is ordinary blocks; these rules cover the slim header and
   footer and the few pieces only these pages have.
   Markup: template-landing.php, header-landing.php, footer-landing.php,
   built by tools/build_landing.py.
   ========================================================================== */

/* Header: logo on the left, phone and "Verify Insurance" on the right, at
   every width (there is no menu to make room for). */
.site-header--landing .site-header__phone {
	display: inline-flex;
}

@media (max-width: 29.999em) {

	/* Phones: the number becomes an icon so both actions fit. */
	.site-header--landing .site-header__phone span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.site-header--landing .site-header__cta {
	display: inline-flex;
}

/* Jump links under the insurance logos ("Program Details", ...). */
.landing-jump-links {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.landing-jump-links .wp-block-buttons {
	gap: var(--space-sm);
}

/* Anchored sections stop below the sticky header. */
.landing-main [id] {
	scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

/* Phase cards: the "Goal:" line closes each card. */
.landing-main .phase-goal {
	margin-top: auto;
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.landing-main .is-style-card:has(.phase-goal) {
	display: flex;
	flex-direction: column;
}

.landing-main .section-note {
	margin-top: var(--space-xl);
	color: var(--color-text-muted);
}

/* Testimonials. */
.testimonial-card {
	display: flex;
	flex-direction: column;
}

.testimonial-stars {
	margin-bottom: var(--space-sm);
	color: var(--color-gold-dark);
	font-size: 1.25rem;
	letter-spacing: 0.15em;
}

.testimonial-quote {
	flex-grow: 1;
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.testimonial-name {
	margin-bottom: 0;
	color: var(--color-primary-dark);
}

.testimonial-meta {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* Form section: text and seal on the navy band, the form in a white card. */
.landing-form-intro h2 {
	color: var(--color-white);
}

.landing-form-intro p {
	color: rgba(255, 255, 255, 0.85);
}

.landing-form-intro .wp-block-button__link {
	background: var(--color-gold);
	color: var(--color-primary-dark);
}

.landing-form-intro .wp-block-button__link:hover {
	background: var(--color-gold-dark);
	color: var(--color-primary-dark);
}

.landing-form-intro .landing-seal {
	width: 6rem;
	margin: var(--space-xl) 0 var(--space-sm);
}

.landing-form-intro .landing-seal-caption {
	color: var(--color-primary-tint);
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	line-height: 1.3;
}

.landing-form-card {
	padding: var(--space-xl);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	color: var(--color-text);
}

@media (min-width: 48em) {

	.landing-form-card {
		padding: var(--space-2xl);
	}
}

/* Footer: just the legal bar. */
.site-footer--landing {
	padding-block: var(--space-lg);
}

.site-footer--landing .site-footer__legal {
	padding-top: 0;
	border-top: 0;
}