/**
 * Modern Navigation — Complete Custom Header
 * Replaces Divi's default #main-header entirely.
 */

/* ============================================
   Design Tokens — single source of truth
   (stylesheet only loads under .modern-nav)
   ============================================ */
:root {
	/* Pointed at the component library's token rather than carrying its own
	   hex. The header and the page were running two different blues — #4995d1
	   here against #1c6fb4 below it — which is visible the moment a page
	   button sits under the nav's "Plan Visit". One blue, decided once. */
	--mn-brand: var(--trbc-brand, #1c6fb4);
	--mn-brand-dark: #175d99;     /* hover/active */
	--mn-brand-tint: rgba(28, 111, 180, 0.08);        /* subtle hover background */
	--mn-brand-tint-strong: rgba(28, 111, 180, 0.14); /* emphasis background */
	--mn-brand-shadow: rgba(28, 111, 180, 0.25);      /* CTA shadow */
	--mn-brand-shadow-lg: rgba(28, 111, 180, 0.35);   /* CTA hover shadow */

	--mn-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Layering — every nav layer stays *below* WP's admin bar (99999) so the
	   admin bar is never overlapped and stays legible for logged-in editors. */
	--mn-z-backdrop: 99000;
	--mn-z-header: 99100;
	--mn-z-panel: 99200;
	--mn-z-skip: 99300;

	/* How far the fixed header sits from the top of the viewport. Kept in sync
	   with the *visible* part of #wpadminbar by nav-modern.js — the admin bar is
	   position:fixed on desktop but position:absolute below 782px, where it
	   scrolls away and a static offset would leave a strip of page content
	   showing above the header. Static values below are the no-JS fallback. */
	--mn-admin-offset: 0px;

	/* Width of the scrollbar that disappears while a panel locks body scroll. */
	--mn-scrollbar: 0px;
}

body.admin-bar {
	--mn-admin-offset: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--mn-admin-offset: 46px;
	}
}

/* ============================================
   Skip to content link (first focusable element)
   ============================================ */
.mn-skip-link {
	position: fixed;
	left: 12px;
	top: calc(var(--mn-admin-offset) + 10px);
	z-index: var(--mn-z-skip);
	padding: 10px 18px;
	font-family: var(--mn-font);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--mn-brand);
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	/* opacity + pointer-events, not just transform: a parked skip link must
	   never be visible even when the header is offset down the page. */
	opacity: 0;
	pointer-events: none;
	transform: translateY(-150%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mn-skip-link:focus {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* ============================================
   Hide Divi's native header
   ============================================ */
body.modern-nav #main-header,
body.modern-nav #top-header {
	display: none !important;
}

body.modern-nav.et_fixed_nav.et_show_nav #page-container,
body.modern-nav.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container,
body.modern-nav #page-container {
	padding-top: 0 !important;
}

/* Prevent body scroll when a panel is open. The padding replaces the width of
   the scrollbar that overflow:hidden removes, so the page doesn't jump. */
body.mn-panel-open {
	overflow: hidden;
	padding-right: var(--mn-scrollbar);
}

body.mn-panel-open .mn-header {
	padding-right: var(--mn-scrollbar);
}

/* The TR AI chat bubble pins itself above everything with an inline max-int
   z-index, so it floats over an open panel. Hide it for the duration —
   visibility, not display, so the iframe keeps its state. */
body.mn-panel-open iframe[src*="/tr-ai/embed"] {
	visibility: hidden !important;
}

/* In-page anchors must land below the fixed header, not underneath it. */
html {
	scroll-padding-top: 96px;
}

/* ============================================
   Header Bar
   ============================================ */
.mn-header {
	position: fixed;
	top: var(--mn-admin-offset);
	left: 0;
	right: 0;
	z-index: var(--mn-z-header);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	/* No transition on `top` — JS retargets it per scroll frame under the
	   mobile admin bar, and an easing curve would visibly lag behind. */
	transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Without backdrop blur the translucent bar is unreadable over imagery. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mn-header {
		background: #fff;
	}
}

