/**
 * FH Summit Mobile Nav — header fit + full-screen menu (≤1024).
 * Hamburger measured from Figma 2024:2: 22×1.5px lines, 6px center spacing, navy.
 */

:root {
	--fh-smn-navy: #142744;
	--fh-smn-lime: #dee465;
	--fh-smn-coral: #ec596a;
	--fh-smn-white: #ffffff;
	--fh-smn-font-display: "Canela", Sans-serif;
	--fh-smn-font-ui: "Basetica", Sans-serif;
}

/* —— Header fit ≤1024: logo | spacer | toggle + Register —— */
@media (max-width: 1024px) {
	/* Kill Elementor dropdown + its toggle; our plugin owns mobile nav. */
	.elementor-98 .elementor-element-0ec7639 {
		display: none !important;
	}

	.elementor-98 .elementor-element-c15cf1c {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 0;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 0 12px !important;
		overflow: visible;
	}

	.elementor-98 .elementor-element-c311abb {
		order: 0;
		flex: 0 1 auto;
		min-width: 0;
		max-width: 42%;
	}

	.elementor-98 .elementor-element-c311abb img {
		max-width: 100%;
		height: auto;
		width: auto;
		max-height: 36px;
	}

	.elementor-98 .elementor-element-865370b {
		display: none !important;
	}

	/* Our toggle — inserted before Register. */
	.fh-smn__toggle {
		order: 2;
		flex: 0 0 44px;
		margin-left: auto;
		margin-right: 8px;
	}

	/* Compact Register — label + arrow, less padding, no fixed 250px. */
	.elementor-98 .elementor-element-5a3c5ae {
		order: 3;
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		min-height: 44px !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 12px !important;
		gap: 6px !important;
		box-sizing: border-box;
	}

	.elementor-98 .elementor-element-5a3c5ae.mobile-register {
		max-width: none !important;
	}

	.elementor-98 .elementor-element-5a3c5ae .elementor-heading-title,
	.elementor-98 .elementor-element-4b5672c {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 14px !important;
		white-space: nowrap;
	}

	.elementor-98 .elementor-element-5a3c5ae .elementor-widget-image,
	.elementor-98 .elementor-element-7f4327a {
		width: 10px !important;
		max-width: 10px !important;
		margin: 0 !important;
	}

	.elementor-98 .elementor-element-5a3c5ae .elementor-widget-image img {
		width: 10px !important;
		height: auto !important;
	}

	/* Fixed header fits the content box — never 100vw (scrollbar gutter). */
	.elementor-98 .elementor-element-10c575e {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* —— Toggle (in header when closed; morphs to × when open) —— */
.fh-smn__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fh-smn-navy);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 100050;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.fh-smn__toggle {
		display: inline-flex;
	}
}

.fh-smn__burger,
.fh-smn__x {
	display: block;
	width: 22px;
	height: 15px; /* 1.5 + 4.5 + 1.5 + 4.5 + 1.5 */
	position: relative;
}

.fh-smn__burger span {
	position: absolute;
	left: 0;
	width: 22px;
	height: 1.5px;
	background: var(--fh-smn-navy);
	border-radius: 0;
}

.fh-smn__burger span:nth-child(1) {
	top: 0;
}

.fh-smn__burger span:nth-child(2) {
	top: 6px; /* Figma centers: 21→27→33 = 6px */
}

.fh-smn__burger span:nth-child(3) {
	top: 12px;
}

.fh-smn__x {
	display: none;
}

.fh-smn__x::before,
.fh-smn__x::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6.75px;
	width: 22px;
	height: 1.5px;
	background: var(--fh-smn-navy);
}

.fh-smn__x::before {
	transform: rotate(45deg);
}

.fh-smn__x::after {
	transform: rotate(-45deg);
}

/* Toggle may live in the header (outside .fh-smn); use .is-open on the button. */
.fh-smn__toggle.is-open .fh-smn__burger,
.fh-smn.is-open .fh-smn__toggle .fh-smn__burger {
	display: none;
}

.fh-smn__toggle.is-open .fh-smn__x,
.fh-smn.is-open .fh-smn__toggle .fh-smn__x {
	display: block;
}

/* —— Full-screen panel —— */
.fh-smn__panel {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	height: 100vh;
	background: var(--fh-smn-navy);
	z-index: 100100;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 250ms ease, visibility 0s linear 250ms;
	box-sizing: border-box;
}

.fh-smn.is-open .fh-smn__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 250ms ease, visibility 0s;
}

