/*!
Theme Name: Southeast Addiction Center
Theme URI: https://southeastaddiction.com/
Author: NRG
Description: Lean custom theme for Southeast Addiction Center. Built on Underscores, with ACF blocks and custom post types - no page builder.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: southeastaddiction
*/

/* ==========================================================================
   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

   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 */
	--color-primary: #244d61;        /* Ocean slate: header bar, buttons, headings */
	--color-primary-dark: #063649;   /* Deeper ocean: headings, dark sections */
	--color-primary-darkest: #16313e;/* Footer, button hover */
	--color-primary-tint: #c2e8ff;   /* Light blue text on dark backgrounds */
	--color-accent: #3c6378;         /* Eyebrow labels, link hover */
	--color-gold: #e59b0b;           /* Call-to-action buttons */
	--color-gold-bright: #ffb015;    /* Gold on dark backgrounds */
	--color-gold-dark: #805600;      /* Gold button hover */

	/* Neutrals */
	--color-text: #191c1d;           /* Body copy */
	--color-text-muted: #41484c;     /* Secondary copy */
	--color-white: #ffffff;
	--color-surface: #f8f9fa;        /* Page background */
	--color-surface-tint: #f2f4f5;   /* Alternating section background */
	--color-surface-mist: #f4f7f8;   /* Inset panels */
	--color-border: #dce3e6;

	/* Typography */
	--font-serif: "Lora", Georgia, "Times New Roman", serif;          /* Headings */
	--font-sans: "Source Sans 3", -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.125rem, 1.4rem + 3vw, 3rem); /* 34px 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.75rem;  /* Cards */
	--radius-lg: 1rem;     /* Large media */
	--radius-pill: 999px;  /* Buttons, chips */

	--shadow-sm: 0 2px 8px -2px rgba(36, 77, 97, 0.1);
	--shadow-md: 0 8px 24px -4px rgba(36, 77, 97, 0.16);
	--shadow-lg: 0 20px 40px -12px rgba(22, 49, 62, 0.3);

	--transition: 0.2s ease;
}

@media (min-width: 48em) {

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


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

*,
*::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;
}

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 seac_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-white);
}

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

.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-sm);
	color: var(--color-accent);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	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: rgba(36, 77, 97, 0.08);
	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: calc(var(--header-height) + 0.75rem);
	--logo-height: 3.75rem;
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 64em) {

	.site-header {
		--header-now: calc(var(--header-height) + 1.5rem);
		--logo-height: 4.5rem;
	}
}

.site-header.is-scrolled {
	--header-now: var(--header-height);
	--logo-height: 3rem;
}

/* 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;
	align-items: center;
	gap: var(--space-md);
}

.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;
}

.site-header__cta {
	display: none;
}

@media (min-width: 48em) {

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

/* Between 1024px and 1280px the navigation needs the room: below 1100px
   the phone link is hidden, above it shows its icon only (the number stays
   available to screen readers). */
@media (min-width: 64em) and (max-width: 68.749em) {

	.site-header__phone {
		display: none;
	}
}

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

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

/* 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: small screens -----------------------------------------------
   A panel that drops down below the header when the menu button is pressed.
   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-md);
	}

	.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-lg) * -1);
		gap: var(--space-xl);
		min-width: 16rem;
		padding: var(--space-lg);
		border: 1px solid var(--color-border);
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		background: var(--color-white);
		box-shadow: var(--shadow-md);
		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;
		font-weight: 400;
		white-space: nowrap;
	}

	/* ...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-border);
		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;
	}
}


/* ==========================================================================
   6. PAGE HERO
   Dark band at the top of every inner page: title and, when the page has a
   featured image, that image behind a gradient. Below it, a light bar with
   the breadcrumbs and, on blog posts, the category, date and bylines.
   Markup: template-parts/page-hero.php
   ========================================================================== */

.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-2xl);
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.page-hero--has-image {
	padding-block: clamp(4rem, 3rem + 6vw, 7.5rem);
}

/* Blog posts: only the title sits in the hero, so it is slimmer. */
.page-hero--compact,
.page-hero--compact.page-hero--has-image {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

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

/* Gradient over the image so the text stays readable. */
.page-hero--has-image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(22, 49, 62, 0.95), rgba(6, 54, 73, 0.75) 55%, rgba(6, 54, 73, 0.3));
	content: "";
}

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

.page-hero__title {
	max-width: 50rem;
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-serif);
	font-size: var(--text-h1);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.page-hero__intro {
	max-width: 40rem;
	margin: var(--space-md) 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--text-lg);
}

/* Bar under the hero: breadcrumbs, then (blog posts) the post details. */
.page-subbar {
	padding-block: 0.875rem;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-white);
}

.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-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.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 .seac-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. */
.entry-content .seac-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 even when a page has no featured image;
   the ocean colour then shows as a placeholder. */
.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;
}

.hero::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(22, 49, 62, 0.95), rgba(6, 54, 73, 0.75) 50%, rgba(6, 54, 73, 0));
	content: "";
}

.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);
}

.hero__note {
	margin: var(--space-lg) 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: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--shadow-md);
	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: rgba(6, 54, 73, 0.1);
	color: var(--color-primary-dark);
}

.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 seac_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: 26rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-primary-dark);
	box-shadow: var(--shadow-sm);
	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, rgba(22, 49, 62, 0.95), rgba(6, 54, 73, 0.45) 55%, rgba(6, 54, 73, 0));
	content: "";
}

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

.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. Florida "Treatment Options"): a framed panel. */
.entry-content .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 .image-card {
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
}

.entry-content .image-card::after {
	content: none;
}

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

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

.entry-content .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: 1fr 1fr;
	}

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

.feature-split__image {
	width: 100%;
	border: 1px solid var(--color-border);
	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);
	padding: 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-mist);
	font-size: 0.9375rem;
	font-weight: 700;
	transition: border-color var(--transition);
}

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

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

.feature-list__icon {
	display: flex;
	padding: 0.625rem;
	border-radius: 50%;
	background: rgba(6, 54, 73, 0.1);
	color: var(--color-primary-dark);
}

/* Inside page text (e.g. Florida "Why Choose"). */
.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;
}

.section-block__content:empty {
	display: none;
}

.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-white) !important;
	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);
}

/* Forms 2 and 8 have their own "Confirm" submit button in an HTML field, in
   line with the other inputs. The old theme hid the footer button; so do we. */
#gform_wrapper_2 .gform_footer,
#gform_wrapper_8 .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: var(--color-primary-tint);
	font-size: var(--text-lg);
}

.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. */
.entry-content .cta-band {
	margin-block: var(--space-2xl);
	padding: var(--space-2xl) var(--space-lg);
	border-radius: var(--radius-lg);
}


/* 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;
}

/* ==========================================================================
   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;
}

/* 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 {
	padding-block: var(--space-2xl);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--color-primary-darkest);
	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) {

	.site-footer__columns {
		grid-template-columns: 1.25fr repeat(4, 1fr);
		gap: var(--space-xl);
	}
}

/* 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.75rem;
	border-radius: var(--radius-sm);
	background: var(--color-white);
}

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

.site-footer__heading {
	margin-bottom: var(--space-lg);
	color: var(--color-white);
	font-size: var(--text-h4);
}

.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;
	}
}


/* ==========================================================================
   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 seac-rise {

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

@keyframes seac-settle {

	from {
		scale: 1.06;
	}
}

@keyframes seac-fade {

	from {
		opacity: 0;
	}
}

.hero__content > *,
.page-hero .container > * {
	animation: seac-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: seac-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: seac-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: seac-rise 0.25s ease both;
	}
}