/**
 * MYS Theme — Single Service (ct_template 145 "HCWH Services" chrome)
 *
 * Literal transcription of uploads/oxygen/css/{145,146}.css. Sections:
 * 72-145 hero · 3381-145 reviews-intro · 172-146 testimonials · 176-146 CTA.
 * Body (odx_the_content) is un-gated per ruling. em base = body 16px.
 */

.odx-svc .ct-link-button,
.odx-svc a[class*="__btn"],
.odx-svc a[class*="morebtn"] {
	display: inline-block;
	line-height: 1.6;
	text-decoration: none;
}

/* ── Hero (section-72-145) ───────────────────────────────────────────── */
.odx-svc-hero {
	background-color: var(--color-eggshell);
	text-align: left;
}

.odx-svc-hero__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(50%, 1fr));
	gap: 0;
}

.odx-svc-hero__media {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	background-color: var(--color-white);
}

.odx-svc-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Service-page variant (page-templates/tpl-service-page.php) ──
   Live resolves the dynamic hero <img> empty on pages and paints the photo
   as background-cover on the media col; the band collapses to the panel
   height (290px on /dental-exam/). */
.odx-svc--page .odx-svc-hero__media {
	background-size: cover;
	background-position: 0 50%;
}

/* live paints the empty dynamic short-desc row (25.6px line box) */
.odx-svc--page .odx-svc-hero__desc {
	min-height: 25.6px;
}

/* empty sections 774/52-145: half-width column backgrounds still paint.
   Desktop: side-by-side halves; ≤767 the halves stack (774: sky 138 over
   off-white 158; 52: Oxygen reverses order — white 138, 20 gap, off-white 126). */
