/*
 * The frame: everything around the reading column.
 *
 * `typography.css` set the words; this sets the furniture the theme puts around them,
 * which was the remaining reason the site read as a 2020 ThemeForest template. Asked for
 * on 2026-09-06 after the reading page shipped ("go ahead with the 6 onto staging"). The
 * six, in the order they were judged to matter, and each is a section below:
 *
 *   1. The page-title band: a 70px white heading over a darkened stock photo, on every
 *      page, becomes a quiet title row - eyebrow, title, hairline - on white.
 *   2. The green, in `accessible-green.css`.
 *   3. The sidebar panels: two flat blue boxes become tinted cards that match the site's
 *      card component, and the "Need help with this?" card takes the blue.
 *   4. Photography: the clinic placeholder carries the mark until the client's photos
 *      arrive (the photos themselves are the client's to supply).
 *   5. The mark: the head-in-profile from the logo, used as a silhouette watermark in two
 *      places only - the closing panel and the clinic placeholder.
 *   6. The footer and the home hero.
 *
 * The guide is docs/brand/frame.md; the declared values are `frame` in config/brand.yaml;
 * the `frame-*` rules in config/style-rules.yaml measure the rendered page.
 *
 * Specificity is fought with the theme's own selectors, which lean on `body #page
 * #pagetitle` and `#content`: each rule here names at least what the theme names, so the
 * cascade is decided by order (this sheet loads after the theme) and not by `!important`,
 * except against inline styles.
 */

:root {
	--anr-blue: #304495;
	--anr-green: #75c043;
	--anr-green-text: #4f832c;
	--anr-heading: #070a22;
	--anr-ink: #1f2b45;
	--anr-body: #595959;
	--anr-muted-text: #5b6880;
	--anr-line: #dde4ef;
	--anr-tint: #f2f6fd;
}

/* --- 1. The title row ------------------------------------------------------------------------
 *
 * White, left-aligned to the container so the title sits over the reading column, an
 * eyebrow above it naming the section (supplied by `frame.php` through the theme's own
 * `custom_sub_title` meta), and a hairline below. The photo and its overlay go: a
 * darkened stock photograph behind a 70px heading is the single most generic thing a
 * theme does, and it is what every condition page opened with.
 */
body #page #pagetitle.page-title {
	background: #fff;
	background-image: none !important;
	border-bottom: 1px solid var(--anr-line);
	padding: 44px 0 36px;
}

body #page #pagetitle.page-title.bg-overlay::before {
	display: none;
}

body #page #pagetitle .page-title-inner {
	text-align: left;
}

body #page #pagetitle .page-title-inner .page-subtitle {
	align-items: center;
	color: var(--anr-green-text);
	display: flex;
	font-family: Rubik, sans-serif;
	font-size: 13px;
	font-weight: 500;
	gap: 12px;
	letter-spacing: 2.4px;
	line-height: 1.3;
	margin: 0 0 12px;
	text-transform: uppercase;
}

body #page #pagetitle .page-title-inner .page-subtitle::before {
	background: var(--anr-green);
	border-radius: 2px;
	content: "";
	flex: 0 0 auto;
	height: 3px;
	width: 28px;
}

body #page #pagetitle .page-title-inner h1.page-title,
body.single #page #pagetitle .page-title-inner h1.page-title {
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.6px;
	line-height: 1.15;
	margin: 0;
	max-width: 22em;
	text-shadow: none;
}

/* The theme leaves 120px between the band and the content, which suited a photograph
   and does not suit a hairline. 56px, on every page but the home page, whose hero abuts
   the bands by its own arrangement. */
body:not(.home) #content.site-content {
	padding-top: 56px;
}

/*
 * The body of a condition or service page repeats the title as a `ct_heading` directly
 * under the photograph, eyebrow and all. With the title row carrying both, the repeat is
 * hidden - `display: none`, so it leaves the accessibility tree too and a screen reader
 * hears the title once. Only the block that opens the column: a `ct_heading` used later
 * as a section heading is untouched.
 */
.single-condition .vc_col-sm-8 .wpb_wrapper > .wpb_single_image + .ct-heading,
.single-condition .vc_col-sm-8 .wpb_wrapper > .ct-heading:first-child,
.single-service .vc_col-sm-8 .wpb_wrapper > .wpb_single_image + .ct-heading,
.single-service .vc_col-sm-8 .wpb_wrapper > .ct-heading:first-child {
	display: none;
}

/* The photograph that opened under the old band now opens the column: round its corners
   to the card radius so it belongs to the same family as everything else that is 14px. */
