/*
 * The reading page: one type system for every long-form page on the site.
 *
 * Asked for by Nikki on 2026-09-06: "can you do a format across all pages to look
 * consistent in font and headings, currently looks a bit like Chat gpt headings". Measured
 * before this sheet existed: the theme sets every in-body h2 at 36px/600 with no top
 * margin, the client's own condition pages carry their headings as bold paragraphs, and a
 * sidebar-less page runs its copy across the full 1170px container at 130 characters a
 * line. Three different pages, three different looks, and the built ones read as a
 * markdown document pasted into WordPress.
 *
 * The system is in `docs/brand/typography.md`; the declared values are `typography.reading` in
 * `config/brand.yaml`; `config/style-rules.yaml` measures them on the rendered page. Read
 * the guide before changing a number here: the numbers are the guide.
 *
 * SCOPE
 *
 * Every rule targets a DIRECT child of a body-copy root. There are four, because the theme
 * renders body copy into four different containers:
 *
 *   .wpb_text_column > .wpb_wrapper   anything WPBakery renders
 *   .entry-content                    the plain-HTML post types (blog, events)
 *   .single-doctor-inner              a `service` whose body is plain HTML, not WPBakery
 *   .single-doctor-content            a `staff` bio
 *
 * The last two were added 2026-09-07. Nikki, reviewing staging: "It looks like the style as
 * worked for all services tabs but the clinic appointments still has headings in larger font
 * than other pages", and, of the team: "add style updates as for conditions pages". Both are
 * the same defect. `template-parts/content-service/content.php` prints `the_content()`
 * straight into `.single-doctor-inner`, so a service page built out of WPBakery rows lands
 * inside a `.wpb_text_column` and gets the type system, while one whose body is plain HTML -
 * which is every page this repository writes - does not, and falls back to the theme's 36px
 * h2. Eight of the nine services are WPBakery, which is why the gap looked like one page
 * misbehaving rather than a whole container being unreachable. `config/style-rules.yaml`
 * now measures a page of each shape, and `anr-check-styles --coverage` fails when a post
 * type has no page in any rule's list at all, which is the check that would have caught it.
 *
 * Direct children only, because the front-page bands, the clinic hero and the event card are
 * all shortcodes rendered INSIDE a text column, and their headings are nested several divs
 * deep. `> h2` cannot reach them, so nothing here can restyle a band. That is a stronger
 * guarantee than an exclusion list, which is only as complete as the last person to edit it.
 * It is also why `.single-doctor-inner` is safe to name: on a WPBakery service page its
 * children are rows, not headings, and on a staff page they are the photo and the body
 * column, so the only thing it reaches is the plain-HTML case it was added for.
 *
 * The specificity of `:is(<the four>) > h2` is (0,2,1), which beats the theme's `h2, .h2`
 * (0,0,1) and `.wpb_text_column p` (0,1,1) without `!important`.
 */

:root {
	--anr-blue: #304495;
	--anr-green: #75c043;
	/* Brand green darkened to 4.55:1 without moving hue or saturation. Never green text
	   at the brand value on white: 2.24:1. */
	--anr-green-text: #4f832c;
	--anr-heading: #070a22;
	--anr-ink: #1f2b45;
	--anr-body: #595959;
	/* Not the cards' #6b7891, which is 4.4:1 on white and fails AA for normal text; this is
	   the same blue-grey darkened to 5.6:1 (5.2:1 on the tint). */
	--anr-muted-text: #5b6880;
	--anr-line: #dde4ef;
	--anr-tint: #f2f6fd;
}

