/* ==========================================================================
   Components (Figma 172:2 sections 03, 06, 09, 11, 12)
   ========================================================================== */

/* ------------------------------------------------------------ Buttons */
/* Padding 18 x 36 incl. 2 px border (large: 20 x 40, 60 px tall). Hover 200 ms. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 58px;
	padding: 16px 34px;
	border: 2px solid transparent;
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 22px;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn--lg {
	min-height: 60px;
	padding: 17px 38px;
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn--primary {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-white);
}

.btn--primary:hover {
	background: var(--c-ink-80);
	border-color: var(--c-ink-80);
}

.btn--primary:active {
	background: #000;
	border-color: #000;
}

.btn--secondary {
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.btn--secondary:hover {
	background: var(--c-ink);
	color: var(--c-white);
}

.btn--secondary:active {
	background: var(--c-ink-80);
	border-color: var(--c-ink-80);
	color: var(--c-white);
}

/* Primary on dark */
.btn--light {
	background: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-ink);
}

.btn--light:hover {
	background: var(--c-line);
	border-color: var(--c-line);
}

.btn--light:active {
	background: var(--c-muted-40);
	border-color: var(--c-muted-40);
}

/* Secondary on dark */
.btn--outline-light {
	border-color: var(--c-white);
	color: var(--c-white);
}

.btn--outline-light:hover {
	background: var(--c-white);
	color: var(--c-ink);
}

.btn--outline-light:active {
	background: var(--c-line);
	border-color: var(--c-line);
	color: var(--c-ink);
}

.btn[disabled],
.btn.is-disabled {
	background: var(--c-line);
	border-color: var(--c-line);
	color: var(--c-muted-60);
	cursor: not-allowed;
}

.btn--secondary[disabled],
.btn--secondary.is-disabled {
	background: transparent;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

@media (max-width: 767px) {
	.btn {
		padding-inline: 26px;
	}

	.btn--mobile-block {
		display: flex;
		width: 100%;
	}

	.btn-row--mobile-stack {
		flex-direction: column;
		gap: 12px;
	}

	.btn-row--mobile-stack .btn {
		width: 100%;
	}
}

/* -------------------------------------------------------- Text links */
/* "LASĪT VAIRĀK" / "SKATĪT VAIRĀK": Bold 12/22, uppercase, 2 px underline */

.link-u {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	color: var(--c-ink);
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 22px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color var(--t-fast) var(--ease);
}

.link-u::after {
	content: "";
	height: 2px;
	background: currentColor;
	transition: background-color var(--t-fast) var(--ease);
}

.link-u:hover {
	color: var(--c-muted);
}

.link-u--light {
	color: var(--c-white);
}

.link-u--light::after {
	background: var(--c-muted);
}

.link-u--light:hover {
	color: var(--c-white);
}

.link-u--light:hover::after {
	background: var(--c-white);
}

/* ------------------------------------------------------ Social links */

.social-links {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0;
}

.social-links__link {
	display: block;
	color: var(--c-muted);
	transition: color var(--t-fast) var(--ease);
}

.social-links__link:hover {
	color: var(--c-ink);
}

.social-links__link svg {
	width: 25px;
	height: 25px;
}

/* ------------------------------------------------- Accordion (BUJ) */
/* One question open at a time, + turns into -, 250 ms. */

.accordion {
	margin: 0;
	border-top: 1px solid var(--c-line-soft);
}

.accordion__item {
	border-bottom: 1px solid var(--c-line-soft);
	transition: border-color var(--t-accordion) var(--ease);
}

/* Open item: thick dark line on mobile (181:200); desktop keeps the thin line (15:2). */
@media (max-width: 767px) {
	.accordion__item.is-open {
		border-bottom: 2px solid var(--c-ink);
	}
}

.accordion__heading {
	font-size: inherit;
}

.accordion__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 26px 0;
	color: var(--c-ink);
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: 26px;
	letter-spacing: 0.0118em;
	text-align: left;
	transition: color var(--t-fast) var(--ease);
}

.accordion__button:hover {
	color: var(--c-muted);
}

.accordion__icon {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--c-ink);
}

.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform var(--t-accordion) var(--ease);
}

.accordion__icon::after {
	transform: rotate(90deg);
}

.accordion__item.is-open .accordion__icon::after {
	transform: rotate(0deg);
}

/* The negative margin pulls the answer up to a 14 px gap under the question;
   it sits on the panel, outside the clipping wrapper, so text is never cut. */
.accordion__panel {
	--pull: -12px;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--t-accordion) var(--ease), margin-top var(--t-accordion) var(--ease);
}

.accordion__item.is-open .accordion__panel,
html:not(.js) .accordion__panel {
	grid-template-rows: 1fr;
	margin-top: var(--pull);
}

