/**
 * Minimal Elementor compatibility styles.
 *
 * Navigation/hero behavior is controlled by Elementor/HFE templates;
 * these rules only fix stacking and clipping issues with the theme shell.
 */

/*
 * Hide duplicate nav only inside main page content — NOT in header#masthead (global HFE header).
 * The fixed global header from Header Footer Elementor is untouched.
 */
body.ohc-site:not(.elementor-editor-active) main#content .navbar,
body.ohc-site:not(.elementor-editor-active) main#content #navbar {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/*
 * HFE “Global” theme compatibility loads Hello’s full header.php, which still prints
 * #site-header (Hello menu-1 / dynamic-header). The branded bar is the HFE template
 * ([ohc_site_header]). Body gets .ehf-header when an HFE header is assigned.
 */
body.ehf-header.ohc-site header#site-header.site-header,
body.ohc-site:has(header#masthead) header#site-header.site-header {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	border: 0 !important;
}

header#masthead {
	position: relative;
	z-index: 1100;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	--navy: #431D53;
	--navy-mid: #4F2271;
	--gold: #c9983a;
	--gold-light: #e5b96a;
	--white: #ffffff;
	--text-dark: #221E1F;
	--font-display: 'Ubuntu', 'Exo 2', sans-serif;
	--font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
	--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--shadow-md: 0 8px 32px rgba(67, 29, 83, 0.16);
}

/* Keep footer wrapper full-width when used by Elementor templates. */
.footer-width-fixer {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Mobile drawer (.nav-panel) uses position:fixed. Elementor motion (.e-transform) adds
 * transform to .elementor-widget-container, which makes fixed descendants attach to that
 * small box instead of the viewport — menu appears as a thin empty strip with a scrollbar.
 */
@media (max-width: 1024px) {
	header#masthead .elementor-widget-shortcode .elementor-widget-container,
	header#masthead .elementor-widget-shortcode.e-transform .elementor-widget-container {
		transform: none !important;
		filter: none !important;
		perspective: none !important;
		overflow: visible !important;
	}

	header#masthead [class*="elementor-widget-nav-menu"] .elementor-widget-container,
	header#masthead [class*="elementor-widget-navigation-menu"] .elementor-widget-container {
		transform: none !important;
		filter: none !important;
		perspective: none !important;
		overflow: visible !important;
	}

	header#masthead .elementor-section,
	header#masthead .elementor-column,
	header#masthead .elementor-widget-wrap {
		overflow: visible !important;
	}
}

/*
 * [ohc_site_header] inside Elementor shortcode widgets: Elementor section/kit CSS often loads
 * after app.css and breaks fixed layout, flex, and variables. Re-assert the designed navbar here
 * (hfe-layout loads late; see functions.php deps + priority-2000 patch).
 */
header#masthead .elementor-top-section,
header#masthead .elementor-section,
header#masthead .elementor-container,
header#masthead .elementor-column,
header#masthead .elementor-widget-wrap {
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
}

header#masthead .elementor-widget-shortcode .elementor-widget-container,
header#masthead .elementor-widget-shortcode .elementor-shortcode {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

header#masthead .navbar {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 1000 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
	background: rgba(128, 12, 141, 0.97) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-bottom: 1px solid rgba(201, 152, 58, 0.15) !important;
	transition: var(--transition) !important;
	margin: 0 !important;
}

header#masthead .navbar::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -1px !important;
	height: 1px !important;
	background: linear-gradient(90deg, transparent, rgba(201, 152, 58, 0.35), transparent) !important;
	opacity: 0.75 !important;
	pointer-events: none !important;
}

header#masthead .navbar .nav-container {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 2rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 2rem !important;
	height: 72px !important;
	box-sizing: border-box !important;
}

header#masthead .navbar .nav-brand {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	color: var(--white) !important;
	text-decoration: none !important;
	flex-shrink: 0 !important;
}

header#masthead .navbar .brand-icon {
	width: 38px !important;
	height: 38px !important;
	background: transparent !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

header#masthead .navbar .logo-wrap img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
}

header#masthead .navbar .brand-text {
	display: flex !important;
	flex-direction: column !important;
	line-height: 1.1 !important;
	text-align: left !important;
}

header#masthead .navbar .brand-name {
	font-family: var(--font-display) !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: var(--white) !important;
}

header#masthead .navbar .brand-sub {
	font-size: 0.65rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--gold-light) !important;
}

header#masthead .navbar .nav-panel {
	display: flex !important;
	flex: 1 1 auto !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 0.75rem !important;
	min-width: 0 !important;
	margin-left: auto !important;
}

header#masthead .navbar .nav-links {
	display: flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-wrap: wrap !important;
}

header#masthead .navbar .nav-links a {
	padding: 0.5rem 0.85rem !important;
	border-radius: 6px !important;
	font-family: var(--font-body) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	transition: var(--transition) !important;
	position: relative !important;
}

