/* Round 12: final pass (shared). Loaded after the r7 files. */

/* ==========================================================================
   Client round 12, shared layer (group "ui").

   1. Control tokens: one set of values for every button family
   2. The button families: solid .btn, the stacked booking button, the
      outline pill (phone, directions), the go-link with its arrow chip
   3. Matched pairs: a go-link beside (or under) a large or stacked button
      takes that button's height, type and radius (client item 6)
   4. Treatment pages: the section nav, a tab row in the page grid until it
      sticks, then the full-width bar (client item 3)
   5. Treatment pages: the doctors section without the extra review, the
      Google trust card in its place at every width (client item 1)
   6. Treatment pages: the questions column ends with the phone and Get
      Directions pills, the hero's pair (client item 2)
   7. Treatment pages: "Further reading", one grid of identical cards, the
      Braces 101 guide included (client item 5)
   8. Doctor profiles: the booking card and the closing call to action
   9. FAQ lists: one answer open at a time (client item 7), the open item
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Control tokens. The approved home page is the reference: a 48px
      control, a 56px large button (52px on a phone), the stacked booking
      button at 66px (62px on a phone), one 0.65rem radius, 700 weight, a
      38px arrow chip, the same hover lift and focus ring everywhere.
   -------------------------------------------------------------------------- */
:root {
	--ui-r: 0.65rem;
	--ui-h: 48px;
	--ui-h-lg: 56px;
	--ui-h-pill: 48px;
	--ui-fs: 0.97rem;
	--ui-fs-lg: 1.01rem;
	--ui-fs-go: 0.95rem;
	--ui-fw: 700;
	--ui-gap: 0.75rem;
	--ui-chip: 38px;
	--ui-chip-lg: 40px;
	--ui-chip-r: 0.5rem;
	--ui-lift: -2px;
	--ui-shadow-hover: 0 16px 30px -22px rgba(23, 13, 48, 0.7);
	--ui-shadow-line: 0 10px 24px -20px rgba(26, 18, 54, 0.6);
	--ui-ring-w: 3px;
	--ui-ring-offset: 3px;
	--ui-t: 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (max-width: 47.99rem) {
	:root {
		--ui-h-lg: 52px;
		--ui-h-pill: 46px;
		--ui-fs-lg: 0.97rem;
		--ui-chip-lg: 38px;
	}
}


/* --------------------------------------------------------------------------
   2. The button families.
   -------------------------------------------------------------------------- */

/* Every control: the same timing, and no grey flash when tapped. */
:is(.btn, .pill, .go-link) {
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--ui-t), box-shadow var(--ui-t), background-color var(--ui-t), border-color var(--ui-t), color var(--ui-t);
}

/* Text and icon on one centre line, whatever the family. */
:is(.btn, .pill, .go-link) > svg,
.go-link > .go-link__ic,
.btn__wrap > svg { flex: none; }

/* The go-link: 48px, the height of the solid button beside it
   (38px chip, 4px inset, 1px border). */
.go-link {
	min-height: var(--ui-h);
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: var(--ui-r);
	font-weight: var(--ui-fw);
	line-height: 1.3;
}
.go-link__ic { border-radius: var(--ui-chip-r); }

/* The outline pill: 48px on a desktop, 46px on a phone (the home hero's). */
.pill,
.premium-inner .pill {
	min-height: var(--ui-h-pill);
	border-radius: var(--ui-r);
	line-height: 1.2;
}

/* The pill's icon and hover border follow the page's care lane (teal on a
   pediatric page, where they were purple); the dark pill keeps its own. */
.pill:not(.pill--dark) > svg { color: var(--lane, var(--ortho)); }
.pill:not(.pill--dark):hover,
.premium-inner .pill:not(.pill--dark):hover { border-color: var(--lane, var(--ortho)); }

/* Hover: the solid buttons already lift 2px (revision-2.css); the pill and
   the go-link now lift the same 2px, only where there is a pointer. */