.single-condition .vc_col-sm-8 .wpb_wrapper > .wpb_single_image .vc_single_image-wrapper,
.single-service .vc_col-sm-8 .wpb_wrapper > .wpb_single_image .vc_single_image-wrapper,
.single-condition .vc_col-sm-8 .wpb_wrapper > .wpb_single_image img,
.single-service .vc_col-sm-8 .wpb_wrapper > .wpb_single_image img {
	border-radius: 14px;
	overflow: hidden;
}

.single-condition .vc_col-sm-8 .wpb_wrapper > .wpb_single_image,
.single-service .vc_col-sm-8 .wpb_wrapper > .wpb_single_image {
	margin-bottom: 34px;
}

/* The headshot on a staff page, for the same reason and to the same radius. Nikki, 2026-09-07,
   of the team: "add style updates as for conditions pages". The type on those pages comes from
   `typography.css`, which now reaches `.single-doctor-content`; this is the other half. */
.single-staff .single-doctor-media img {
	border-radius: 14px;
}

/*
 * A staff page gets its title row back, and therefore an `<h1>`.
 *
 * `timan-child/style.css` has `body.single-staff #pagetitle { display: none }`, so all
 * twenty-one staff pages rendered NO h1 at all: the person's name is an `<h2>` inside the
 * body column. That is the site's most-linked page type after the conditions, and every one
 * of them was a document with no title as far as a screen reader or a search engine is
 * concerned. Found 2026-09-07 while fixing the FAQ page, which the same rule had hidden.
 *
 * `frame.php` supplies the eyebrow ("Our team"), so the row reads the way every other page's
 * does, and the duplicate `<h2>` in the body is hidden - `display: none`, so it leaves the
 * accessibility tree too and the name is announced once. Exactly the treatment the repeated
 * `ct_heading` on a condition page gets, twenty lines above.
 */
body.single-staff #page #pagetitle.page-title {
	display: block;
}

.single-staff .single-doctor-body > .single-doctor-title {
	display: none;
}

/* With the name in the title row, the role is the first thing in the column. It carried the
   theme's 30px top margin under a heading that is no longer there. */
.single-staff .single-doctor-body > .single-doctor-position {
	margin-top: 0;
}

/* --- 3. The sidebar panels ---------------------------------------------------------------
 *
 * The theme paints each list a flat brand blue at 50px of padding with links at 60% white
 * (4.3:1, a fail at 16px). They become the site's card: tint, hairline, 14px corners, the
 * green rule above a dark heading, links in blue at full contrast, each on its own
 * hairline. The "Need help with this?" box takes the blue instead, so the column still
 * ends on the brand's strongest colour, where the call to action is.
 */
#content .vc_wp_custommenu {
	background: var(--anr-tint);
	border: 1px solid var(--anr-line);
	border-radius: 14px;
	padding: 26px 28px 18px;
}

#content .vc_wp_custommenu + .vc_wp_custommenu {
	margin-top: 22px;
}

#content .vc_wp_custommenu .widgettitle {
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 0 0 10px;
	padding-top: 15px;
}

#content .vc_wp_custommenu .widgettitle::before {
	background: var(--anr-green);
	border-radius: 2px;
	height: 3px;
	width: 36px;
}

#content .vc_wp_custommenu .widget_nav_menu ul li a {
	border-bottom: 1px solid #e3e9f4;
	color: var(--anr-blue);
	font-family: Rubik, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	padding: 9px 0;
	text-decoration: none;
	transition: color 0.2s ease;
}

#content .vc_wp_custommenu .widget_nav_menu ul li:last-child a {
	border-bottom: 0;
}

#content .vc_wp_custommenu .widget_nav_menu ul li > a:hover,
#content .vc_wp_custommenu .widget_nav_menu ul li.current-menu-item > a {
	color: var(--anr-heading);
	text-decoration: underline;
	text-decoration-color: var(--anr-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* The same panel wherever the THEME's sidebar renders. The clinic pages build their sidebar
 * from a WPBakery custom-menu element; everything the theme templates itself - the blog
 * index, the twelve archives and term pages, and all forty-two single posts and events, 55
 * URLs measured 2026-09-10 - carries `sidebar.php` instead: `#secondary .widget`, which the
 * theme draws as a white box with a 2px grey border and square corners, a centred title
 * flanked by grey lines, and links in a 14px lilac (#747da1, 4.05:1) with a FontAwesome
 * arrow on hover. Nikki, 2026-09-10, on `/events/`: "rounded boxes on side to match
 * aesthetic". Same component, so the same values as the rules above; stated a second time
 * only because the markup is different.
 *
 * Scoped to `body #secondary`, not to `.archive`: the first version of this block was
 * scoped to the listings because that is where she saw it, and the brand audit run to
 * commit it reported the lilac links still on a single event and a single post. The defect
 * is the template's, and the template is `sidebar.php`, so the scope is the sidebar.
 * `body` is there for specificity alone: the theme's own `#secondary .widget` is (1,1,0)
 * and the child theme's link rule is (1,4,2). Covers both list shapes the widgets emit -
 * the events widgets' `.entry-title a` and the blog widgets' `ul li a`.
 */
body #secondary .widget {
	background: var(--anr-tint);
	border: 1px solid var(--anr-line);
	border-radius: 14px;
	margin-bottom: 22px;
	padding: 26px 28px 18px;
}

body #secondary .widget:last-child {
	margin-bottom: 0;
}