.accordion__panel-inner {
	overflow: hidden;
}

.accordion__answer {
	max-width: 640px;
	padding-bottom: 28px;
	color: var(--c-muted);
	font-size: 15px;
	line-height: 25px;
}

@media (max-width: 767px) {
	.accordion {
		border-top-color: var(--c-line);
	}

	.accordion__item {
		border-bottom-color: var(--c-line);
	}

	.accordion__button {
		gap: 16px;
		padding: 18px 0;
		font-size: 15px;
		line-height: 22px;
		letter-spacing: 0;
	}

	.accordion__panel {
		--pull: -8px;
	}

	.accordion__answer {
		padding-bottom: 18px;
		font-size: 14px;
		line-height: 22px;
	}
}

/* ----------------------------------------------------------- Post card */
/* List card (159:4): image 3:2, body 28/32/30, meta, title 20/30, excerpt 15/25, link.
   Home variant (44:73): image 447/366, body 37/46/46, no meta or link, excerpt 16/27.
   Whole card is clickable. */

.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	transition: border-color var(--t-fast) var(--ease);
}

.post-card:hover {
	border-color: var(--c-ink);
}

.post-card__media {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--c-placeholder);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}

.post-card:hover .post-card__media img {
	transform: scale(1.04);
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 28px 32px 30px;
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--c-ink);
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 18px;
	letter-spacing: 0.1364em;
	text-transform: uppercase;
}

.post-card__meta time {
	color: var(--c-muted);
}

.post-card__meta-dot {
	width: 4px;
	height: 4px;
	background: var(--c-muted-40);
}

.post-card__title {
	font-size: 20px;
	line-height: 30px;
}

.post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.post-card:hover .post-card__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.post-card__excerpt {
	color: var(--c-muted);
	font-size: 15px;
	line-height: 25px;
}

.post-card__more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 16px;
}

/* Home variant */
.post-card--home .post-card__media {
	aspect-ratio: 447 / 366;
}

.post-card--home .post-card__body {
	gap: 26px;
	padding: 37px 46px 46px;
}

.post-card--home .post-card__meta,
.post-card--home .post-card__more {
	display: none;
}

.post-card--home .post-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	font-size: 16px;
	line-height: 27px;
}

@media (max-width: 767px) {
	.post-card__media {
		aspect-ratio: 343 / 213;
	}

	.post-card__body {
		padding: 18px 18px 20px;
	}

	.post-card__title {
		font-size: 18px;
		line-height: 25px;
	}

	.post-card__more {
		padding-top: 8px;
	}

	.post-card--home .post-card__media {
		aspect-ratio: 300 / 190;
	}

	.post-card--home .post-card__body {
		gap: 10px;
		padding: 18px 18px 20px;
	}

	.post-card--home .post-card__title {
		font-size: 17px;
		line-height: 24px;
	}

	.post-card--home .post-card__excerpt {
		display: none;
	}

	.post-card--home .post-card__more {
		display: inline-flex;
		padding-top: 6px;
	}
}

/* ---------------------------------------------------------- Pagination */
/* 159:83: 52 px squares (mobile 44), active filled, ellipsis without border. */

.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding-top: 20px;
}

.pagination__link,
.pagination__gap {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 20px;
	letter-spacing: 0.0214em;
}

.pagination__link {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	transition: border-color var(--t-fast) var(--ease);
}

.pagination__link:hover {
	border-color: var(--c-ink);
}

.pagination__link[aria-current] {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-white);
}

.pagination__link.is-disabled {
	color: var(--c-muted-40);
	pointer-events: none;
}

.pagination__link svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 767px) {
	.pagination {
		gap: 6px;
		padding-top: 16px;
	}

	.pagination__link,
	.pagination__gap {
		width: 44px;
		height: 44px;
		font-size: 13px;
	}
}

/* --------------------------------------------------- Slider (mobile) */
/* Horizontal scroll-snap rail with dash indicators (190:2 section 05). */

