/*
 * Språkväljaren (element st-sprakval) och headerns lägen (skissens SiteHeader, 2026-11-05).
 * Med skript: knappen "SV" öppnar de andra språken. Utan skript: alla språk på en rad.
 */
.brxe-st-sprakval {
	position: relative;
	display: flex;
	align-items: center;
}
/* Avdelare mot menyn (bara när menyn syns, inte i kompakt läge) */
#brx-header:not(.is-kompakt) .brxe-st-sprakval {
	height: 2.2rem;
	padding-left: var(--space-5);
	border-left: 1px solid var(--st-line);
}
#brx-header:not(.is-kompakt) .brxe-st-sprakval.is-js .st-sprakval__lista {
	left: var(--space-2);
}
.st-sprakval__knapp {
	padding: var(--space-2) var(--space-1);
	border: 0;
	background: none;
	color: var(--text-muted);
	font: inherit;
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	line-height: 1;
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}
.st-sprakval__knapp[aria-expanded="true"] {
	color: var(--text-primary);
}
.st-sprakval__lista {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.st-sprakval__lista li {
	margin: 0;
	padding: 0;
}
.st-sprakval__lank {
	display: block;
	padding: var(--space-1) 0;
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.st-sprakval__lank.is-aktiv {
	font-weight: var(--fw-bold);
	color: var(--text-primary);
}

/* Med skript: rullgardin med de andra språken */
.brxe-st-sprakval.is-js .st-sprakval__lista {
	position: absolute;
	top: calc(100% + var(--space-1));
	left: calc(-1 * var(--space-3));
	z-index: 30;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 6rem;
	padding: var(--space-1) 0;
	border: 1px solid var(--st-line);
	background: var(--surface-page);
	box-shadow: var(--shadow-tab);
}
.brxe-st-sprakval.is-js .st-sprakval__lista[hidden],
.brxe-st-sprakval.is-js .st-sprakval__aktivt {
	display: none;
}
.brxe-st-sprakval.is-js .st-sprakval__lank {
	padding: var(--space-2) var(--space-3);
	color: var(--text-primary);
}
@media (hover: hover) and (pointer: fine) {
	.st-sprakval__knapp:hover,
	.st-sprakval__lank:hover {
		color: var(--action-primary);
	}
	.brxe-st-sprakval.is-js .st-sprakval__lank:hover {
		background: var(--surface-subtle);
		color: var(--text-primary);
	}
}
.st-sprakval__knapp:focus-visible,
.st-sprakval__lank:focus-visible {
	outline: 2px solid var(--action-primary);
	outline-offset: 2px;
}

/* Menyn: inga radbrytningar, aktiv post understruken i orange (skissen) */
#brx-header .brxe-nav-menu .bricks-nav-menu > li > a,
#brx-header .modal-swish {
	white-space: nowrap;
}
#brx-header .brxe-nav-menu .bricks-nav-menu > li > a {
	padding: 0.6rem 0;
	border-bottom: 2px solid transparent;
}
#brx-header .brxe-nav-menu .bricks-nav-menu > li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > a {
	border-bottom-color: var(--action-primary);
}

/*
 * Lägen. st-header.js mäter raden och sätter st-header-js, och is-kompakt när logga + meny + språk + knapp
 * inte får plats (t.ex. finska menyord). is-smal: för trångt även för Ge stöd. Utan skript gäller brytpunkten 767 px.
 */
@media (max-width: 767px) {
	#brx-header:not(.st-header-js) .brxe-nav-menu,
	#brx-header:not(.st-header-js) .modal-swish,
	#brx-header:not(.st-header-js) .brxe-st-sprakval {
		display: none;
	}
}
#brx-header.st-header-js .st-mobilmeny__oppna {
	display: none;
}
#brx-header.st-header-js.is-kompakt .brxe-nav-menu {
	display: none;
}
#brx-header.st-header-js.is-kompakt .st-mobilmeny__oppna {
	display: flex;
}
#brx-header.st-header-js.is-kompakt .modal-swish {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-label);
}
#brx-header.st-header-js.is-smal .modal-swish {
	display: none;
}