/*
 * Deepser Polylang Language Switcher.
 * No external requests: colors are custom properties, the dropdown arrow is
 * an inline data-URI, and everything degrades gracefully without JS.
 */

.dls-switcher {
	--dls-gap: 0.35rem;
	--dls-radius: 999px;
	--dls-bg: #f1f2f4;
	--dls-bg-hover: #e2e4e8;
	/* Falls back to Bricks' (or any theme's) own --primary custom property
	   automatically when one is defined in scope; the hex is only used when
	   nothing upstream defines --primary at all. */
	--dls-bg-current: var(--primary, #1d4ed8);
	--dls-fg: #1f2937;
	--dls-fg-current: #ffffff;
	--dls-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
	font-size: 0.875rem;
	line-height: 1.2;
}

@media (prefers-color-scheme: dark) {
	.dls-switcher {
		--dls-bg: #262a31;
		--dls-bg-hover: #33383f;
		--dls-bg-current: var(--primary, #3b82f6);
		--dls-fg: #e5e7eb;
		--dls-fg-current: #0b0f14;
		--dls-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
	}
}

.dls-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dls-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dls-switcher__item {
	margin: 0;
}

/* The class is doubled (raising specificity from 0,1,0 to 0,2,0) and
   `display` carries !important: the current-language item renders as a
   <span> (see Renderer::renderLanguageLink()), and confirmed by hand, a
   theme/page-builder-wide reset like `span.some-scope-class { display:
   inline !important }` (type + class, 0,1,1) otherwise beats a plain single
   class here even with matching !important, since !important ties are still
   broken by specificity. Once display is overridden, flex layout doesn't
   apply at all — not fixable by strengthening any *other* property. */
.dls-switcher__link.dls-switcher__link {
	display: inline-flex !important;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border-radius: var(--dls-radius);
	background: var(--dls-bg);
	color: var(--dls-fg);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

a.dls-switcher__link:hover {
	background: var(--dls-bg-hover);
	transform: translateY(-1px);
}

a.dls-switcher__link:focus-visible {
	outline: 2px solid var(--dls-bg-current);
	outline-offset: 2px;
}

.dls-switcher__item.is-current .dls-switcher__link {
	background: var(--dls-bg-current);
	color: var(--dls-fg-current);
	cursor: default;
}

.dls-switcher--dropdown .dls-switcher__select {
	appearance: none;
	-webkit-appearance: none;
	padding-block: 0.35rem;
	padding-inline: 0.75rem 2rem;
	border-radius: 0.5rem;
	border: 1px solid var(--dls-bg-hover);
	background-color: var(--dls-bg);
	color: var(--dls-fg);
	font: inherit;
	font-weight: 600;
	background-image: var(--dls-arrow);
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 0.8rem;
	cursor: pointer;
}

[dir="rtl"] .dls-switcher--dropdown .dls-switcher__select {
	background-position: left 0.6rem center;
	padding-inline: 2rem 0.75rem;
}

.dls-switcher--dropdown .dls-switcher__select:focus-visible {
	outline: 2px solid var(--dls-bg-current);
	outline-offset: 2px;
}

.dls-switcher--dropdown .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dls-switcher__link {
		transition: none;
	}
}

/* --- "menu" style: toggle + hover/click panel -------------------------- */

.dls-switcher--menu {
	--dls-menu-gap: 0.5rem;
	--dls-icon-size: 18px;
	position: relative;
	display: inline-block;
	/* Overrides .dls-switcher's own font-size/line-height (set above, on this
	   same element) back to whatever the surrounding theme/builder context
	   uses — the toggle's text and the panel below both inherit from here,
	   so the "menu" style never imposes its own opinionated type size. */
	font-size: inherit;
	line-height: inherit;
}

.dls-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.5rem;
	background: transparent;
	border: none;
	/* Set --dls-toggle-color on .dls-switcher--menu (or an ancestor) to set
	   the label's color. The icon has its own, independent --dls-icon-color
	   (see .dls-switcher__icon below) which falls back to inheriting this
	   same value when unset, so leaving it unset keeps icon+label matching. */
	color: var(--dls-toggle-color, inherit);
	/* Family/size/weight/style/line-height all inherit from .dls-switcher--menu
	   above (i.e. from the surrounding page) — deliberately no font-weight
	   override here, so the site's own typography comes through untouched. */
	font: inherit;
	cursor: pointer;
	border-radius: 0.375rem;
	transition: background-color 0.15s ease;
	/* It's a <span role="button">, not a real <button> (see Renderer::renderMenu()
	   for why) — prevent it from being selected as text on a double-click/drag. */
	user-select: none;
	-webkit-user-select: none;
}

.dls-switcher__toggle--icon-only {
	padding: 0.4rem;
}

.dls-switcher__toggle:hover,
.dls-switcher__toggle:focus-visible {
	background: var(--dls-bg-hover);
}

.dls-switcher__toggle:focus-visible {
	outline: 2px solid var(--dls-bg-current);
	outline-offset: 2px;
}

/* Class doubled (0,1,0 -> 0,2,0) and `color` marked !important: confirmed by
   observation that a broad `svg { color: ... }`-shaped reset (same pattern
   as the span/display issues elsewhere in this file) otherwise silently
   wins over a plain, non-important class rule here regardless of the
   --dls-icon-color custom property resolving correctly. */
.dls-switcher__icon.dls-switcher__icon {
	flex-shrink: 0;
	/* Set --dls-icon-size on .dls-switcher--menu (or an ancestor) to resize it;
	   the SVG's viewBox keeps it crisp at any size. */
	width: var(--dls-icon-size, 18px);
	height: var(--dls-icon-size, 18px);
	/* Independent from the label's --dls-toggle-color: defaults to inheriting
	   it (so both track together out of the box, unchanged from before), but
	   can be overridden on its own via --dls-icon-color without touching the
	   label's color. */
	color: var(--dls-icon-color, inherit) !important;
}

/* Opt-in: add this class (e.g. via Bricks' "CSS Classes" field, or any
   `class` attribute) alongside .dls-switcher--menu to make the toggle fill
   100% of its container's width instead of sizing to its own content —
   useful when the element itself has been given an explicit width (e.g. by
   a page builder's layout controls) and that width should be visible/
   clickable, not just empty space next to a content-sized toggle. */
.dls-switcher--menu.dls-switcher--full-width {
	display: flex;
	width: 100%;
}

.dls-switcher--full-width .dls-switcher__toggle {
	flex: 1 1 auto;
}

.dls-switcher__panel {
	display: none;
	position: absolute;
	top: calc(100% + var(--dls-menu-gap));
	inset-inline-end: 0;
	z-index: 100;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	min-width: 200px;
	max-width: min(320px, calc(100vw - 2rem));
	max-height: 70vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--dls-panel-bg, #ffffff);
	color: var(--dls-fg);
	border-radius: 0.75rem;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

/*
 * The visual gap above (--dls-menu-gap) between the toggle and the panel
 * would otherwise be genuinely empty space belonging to neither element:
 * moving the mouse straight down from the toggle into the panel crosses it,
 * the browser stops matching `.dls-switcher--menu:hover` for that instant,
 * and the panel closes before the cursor ever reaches it. This pseudo-element
 * is itself a (invisible) descendant of .dls-switcher--menu that exactly
 * covers that dead zone, so the hover chain never breaks while crossing it.
 */
.dls-switcher--menu::after {
	content: '';
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	width: min(320px, calc(100vw - 2rem));
	height: var(--dls-menu-gap);
}

@media (prefers-color-scheme: dark) {
	.dls-switcher__panel {
		--dls-panel-bg: #1f2328;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	}
}

/* Opened by JS (tap, or click on any pointer) or by keyboard focus landing
   anywhere inside the widget — the latter also works with JavaScript
   disabled, so Tab-key navigation is never blocked on assistive tech. */
.dls-switcher--menu.is-open .dls-switcher__panel,
.dls-switcher--menu:focus-within .dls-switcher__panel {
	display: block;
}

/* Opened on hover only for mouse/trackpad users; touchscreens (which report
   no real hover support) rely on the JS tap-to-toggle behaviour instead. */
@media (hover: hover) and (pointer: fine) {
	.dls-switcher--menu:hover .dls-switcher__panel {
		display: block;
	}
}

/* Same defensive doubled-class + !important treatment as
   .dls-switcher__panel-link.dls-switcher__panel-link below: a common
   `.menu li { display: inline-block }`-style horizontal-nav reset would
   make the row itself content-width, and a fixed child can't compensate for
   a broken parent. */
.dls-switcher__panel-item.dls-switcher__panel-item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Class doubled (0,1,0 -> 0,2,0) + !important on `display`, same reasoning
   as .dls-switcher__link.dls-switcher__link above: confirmed by hand that a
   `span.some-scope-class { display: inline !important }`-shaped reset
   (targeting the current-language <span> — see
   Renderer::renderLanguageLink() — but not the other rows' <a>) beats a
   plain single-class !important rule here on specificity, and once an
   element is inline, `width` is simply not applied by the browser at all —
   no amount of strengthening `width` alone fixes that. */
.dls-switcher__panel-link.dls-switcher__panel-link {
	display: block !important;
	/* Also !important: a `display: block` that wins doesn't help if a
	   competing external rule still separately forces its own `width`
	   (e.g. `width: auto !important`) — `!important` vs `!important` is
	   still decided by specificity, but a non-important `width: 100%` here
	   would lose outright to ANY `!important` width from elsewhere. */
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0.55rem 0.75rem;
	border-radius: 0.5rem;
	color: var(--dls-fg);
	text-decoration: none;
	font-weight: 500;
}

a.dls-switcher__panel-link:hover {
	background: var(--dls-bg-hover);
}

a.dls-switcher__panel-link:focus-visible {
	outline: 2px solid var(--dls-bg-current);
	outline-offset: -2px;
}

.dls-switcher__panel-item.is-current .dls-switcher__panel-link {
	background: var(--dls-bg-current);
	color: var(--dls-fg-current);
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.dls-switcher__toggle {
		transition: none;
	}
}