/* ── Header ──────────────────────────────────────────────── */
/* ground truth: #_header_row-1144-10 / oxy-sticky-header from live-oxygen-10.css */
.odx-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: var(--color-white);
	height: var(--header-height);   /* 110px desktop / 120px ≤767 — rendered live values */
	display: flex;
	align-items: center;
	transition: background-color 0.4s linear, box-shadow 0.4s linear;
}

/* JS scroll listener adds .is-sticky — matches oxy-sticky-header active state.
   Colour and shadow only: the bar's box must not change between states. */
.odx-header.is-sticky {
	background-color: var(--color-off-white);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* Logged-in only: the admin bar is fixed at top:0, so a header stuck at top:0
   slides underneath it and loses that many pixels off its top edge. */
.admin-bar .odx-header {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar .odx-header {
		top: 46px;
	}
}

/* ≤600 WP switches the admin bar to position:absolute — it scrolls away, so
   the header goes back to the very top */
@media screen and ( max-width: 600px ) {
	.admin-bar .odx-header {
		top: 0;
	}
}

.odx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 20px;   /* live .oxy-header-container pad — 20px, NOT --container-pad (24px) */
	max-width: var(--container-max);
	margin: 0 auto;
}

/* ── Logo — live: #image-1160-10 height:100px width:226px ── */
.odx-header__logo {
	text-decoration: none;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.odx-header__logo img {
	height: 100px;
	width: 226px;
	object-fit: contain;
}

/* ── Header right actions ─────────────────────────────────── */
.odx-header__nav-actions {
	display: flex;
	align-items: center;
	gap: 0;   /* live spacing comes from the trigger's 32px left padding, not a flex gap */
	flex-shrink: 0;
}

/* live: #link_button-1914-10 — 132×50, pad 10px 16px, radius 3px, transparent bg, blue text */
.odx-header__cta {
	font-family: 'Poppins', var(--font-sans);
	font-size: 1.1em;
	color: var(--color-blue);
	background-color: transparent;
	border: none;
	border-radius: 3px;
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	/* live #link_button-1914-10 computes transition: all 0s — hover snaps, no animation */
}

.odx-header__cta:hover {
	color: var(--color-navy);
}

/* ── Mobile-only phone link — live #link-1992-10: white glyph 25×25, pad 5px 5px 8px 5px ── */
.odx-header__phone {
	display: none;   /* live shows it only on the ≤767 header row */
	align-items: center;
	justify-content: center;
	padding: 5px 5px 8px;
	color: var(--color-white);   /* live computed fill rgb(255,255,255) on the navy mobile bar (≤479 band) */
}

.odx-header__phone svg {
	width: 25px;
	height: 25px;
	fill: currentColor;
}

/* live: #link-1168-10 / #text_block-1169-10 — Poppins 1.1em, blue, pad 8px 0 8px 32px */
.odx-header__menu-trigger {
	display: flex;
	align-items: center;
	font-family: 'Poppins', var(--font-sans);
	font-size: 1.1em;
	color: var(--color-blue);
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 0 8px 32px;
	white-space: nowrap;
	transition: 0.3s;   /* live #link-1168-10: all 0.3s ease */
}

.odx-header__menu-trigger:hover {
	color: var(--color-navy);
}

/* hamburger glyph — desktop shows the text label like live; icon flips on ≤767 */
.odx-header__menu-icon {
	display: none;
	width: 24px;
	height: 24px;
	stroke: currentColor;
	fill: none;
}

/* ── Overlay — covers content below header, not the header itself ── */
.odx-menu-overlay {
	display: none;
	position: fixed;
	top: var(--header-height);   /* don't cover the sticky header */
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: var(--z-overlay);
}

.odx-menu-overlay.is-open {
	display: block;
}

/* ── Mega menu — full-width panel that COVERS the header ──── */
/* live .oxel_megamenu__wrapper: open panel spans from viewport top 0 (over the
   header); hidden = opacity 0 + translateY(64px) + pointer-events none;
   transition all 0.4s ease-in-out. Inner white box's 135px top pad clears the
   header zone. Live is position:absolute (scrolls with page) — fixed here is
   the sticky-equivalent and pairs with the scroll-lock. */
.odx-mega-menu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #dee1e3;   /* live #new_columns-1171-10 */
	z-index: var(--z-megamenu);
	max-height: 100vh;      /* fallback */
	max-height: 100dvh;     /* mobile URL-bar-safe; live bug: bottom unreachable with accordions open */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateY(64px);   /* live hidden state: 64px below final position, rises while fading in */
	opacity: 0;
	pointer-events: none;
	transition: 0.4s ease-in-out;   /* live: all 0.4s ease-in-out */
}

.odx-mega-menu.is-open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: all;
}