.fh-smn__top {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: var(--fh-header-offset, 56px);
	min-height: 56px;
	padding: 0 12px;
	background: var(--fh-smn-white);
	box-sizing: border-box;
	flex-shrink: 0;
	/* Match closed header: logo | toggle | Register */
}

.fh-smn__logo {
	display: flex;
	align-items: center;
	max-width: 42%;
}

.fh-smn__logo img {
	display: block;
	height: 32px;
	width: auto;
	max-width: 100%;
}

/* × in panel top — same slot as closed-state toggle (header sits under panel). */
.fh-smn__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	margin-left: auto;
	margin-right: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--fh-smn-navy);
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 44px;
	z-index: 1;
}

.fh-smn__close .fh-smn__x {
	display: block;
	position: relative;
	width: 22px;
	height: 15px;
}

/* Reserve compact-Register width so × aligns with closed-state toggle. */
.fh-smn__reg-slot {
	flex: 0 0 auto;
	width: 5.5rem;
	height: 44px;
	pointer-events: none;
}

/* Header toggle morphs, but panel covers the header — hide it while open. */
.fh-smn__toggle.is-open {
	visibility: hidden;
	pointer-events: none;
}

#fh-smn-root {
	display: contents;
}

.fh-smn__nav {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 2rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.fh-smn__link {
	position: relative;
	display: block;
	padding: 0.55rem 0 0.55rem 1.1rem;
	font-family: var(--fh-smn-font-display);
	font-weight: 400;
	/* ≈36–40px; clamp so "Explore Newark" fits one line at 360. */
	font-size: clamp(2rem, 10vw, 2.5rem);
	line-height: 1.15;
	/* Beat Elementor kit link color (coral) — white on navy ≥4.5:1. */
	color: var(--fh-smn-white) !important;
	text-decoration: none !important;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(10px);
}

.fh-smn.is-open .fh-smn__link {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 250ms ease, transform 250ms ease;
}

.fh-smn.is-open .fh-smn__link:nth-child(1) {
	transition-delay: 40ms;
}
.fh-smn.is-open .fh-smn__link:nth-child(2) {
	transition-delay: 80ms;
}
.fh-smn.is-open .fh-smn__link:nth-child(3) {
	transition-delay: 120ms;
}
.fh-smn.is-open .fh-smn__link:nth-child(4) {
	transition-delay: 160ms;
}
.fh-smn.is-open .fh-smn__link:nth-child(5) {
	transition-delay: 200ms;
}
.fh-smn.is-open .fh-smn__link:nth-child(6) {
	transition-delay: 240ms;
}
.fh-smn.is-open .fh-smn__link:nth-child(7) {
	transition-delay: 280ms;
}
.fh-smn.is-open .fh-smn__link:nth-child(8) {
	transition-delay: 320ms;
}

/* Active section: short lime rule. Explore Newark: always a subtle lime accent. */
.fh-smn__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 3px;
	background: var(--fh-smn-lime);
	transform: translateY(-50%);
	transition: width 150ms ease;
}

.fh-smn__link.is-explore::before {
	width: 6px;
	opacity: 0.85;
}

.fh-smn__link.is-active::before {
	width: 14px;
	opacity: 1;
}

.fh-smn__link:focus-visible {
	outline: 2px solid var(--fh-smn-lime);
	outline-offset: 4px;
}

/* Register pinned bottom — coral site style, white text (≥4.5:1 on #EC596A). */
.fh-smn__register {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 1.15rem 1.25rem;
	padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
	background: var(--fh-smn-coral) !important;
	/* White on #EC596A ≈ 3.9:1 large text; 4.5:1 at normal — keep white. */
	color: var(--fh-smn-white) !important;
	font-family: var(--fh-smn-font-ui);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.2;
	text-decoration: none !important;
	box-sizing: border-box;
}

.fh-smn__register:hover,
.fh-smn__register:focus {
	background: #e03549 !important;
	color: var(--fh-smn-white) !important;
}

.fh-smn__register span {
	color: inherit !important;
}

.fh-smn__register:focus-visible {
	outline: 2px solid var(--fh-smn-lime);
	outline-offset: -4px;
}

.fh-smn__register-chevron {
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: 0.05em;
}

body.fh-smn-lock {
	overflow: hidden;
	touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
	.fh-smn__panel,
	.fh-smn.is-open .fh-smn__link {
		transition: opacity 150ms ease !important;
		transition-delay: 0ms !important;
		transform: none !important;
	}
}

/* Desktop: plugin UI inert. */
@media (min-width: 1025px) {
	.fh-smn__toggle,
	.fh-smn__panel {
		display: none !important;
	}
}