.mn-header.mn-scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
	background: #fff;
}

.mn-header-spacer {
	height: 80px;
}

.mn-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	height: 80px;
}

/* The bar keeps one height at every scroll position. It used to shrink
   80 -> 64 (and 64 -> 56 on mobile), which re-flowed the logo and every
   control mid-scroll — worst on a logged-in phone, where the admin bar is
   sliding away at the same time and the two motions compound. Scrolled state
   now changes only the shadow and background. */

/* ============================================
   Hamburger Toggle (always visible, left side)
   ============================================ */
.mn-hamburger-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: #374151;
	cursor: pointer;
	padding: 0;
	margin-right: 20px;
	flex-shrink: 0;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
		transform 0.15s ease, border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.mn-hamburger-toggle:hover,
.mn-hamburger-toggle.mn-active {
	background: var(--mn-brand-tint);
	color: var(--mn-brand);
}

.mn-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
	height: 22px;
}

.mn-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Raised treatment, desktop only. Below the desktop breakpoint the hamburger sits in the
   right-hand cluster beside the pills, where a second raised control would
   read as clutter — it stays a flat icon button there. */
@media (min-width: 1200px) {
	.mn-hamburger-toggle {
		background: #fff;
		border: 1px solid rgba(12, 26, 35, 0.10);
		box-shadow:
			0 1px 2px rgba(12, 26, 35, 0.06),
			0 2px 6px -2px rgba(12, 26, 35, 0.10),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}

	.mn-hamburger-toggle:hover {
		background: #fff;
		border-color: rgba(73, 149, 209, 0.35);
		transform: translateY(-1px);
		box-shadow:
			0 2px 4px rgba(12, 26, 35, 0.07),
			0 6px 14px -4px rgba(12, 26, 35, 0.16),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}

	/* Pressed: drop back to the surface and pull the shadow in. */
	.mn-hamburger-toggle:active {
		transform: translateY(0);
		box-shadow:
			inset 0 2px 4px rgba(12, 26, 35, 0.10),
			0 1px 1px rgba(12, 26, 35, 0.04);
	}

	/* Open: reads as depressed, not raised — the panel is the raised thing now. */
	.mn-hamburger-toggle.mn-active {
		background: var(--mn-brand-tint-strong);
		border-color: rgba(73, 149, 209, 0.4);
		transform: translateY(0);
		box-shadow: inset 0 2px 5px rgba(12, 26, 35, 0.10);
	}
}

/* Animated X when open */
.mn-hamburger-toggle.mn-active .mn-hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mn-hamburger-toggle.mn-active .mn-hamburger span:nth-child(2) {
	opacity: 0;
}

.mn-hamburger-toggle.mn-active .mn-hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   Logo
   ============================================ */
.mn-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	text-decoration: none;
	margin-right: 40px;
}

.mn-logo-full {
	/* 56px in an 80px bar. At 44px the mark read as an afterthought against
	   the nav items beside it; the source is 1669x647, so this is still well
	   inside its natural resolution. */
	height: 56px;
	width: auto;
}

.mn-logo-icon {
	display: none;
	height: 32px;
	width: auto;
}

/* ============================================
   Desktop Navigation
   ============================================ */
.mn-nav {
	flex: 1;
	display: flex;
	align-items: center;
}

.mn-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
}

/* Top-level items */
.mn-menu > .mn-item > .mn-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-family: var(--mn-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: #374151;
	text-decoration: none;
	border-radius: 9px;
	transition: color 0.18s ease, background 0.18s ease;
	white-space: nowrap;
	line-height: 1;
}

.mn-menu > .mn-item > .mn-link:hover,
.mn-menu > .mn-item:focus-within > .mn-link,
.mn-menu > .mn-item.mn-current > .mn-link {
	color: var(--mn-brand);
	background: var(--mn-brand-tint);
}

