/* =================================================================
   HOME HERO — THE STATEMENT SLIDER
   =================================================================
   Three statements exchanging in one screen, a numbered index that
   names each of them, and a row of facts underneath. No photograph, no
   illustration, no drawn object: every mark on this section is type,
   rule or colour.

   THE PALETTE IS THE BRAND'S, NOT A NEW ONE
   -----------------------------------------
   #17A2B8 is --themeht-primary-color, the colour of the logo and the
   header. Everything else is derived from it or neutral. The ink is a
   deep TEAL-black, not a navy: a blue-black beside a teal accent reads
   violet, which is the exact complaint that got an earlier version of
   this section deleted.

   CONTRAST IS A REQUIREMENT HERE, NOT A PREFERENCE
   ------------------------------------------------
   A large share of this clinic's visitors are elderly. Body text is
   #55686F on #FBFDFD — 6.2:1, comfortably past AA — and nothing
   carrying meaning is lighter than that. The pale tints below are
   backgrounds and rules only; no word is ever set in one.

   THE ONE RULE THIS FILE OBEYS
   ----------------------------
   Everything under the ".cb-hero--ready" prefix is the slider. Every
   rule WITHOUT it is the fallback, and the fallback is a complete,
   readable section: three statements stacked in order, controls
   hidden. That class is added by home-hero.js, so a script that never
   arrives costs the visitor nothing.
   ================================================================= */

.cb-hero {
	--brand:      #17A2B8;
	--brand-deep: #0D7C8E;
	--brand-wash: #EAF7F9;

	--ink:        #0A2A33;
	--ink-soft:   #55686F;
	--line:       #DFE9EC;
	--paper:      #FFFFFF;
	--ground:     #FBFDFD;

	/* How long a statement holds. Written by the script from the
	   shortcode's data-interval so the rule that fills and the timer
	   that advances can never disagree — they are the same clock. */
	--dur: 7000ms;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ground);
	color: var(--ink);
}


/* -----------------------------------------------------------------
   THE GROUND
   -----------------------------------------------------------------
   Two soft washes of the brand colour, well under 10% each, placed at
   opposite corners. They give the section a direction to be read in —
   the type sits in the lighter half — without putting a picture behind
   it. Nothing here is an image file.
   ----------------------------------------------------------------- */

.cb-hero::before,
.cb-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

.cb-hero::before {
	inset-block-start: -22vw;
	inset-inline-start: -14vw;
	width: 52vw;
	height: 52vw;
	background: radial-gradient( circle, rgba(23, 162, 184, .10) 0%, rgba(23, 162, 184, 0) 68% );
}

.cb-hero::after {
	inset-block-end: -26vw;
	inset-inline-end: -18vw;
	width: 46vw;
	height: 46vw;
	background: radial-gradient( circle, rgba(23, 162, 184, .07) 0%, rgba(23, 162, 184, 0) 66% );
}

.cb-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin-inline: auto;
	padding: 116px 24px 84px;
}


/* -----------------------------------------------------------------
   THE COLUMNS
   -----------------------------------------------------------------
   Copy on a measure, index against the far edge. The gap between them
   is a rule, which is what stops the second column reading as an
   afterthought floating in white space.
   ----------------------------------------------------------------- */

.cb-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: 56px;
	align-items: start;
}

.cb-hero__copy {
	min-width: 0;
}

.cb-hero .cb-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
	color: var(--brand-deep);
}

/* The short rule before the eyebrow. A pseudo-element rather than a
   border so it keeps its length when the label wraps on a phone. */
.cb-hero .cb-hero__eyebrow::before {
	content: "";
	flex: 0 0 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--brand);
}


/* -----------------------------------------------------------------
   THE SLIDES
   -----------------------------------------------------------------
   FALLBACK (no .cb-hero--ready): ordinary flow, all three visible,
   separated by a hairline. It is a legible section on its own.
   ----------------------------------------------------------------- */

.cb-hero__slide + .cb-hero__slide {
	margin-block-start: 34px;
	padding-block-start: 34px;
	border-block-start: 1px solid var(--line);
}

