/**
 * Solid Languages - Language Switcher Styles (v1.4.0).
 *
 * Placement: 4 floating corners, 2 bars, or none. Each auto-injected
 * wrapper gets one placement class; on-page (shortcode/widget) instances
 * skip the wrapper and render inline.
 *
 * Style: custom dropdown (default), native select, flags, inline.
 */

/* =========================================================
   Base container
   ========================================================= */

.sl-switcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	font-family: inherit;
	vertical-align: middle;
	position: relative;
}

/* =========================================================
   Auto-injected placement wrappers
   ========================================================= */

.sl-auto-switcher {
	font-size: 14px;
	line-height: 1.4;
	color: #1f2937;
}

/* Floating (fixed-position pill in a corner) */
.sl-auto-switcher--float {
	position: fixed;
	z-index: var( --sl-switcher-z, 9999 );
}

.sl-auto-switcher--top-right    { top:    var( --sl-switcher-offset, 20px ); right: var( --sl-switcher-offset, 20px ); }
.sl-auto-switcher--top-left     { top:    var( --sl-switcher-offset, 20px ); left:  var( --sl-switcher-offset, 20px ); }
.sl-auto-switcher--bottom-right { bottom: var( --sl-switcher-offset, 20px ); right: var( --sl-switcher-offset, 20px ); }
.sl-auto-switcher--bottom-left  { bottom: var( --sl-switcher-offset, 20px ); left:  var( --sl-switcher-offset, 20px ); }

/* Bottom placements open the dropdown upwards so it doesn't clip the edge. */
.sl-auto-switcher--bottom-right .sl-switcher-menu,
.sl-auto-switcher--bottom-left  .sl-switcher-menu {
	bottom: calc( 100% + 6px );
	top: auto;
}

/* Thin transparent bar (replaces the old heavy grey strip). */
.sl-auto-switcher--bar {
	display: flex;
	justify-content: flex-end;
	padding: 6px 20px;
	background: transparent;
	border: none;
	position: relative;
	z-index: 5;
}

.sl-auto-switcher--header {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.06 );
}

.sl-auto-switcher--footer {
	border-top: 1px solid rgba( 0, 0, 0, 0.06 );
}

.sl-auto-switcher--bar .sl-auto-switcher-inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

/* =========================================================
   Custom dropdown — trigger button
   ========================================================= */

.sl-switcher-custom {
	display: inline-block;
}

.sl-switcher-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px 7px 12px;
	min-height: 34px;
	font-size: inherit;
	font-family: inherit;
	font-weight: 500;
	line-height: 1;
	color: #1f2937;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 );
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sl-switcher-trigger:hover {
	border-color: #9ca3af;
	background-color: #f9fafb;
}

.sl-switcher-trigger:focus-visible {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.20 );
}

.sl-switcher-trigger .sl-flag {
	font-size: 16px;
	line-height: 1;
	transform: translateY( -0.5px );
}

.sl-switcher-trigger .sl-label {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 12px;
	font-weight: 600;
}

.sl-switcher-trigger .sl-chevron {
	width: 10px;
	height: 6px;
	opacity: 0.7;
	transition: transform 0.15s ease;
	margin-left: 2px;
}

.sl-switcher-custom[aria-expanded="true"] .sl-switcher-trigger .sl-chevron,
.sl-switcher-trigger[aria-expanded="true"] .sl-chevron {
	transform: rotate( 180deg );
}

/* =========================================================
   Custom dropdown — menu (listbox)
   ========================================================= */

.sl-switcher-menu {
	position: absolute;
	top: calc( 100% + 6px );
	right: 0;
	min-width: 180px;
	max-width: 280px;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.12 ), 0 2px 6px rgba( 0, 0, 0, 0.06 );
	z-index: 1;
	opacity: 0;
	transform: translateY( -4px );
	pointer-events: none;
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.sl-switcher-menu[data-open="true"] {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
}

/* Left-corner placements: menu aligns to left edge of trigger. */
.sl-auto-switcher--top-left .sl-switcher-menu,
.sl-auto-switcher--bottom-left .sl-switcher-menu {
	right: auto;
	left: 0;
}

.sl-switcher-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	font-size: 14px;
	line-height: 1.3;
	color: #1f2937;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.1s ease;
}

.sl-switcher-option:hover,
.sl-switcher-option:focus-visible,
.sl-switcher-option[data-highlight="true"] {
	background-color: #f3f4f6;
	outline: none;
}

.sl-switcher-option.is-active {
	font-weight: 600;
}

