/*
 * Vinlations taalknop.
 *
 * Alles hangt aan een paar CSS-variabelen, zodat thema's en de instelling "eigen kleuren" ze eenvoudig
 * kunnen overschrijven:
 *   --vl-bg, --vl-fg, --vl-border   knop
 *   --vl-accent, --vl-accent-fg      huidige taal (schakelaar)
 *   --vl-menu-bg, --vl-menu-fg       uitklapmenu
 *   --vl-menu-border                 rand van het uitklapmenu
 *   --vl-radius                      hoeken
 *   --vl-offset-x, --vl-offset-y     afstand van de zwevende knop tot de rand
 *
 * De selectors hebben bewust twee klassen: thema's stylen "button" en "ul" vaak stevig.
 */

.vl-switcher {
	--vl-bg: #fff;
	--vl-fg: #1f2328;
	--vl-border: rgb(31 35 40 / 0.16);
	--vl-accent: #1f2328;
	--vl-accent-fg: #fff;
	--vl-menu-bg: var(--vl-bg);
	--vl-menu-fg: var(--vl-fg);
	--vl-menu-border: rgb(31 35 40 / 0.1);
	--vl-hover: rgb(31 35 40 / 0.06);
	--vl-radius: 8px;
	--vl-menu-radius: 12px;
	--vl-pad-y: 0.45em;
	--vl-pad-x: 0.8em;
	--vl-gap: 0.5em;
	--vl-flag-h: 0.9375em;

	position: relative;
	display: inline-flex;
	vertical-align: middle;
	font-size: 0.875em;
	line-height: 1.25;
	color: var(--vl-fg);
	text-align: start;
}

/* ---------- Kleuren ---------- */

.vl-switcher.vl-theme-dark {
	--vl-bg: #1f2328;
	--vl-fg: #f6f8fa;
	--vl-border: rgb(255 255 255 / 0.16);
	--vl-accent: #f6f8fa;
	--vl-accent-fg: #1f2328;
	--vl-menu-border: rgb(255 255 255 / 0.14);
	--vl-hover: rgb(255 255 255 / 0.1);
}

/* Meekleuren met de site: geen eigen achtergrond, tekstkleur van de omgeving. */
.vl-switcher.vl-theme-transparent {
	--vl-bg: transparent;
	--vl-fg: currentColor;
	--vl-border: color-mix(in srgb, currentColor 18%, transparent);
	--vl-accent: color-mix(in srgb, currentColor 14%, transparent);
	--vl-accent-fg: currentColor;
	--vl-hover: color-mix(in srgb, currentColor 7%, transparent);
	--vl-menu-bg: #fff;
	--vl-menu-fg: #1f2328;
	--vl-menu-border: rgb(31 35 40 / 0.1);

	color: inherit;
}

.vl-switcher.vl-theme-transparent .vl-switcher__menu {
	--vl-hover: rgb(31 35 40 / 0.06);
}

/* ---------- Formaat en hoeken ---------- */

.vl-switcher.vl-size-small {
	--vl-pad-y: 0.3em;
	--vl-pad-x: 0.6em;
	--vl-gap: 0.4em;

	font-size: 0.8125em;
}

.vl-switcher.vl-size-large {
	--vl-pad-y: 0.6em;
	--vl-pad-x: 1em;
	--vl-gap: 0.6em;

	font-size: 1em;
}

.vl-switcher.vl-shape-square {
	--vl-radius: 0;
	--vl-menu-radius: 0;
}

.vl-switcher.vl-shape-pill {
	--vl-radius: 999px;
	--vl-menu-radius: 16px;
}

/* ---------- Basis (thema-CSS neutraliseren) ---------- */

.vl-switcher .vl-switcher__list,
.vl-switcher .vl-switcher__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vl-switcher .vl-switcher__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vl-switcher .vl-switcher__item::before,
.vl-switcher .vl-switcher__item::after {
	content: none;
}