@media (hover: hover) {
	:is(.pill, .go-link):hover { transform: translateY(var(--ui-lift)); }
	.pill:hover { box-shadow: var(--ui-shadow-line); }
}

/* A touch screen has no hover: a tapped button does not stay lifted. */
@media (hover: none) {
	:is(.btn, .premium-inner .btn):hover { transform: none; }
}

/* Press: every control settles back. */
:is(.btn, .pill, .go-link):active,
.premium-inner :is(.btn, .pill, .go-link):active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 0.06s;
}

/* Focus: one 3px ring, 3px clear of the control, following its own corners
   (the generic rules used to square every focused control to 3-4px). The
   ring's colour stays with each context (white on the dark bands). */
:is(.btn, .pill, .go-link):focus-visible {
	outline-width: var(--ui-ring-w);
	outline-style: solid;
	outline-offset: var(--ui-ring-offset);
	border-radius: var(--ui-r);
}
.spx__book :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	:is(.btn, .pill, .go-link),
	:is(.btn, .pill, .go-link):hover { transform: none !important; transition: none; }
}

/* The emergency page's call button (the hero's first action) had a card's
   16px corners; it is a button. */
.single-elite_treatment.premium-inner .ihero--urgent .btn--call { border-radius: var(--ui-r); }

/* The stacked booking button on a phone and a tablet, wherever it is
   printed: the home hero's phone values (62px, 1.1rem sides, 0.98rem). Other
   pages drew it 63 to 67px tall with three different paddings, and on a
   tablet the desktop padding wrapped "Book an Orthodontic Consultation" to
   two lines in every hero (an 88px button). */
@media (max-width: 63.99rem) {
	.btn.btn--stacked.btn--stacked {
		min-height: 62px;
		padding: 0.7rem 1.1rem;
		font-size: 0.98rem;
	}
	.btn.btn--stacked .btn__wrap { gap: 0.75rem; }
	.btn.btn--stacked .btn__slot { font-size: 0.78rem; }
}
/* Inside a card (the doctor's booking card, the lane cards of Why Elite and
   Technology, the insurance and offer cards, the article's closing card) the
   button is narrower than the screen: tighter sides and a label that scales
   with the screen, so the label keeps one line down to a 360px phone. */
@media (max-width: 47.99rem) {
	:is(.pbook__btn, .tech-lane__actions, .why-lane__actions, .plan-card__acts, .pay-terms__acts, .offer-book__acts, .post-next__book) > .btn--stacked.btn--stacked {
		padding-inline: 0.9rem;
		font-size: clamp(0.82rem, calc(6.2vw - 9px), 0.98rem);
	}
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
	:is(.pbook__btn, .tech-lane__actions, .why-lane__actions, .plan-card__acts, .pay-terms__acts, .offer-book__acts, .post-next__book) > .btn--stacked.btn--stacked {
		padding-inline: 0.9rem;
		font-size: 0.9rem;
	}
}
@media (max-width: 63.99rem) {
	:is(.pbook__btn, .tech-lane__actions, .why-lane__actions, .plan-card__acts, .pay-terms__acts, .offer-book__acts, .post-next__book) > .btn--stacked .btn__wrap { gap: 0.6rem; }
}


/* --------------------------------------------------------------------------
   3. Matched pairs (client item 6). A row that holds a large button: the
      go-link beside or under it is the same height (56px, 52px on a phone),
      in the same type size, with a slightly larger chip at the same inset.
      A row that holds a stacked booking button: side by side, the go-link
      takes the button's height.
   -------------------------------------------------------------------------- */