.odx-svc-page__band-a,
.odx-svc-page__band-b {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.odx-svc-page__band-a {
	height: 158px;
}
.odx-svc-page__band-b {
	height: 138px;
}
.odx-svc-page__band-a::before,
.odx-svc-page__band-a::after,
.odx-svc-page__band-b::before,
.odx-svc-page__band-b::after {
	content: '';
}
.odx-svc-page__band-a::before {
	background-color: var(--color-blue-light);
}
.odx-svc-page__band-a::after,
.odx-svc-page__band-b::before {
	background-color: var(--color-off-white);
}
.odx-svc-page__band-b::after {
	background-color: var(--color-white);
}

@media (max-width: 991px) {
	/* stacked hero: the bg-cover media block takes the photo's own aspect
	   (--odx-hero-ratio set inline by tpl-service-page.php) */
	.odx-svc--page .odx-svc-hero__media {
		width: 100%;
		aspect-ratio: var(--odx-hero-ratio, auto);
	}
	/* live's dark scrim spans the full stacked row */
	.odx-svc--page .odx-svc-hero__overlay {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.odx-svc-page__band-a {
		display: block;
		height: auto;
	}
	.odx-svc-page__band-a::before {
		display: block;
		height: 138px;
	}
	.odx-svc-page__band-a::after {
		display: block;
		height: 158px;
	}
	.odx-svc-page__band-b {
		display: flex;
		flex-direction: column-reverse;
		gap: 20px;
		height: auto;
	}
	.odx-svc-page__band-b::before {
		height: 126px;
	}
	.odx-svc-page__band-b::after {
		height: 138px;
	}
}

.odx-svc-hero__overlay {
	/* div_block-76-145: dark scrim over the eggshell/image seam */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	background-color: rgba( 43, 43, 43, 0.6 );
}

.odx-svc-hero__panel {
	max-width: 565px;
	width: 100%;
}

.odx-svc-hero__panel > * {
	/* div_block-7-145: 565 column, centred, 30/50 pad */
	max-width: 565px;
}

.odx-svc-hero__title,
.odx-svc-hero__sub,
.odx-svc-hero .oxel_horizontal_divider__line,
.odx-svc-hero__btn {
	margin-left: auto;
	margin-right: auto;
}

.odx-svc-hero__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 30px 50px;
}

.odx-svc-hero__title {
	color: var(--color-white);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 2em;
	line-height: 1.6; /* Oxygen ct-headline default; base.css h1 tight lh is too small */
	padding-top: 25px;
	margin: 0;
}

.odx-svc-hero__desc {
	/* text_block-2638-145: white serif intro, left-aligned, fills the 465 rail */
	width: 100%;
	color: var(--color-white);
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

.odx-svc-hero__btn {
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	color: var(--color-white);
	font-size: 1em;
	border-radius: var(--radius-pill);
	text-transform: capitalize;
	padding: 5px 20px;
	margin: 25px 0;
}

.odx-svc-hero__btn:hover {
	background-color: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

/* ── Hero, no-thumbnail variant (live section-2-26) ──────────────────── */
.odx-svc-hero--plain {
	background-color: var(--color-charcoal);
	text-align: center;
}

.odx-svc-hero--plain .odx-svc-hero__grid {
	grid-template-columns: 1fr;
}

.odx-svc-hero--plain .odx-svc-hero__overlay {
	background-color: transparent;
}

.odx-svc-hero--plain .odx-svc-hero__panel {
	padding: 75px 20px;
}

.odx-svc-hero--plain .odx-svc-hero__panel,
.odx-svc-hero--plain .odx-svc-hero__panel > * {
	/* live div_block-3-26 has no 565 rail — the title sets on one line */
	max-width: none;
}

.odx-svc-hero--plain .odx-svc-hero__title {
	font-size: 36px;
	font-weight: 500;
	padding-top: 0;
}

/* ── Body ────────────────────────────────────────────────────────────── */
.odx-svc__body > .odx-container {
	padding-block: 50px;
}

/* ── Zigzag rows (live sections 774 / 52 / 3381 / 3391 / 3401-145) ─────
     Full-bleed 50/50 grid, no gutter. Each half carries a 565 rail against
     the centre line — 50px of inner padding leaves a 465 measure, matching
     live. Odd rows paint the heading half sky blue and put it left; even
     rows leave it unpainted and put it right. Stacks at 991. ─────────── */
.odx-svc__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.odx-svc__row-half {
	display: flex;
	align-items: center;
}

.odx-svc__row-half--body {
	background-color: var(--color-off-white);
}

.odx-svc__row-rail,
.odx-svc__row-copy {
	width: 565px;
	max-width: 100%;
	padding: 50px;
}

.odx-svc__row-heading {
	width: 300px;
	max-width: 100%;
	margin: 0 auto;
	font-family: var(--font-sans);
	font-size: var(--font-size-xl);
	line-height: 1.6;
	text-align: center;
}

.odx-svc__row-copy > :first-child {
	margin-top: 0;
}

.odx-svc__row-copy > :last-child {
	margin-bottom: 0;
}

/* Paint — sky-blue heading half with a white headline, or unpainted with a
   blue one. Independent of which side the heading takes. */
.odx-svc__row--painted .odx-svc__row-half--heading {
	background-color: var(--color-blue-light);
}

.odx-svc__row--painted .odx-svc__row-heading {
	color: var(--color-white);
}

.odx-svc__row--plain .odx-svc__row-heading {
	color: var(--color-blue);
}

/* Side — both rails hug the centre line, so the halves mirror. The heading
   stays first in source order and moves by grid placement only. */
.odx-svc__row--heading-left .odx-svc__row-half--heading {
	justify-content: flex-end;
}

.odx-svc__row--heading-left .odx-svc__row-half--body {
	justify-content: flex-start;
}

.odx-svc__row--heading-right .odx-svc__row-half--heading {
	grid-column: 2;
	justify-content: flex-start;
}

.odx-svc__row--heading-right .odx-svc__row-half--body {
	grid-row: 1;
	grid-column: 1;
	justify-content: flex-end;
}

/* ── Lead row (live div_block-92-578): image column beside the two-tone
     headline, sub-head and intro copy; full-width prose resumes below.
     Stacks at 991 with the hero grid. ───────────────────────────────── */
.odx-svc__lead {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	gap: 20px;
	align-items: stretch;
	justify-items: center;
	text-align: left;
}

.odx-svc__lead-media img {
	max-width: 100%;
	border-radius: 5px;
}

.odx-svc__lead-copy {
	display: grid;
	align-items: center;
	gap: 20px;
	padding: 30px;
}

/* Oxygen ct-headline defaults, which base.css overrides with the navy/1.3
   heading scale: live's lead h1 is charcoal and both headings run at 1.6. */
.odx-svc__lead-copy h1 {
	color: var(--color-charcoal);
	line-height: var(--line-height-base);
}

.odx-svc__lead-copy h3 {
	font-weight: 500;
	line-height: var(--line-height-base);
}

/* ── Closing section (post_content, block editor) ─────────────────────
   Optional region after the FAQ list. Blocks bring their own layout via
   theme.json, so this only sets the band rhythm and the alignment rails
   the editor's wide/full options expect. */
.odx-svc-outro {
	padding: var(--section-pad-y) 0;
	background-color: var(--color-off-white);
}

.odx-svc-outro__inner > * {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size, 760px);
}

/* live carries no width constraint on outro images (image-973-578 sets only a
   bottom margin), so they paint at natural size — the 760px content rail is a
   prose measure and must not clamp them. */
.odx-svc-outro__inner > figure {
	max-width: none;
}

.odx-svc-outro__inner > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1100px);
}