.vl-switcher .vl-switcher__toggle,
.vl-switcher .vl-switcher__link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--vl-gap);
	min-height: 0;
	margin: 0;
	padding: var(--vl-pad-y) var(--vl-pad-x);
	font: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: inherit;
	background: none;
	border: 0;
	border-radius: var(--vl-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.vl-switcher .vl-switcher__toggle:focus-visible,
.vl-switcher .vl-switcher__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.vl-switcher .vl-switcher__name {
	display: inline;
}

/* ---------- Vlaggen ---------- */

/* De vlag heeft een vaste maat, zodat de afbeelding er altijd in past. */
.vl-switcher .vl-flag,
.vinlations-menu-item .vl-flag,
.vinlations-menu-current .vl-flag {
	display: inline-flex;
	flex: none;
	width: calc(var(--vl-flag-h, 0.9375em) * 4 / 3);
	height: var(--vl-flag-h, 0.9375em);
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
	line-height: 0;
}

.vl-switcher .vl-flag--square,
.vl-switcher .vl-flag--circle,
.vinlations-menu-item .vl-flag--square,
.vinlations-menu-item .vl-flag--circle,
.vinlations-menu-current .vl-flag--square,
.vinlations-menu-current .vl-flag--circle {
	width: 1.0625em;
	height: 1.0625em;
}

/*
 * Thema's en page builders geven alle afbeeldingen een maat (bijv. Elementor: ".elementor img { height: auto;
 * max-width: 100% }"). Daardoor kromp de vlag tot 0 pixels; de maat van de vlag gaat daarom altijd voor.
 */
.vl-flag img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.vl-switcher .vl-flag--circle,
.vinlations-menu-item .vl-flag--circle,
.vinlations-menu-current .vl-flag--circle {
	border-radius: 50%;
}

/* Taalknop als menu-item van het thema. */
.vinlations-menu-item .vl-flag,
.vinlations-menu-current .vl-flag {
	margin-inline-end: 0.45em;
	vertical-align: -0.15em;
}

.vinlations-menu-item .vl-flag + .vl-switcher__name,
.vinlations-menu-current .vl-flag + .vl-switcher__name {
	vertical-align: baseline;
}

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

.vl-switcher--dropdown .vl-switcher__toggle {
	color: var(--vl-fg);
	background: var(--vl-bg);
	border: 1px solid var(--vl-border);
}

.vl-switcher--dropdown .vl-switcher__toggle:hover {
	border-color: color-mix(in srgb, var(--vl-fg) 34%, transparent);
}

.vl-switcher.vl-theme-transparent .vl-switcher__toggle:hover {
	background: var(--vl-hover);
}

.vl-switcher__chevron {
	flex: none;
	width: 0.7em;
	height: 0.7em;
	margin-inline-start: -0.1em;
	opacity: 0.6;
	transition: transform 0.15s ease;
}

.vl-switcher.is-open .vl-switcher__chevron {
	transform: rotate(180deg);
}

.vl-switcher--dropdown .vl-switcher__menu {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	z-index: 100000;
	box-sizing: border-box;
	min-width: max(100%, 11em);
	max-height: min(70vh, 26em);
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--vl-menu-fg);
	background: var(--vl-menu-bg);
	border: 1px solid var(--vl-menu-border);
	border-radius: var(--vl-menu-radius);
	box-shadow: 0 16px 36px -8px rgb(15 23 42 / 0.2), 0 2px 6px rgb(15 23 42 / 0.06);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

/* De hoeken van de regels lopen gelijk met die van het menu (min de binnenruimte). */
.vl-switcher--dropdown .vl-switcher__menu .vl-switcher__link {
	gap: 0.65em;
	padding: 0.55em 0.75em;
	border-radius: max(0px, calc(var(--vl-menu-radius) - 6px));
}

.vl-switcher--dropdown .vl-switcher__menu .vl-switcher__item + .vl-switcher__item {
	margin-block-start: 2px;
}

.vl-switcher--dropdown .vl-switcher__link:hover,
.vl-switcher--dropdown .vl-switcher__link:focus-visible {
	background: var(--vl-hover);
}

.vl-switcher--dropdown .is-current > .vl-switcher__link {
	font-weight: 600;
}

/* Open: na een klik (JavaScript), bij hover (instelling) en zonder JavaScript via het toetsenbord. */
.vl-switcher--dropdown.is-open .vl-switcher__menu,
.vl-switcher--dropdown:not(.is-ready):focus-within .vl-switcher__menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

@media (hover: hover) {
	/*
	 * Brug over de ruimte tussen knop en menu, zodat het menu open blijft op weg ernaartoe. Hij hangt aan de knop
	 * en niet aan het menu: in het menu zou hij een schuifbalk geven als het menu naar boven openklapt.
	 */
	.vl-switcher--dropdown.vl-open-hover:hover::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		height: 10px;
	}

	.vl-switcher--dropdown.vl-open-hover.is-up:hover::after {
		inset-block-start: auto;
		inset-block-end: 100%;
	}

	.vl-switcher--dropdown.vl-open-hover:hover .vl-switcher__menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.vl-switcher--dropdown.vl-open-hover:hover .vl-switcher__chevron {
		transform: rotate(180deg);
	}
}

/* Openklappen naar boven en/of uitlijnen aan de rechterkant (zwevend, of als er geen ruimte is). */
.vl-switcher.is-up .vl-switcher__menu {
	inset-block-start: auto;
	inset-block-end: calc(100% + 8px);
	transform: translateY(4px);
}

.vl-switcher.is-up.is-open .vl-switcher__menu {
	transform: none;
}

.vl-switcher.is-up .vl-switcher__chevron {
	transform: rotate(180deg);
}

.vl-switcher.is-up.is-open .vl-switcher__chevron {
	transform: none;
}

.vl-switcher.is-end .vl-switcher__menu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* ---------- Naast elkaar ---------- */

.vl-switcher--inline .vl-switcher__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15em;
}

.vl-switcher--inline .vl-switcher__link {
	color: inherit;
}

