/*
 * Front-page bands: pillar cards and the Adelaide clinics grid.
 *
 * Built to the client's mockup (Website Update Front page, Drive), measured rather than
 * eyeballed: colours sampled off the image, then mapped back to the brand tokens they are
 * a compressed rendering of. Type comes from `config/brand.yaml` roles so these bands sit
 * in the site's scale rather than beside it.
 *
 * Selectors are all `.anr-` prefixed and every rule is scoped under `.anr-band`, so nothing
 * here can reach the theme's own components.
 */

/* The tokens, shared by every component in this sheet. Separated from the band's own
   layout below, because a component that wants the palette should not also inherit 96px of
   vertical padding - which is precisely what happened when `.anr-cards` was first added to
   this selector, and what `anr-check-styles` then found: on /services/ the card's
   `--anr-line` was undefined, so `border: 1px solid var(--anr-line)` fell back to
   currentColor and the hairline rendered grey. One page, one component, two appearances. */
.anr-band,
.anr-conditions,
.anr-filter,
.anr-cards,
body:is(.archive, .blog) .blog-hentry {
	--anr-blue: #304495;
	--anr-green: #75c043;
	/* Brand green as text on white is 2.24:1 and fails AA at every size. This is the same
	   hue and saturation darkened to 4.55:1, declared as `secondary_accessible`. */
	--anr-green-text: #4f832c;
	--anr-heading: #070a22;
	--anr-body: #595959;
	--anr-hairline: #e5e5e5;
	--anr-tint: #f2f6fd;

	/* Added with the card component. Ink and muted are the text pair the cards and the
	   filter bar use; line is the hairline that borders a card; control is the height every
	   chip and input in the toolbar shares. */
	--anr-ink: #1f2b45;
	--anr-muted: #6b7891;
	--anr-line: #dde4ef;
	--anr-control: 46px;
}

.anr-band {
	box-sizing: border-box;
	padding: 96px 0;
}

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

.anr-band--clinics {
	background: var(--anr-tint);
}

/*
 * The band sits inside the theme's Services row, which paints itself #eaeaea. The mockup
 * has this band white, so it paints its own background rather than inheriting one. It is a
 * `stretch_row_content_no_spaces` row, so this reaches the full viewport width the way the
 * mockup does.
 */
.anr-band--pillars {
	background: #fff;
	/*
	 * Less top padding than the 96px the other band carries, because this one now abuts
	 * the hero. In the mockup the eyebrow sits almost on the hero's bottom edge - the gap
	 * measures under 10px there - and 96px of white between a photograph and the first
	 * heading is what was pushing the cards below the fold on a 900px-tall laptop, which
	 * is the whole thing Nicole asked to fix.
	 *
	 * Cut again from 56px to 28px on 2026-08-24, with the hero, because 56 was not enough:
	 * measured at 1440x900 the cards still ran from 681 to 1015, so a third of each card
	 * was under the fold and Nicole said so ("MAKE SMALLER again to see NVest / neuro /
	 * concussion tiles"). The arithmetic on a 900px laptop is unforgiving: 147px of header
	 * and green banner, a 334px card, and everything else has to fit in what is left.
	 */
	padding-top: 28px;
}

.anr-band__inner {
	margin: 0 auto;
	/* 1200 rather than the theme's 1170, because the 15px gutters come out of it: the
	   content box then measures 1170, which is the width the mockup's grid solves for
	   (four 269px cards and three 31px gaps). At 1170 the cards land at 262 and
	   "Christies Beach Clinic" wraps, which nothing in the mockup does. */
	max-width: 1200px;
	padding: 0 15px;
}

/* --- Eyebrow, with the rules either side ------------------------------------------- */

.anr-eyebrow {
	align-items: center;
	color: var(--anr-green-text);
	display: flex;
	font-family: Rubik, sans-serif;
	font-size: 14px;
	font-weight: 500;
	gap: 22px;
	justify-content: center;
	letter-spacing: 2.8px;
	line-height: 1.25;
	margin: 0 0 18px;
	text-transform: uppercase;
}

/* The rules are decorative and must not be read out, so they are pseudo-elements on the
   flex parent rather than empty elements in the markup. */
.anr-eyebrow::before,
.anr-eyebrow::after {
	background: var(--anr-green);
	content: "";
	flex: 0 0 auto;
	height: 1px;
	opacity: 0.65;
	width: 116px;
}

.anr-band__title {
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	/* 24px, not the site's 36px h2. Derived from the mockup by ink WIDTH rather than
	   height: the heading measures 707px there, and this string renders 707px at 24px in
	   Poppins 600. Width is measured across ~54 glyphs, so antialiasing barely moves it;
	   the height-based estimate that preceded this read 28px and was 17% too big. */
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 auto 6px;
	text-align: center;
}

.anr-band__lead {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 34px;
	text-align: center;
}

.anr-band--pillars .anr-cards {
	margin-top: 30px;
}

/* --- Card grid ---------------------------------------------------------------------- */

.anr-cards {
	display: grid;
	gap: 26px;
}

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

/*
 * Four across, which is what the mockup draws and what the client's copy document
 * supports. The gap is 11.6% of a card's width in the mockup (24px on a 207px card); at a
 * 1170px container that solves to a 269px card and a 31px gap.
 */