/* Chevron icon */
.mn-chevron {
	flex-shrink: 0;
	/* Optical alignment: the glyph's visual centre sits above the text centre,
	   so nudge it down a hair rather than leaving it looking high. */
	margin-top: 1px;
	transform-origin: 50% 55%;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.18s ease;
	opacity: 0.5;
}

.mn-item:hover > .mn-link .mn-chevron,
.mn-has-children.mn-open > .mn-link .mn-chevron,
.mn-has-children:not(.mn-kb-suppress):focus-within > .mn-link .mn-chevron {
	transform: rotate(180deg);
	opacity: 0.85;
}

/* ============================================
   Dropdown Menus
   ============================================ */
.mn-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 6px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px) scale(0.985);
	transform-origin: top left;
	transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
		visibility 0.22s ease;
	z-index: 100;
}

.mn-has-children {
	position: relative;
}

.mn-has-children:hover > .mn-dropdown,
.mn-has-children.mn-open > .mn-dropdown,
.mn-has-children:not(.mn-kb-suppress):focus-within > .mn-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* The parent reads as active while its dropdown is open, so the bar shows
   where you are instead of leaving the trigger looking untouched. */
.mn-menu > .mn-has-children.mn-open > .mn-link {
	color: var(--mn-brand);
	background: var(--mn-brand-tint);
}

@media (prefers-reduced-motion: reduce) {
	.mn-dropdown,
	.mn-chevron {
		transition: none;
	}
}

.mn-dropdown .mn-item {
	list-style: none;
}

.mn-dropdown .mn-link {
	display: block;
	padding: 10px 14px;
	font-family: var(--mn-font);
	font-size: 14px;
	font-weight: 450;
	color: #374151;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1.4;
}

.mn-dropdown .mn-link:hover,
.mn-dropdown .mn-link:focus-visible {
	background: var(--mn-brand-tint);
	color: var(--mn-brand);
}

/* Edge flip — nav-modern.js adds this when a dropdown would run off-screen. */
.mn-menu > .mn-item > .mn-dropdown.mn-flip {
	left: auto;
	right: 0;
}

/* Nested dropdowns (3rd level+) */
.mn-dropdown .mn-has-children > .mn-dropdown {
	top: -6px;
	left: 100%;
	margin-left: 4px;
}

.mn-dropdown .mn-has-children > .mn-dropdown.mn-flip {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 4px;
}

.mn-dropdown .mn-has-children > .mn-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mn-dropdown .mn-has-children > .mn-link .mn-chevron {
	transform: rotate(-90deg);
	width: 8px;
	height: 5px;
}

.mn-dropdown .mn-has-children:hover > .mn-link .mn-chevron {
	transform: rotate(-90deg);
}

/* ============================================
   Right Actions (Search + CTA)
   ============================================ */
.mn-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	flex-shrink: 0;
}

/* Search button */
.mn-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: #6b7280;
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

.mn-search-toggle:hover {
	color: var(--mn-brand);
	background: var(--mn-brand-tint);
}

/* Ask button — opens the chat widget. Shown at every width, immediately left
   of the Plan Visit CTA, so the control never moves across breakpoints.
   Deliberately shares that CTA's solid-brand pill treatment (same fill,
   radius, shadow, and hover lift); the horizontal padding is tighter only
   because the speech-bubble icon already carries part of the width.

   :not([hidden]) is load-bearing: the button ships with the [hidden]
   attribute and nav-modern.js only removes it once window.griswold exists.
   A bare .mn-ask-toggle rule would out-specify [hidden]'s UA display:none
   and paint a dead button whenever the embed script is blocked or fails. */