/*
 * THE THREE STATEMENTS ARE SET IDENTICALLY. The tag is the ONLY
 * difference between them.
 *
 * One rule for both h1 and h2, and it carries the section class for a
 * reason worth stating: the theme ships `.entry-content h2` at 28px/600
 * and `html[dir="rtl"] h1, h2 { line-height: 1.45 }`, both (0,1,1),
 * which beat a plain `.cb-hero__title` at (0,1,0). The result was the
 * first statement at 50px and the other two at 28px — the same slider
 * apparently changing size as it went.
 *
 * Repeating `.cb-hero` is not an override layer. It is this rule stated
 * at the weight it needs to win against a heading style it was always
 * meant to replace, in the one file that owns this section. The
 * alternative is !important, which wins the same argument while hiding
 * what the argument was.
 *
 * Any typographic property added below has to hold for BOTH tags: the
 * h1 is a search-engine signal, never a size.
 */
.cb-hero .cb-hero__title {
	margin: 0 0 18px;
	font-size: clamp(29px, 3.5vw, 50px);
	font-weight: 800;
	line-height: 1.26;
	letter-spacing: -.005em;
	color: var(--ink);

	/* Arabic headings at this size break badly on their own: the
	   browser will happily leave one word on the last line. */
	text-wrap: balance;
}

.cb-hero .cb-hero__text {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(16px, 1.05vw, 18.5px);
	line-height: 1.95;
	color: var(--ink-soft);
}


/* -----------------------------------------------------------------
   THE CALLS TO ACTION
   -----------------------------------------------------------------
   Fixed, not per-slide. They are the same two actions whichever
   statement is showing, and a button that redraws itself three times a
   minute is a button nobody trusts to still be there when they reach
   for it.
   ----------------------------------------------------------------- */

.cb-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 40px;
}

.cb-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 34px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

/*
 * EVERY BUTTON RULE BELOW NAMES :visited EXPLICITLY. Do not drop it.
 *
 * The theme ships `a, a:visited { color: var(--themeht-text-color) }`
 * in base.css — a dark navy, at specificity (0,1,1), which beats a
 * plain `.cb-hero__btn--solid` at (0,1,0). So the label was white for
 * a first-time visitor and turned DARK NAVY ON TEAL the moment that
 * visitor had been to the page the button links to. Nothing about the
 * markup changes; the same button is legible or not depending on the
 * reader's history, which is why it survives a casual look.
 *
 * The section class plus the pseudo-class puts these at (0,3,0), above
 * the theme's rule in both states — and the hover rules are written at
 * the same weight and placed AFTER, or a visited link would keep its
 * resting colour while the pointer is on it.
 */
.cb-hero .cb-hero__btn--solid,
.cb-hero .cb-hero__btn--solid:visited {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--paper);
}

.cb-hero .cb-hero__btn--solid:hover,
.cb-hero .cb-hero__btn--solid:focus-visible {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
	color: var(--paper);
	transform: translateY(-1px);
}

/*
 * The quiet button fills with the BRAND on hover and its label turns
 * white in the same rule.
 *
 * Written as two rules — one for the background, one for the colour —
 * this is where white buttons across this site turned dark with their
 * dark label still on them and the text vanished. Both properties, one
 * selector, always.
 */
.cb-hero .cb-hero__btn--quiet,
.cb-hero .cb-hero__btn--quiet:visited {
	background: var(--paper);
	border-color: var(--line);
	color: var(--ink);
}

.cb-hero .cb-hero__btn--quiet:hover,
.cb-hero .cb-hero__btn--quiet:focus-visible {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--paper);
	transform: translateY(-1px);
}


/* -----------------------------------------------------------------
   THE INDEX
   -----------------------------------------------------------------
   Hidden in the fallback: with all three statements already on screen
   there is nothing for it to navigate to, and a set of controls that
   do nothing is worse than none.
   ----------------------------------------------------------------- */

.cb-hero__side { display: none; }