.sl-switcher-option .sl-flag {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.sl-switcher-option .sl-option-label {
	flex: 1 1 auto;
}

.sl-switcher-option .sl-option-sub {
	font-size: 12px;
	color: #6b7280;
	margin-left: 6px;
}

.sl-switcher-option .sl-check {
	width: 12px;
	height: 10px;
	color: #2271b1;
	flex-shrink: 0;
	opacity: 0;
}

.sl-switcher-option.is-active .sl-check {
	opacity: 1;
}

/* =========================================================
   Native <select> dropdown (fallback / opt-in)
   ========================================================= */

.sl-switcher-dropdown:not(.sl-switcher-custom) select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	padding: 8px 32px 8px 14px;
	min-width: 140px;
	max-width: 100%;

	font-size: inherit;
	font-family: inherit;
	line-height: 1.4;
	color: inherit;

	background-color: #fff;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	cursor: pointer;
}

.sl-switcher-dropdown:not(.sl-switcher-custom) select:hover {
	border-color: #9ca3af;
}

.sl-switcher-dropdown:not(.sl-switcher-custom) select:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.18 );
}

/* =========================================================
   Flags style (inline clickable flags)
   ========================================================= */

.sl-switcher-flags {
	flex-wrap: wrap;
	gap: 6px;
}

.sl-switcher-flags a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	text-decoration: none;
	color: inherit;
	border: 1px solid transparent;
	border-radius: 6px;
	opacity: 0.75;
	transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.sl-switcher-flags a:hover,
.sl-switcher-flags a:focus-visible {
	opacity: 1;
	background-color: #f3f4f6;
	border-color: #e5e7eb;
	outline: none;
}

.sl-switcher-flags a.sl-active {
	opacity: 1;
	font-weight: 600;
	background-color: #f3f4f6;
	border-color: #d1d5db;
}

/* =========================================================
   Inline style (text links separated by |)
   ========================================================= */

.sl-switcher-inline {
	flex-wrap: wrap;
	gap: 0;
}

.sl-switcher-inline a {
	padding: 2px 6px;
	text-decoration: none;
	color: inherit;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.sl-switcher-inline a:hover,
.sl-switcher-inline a:focus-visible {
	background-color: #f3f4f6;
	outline: none;
}

.sl-switcher-inline a.sl-active {
	font-weight: 700;
}

.sl-switcher-inline .sl-separator {
	color: #d1d5db;
	padding: 0 2px;
}

/* =========================================================
   Flag + name primitives (shared)
   ========================================================= */

.sl-flag {
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	vertical-align: middle;
}

.sl-lang-name {
	vertical-align: middle;
}

/* =========================================================
   Responsive (mobile)
   ========================================================= */

@media ( max-width: 600px ) {
	/* Floating triggers shrink to flag + chevron to save space. */
	.sl-auto-switcher--float .sl-switcher-trigger .sl-label {
		display: none;
	}
	.sl-auto-switcher--float .sl-switcher-trigger {
		padding-left: 10px;
		padding-right: 8px;
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.sl-switcher-trigger,
	.sl-switcher-menu,
	.sl-switcher-option,
	.sl-switcher-trigger .sl-chevron {
		transition: none;
	}
}

/* =========================================================
   Dark theme
   ========================================================= */

@media ( prefers-color-scheme: dark ) {
	.sl-auto-switcher { color: #f3f4f6; }

	.sl-switcher-trigger {
		background-color: #1f2937;
		color: #f9fafb;
		border-color: #374151;
	}
	.sl-switcher-trigger:hover {
		background-color: #111827;
		border-color: #4b5563;
	}

	.sl-switcher-menu {
		background-color: #111827;
		border-color: #374151;
		box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.5 ), 0 2px 6px rgba( 0, 0, 0, 0.3 );
	}
	.sl-switcher-option {
		color: #f3f4f6;
	}
	.sl-switcher-option:hover,
	.sl-switcher-option:focus-visible,
	.sl-switcher-option[data-highlight="true"] {
		background-color: #1f2937;
	}
	.sl-switcher-option .sl-option-sub {
		color: #9ca3af;
	}
	.sl-switcher-option .sl-check {
		color: #60a5fa;
	}

	.sl-switcher-flags a:hover,
	.sl-switcher-flags a.sl-active,
	.sl-switcher-inline a:hover {
		background-color: #1f2937;
		border-color: #374151;
	}

	.sl-switcher-dropdown:not(.sl-switcher-custom) select {
		background-color: #1f2937;
		color: #f9fafb;
		border-color: #374151;
	}

	.sl-auto-switcher--header { border-bottom-color: rgba( 255, 255, 255, 0.08 ); }
	.sl-auto-switcher--footer { border-top-color:    rgba( 255, 255, 255, 0.08 ); }
}