.mn-ask-toggle:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-family: var(--mn-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--mn-brand);
	border: none;
	border-radius: 100px;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	box-shadow: 0 2px 8px var(--mn-brand-shadow);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.mn-ask-toggle:hover {
	background: var(--mn-brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px var(--mn-brand-shadow-lg);
}

.mn-ask-toggle.mn-active {
	background: var(--mn-brand-dark);
}

/* Plan Your Visit CTA (header bar button) */
.mn-pyv-toggle {
	display: inline-flex;
	align-items: center;
	padding: 10px 24px;
	font-family: var(--mn-font);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--mn-brand);
	border: none;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 8px var(--mn-brand-shadow);
	line-height: 1;
	white-space: nowrap;
}

.mn-pyv-toggle:hover {
	background: var(--mn-brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px var(--mn-brand-shadow-lg);
}

.mn-pyv-toggle.mn-active {
	background: var(--mn-brand-dark);
}

/* One height for every control in .mn-actions.
   Left to vertical padding alone the three drift apart, because each one's
   box is driven by whatever it contains: Ask sat at 38px (18px icon), Plan
   Visit at 34px (14px text line), and the search button at a fixed 40px.
   Pinning the pills to the search button's 40px squares all three up and
   keeps them square if a label, icon size, or font ever changes. Safe as a
   total height because these are border-box, so the existing padding keeps
   working inside it — including the tighter small-phone padding below. */
.mn-ask-toggle:not([hidden]),
.mn-pyv-toggle {
	height: 40px;
}

/* ============================================
   Search Bar
   ============================================ */
.mn-search-bar {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid #e5e7eb;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	padding: 16px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.mn-search-bar.mn-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* The bar reuses .mn-container for its gutters, but not its fixed-height flex
   row — that would shrink-wrap the form instead of letting it fill the width. */
.mn-search-bar .mn-container {
	display: block;
	height: auto;
}

.mn-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.mn-search-input {
	flex: 1;
	height: 48px;
	padding: 0 20px;
	font-size: 16px;
	font-family: var(--mn-font);
	color: #1f2937;
	background: #f3f4f6;
	border: 2px solid transparent;
	border-radius: 12px;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.mn-search-input:focus {
	border-color: var(--mn-brand);
	background: #fff;
}

.mn-search-input::placeholder {
	color: #9ca3af;
}

.mn-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	background: var(--mn-brand);
	color: #fff;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s ease;
	flex-shrink: 0;
}

.mn-search-submit:hover {
	background: var(--mn-brand-dark);
}

/* ============================================
   Hamburger Panel — Slide-out
   (from the left on desktop, from the right on mobile)
   ============================================ */
.mn-hmenu-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(17, 24, 39, 0.4);
	z-index: var(--mn-z-backdrop);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mn-hmenu-backdrop.mn-open {
	opacity: 1;
	visibility: visible;
}

.mn-hmenu-panel {
	position: fixed;
	top: var(--mn-admin-offset);
	left: 0;
	bottom: 0;
	width: 340px;
	max-width: 85vw;
	background: #fff;
	z-index: var(--mn-z-panel);
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12);
}

.mn-hmenu-panel.mn-open {
	transform: translateX(0);
}

/* Panel header — mirrors the Plan-your-visit drawer */
.mn-hmenu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Matches the bar's own vertical rhythm so the logo lands at roughly the
	   height it occupied in the header, rather than jumping down the panel. */
	position: relative;
	min-height: 80px;
	padding: 22px 24px 20px;
	border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.mn-hmenu-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
	/* Settles in just behind the panel rather than arriving with it — a short
	   stagger is what makes the logo read as moving into place instead of
	   being painted on. */
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.28s ease 0.12s, transform 0.28s ease 0.12s;
}

.mn-hmenu-panel.mn-open .mn-hmenu-logo {
	opacity: 1;
	transform: translateX(0);
}

.mn-hmenu-logo {
	/* Near full width of the drawer. The close button is taken out of the flow
	   below so it cannot steal room from the mark. */
	width: 100%;
}