.rail {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.rail::-webkit-scrollbar {
	display: none;
}

.rail > * {
	flex: none;
	scroll-snap-align: start;
}

.dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

.dots__dot {
	width: 8px;
	height: 3px;
	background: var(--c-muted-40);
	transition: width var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.dots__dot.is-active {
	width: 24px;
	background: var(--c-ink);
}

/* --------------------------------------------------------- Breadcrumb */
/* Desktop: full trail (Bold 12/22, 1.5 px, uppercase). Mobile: "‹ {parent}" only. */

.breadcrumb {
	padding-top: 28px;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	margin: 0;
	color: var(--c-muted);
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 22px;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	color: var(--c-muted-40);
}

.breadcrumb__item a {
	transition: color var(--t-fast) var(--ease);
}

.breadcrumb__item a:hover {
	color: var(--c-ink);
}

.breadcrumb__item [aria-current] {
	color: var(--c-ink);
}

.breadcrumb--light .breadcrumb__list,
.breadcrumb--light .breadcrumb__item [aria-current],
.breadcrumb--light .breadcrumb__item + .breadcrumb__item::before {
	color: rgba(255, 255, 255, 0.6);
}

.breadcrumb--light .breadcrumb__item a:hover {
	color: var(--c-white);
}

.breadcrumb__back {
	display: none;
}

@media (max-width: 767px) {
	.breadcrumb {
		padding: 16px 0 12px;
	}

	.breadcrumb__list {
		display: none;
	}

	.breadcrumb__back {
		display: flex;
		align-items: center;
		gap: 8px;
		color: var(--c-muted);
		font-size: 11px;
		font-weight: var(--fw-bold);
		line-height: 18px;
		letter-spacing: 0.1091em;
		text-transform: uppercase;
	}

	/* The chevron is centred in its box: pull it back 2 px so it still starts at the text edge */
	.breadcrumb__back-icon {
		width: 12px;
		height: 12px;
		margin-inline: -2px 2px;
	}

	.breadcrumb--light .breadcrumb__back {
		color: rgba(255, 255, 255, 0.7);
	}
}

/* --------------------------------------------------------------- Tags */
/* 267:29: Bold 11/16, 1.2 px, uppercase. Joined parts (Iznomāta + Drīz pieejama) touch. */

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.tag {
	padding: 7px 14px;
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.1091em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tag--dark {
	background: var(--c-ink);
	color: var(--c-white);
}

.tag--light {
	padding: 6px 13px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
}

.tag--amber {
	background: var(--c-status-amber);
	color: var(--c-ink);
}

.tag--blue {
	background: var(--c-status-blue);
	color: var(--c-white);
}

.tag--red {
	background: var(--c-status-red);
	color: var(--c-white);
}

/* ------------------------------------------------------- Machine card */
/* 172:2 section 09 + 146:38. Hover: dark border, image 1.04, button filled. */

.m-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	transition: border-color var(--t-fast) var(--ease);
}

.m-card:hover {
	border-color: var(--c-ink);
}

.m-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--c-placeholder);
}

.m-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}

.m-card:hover .m-card__media img {
	transform: scale(1.04);
}

/* Hover zoom (machine, post and subcategory cards, article gallery): the image keeps its own compositor layer,
   so it no longer jumps by a pixel, nor does the text beside it change weight, when the zoom starts and ends. */
@media (hover: hover) {
	.post-card__media img,
	.m-card__media img,
	.sub-card__media img,
	.a-gallery__tile img {
		will-change: transform;
	}
}

.m-card__tags {
	position: absolute;
	top: 16px;
	left: 16px;
	gap: 0;
}

.m-card__tags .tag {
	padding: 6px 12px;
}

.m-card__strip {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: rgba(24, 23, 22, 0.88);
	color: var(--c-white);
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 18px;
	letter-spacing: 0.0333em;
}

.m-card__strip::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--c-status-amber);
}

.m-card__strip--blue::before {
	background: #5b9be6;
}

.m-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.m-card__kicker {
	color: var(--c-muted);
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 18px;
	letter-spacing: 0.1364em;
	text-transform: uppercase;
}

.m-card__title {
	font-size: 20px;
	line-height: 28px;
}

.m-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* 6 px top inset; 20 px below + 12 px gap = the 8 px spacer frame between specs and button */
.m-card__specs {
	margin: 0 0 20px;
	padding-top: 6px;
}

.m-card__spec {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--c-bg-2);
	font-size: 13px;
	line-height: 20px;
}

.m-card__spec dt {
	color: var(--c-muted);
}

.m-card__spec dd {
	margin: 0;
	font-weight: var(--fw-bold);
	text-align: right;
}

.m-card__button {
	margin-top: auto;
	min-height: 58px;
}

.m-card:hover .m-card__button {
	background: var(--c-ink);
	color: var(--c-white);
}

/* Sold: grey photo with 28% white veil, muted title */
.m-card--sold .m-card__media img {
	filter: grayscale(1);
}

.m-card--sold .m-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.28);
}

.m-card--sold .m-card__title {
	color: var(--c-muted);
}

.m-card--sold .m-card__tags {
	z-index: 1;
}

/* -------------------------------------------------------- Share button */

.share {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-muted);
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 22px;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.share__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.share__icon svg {
	width: 18px;
	height: 18px;
}

.share:hover .share__icon,
.share[aria-expanded="true"] .share__icon {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-white);
}

