/* ==========================================================================
   Language switcher (WPML) — main navigation
   Markup: functions/wp-language-switcher.php, placed in components/nav/nav.php
   ========================================================================== */

.cw-lang-switch ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Let the dropdown overflow the fixed header while it is open */
.cw-header-nav.is-active-lang-menu,
.cw-header-nav.is-active-lang-menu .cw-header-nav__main {
	overflow: visible;
}

.cw-lang-switch__flag {
	display: block;
	flex-shrink: 0;
	width: 21px;
	height: 14px;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 2px;
	/* hairline so white flag parts don't blend into the white header */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

/* --- Desktop dropdown ---------------------------------------------------- */

.cw-lang-switch--desktop {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: var(--nav-shop-margin);
	margin-right: 1.25rem;
}

.cw-lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .25rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	letter-spacing: .04em;
	line-height: 1;
	color: var(--color-black);
	cursor: pointer;
}

.cw-lang-switch__toggle:focus-visible {
	outline: 1px solid var(--color-black);
	outline-offset: 2px;
}

.cw-lang-switch__chevron {
	transition: transform .2s ease-in-out;
}

.cw-lang-switch.is-open .cw-lang-switch__chevron {
	transform: rotate(180deg);
}

.cw-lang-switch__dropdown {
	position: absolute;
	top: calc(100% + .75rem);
	right: -1rem;
	min-width: 170px;
	padding: .5rem 0 !important;
	background: var(--color-white);
	border: 1px solid var(--border-color);
	box-shadow: var(--box-shadow);
	z-index: 1300;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease-in-out, transform .15s ease-in-out, visibility 0s linear .15s;
}

/* invisible bridge so the dropdown stays open while moving the mouse down */
.cw-lang-switch__dropdown:before {
	content: "";
	position: absolute;
	top: -.85rem;
	left: 0;
	right: 0;
	height: .85rem;
}

.cw-lang-switch.is-open .cw-lang-switch__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.cw-header-nav__shop .cw-lang-switch__dropdown a {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	padding: .6rem 1.25rem;
	font-size: 15px;
	text-decoration: none;
	color: var(--color-black);
	white-space: nowrap;
	transition: background-color .15s ease-in-out;
}

.cw-lang-switch__dropdown a:hover,
.cw-lang-switch__dropdown a:focus-visible {
	background-color: var(--color-grey-megamenu);
	outline: none;
}

.cw-lang-switch__code {
	min-width: 1.6em;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--color-grey-service-text);
}

.cw-lang-switch__dropdown a.is-current {
	font-family: var(--heading-font);
}

.cw-lang-switch__dropdown a.is-current .cw-lang-switch__code {
	color: var(--color-black);
}

/* Keep the icon bar on one line; the translated menus (FR) are wider than Dutch */
@media only screen and (min-width: 1024px) {
	.cw-header-nav__shop {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	:root {
		--nav-item-padding: 2.7rem 1rem;
	}
}

/* --- Mobile inline list (inside the slide-in menu) ------------------------- */

.cw-lang-switch--mobile {
	display: none;
}

@media only screen and (max-width: 1023px) {
	/* Mobile: the switcher lives in the menu panel, not in the icon bar */
	.cw-lang-switch--desktop {
		display: none;
	}

	.cw-lang-switch--mobile {
		display: block;
		padding: 0 1rem 2.5rem;
	}

	.cw-lang-switch__inline {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
	}

	ul.cw-lang-switch__inline a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 3.5rem;
		height: 2.75rem;
		padding: 0 .9rem;
		border: 1px solid var(--color-grey-border);
		background-color: var(--color-white);
		font-size: 15px;
		letter-spacing: .06em;
		text-align: center;
		text-decoration: none;
		color: var(--color-black);
	}

	ul.cw-lang-switch__inline a.is-current {
		border-color: var(--color-black);
		box-shadow: inset 0 0 0 1px var(--color-black);
	}

	ul.cw-lang-switch__inline .cw-lang-switch__flag {
		width: 27px;
		height: 18px;
	}
}