:is(.book-cta, .inline-cta, .hero-cta, .tr-cost__foot, .ins-card__acts, .offer-book__acts):has(> .btn--lg) > .go-link,
:is(.book-cta, .inline-cta, .hero-cta):has(> .btn--stacked) > .go-link {
	min-height: var(--ui-h-lg);
	padding: calc((var(--ui-h-lg) - var(--ui-chip-lg) - 2px) / 2) calc((var(--ui-h-lg) - var(--ui-chip-lg) - 2px) / 2) calc((var(--ui-h-lg) - var(--ui-chip-lg) - 2px) / 2) 1.35rem;
	font-size: var(--ui-fs-lg);
}
:is(.book-cta, .inline-cta, .hero-cta, .tr-cost__foot, .ins-card__acts, .offer-book__acts):has(> .btn--lg) > .go-link .go-link__ic,
:is(.book-cta, .inline-cta, .hero-cta):has(> .btn--stacked) > .go-link .go-link__ic {
	width: var(--ui-chip-lg);
	height: var(--ui-chip-lg);
}
@media (min-width: 48rem) {
	/* Beside a stacked button (62 to 67px) the chip keeps the same inset on its three sides. */
	:is(.book-cta, .inline-cta, .hero-cta):has(> .btn--stacked) > .go-link { padding-right: 0.8rem; }
	:is(.book-cta, .inline-cta, .hero-cta):has(> .btn--stacked):has(> .go-link),
	.premium-inner.single-elite_clinician .profile-treatments .book-cta:has(> .btn--stacked) { align-items: stretch; }
}
/* The same gap between the two everywhere. */
:is(.book-cta, .inline-cta):has(> .btn):has(> .go-link) { gap: var(--ui-gap); }


/* --------------------------------------------------------------------------
   4. Treatment pages: the section nav (client item 3).
      Not stuck: a tab row inside the page grid, on the page's own
      background, one hairline under the links across the grid's width, and
      an "On this page" label at the left on a desktop. Stuck under the
      header: the full-width white bar with its hairline and shadow, as
      before. site.js marks the bar .is-live when it starts watching the
      marker printed before it, and .is-stuck while the marker is above the
      screen; without the script the bar stays the white bar (readable when
      it sticks). Both states keep the same 1px borders (transparent when
      not stuck), so the bar's height and the links' places never change:
      nothing jumps when it sticks.
   -------------------------------------------------------------------------- */
