/* =========================================================
   SEKTIONSNAVIGERING OCH BRÖDSMULOR

   2026-09-18: vänsterkolumnen (.ca-sektionslayout) togs bort.
   Den låg som en grid-cell runt hela innehållet, och sidornas
   fullbreddssektioner (.ca-topp, .ca-s, .alignfull) förutsätter
   att de ligger direkt under .entry-content. Uppmätt före:
   hjälten 736 px i en 1280 px vy, mot 1280 px på en köpsida.
   Se filhuvudet i inc/sektionsnav.php för hela resonemanget.

   Ersättaren är .ca-syskonrad, en vågrät rad med syskonsidor.

   NN/g, Local Navigation: lokal navigering får inte vara
   visuellt starkare än huvudmenyn. Pillren är därför dämpade
   och utan fyllning, och bara den aktuella sidan får styrka.

   Baymard, Avoid Horizontal Tabs: en rad som måste dras i
   sidled på mobil missas helt. Raden radbryter, den scrollar
   aldrig. Inget overflow, ingen dold del.

   GOV.UK, Accordion: navigering som alla behöver göms aldrig
   bakom ett dragspel. Listan är platt och alltid synlig.
   ========================================================= */

/* ---------------------------------------------------------
   BRÖDSMULOR
   --------------------------------------------------------- */
.ca-brodsmulor-rad {
	padding-inline: var(--ca-marginal);
	padding-block: var(--ca-rum-4) 0;
}

.ca-brodsmulor {
	max-width: var(--ca-bredd);
	margin-inline: auto;
}

.ca-brodsmulor__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ca-rum-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ca-text-xs);
	color: var(--ca-text-dampad);
}

.ca-brodsmulor__lista li {
	display: flex;
	align-items: center;
	gap: var(--ca-rum-2);
	max-width: none;
}

.ca-brodsmulor__lista li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
}

.ca-brodsmulor a {
	color: var(--ca-text-dampad);
	text-decoration: none;
}

.ca-brodsmulor a:hover,
.ca-brodsmulor a:focus {
	color: var(--ca-bla);
	text-decoration: none;
}

.ca-brodsmulor [aria-current="page"] {
	color: var(--ca-text);
	font-weight: 600;
}


/* ---------------------------------------------------------
   SYSKONRADEN

   Ligger i samma behållare som brödsmulorna och därmed i exakt
   samma spalt som sidhuvudets innehåll (max 1200 px).

   flex-wrap: wrap, inget overflow. Vid 360 px radbryter pillren
   till två rader i stället för att hamna utanför skärmen. Det är
   ett medvetet val, se Baymard i filhuvudet.
   --------------------------------------------------------- */
/* Centrerad rad med luft omkring (Thomas 2026-09-18). Raden satt
   vansterstalld tatt under brodsmulorna och sag ut som en rest av
   den gamla kolumnen. Centrerad, med samma luft over och under,
   lasas den i stallet ihop med den centrerade hjalten under. */
.ca-syskonrad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ca-rum-2) var(--ca-rum-3);
	max-width: var(--ca-bredd);
	margin-inline: auto;
	margin-block: var(--ca-rum-4) var(--ca-rum-5);
}

.ca-syskonrad__etikett {
	font-size: var(--ca-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* #735E6A mot sidbakgrunden #FAF7F6: 5.57:1. */
	color: var(--ca-text-dampad);
	text-decoration: none;
}

/* Etiketten i slutremsan är en länk, och en fristående länk måste
   klara WCAG 2.5.8 (24 px). Uppmätt utan den här regeln: 23 px hög.
   Nu 48 px, alltså över både 2.5.8 och 2.5.5 (44 px), och den hamnar
   dessutom i linje med pillren bredvid. */
a.ca-syskonrad__etikett {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-traffyta);
}

a.ca-syskonrad__etikett:hover,
a.ca-syskonrad__etikett:focus-visible {
	color: var(--ca-brand-stark);
}

.ca-syskonrad__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-rum-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-syskonrad__lista li {
	/* Astra och komponenter.css kapar listposter i innehållet. Raden
	   ligger utanför .entry-content, men regeln står kvar som skydd om
	   någon flyttar in den. */
	max-width: none;
	margin: 0;
}

/* Träffytan är minst 48 px hög (--ca-traffyta), alltså över både
   WCAG 2.5.8 (24 px) och 2.5.5 (44 px). */
.ca-syskonrad__lank {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-traffyta);
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--ca-kant);
	border-radius: 999px;
	background: transparent;
	/* 5.57:1 mot sidbakgrunden. */
	color: var(--ca-text-dampad);
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Astra stryker under alla länkar i .entry-content. Slutremsan ligger
   där, och en understruken navigeringslänk konkurrerar med markeringen
   av aktuell sida. */
.entry-content .ca-syskonrad__lank,
.entry-content .ca-syskonrad__etikett,
.entry-content .ca-syskonrad__lank:hover,
.entry-content .ca-syskonrad__lank:focus-visible {
	text-decoration: none;
}

.ca-syskonrad__lank:hover,
.ca-syskonrad__lank:focus-visible {
	/* #8D3A63 mot #F4E9EF: 6.08:1. */
	color: var(--ca-brand-stark);
	background: var(--ca-surface-2);
	border-color: var(--ca-brand);
}

/* Aktuell sida. Markeringen bärs av tre saker samtidigt, inte bara av
   färg: fylld yta, fet vikt och en ram i varumärkesfärgen.
   #8D3A63 mot #EDDDE6 mäter 5.51:1. */
.ca-syskonrad__lank[aria-current="page"] {
	background: var(--ca-surface-3);
	border-color: var(--ca-brand);
	color: var(--ca-brand-stark);
	font-weight: 700;
}

/* ---------------------------------------------------------
   SLUTREMSAN

   Samma rad, sist i innehållet, i en vanlig .ca-s-sektion.
   Sidorna är 8 000 till 12 000 px höga, och den som läst klart
   ser inte raden överst längre.
   --------------------------------------------------------- */
.ca-syskonslut .ca-syskonrad {
	margin-block-start: 0;
}

/* Sektionen har bakgrunden --ca-surface. Pillren får sidbakgrunden så
   att de syns som ytor, precis som korten i .ca-s--ton gör. */
.ca-syskonslut .ca-syskonrad__lank {
	background: var(--ca-ground);
}

.ca-syskonslut .ca-syskonrad__lank:hover,
.ca-syskonslut .ca-syskonrad__lank:focus-visible {
	background: var(--ca-surface-2);
}

/* ---------------------------------------------------------
   SMALA SKÄRMAR

   Etiketten hamnar på egen rad ovanför pillren, så att de får
   hela bredden att bryta på.
   --------------------------------------------------------- */
@media (max-width: 599px) {
	.ca-syskonrad {
		display: block;
	}

	/* Specificiteten matchar a.ca-syskonrad__etikett ovan, annars vinner
	   den regelns display: inline-flex även här. */
	.ca-syskonrad > .ca-syskonrad__etikett {
		display: block;
		margin-block-end: var(--ca-rum-2);
	}

	/* Är etiketten en länk behåller den sin träffyta på 48 px. Den blir
	   block-nivå via flex i stället för block, så att den ändå hamnar på
	   egen rad ovanför pillren. */
	.ca-syskonrad > a.ca-syskonrad__etikett {
		display: flex;
		width: fit-content;
		min-height: var(--ca-traffyta);
	}

	.ca-syskonrad__lank {
		padding-inline: 0.75rem;
	}
}