/* Rijschool Oude Maas – navigatiebalk: header v2 (witte pil-balk) + losse menu-navigatie.
   Balk 1-op-1 gebaseerd op header-mobiel-menu-oude-maas.html.
   BEM: .rom-nv__* | CSS-vars: --rom-nv-* (fallback = design-kleuren).
   Het mobiele menu zelf is het full page menu (rom-fpmenu.css, .rom-fpm__*): de hamburger
   in deze balk opent dat menu.
   Let op: het mobiel-breekpunt van de CSS (960px) ligt vast; de "mobile_bp"-control
   in Elementor bepaalt alleen het gedrag van het script (auto-sluiten bij vergroten). */

.rom-nv,
.rom-nv * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.rom-nv {
	font-family: 'Montserrat', sans-serif;
	color: #0A2540;
	position: relative;
	z-index: 1;
}

/* ---------- Positionering (header v2: fixed | sticky | static) ---------- */
.rom-nv--pos-fixed,
.rom-nv--pos-sticky {
	padding: 18px 20px 0;
	pointer-events: none;
	z-index: 9990;
}

.rom-nv--pos-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.rom-nv--pos-sticky {
	position: sticky;
	top: 0;
}

.rom-nv--pos-static {
	position: relative;
	z-index: 1;
}

/* In de Elementor-editor nooit fixed/sticky laten "zweven" over de canvas.
   Zowel via de JS-class (.is-editor) als via de body-classes die de editor zelf zet,
   zodat dit ook werkt als de editor de body-class pas ná ons script toevoegt. */
.rom-nv.is-editor,
body.elementor-editor-active .rom-nv--pos-fixed,
body.elementor-editor-active .rom-nv--pos-sticky,
body.elementor-editor-preview .rom-nv--pos-fixed,
body.elementor-editor-preview .rom-nv--pos-sticky {
	position: relative !important;
	z-index: 1 !important;
	padding: 0 !important;
	pointer-events: auto !important;
}

/* ---------- Balk ---------- */
.rom-nv__bar {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 20px;
}

.rom-nv--header .rom-nv__bar {
	max-width: 1350px;
	margin: 0 auto;
	background: var(--rom-nv-bar-bg, #FFFFFF);
	border-radius: 60px;
	padding: 12px 14px 12px 26px;
	box-shadow: 0 14px 40px var(--rom-nv-bar-shadow, rgba(5, 25, 50, 0.22));
	transition: box-shadow 0.3s ease, padding 0.3s ease;
}

.rom-nv--header.is-scrolled .rom-nv__bar {
	box-shadow: 0 10px 30px rgba(5, 25, 50, 0.3);
	padding-top: 9px;
	padding-bottom: 9px;
}

.rom-nv--menu .rom-nv__bar {
	width: 100%;
}

/* ---------- Logo (header v2) ---------- */
.rom-nv__logo {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	letter-spacing: -0.03em;
	flex-shrink: 0;
}

.rom-nv__logo-small {
	display: block;
	font-size: 12px;
	color: var(--rom-nv-logo-small, #EB0D6D);
	font-weight: 700;
	margin-bottom: 1px;
}

.rom-nv__logo-big {
	display: block;
	font-size: 22px;
	color: var(--rom-nv-logo-big, #00A1E1);
}

.rom-nv__logo-img {
	display: block;
	height: 32px;
	width: auto;
}

/* ---------- Desktop-links ---------- */
.rom-nv__links {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
}

.rom-nv--header .rom-nv__links {
	margin-left: auto;
	margin-right: auto;
}

.rom-nv--menu .rom-nv__links {
	width: 100%;
	justify-content: flex-start;
}

.rom-nv__links a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 50px;
	text-decoration: none;
	color: var(--rom-nv-link-color, #0A2540);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	position: relative;
	transition: color 0.2s ease, background 0.2s ease;
}

.rom-nv__links a:hover {
	background: var(--rom-nv-link-hover-bg, #F4F7FA);
	color: var(--rom-nv-link-hover-color, #0B68A0);
}

.rom-nv__links a.is-actief {
	color: var(--rom-nv-link-active-color, #EB0D6D);
}

/* ---------- Telefoon-pil (header v2) ---------- */
.rom-nv__tel {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, var(--rom-nv-tel-grad1, #EB0D6D) 0%, var(--rom-nv-tel-grad2, #D21E7E) 100%);
	color: var(--rom-nv-tel-text, #FFFFFF);
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 8px 8px 8px 22px;
	border-radius: 50px;
	box-shadow: 0 10px 26px rgba(235, 13, 109, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
}

.rom-nv__tel:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(235, 13, 109, 0.45);
	color: var(--rom-nv-tel-text, #FFFFFF);
}

.rom-nv__tel-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rom-nv-tel-icon-bg, #FFFFFF);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rom-nv__tel-icon svg {
	width: 15px;
	height: 15px;
	stroke: var(--rom-nv-tel-grad1, #EB0D6D);
}

/* ---------- Mobiele CTA + hamburger ---------- */
.rom-nv__mob {
	display: none;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.rom-nv__mob-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--rom-nv-mobcta-grad1, #EB0D6D) 0%, var(--rom-nv-mobcta-grad2, #D21E7E) 100%);
	color: var(--rom-nv-mobcta-text, #FFFFFF);
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 11px 16px;
	border-radius: 50px;
	white-space: nowrap;
}

.rom-nv__hamburger {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--rom-nv-burger-bg, #0A2540);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
	transition: background 0.3s ease;
}

.rom-nv__hamburger span {
	position: absolute;
	width: 20px;
	height: 2px;
	background: var(--rom-nv-burger-bar, #FFFFFF);
	border-radius: 2px;
	transition: transform 0.35s cubic-bezier(.65, 0, .35, 1), opacity 0.2s ease, top 0.35s ease;
	left: 13px;
}

.rom-nv__hamburger span:nth-child(1) { top: 17px; }
.rom-nv__hamburger span:nth-child(2) { top: 22px; }
.rom-nv__hamburger span:nth-child(3) { top: 27px; }

.rom-nv__hamburger:focus-visible {
	outline: 3px solid #00A1E1;
	outline-offset: 2px;
}

.rom-nv.is-open .rom-nv__hamburger {
	background: var(--rom-nv-burger-bg-open, #EB0D6D);
}

.rom-nv.is-open .rom-nv__hamburger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.rom-nv.is-open .rom-nv__hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.rom-nv.is-open .rom-nv__hamburger span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.rom-nv__hamburger span {
		transition: none !important;
	}
}

/* ---------- Breekpunt: vast op 960px (zie ook control-omschrijving "mobile_bp") ---------- */
@media (max-width: 960px) {
	.rom-nv--pos-fixed,
	.rom-nv--pos-sticky {
		padding: 12px 12px 0;
	}
	.rom-nv--header .rom-nv__bar {
		padding: 8px 8px 8px 20px;
		gap: 12px;
	}
	.rom-nv__links,
	.rom-nv__tel {
		display: none;
	}
	.rom-nv__mob {
		display: flex;
	}
	.rom-nv__logo-big {
		font-size: 20px;
	}
}

@media (max-width: 380px) {
	.rom-nv__mob-cta {
		display: none;
	}
}