/* ── Mega menu inner — white content box ─────────────────── */
/* live: #div_block-1172-10 bg:#ffffff padding:135px 50px 35px */
.odx-mega-menu__inner {
	background-color: var(--color-white);
	padding: 135px 50px var(--space-10);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* ── Close button — live: #fancy_icon-1173-10 color:#28b2f5, 32×32,
      absolute in the top pad zone (desktop 83px/164px from top/right) ── */
.odx-mega-menu__close {
	position: absolute;
	top: 83px;
	right: 164px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--color-blue);
	cursor: pointer;
	padding: 0;
	transition: color 0.4s linear;
}

.odx-mega-menu__close:hover {
	color: var(--color-navy);
}

.odx-mega-menu__close svg {
	width: 32px;
	height: 32px;
	fill: currentColor;   /* live FontAwesome solid glyph */
}

/* ── Panel logo — live #div_block-1176-10: blue logo below the menu ── */
.odx-mega-menu__logo {
	display: flex;
	margin-top: var(--space-10);
	margin-left: var(--drawer-gutter);   /* flush with menu-item text at every breakpoint */
}

.odx-mega-menu__logo img {
	width: 200px;   /* live desktop 200×89 */
	height: auto;
}

/* ── Contact Us menu item — live hides it in the DESKTOP panel only
      (its own CSS targets the menu-item id; header CTA covers desktop) ── */
@media ( min-width: 768px ) {
	.odx-accordion > #menu-item-377 {
		display: none;
	}
}

/* ── Accordion nav — live: #-ou_accordion_menu-1174-10 ────── */
/* padding-right:75px; padding-left:30px; margin-top:25px     */
.odx-accordion {
	list-style: none;
	margin: 25px 0 0 0;
	padding: 0 75px 0 30px;
}

/* ── All items ───────────────────────────────────────────── */
/* live DECLARES border-bottom 1px rgba(172,170,170,0.2) but COMPUTES 0px none
   on every li/anchor at 1440 AND 375 (divider-probe2) — rows paint borderless */
.odx-accordion__item {
	background-color: var(--color-white);
}

/* ── Links — live: .ou-menu-item-text color:#28b2f5; Poppins 1.2em ── */
.odx-accordion__link {
	display: block;
	padding: 10px 12px;
	color: var(--color-blue);
	text-decoration: none;
	font-family: 'Poppins', var(--font-sans);
	font-size: 1.2em;
	/* text-slide: simulate translateX(10px) on hover via padding transition */
	transition: color 0.4s linear, background-color 0.4s linear, padding-left 0.4s linear;
}

.odx-accordion__link:hover {
	color: var(--color-navy);
	background-color: #f3f3f3;
	padding-left: 22px;   /* +10px slide effect matching live translateX(10px) */
}

/* ancestors of the current page: navy text marks the path */
.odx-accordion__item.current-menu-ancestor > .odx-accordion__link {
	color: var(--color-navy);
}

/* the current page itself: filled row + blue inset bar (inset keeps grid geometry) */
.odx-accordion__item.current-menu-item > .odx-accordion__link {
	color: var(--color-navy);
	background-color: var(--color-gray-100);
	box-shadow: inset 3px 0 0 var(--color-blue);
}

/* ── Parent items: link + toggle side by side ─────────────── */
.odx-accordion__item.has-children {
	display: grid;
	grid-template-columns: 1fr 100px;   /* live arrow area width:100px */
	grid-template-rows: auto auto;
	cursor: pointer;   /* full row toggles the accordion (JS proxies to the button) */
}

.odx-accordion__item.has-children > .odx-accordion__link {
	grid-column: 1;
	grid-row: 1;
}

/* ── Toggle/arrow — live: arrow svg 25×25 inside the row, NO divider line ── */
.odx-accordion__toggle {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;   /* centers the arrow where live paints it (~50px from row right edge) */
	background-color: var(--color-white);
	border: none;
	cursor: pointer;
	color: var(--color-blue);
	transition: color 0.4s linear;
}

.odx-accordion__toggle:hover,
.odx-accordion__toggle[aria-expanded="true"] {
	color: var(--color-navy);
}

.odx-accordion__toggle svg {
	width: 25px;   /* live .acrdm-toggle-icon 25×25 */
	height: 25px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.4s ease;   /* live: 0.4s ease on arrow svg */
}

/* live: arrow rotates -180deg when submenu is open */
.odx-accordion__toggle[aria-expanded="true"] svg {
	transform: rotate(-180deg);
}

/* ── Sub-menus ───────────────────────────────────────────────
   live: EVERY level keeps bg #ffffff and font 1.2em; depth is shown only by
   text indent — span margin-left 35/70/105px on top of the 12px link pad
   (→ 47/82/117px). Hover slides +10px (live translateX(10px), simulated
   via padding like level 1). ─────────────────────────────── */
.odx-accordion__sub {
	grid-column: 1 / -1;
	grid-row: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--color-white);
}

.odx-accordion__sub .odx-accordion__item {
	background-color: var(--color-white);
}

.odx-accordion__sub .odx-accordion__link {
	padding-left: 47px;   /* 12px + live span margin-left 35px */
}

.odx-accordion__sub .odx-accordion__link:hover {
	padding-left: 57px;
}