.mn-hmenu-logo img {
	width: 100%;
	height: auto;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.mn-hmenu-logo {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.mn-hmenu-title {
	font-family: var(--mn-font);
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
}

.mn-hmenu-scroll {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 20px 24px 32px;
}

.mn-hmenu-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: #6b7280;
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
	flex-shrink: 0;
}

.mn-hmenu-close:hover {
	color: #1f2937;
	background: #f3f4f6;
}

/* Sections — <li> wrapping a heading plus its child list */
.mn-hmenu-section {
	list-style: none;
}

.mn-hmenu-section + .mn-hmenu-section,
.mn-hmenu-item + .mn-hmenu-section {
	margin-top: 24px;
}

/* Section headings */
.mn-hmenu-heading {
	font-family: var(--mn-font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7280;
	margin: 0 0 8px;
	padding: 0 4px;
}

/* Hide sections that have no items yet (avoids dead "stub" labels) */
.mn-hmenu-section:not(:has(.mn-hmenu-list)) {
	display: none;
}

/* Menu list */
.mn-hmenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mn-hmenu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mn-hmenu-item {
	list-style: none;
}

.mn-hmenu-link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 8px;
	font-family: var(--mn-font);
	font-size: 15px;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.mn-hmenu-link:hover,
.mn-hmenu-link:active {
	background: var(--mn-brand-tint);
	color: var(--mn-brand);
}

/* Current page */
.mn-hmenu-current > .mn-hmenu-link {
	background: var(--mn-brand-tint-strong);
	color: var(--mn-brand);
	font-weight: 600;
}

/* Icon circles — shown when item has an icon-* class */
.mn-hmenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: #e8f0fe;
	border-radius: 50%;
	flex-shrink: 0;
	background-image: var(--hmenu-icon);
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Icon definitions — add CSS class to menu item in WP admin */
.icon-visit .mn-hmenu-icon      { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); }
.icon-watch .mn-hmenu-icon      { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E"); }
.icon-groups .mn-hmenu-icon     { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.icon-giving .mn-hmenu-icon     { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.icon-serve .mn-hmenu-icon      { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E"); }
.icon-events .mn-hmenu-icon     { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.icon-follow .mn-hmenu-icon     { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E"); }
.icon-baptism .mn-hmenu-icon    { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E"); }
.icon-membership .mn-hmenu-icon { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); }
.icon-prayer .mn-hmenu-icon     { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.icon-nextgen .mn-hmenu-icon    { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.icon-youngadults .mn-hmenu-icon { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.icon-adults .mn-hmenu-icon     { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.icon-specialneeds .mn-hmenu-icon { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.icon-outreach .mn-hmenu-icon   { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.icon-support .mn-hmenu-icon    { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.icon-worship .mn-hmenu-icon    { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
.icon-study .mn-hmenu-icon      { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.icon-invest .mn-hmenu-icon     { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.icon-store .mn-hmenu-icon      { --hmenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234995d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); }

/* ============================================
   Plan Your Visit Drawer — Right-side
   ============================================ */
.mn-pyv-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(17, 24, 39, 0.4);
	z-index: var(--mn-z-backdrop);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mn-pyv-backdrop.mn-open {
	opacity: 1;
	visibility: visible;
}

.mn-pyv-panel {
	position: fixed;
	top: var(--mn-admin-offset);
	right: 0;
	bottom: 0;
	width: 380px;
	max-width: 90vw;
	background: #fff;
	z-index: var(--mn-z-panel);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
}

.mn-pyv-panel.mn-open {
	transform: translateX(0);
}

/* Drawer header */
.mn-pyv-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.mn-pyv-title {
	font-family: var(--mn-font);
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
}

.mn-pyv-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: #6b7280;
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

.mn-pyv-close:hover {
	color: #1f2937;
	background: #f3f4f6;
}

/* Scrollable content */
.mn-pyv-content {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 20px 24px 32px;
}

/* Welcome */
.mn-pyv-welcome {
	font-family: var(--mn-font);
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 12px;
}

.mn-pyv-welcome-heading {
	font-family: var(--mn-font);
	font-size: 20px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 8px;
}

.mn-pyv-image {
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
}

.mn-pyv-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Info cards (service times, address) */
.mn-pyv-card {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}

.mn-pyv-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mn-font);
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 12px;
}

.mn-pyv-card-title svg {
	color: var(--mn-brand);
	flex-shrink: 0;
}

/* Service time rows */
.mn-pyv-time-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
}

.mn-pyv-time-row + .mn-pyv-time-row {
	border-top: 1px solid #e9ecef;
	padding-top: 8px;
	margin-top: 2px;
}

.mn-pyv-time-day {
	font-family: var(--mn-font);
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}

.mn-pyv-time-val {
	font-family: var(--mn-font);
	font-size: 14px;
	color: #6c757d;
}

/* Address block */
.mn-pyv-address {
	font-family: var(--mn-font);
	font-size: 14px;
	line-height: 1.6;
	color: #374151;
	margin-bottom: 8px;
}

.mn-pyv-map-links {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mn-pyv-map-links a {
	font-family: var(--mn-font);
	font-size: 13px;
	color: var(--mn-brand);
	text-decoration: none;
}

.mn-pyv-map-links a:hover {
	text-decoration: underline;
}

.mn-pyv-map-sep {
	color: #d1d5db;
	font-size: 13px;
}

/* Info sections (parking, kids) */
.mn-pyv-section {
	margin-bottom: 16px;
}

.mn-pyv-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mn-font);
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 8px;
}

.mn-pyv-section-title svg {
	color: var(--mn-brand);
	flex-shrink: 0;
}

.mn-pyv-section-body {
	font-family: var(--mn-font);
	font-size: 14px;
	line-height: 1.6;
	color: #374151;
}

.mn-pyv-section-body a {
	color: var(--mn-brand);
	text-decoration: none;
}

.mn-pyv-section-body a:hover {
	text-decoration: underline;
}

/* CTA button */
.mn-pyv-cta {
	display: block;
	text-align: center;
	padding: 14px 24px;
	margin-bottom: 20px;
	font-family: var(--mn-font);
	font-size: 16px;
	font-weight: 600;
	color: #fff !important;
	background: var(--mn-brand);
	border-radius: 12px;
	text-decoration: none !important;
	box-shadow: 0 2px 8px var(--mn-brand-shadow);
	transition: background 0.2s ease, transform 0.15s ease;
}

.mn-pyv-cta:hover {
	background: var(--mn-brand-dark);
	transform: translateY(-1px);
	color: #fff !important;
	text-decoration: none !important;
}

/* Social links */
.mn-pyv-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 4px 0;
}

.mn-pyv-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #6b7280;
	border-radius: 50%;
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease;
}

.mn-pyv-social-link:hover {
	color: var(--mn-brand);
	background: var(--mn-brand-tint);
}

/* ============================================
   Responsive: compact header (<=1199px)

   The switch is at 1200px, not 980px, because that is where the desktop bar
   actually fits. Measured at 1024px the bar's contents came to 1018px inside
   a 1024px container once padding was taken out — the search toggle's right
   edge landed 86px past the viewport and "Plan Visit" was clipped in half, on
   every iPad in landscape and every small laptop. It needs roughly 1130px.

   Nothing is lost by waiting: the hamburger and its drawer are present at all
   widths, so the full menu is still one tap away between 980 and 1200.
   ============================================ */
@media (max-width: 1199px) {
	.mn-container {
		height: 64px;
		padding: 0 16px;
	}

	.mn-header-spacer {
		height: 64px;
	}

	/* Hide desktop nav */
	.mn-nav {
		display: none;
	}

	/* Logo left, then search + CTA + hamburger grouped on the right. The
	   hamburger keeps its DOM position (first, so desktop tab order matches
	   the visual left-to-right order) and only moves visually here. */
	.mn-logo {
		order: 1;
		margin-right: auto;
	}

	.mn-actions {
		order: 2;
		gap: 8px;
	}

	.mn-hamburger-toggle {
		order: 3;
		margin: 0 -6px 0 4px;
	}

	/* Menu opens from the right, matching where its button now sits */
	.mn-hmenu-panel {
		left: auto;
		right: 0;
		max-width: min(100vw, 400px);
		transform: translateX(100%);
		box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
	}

	.mn-hmenu-panel.mn-open {
		transform: translateX(0);
	}

	.mn-pyv-panel {
		max-width: min(100vw, 420px);
	}

	/* Full-height tap targets in the bar */
	.mn-search-toggle {
		width: 44px;
		height: 44px;
	}

	html {
		scroll-padding-top: 80px;
	}
}

/* Small phones — tighten the CTA button so all three controls fit */
/* The wordmark gives way to the cross only when the bar is genuinely narrow.
   It used to drop at the same width as the desktop nav; with that switch now
   at 1200px, keeping the swap there would have left every iPad and small
   laptop showing a bare icon with two-thirds of the bar empty. */
@media (max-width: 768px) {
	.mn-logo-full {
		display: none;
	}

	.mn-logo-icon {
		display: block;
		height: 36px;
	}
}

@media (max-width: 400px) {
	.mn-pyv-toggle {
		padding: 10px 14px;
		font-size: 13px;
	}

	.mn-actions {
		gap: 2px;
	}

	/* Ask drops its label and becomes a round icon button. With four
	   controls plus the logo, the word is what has to give on a 360px
	   phone — the speech-bubble icon still reads, and aria-label carries
	   the name for screen readers either way. */
	.mn-ask-toggle:not([hidden]) {
		width: 40px;
		height: 40px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.mn-ask-label {
		display: none;
	}
}

/* ============================================
   Focus-visible — keyboard focus indicators
   ============================================ */
.mn-skip-link:focus-visible,
.mn-logo:focus-visible,
.mn-link:focus-visible,
.mn-hamburger-toggle:focus-visible,
.mn-ask-toggle:focus-visible,
.mn-pyv-toggle:focus-visible,
.mn-search-toggle:focus-visible,
.mn-search-input:focus-visible,
.mn-search-submit:focus-visible,
.mn-hmenu-link:focus-visible,
.mn-hmenu-close:focus-visible,
.mn-pyv-close:focus-visible,
.mn-pyv-cta:focus-visible,
.mn-pyv-social-link:focus-visible,
.mn-pyv-map-links a:focus-visible {
	outline: 2px solid var(--mn-brand);
	outline-offset: 2px;
}

/* Search input already changes its border on focus; keep the outline snug */
.mn-search-input:focus-visible {
	outline-offset: 0;
}

/* ============================================
   Reduced Motion — disable nav transitions/transforms
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	.mn-header,
	.mn-header *,
	.mn-skip-link,
	.mn-dropdown,
	.mn-search-bar,
	.mn-hmenu-panel,
	.mn-hmenu-backdrop,
	.mn-pyv-panel,
	.mn-pyv-backdrop {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ============================================
   Print
   ============================================ */
@media print {
	.mn-header,
	.mn-header-spacer {
		display: none !important;
	}
}

/* On phones the fixed Modern Nav already exposes the same Ask experience.
   The embedded provider also ships a 280x100 idle iframe, creating a second
   launcher and covering the page/footer. Collapse only that exact idle state;
   once Ask opens the panel the provider changes its inline dimensions and
   this selector stops matching, so the full dialog remains available. */
@media (max-width: 768px) {
	body.modern-nav iframe[title="Support chat"][style*="width: 280px"][style*="height: 100px"] {
		width: 1px !important;
		height: 1px !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}