/* ==========================================================================
   Florazon – Taalswitcher in header (WPML + Divi Theme Builder)
   Compacte dropdown: ronde vlag + taalcode; andere talen klappen uit.
   ========================================================================== */

.fz-lang,
.fz-lang * {
	box-sizing: border-box;
}

/* --- Basis: toggle -------------------------------------------------------- */

.fz-lang__wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.fz-lang__toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	height: 32px;
	margin: 0 !important;
	padding: 0 2px !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none;
	cursor: pointer;
	color: inherit !important;
	font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	line-height: 1 !important;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.25s ease;
}

.fz-lang__toggle:hover,
.fz-lang__toggle:focus-visible {
	opacity: 0.8;
}

.fz-lang__toggle:focus {
	outline: none;
}

.fz-lang__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

.fz-lang__code {
	display: inline-block;
	transform: translateY(0.5px);
}

.fz-lang__caret {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: -1px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s ease;
	opacity: 0.75;
}

.fz-lang.is-open .fz-lang__caret {
	transform: translateY(1px) rotate(225deg);
}

/* --- Vlag ------------------------------------------------------------------- */

.fz-lang__flag {
	display: block;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	background: #e5e5e5;
	line-height: 0;
}

.fz-lang__flag svg,
.fz-lang__flag img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.fz-lang__flag-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 8px;
	font-weight: 700;
	color: #3c3c3b;
}

/* --- Uitklapmenu ------------------------------------------------------------ */

.fz-lang ul.fz-lang__menu {
	position: absolute;
	top: 100%;
	right: -6px;
	z-index: 40;
	min-width: 176px;
	margin: 0 !important;
	padding: 6px !important;
	padding-top: 6px !important;
	margin-top: 8px !important;
	list-style: none !important;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px -8px rgba(0, 5, 26, 0.28), 0 0 0 1px rgba(0, 5, 26, 0.04);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* onzichtbare "brug" zodat de hover niet wegvalt tussen knop en menu */
.fz-lang ul.fz-lang__menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

.fz-lang.is-open ul.fz-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

@media (hover: hover) and (pointer: fine) {
	.fz-lang__wrap:hover ul.fz-lang__menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	.fz-lang__wrap:hover .fz-lang__caret {
		transform: translateY(1px) rotate(225deg);
	}
}

.fz-lang ul.fz-lang__menu li.fz-lang__item {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static;
	line-height: 1;
}

.fz-lang ul.fz-lang__menu a.fz-lang__link {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 9px 12px !important;
	border-radius: 8px;
	color: #3c3c3b !important;
	font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fz-lang ul.fz-lang__menu a.fz-lang__link:hover,
.fz-lang ul.fz-lang__menu a.fz-lang__link:focus-visible {
	background: rgba(0, 102, 51, 0.08);
	color: #006633 !important;
	outline: none;
}

.fz-lang__name {
	display: inline-block;
	transform: translateY(0.5px);
}

/* ==========================================================================
   Desktop: als eerste item in de Social Media Follow-module van de header
   ========================================================================== */

.et_pb_social_media_follow li.fz-lang--desktop {
	display: inline-flex !important;
	align-items: center;
	vertical-align: top;
	height: 32px;
	margin: 0 20px 8px 0 !important;
	padding: 0 !important;
	position: relative;
	color: #3c3c3b;
	transition: color 0.3s ease;
}

/* Transparante header bovenaan (sticky header die nog niet is vastgezet): witte tekst,
   zodra Divi de header vastzet (.et_pb_sticky) wordt de achtergrond wit en de tekst donker. */
.et-l--header .et_pb_sticky_module:not(.et_pb_sticky) .et_pb_social_media_follow li.fz-lang--desktop {
	color: #fff;
}

/* Kolom met de switcher mag meegroeien; de menukolom vult de rest van de rij. */
.et-l--header .et_pb_row--with-menu .et_pb_column.fz-lang-col {
	max-width: none !important;
	width: auto !important;
	flex: 0 0 auto !important;
}

.et-l--header .et_pb_row--with-menu .et_pb_column:has(> .et_pb_social_media_follow > .fz-lang--desktop) {
	max-width: none !important;
	width: auto !important;
	flex: 0 0 auto !important;
}

.et-l--header .et_pb_row--with-menu .et_pb_column--with-menu {
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

/* ==========================================================================
   Mobiel/tablet (≤ 980px): naast het hamburger-icoon van de menumodule
   ========================================================================== */

.fz-lang--mobile {
	display: none;
}

@media (max-width: 980px) {
	.et-l--header .et_pb_menu__wrap > .fz-lang--mobile {
		display: flex;
		align-items: center;
		margin: 0 12px 0 0;
		color: #00051a;
	}

	.fz-lang--mobile .fz-lang__toggle {
		height: 40px;
	}

	.fz-lang--mobile ul.fz-lang__menu {
		right: 0;
	}
}

/* ==========================================================================
   Losse variant via shortcode [florazon_taalswitcher]
   ========================================================================== */

.fz-lang--standalone {
	display: inline-flex;
	align-items: center;
	color: #3c3c3b;
}

/* ==========================================================================
   Toegankelijkheid
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fz-lang *,
	.fz-lang ul.fz-lang__menu {
		transition: none !important;
	}
}