header#masthead .navbar .nav-links a::after {
	content: '' !important;
	position: absolute !important;
	left: 0.85rem !important;
	right: 0.85rem !important;
	bottom: 0.35rem !important;
	height: 1px !important;
	background: linear-gradient(90deg, transparent, rgba(229, 185, 106, 0.95), transparent) !important;
	transform: scaleX(0) !important;
	transform-origin: center !important;
	transition: transform 0.35s var(--ease-out) !important;
	opacity: 0.9 !important;
	pointer-events: none !important;
}

header#masthead .navbar .nav-links a:hover::after,
header#masthead .navbar .nav-links a.active::after {
	transform: scaleX(1) !important;
}

header#masthead .navbar .nav-links a:hover {
	color: var(--white) !important;
	background: rgba(201, 152, 58, 0.15) !important;
}

header#masthead .navbar .nav-links a.active {
	color: var(--gold-light) !important;
	background: rgba(201, 152, 58, 0.15) !important;
}

header#masthead .navbar .nav-cta {
	display: inline-flex !important;
	align-items: center !important;
	background: var(--gold) !important;
	color: var(--navy) !important;
	padding: 0.55rem 1.25rem !important;
	border-radius: 50px !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 0.82rem !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	transition: var(--transition) !important;
}

header#masthead .navbar .nav-toggle {
	display: none !important;
}

@media (max-width: 1024px) {
	header#masthead .navbar .nav-container {
		position: relative !important;
		min-height: 72px !important;
		padding-right: 4rem !important;
	}

	header#masthead .navbar .nav-toggle,
	header#masthead .navbar #navToggle {
		display: inline-flex !important;
		position: absolute !important;
		right: 1rem !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		flex-direction: column !important;
		gap: 5px !important;
		background: rgba(201, 152, 58, 0.95) !important;
		border: 2px solid rgba(255, 255, 255, 0.8) !important;
		border-radius: 10px !important;
		cursor: pointer !important;
		padding: 0 !important;
	}

	header#masthead .navbar .nav-toggle span {
		width: 24px !important;
		height: 2px !important;
		background: var(--navy, #431D53) !important;
		border-radius: 2px !important;
	}

	/*
	 * Mobile drawer: desktop masthead rules (centered row, 0.875rem) must not apply.
	 * Full-width tap targets, left-aligned type, golden gradient dividers like desktop underlines.
	 */
	header#masthead .navbar .nav-panel {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		margin-left: 0 !important;
		flex: none !important;
		gap: 0 !important;
	}

	header#masthead .navbar .nav-links {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		gap: 0 !important;
	}

	header#masthead .navbar .nav-links li {
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: none !important;
		list-style: none !important;
	}

	header#masthead .navbar .nav-links li::after {
		content: '' !important;
		display: block !important;
		height: 2px !important;
		margin: 0 1rem !important;
		border-radius: 999px !important;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(201, 152, 58, 0.25) 10%,
			rgba(255, 224, 160, 0.95) 50%,
			rgba(201, 152, 58, 0.25) 90%,
			transparent 100%
		) !important;
		box-shadow:
			0 0 8px rgba(229, 185, 106, 0.35),
			0 1px 0 rgba(255, 255, 255, 0.12) !important;
		pointer-events: none !important;
	}

	header#masthead .navbar .nav-links li:last-child::after {
		display: none !important;
	}

	header#masthead .navbar .nav-links a {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		text-align: left !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 1.05rem 1.35rem !important;
		font-family: var(--font-body) !important;
		font-size: 1.0625rem !important;
		font-weight: 500 !important;
		letter-spacing: 0.02em !important;
		line-height: 1.35 !important;
		border-radius: 0 !important;
	}

	header#masthead .navbar .nav-links a::after {
		display: none !important;
	}

	header#masthead .navbar .nav-panel .nav-links a:hover,
	header#masthead .navbar .nav-panel .nav-links a.active {
		background: rgba(201, 152, 58, 0.14) !important;
	}

	header#masthead .navbar .nav-cta {
		align-self: stretch !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: center !important;
		text-align: center !important;
		margin: 0 1.25rem 1.25rem !important;
		width: auto !important;
		max-width: none !important;
		font-size: 0.9rem !important;
		padding: 0.65rem 1.25rem !important;
	}

	header#masthead .navbar .nav-cta::before {
		content: '' !important;
		display: block !important;
		height: 2px !important;
		margin: 0.35rem 0 1rem !important;
		border-radius: 999px !important;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(201, 152, 58, 0.25) 10%,
			rgba(255, 224, 160, 0.95) 50%,
			rgba(201, 152, 58, 0.25) 90%,
			transparent 100%
		) !important;
		box-shadow:
			0 0 8px rgba(229, 185, 106, 0.35),
			0 1px 0 rgba(255, 255, 255, 0.12) !important;
	}
}

/* Home Elementor program/explore layout: see elementor-layout-bridge.css (loads after Elementor post CSS). */