.subnav-sentinel {
	display: block;
	position: relative;
	top: calc(-1 * var(--header-h, 61px) - 1px);
	height: 1px;
	margin: 0 0 -1px;
	visibility: hidden;
	pointer-events: none;
}
/* The strip's spacing moves to the marker, which now follows it. */
.single-elite_treatment.premium-inner .wrap:has(> .facts) + .subnav-sentinel { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.single-elite_treatment.premium-inner .subnav.is-live:not(.is-stuck) {
	border-color: transparent;
	background-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.single-elite_treatment.premium-inner .subnav.is-live:not(.is-stuck) ul { box-shadow: inset 0 -1px 0 var(--line, #e6e3ee); }
/* Transitions only once the first state is drawn, so nothing fades in on load. */
.single-elite_treatment.premium-inner .subnav.is-anim { transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.single-elite_treatment.premium-inner .subnav.is-anim ul { transition: box-shadow 0.22s ease; }

.subnav__label { display: none; }
@media (min-width: 64rem) {
	.single-elite_treatment.premium-inner .subnav .wrap { position: relative; }
	.single-elite_treatment.premium-inner .subnav.is-live .subnav__label {
		position: absolute;
		top: 0;
		bottom: 1px;
		left: var(--gut);
		display: flex;
		align-items: center;
		margin: 0;
		color: var(--body, #5a5570);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		line-height: 1;
		text-transform: uppercase;
		pointer-events: none;
	}
	.single-elite_treatment.premium-inner .subnav.is-anim .subnav__label { transition: opacity 0.2s ease, visibility 0.2s; }
	.single-elite_treatment.premium-inner .subnav.is-stuck .subnav__label { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.single-elite_treatment.premium-inner .subnav.is-anim,
	.single-elite_treatment.premium-inner .subnav.is-anim ul,
	.single-elite_treatment.premium-inner .subnav.is-anim .subnav__label { transition: none; }
}

/* Every section of a treatment page: 2.5rem from the heading block to what
   it introduces, at every width, as on the home page (the doctors, cost and
   reading sections used 1.5rem to 3rem). */
.single-elite_treatment.premium-inner :is(.spx__head, .tr-cost__head, .tr-read__head) { margin-bottom: 2.5rem; }


/* --------------------------------------------------------------------------
   5. Treatment pages: "Meet your orthodontists / your child's dentist"
      without the extra review (client item 1). The Google trust card is the
      section's patient evidence:
      - two doctors, wide desktop: beside the second doctor (unchanged);
      - one doctor, wide desktop: one row under the doctor and the panel,
        laid out across (score, source, the practice, the link);
      - tablet and small desktop: beside the booking panel, the same height,
        its content centred;
      - phone: under the panel.
   -------------------------------------------------------------------------- */
.spx .spx__proof > .spx__trust { max-width: none; }

@media (min-width: 48rem) and (max-width: 79.99rem) {
	.spx .spx__proof { display: flex; }
	.spx .spx__proof > .spx__trust { flex: 1; justify-content: center; padding: 1.75rem; }
}

@media (min-width: 80rem) {
	.spx:not(.spx--pair) .spx__proof { display: block; grid-column: 1 / -1; }
	.spx--n3 .spx__proof { grid-column: 2 / -1; }
	.spx:not(.spx--pair) .spx__proof > .spx__trust {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		grid-template-areas: "top score biz cta" "count score biz cta";
		align-items: center;
		column-gap: clamp(1.75rem, 3vw, 3rem);
		row-gap: 0.3rem;
		padding: 1.6rem 2rem;
	}
	.spx:not(.spx--pair) .spx__trust .gbadge__top { grid-area: top; }
	.spx:not(.spx--pair) .spx__trust .gbadge__count { grid-area: count; }
	.spx:not(.spx--pair) .spx__trust .gbadge__score { grid-area: score; }
	.spx:not(.spx--pair) .spx__trust .gbadge__num { font-size: 2.5rem; }
	.spx:not(.spx--pair) .spx__trust .gbadge__biz {
		grid-area: biz;
		align-self: stretch;
		justify-content: center;
		width: auto;
		padding: 0 0 0 clamp(1.75rem, 3vw, 3rem);
		border-top: 0;
		border-left: 1px solid var(--line-soft, #e5e1ea);
	}
	.spx:not(.spx--pair) .spx__trust .gbadge__cta { grid-area: cta; justify-self: end; }
}


/* --------------------------------------------------------------------------
   6. Treatment pages: the questions column (client item 2). The booking
      button and "See all questions" are one column of equal width on a
      desktop, then the phone and Get Directions share a row, the hero's
      pair of pills. The Contact Us pill is gone.
   -------------------------------------------------------------------------- */
.single-elite_treatment.premium-inner .tr-reach {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}
.single-elite_treatment.premium-inner .tr-reach .pill,
.single-elite_treatment.premium-inner .tr-reach .pill:first-child {
	grid-column: auto;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--ui-h-pill);
	padding-inline: 0.75rem;
	font-size: 0.925rem;
}
/* A tablet (the questions over the list): the two pills at their own width, as in the hero. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.single-elite_treatment.premium-inner .tr-reach { grid-template-columns: repeat(2, max-content); }
	.single-elite_treatment.premium-inner .tr-reach .pill { padding-inline: 1.1rem; }
}
@media (min-width: 64rem) {
	.single-elite_treatment.premium-inner .faq-layout > div:first-child > .tr-cta--faq {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		width: min(100%, 21rem);
	}
	.single-elite_treatment.premium-inner .faq-layout > div:first-child > .tr-cta--faq > :is(.btn, .go-link) { width: 100%; min-width: 0; }
	/* The button's label is centred in the full width, so its sides can be narrower (one line in the 302px column at 1024px). */
	.single-elite_treatment.premium-inner .faq-layout > div:first-child > .tr-cta--faq > .btn { padding-inline: 1.1rem; }
	.single-elite_treatment.premium-inner .faq-layout > div:first-child > .tr-reach { width: min(100%, 21rem); margin-top: 0.6rem; }
}
@media (max-width: 47.99rem) {
	.single-elite_treatment.premium-inner .tr-reach .pill { padding-inline: 0.5rem; font-size: 0.9rem; }
}


/* --------------------------------------------------------------------------
   7. Treatment pages: "Further reading" (client item 5). Every link is the
      same card: the kind of read (Article, Braces 101) over the title, the
      arrow chip at the top right, one padding, one radius, equal heights in
      a row. Three cards run three across from a tablet; four run two by two,
      then four across on a wide desktop; one or two take half the row each.
   -------------------------------------------------------------------------- */
.single-elite_treatment.premium-inner .tr-read__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}
@media (min-width: 40rem) {
	.single-elite_treatment.premium-inner .tr-read__list:is([data-count="1"], [data-count="2"], [data-count="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 48rem) {
	.single-elite_treatment.premium-inner .tr-read__list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 80rem) {
	.single-elite_treatment.premium-inner .tr-read__list { gap: 1.25rem; }
	.single-elite_treatment.premium-inner .tr-read__list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.single-elite_treatment.premium-inner .tr-read__list > li { display: flex; margin: 0; }
.single-elite_treatment.premium-inner .tr-read__link {
	display: flex;
	flex: 1;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	min-height: 100%;
	padding: 1.25rem 1.25rem 1.35rem 1.35rem;
	border: 1px solid var(--line-soft, #e5e1ea);
	border-radius: var(--r-card, 16px);
	background: #fff;
	box-shadow: 0 18px 40px -36px rgba(26, 18, 54, 0.5);
	color: var(--ink);
	text-decoration: none;
	transition: transform var(--ui-t), box-shadow var(--ui-t), border-color var(--ui-t);
}
.single-elite_treatment.premium-inner .tr-read__copy { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.single-elite_treatment.premium-inner .tr-read__k {
	color: var(--lane, var(--ortho));
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.single-elite_treatment.premium-inner .tr-read__title {
	color: var(--ink);
	font-size: 1.02rem;
	font-weight: 650;
	line-height: 1.42;
	text-wrap: pretty;
}
.single-elite_treatment.premium-inner .tr-read__link .go-link__ic { margin-top: -0.2rem; }
@media (hover: hover) {
	.single-elite_treatment.premium-inner .tr-read__link:hover {
		transform: translateY(var(--ui-lift));
		border-color: var(--lane, var(--ortho));
		box-shadow: var(--ui-shadow-line);
	}
	.single-elite_treatment.premium-inner .tr-read__link:hover .go-link__ic { background: var(--lane, var(--ortho)); color: #fff; }
}
.single-elite_treatment.premium-inner .tr-read__link:focus-visible { outline-width: var(--ui-ring-w); outline-offset: var(--ui-ring-offset); border-radius: var(--r-card, 16px); }
@media (max-width: 47.99rem) {
	.single-elite_treatment.premium-inner .tr-read__link { padding: 1.05rem 1.1rem 1.15rem 1.15rem; }
	.single-elite_treatment.premium-inner .tr-read__title { font-size: 0.98rem; text-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.single-elite_treatment.premium-inner .tr-read__link { transition: none; transform: none !important; }
}


/* --------------------------------------------------------------------------
   8. Doctor profiles. The booking card's stacked button keeps its label on
      one line on a phone (section 2); the closing row pairs the stacked
      button and "Explore Orthodontics" at one height (section 3).
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   9. FAQ lists (client item 7). One answer open at a time: the markup's
      name attribute (faq-accordion.php) and site.js for the rest. The open
      question reads as the current one.
   -------------------------------------------------------------------------- */
.faq details > summary { cursor: pointer; }