/* EHM Multilang — language switcher styles.
 * Every style inherits the text color of where it is placed (currentColor),
 * so it works on light and dark headers. Override with the custom properties:
 *   --ehm-sw-size     control height (default 2.25em)
 *   --ehm-sw-accent   highlight of the current language
 *   --ehm-sw-on-accent text on the highlight
 *   --ehm-sw-radius   corner radius
 *   --ehm-sw-menu-bg / --ehm-sw-menu-fg  dropdown panel colors
 */
.ehm-sw{
	--_fg:currentColor;
	--_soft:color-mix(in srgb,currentColor 14%,transparent);
	--_line:color-mix(in srgb,currentColor 22%,transparent);
	--_size:var(--ehm-sw-size,2.25em);
	--_radius:var(--ehm-sw-radius,999px);
	--_flag:1.15em;
	display:inline-flex;align-items:center;font-size:inherit;line-height:1;
	margin:0;padding:0;list-style:none;
}
.ehm-sw *,.ehm-sw *::before,.ehm-sw *::after{box-sizing:border-box}
.ehm-sw ul,.ehm-sw li{margin:0;padding:0;list-style:none}
.ehm-sw a{color:inherit;text-decoration:none}
.ehm-sw a:focus-visible,.ehm-sw summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ehm-sw__flag{
	display:inline-block;flex:0 0 auto;width:var(--_flag);height:var(--_flag);border-radius:50%;overflow:hidden;
	box-shadow:0 0 0 1px color-mix(in srgb,currentColor 18%,transparent);
}
.ehm-sw__flag img{display:block;width:100%;height:100%;object-fit:cover;margin:0;max-width:none;border-radius:0}
.ehm-sw__code{font-weight:600;letter-spacing:.04em}
.ehm-sw .screen-reader-text,.ehm-sw__sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 1. Toggle ---------------------------------------------------------------- */
.ehm-sw--toggle{
	position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;
	height:var(--_size);padding:3px;border-radius:var(--_radius);
	box-shadow:inset 0 0 0 1px var(--_line);isolation:isolate;
}
.ehm-sw--toggle .ehm-sw__opt{
	position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.45em;
	height:100%;padding:0 .9em;border-radius:var(--_radius);
	opacity:.62;transition:opacity .2s,color .25s;white-space:nowrap;
}
.ehm-sw--toggle .ehm-sw__opt:hover{opacity:1}
.ehm-sw--toggle .ehm-sw__opt[aria-current]{opacity:1;color:var(--ehm-sw-on-accent,inherit)}
.ehm-sw--toggle .ehm-sw__thumb{
	position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
	width:calc((100% - 6px) / var(--n,2));
	border-radius:var(--_radius);background:var(--ehm-sw-accent,var(--_soft));
	transform:translateX(calc(100% * var(--i,0)));
	transition:transform .38s cubic-bezier(.3,1.35,.5,1);
}
.ehm-sw--toggle.is-switching .ehm-sw__opt[aria-current]{opacity:.62;color:inherit}
.ehm-sw--toggle .ehm-sw__opt.is-target{opacity:1;color:var(--ehm-sw-on-accent,inherit)}

/* 2. Menu (dropdown) ------------------------------------------------------- */
.ehm-sw--menu{position:relative}
.ehm-sw--menu>details>summary{
	display:inline-flex;align-items:center;gap:.45em;height:var(--_size);padding:0 .75em 0 .6em;
	border-radius:var(--_radius);box-shadow:inset 0 0 0 1px var(--_line);
	cursor:pointer;list-style:none;user-select:none;transition:background-color .2s;
}
.ehm-sw--menu>details>summary::-webkit-details-marker{display:none}
.ehm-sw--menu>details>summary:hover,.ehm-sw--menu>details[open]>summary{background:var(--_soft)}
.ehm-sw__chev{width:.7em;height:.7em;flex:0 0 auto;opacity:.7;transition:transform .2s}
.ehm-sw--menu>details[open] .ehm-sw__chev{transform:rotate(180deg)}
.ehm-sw__globe{width:1.15em;height:1.15em;flex:0 0 auto}
.ehm-sw__panel{
	position:absolute;z-index:9999;top:calc(100% + 6px);min-width:11.5em;padding:5px;
	border-radius:12px;background:var(--ehm-sw-menu-bg,#fff);color:var(--ehm-sw-menu-fg,#1d2327);
	box-shadow:0 1px 2px rgba(15,23,42,.08),0 10px 28px -6px rgba(15,23,42,.22);
	transform-origin:top;animation:ehm-sw-in .16s ease-out;
}
.ehm-sw--menu[data-align="start"] .ehm-sw__panel{left:0}
.ehm-sw--menu:not([data-align="start"]) .ehm-sw__panel{right:0}
@keyframes ehm-sw-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.ehm-sw__panel a{
	display:grid;grid-template-columns:auto 1fr auto 1em;align-items:center;gap:.6em;
	padding:.62em .7em;border-radius:8px;line-height:1.2;color:inherit;
}
.ehm-sw__panel a:hover,.ehm-sw__panel a:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent);outline:none}
.ehm-sw__panel .ehm-sw__name{font-weight:500}
.ehm-sw__panel .ehm-sw__code{font-size:.78em;opacity:.55;font-weight:500}
.ehm-sw__panel a[aria-current] .ehm-sw__code{opacity:1}
.ehm-sw__check{width:1em;height:1em;color:var(--ehm-sw-check,#2271b1)}
.ehm-sw__panel a:not([aria-current]) .ehm-sw__check{visibility:hidden}
.ehm-sw__panel .ehm-sw__flag{box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* 3. Links ----------------------------------------------------------------- */
.ehm-sw--links{gap:.15em;flex-wrap:wrap}
.ehm-sw--links li{display:inline-flex;align-items:center}
.ehm-sw--links li+li::before{content:"/";opacity:.35;margin:0 .45em;font-weight:300}
.ehm-sw--links a{display:inline-flex;align-items:center;gap:.4em;padding:.25em 0;opacity:.6;transition:opacity .2s}
.ehm-sw--links a:hover{opacity:1;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.ehm-sw--links a[aria-current]{opacity:1;font-weight:600}

/* 4. Flags ----------------------------------------------------------------- */
.ehm-sw--flags{gap:.55em}
.ehm-sw--flags{--_flag:var(--ehm-sw-flag,1.75em)}
.ehm-sw--flags a{display:inline-flex;border-radius:50%;transition:transform .2s}
.ehm-sw--flags a:not([aria-current]){filter:saturate(.55);opacity:.8}
.ehm-sw--flags a:hover{filter:none;opacity:1;transform:translateY(-1px)}
.ehm-sw--flags a[aria-current] .ehm-sw__flag{box-shadow:0 0 0 2px var(--ehm-sw-ring-gap,#fff),0 0 0 3.5px var(--ehm-sw-accent,currentColor)}

/* Vertical stacking for links / flags */
.ehm-sw.is-vertical{flex-direction:column;align-items:flex-start}
.ehm-sw--links.is-vertical li+li::before{display:none}

@media (prefers-reduced-motion:reduce){
	.ehm-sw *{transition:none!important;animation:none!important}
}