/* ─────────────────────────────────────────────────────────────
   components.css — shared global components (enqueued site-wide)
   Ground truth: live-oxygen-24.css + live-home-raw.html
   Lifted verbatim from home.css per Architect-approved pattern:
   first interior template (contact) needed the button/star family,
   so it moved out of the home-only stylesheet into a shared file.
   ─────────────────────────────────────────────────────────── */

/* ── BUTTONS ─────────────────────────────────────────────────
   Two base variants: primary (blue fill) and white (white fill).
   .odx-btn--service adds uppercase/Poppins/margin-top for section CTAs.
   ─────────────────────────────────────────────────────────── */
.odx-btn {
	display: inline-block;
	font-size: 1em;
	font-family: 'Poppins', var(--font-sans);
	text-decoration: none;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color 0.3s linear, border-color 0.3s linear, color 0.3s linear;
}

/* live: link_button-11-24 / link_button-68-24 / link_button-177-24 */
.odx-btn--primary {
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	color: var(--color-white);
	padding: 10px 30px;
}

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

/* live: link_button-43-24 / link_button-928-24 / link_button-157-24 */
.odx-btn--white {
	background-color: var(--color-white);
	border: 1px solid var(--color-white);
	color: var(--color-blue);
	padding: 10px 16px;   /* matches live's Oxygen default for these two buttons */
	text-transform: uppercase;
}

.odx-btn--white:hover {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
	color: var(--color-white);
}

/* Service-section modifier: uppercase, Poppins, extra top margin */
.odx-btn--service {
	text-transform: uppercase;
	margin-top: 50px;
}

/* Book Now — one class for every appointment CTA so they stay identical.
   Geometry is the hero button's; only colour may differ per placement. */
.odx-btn--book {
	margin-top: 35px;
}


/* ── STAR RATING ─────────────────────────────────────────────
   Default: gold. --white modifier: white (reviews panel).
   live: fancy_icon-37-24 through 40-24, color:#ffffff
   ─────────────────────────────────────────────────────────── */
.odx-stars {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 4px;
	margin-top: 5px;
	margin-bottom: 25px;
}

.odx-star {
	width: 24px;
	height: 24px;
	fill: #f5c518;
	flex-shrink: 0;
}

.odx-stars--white .odx-star {
	fill: var(--color-white);
}

/* ── PAGE HEADER — shared interior-page band (section-2-26 on contact,
   reused on other interior pages via template-parts/page-header.php)
   live: #section-2-26 bg:#404040 (charcoal); h1 color:#fff, font-size:36px,
   font-weight:500; divider centered beneath.
   ─────────────────────────────────────────────────────────── */
.odx-page-header {
	background-color: var(--color-charcoal);
	padding-top: 75px;
	padding-bottom: 75px;
	text-align: center;
}

.odx-page-header .odx-container {
	padding-left: 20px;
	padding-right: 20px;
}

.odx-page-header__title {
	color: var(--color-white);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 0;
}

.odx-page-header__divider {
	margin-left: auto;
	margin-right: auto;
}

/* ── Back-to-top (theme-ux.js, JS-injected — oxy-toolbox port) ── */
.odx-back-to-top {
	position: fixed;
	right: var(--space-6);
	bottom: var(--space-6);
	z-index: var(--z-overlay);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-blue);
	color: var(--color-white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}

.odx-back-to-top--visible {
	opacity: 1;
	visibility: visible;
}

.odx-back-to-top svg {
	width: 24px;
	height: 24px;
	display: block;
	margin: 0 auto;
}

/* ── Blog post title band (live section-112-3777) ─────────────────── */
.odx-post-hero {
	background-color: var(--color-charcoal);
	padding: 75px 20px;
	text-align: center;
}

.odx-post-hero__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.6;
}

.odx-post-hero__divider {
	width: 70px;
	height: 0.5px;
	margin: 20px auto;
	background-color: var(--color-divider);
}

/* ── Off-white section-heading band (live .our-office-titleheader-div:
     full-bleed #f7f7f7, 1300px inner rail, charcoal 32px/500 Poppins with
     sky-blue accent spans). Emitted inside extracted content. ─────────── */
/* ── Media row (live div_block-95/115/145/158/170-264) ────────────────
     1120 rail, two 550 columns with a 20px gutter: image or 16:9 video on
     one side, heading and copy on the other under 30px of padding. The
     media side alternates down the page. Stacks at 991. ─────────────── */
.odx-media-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
}

.odx-media-row--media-right .odx-media-row__media {
	grid-column: 2;
	grid-row: 1;
}

.odx-media-row__image {
	display: block;
	width: 100%;
	height: auto;
}

.odx-media-row__video {
	position: relative;
	padding-top: 56.25%;
}

.odx-media-row__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Live's copy column fills the row height (div_block-98-264 is 550×413) with
   its content centred, so both halves start on the same line. */
.odx-media-row__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
}

.odx-media-row__heading {
	margin-top: 0;
}

@media (max-width: 991px) {
	.odx-media-row {
		grid-template-columns: 1fr;
	}
	.odx-media-row--media-right .odx-media-row__media {
		grid-column: 1;
		grid-row: auto;
	}
}

.odx-band-head {
	/* Live paints this as a top-level section (e.g. section-150-578), so it
	   breaks the .odx-container rail and runs edge to edge. html/body carry
	   overflow-x: clip (base.css), so 100vw cannot introduce a scrollbar. */
	width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding: 75px 20px 72px;
	background-color: var(--color-off-white);
	text-align: center;
}

.odx-band-head__title {
	max-width: 1300px;
	margin: 0 auto;
	padding-left: 25px;   /* live .our-office-titleheader-div; 0 at ≤991 */
	color: var(--color-charcoal);
	font-family: var(--font-sans);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.6;
}

.odx-band-head__title span {
	color: var(--color-blue-light);
}

@media (max-width: 991px) {
	.odx-band-head__title {
		padding-left: 0;
	}
}