.cb-hero--ready .cb-hero__side {
	display: block;
	border-inline-start: 1px solid var(--line);
	padding-inline-start: 34px;
}

.cb-hero__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cb-hero__tab {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"num label"
		"rule rule";
	align-items: center;
	gap: 10px 12px;
	width: 100%;
	margin: 0;
	padding: 14px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: start;
	cursor: pointer;
	transition: background-color .2s ease;
}

.cb-hero__tab:hover { background: var(--brand-wash); }

.cb-hero__tab-num {
	grid-area: num;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--brand);
	opacity: .55;
	transition: opacity .2s ease;
}

.cb-hero__tab-label {
	grid-area: label;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink-soft);
	transition: color .2s ease;
}

.cb-hero__tab.is-on .cb-hero__tab-num { opacity: 1; }
.cb-hero__tab.is-on .cb-hero__tab-label { color: var(--ink); }

/* The track is always visible so the three read as a set; only the
   fill inside it moves. */
.cb-hero__tab-rule {
	grid-area: rule;
	display: block;
	height: 3px;
	border-radius: 3px;
	background: var(--line);
	overflow: hidden;
}

.cb-hero__tab-rule i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--brand);
	transform: scaleX(0);

	/*
	 * transform-origin has no logical keyword — `left` means the left
	 * edge of the screen in both directions. Set explicitly for RTL, or
	 * the rule fills backwards on the Arabic side, away from the
	 * reading direction.
	 */
	transform-origin: left center;
}

[dir="rtl"] .cb-hero__tab-rule i { transform-origin: right center; }

/*
 * The fill is the clock.
 *
 * The script does not run a timer of its own: it starts this animation
 * and advances on animationend. One source of truth, so the rule can
 * never finish a second before or after the statement changes — and
 * pausing is a single `animation-play-state`, which stops both at once
 * rather than stopping the bar while the timer keeps counting.
 */
@keyframes cb-hero-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.cb-hero--ready .cb-hero__tab.is-on .cb-hero__tab-rule i {
	animation: cb-hero-fill var(--dur) linear forwards;
}

.cb-hero.is-paused .cb-hero__tab.is-on .cb-hero__tab-rule i {
	animation-play-state: paused;
}

/* A statement reached by hand keeps the rule filled rather than
   re-running the countdown, which would look like the visitor's click
   started a timer against them. */
.cb-hero.is-manual .cb-hero__tab.is-on .cb-hero__tab-rule i {
	animation: none;
	transform: scaleX(1);
}


.cb-hero__arrows {
	display: flex;
	gap: 10px;
	margin-block-start: 26px;
	padding-inline-start: 12px;
}

.cb-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cb-hero__arrow:hover,
.cb-hero__arrow:focus-visible {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--paper);
}

/*
 * The chevrons are drawn pointing left/right and mirrored in RTL.
 *
 * "Previous" is a DIRECTION, not a side: on this Arabic site the
 * previous slide is to the right. Drawing them once and flipping the
 * pair keeps the same file correct in both directions.
 */
[dir="rtl"] .cb-hero__arrow svg { transform: scaleX(-1); }


/* -----------------------------------------------------------------
   THE FACTS
   -----------------------------------------------------------------
   The row that does the job the photographs used to do. Present in the
   fallback too — it depends on nothing.
   ----------------------------------------------------------------- */

/*
 * Flex and spread rather than a three-column grid.
 *
 * The grid was written when there were exactly three facts, and it
 * hard-coded that: removing one left an empty third column, so two
 * facts sat off to one side of a full-width rule with a hole beside
 * them. The count is content, not layout.
 *
 * space-between rather than center, at every width: the row sits under
 * a rule that runs the full measure, and ending the facts short of both
 * ends of that rule leaves the line looking longer than the content it
 * belongs to. Spread, the first and last fact land on the rule's ends
 * and the row reads as one band instead of a centred cluster with a
 * stray line over it.
 *
 * The gap is still declared. It is not what positions them — it is the
 * floor that keeps two labels from touching once space-between runs out
 * of room to distribute, which on a phone is immediately.
 *
 * nowrap is deliberate and it is the whole point on a phone: these are
 * two short credentials that belong beside each other, and wrapping
 * turns them into a stacked list that reads as a third paragraph. The
 * type scales down instead. See the phone block at the end of the file.
 */
