/* ==========================================================================
   Florazon – Header: dropdowns, menu & hero
   1. Submenu "Nieuws & Events" (Divi dropdown) in dezelfde stijl als de taalswitcher
   2. "Winkels"-ballon (Divi Pixel Balloon in de footer-layout) opgeruimd
   3. Hoofdmenu compacter op schermen ≤ 1680px zodat het op één regel past
   4. Kleurwaas over de hero-video, zodat het witte menu leesbaar blijft
   5. Social-iconen wit op de transparante header (bovenaan de homepage)
   6. Groene hover-pill ook voor menu-items met een dropdown (Nieuws & Events)

   Let op: de basisinstellingen van het dropdown-menu komen uit Divi Pixel
   (Primary Menu / Dropdown Menu: breedte 420px, 2 kolommen, pijltje). Deze CSS
   overschrijft die instellingen; wil je terug naar de Divi Pixel-instellingen,
   verwijder dan het betreffende blok hieronder.
   ========================================================================== */

/* ---------- 1. Divi dropdown (Nieuws & Events) ---------------------------- */

@media (min-width: 981px) {
	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li:not(.mega-menu) > ul.sub-menu {
		width: auto !important;
		min-width: 200px;
		margin: 0;
		padding: 6px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: #fff !important;
		box-shadow: 0 12px 40px -8px rgba(0, 5, 26, 0.28), 0 0 0 1px rgba(0, 5, 26, 0.04) !important;
		text-align: left;
		column-count: auto;
	}

	/* Geen los pijltje boven het paneel (Divi Pixel "dropdown arrow") */
	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li > ul.sub-menu::after,
	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li > ul.sub-menu::before {
		display: none !important;
	}

	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li:not(.mega-menu) > ul.sub-menu > li {
		display: block !important;
		float: none;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1;
	}

	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li ul.sub-menu li a {
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 11px 14px !important;
		border-radius: 8px;
		color: #3c3c3b !important;
		font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
		font-size: 11px !important;
		font-weight: 600 !important;
		letter-spacing: 1.5px !important;
		text-transform: uppercase;
		line-height: 1.2 !important;
		white-space: nowrap;
		opacity: 1 !important;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li ul.sub-menu li a:hover,
	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li ul.sub-menu li a:focus-visible,
	.et-l--header .et_pb_menu .et-menu-nav ul.et-menu li ul.sub-menu li.current-menu-item > a {
		background: rgba(0, 102, 51, 0.08) !important;
		color: #006633 !important;
		opacity: 1 !important;
	}

	/* Paneel dichter bij het menu-item (de menulinks hebben 31px verticale padding) */
	.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul > li > ul.sub-menu {
		top: calc(100% - 18px);
	}
}

/* ---------- 2. "Winkels"-ballon (Divi Pixel Balloon in het hoofdmenu) ----- */

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] > .tippy-arrow {
	display: none !important;
}

/* Ballon staat standaard ~50px onder de menutekst (offset + padding); trek hem omhoog. */
.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap {
	margin-top: -28px !important;
	padding: 0 20px 24px !important;
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap > .et_pb_row {
	width: auto !important;
	max-width: 960px !important;
	padding: 10px !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: 0 12px 40px -8px rgba(0, 5, 26, 0.28), 0 0 0 1px rgba(0, 5, 26, 0.04) !important;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 4px;
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap > .et_pb_row > .et_pb_column {
	width: 152px !important;
	max-width: 152px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 12px;
	transition: background-color 0.2s ease;
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap > .et_pb_row > .et_pb_column:hover,
.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap > .et_pb_row > .et_pb_column:focus-within {
	background: rgba(0, 102, 51, 0.06);
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap .et_pb_image {
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	text-align: center;
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap .et_pb_image > a,
.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap .et_pb_image_wrap {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 84px;
	padding: 10px 12px;
	border-radius: 12px;
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap .et_pb_image_wrap {
	padding: 0;
	min-height: 0;
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap .et_pb_image img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 122px !important;
	max-height: 56px !important;
	object-fit: contain;
	transition: transform 0.25s ease;
}

.et-l--header ul.et-menu > li .tippy-box[data-theme~="dipi-balloon-theme"] .dipi-balloon-wrap .et_pb_image > a:hover img {
	transform: scale(1.04);
}

/* ---------- 3. Hoofdmenu compacter op schermen ≤ 1680px --------------------- */

@media (min-width: 981px) and (max-width: 1680px) {
	.et-l--header .et_pb_menu_0_tb_header.et_pb_menu ul.et-menu > li > a {
		font-size: 14px !important;
		letter-spacing: 1px !important;
	}

	.et-l--header .et_pb_menu_0_tb_header.et_pb_menu ul.et-menu > li {
		padding-right: 12px;
	}
}

@media (min-width: 981px) and (max-width: 1540px) {
	.et-l--header .et_pb_menu_0_tb_header.et_pb_menu ul.et-menu > li > a {
		font-size: 13px !important;
		letter-spacing: 0.8px !important;
	}

	.et-l--header .et_pb_menu_0_tb_header.et_pb_menu ul.et-menu > li {
		padding-right: 10px;
	}
}

/* ---------- 4. Kleurwaas over de hero-video ---------------------------------- */

/* Eerste sectie van de pagina met een achtergrondvideo (de hero onder de transparante
   header): donkergroene waas, bovenaan wat sterker zodat het witte menu leesbaar blijft. */
.et_builder_inner_content > .et_pb_section_video:first-child > .et_pb_section_video_bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 28, 16, 0.62) 0%,
		rgba(0, 28, 16, 0.36) 180px,
		rgba(0, 28, 16, 0.22) 320px,
		rgba(0, 28, 16, 0.22) 100%
	);
}

/* ---------- 5. Social-iconen wit op de transparante header ------------------- */

.et-l--header .et_pb_sticky_module:not(.et_pb_sticky) .et_pb_social_media_follow li a.icon::before {
	color: #fff;
}

.et-l--header .et_pb_sticky_module:not(.et_pb_sticky) .et_pb_social_media_follow li a.icon:hover::before {
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- 6. Hover-pill ook voor menu-items met een dropdown ---------------- */

/* Divi Pixel ("filled background"-menustijl) geeft gewone items bij hover een groene pill,
   maar slaat items met een submenu over; de hovertekst is wit, dus "Nieuws & Events" werd
   onzichtbaar op de witte header. Zelfde pill voor die items. */
.filled_background .et-l--header .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a > span {
	border-radius: 5px 5px 15px;
	transition: background-color 0.1s ease-in-out;
}

.filled_background .et-l--header .et_pb_menu__menu > nav > ul > li.menu-item-has-children:hover > a > span,
.filled_background .et-l--header .et_pb_menu__menu > nav > ul > li.menu-item-has-children.et-hover > a > span {
	background-color: #006633;
}