/* Share dropdown (machine page): copy link, Facebook, X, Instagram; same frame as the catalog filter panel.
   Without JS the list stays hidden (the button does nothing then either). */
.share-menu {
	position: relative;
	flex: none;
}

.share-menu__list {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 40;
	width: 220px;
	margin: 0;
	padding: 8px 0;
	background: var(--c-white);
	border: 1px solid var(--c-ink);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}

.share-menu.is-open .share-menu__list {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.share-menu__item {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 20px;
	color: var(--c-ink);
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 22px;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
	transition: background-color var(--t-fast) var(--ease);
}

.share-menu__item:hover {
	background: var(--c-bg);
}

.share-menu__item svg {
	flex: none;
	width: 22px;
	height: 22px;
}

.toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 300;
	padding: 12px 20px;
	background: var(--c-ink);
	color: var(--c-white);
	font-size: 13px;
	font-weight: var(--fw-bold);
	line-height: 20px;
	transform: translate(-50%, 20px);
	opacity: 0;
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
	pointer-events: none;
}

.toast.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
}

@media (max-width: 767px) {
	.share__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.share__icon {
		width: 32px;
		height: 32px;
	}

	.m-card__body {
		padding: 20px;
	}

	.m-card__title {
		font-size: 18px;
		line-height: 24px;
	}
}

/* Hero breadcrumb keeps the full trail on mobile (183:292). */
@media (max-width: 767px) {
	.breadcrumb--full .breadcrumb__list {
		display: flex;
		font-size: 11px;
		line-height: 18px;
		letter-spacing: 0.1091em;
	}

	.breadcrumb--light.breadcrumb--full .breadcrumb__list {
		color: rgba(255, 255, 255, 0.65);
	}
}

/* ------------------------------------------------------------ Lightbox */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: var(--c-ink);
	color: var(--c-white);
}

.lightbox[hidden] {
	display: none;
}

.lightbox__figure {
	position: absolute;
	inset: 72px 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

@media (max-width: 767px) {
	.lightbox__figure {
		inset: 72px 0;
	}

	.lightbox__arrow {
		top: auto;
		bottom: 16px;
		margin-top: 0;
	}

	.lightbox__arrow--prev {
		left: 16px;
	}

	.lightbox__arrow--next {
		right: 16px;
	}

	.lightbox__counter {
		bottom: 28px;
	}
}

.lightbox__figure img,
.lightbox__figure video,
.lightbox__frame {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	touch-action: pinch-zoom;
}

.lightbox__close,
.lightbox__arrow {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--c-white);
	color: var(--c-ink);
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lightbox__close:hover,
.lightbox__arrow:hover {
	background: var(--c-ink-80);
	color: var(--c-white);
}

.lightbox__close {
	top: 16px;
	right: 16px;
}

.lightbox__arrow {
	top: 50%;
	margin-top: -24px;
}

.lightbox__arrow--prev {
	left: 24px;
}

.lightbox__arrow--next {
	right: 24px;
}

.lightbox svg {
	width: 24px;
	height: 24px;
}

.lightbox__counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 12px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.1em;
	transform: translateX(-50%);
}

.lightbox__frame {
	width: min(100%, 1280px);
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ------------------------------------------- Language switcher */
/* WPML stage, not in Figma: LV / EN, rendered only for viewers who see more than one language. */

.lang-switcher {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-switcher__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--c-ink-80); /* 9.9:1 on --c-bg (--c-muted is 4.35:1, below AA at 13 px) */
	font-size: 13px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.0462em;
	text-decoration: none;
	transition: color var(--t-fast) var(--ease);
}

a.lang-switcher__link:hover,
a.lang-switcher__link:focus-visible {
	color: var(--c-ink);
}

.lang-switcher__link.is-active {
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* The header copy sits between the logo and the nav, centred in the space they leave (client 21.10.); the nav
   no longer pushes itself to the right. */
.lang-switcher--header {
	flex: 1;
	justify-content: center;
	margin: 0 24px;
}

.site-header .lang-switcher--header + .main-nav {
	margin-left: 0;
}

/* Up to 1279 px the copy takes 77 - 8 px from the social links' gap and half of its own, so the bar still fits at 1024 px. */
@media (max-width: 1279px) {
	.lang-switcher--header {
		margin: 0 12px;
	}

	.site-header__bar:has(.lang-switcher--header) .site-header__social {
		margin-left: 8px;
	}
}

/* The burger menu takes over below the header breakpoint (layout.css); its copy lives in the menu footer. */
@media (max-width: 1023px) {
	.lang-switcher--header {
		display: none;
	}
}

.lang-switcher--menu {
	margin-left: -12px;
}