/* ── Level 3 ─────────────────────────────────────────────── */
.odx-accordion__sub .odx-accordion__sub .odx-accordion__link {
	padding-left: 82px;   /* 12px + 70px */
}

.odx-accordion__sub .odx-accordion__sub .odx-accordion__link:hover {
	padding-left: 92px;
}

/* ── Level 4 (e.g. Implants > Dental Implants) ───────────── */
.odx-accordion__sub .odx-accordion__sub .odx-accordion__sub .odx-accordion__link {
	padding-left: 117px;   /* 12px + 105px */
}

.odx-accordion__sub .odx-accordion__sub .odx-accordion__sub .odx-accordion__link:hover {
	padding-left: 127px;
}

/* ── Mobile header & menu (≤767 — live overlay row #_header_row-1184-10) ──
   Live paints the navy bar only ≤479 and leaves 480–767 transparent, which
   renders its white logo invisible on white — a live regression, not intent.
   Navy is applied across the whole ≤767 range (deliberate; flagged in audit). */
@media ( max-width: 767px ) {
	.odx-header,
	.odx-header.is-sticky {
		background-color: var(--color-navy);   /* live row bg #182f6c (≤479) */
	}

	.odx-header__logo img {
		width: 149px;   /* live mobile white logo renders 149×70 */
		height: 70px;
	}

	/* live hides the Contact Us button on the mobile row (display:none) */
	.odx-header__cta {
		display: none;
	}

	.odx-header__phone {
		display: flex;
	}

	/* live mobile trigger: white, pad 8px 0, 15px gap to the phone icon */
	.odx-header__menu-trigger {
		color: var(--color-white);
		padding: 8px 0;
		margin-left: 15px;
	}

	.odx-header__menu-trigger:hover {
		color: var(--color-blue);
	}

	/* hamburger replaces the text label (directive — live renders the word "Menu");
	   label stays in the DOM visually hidden so the button keeps its accessible name */
	.odx-header__menu-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.odx-header__menu-icon {
		display: block;
	}

	/* panel inner — live mobile #div_block-1202-10: pad 80px 15px 50px */
	.odx-mega-menu__inner {
		padding: 80px 15px 50px;
	}

	/* close — live mobile #fancy_icon-1203-10: 32×32 at top 18 / right 26 */
	.odx-mega-menu__close {
		top: 18px;
		right: 26px;
	}

	/* accordion — live mobile: pad 0 15px 0 30px; item text 1em (16px) */
	.odx-accordion {
		padding: 0 15px 0 30px;
	}

	.odx-accordion__link {
		font-size: 1em;
	}

	/* panel logo — 150px wide; left offset now comes from --drawer-gutter on the wrap */
	.odx-mega-menu__logo img {
		width: 150px;
	}
}

/* ── Footer ──────────────────────────────────────────────── */
.odx-footer {
	background-color: var(--color-navy);
	color: var(--color-off-white);
	padding: var(--space-10) 0;
}

.odx-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	text-align: center;
}

.odx-nav--footer .odx-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4) var(--space-6);
}

.odx-nav--footer .odx-nav__list a {
	text-decoration: none;
	font-family: var(--font-sans);
	color: var(--color-off-white);
	font-size: var(--font-size-sm);
	transition: color var(--transition-base);
}

.odx-nav--footer .odx-nav__list a:hover {
	color: var(--color-blue);
}

.odx-footer__copyright {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-gray-400);
	margin: 0;
}

/* ── Global Contact Section (footer.php) ─────────────────────
   2-col: dentist illustration LEFT + office info RIGHT
   Appears on every page via footer.php, matching Oxygen section-952-10.
   ─────────────────────────────────────────────────────────── */
.odx-section--contact {
	background-color: var(--color-navy);
	color: var(--color-white);
	width: 100%;
}

.odx-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}

.odx-contact__illustration {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--space-10) var(--space-8) 0;
}

.odx-contact__illustration img {
	max-height: 480px;
	width: auto;
}

.odx-contact__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-12) var(--space-10);
	color: var(--color-white);
}

.odx-contact__logo {
	height: 40px;
	width: auto;
}

.odx-contact__address {
	font-style: normal;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	line-height: 1.8;
	opacity: 0.85;
}

.odx-contact__hours-heading {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-blue-light);
	margin-bottom: var(--space-3);
}

.odx-contact__days {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.odx-contact__day {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
}

.odx-contact__day img {
	width: 24px;
	height: 24px;
	opacity: 0.9;
	flex-shrink: 0;
}

.odx-contact__day-name {
	width: 90px;
	font-weight: 500;
}

.odx-contact__day-hours {
	opacity: 0.8;
}

@media ( max-width: 900px ) {
	.odx-contact__grid {
		grid-template-columns: 1fr;
	}

	.odx-contact__illustration {
		padding-bottom: 0;
	}

	.odx-contact__illustration img {
		max-height: 240px;
	}

	.odx-contact__info {
		padding: var(--space-10) var(--space-6);
		align-items: center;
		text-align: center;
	}

	.odx-contact__days {
		align-items: flex-start;
	}
}