/* ==========================================================================
   FS Brödsmulor — statisk bas
   ==========================================================================
   Stigen tillbaka. Visuellt identisk med den sidintro bär i sitt huvud, men
   med eget namnrum: ligger båda modulerna på samma sida laddas båda filerna,
   och .fs-sidintro__sti får inte börja gälla utanför sitt sidhuvud.

   Färgerna går genom lokala variabler (--fsb-*) i stället för direkt på
   reglerna. Då byter botten-valet och Stil-flikens färgväljare färg på ett
   ställe var, i stället för att upprepa varje regel i två varianter.

   Skiljetecknet är ett ::before och därmed dekor — det ligger utanför
   dokumentets textinnehåll och läses aldrig upp. Tecknet självt kommer ur
   --fsb-tegn, som per-nod-CSS sätter efter Utseende-fliken.
   ========================================================================== */

.fs-brodsmuler {
	--fsb-lenke:  var(--fs-muted);
	--fsb-hover:  var(--fs-accent-ink);
	--fsb-aktiv:  var(--fs-heading);
	--fsb-skille: var(--fs-line-strong);
	--fsb-tegn:   '/';
}

/* Mörk botten — navy sektion eller foto. Länkarna blir pappersvita och
   accenten vänds till sin ljusa variant, precis som knapparna gör det. */
.fs-brodsmuler--mork {
	--fsb-lenke:  rgba(255, 255, 255, 0.72);
	--fsb-hover:  var(--fs-accent-light);
	--fsb-aktiv:  var(--fs-paper);
	--fsb-skille: rgba(255, 255, 255, 0.38);
}

.fs-brodsmuler__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	font-size: var(--fs-text-xs);
	line-height: 1.5;
	color: var(--fsb-lenke);
}

.fs-brodsmuler__steg {
	display: inline;
}

.fs-brodsmuler__steg + .fs-brodsmuler__steg::before {
	content: var(--fsb-tegn);
	margin: 0 var(--fs-space-3);
	color: var(--fsb-skille);
}

.fs-brodsmuler__lenke {
	color: var(--fsb-lenke);
	text-decoration: none;
	transition: color 0.2s ease;
}

.fs-brodsmuler__lenke:hover,
.fs-brodsmuler__lenke:focus-visible {
	color: var(--fsb-hover);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Sista steget är sidan man står på. Den skiljs från länkarna med färg och
   vikt, inte med kursiv — stigen är för liten för att bära ett snitt till. */
.fs-brodsmuler__aktiv {
	color: var(--fsb-aktiv);
	font-weight: var(--fs-weight-medium);
}

/* Bryter stigen till flera rader i mobil behöver raderna luft — utan
   row-gap klibbar de ihop, eftersom liststegen inte har egen höjd. */
@media (max-width: 480px) {

	.fs-brodsmuler__liste {
		row-gap: var(--fs-space-2);
	}
}

@media (prefers-reduced-motion: reduce) {

	.fs-brodsmuler__lenke {
		transition: none;
	}
}