body #secondary .widget .widget-title {
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 0 0 10px;
	text-align: left;
}

body #secondary .widget .widget-title::before {
	background: var(--anr-green);
	border-radius: 2px;
	content: "";
	display: block;
	height: 3px;
	margin-bottom: 12px;
	width: 36px;
}

body #secondary .widget .widget-title span {
	display: block;
	padding: 0;
}

body #secondary .widget .widget-title span::before,
body #secondary .widget .widget-title span::after {
	content: none;
}

body #secondary .widget .posts-list .entry-brief + .entry-brief {
	margin-top: 0;
}

body #secondary .widget .entry-title {
	margin: 0;
}

body #secondary .sidebar-fixed-inner .widget .entry-content h4 a,
body #secondary .widget ul li a {
	border-bottom: 1px solid #e3e9f4;
	color: var(--anr-blue);
	display: block;
	font-family: Rubik, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	padding: 9px 0;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	transition: color 0.2s ease;
}

body #secondary .widget .entry-brief:last-child .entry-content h4 a,
body #secondary .widget ul li:last-child a {
	border-bottom: 0;
}

/* The child theme's hover slides the link right and fades in an arrow; specificity (1,5,2),
   so the hover here is stated at (1,5,3) and the arrow's box is never generated. */
body #secondary .sidebar-fixed-inner .widget .entry-content h4 a::before {
	content: none;
}