/* --- Section heading ------------------------------------------------------------------
 *
 * 26px, not the theme's 36: in a 730px column a 36px heading wraps to two lines on almost
 * every section, and a page of two-line bold headings is the "ChatGPT" look. The green
 * rule above is the site's own signature - it already sits above every sidebar heading -
 * and is what makes a section start look like this site rather than any site.
 */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h2 {
	clear: none;
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 52px 0 16px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h2::before {
	background: var(--anr-green);
	border-radius: 2px;
	content: "";
	display: block;
	height: 3px;
	margin-bottom: 14px;
	width: 36px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h2:first-child {
	margin-top: 0;
}

/* --- Sub-heading ------------------------------------------------------------------------
 *
 * Brand blue, one step down. The level is carried by colour and size together, so the
 * outline reads at a glance without a second bold black heading competing with the first.
 */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h3 {
	clear: none;
	color: var(--anr-blue);
	font-family: Poppins, sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 34px 0 10px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h2 + h3 {
	margin-top: 6px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h4 {
	clear: none;
	color: var(--anr-muted-text);
	font-family: Rubik, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 1.4;
	margin: 28px 0 8px;
	text-transform: uppercase;
}

/* --- Lead line --------------------------------------------------------------------------
 *
 * Every page this repository writes, and every condition page the client wrote, opens with
 * one bold line naming the service and the city. It stays `<p><strong>` in the markup -
 * the emphasis is real - and is set as a standfirst rather than as a bold paragraph: a
 * half-step up in size, the dark ink, medium weight rather than bold. `:has()` reads the
 * shape rather than needing a class, so the client's pages and ours get it alike; a
 * browser without `:has()` shows the bold line it shows today.
 */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p:first-child:has(> strong:only-child),
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p.anr-lead {
	color: var(--anr-ink);
	font-family: Rubik, sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.55;
	margin: 0 0 26px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p:first-child:has(> strong:only-child) > strong,
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p.anr-lead > strong {
	color: inherit;
	font-weight: 500;
}

/* --- Body ---------------------------------------------------------------------------------
 *
 * 17px, one up from the theme's 16. The dominant reader is an older adult, often reading
 * about a diagnosis on a phone; the research and the audience agree on 16 as a floor, not
 * a target. Line height 1.7 rather than the theme's 1.714 so the arithmetic is legible.
 */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p,
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > div[dir],
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ul,
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ol {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 17px;
	line-height: 1.7;
}

/* `div[dir]` is a paragraph in everything but the tag. The five event posts carry their body
   as `<div dir="auto">` blocks - the signature of copy pasted out of Facebook - so they were
   the only pages on the site still setting body copy at the theme's 16px after the reading
   page shipped. Found 2026-09-07 by `anr-check-styles --coverage`, which reported `events` as
   a post type no rule had ever measured. Attribute-scoped rather than a bare `> div`, because
   a div directly inside a text column is otherwise structure, not prose. */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p,
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > div[dir] {
	margin: 0 0 18px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p > strong,
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ul strong,
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ol strong {
	color: var(--anr-ink);
	font-weight: 500;
}

/* --- Measure ----------------------------------------------------------------------------
 *
 * Only on pages the plugin marks `anr-reading`: the ones with no sidebar, where copy would
 * otherwise run the full 1170px. A cap of 46rem is about 75 characters at 17px, the upper
 * end of the comfortable range. Not applied everywhere, because a centred paragraph in a
 * full-width column (the contact page, the home page's section leads) would be pushed
 * left by it, and the pages with a sidebar are already narrower than the cap.
 */
body.anr-reading :is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > :is(p, ul, ol, h2, h3, h4) {
	max-width: 46rem;
}

/* --- Lists --------------------------------------------------------------------------------
 *
 * Outside markers in the brand green, hanging in the gutter, so a wrapped line aligns with
 * the first. The theme puts markers inside, which is why wrapped bullets on the live site
 * currently indent under their own marker.
 */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ul {
	margin: 0 0 22px;
	padding: 0 0 0 1.35em;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ul > li {
	list-style: disc outside;
	margin: 0 0 7px;
	padding-left: 4px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ul > li::marker {
	color: var(--anr-green);
	font-size: 1.05em;
}

/* Numbered steps: a blue counter chip in the gutter. Used for anything that happens in
   order - what an appointment involves, how to book. */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ol {
	counter-reset: anr-step;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ol > li {
	counter-increment: anr-step;
	list-style: none;
	margin: 0 0 12px;
	padding-left: 44px;
	position: relative;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ol > li::before {
	align-items: center;
	background: var(--anr-blue);
	border-radius: 50%;
	color: #fff;
	content: counter(anr-step);
	display: flex;
	font-family: Rubik, sans-serif;
	font-size: 13px;
	font-weight: 500;
	height: 28px;
	justify-content: center;
	left: 0;
	line-height: 1;
	position: absolute;
	top: 0.1em;
	width: 28px;
}

/* --- Links ----------------------------------------------------------------------------------
 *
 * Always underlined in body copy - colour alone is not a link cue for a reader with low
 * vision, and blue-on-grey without an underline is exactly the case WCAG 1.4.1 names. The
 * underline is the green, two pixels, dropped below the baseline, and it darkens to blue
 * on hover. Buttons keep their own style, and so does a heading that is a link: the rule
 * reaches links inside paragraphs, list items and table cells only.
 */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) :is(p, li, td) a:not(.btn, .button, .anr-card, .anr-card__cta) {
	color: var(--anr-blue);
	text-decoration: underline;
	text-decoration-color: rgba(117, 192, 67, 0.9);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) :is(p, li, td) a:not(.btn, .button, .anr-card, .anr-card__cta):hover {
	color: var(--anr-blue);
	text-decoration-color: var(--anr-blue);
}

/* A heading that is itself a link (the clinic pages' service sub-headings) keeps the
   heading's colour and weight and takes no underline; the underline is a body-copy cue. */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > :is(h2, h3, h4) > a {
	color: inherit;
	text-decoration: none;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > :is(h2, h3, h4) > a:hover {
	color: var(--anr-blue);
	text-decoration: underline;
	text-decoration-color: var(--anr-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* --- FAQ ------------------------------------------------------------------------------------
 *
 * Questions are `<h3 class="anr-faq__q">`, written that way by `anr.clientcopy.faq()` and by
 * the outline transform on the client's pages. Each sits on its own hairline so the run of
 * question and answer reads as a list of entries rather than as more prose. The `<h3>` is
 * kept as an `<h3>` because that is what `faq-schema.php` reads the JSON-LD from.
 */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h3.anr-faq__q {
	border-top: 1px solid var(--anr-line);
	margin-top: 22px;
	padding-top: 20px;
}

:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h2 + h3.anr-faq__q {
	border-top: 0;
	margin-top: 6px;
	padding-top: 0;
}

/* --- The closing block ----------------------------------------------------------------------
 *
 * `book_at_clinics()` wraps the "Book an appointment" heading and its line in `.anr-book`.
 * A tinted panel with the phone number set large is the one conversion element in the
 * body, and it needs to look like a place to stop rather than like one more section.
 */
.anr-book {
	background: var(--anr-tint);
	border-left: 4px solid var(--anr-green);
	border-radius: 0 14px 14px 0;
	margin: 48px 0 8px;
	max-width: 46rem;
	padding: 26px 30px 24px;
}

.anr-book > h2 {
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
}

.anr-book > p {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
}

.anr-book a {
	color: var(--anr-blue);
	text-decoration: underline;
	text-decoration-color: rgba(117, 192, 67, 0.9);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Scoped like the body-copy link rule so it outranks it: that rule's `:not()` list lifts
   its specificity to (0,3,1), and a bare `.anr-book a[href]` at (0,2,1) lost to it, which
   put a green underline under the one number on the page that is set as display type. */
:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) .anr-book a[href^="tel:"],
.anr-book a[href^="tel:"] {
	font-family: Poppins, sans-serif;
	font-size: 22px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* --- Accessibility ------------------------------------------------------------------------
 *
 * The audience includes people with vestibular disorders, ataxia and visual disturbance,
 * so these are brand rules rather than compliance. Reduced motion stops every animation
 * and transition the theme runs and hides its page loader; the focus ring is the brand
 * blue on a white halo so it is visible on any band.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	box-shadow: 0 0 0 3px #fff;
	outline: 3px solid var(--anr-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	#ct-loadding {
		display: none !important;
	}
}

/* --- Tables ------------------------------------------------------------------------------
 *
 * Added 2026-09-08 with the client's return-to-learn copy, which is the first thing in her
 * material that is genuinely a grid: five stages against what each one allows. The theme has
 * no table styling at all, so a bare `<table>` renders as unruled text at the browser's
 * default 16px Times.
 *
 * The wrapper scrolls rather than the page. `max-width: none` on the wrapper is deliberate
 * and is the one place the 46rem measure is lifted: a two-column table of prose set to 736px
 * wraps every cell to three lines and stops being a table. `overflow-x: auto` then keeps the
 * horizontal scroll inside the component on a phone instead of making the whole document
 * scroll sideways, and `tabindex` is added by nothing - a scrollable region with a caption is
 * reachable because the caption is read; if a keyboard user cannot scroll it, that is a
 * finding for the next pass, not a reason to leave it unstyled.
 *
 * `th[scope="row"]` is the stage name, so a screen reader announces "Stage 3, modified
 * attendance" before the cell rather than reading twelve unlabelled cells in a row.
 */

.anr-table {
	margin: 0 0 26px;
	max-width: none;
	overflow-x: auto;
}

.anr-table table {
	border-collapse: collapse;
	font-family: Rubik, sans-serif;
	min-width: 34rem;
	width: 100%;
}

.anr-table caption {
	caption-side: top;
	color: var(--anr-muted);
	font-family: Rubik, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
	text-align: left;
}

.anr-table thead th {
	background: var(--anr-tint);
	border-bottom: 2px solid var(--anr-line);
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	padding: 12px 16px;
	text-align: left;
}

.anr-table tbody th,
.anr-table tbody td {
	border-bottom: 1px solid var(--anr-line);
	color: var(--anr-body);
	font-size: 16px;
	line-height: 1.65;
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}

.anr-table tbody th {
	color: var(--anr-ink);
	font-weight: 500;
	white-space: nowrap;
}

.anr-table tbody tr:last-child th,
.anr-table tbody tr:last-child td {
	border-bottom: 0;
}

/* --- The inline events block ---------------------------------------------------------------
 *
 * `[anr_events context="inline"]` on `/community-education/`. The cards are the front page's
 * own, and `front-page-bands.css` styles them; all this does is stop the grid inheriting the
 * reading measure, which would squeeze a three-card row into 736px.
 */

.anr-events-inline {
	margin: 0 0 30px;
	max-width: none;
}

.anr-events-inline .anr-band__more {
	margin-top: 24px;
	text-align: left;
}

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

@media (max-width: 767px) {
	:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h2 {
		font-size: 22px;
		margin-top: 40px;
	}

	:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h3 {
		font-size: 18px;
		margin-top: 28px;
	}

	:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p:first-child:has(> strong:only-child),
	:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p.anr-lead {
		font-size: 18px;
	}

	:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p,
	:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ul,
	:is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > ol {
		font-size: 16px;
	}

	.anr-book {
		padding: 20px 20px 18px;
	}

	.anr-book a[href^="tel:"] {
		font-size: 20px;
	}

	.anr-table caption {
		font-size: 13px;
	}

	.anr-table tbody th,
	.anr-table tbody td {
		font-size: 15px;
		padding: 12px 13px;
	}
}

/* --- Dark bands ------------------------------------------------------------------------------
 *
 * `.LightText` is the theme's marker for a row that paints itself a dark colour, and the
 * child theme already answers it: `body .LightText :is(h1..h6, p, a)` is white, and its h3
 * is the light 300 weight that makes a sub-line read as a sub-line. Two rows carry the class,
 * the home page's "Not sure what to expect?" band and the same band on `/your-first-visit/`.
 *
 * That child-theme rule is (0,1,2). Every selector in this sheet is (0,2,1), so on 2026-09-06
 * the reading system quietly won on the one place where its colours cannot be read: measured
 * on the clone 2026-09-08, the band's sub-line rendered `#304495` on the band's `#295da8`,
 * which is 1.35:1. Production, which has no plugin, still renders it white at 6.51:1.
 *
 * The scope note at the top of this file claims nothing here can restyle a band, on the
 * reasoning that a band's headings are nested inside a shortcode several divs deep. True of
 * the bands this repository builds. Not true of the theme's own dark rows, whose copy is
 * typed straight into the text column as direct children - which is exactly the shape every
 * selector here is written to catch. This block is that hole, closed by handing the dark rows
 * back to the theme rather than by restyling them: white text, and the theme's own h3.
 *
 * `.LightText` first, so each selector is one class more specific than the rule above it and
 * than the narrow-viewport block, without reaching for `!important`.
 */

.LightText :is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > :is(h1, h2, h3, h4, h5, h6, p, li),
.LightText :is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p:first-child:has(> strong:only-child),
.LightText :is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > p.anr-lead,
.LightText :is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) :is(p, li, td) a:not(.btn, .button, .anr-card, .anr-card__cta) {
	color: #fff;
}

/* The sub-line under a band heading. 24px/300 with no margin is what the theme serves and
   what production still shows; the reading sheet's 19px/600 sub-heading turns it into a
   second heading competing with the 48px above it. Restated rather than reverted because
   `revert` returns to the user agent, not to the theme. */
.LightText :is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h3 {
	font-size: 24px;
	font-weight: 300;
	line-height: 1.25;
	margin: 0;
}

/* The green rule above a section heading is the reading page's signature for the start of a
   section. In a centred call-to-action band it is a left-aligned bar under centred type,
   which is why it goes rather than turning white. No band carries an h2 today; this is here
   so that the first one to do so does not have to rediscover it. */
.LightText :is(.wpb_text_column > .wpb_wrapper, .entry-content, .single-doctor-inner, .single-doctor-content) > h2::before {
	display: none;
}