.cb-hero__facts {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	gap: clamp(16px, 4vw, 56px);
	margin: 64px 0 0;
	padding: 34px 0 0;
	border-block-start: 1px solid var(--line);
	list-style: none;
}

.cb-hero__fact {
	display: flex;
	align-items: baseline;
	gap: 14px;
	/* Without this a flex item refuses to go below its content width,
	   so a long label pushes the row wider than the phone. */
	min-width: 0;
}

.cb-hero .cb-hero__fact-num {
	font-size: clamp(30px, 2.6vw, 40px);
	font-weight: 800;
	line-height: 1;
	color: var(--brand);
	font-variant-numeric: tabular-nums;

	/*
	 * "+15" is authored with the plus first and has to render that way.
	 *
	 * The plus is bidi-NEUTRAL: in an Arabic paragraph it takes the
	 * paragraph's direction and moves to the other end of the number, so
	 * the mark comes out as "15+" — which reads as a footnote reference,
	 * not as "more than". Isolating the value as its own left-to-right
	 * run fixes it without touching the Arabic label beside it, and
	 * without asking whoever edits the copy to know any of this.
	 */
	direction: ltr;
	unicode-bidi: isolate;
}

.cb-hero .cb-hero__fact-label {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ink-soft);
}


/* =================================================================
   SLIDER MODE
   =================================================================
   Everything from here needs the script.
   ================================================================= */

/*
 * One grid cell, three slides in it, and a height that follows the one
 * on screen.
 *
 * Stacking them in a single cell is what lets them cross-fade. Left at
 * that, the cell is as tall as the TALLEST statement at every width,
 * which on a tablet left a 110px hole between the shortest statement
 * and the buttons under it — the section looked like it had lost
 * something.
 *
 * So `align-items: start` keeps each slide at its own height (a
 * stretched slide cannot be measured), and the script sets the
 * viewport's height to the active one and lets it transition. Same
 * duration as the fade, so the type and the space it sits in resolve
 * together rather than one chasing the other.
 *
 * Without the script the height is never set and this is an ordinary
 * auto-height block — the fallback is unaffected.
 */
.cb-hero--ready .cb-hero__viewport {
	display: grid;
	align-items: start;
	transition: height .62s cubic-bezier(.22, .61, .36, 1);
}

.cb-hero--ready .cb-hero__slide {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	border: 0;

	opacity: 0;
	transform: translateY(16px);
	filter: blur(5px);

	/*
	 * visibility, delayed, is what takes a resolved-away statement out
	 * of the tab order. At opacity 0 it is still focusable, so without
	 * this the keyboard lands on a heading nobody can see; with a plain
	 * `visibility: hidden` there is no fade at all, because visibility
	 * is not interpolated. Delaying it to the end of the fade gives
	 * both.
	 */
	visibility: hidden;
	transition:
		opacity .62s cubic-bezier(.22, .61, .36, 1),
		transform .62s cubic-bezier(.22, .61, .36, 1),
		filter .62s cubic-bezier(.22, .61, .36, 1),
		visibility 0s linear .62s;
}

.cb-hero--ready .cb-hero__slide.is-on {
	opacity: 1;
	transform: none;
	filter: none;
	visibility: visible;
	transition-delay: 0s;
}


/* -----------------------------------------------------------------
   REDUCED MOTION
   -----------------------------------------------------------------
   The slider still works, and the visitor drives it: the statements
   exchange with no fade and no rise, and nothing advances on its own —
   the script never starts the fill, and the fill is the clock.
   ----------------------------------------------------------------- */

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

	.cb-hero--ready .cb-hero__slide,
	.cb-hero--ready .cb-hero__viewport {
		transition: none;
	}

	.cb-hero--ready .cb-hero__tab.is-on .cb-hero__tab-rule i {
		animation: none;
		transform: scaleX(1);
	}

	.cb-hero__btn,
	.cb-hero__arrow,
	.cb-hero__tab {
		transition: none;
	}

	.cb-hero__btn:hover,
	.cb-hero__btn:focus-visible {
		transform: none;
	}
}


