/*
 * Center for Dental Excellence — runtime-state child rules (no-rucss-child.css)
 *
 * Every child rule keyed on a class or element that JS adds after load: body.scrolled,
 * body.mm-ocd-opened, html.lity-active, MmenuLight's .mm-spn, Lity's wrappers, Splide's
 * .is-active + its pagination. WP Rocket's Remove Unused CSS keeps a selector only if it
 * finds it in the server HTML, so in style.css these were stripped on the live site (the
 * scrolled desktop header stayed transparent). functions.php enqueues this file after
 * style.css and excludes it whole from RUCSS. Put new runtime-state rules here, never in
 * style.css.
 */

/* ============================================================
   HEADER — scrolled (body.scrolled, general.js) = white header + blue content + logo
   swap; the #header:hover twin of each rule lives in style.css
   ============================================================ */
body.scrolled #header {
	background-color: var(--white);
	border-bottom-color: var(--ltGray);
}
body.scrolled #header #mLogo {
	opacity: 0;
}
body.scrolled #header #scLogo {
	opacity: 1;
}
/* the contact ICONS go blue (matches interior header) */
body.scrolled #header .headAdd i,
body.scrolled #header .phoneBlock i {
	color: var(--primaryColor);
}
/* nav links + address/phone TEXT go black; the nav underline stays blue */
body.scrolled #header #nav > li > a,
body.scrolled #header .headAdd a,
body.scrolled #header .phoneBlock a {
	color: var(--black);
}
body.scrolled #header .headAdd a:hover,
body.scrolled #header .phoneBlock a:hover {
	text-decoration: underline;
}
body.scrolled #header .navBtns .opener-form .btn.btn-primary,
body.scrolled #header .navBtns .btn-list .btn.btn-large {
	background: var(--primaryColor);
	color: var(--white);
}
/* interior: shadow only once the page scrolls, and softer than the mockup's medium (Ali QA) */
body.scrolled:not(.home) #header {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   SPECIAL OFFERS — Splide's active slide + the pagination it builds at mount
   ============================================================ */
body .offers--cde .splide__slide.is-active .cdeOff-cardInner {
	opacity: 1;
	background: #2c2c2c;
}
/* vertical accent-bar pagination, to the right of the cards */
body .offers--cde .splide__pagination {
	position: absolute;
	top: 50%;
	left: 100%;
	right: auto;
	bottom: auto;
	transform: translateY(-50%);
	margin: 0 0 0 40px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
body .offers--cde .splide__pagination li {
	margin: 0;
	line-height: 0;
}
body .offers--cde .splide__pagination__page {
	display: block;
	width: 3px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 2px;
	background: var(--gray);
	opacity: 1;
	transform: none;
	transition: background-color 0.35s ease;
}
body .offers--cde .splide__pagination__page.is-active {
	background: var(--ltBlue);
	transform: none;
}

/* ============================================================
   BOOK NOW POPUP — Lity's overlay wrappers (built when a popup opens)
   ============================================================ */
/* contain lity's own overlay wrapper (its scroller when a modal is taller
   than the viewport) so nothing chains to the page behind it */
.lity,
.lity-wrap {
	overscroll-behavior: contain;
}

@media (max-width: 1024px) {
	/* drawer fly-out arrows (MmenuLight builds .mm-spn) */
	.mm-spn li::before {
		opacity: 1;
		border-color: #767676;
	}
	/* header stays white once scrolled (undo the desktop transparent / flex states) */
	body.scrolled #header {
		background: var(--white);
		border-bottom: none;
	}
	/* interior: no desktop shadow on mobile — the top bar carries its own */
	body.scrolled:not(.home) #header {
		box-shadow: none;
	}
	/* Scrolled sticky Book Now (#sOpenFormMob, position:fixed): framework centers it with translate(-92px,-28px) and the 0.5s transition animates that -92 X → a diagonal right→left slide. Center via auto-margins + top:0 and drop the transform so it only moves vertically. */
	body.scrolled #sOpenFormMob {
		transform: none !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		margin: 0 auto !important;
	}
	/* Hamburger — black bars per mockup (24×2) once scrolled too (load state in style.css) */
	body.scrolled #header .menu-opener::before,
	body.scrolled #header .menu-opener::after {
		width: 24px;
		height: 2px;
		left: 10px;
		background: var(--black);
	}
	/* Menu open (mm-ocd-opened): converge both bars to the shared center so the framework's ±45° rotation forms a clean X. The style.css bar rules out-specify the framework's own convergence (ID beats its class selector), so restore it here at higher specificity. */
	body.mm-ocd-opened #header .menu-opener::before,
	body.mm-ocd-opened #header .menu-opener::after {
		top: 21px;
	}
	/* Book Now popup open: the hamburger is out of the header's stacking context (style.css,
	   fix-list row 62), so its z 10001 would sit over Lity's overlay (9990) and the popup's
	   top-right close X — a tap there would open the menu. Keep it under the popup. */
	html.lity-active body #header .menu-opener {
		z-index: 90;
	}
	/* horizontal carousel → pagination is a horizontal bar row under the cards */
	body .offers--cde .splide__pagination {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		margin: 32px 0 0;
		flex-direction: row;
		justify-content: center;
	}
	body .offers--cde .splide__pagination__page {
		width: 40px;
		height: 3px;
	}
}