body #secondary .sidebar-fixed-inner .widget .entry-content h4 a:hover,
body #secondary .widget ul li a:hover {
	color: var(--anr-heading);
	padding-left: 0;
	text-decoration: underline;
	text-decoration-color: var(--anr-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

body .alignCenterBox {
	background-color: var(--anr-blue);
	border-radius: 14px;
	box-shadow: none;
	margin-top: 22px;
	padding: 34px 28px 32px;
}

body .alignCenterBox h3 {
	color: #fff;
	font-family: Poppins, sans-serif;
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 18px;
}

/* --- 5. The mark -----------------------------------------------------------------------------
 *
 * The head-in-profile from the logo, as a single-colour silhouette
 * (`assets/anr-mark-blue.png`, cut from ANR_logo.png by the favicon tooling). Two places,
 * and the count is the rule: a motif seen everywhere is wallpaper. Here it is a 6% blue
 * watermark on the closing panel and a 14% one on the clinic placeholder, both bleeding
 * off the panel's edge so it reads as a mark rather than a logo.
 */
.wpb_text_column .anr-book,
.entry-content .anr-book {
	overflow: hidden;
	position: relative;
}

/* A pseudo-element rather than a background image, so the opacity is the mark's alone
   and the panel's tint stays exactly the token. It sits on the right edge, where the phone
   line rarely reaches, and at 6% the ink over it stays readable. */
.wpb_text_column .anr-book::after,
.entry-content .anr-book::after {
	background: url("anr-mark-blue.png") no-repeat right -28px bottom -44px / 190px auto;
	content: "";
	inset: 0;
	opacity: 0.06;
	pointer-events: none;
	position: absolute;
}

.anr-clinic__photo--placeholder .anr-icon {
	display: none;
}

.anr-clinic__photo--placeholder::after {
	background: url("anr-mark-blue.png") no-repeat center 58% / 42% auto;
	content: "";
	inset: 0;
	opacity: 0.14;
	position: absolute;
}

/* --- 6. The footer ----------------------------------------------------------------------------
 *
 * The theme's footer is a 100px band of #eaeaea with 30px capitalised widget titles and
 * FontAwesome carets before every link. It becomes the tint with the green rule along its
 * top, the titles set as labels, the phone number as display type, and no carets. The
 * words are the client's widgets and are untouched.
 */
.site-footer.footer-layout1 {
	background: var(--anr-tint);
	background-image: none !important;
}

.site-footer .top-footer {
	border-top: 4px solid var(--anr-green);
	padding: 64px 0 48px;
}

.site-footer .top-footer .footer-widget-title {
	color: var(--anr-green-text);
	font-family: Rubik, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2.4px;
	line-height: 1.3;
	margin: 0 0 18px;
	padding-top: 0;
	text-transform: uppercase;
}

.site-footer .top-footer .footer-widget-title::before {
	display: none;
}

.site-footer .top-footer,
.site-footer .top-footer .textwidget,
.site-footer .top-footer .textwidget div {
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 15px !important;
	line-height: 1.7;
}

.site-footer .top-footer .textwidget p {
	margin: 0 0 6px;
}

/* One paragraph per clinic, written by `anr-apply-footer`: a clear gap between clinics
   without the &nbsp; lines the widget used to carry for the purpose. */
.site-footer .top-footer .textwidget p + p {
	margin-top: 16px;
}

.site-footer .top-footer .textwidget strong {
	color: var(--anr-ink);
	font-weight: 500;
}

.site-footer .top-footer a {
	color: var(--anr-blue);
	text-decoration: none;
}

.site-footer .top-footer a:hover {
	color: var(--anr-heading);
	text-decoration: underline;
	text-decoration-color: var(--anr-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.site-footer .top-footer a[href^="tel:"] {
	color: var(--anr-blue);
	font-family: Poppins, sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 1.2;
}

.site-footer .top-footer ul.menu li + li {
	padding-top: 9px;
}

.site-footer .top-footer ul.menu li a {
	padding-left: 0;
}

.site-footer .top-footer ul.menu li a::before {
	display: none;
}

.site-footer .top-footer .widget_recent_entries ul li {
	padding: 0 0 9px;
}

/* The copyright line the child theme prints after the footer, inline-styled and centred. */
#page > p {
	background: var(--anr-tint);
	border-top: 1px solid var(--anr-line);
	color: var(--anr-muted-text);
	font-family: Rubik, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	padding: 16px 15px 20px;
}

#page > p a {
	color: var(--anr-blue);
}

/* --- 6. The home hero -----------------------------------------------------------------------
 *
 * The slide is Slider Revolution's, and its layers are positioned by script, so the copy
 * and its sizes stay with `anr-shape-hero`. What CSS can do is give the words a calm
 * surface: a wash of the ink from the left edge, where the text sits, fading to nothing
 * over the photograph's subject on the right, instead of the flat darkening a theme
 * applies to the whole picture. The wash is a pseudo-element on the background wrapper,
 * which Slider Revolution stacks below every layer.
 */
rs-slide > rs-sbg-px::after {
	background: linear-gradient(
		100deg,
		rgba(31, 43, 69, 0.82) 0%,
		rgba(31, 43, 69, 0.62) 38%,
		rgba(31, 43, 69, 0.18) 66%,
		rgba(31, 43, 69, 0) 85%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

rs-slide rs-layer[data-type="text"] {
	letter-spacing: -0.01em;
	text-shadow: none;
}

/* --- 7. The accordion -------------------------------------------------------------------------
 *
 * Nikki, 2026-09-07: "FAQs page round boxes to match style of other pages". `/faq/` is built
 * out of two `[ct_accordion]` shortcodes - sixteen questions, the client's own copy - and the
 * theme renders each entry as a square flat panel: a `#f4f7ff` bar with a 2px border of the
 * same colour and the question in `#8d90ab` (2.9:1 on that bar, a contrast failure at 16px),
 * turning white only when open. Square corners on the one page whose whole content is boxes,
 * next to a site whose cards are all 14px.
 *
 * Presentation only, and deliberately so: nothing here touches the shortcode, its markup or a
 * word of the copy, so no approval is needed under the rule in CLAUDE.md. Every entry becomes
 * the same card the rest of the site uses - white, hairline, 14px, the resting shadow - with
 * the question in Poppins at full contrast and the answer at the reading body size.
 *
 * SPECIFICITY. The theme's rules are `.ct-accordion.layout1 .card .card-header a`, (0,4,1),
 * and the first draft of this section lost to every one of them: the corners rounded and
 * nothing else changed, because `.card` is only the outer box and the bar's colour lives on
 * the anchor. Each rule below names at least as much as the theme's does, so order decides
 * and no `!important` is needed. Every selector is scoped through `.ct-accordion` because
 * `.card`, `.card-header` and `.card-body` are Bootstrap's names and are used elsewhere.
 */

/* The title row, back on. `timan-child/style.css` hides `#pagetitle` on `body.page-id-732`,
   which suited a page that carried its own hero photograph and a "FAQ'S" heading in the body.
   Since 2026-09-07 it carries neither, and the rule left the page with no rendered `<h1>`.
   Specificity beats the theme's (1,1,1) without naming its page id, so the rule applies to any
   accordion page. */
body.anr-faq #page #pagetitle.page-title {
	display: block;
}

/* A measure for the question bars. Forty-two of them across the full 1170px container is a
   long line to scan, and the answer inside is body copy at the reading size. 860px keeps the
   bar comfortably wider than the 736px prose cap without running the container.

   Left-aligned, not centred: the title row above it is aligned to the container's left edge,
   like every page on the site, and a centred column under a left-aligned h1 reads as two
   different grids. */
body.anr-faq #content .wpb_column > .vc_column-inner > .wpb_wrapper {
	max-width: 860px;
	margin-left: 0;
	margin-right: auto;
}

.ct-accordion.layout1 .ct-accordion-body .card {
	margin-bottom: 12px;
	border: 1px solid var(--anr-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(7, 10, 34, .05);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.ct-accordion.layout1 .ct-accordion-body .card:hover {
	border-color: #c3d0e6;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-header {
	padding: 0;
	border: 0;
	background: transparent;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-header .card-title {
	margin: 0;
}

/* The whole bar is the hit target, not just the words, and the pale panel goes: the card is
   the box now, so the anchor only has to be a heading. The theme absolutely-positions the
   plus glyph at `right: 38px`, which is why the padding keeps room on the right. */
.ct-accordion.layout1 .ct-accordion-body .card .card-header a {
	display: block;
	padding: 18px 56px 18px 24px;
	border: 0;
	background-color: transparent;
	color: var(--anr-heading);
	font-family: Poppins, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-header a:hover {
	color: var(--anr-blue);
}

/* An open question takes the brand blue. The theme signalled state by turning the panel from
   grey to white; every card is white now, so the state is carried by the type and the glyph,
   which the theme already swaps from plus to minus. */
.ct-accordion.layout1 .ct-accordion-body .card .card-header a[aria-expanded="true"] {
	background-color: transparent;
	color: var(--anr-blue);
	padding-bottom: 10px;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-header a i {
	right: 24px;
	color: var(--anr-green-text);
	font-size: 18px;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-body {
	padding: 0 24px 22px;
	border: 0;
	color: var(--anr-body);
	font-family: Rubik, sans-serif;
	font-size: 17px;
	line-height: 1.7;
}

/* Lists inside an answer. `typography.css` cannot reach them - its scope is a body-copy root
   and a card body is not one - so the green outside marker is restated here rather than left
   as the theme's inside black one, which is the only place on the site a bullet would differ. */
.ct-accordion.layout1 .ct-accordion-body .card .card-body ul {
	margin: 0 0 16px;
	padding: 0 0 0 1.35em;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-body ul > li {
	list-style: disc outside;
	margin: 0 0 6px;
	padding-left: 4px;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-body ul > li::marker {
	color: var(--anr-green);
	font-size: 1.05em;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-body > p:last-child,
.ct-accordion.layout1 .ct-accordion-body .card .card-body > ul:last-child {
	margin-bottom: 0;
}

.ct-accordion.layout1 .ct-accordion-body .card .card-body a {
	color: var(--anr-blue);
	text-decoration: underline;
	text-decoration-color: rgba(117, 192, 67, .9);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ct-accordion.layout1 .ct-accordion-body .card {
		transition: none;
	}
}

@media (max-width: 767px) {
	.ct-accordion.layout1 .ct-accordion-body .card .card-header a {
		padding: 16px 46px 16px 18px;
		font-size: 16px;
	}

	.ct-accordion.layout1 .ct-accordion-body .card .card-header a i {
		right: 18px;
	}

	.ct-accordion.layout1 .ct-accordion-body .card .card-body {
		padding: 0 18px 18px;
		font-size: 16px;
	}
}

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

@media (max-width: 991px) {
	#content .vc_wp_custommenu,
	body #secondary .widget {
		padding: 22px 22px 14px;
	}
}

@media (max-width: 767px) {
	body #page #pagetitle.page-title {
		padding: 28px 0 24px;
	}

	body #page #pagetitle .page-title-inner h1.page-title,
	body.single #page #pagetitle .page-title-inner h1.page-title {
		font-size: 30px;
	}

	.site-footer .top-footer {
		padding: 44px 0 32px;
	}

	.site-footer .top-footer a[href^="tel:"] {
		font-size: 22px;
	}
}