.odx-svc-outro__inner > .alignfull {
	max-width: none;
}

.odx-svc-outro__inner img {
	height: auto;
	max-width: 100%;
}

.odx-svc-outro__inner h2 {
	color: var(--color-navy);
	font-size: var(--font-size-2xl);
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-6);
}

@media (max-width: 767px) {
	.odx-svc-outro {
		padding: var(--section-pad-y-sm) 0;
	}
}

/* ── Reviews intro (section-3381-145) ────────────────────────────────── */
.odx-svc-reviews-intro__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(50%, 1fr));
	gap: 0;
}

.odx-svc-reviews-intro__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--color-blue-light);
}

.odx-svc-reviews-intro__heading h2 {
	color: var(--color-white);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1.5em;
	padding: 50px;
	max-width: 300px;
	margin: 0;
}

.odx-svc-reviews-intro__quote {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-off-white);
}

.odx-svc-reviews-intro__panel {
	/* div_block-3387-145: 565 wide, 50 pad → drives the section height */
	width: 565px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 50px;
	color: var(--color-charcoal);
	font-size: 1em;
	text-align: left;
}

.odx-svc-reviews-intro__q,
.odx-svc-reviews-intro__meta {
	margin: 0 0 1em;
}

.odx-svc-reviews-intro__stars {
	color: #f5c518; /* gold, matches .odx-stars */
	letter-spacing: 2px;
}

.odx-svc-reviews-intro__contact {
	display: inline-block;
	margin-top: 25px;
}

.odx-svc-reviews-intro__contact img {
	/* Sized by the shared .odx-btn-contact rule in components.css. */
	display: block;
}

/* ── Testimonials (section-172-146) ──────────────────────────────────── */
.odx-svc-testimonials__band {
	/* div_block-173-146: live paints min-height (the plugin overrides height:650).
	   Vertical rhythm comes from section padding so a long quote grows the band
	   instead of overflowing a fixed box. */
	width: 100%;
	min-height: 500px;
	padding: var(--space-12) 0;   /* live's band is 650 tall; keep its chrome tight
	                                 and let a long quote grow the box, not clip */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: var(--color-charcoal);
}

.odx-svc-testimonials__title {
	color: var(--color-blue-light);
	font-weight: 400;
	font-size: var(--font-size-2xl);
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-8);
	position: relative;
	z-index: 2;
}