.anr-cards--4 {
	gap: 31px;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1199px) {
	.anr-cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.anr-cards--4 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 991px) {
	.anr-cards--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.anr-band {
		padding: 64px 0;
	}

	.anr-cards--3 {
		grid-template-columns: 1fr;
	}

	.anr-eyebrow::before,
	.anr-eyebrow::after {
		width: 40px;
	}

	.anr-band__title {
		font-size: 28px;
	}
}

/* --- The card itself ---------------------------------------------------------------- */

/*
 * The mockup rounds these corners. Every other card, button, image and panel on the site is
 * square (`layout.border_radius_px: 0` in brand.yaml), so this is a deliberate departure
 * from the house style, taken because the mockup is the spec for these two new bands.
 */
.anr-card {
	background: #fff;
	border: 1px solid var(--anr-hairline);
	border-radius: 11px;
	box-shadow: 0 2px 12px rgba(7, 10, 34, 0.05);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.anr-card:hover,
a.anr-card:focus-visible {
	box-shadow: 0 10px 26px rgba(7, 10, 34, 0.1);
	transform: translateY(-3px);
}

/* --- Pillar cards ------------------------------------------------------------------- */

.anr-band--pillars .anr-card {
	align-items: center;
	/*
	 * 32/30/28, trimmed from 44/30/34 on 2026-08-24. The mockup draws roughly 44px above
	 * the icon, and that is what this was; it is spent here instead, because on an 800px
	 * browser viewport - which is what a 900px laptop screen actually gives you once the
	 * menu bar and Chrome's own chrome are taken out - those 18px are the difference
	 * between the three cards ending above the fold and ending just below it, and Nicole
	 * has now asked twice to see them without scrolling.
	 */
	padding: 32px 30px 28px;
	text-align: center;
}

/*
 * The accent rule. A pseudo-element rather than `border-top`, so the card's 8px radius is
 * not flattened at two corners by a 4px border on one side only.
 */
.anr-band--pillars .anr-card::before {
	background: var(--anr-accent);
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.anr-card--green {
	--anr-accent: var(--anr-green);
	--anr-accent-text: var(--anr-green-text);
}

.anr-card--blue {
	--anr-accent: var(--anr-blue);
	--anr-accent-text: var(--anr-blue);
}

.anr-card__badge {
	align-items: center;
	background: var(--anr-accent);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	height: 72px;
	justify-content: center;
	margin-bottom: 26px;
	width: 72px;
}

.anr-card__badge .anr-icon {
	height: 36px;
	width: 36px;
}

.anr-card__title {
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 14px;
}

.anr-card__desc {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 15px;
	line-height: 1.75;
	/* Pushes the CTA to the bottom so it aligns across all three cards regardless of how
	   many lines the description runs to. This is what `col-same-height` could not do. */
	flex: 1 1 auto;
	margin: 0 0 26px;
}

/* --- The call to action ------------------------------------------------------------- */

.anr-card__cta {
	align-items: center;
	color: var(--anr-accent-text, var(--anr-green-text));
	display: inline-flex;
	font-family: Rubik, sans-serif;
	/* 15px. "LEARN MORE" measures 112px in the mockup and renders 112px at 15px with this
	   tracking. Band 2's link is SMALLER at 13px, not larger: its cards are four across
	   rather than three, so everything in them is set down a step. */
	font-size: 15px;
	font-weight: 500;
	gap: 10px;
	letter-spacing: 1.6px;
	line-height: 1;
	margin-top: auto;
	text-decoration: none;
	text-transform: uppercase;
}

.anr-card__cta .anr-icon {
	height: 15px;
	transition: transform 0.25s ease;
	width: 15px;
}

.anr-card:hover .anr-card__cta .anr-icon,
.anr-card__cta:hover .anr-icon,
.anr-card__cta:focus-visible .anr-icon {
	transform: translateX(4px);
}

/* --- Clinic cards ------------------------------------------------------------------- */

.anr-clinic {
	--anr-accent: var(--anr-green);
	--anr-accent-text: var(--anr-green-text);
}

.anr-clinic__media {
	display: block;
	position: relative;
}

.anr-clinic__photo {
	background-position: center;
	background-size: cover;
	display: block;
	/* 58.9% - the mockup's photo is 122px tall on a 207px card. */
	padding-top: 58.9%;
}

/*
 * No clinic photo has been supplied yet - the brief asks for one per location and none
 * came with it. A branded panel is what shows until they arrive, rather than a stock
 * photograph of a building that is not theirs.
 */
.anr-clinic__photo--placeholder {
	align-items: center;
	background:
		radial-gradient(circle at 24% 20%, rgba(117, 192, 67, 0.18), transparent 58%),
		linear-gradient(135deg, #dde5f6 0%, #eef2fb 55%, #e3ebf9 100%);
	color: rgba(48, 68, 149, 0.28);
	display: flex;
	justify-content: center;
}

/* The glyph sits inside the padding-top box, which has no height of its own. */
.anr-clinic__photo--placeholder .anr-icon {
	height: 40px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
}

.anr-clinic__pin {
	align-items: center;
	background: #fff;
	border-radius: 50%;
	bottom: 0;
	box-shadow: 0 3px 10px rgba(7, 10, 34, 0.14);
	color: var(--anr-green);
	display: flex;
	/* 21.7% of the card's width in the mockup, and it straddles the photo edge two-thirds
	   above and one-third below rather than halfway. */
	height: 58px;
	justify-content: center;
	left: 23px;
	position: absolute;
	transform: translateY(33%);
	width: 58px;
}

.anr-clinic__pin .anr-icon {
	height: 28px;
	width: 28px;
}

/* The NEW flag on Grange: a green tab in the photo's top-right, square where it meets the
   card's corner so it sits flush inside the 11px radius. */
.anr-clinic__badge {
	background: var(--anr-green);
	border-radius: 0 11px 0 10px;
	color: #fff;
	font-family: Rubik, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.2px;
	line-height: 1;
	padding: 9px 14px;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	top: 0;
	z-index: 2;
}

.anr-clinic__body {
	/* Column flex with the CTA pushed to the bottom: the four cards are stretched to a
	   common height by the grid, so without this a longer clinic name would drag its own
	   address, phone and link down out of line with the other three. */
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 46px 23px 26px;
}

.anr-clinic__name {
	color: var(--anr-blue);
	/* 18px. "Christies Beach Clinic" measures 198px in the mockup and renders 198px at
	   18px; at 21px it renders 232px and wraps, which nothing in the mockup does. */
	font-size: 18px;
	margin-bottom: 14px;
}

.anr-clinic__address {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 16px;
}

.anr-clinic__phone {
	align-items: center;
	color: var(--anr-blue);
	display: flex;
	font-family: Rubik, sans-serif;
	font-size: 15px;
	gap: 10px;
	line-height: 1.6;
	margin: 0 0 24px;
}

.anr-clinic__phone .anr-icon {
	color: var(--anr-blue);
	flex: 0 0 auto;
	height: 17px;
	width: 17px;
}

.anr-clinic__phone a {
	color: inherit;
	text-decoration: none;
}

.anr-clinic__phone a:hover,
.anr-clinic__phone a:focus-visible {
	text-decoration: underline;
}

.anr-clinic__phone {
	margin-top: auto;
}

.anr-clinic .anr-card__cta {
	/* 13px: "VIEW CLINIC" measures 97px in the mockup against band 1's 112px. */
	font-size: 13px;
	letter-spacing: 1.5px;
}

.anr-clinic .anr-card__cta:hover,
.anr-clinic .anr-card__cta:focus-visible {
	text-decoration: underline;
}

/* The whole tile is the link. Nicole, 2026-08-24: "Can you make the whole tile a link ...
   rather than view the clinic?"

   Stretched link rather than an anchor around the card, because the card contains a `tel:`
   link and nested anchors are invalid HTML that browsers un-nest, silently dropping the
   phone link. The CTA's pseudo-element fills the positioned card, so there is one hit
   target, one anchor, and one accessible name; the phone sits above it on z-index 2 and
   still works. `pointer-events` is untouched, so text selection inside the card behaves
   normally.

   The card already has `position: relative` from `.anr-card`; `--linked` asserts it here so
   removing it there cannot silently unstretch the link. */
.anr-clinic--linked {
	position: relative;
}

.anr-clinic--linked .anr-card__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.anr-clinic--linked .anr-clinic__phone {
	position: relative;
	z-index: 2;
}

/* The hover cue now belongs to the tile, not to the six words at the bottom of it. */
.anr-clinic--linked:hover .anr-card__cta,
.anr-clinic--linked:focus-within .anr-card__cta {
	text-decoration: underline;
}

/* --- Clinic page hero ---------------------------------------------------------------- */
/*
 * `[anr_clinic_hero]`, the top of a `/locations/<slug>/` page. Added 2026-08-23 to answer
 * Nicole's "click on the Clinic and then it take you to a picture of the clinic and info
 * about the clinic and a link for the maps" - photo, name, address, phone, map, in that
 * order.
 *
 * It reuses `.anr-clinic__photo`, badge and placeholder wholesale rather than restating
 * them, so a photo supplied later lands identically on the card and on the page, and there
 * is one placeholder to look at rather than two that can drift apart.
 */

.anr-clinic-hero {
	--anr-accent: var(--anr-green);
	--anr-accent-text: var(--anr-green-text);
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--anr-hairline);
	border-radius: 11px;
	box-shadow: 0 10px 26px rgba(7, 10, 34, 0.06);
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 42px;
	overflow: hidden;
}

.anr-clinic-hero__media {
	display: block;
	flex: 1 1 340px;
	min-width: 280px;
	position: relative;
}

/* The card's photo is a padding-top box because it sits above text in a fixed-width
   column. Here it is a column of its own beside the text, so it stretches instead. */
.anr-clinic__photo--hero {
	height: 100%;
	min-height: 260px;
	padding-top: 0;
	position: absolute;
	width: 100%;
}

.anr-clinic-hero__body {
	flex: 1 1 340px;
	min-width: 280px;
	padding: 34px 32px;
}

/* The band eyebrow is centred with a rule either side. In the hero it names the clinic at
   the head of a left-aligned block, so it drops both. */
.anr-eyebrow--left {
	justify-content: flex-start;
	letter-spacing: 2.2px;
}

.anr-eyebrow--left::before,
.anr-eyebrow--left::after {
	display: none;
}

.anr-clinic-hero__address {
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 16px;
}

.anr-clinic-hero__phone {
	align-items: center;
	color: var(--anr-blue);
	display: flex;
	font-family: Rubik, sans-serif;
	font-size: 16px;
	gap: 10px;
	line-height: 1.6;
	margin: 0 0 26px;
}

.anr-clinic-hero__phone .anr-icon {
	color: var(--anr-blue);
	flex: 0 0 auto;
	height: 18px;
	width: 18px;
}

.anr-clinic-hero__phone a {
	color: inherit;
	text-decoration: none;
}

.anr-clinic-hero__phone a:hover,
.anr-clinic-hero__phone a:focus-visible {
	text-decoration: underline;
}

.anr-clinic-hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	margin: 0;
}

.anr-clinic-hero__links .anr-card__cta {
	font-size: 13px;
	letter-spacing: 1.5px;
}

.anr-clinic-hero__links .anr-card__cta:hover,
.anr-clinic-hero__links .anr-card__cta:focus-visible {
	text-decoration: underline;
}

/* The pin leads the maps link and the arrow trails the contact link, so the two need
   opposite orders; the shared `.anr-card__cta` rule sets a left margin for the trailing
   case only. */
.anr-clinic-hero__links .anr-card__cta .anr-icon {
	margin: 0 8px 0 0;
}

.anr-clinic-hero__links .anr-card__cta:last-child .anr-icon {
	margin: 0 0 0 8px;
}

@media (max-width: 600px) {
	.anr-clinic-hero__media {
		flex-basis: 100%;
	}

	.anr-clinic__photo--hero {
		min-height: 200px;
		position: static;
	}

	.anr-clinic-hero__body {
		padding: 26px 22px;
	}
}

/* --- Hero caption, mid-width correction ------------------------------------------------ */
/*
 * Slider Revolution positions the two hero caption layers from stored per-breakpoint values,
 * and between roughly 768px and 1200px it does not resolve those values the way the stored
 * data predicts. Measured on the clone 2026-08-24: with `position.y` written as
 * d -55 / n -105 / t -75 / m -70 and read back from the database to confirm the write, an
 * 834px viewport rendered the headline 16px above the top of the module and a 1024px
 * viewport rendered it 15px above with the subline 20px below the bottom. Changing the `t`
 * values moved neither. The offsets below were then found by measurement across 800, 834,
 * 1024 and 1152, taking the worst case (13px at 800) and adding margin for the intermediate
 * widths nobody screenshots. The `d` and `m` breakpoints behave exactly as written, which is why
 * 1440 and 390 are correct without this block.
 *
 * Rather than keep guessing at which breakpoint the renderer has chosen, the two layers are
 * nudged here, where the result is deterministic and testable. `margin-top` rather than
 * `transform`: the layers are absolutely positioned so a margin simply offsets them, whereas
 * overriding `transform` would fight the slider's own entry animation.
 *
 * Scoped to the home page and to the two layers by id suffix. If the slider is ever rebuilt
 * and the layer keys change, these rules stop matching and the page renders as Slider
 * Revolution lays it out. The failure mode is the status quo, not a broken hero.
 *
 * This is a correction for a renderer quirk, not a design decision. The design decision is
 * `HERO_HEIGHTS` and `HERO_GEOMETRY` in `src/anr/cli/shape_hero.py`, which stay the source
 * of truth for where the caption sits.
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.home rs-layer[id$="-layer-4"] {
		margin-top: 44px !important;
	}

	.home rs-layer[id$="-layer-3"] {
		margin-top: -38px !important;
	}
}

/* --- Listings: the blog, the events archive and every term page ---------------------------
 *
 * Nikki, 2026-09-08: "events page - change to rounded edges styling like other pages once
 * new content added to community education page."
 *
 * Ten URLs render through the theme's `archive.php` / `index.php` and
 * `template-parts/content.php`: the events archive, the blog index, four blog categories and
 * four events categories. `/events/` is the one she opened; the defect is the template's, so
 * the fix is the template's. The reasoning, and why this is an override rather than a
 * template of our own, is in `includes/listings.php`, which also adds the `anr-card` class
 * to each entry - so the radius, hairline, shadow and hover lift come from the one card rule
 * above rather than from a second description of the same component here.
 *
 * Everything below is either undoing one of the three theme rules named in that file or
 * setting the media box.
 *
 * `/events/` is the events post-type ARCHIVE, not the page called Events. `anr.urls` recorded
 * it as the page until the same day, which is the reason nothing measured this template: see
 * `_resolve_collisions` there.
 */

body:is(.archive, .blog) .blog-hentry {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
	body:is(.archive, .blog) .blog-hentry {
		grid-template-columns: 1fr;
	}
}

body:is(.archive, .blog) .single-hentry.archive {
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 0;
}

/* The media box. A 16:10 window that the photograph covers, so five aspect ratios become
   five identical tiles - the same fix, and the same reasoning, as the team grid's square
   headshots. `height: auto` is overridden because the theme prints width and height
   attributes from the original file. */
body:is(.archive, .blog) .single-hentry.archive .entry-featured .post-image img {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* The theme scales the image to 1.2 over ten seconds on hover, which on a card that is
   itself a link reads as the page having stopped responding. */
body:is(.archive, .blog) .single-hentry .post-image img:hover {
	transform: none;
}

/* Undo the overlap, and the padding that made room for it. */
body:is(.archive, .blog) .single-hentry.archive .entry-featured + .entry-body,
body:is(.archive, .blog) .single-hentry.archive .entry-body {
	display: flex;
	flex: 1 1 auto;
	margin-top: 0;
	padding: 0;
	width: 100%;
}

/* Beats the child theme's `body .single-hentry.archive .entry-body .entry-body-inner`,
   which is (0,4,1); this is (0,5,1), so no `!important` is needed. */
body:is(.archive, .blog) .single-hentry.archive .entry-body .entry-body-inner {
	background: #fff;
	box-shadow: none;
	flex: 1 1 auto;
	padding: 22px 26px 24px;
}

body:is(.archive, .blog) .single-hentry.archive .entry-body .entry-body-inner h2,
body:is(.archive, .blog) .single-hentry.archive .entry-body .entry-body-inner .entry-content {
	color: var(--anr-body);
}

body:is(.archive, .blog) .single-hentry.archive .entry-title {
	font-family: Poppins, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 10px;
}

body:is(.archive, .blog) .single-hentry.archive .entry-title a {
	color: var(--anr-heading);
	text-decoration: none;
}

/* The whole card is the link, the same stretched-link pattern the clinic and event cards
   use, so the target is the tile rather than four words of title. */
body:is(.archive, .blog) .single-hentry.archive .entry-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

body:is(.archive, .blog) .single-hentry.archive .entry-content {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

/* The blog's filter bar and its empty state are grid cells, because `loop_start` and
   `loop_end` fire inside the theme's `.blog-hentry`. Both span the two columns; on a phone
   the grid is one column and the span is a no-op. The bar's own width decides chips or
   picker: the column is 747px at 1200 and wider, so it is the picker at every desktop
   width, which is what the container query on `.anr-filter` already does. */
body.blog .blog-hentry > .anr-filter {
	grid-column: 1 / -1;
	margin-bottom: 4px;
}

body.blog .blog-hentry > .anr-filter__empty {
	grid-column: 1 / -1;
}

/* The way in for a new post, and the ghosts of posts on their way, are the listing grid's
   last cell and span it. The ghosts sit inside the container, so they are not cells. */
body:is(.archive, .blog) .blog-hentry > .anr-posts-add {
	grid-column: 1 / -1;
}

/* --- Events band and event details ---------------------------------------------------- */

/*
 * Prototype, 2026-09-02, for Nicole's "how do we advertise an education session" question.
 * Cards reuse `.anr-card`; the date block is the one new shape. Everything is still scoped
 * under `.anr-band`.
 */

.anr-band--events {
	background: #fff;
}

.anr-band__more {
	margin: 34px 0 0;
	text-align: center;
}

.anr-band--events .anr-cards {
	margin-top: 30px;
}

.anr-event {
	flex-direction: row;
	padding: 0;
}

.anr-event__date {
	align-items: center;
	background: var(--anr-blue);
	color: #fff;
	display: flex;
	flex: 0 0 92px;
	flex-direction: column;
	font-family: Poppins, sans-serif;
	justify-content: center;
	padding: 24px 12px;
	text-align: center;
}

.anr-event__day {
	font-size: 36px;
	font-weight: 600;
	line-height: 1;
}

.anr-event__month {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	margin-top: 6px;
	text-transform: uppercase;
}

.anr-event__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 26px 28px 28px;
}

.anr-event__when {
	color: var(--anr-green-text);
	font-family: Rubik, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.4px;
	line-height: 1.5;
	margin: 0 0 10px;
}

.anr-event .anr-card__title {
	margin-bottom: 8px;
}

.anr-event__where,
.anr-event__facts {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 12px;
}

.anr-event__sep::before {
	content: "\00b7";
	padding: 0 8px;
}

.anr-event .anr-card__desc {
	margin-bottom: 20px;
}

/* Whole card is the link: same stretched-link pattern as the clinic cards. */
.anr-event.anr-clinic--linked .anr-card__cta::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* One event: a single card at reading width, centred. Two: side by side. Three: the grid. */
.anr-cards--events-1 {
	grid-template-columns: minmax(0, 760px);
	justify-content: center;
}

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

.anr-cards--events-3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
	.anr-cards--events-2,
	.anr-cards--events-3 {
		grid-template-columns: 1fr;
	}
}

/* The details card at the top of an event page. */

.anr-event-details {
	background: var(--anr-tint);
	border-left: 4px solid var(--anr-green);
	border-radius: 0 11px 11px 0;
	margin: 0 0 36px;
	padding: 28px 32px;
}

.anr-event-details--past {
	border-left-color: var(--anr-hairline);
}

.anr-event-details__list {
	display: grid;
	gap: 18px 32px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin: 0;
}

.anr-event-details__row dt {
	color: var(--anr-green-text);
	font-family: Rubik, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.anr-event-details__row dd {
	color: var(--anr-heading);
	font-family: Rubik, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.anr-event-details__book {
	margin: 24px 0 0;
}

.anr-event-details__button {
	background: var(--anr-blue);
	border-radius: 6px;
	color: #fff;
	display: inline-block;
	font-family: Rubik, sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.2px;
	padding: 14px 28px;
	text-decoration: none;
	text-transform: uppercase;
}

.anr-event-details__button:hover,
.anr-event-details__button:focus-visible {
	background: #263776;
	color: #fff;
}

.anr-event-details__note {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 15px;
	margin: 20px 0 0;
}

/* The services grid's photo slot when a service has no featured image. Same treatment as
   the clinic cards, for the same reason: the theme's own fallback prints "PLEASE UPLOAD A
   FEATURED IMAGE" into the card, which is an instruction to an administrator shown to a
   patient. See plugin/anr-fixes/includes/service-index.php. */
.item-icon.anr-service__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 242px;
	background: linear-gradient(135deg, #eef2f9 0%, #e6f0e4 100%);
	color: #b9c4d6;
}

.item-icon.anr-service__photo--placeholder .anr-icon {
	width: 46px;
	height: 46px;
}

/* --- The classified conditions index ---------------------------------------------------
   Nicole, 2026-09-02, on the first pass: "each card needs to be identical size. Also the
   chips don't look polished, different size, wraps across two lines, could look a lot
   better than current."

   Both were true and both are layout, not taste. The chips were free-width pills that
   wrapped to two ragged rows and pushed the search box onto a third; the cards were the
   theme's masonry grid, which exists precisely to give unequal heights. This replaces both
   with fixed geometry: one toolbar row, and a card grid whose every cell is the same size.

   Colours are the brand pair already measured into config/brand.yaml, not new ones.
   See plugin/anr-fixes/includes/condition-index.php. */

/* --- The toolbar: filters left, search right, one row ---------------------------------- */

/* The bar's own width decides chips or picker, not the viewport's. The chip toolbar needs
   about 1,005px, and on the 900px media query alone it overflowed the page from 901 to about
   1,035px of viewport. `chip-track-yields-when-it-cannot-fit` measures that band. */
.anr-filter {
	container: anr-filter / inline-size;
}

/* Grid, not flex. A wrapping flex row is what put the search box on its own line: the two
   children measure ~1,150px together, which fits, but the theme's uppercase letter-spacing
   on buttons makes the segmented track wider than its text implies and the row broke at a
   width that was hard to predict from the CSS alone. Two grid columns cannot wrap, so the
   toolbar is one row by construction rather than by arithmetic. */
.anr-filter__controls {
	display: grid;
	grid-template-columns: max-content minmax(210px, 268px);
	gap: 14px;
	align-items: center;
	justify-content: start;
	margin: 0 0 10px;
}

/* A segmented control rather than loose pills: one bordered track, the segments inside it.
   Reads as a single control, and the shared track is what stops four different word
   lengths looking like four different components. */
/* The whole track is brand green, on Nicole's 2026-09-02 note: "I want the backcolour of
   the whole tab green and the forecolour of selected to be blue." */
.anr-filter__filters {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--anr-green);
	border-radius: 999px;
	background: var(--anr-green);
}

.anr-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: calc(var(--anr-control) - 8px);
	/* 15px, not 18. Measured 2026-09-02: at 18 the four segments plus the search field come
	   to 1,190px against a 1,140px content column and the search wraps to its own line. The
	   12px this saves per segment is what keeps the whole toolbar on one row at 1440. */
	padding: 0 15px;
	/* Every chip is a visible pill at rest, not only the selected one. Nikki, 2026-09-11:
	   "make it more obvious that they are clickable". With bare text on the green, one chip
	   read as a button and the other three read as labels. The ink hairline is what marks the
	   edge: a white one on this green is 2.06:1, below the 3:1 a control's boundary needs. */
	border: 1px solid rgba(7, 10, 34, .3);
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	/* Near-black on the green rather than the muted grey the chips used on white: grey
	   measures about 1.7:1 there and is unreadable. This is roughly 8.8:1. */
	color: var(--anr-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.anr-chip:hover {
	color: var(--anr-blue);
	border-color: var(--anr-blue);
	background: rgba(255, 255, 255, .55);
}

.anr-chip:active {
	transform: translateY(1px);
}

/* The selected chip: brand blue text, per the same note. It sits on a white pill rather than
   on the green, for two reasons. Selection has to be legible as selection, and on a green
   track a colour change alone is a weak signal; and brand blue on brand green measures
   4.86:1 against 10.4:1 on white, so the white pill is both the clearer state and the more
   readable one. White is never used as TEXT on this green anywhere - that is 2.06:1 and
   fails - which is the distinction config/brand.yaml's open question 9 is about. */
.anr-chip.is-active {
	border-color: #fff;
	background: #fff;
	color: var(--anr-blue);
}

.anr-chip:focus-visible {
	outline: 2px solid var(--anr-blue);
	outline-offset: 2px;
}

/* The counts that used to sit in each chip are gone, on Nikki's note of 2026-09-11; the
   style rule `chip-has-no-count` fails if `.anr-chip__count` ever comes back. */

/* --- The phone picker ------------------------------------------------------------------ */

/* The chip track's stand-in below 900px, and absent above it. `display`, not `visibility`,
   so exactly one of the two controls is in the accessibility tree at any width. */
.anr-filter__picker {
	position: relative;
	display: none;
	align-items: center;
	gap: 10px;
}

.anr-filter__picker label {
	margin: 0;
	color: var(--anr-heading);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* The same green pill as the search field beneath it, so the two read as one toolbar. */
.anr-filter__picker select {
	flex: 1;
	min-width: 0;
	height: var(--anr-control);
	margin: 0;
	/* Right padding clears the chevron. */
	padding: 0 46px 0 18px;
	border: 1px solid var(--anr-green);
	border-radius: 999px;
	background: var(--anr-green);
	color: var(--anr-heading);
	font-size: 16px;
	font-weight: 600;
	/* The browser's own arrow is replaced by the chevron, which is larger and in the ink. */
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.anr-filter__picker select:focus {
	outline: none;
	border-color: var(--anr-heading);
	box-shadow: 0 0 0 3px rgba(48, 68, 149, .32);
}

.anr-filter__picker .anr-icon {
	position: absolute;
	right: 18px;
	width: 18px;
	height: 18px;
	color: var(--anr-heading);
	pointer-events: none;
}

/* --- Search ---------------------------------------------------------------------------- */

.anr-filter__search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.anr-filter__search .anr-icon {
	position: absolute;
	left: 17px;
	width: 17px;
	height: 17px;
	color: var(--anr-heading);
	pointer-events: none;
}

.anr-filter__search input {
	width: 100%;
	height: var(--anr-control);
	/* Left padding clears the icon; the placeholder starts after it rather than under it,
	   which is what was clipping the old wording mid-word. */
	padding: 0 18px 0 44px;
	border: 1px solid var(--anr-green);
	border-radius: 999px;
	/* Green fill, per the same note as the active chip. Dark ink for the same contrast
	   reason: white on #75c043 is 2.06:1 and fails. */
	background: var(--anr-green);
	font-size: 14px;
	/* "Put in best contrast for visibility to text colour" - so the darkest ink on the
	   sheet, not the mid-tone. #070a22 on #75c043 is about 8.8:1; the #1f2b45 it replaces
	   was 5.9:1 and white would have been 2.06:1. */
	color: var(--anr-heading);
	text-overflow: ellipsis;
}

/* The placeholder has to clear contrast too, so it is the ink at 66% rather than a grey
   that would sit at about 1.6:1 on the green. */
.anr-filter__search input::placeholder {
	color: rgba(7, 10, 34, .72);
	opacity: 1;
}

.anr-filter__search input:focus {
	outline: none;
	border-color: var(--anr-heading);
	box-shadow: 0 0 0 3px rgba(48, 68, 149, .32);
}

/* Chrome draws its own clear button; it collides with the pill radius. */
.anr-filter__search input::-webkit-search-cancel-button {
	margin-right: 2px;
}

/* --- Count and empty state -------------------------------------------------------------- */

.anr-filter__count {
	margin: 0 0 24px;
	color: var(--anr-muted);
	font-size: 13px;
	letter-spacing: .01em;
}

.anr-filter__empty {
	margin: 26px 0 40px;
	color: var(--anr-muted);
	font-size: 15px;
}

.anr-filter__reset {
	padding: 0;
	border: 0;
	background: none;
	color: var(--anr-blue);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* --- The cards: every one the same size ------------------------------------------------- */

/* A MODIFIER, not bare `.anr-cards`. The front-page bands already own `.anr-cards` with
   `--3` and `--4` modifiers that set an explicit column count, and a bare `.anr-cards` rule
   later in this sheet overrides them at equal specificity - which is exactly what happened:
   the four clinic cards silently became three-plus-one. Every rule below is scoped the same
   way, because `.anr-card`, `.anr-card__title` and `.anr-card__cta` are all the bands'
   classes too, and unscoped rules were restyling the pillar, clinic and event cards as
   well. Found 2026-09-02 when Nicole asked why the clinics were no longer on one row. */
.anr-cards--index {
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	align-items: stretch;
}

/* Scoped through the grid, and every surface property stated rather than left to inherit.
   Both halves were found by `anr-check-styles` on its first run: the theme colours borders
   on `a` elements inside page content, so the same card rendered a grey hairline on
   /services/ and the declared one on /conditions/, and a theme shadow was landing on both
   while this rule said nothing about shadow at all. A component that renders differently
   depending on which page it is on is exactly what the client asked to be rid of. */
.anr-cards--index .anr-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--anr-line);
	border-radius: 14px;
	background: #fff;
	/* The resting shadow, owned here rather than inherited. This is the theme's own soft
	   elevation, kept because it suits the card, but declared so it cannot vary. */
	box-shadow: 0 2px 12px rgba(7, 10, 34, .05);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.anr-cards--index .anr-card:hover,
.anr-cards--index .anr-card:focus-visible {
	border-color: #c3d0e6;
	box-shadow: 0 14px 30px rgba(31, 43, 69, .10);
	transform: translateY(-3px);
	text-decoration: none;
}

.anr-cards--index .anr-card:focus-visible {
	outline: 2px solid var(--anr-blue);
	outline-offset: 2px;
}

/* Fixed height, so the text below every card starts on the same line. This is the single
   rule that makes the grid regular; content-height media is what masonry was doing. */
.anr-cards--index .anr-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 186px;
	background-color: var(--anr-tint);
	background-size: cover;
	background-position: 50% 42%;
}

.anr-cards--index .anr-card__media--placeholder {
	background-image: linear-gradient(135deg, #eef2f9 0%, #e6f0e4 100%);
	color: #b9c4d6;
}

.anr-cards--index .anr-card__media--placeholder .anr-icon {
	width: 42px;
	height: 42px;
}

.anr-cards--index .anr-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 20px;
	text-align: left;
}

/* Two lines for the title and three for the excerpt, clamped rather than truncated at a
   character count, so a long condition name wraps properly and a long excerpt ends on a
   word. Together with the fixed media height this pins every card to one height. */
.anr-cards--index .anr-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	margin: 0 0 10px;
	color: var(--anr-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.anr-cards--index .anr-card__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--anr-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* Pushed to the bottom of the card, so the call to action sits on one line across the whole
   grid however much text is above it. */
.anr-cards--index .anr-card__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--anr-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.anr-cards--index .anr-card__more .anr-icon {
	width: 15px;
	height: 15px;
	transition: transform .18s ease;
}

.anr-cards--index .anr-card:hover .anr-card__more .anr-icon {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.anr-card,
	.anr-card__more .anr-icon {
		transition: none;
	}

	.anr-card:hover {
		transform: none;
	}
}

/* --- Narrow ----------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.anr-filter__controls {
		gap: 12px;
	}

	/* The chip track gives way to the picker. It used to scroll sideways here with its
	   scrollbar hidden, which Nikki met on her phone on 2026-09-11 as three labels clipped
	   mid-word ("ALL CON", "CONCUS", "NEUROLO") and no sign the rest existed. Wrapping was
	   rejected on 2026-09-02 as unfinished-looking, so the answer is a different control, not
	   a different overflow. `chip-track-is-phone-hidden` holds this. */
	.anr-filter__filters {
		display: none;
	}

	.anr-filter__picker {
		display: flex;
	}

	/* Below 900 the picker and the search each take a full-width row, which is the right
	   shape on a phone and is a deliberate stack rather than a wrap. */
	.anr-filter__controls {
		grid-template-columns: minmax(0, 1fr);
	}

	.anr-filter__search {
		max-width: 100%;
	}
}

/* The same swap, keyed on the bar's own width, for the band where the viewport is wider than
   900px and the column is still narrower than the chip toolbar. Above 900 the picker and the
   search sit side by side on one row. The media query above stays as the fallback for a
   browser without container queries. */
@container anr-filter (max-width: 1019px) {
	.anr-filter__filters {
		display: none;
	}

	.anr-filter__picker {
		display: flex;
	}
}

/* --- The team grid ---------------------------------------------------------------------------
 *
 * Nikki, 2026-09-07: "About team page - make all pictures equal size and round edges like
 * conditions page". The markup is `includes/staff-grid.php`, which renders the same
 * `.anr-cards--index .anr-card` the conditions index does, so everything that makes a card a
 * card - the 14px radius, the hairline, the resting shadow, the hover lift, the focus ring -
 * is inherited from the rules above and is NOT restated here. Only the two things that differ
 * are below: a square photo instead of a 186px background band, and a role eyebrow above the
 * name instead of an excerpt and a "learn more" beneath it.
 *
 * `--people` is a modifier on `--index`, not an alternative to it, for the reason recorded at
 * `.anr-cards--index`: a bare `.anr-cards` rule at equal specificity silently overrode the
 * bands' own column counts once already.
 */

/* Narrower than the 290px conditions card: a headshot needs less width than three lines of
   excerpt, and at 290 the twenty tiles ran four to a row with a lot of air. */
.anr-cards--people {
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

/* The whole point of the change. Twenty originals of four different aspect ratios - 1000x1000,
   1594x1440, 1086x1064, 1424x1440, measured 2026-09-07 - render as twenty identical tiles
   because the box is square and the photo covers it. The theme printed each at its natural
   ratio inside a masonry grid, which is where the ragged caption baselines came from.

   `object-position` sits above centre: these are standing portraits shot against a hedge, so
   the head is in the top half of every frame and a centred crop cuts foreheads. */
.anr-cards--index .anr-card__media--person {
	height: auto;
	aspect-ratio: 1 / 1;
	background-color: var(--anr-tint);
}

.anr-cards--index .anr-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
}

/* The role, above the name, in the accessible green. The box reserves three lines whether or
   not the role fills them, which is what puts every name on the same baseline across a row.
   "Co-Principal, APA Neurological Physiotherapist, Operations Manager" is the longest and
   needs all three; at two it was truncated mid-title, and truncating someone's job title on
   the page whose subject is the people is the wrong trade against a little white space. */
.anr-cards--index .anr-card--person .anr-card__eyebrow {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.2em;
	margin: 0 0 6px;
	font-family: Rubik, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.anr-cards--index .anr-card--person .anr-card__body {
	padding: 16px 18px 18px;
}

.anr-cards--index .anr-card--person .anr-card__title {
	min-height: 0;
	-webkit-line-clamp: 2;
	font-size: 16px;
}

/* The group heading. `/our-team/` puts the shortcode straight into a column rather than a
   text column, so `typography.css` cannot reach it - its scope is a body-copy root and this
   is not inside one. Stated here so the section heads match every other h2 on the site,
   green rule included. */
.anr-staff-group + .anr-staff-group {
	margin-top: 54px;
}

.anr-staff-group__title {
	margin: 0 0 20px;
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.3;
}

.anr-staff-group__title::before {
	content: "";
	display: block;
	width: 36px;
	height: 3px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--anr-green);
}

@media (max-width: 600px) {
	.anr-cards--people {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.anr-staff-group__title {
		font-size: 22px;
	}
}