/* -----------------------------------------------------------------
   FOCUS
   -----------------------------------------------------------------
   One visible ring, in the brand colour, on everything operable. The
   parent theme removes outlines in places; this is scoped to the hero
   and states it explicitly rather than relying on the default.
   ----------------------------------------------------------------- */

.cb-hero__btn:focus-visible,
.cb-hero__arrow:focus-visible,
.cb-hero__tab:focus-visible {
	outline: 2px solid var(--brand-deep);
	outline-offset: 3px;
}


/* =================================================================
   BREAKPOINTS
   ================================================================= */

/* Tablet: the index moves under the copy and lies down. It is still
   the navigation — three named, clickable statements — but as a row of
   filling rules rather than a column. */
@media (max-width: 1024px) {

	.cb-hero__inner { padding: 96px 24px 72px; }

	.cb-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.cb-hero--ready .cb-hero__side {
		border-inline-start: 0;
		padding-inline-start: 0;
		border-block-start: 1px solid var(--line);
		padding-block-start: 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
	}

	.cb-hero__nav {
		flex-direction: row;
		flex: 1 1 auto;
		gap: 10px;
	}

	.cb-hero__tab {
		flex: 1 1 0;
		padding: 10px;
	}

	.cb-hero__arrows {
		margin-block-start: 0;
		padding-inline-start: 0;
		flex: 0 0 auto;
	}
}

/* Phone. The numbers come off the index — at this width the label
   alone identifies the slide and the pair wraps to two lines. The facts
   stay on one line and shrink instead. */
@media (max-width: 767px) {

	.cb-hero__inner { padding: 72px 20px 56px; }

	/* The rule costs 46px of a 350px line and pushes the credential onto
	   a third row. On a phone the label carries itself. */
	.cb-hero .cb-hero__eyebrow::before { display: none; }

	.cb-hero .cb-hero__eyebrow { gap: 0; }

	.cb-hero .cb-hero__title  { line-height: 1.32; }
	.cb-hero .cb-hero__text   { line-height: 1.9; }

	.cb-hero__cta { margin-block-start: 32px; }

	.cb-hero__btn {
		flex: 1 1 100%;
		padding: 0 22px;
	}

	.cb-hero__tab-num { display: none; }

	.cb-hero__tab {
		grid-template-columns: 1fr;
		grid-template-areas:
			"label"
			"rule";
		padding: 8px 4px;
	}

	.cb-hero__tab-label { font-size: 14px; }

	.cb-hero__arrow {
		width: 42px;
		height: 42px;
	}

	/*
	 * Two facts keep the spread line and give up type size instead; three or
	 * more take a line each.
	 *
	 * The dividing line is not taste, it is the measure. Two short
	 * credentials at 12px sit side by side and stay readable. Add a third and
	 * each one is down to about a hundred pixels, which sets every label three
	 * words to a line and turns a row into a block of broken text. The count
	 * is published as data-count on the list; see inc/home-hero.php.
	 */
	.cb-hero__facts {
		gap: 16px;
		margin-block-start: 48px;
		padding-block-start: 28px;
	}

	.cb-hero__fact { gap: 8px; }

	.cb-hero .cb-hero__fact-num { font-size: 24px; }

	.cb-hero .cb-hero__fact-label {
		font-size: 12px;
		line-height: 1.45;
	}

	/* Three or more: one per line, reading down the column. */
	.cb-hero__facts:not([data-count="2"]) {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 18px;
	}

	.cb-hero__facts:not([data-count="2"]) .cb-hero__fact {
		flex: 0 0 100%;
		gap: 12px;
	}

	.cb-hero__facts:not([data-count="2"]) .cb-hero__fact-num { font-size: 28px; }

	.cb-hero__facts:not([data-count="2"]) .cb-hero__fact-label { font-size: 14px; }
}