.odx-svc-testimonials__swiper {
	/* div_block-3173-145 */
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.odx-svc-testimonials__slide {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.odx-svc-testimonials__card {
	/* div_block-3017-145 — min-height keeps short and long quotes the same
	   height on a slide; overflow is allowed to grow the card. */
	width: min(450px, calc(100vw - 2 * var(--slider-rail)));
	min-height: 230px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	padding: var(--space-6) var(--space-8);
}

.odx-svc-testimonials__quote {
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
	margin: 0 0 var(--space-4);
	text-indent: -0.3em;
	hanging-punctuation: first;
}

.odx-svc-testimonials__author {
	color: var(--color-off-white);
	font-size: var(--font-size-sm);
	font-style: italic;
	padding-left: 1em;
	margin: 0;
}

.odx-svc-testimonials__nav {
	color: var(--color-blue-light);
	--swiper-navigation-size: 32px;
}

.odx-svc-testimonials__more {
	/* div_block-2851-145 */
	width: 100%;
	max-width: 650px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
	margin-top: var(--space-6);
	position: relative;
	z-index: 2;
}

.odx-svc-testimonials__morebtn {
	background-color: var(--color-charcoal);
	border: 3px solid var(--color-charcoal-line);
	color: var(--color-white);
	font-size: 0.9em;   /* live: 14.4px */
	border-radius: var(--radius-pill);
	text-transform: capitalize;
	padding: 8px 12.8px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.odx-svc-testimonials__morebtn:hover,
.odx-svc-testimonials__morebtn:focus-visible {
	background-color: var(--color-blue-light);
	border-color: var(--color-blue-light);
	color: var(--color-white);
}

.odx-svc-testimonials__morebtn:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.odx-svc-testimonials__morebtn {
		transition: none;
	}
}

/* ── CTA (section-176-146) ───────────────────────────────────────────── */
.odx-svc-cta {
	/* section-176-146 inner-wrap keeps the Oxygen default 75px vertical pad */
	background-color: var(--color-off-white);
	text-align: center;
	padding: 75px 20px;
}

.odx-svc-cta__row {
	/* div_block-177-146 */
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	text-align: justify;
	padding-left: 25px;
}

.odx-svc-cta__title {
	color: var(--color-charcoal);
	font-weight: 500;
	font-size: 2em;
	line-height: 1.6;
	text-align: left;
	margin: 0;
}

.odx-svc-reviews-intro__heading h2 {
	line-height: 1.6;
}

.odx-svc-cta__btn {
	/* link_button-180-146 */
	background-color: var(--color-blue-light);
	border: 1px solid var(--color-blue-light);
	color: var(--color-navy);
	font-family: var(--font-serif);
	font-size: 1em;   /* corrected to 16px, matching live link_button-180-146 */
	border-radius: var(--radius-pill);
	padding: 8px 12.8px;
}

.odx-svc-cta__btn {
	text-align: center;
}
.odx-svc-cta__btn:hover {
	background-color: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

/* ── Responsive (Oxygen breakpoints 991 / 767 / 479) ─────────────────── */
@media (max-width: 991px) {
	.odx-svc-hero__grid,
	.odx-svc-reviews-intro__grid,
	.odx-svc__lead {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.odx-svc__row {
		grid-template-columns: 1fr;
	}
	.odx-svc__row--heading-right .odx-svc__row-half--heading,
	.odx-svc__row--heading-right .odx-svc__row-half--body {
		grid-column: 1;
		grid-row: auto;
	}
	.odx-svc__row .odx-svc__row-half {
		justify-content: center;
	}
	.odx-svc__row-rail,
	.odx-svc__row-copy {
		padding: 50px 20px;
	}
	.odx-svc-cta__row {
		justify-content: space-between;
		padding-left: 0;
	}
	.odx-svc-cta__title {
		width: 75%;
	}
}

@media (max-width: 767px) {
	/* Testimonials ≤767 — cards, arrows and padding fit 320–390 viewports */
	.odx-svc-testimonials__band {
		min-height: 0;
		padding: var(--section-pad-y-sm) 0;
		overflow: hidden;
	}
	.odx-svc-testimonials__title {
		margin-bottom: var(--space-8);
	}
	.odx-svc-testimonials__nav {
		--swiper-navigation-size: 28px;
	}
	.odx-svc-testimonials__card {
		min-height: 0;
		padding: var(--space-4) var(--space-6);
	}
	.odx-svc-testimonials__swiper .swiper-button-prev {
		left: var(--space-2);
	}
	.odx-svc-testimonials__swiper .swiper-button-next {
		right: var(--space-2);
	}
	.odx-svc-testimonials__more {
		margin-top: 0;
	}

	.odx-svc-cta__row {
		flex-direction: column;
		align-items: flex-start;
	}
	.odx-svc-cta__title {
		width: 100%;
	}
	.odx-svc-cta__action {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 15px;
	}
}

@media (max-width: 479px) {
	.odx-svc-hero__panel,
	.odx-svc__lead-copy {
		padding-left: 15px;
		padding-right: 15px;
	}
	.odx-svc-cta__title {
		font-size: 1.8em;
		text-align: left;
	}
}

/* ── Charcoal title band (live sections 3621/382-145 + .our-office-titleheader:
     #404040 band, centered white 2em/500 heading) ─────────────────────── */
.odx-svc-band {
	background-color: var(--color-charcoal);
	padding: 75px 30px;
	text-align: center;
}

.odx-svc-band__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 2em;
	font-weight: 500;
	line-height: 1.6;
}

/* ── Before/After slider (live section-3615-145: centered 70% rail,
     ouacfg swiper with pagination dots) ────────────────────────────── */
.odx-svc-ba {
	padding: 75px 0;
	text-align: center;
}

.odx-svc-ba__rail {
	/* div_block-3617-145 is 70% of Oxygen's default 1120 inner-wrap (1080 inside
	   its 20px gutters), not 70% of the viewport — hence the 756 ceiling. */
	width: 70%;
	max-width: 756px;
	margin: 0 auto;
}

.odx-svc-ba__img {
	/* live renders the image at natural size, centered — not stretched to rail */
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.odx-svc-ba__nav {
	/* live ouacfg arrows: blue chevrons in the side gutters */
	color: var(--color-blue);
	width: 30px;
	height: 44px;
}

.odx-svc-ba__nav::after {
	font-size: 40px;
	font-weight: 700;
}

.odx-svc-ba .swiper-pagination {
	position: static;
	margin-top: 15px;
}

.odx-svc-ba .swiper-pagination-bullet-active {
	background: var(--color-blue);
}

/* ── Service FAQ list (live section-390-145: full-width rail, 30px bottom) ── */
.odx-svc-faqs {
	padding: 30px 0;
}

@media (max-width: 767px) {
	.odx-svc-band {
		padding: 50px 20px;
	}

	.odx-svc-ba {
		padding: 50px 0;
	}

	.odx-svc-ba__rail {
		width: 90%;
	}
}