/* LanguageSelector component (views/components/language.templ).
   Native <details> popover: the summary is the closed-state trigger, the
   menu is a small dropdown anchored below it. */

.language-picker {
	position: relative;
	display: inline-block;
	align-self: center;
	min-width: 4.5rem;
}

.nav-links .language-picker {
	margin-inline: .4rem;
}

.language-picker summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 2.75rem;
	padding: 0 1.25rem 0 .75rem;
	border: 1px solid var(--border);
	background: transparent;
	cursor: pointer;
	list-style: none; /* remove the default disclosure triangle */
	transition: border-color .15s ease, background-color .15s ease;
}

.language-picker summary::-webkit-details-marker { display: none; }

.language-picker[open] summary,
.language-picker summary:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--bg-subtle);
}

.language-picker-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}

.language-picker-flag {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.15rem;
	line-height: 1;
}

.language-picker-code {
	color: var(--fg-muted);
}

/* Chevron: rotates when open. */
.language-picker summary::after {
	width: .35rem;
	height: .35rem;
	margin-left: .3rem;
	border-right: 1px solid var(--fg-muted);
	border-bottom: 1px solid var(--fg-muted);
	content: "";
	transform: translateY(-15%) rotate(45deg);
	transition: transform .15s ease;
}

.language-picker[open] summary::after { transform: translateY(15%) rotate(225deg); }

/* Dropdown menu: anchored below the summary, aligned to the picker. */
.language-picker-menu {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	z-index: 30;
	min-width: 9rem;
	margin: 0;
	padding: .35rem;
	list-style: none;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: 4px 4px 0 color-mix(in srgb, var(--fg) 12%, transparent);
}

.language-picker-menu a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .7rem;
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	white-space: nowrap;
}

.language-picker-menu a:hover {
	color: var(--accent);
	background: var(--bg-subtle);
}

.language-picker-menu a[aria-current="true"] {
	color: var(--accent);
	box-shadow: inset 2px 0 0 var(--accent);
}

@media (max-width: 30rem) {
	.language-picker { min-width: 3.5rem; }
	.language-picker summary { padding: 0 1rem 0 .5rem; }
	.language-picker-menu { left: auto; right: 0; }
}