.vl-switcher--inline .vl-switcher__link:hover {
	background: var(--vl-hover);
}

.vl-switcher--inline .is-current > .vl-switcher__link {
	font-weight: 600;
	background: var(--vl-hover);
}

.vl-switcher.vl-switcher--inline.vl-theme-light,
.vl-switcher.vl-switcher--inline.vl-theme-dark {
	padding: 3px;
	background: var(--vl-bg);
	border: 1px solid var(--vl-border);
	border-radius: calc(var(--vl-radius) + 3px);
}

.vl-switcher.vl-shape-pill.vl-switcher--inline,
.vl-switcher.vl-shape-pill.vl-switcher--segmented {
	border-radius: 999px;
}

/* ---------- Schakelaar ---------- */

.vl-switcher--segmented .vl-switcher__list {
	display: inline-flex;
	align-items: stretch;
	gap: 2px;
	padding: 3px;
	background: var(--vl-bg);
	border: 1px solid var(--vl-border);
	border-radius: calc(var(--vl-radius) + 3px);
}

.vl-switcher.vl-shape-pill.vl-switcher--segmented .vl-switcher__list {
	border-radius: 999px;
}

.vl-switcher--segmented .vl-switcher__link {
	justify-content: center;
}

.vl-switcher--segmented .vl-switcher__link:hover {
	background: var(--vl-hover);
}

.vl-switcher--segmented .is-current > .vl-switcher__link {
	font-weight: 600;
	color: var(--vl-accent-fg);
	background: var(--vl-accent);
	box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
}

/* ---------- Private talen (alleen zichtbaar voor redacteuren) ---------- */

.vl-switcher .is-private > .vl-switcher__link {
	opacity: 0.72;
}

.vl-switcher .is-private > .vl-switcher__link .vl-switcher__name {
	text-decoration: underline dashed;
	text-underline-offset: 0.2em;
}

/* ---------- Zwevend ---------- */

.vl-switcher.vl-switcher--floating {
	position: fixed;
	z-index: 99999;
}

.vl-switcher--floating.vl-pos-bottom-right {
	inset-block-end: var(--vl-offset-y, 20px);
	inset-inline-end: var(--vl-offset-x, 20px);
}

.vl-switcher--floating.vl-pos-bottom-left {
	inset-block-end: var(--vl-offset-y, 20px);
	inset-inline-start: var(--vl-offset-x, 20px);
}

.vl-switcher--floating.vl-pos-top-right {
	inset-block-start: var(--vl-offset-y, 20px);
	inset-inline-end: var(--vl-offset-x, 20px);
}

.vl-switcher--floating.vl-pos-top-left {
	inset-block-start: var(--vl-offset-y, 20px);
	inset-inline-start: var(--vl-offset-x, 20px);
}

.vl-switcher--floating .vl-switcher__toggle,
.vl-switcher--floating.vl-switcher--inline,
.vl-switcher--floating .vl-switcher__list {
	box-shadow: 0 6px 20px rgb(15 23 42 / 0.16), 0 1px 3px rgb(15 23 42 / 0.08);
}

.vl-switcher--floating.vl-switcher--inline .vl-switcher__list {
	box-shadow: none;
}

/* Admin-balk: zwevende knop bovenin schuift mee omlaag. */
.admin-bar .vl-switcher--floating.vl-pos-top-right,
.admin-bar .vl-switcher--floating.vl-pos-top-left {
	inset-block-start: calc(var(--vl-offset-y, 20px) + 32px);
}

@media (max-width: 782px) {
	.admin-bar .vl-switcher--floating.vl-pos-top-right,
	.admin-bar .vl-switcher--floating.vl-pos-top-left {
		inset-block-start: calc(var(--vl-offset-y, 20px) + 46px);
	}

	.vl-switcher.vl-hide-mobile {
		display: none;
	}
}

@media (min-width: 783px) {
	.vl-switcher.vl-hide-desktop {
		display: none;
	}
}

@media print {
	.vl-switcher--floating {
		display: none;
	}
}

/* ---------- Navigatieblok en blok-editor ---------- */

.vl-nav-item {
	display: flex;
	align-items: center;
}

.wp-block-vinlations-language-switcher.has-text-align-center,
.wp-block-vinlations-language-switcher.aligncenter {
	display: flex;
	justify-content: center;
}

.vl-block-empty {
	margin: 0;
	padding: 0.75em 1em;
	font-size: 13px;
	color: #50575e;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
}

/* ---------- AI-melding bij vertaalde teksten ---------- */

.vl-ai-disclaimer {
	display: block;
	margin-block-start: 0.5em;
	font-size: 0.8em;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.vl-switcher .vl-switcher__menu,
	.vl-switcher .vl-switcher__chevron,
	.vl-switcher .vl-switcher__toggle,
	.vl-switcher .vl-switcher__link {
		transition: none;
	}
}

@media (forced-colors: active) {
	.vl-switcher--segmented .is-current > .vl-switcher__link {
		outline: 2px solid CanvasText;
	}
}