@charset "UTF-8";
/*
 * Fuktspecialisten - temats enda stilmall.
 *
 * Ordning:
 *   1. Tokens
 *   2. Bas och typografi
 *   3. Tillgänglighet
 *   4. Layout
 *   5. Komponenter
 *   6. Formulär
 *   7. FAQ
 *   8. Rörelse
 *   9. Utskrift
 *
 * Alla värden kommer från designen (Fuktspecialisten.dc.html). Inga inline-stilar
 * får förekomma i temats PHP - tools/theme-check.php stoppar det.
 *
 * FÄRG: --fs-accent (#fb8c00) är hämtad direkt ur logotypen. En enda orange
 * genom hela temat, precis som i designen - fyllningar, ikoner, bockar,
 * kickers, ramar och punkter. Orange ytor bär vit text.
 *
 * Kontrasten är ett medvetet val av kunden, inte ett förbiseende: vit text på
 * #fb8c00 ger 2.37:1 och accenten som liten text mot ljus botten ger 2.18:1,
 * båda under WCAG AA 4.5:1. En mörkare variant togs fram, granskades och valdes
 * bort - kunden ville ha logotypens orange oförändrad på hela sidan. Ändra
 * inte tillbaka utan att fråga.
 */

/* ============================================================ 1. TOKENS === */

:root {
	/* Accent */
	--fs-accent: #fb8c00;
	--fs-accent-600: #e07d00;
	--fs-accent-tint: #fff1e6;

	/* Bläck */
	--fs-ink: #16191d;
	--fs-ink-2: #2a2e34;
	--fs-ink-3: #22262c;
	--fs-ink-soft: #454a52;

	/* Dämpad text */
	--fs-muted: #5a5f66;
	--fs-muted-2: #7a7f87;
	--fs-muted-3: #8d929a;

	/* Text på mörk botten */
	--fs-on-dark: #f7f5f1;
	--fs-on-dark-2: #d5d8dd;
	--fs-on-dark-3: #b8bcc3;

	/* Ytor */
	--fs-ground: #f7f5f1;
	--fs-ground-2: #ebe7df;
	--fs-ground-3: #e6e1d8;
	--fs-surface: #fff;

	/* Linjer och status */
	--fs-line: #d5d8dd;
	--fs-ok: #2e9d6a;

	/* Typsnitt */
	--fs-font-head: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fs-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Mått */
	--fs-wrap: 1420px;
	--fs-pad: clamp(20px, 4vw, 56px);
	--fs-sec: clamp(64px, 7vw, 104px);

	/* Radier */
	--fs-r-sm: 12px;
	--fs-r-md: 18px;
	--fs-r-lg: 24px;
	--fs-r-xl: 28px;
	--fs-r-pill: 999px;

	/*
	 * Härledda tokens. De står inte i designdokumentets tokenlista men motsvarar
	 * värden som upprepas i designens inline-stilar. Samlade här så att de inte
	 * blir magiska tal i komponentlagret.
	 */
	--fs-hairline: rgba(22, 25, 29, 0.06);
	--fs-hairline-2: rgba(22, 25, 29, 0.15);
	--fs-hairline-3: rgba(22, 25, 29, 0.18);
	--fs-line-dark: rgba(255, 255, 255, 0.12);
	--fs-glass: rgba(255, 255, 255, 0.07);
	--fs-glass-line: rgba(255, 255, 255, 0.14);
	--fs-err: #b3261e;
	--fs-shadow-btn: 0 10px 30px -10px rgba(251, 140, 0, 0.6);
	--fs-shadow-card: 0 30px 50px -30px rgba(22, 25, 29, 0.35);
	--fs-shadow-photo: 0 30px 60px -30px rgba(22, 25, 29, 0.4);
	--fs-shadow-float: 0 20px 40px -20px rgba(0, 0, 0, 0.35);
}

/* =================================================== 2. BAS OCH TYPOGRAFI === */

* {
	box-sizing: border-box;
}

/*
 * Mobila webblasare lagger en bla ruta over allt man trycker pa. Den ar
 * inte fokusmarkering (den finns kvar som :focus-visible) utan bara brus,
 * sa den stangs av for hela dokumentet.
 */
html,
a,
button,
input,
label,
summary {
	-webkit-tap-highlight-color: transparent;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--fs-ground);
	color: var(--fs-ink);
	font-family: var(--fs-font-body);
	font-size: 17px;
	line-height: 1.6;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--fs-font-head);
	font-weight: 700;
	letter-spacing: -0.025em;
}

a {
	color: var(--fs-accent);
}

a:hover {
	color: var(--fs-accent-600);
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

hr {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--fs-line);
}

/* ==================================================== 3. TILLGÄNGLIGHET === */

:focus-visible {
	outline: 2px solid var(--fs-accent);
	outline-offset: 2px;
}

/* Hoppa-till-innehåll. Dold tills den får fokus. */
.fs-skip {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 999;
	padding: 12px 18px;
	background: var(--fs-ink);
	color: var(--fs-on-dark);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--fs-r-sm) 0;
}

.fs-skip:focus,
.fs-skip:focus-visible {
	left: 0;
	color: var(--fs-on-dark);
}

/* Text bara för skärmläsare. */
.fs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ========================================================== 4. LAYOUT === */

/* Innehållsbredd. Ligger inuti .fs-sec, som håller den vertikala rytmen. */
.fs-wrap {
	max-width: var(--fs-wrap);
	margin-inline: auto;
	padding-inline: var(--fs-pad);
}

.fs-sec {
	padding-block: var(--fs-sec);
}

/*
 * Områdessidorna har av avsikt korta avsnitt - bara det som någon har skrivit
 * kontrollerat om orten renderas. Med hela sidans rytm blir bandet mellan två
 * korta avsnitt högre än avsnitten själva, så tokenen dras ihop för just den
 * här mallen i stället för att sektionerna görs om.
 */
.single-fs_area {
	--fs-sec: clamp(52px, 5vw, 76px);
}

.single-fs_area .fs-sec--tall {
	padding-block: clamp(64px, 6.5vw, 96px);
}

/* Tätare variant, t.ex. stats-bandet direkt under hero. */
.fs-sec--tight {
	padding-block: clamp(16px, 2vw, 24px) clamp(48px, 6vw, 80px);
}

/*
 * Ett band som slutar precis vid skarmens nederkant.
 *
 * Hjalten pa /omraden/ var 1 014 px hog i ett fonster pa 1 000 - kartan stack
 * ner under vikningen och man sag aldrig hela bandet pa en gang. Hojden raknas
 * nu fran skarmen i stallet for fran innehallet: allt ovanfor bandet
 * (toppraden och den fasta rubrikraden) dras bort, och resten ar bandets.
 *
 * min-height och inte height - staplas spalterna pa en telefon far innehallet
 * vaxa forbi skarmen som vanligt i stallet for att klippas.
 *
 * svh och inte vh: pa en telefon raknar vh med adressfaltet som om det redan
 * hade glidit undan, och bandet blir da hogre an skarmen det skulle passa i.
 */
.fs-sec--screen {
	--fs-screen-top: 142px;

	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--fs-screen-top));
	min-height: calc(100svh - var(--fs-screen-top));
	padding-block: clamp(40px, 5vh, 72px);
}

.fs-sec--screen > .fs-wrap {
	width: 100%;
}

/*
 * Kartan halls tillbaka sa att den far plats pa skarmen tillsammans med sin
 * egen luft. I full bredd var den 713 px hog och sprangde bandet pa egen hand.
 */
.fs-sec--screen .fs-map-figure {
	/*
	 * width: 100% maste sta har. Bade margin-inline: auto och justify-self: center
	 * stanger av ett rutnatsobjekts utstrackning nar bredden ar auto - figuren
	 * krympte da till kartans egen bredd, 304 px, i stallet for sina 560. Med en
	 * uttalad bredd raknas den mot spalten, kapas av max-width och centreras av
	 * marginalerna.
	 */
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.fs-sec--screen {
		display: block;
		min-height: 0;
		padding-block: var(--fs-sec);
	}

	.fs-sec--screen .fs-map-figure {
		max-width: none;
	}
}

/* Extra luft - hero och de stora CTA-banden. */
.fs-sec--tall {
	padding-block: clamp(72px, 8vw, 120px);
}

.fs-sec--surface {
	background: var(--fs-surface);
}

.fs-sec--dark {
	background: var(--fs-ink);
	color: var(--fs-on-dark);
}

/* Footerns ännu mörkare botten. */
.fs-sec--darker {
	background: #0f1114;
	color: var(--fs-on-dark-3);
}

/* Fotosektion: bild + överlägg + innehåll ovanpå. */
.fs-sec--photo {
	position: relative;
	overflow: hidden;
	background: var(--fs-ink-2);
	color: #fff;
}

.fs-sec--photo > .fs-wrap {
	position: relative;
	z-index: 2;
}

.fs-sec__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fs-sec__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(16, 18, 22, 0.92) 0%, rgba(16, 18, 22, 0.72) 52%, rgba(16, 18, 22, 0.42) 100%);
}

/*
 * Pa smal skarm gar overlagget nedat i stallet for at sidan.
 *
 * Gradienten ar byggd for tva spalter: mork till vanster dar texten star, ljus
 * till hoger dar bilden ska synas. Nar spalterna staplas spanner texten over
 * hela bredden, och den hogra kanten ar bara 0,42 - vit rubriktext hamnade dar
 * pa 4,04:1 mot det ljusaste stallet i fotot, alltsa under AA:s 4,5.
 *
 * Sa lange kommunsidorna saknade bakgrundsbild gick det inte att se: overlagget
 * lag da mot en jamn mork yta. Bilden gjorde felet synligt, inte nytt.
 */
@media (max-width: 900px) {
	.fs-sec__overlay {
		background: linear-gradient(180deg, rgba(16, 18, 22, .82), rgba(16, 18, 22, .93));
	}
}

.fs-sec__overlay--v {
	background: linear-gradient(180deg, rgba(16, 18, 22, 0.86), rgba(16, 18, 22, 0.94));
}

/*
 * Platt overlagg over CTA-bandets foto.
 *
 * Lag pa 0,85 sa lange bandet inte hade nagon bild - da spelade det ingen roll.
 * Med Stockholmsfotot bakom slackte det bilden nastan helt, och det ar ingen
 * mening med ett foto ingen ser. 0,65 ar matt mot den ljusaste atta-gangar-atta-
 * rutan i bilden (himlen, rgb 114/144/176): vit text hamnar pa 10,8:1, alltsa
 * langt over AA:s 4,5. Marginalen ar avsiktlig - byter kunden till en ljusare
 * bild haller det anda.
 */
.fs-sec__overlay--flat {
	background: rgba(16, 18, 22, 0.65);
}

/*
 * Djupare overlagg for omradesnavet.
 *
 * Bandet bar inte bara text utan ocksa kartan, och kartans former ar #4a515a.
 * Mot fotots ljusaste parti (rgb 202/207/203) hamnar de pa 0,95:1 vid 0,65 -
 * alltsa osynliga. Vid 0,80 ar det 1,45:1 innan skarmen bakom kartan raknas in,
 * och vit rubriktext star pa 11,9:1. CTA-bandet har inget att lasa pa fotot och
 * far darfor ha kvar sitt ljusare overlagg.
 */
.fs-sec__overlay--deep {
	background: rgba(16, 18, 22, 0.8);
}

/*
 * Standardrutnätet. Minsta spaltbredd styrs av --fs-grid-min så att partialerna
 * kan variera rytmen med en modifierare i stället för med en ny klass per
 * sektion. --fs-grid-gap och --fs-grid-align fungerar likadant.
 */
.fs-grid {
	display: grid;
	gap: var(--fs-grid-gap, 18px);
	align-items: var(--fs-grid-align, stretch);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fs-grid-min, 270px)), 1fr));
}

/* Två spalter med luft - hero, varför, områden, tecken på. */
.fs-grid--split {
	--fs-grid-min: 440px;
	--fs-grid-gap: 48px clamp(32px, 5vw, 96px);
	--fs-grid-align: center;
}

/*
 * Tva spalter som ska borja pa samma rad.
 *
 * --split centrerar sina spalter lodratt, vilket ar ratt nar den ena ar en bild
 * och den andra en kort text. Det ar fel sa fort bada ar innehall av olika
 * hojd: da hamnar den kortare spaltens rubrik en bit ner och de tva rubrikerna
 * star inte i linje. Den har modifieraren lagger dem overst i stallet.
 */
/*
 * Spalter som stalls mitt for varandra.
 *
 * Anvands nar de tva spalterna ar olika hoga och ingen av dem laser som en
 * fortsattning pa den andra - rubrik bredvid karta, till exempel. Toppstallt
 * hangde kartan nedanfor texten med ett tomt falt ovanfor sig.
 */
.fs-grid--middle {
	--fs-grid-align: center;
}

.fs-grid--top {
	--fs-grid-align: start;
}

/* Två spalter, rubrik mot brödtext - intro, team, FAQ. */
.fs-grid--duo {
	--fs-grid-min: 380px;
	--fs-grid-gap: 40px clamp(32px, 5vw, 96px);
	--fs-grid-align: start;
}

/*
 * Områdessidornas spalter. Rubriken är två rader och texten bredvid är lång, så
 * en jämn halva lämnar ett dött fält under rubriken över hela sektionen.
 * Rubrikspalten smalnar till en rem och följer med i scrollen i stället, så att
 * sidan blir kortare utan att något innehåll tas bort.
 */
.fs-grid--rail {
	--fs-grid-gap: 32px clamp(32px, 4vw, 72px);
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}

.fs-rail {
	position: sticky;
	top: 104px;
}

@media (max-width: 900px) {
	.fs-grid--rail {
		grid-template-columns: minmax(0, 1fr);
	}

	.fs-rail {
		position: static;
	}
}

/*
 * Tre spalter. Sex kort i det normala rutnatet blev fyra plus tva, alltsa en
 * andra rad med tva tomma platser bredvid sig. Minsta spaltbredd 330 px ger tre
 * spalter i innehallsbredden och tva pa en surfplatta.
 */
.fs-grid--trio {
	--fs-grid-min: 330px;
}

/* Täta rutor - jourfakta och ortlistan. */
.fs-grid--tight {
	--fs-grid-min: 150px;
	--fs-grid-gap: 8px;
}

/* Sektionshuvud: rubrikblock till vänster, kort text eller länk till höger. */
.fs-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.fs-head__aside {
	margin: 0;
	max-width: 44ch;
	color: var(--fs-muted);
	font-size: 15.5px;
}

.fs-sec--dark .fs-head__aside,
.fs-sec--photo .fs-head__aside {
	color: var(--fs-on-dark-3);
}

/* ====================================================== 5. KOMPONENTER === */

/* --- Rubrikskala -------------------------------------------------------- */

/* kontrast: designens kicker är 13px accent mot ljus botten - byts till accent-link. */
.fs-kicker {
	margin: 0 0 12px;
	color: var(--fs-accent);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Mot mörk botten klarar den rena accenten kontrastkravet. */
.fs-sec--dark .fs-kicker,
.fs-sec--photo .fs-kicker {
	color: var(--fs-accent);
}

.fs-h1 {
	font-size: clamp(42px, 5.6vw, 76px);
	line-height: 1.02;
}

.fs-h1--service {
	font-size: clamp(40px, 5.4vw, 72px);
	max-width: 16ch;
}

.fs-h2 {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.08;
}

.fs-h3 {
	font-size: 21px;
	line-height: 1.25;
}

.fs-h3--lg {
	font-size: 24px;
	line-height: 1.15;
}

.fs-h3--sm {
	font-size: 18px;
	line-height: 1.2;
}

/* Accentord inuti en rubrik. Stor text - accenten är tillåten här. */
.fs-accent {
	color: var(--fs-accent);
}

.fs-lead {
	margin: 0 0 32px;
	max-width: 56ch;
	font-size: 18px;
	line-height: 1.65;
	color: var(--fs-ink-soft);
}

.fs-sec--dark .fs-lead,
.fs-sec--photo .fs-lead {
	color: var(--fs-on-dark-2);
}

/* Brödtext i sektioner. */
.fs-text {
	margin: 0 0 16px;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--fs-ink-soft);
}

.fs-sec--dark .fs-text,
.fs-sec--photo .fs-text {
	color: var(--fs-on-dark-3);
}

/* Finstilt: prisnoter och villkorstext. */
.fs-note {
	margin: 0;
	max-width: 80ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--fs-muted-2);
}

.fs-sec--dark .fs-note,
.fs-sec--photo .fs-note {
	color: var(--fs-muted-3);
}

/* --- Knappar ------------------------------------------------------------ */

/*
 * Knappen fylls med logotypens orange och bär mörk text: 7.43:1. Vit text på
 * samma orange ger 2.37:1 och används inte. Hover mörknar fyllningen ett steg
 * till --fs-accent-600 och behåller den mörka texten.
 */
.fs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 26px;
	border: 0;
	border-radius: var(--fs-r-pill);
	font-family: var(--fs-font-body);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.fs-btn--primary {
	background: var(--fs-accent);
	color: #fff;
	box-shadow: var(--fs-shadow-btn);
}

/* Texten stannar vit genom hover och aktivt läge - bara fyllningen mörknar. */
.fs-btn--primary:hover,
.fs-btn--primary:focus-visible {
	background: var(--fs-accent-600);
	color: #fff;
	transform: translateY(-2px);
}

.fs-btn--primary:active {
	background: var(--fs-accent-600);
	color: #fff;
	transform: translateY(0);
	box-shadow: 0 4px 14px -6px rgba(251, 140, 0, 0.6);
}

.fs-btn--ghost {
	padding: 14.5px 22px;
	background: transparent;
	color: var(--fs-ink);
	border: 1.5px solid var(--fs-hairline-3);
}

.fs-btn--ghost:hover {
	color: var(--fs-ink);
	border-color: var(--fs-ink);
}

.fs-btn--ghost:active {
	background: var(--fs-ground-2);
	border-color: var(--fs-ink);
}

.fs-btn--on-dark {
	padding: 14.5px 22px;
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.fs-btn--on-dark:hover {
	color: #fff;
	border-color: #fff;
}

.fs-btn--on-dark:active {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

/* Mörk fyllning - paketkortet som inte är märkt "vanligast". */
.fs-btn--ink {
	background: var(--fs-ink);
	color: #fff;
}

.fs-btn--ink:hover {
	background: var(--fs-ink-2);
	color: #fff;
}

.fs-btn--ink:active {
	background: #000;
}

/* Kompakt variant för header och kort. */
.fs-btn--sm {
	padding: 11px 18px;
	font-size: 14.5px;
	box-shadow: none;
}

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

/* Textlänk med pil - "Alla guider →". */
/* kontrast: designens hover är ren accent på 15px text - vi använder accent-link. */
.fs-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fs-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.fs-link:hover {
	color: var(--fs-accent);
}

.fs-sec--dark .fs-link,
.fs-sec--photo .fs-link {
	color: #fff;
}

.fs-sec--dark .fs-link:hover,
.fs-sec--photo .fs-link:hover {
	color: var(--fs-accent);
}

/* Knapprad. */
.fs-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.fs-actions--end {
	justify-content: flex-end;
}

.fs-actions--center {
	justify-content: center;
}

/*
 * Centrerad pelare: rubrik, ingress och knappar under varandra.
 *
 * Anvands i CTA-bandet, som ligger over ett bakgrundsfoto i full bredd. Bredden
 * hallas nere med ch och inte med px - det ar radlangden som avgor om en mening
 * gar att lasa, inte hur bred skarmen rakar vara.
 */
.fs-stack {
	display: flex;
	flex-direction: column;
}

.fs-stack--center {
	align-items: center;
	max-width: 58ch;
	margin-inline: auto;
	text-align: center;
}

/*
 * Knappar som star mitt emot ett textblock i samma rad.
 *
 * .fs-grid--duo toppstaller sina spalter, vilket ar ratt nar bada bar text. I
 * CTA-bandet ar den ena spalten en rubrik med ingress pa 137 px och den andra
 * tva knappar pa 51 px - toppstallda klistrade sig knapparna hogst upp och
 * hangde over en tom yta pa nastan hundra pixlar. De ska sta i jamnhojd med
 * texten de hor till.
 */
.fs-actions--middle {
	align-self: center;
}

@media (max-width: 820px) {
	/* Staplat ar "mitten" meningslost, och hogerstallt ser ut som ett misstag. */
	.fs-actions--middle {
		align-self: start;
		justify-content: flex-start;
	}
}

/* --- Kort --------------------------------------------------------------- */

.fs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	background: var(--fs-surface);
	color: inherit;
	border: 1px solid var(--fs-hairline);
	border-radius: var(--fs-r-lg);
}

.fs-card--hover {
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.fs-card--hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--fs-shadow-card);
	color: inherit;
}

/*
 * Kort som bär hela formuläret, med sin egen rubrik överst.
 *
 * .fs-form målar redan en vit yta med 30 px stoppning och rundade hörn. Ligger
 * den i ett kort blir det två rutor i varandra med dubbel luft i kanten, så här
 * lämnar formuläret ifrån sig sin ram och kortet håller den i stället. Rubriken
 * och ingressen hamnar då innanför samma yta som fälten.
 */
.fs-card--form {
	gap: 6px;
}

.fs-card--form .fs-form {
	padding: 0;
	margin-top: 16px;
	background: none;
	border-radius: 0;
}

/* Krämfärgat kort mot vit sektion - tjänstekort och "vad ingår". */
.fs-card--ground {
	background: var(--fs-ground);
	border-color: transparent;
}

/* Genomskinligt kort mot mörk botten eller foto. */
.fs-card--glass {
	background: var(--fs-glass);
	color: #fff;
	border: 1px solid var(--fs-glass-line);
	border-radius: var(--fs-r-md);
	backdrop-filter: blur(8px);
}

/* Orange kort - ROT-rutan och riktprisrutan. */
.fs-card--accent {
	background: var(--fs-accent);
	color: #fff;
	border-color: transparent;
}

/* Kort som börjar med en bild och därför inte har egen padding. */
.fs-card--flush {
	padding: 0;
	gap: 0;
	overflow: hidden;
}

.fs-card__body {
	padding: 20px 22px 24px;
}

/* Låter ett element växa så att korten i raden blir lika höga. */
.fs-card__fill {
	flex: 1;
}

/* --- Etiketter och ikoner ----------------------------------------------- */

.fs-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	background: var(--fs-surface);
	color: var(--fs-ink-soft);
	border-radius: var(--fs-r-pill);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}

.fs-tag--accent {
	padding: 6px 12px;
	background: var(--fs-accent);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fs-tag--ink {
	padding: 6px 10px;
	background: var(--fs-ink);
	color: #fff;
	font-family: var(--fs-font-head);
	font-weight: 800;
	font-size: 13px;
}

/* Ortsetikett mot mörk botten. */
.fs-tag--outline {
	padding: 9px 12px;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--fs-r-sm);
	font-size: 14px;
}

/* Hörnetikett, absolut placerad i ett .fs-card. */
.fs-tag--corner {
	position: absolute;
	top: 20px;
	right: 20px;
}

/* Liten prick - jourtraden och ortlistan. */
.fs-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fs-accent);
}

.fs-dot--ok {
	background: var(--fs-ok);
	box-shadow: 0 0 0 4px rgba(46, 157, 106, 0.18);
}

.fs-dot--sm {
	width: 6px;
	height: 6px;
}

/* Rundad ikonruta med siffra eller symbol. Ikonstorlek - accent tillåten. */
.fs-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	background: var(--fs-accent-tint);
	color: var(--fs-accent);
	border-radius: 14px;
	font-family: var(--fs-font-head);
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
}

.fs-icon--sm {
	width: 40px;
	height: 40px;
	border-radius: var(--fs-r-sm);
	font-size: 14px;
}

.fs-icon--lg {
	width: 46px;
	height: 46px;
	border-radius: var(--fs-r-sm);
	font-size: 20px;
}

/* --- Bocklistor --------------------------------------------------------- */

/*
 * Bocken ligger i ::before och är dekorativ - markupen behöver bara <li>.
 * Modifierare: --circle (rund tonad platta på mörka sektioner), --warn
 * (utropstecken på tjänstesidan), --dot (punktlista i processkorten),
 * --inline (vågrät rad under hero).
 */
.fs-check {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
	line-height: 1.55;
}

.fs-check > li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: start;
}

.fs-check > li::before {
	content: "\2713";
	color: var(--fs-accent);
	font-weight: 600;
}

.fs-sec--dark .fs-check > li::before,
.fs-sec--photo .fs-check > li::before {
	color: var(--fs-accent);
}

.fs-check--circle > li {
	grid-template-columns: 28px 1fr;
	gap: 14px;
}

.fs-check--circle > li::before {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: rgba(251, 140, 0, 0.15);
	color: var(--fs-accent);
	border-radius: 50%;
	font-size: 14px;
}

.fs-check--warn > li::before {
	content: "\0021";
}

.fs-check--dot {
	gap: 8px;
	font-size: 14px;
}

.fs-check--dot > li {
	grid-template-columns: 16px 1fr;
	gap: 8px;
	align-items: baseline;
}

.fs-check--dot > li::before {
	content: "\2022";
}

.fs-check--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	font-size: 14px;
	color: var(--fs-muted);
}

.fs-check--inline > li {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- Siffror ------------------------------------------------------------ */

/*
 * Forbehallet framfor ett pris - "fran", "ca".
 *
 * Det ligger inuti .fs-stat__num for att sitta pa samma rad som siffran, men ska
 * inte vaga lika tungt: i 46 px last "fran 3 900" som om ordet vore en del av
 * beloppet. Halva graden och en dampad ton gor det till det forbehall det ar.
 */
.fs-stat__prefix {
	display: block;
	margin-bottom: 2px;
	font-size: .4em;
	font-weight: 600;
	line-height: 1.2;
	opacity: .72;
}

/*
 * Forklaringen langst ned i ett faktakort. Samma roll som prisnotisen i kortet
 * bredvid: den star avskild fran siffran och i mindre grad.
 */
.fs-card__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(22, 25, 29, .1);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fs-ink-soft);
}

.fs-stat__num {
	margin: 0 0 10px;
	font-family: var(--fs-font-head);
	font-weight: 800;
	font-size: clamp(34px, 3.4vw, 46px);
	line-height: 1;
	letter-spacing: -0.03em;
}

.fs-stat__label {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fs-muted);
}

.fs-sec--dark .fs-stat__label,
.fs-sec--photo .fs-stat__label,
.fs-card--glass .fs-stat__label,
.fs-card--accent .fs-stat__label {
	color: var(--fs-on-dark-2);
}

.fs-stat--sm .fs-stat__num {
	margin-bottom: 6px;
	font-size: 30px;
}

.fs-stat--lg .fs-stat__num {
	font-size: clamp(36px, 4vw, 56px);
}

/* Enhet efter en prissiffra. */
.fs-stat__unit {
	margin-left: 8px;
	font-family: var(--fs-font-body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	opacity: .7;
}

/* --- Media -------------------------------------------------------------- */

.fs-media {
	margin: 0;
	overflow: hidden;
	background: var(--fs-ground-3);
	border-radius: var(--fs-r-xl);

	/*
	 * Forhallandet ligger pa figuren, inte pa bilden. Ligger det pa bilden far
	 * bilden sin hojd ur sin bredd (height: auto), och nar figuren ar hogre an
	 * sa - t.ex. nar den star i en grid-rad som strackts av ett hogre kort
	 * bredvid (fs-media-duo) - fyller bilden inte figuren, utan lamnar den
	 * grafargade bakgrunden synlig under sig. Med forhallandet pa figuren och
	 * height: 100% pa bilden fyller bilden alltid hela ytan och beskars med
	 * object-fit i stallet.
	 */
	aspect-ratio: var(--fs-media-ratio, auto);
}

.fs-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fs-media--md {
	border-radius: 22px;
}

/* Bild som toppar ett .fs-card--flush. */
.fs-media--top {
	border-radius: var(--fs-r-lg) var(--fs-r-lg) 0 0;
}

/*
 * Satt alltid ett forhallande pa en .fs-media som bar en lat bild.
 *
 * WordPress skickar ut en egen regel for lata bilder:
 *
 *     img:is([sizes="auto" i], ...) { contain-intrinsic-size: 3000px 1500px; }
 *
 * Den galler tills bilden ar dekodad. Normalt spelar den ingen roll, eftersom
 * width- och height-attributen ger webblasaren ratt proportion att rakna pa -
 * men .fs-media img satter aspect-ratio, och aspect-ratio: auto slanger just de
 * attributen. Kvar blir 1500 px, och bilden ritades bokstavligen 1500 px hog.
 * Med ett riktigt forhallande har uppstar problemet inte.
 */
.fs-media--sq {
	--fs-media-ratio: 1 / 1;
}

/* Vanligt kamerformat, t.ex. bilden pa om-sidan. */
.fs-media--photo {
	--fs-media-ratio: 3 / 2;
}

.fs-media--wide {
	--fs-media-ratio: 16 / 9;
}

.fs-media--card {
	--fs-media-ratio: 16 / 10;
}

.fs-media--portrait {
	--fs-media-ratio: 4 / 4.3;
}

.fs-media--shadow {
	box-shadow: var(--fs-shadow-photo);
}

.fs-sec--dark .fs-media,
.fs-sec--photo .fs-media {
	background: var(--fs-ink-2);
}

/* Behållare som .fs-media-note kan placeras absolut mot. */
.fs-media-wrap {
	position: relative;
}

/* Flytande faktaruta ovanpå en bild. */
.fs-media-note {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 300px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--fs-surface);
	color: var(--fs-ink);
	border-radius: var(--fs-r-md);
	box-shadow: var(--fs-shadow-float);
	font-size: 14px;
	line-height: 1.45;
}

/*
 * Kartan i områdessektionen: figuren blir positioneringskontext för sin egen
 * etikett, utan att .fs-media-wrap behövs runt om.
 */
.fs-media--anchor {
	position: relative;
}

/*
 * Ortsetikett ovanpå kartan. Den orange ytan bär mörk text - vitt på #fb8c00 är
 * 2,37:1 och klarar inte AA.
 */
.fs-media-badge {
	position: absolute;
	left: 20px;
	bottom: 20px;
	max-width: calc(100% - 40px);
	padding: 12px 16px;
	background: var(--fs-accent);
	color: #fff;
	border-radius: var(--fs-r-sm);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}

/* --- Löptext (guider och annat Gutenberg-innehåll) ---------------------- */

.fs-prose {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--fs-ink-soft);
}

.fs-prose > * + * {
	margin-top: 20px;
}

/*
 * Brodtext som redan sitter i en spalt nagon annan bestamt bredden pa.
 *
 * .fs-prose halller 68ch for att en rad ska ga att lasa nar texten star fritt
 * pa sidan. Ligger den i en spalt ar bredden redan satt, och da blev 68ch en
 * smal remsa med tomt gap bredvid sig inuti sin egen spalt. Forsta elementet
 * tappar ocksa sin toppmarginal: ett avsnitt som borjar med sin rubrik ska
 * borja i linje med sina grannar, inte 40 px langre ned.
 */
.fs-prose--flush {
	max-width: none;
}

/*
 * Navets textavsnitt: ett per rad, rubriken i en egen smal spalt.
 *
 * Tva forsok innan det har. Kort i ett rutnat gav tva kort bredvid varandra och
 * ett tredje ensamt pa nasta rad, eftersom avsnitten ar olika langa. Spaltbrytning
 * gav 317 px i ena spalten mot 938 i den andra - webblasaren far inte dela ett
 * kort mitt itu, och det langsta avsnittet gick inte att placera battre.
 *
 * Rader har ingen sadan svaghet. Layouten ser likadan ut oavsett hur manga
 * avsnitt som skrivs och hur olika langa de ar, och rubriken far sta for sig
 * sjalv i stallet for att tryckas ihop med brodtexten.
 */
.fs-hub-chapter + .fs-hub-chapter {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--fs-hairline);
}

/* Rubriken ar kort - den ska inte bara ut sin spalt. */
.fs-hub-chapter > .fs-prose:first-child {
	color: var(--fs-ink);
}


.fs-prose--flush > :first-child {
	margin-top: 0;
}

.fs-prose h2,
.fs-prose h3 {
	margin-top: 40px;
	color: var(--fs-ink);
}

.fs-prose h2 {
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.15;
}

/*
 * Underrubrik i brodtext som kunden sjalv skrivit i versaler.
 *
 * Rubrikerna kom in som <h4> fran Elementor. De maste bli <h2> for att sidans
 * rubriktrad ska halla ihop under en ensam <h1> - men .fs-prose h2 ar upp till
 * 32 px, och 32 px versaler ("ORGANISATIONEN") skriker over brodtexten de ska
 * inleda. Klassen haller kvar den mindre graden kunden uppenbart tankte sig.
 * Ordet i sig rors inte.
 */
.fs-prose h2.fs-prose__sub {
	margin-top: 36px;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: .02em;
}

.fs-prose h3 {
	font-size: 21px;
	line-height: 1.25;
}

.fs-prose img {
	border-radius: var(--fs-r-md);
}

/*
 * Listor, lankar och tabeller i redaktorens brodtext. Policysidorna ar
 * mest listor och nagon enstaka tabell; utan egna regler far de webblasarens
 * standard, som inte passar spaltens luft.
 */
.fs-prose ul,
.fs-prose ol {
	padding-left: 22px;
}

.fs-prose li + li {
	margin-top: 8px;
}

.fs-prose a {
	color: var(--fs-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--fs-blue);
}

.fs-prose a:hover {
	color: var(--fs-blue);
}

.fs-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.fs-prose th,
.fs-prose td {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--fs-line);
	text-align: left;
	vertical-align: top;
}

.fs-prose th {
	color: var(--fs-ink);
	font-weight: 600;
}

.fs-prose blockquote {
	margin: 0;
	padding-left: 20px;
	border-left: 3px solid var(--fs-accent);
	color: var(--fs-ink);
}

/* --- Sidans ram: topbar, header, navigation och sidfot ------------------- */

/*
 * Skiplänkens mål. <main> har tabindex="-1" så att fokus verkligen flyttas dit
 * i alla webbläsare; fokus sätts programmatiskt och ska inte rita någon ram.
 */
.fs-main:focus {
	outline: none;
}

/* Akutraden. Mörk botten, så --fs-accent får bära både punkt och hover. */
.fs-topbar {
	background: var(--fs-ink);
	color: var(--fs-on-dark);
	font-size: 13.5px;
}

.fs-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 28px;
	padding-block: 9px;
}

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

.fs-topbar__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	opacity: .85;
}

.fs-topbar__link {
	color: inherit;
	text-decoration: none;
}

.fs-topbar__link:hover {
	color: var(--fs-accent);
}

/*
 * Pa liten skarm bar akutraden bara akutmeddelandet.
 *
 * Oppettiderna och e-postadressen fick inte plats pa samma rad och la sig pa en
 * andra - tva rader svart innan sidan ens borjat, for uppgifter som star i
 * sidfoten och pa kontaktsidan. Det som ar kvar ar det enda pa raden som ar
 * bradskande, och det ar dessutom det raden finns till for.
 */
@media (max-width: 900px) {
	.fs-topbar__meta {
		display: none;
	}

	/*
	 * Meddelandet centreras nar det ar ensamt kvar pa raden. Vansterstallt satt
	 * det i ena anden med ett tomt falt bredvid sig - en rad med en enda sak i
	 * ska stå mitt i, inte tryckt mot en kant.
	 */
	.fs-topbar__inner {
		justify-content: center;
		flex-wrap: nowrap;
	}

	.fs-topbar__alert {
		min-width: 0;
		justify-content: center;
		text-align: center;
	}
}

/* Klistrad header. Genomskinligheten är designens egen ton av --fs-ground. */
.fs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(247, 245, 241, 0.88);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--fs-hairline);
}

.fs-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding-block: 14px;
}

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

/* Logotypen. */
.fs-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	color: var(--fs-ink);
	text-decoration: none;
}

.fs-brand:hover {
	color: var(--fs-ink);
}

.fs-brand__name {
	font-family: var(--fs-font-body);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -0.01em;
}

.fs-brand__muted {
	color: var(--fs-muted-2);
	font-weight: 400;
}

/*
 * Ordbilden är bred, cirka 5,3:1, så den kapas på höjden och låter bredden
 * följa. img-taggen bär filens egna width/height, och med max-height plus
 * height: auto (basreglerna) skalar webbläsaren ner bredden proportionellt.
 */

@media (max-width: 1080px) {
	.fs-brand {
		min-width: 0;
	}
}

/* Huvudmenyn. */
.fs-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-nav__link {
	display: block;
	padding: 8px 13px;
	border-radius: var(--fs-r-pill);
	color: var(--fs-ink);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
}

.fs-nav__link:hover {
	background: var(--fs-ground-2);
	color: var(--fs-ink);
}

/* kontrast: tonad platta, aldrig ren accentfyllning under text. */
.fs-nav__link[aria-current="page"] {
	background: var(--fs-accent-tint);
	color: var(--fs-accent);
}

/*
 * Mobilknappen. Den är dold som utgångsläge och visas bara under .js, som
 * header.php sätter på <html>. Utan skript finns alltså ingen knapp - och
 * hopfällningen nedan, som också är scopad till .js, slår aldrig till. Menyn
 * ligger då kvar utfälld i flödet och alla länkar går att nå.
 */
/*
 * Selektorn är kvalificerad med .fs-header av ett enda skäl: Elementors kit-CSS
 * lastar efter temats och sätter sin accentfärg på varje button via
 * ".elementor-kit-NNN button" (0,1,1). Ett ensamt .fs-nav__toggle (0,1,0) förlorar
 * och knappen blir orange. Kvalificeringen kan tas bort när Elementor är borta.
 */
.fs-header .fs-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--fs-hairline-2);
	border-radius: var(--fs-r-sm);
	cursor: pointer;
}

.fs-header .fs-nav__toggle:hover {
	border-color: var(--fs-ink);
}

.fs-nav__toggle-icon {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: var(--fs-ink);
	border-radius: 2px;
}

.fs-nav__toggle-icon::before,
.fs-nav__toggle-icon::after {
	position: absolute;
	left: 0;
	display: block;
	width: 18px;
	height: 2px;
	background: var(--fs-ink);
	border-radius: 2px;
	content: "";
}

.fs-nav__toggle-icon::before {
	top: -6px;
}

.fs-nav__toggle-icon::after {
	top: 6px;
}

/*
 * Menyknappens brytpunkt.
 *
 * Huvudmenyn bar sju poster sedan omradesnavet och guiderna lades till, och den
 * raden behover omkring 1250 px bredvid logotyp, telefon och kontaktknapp. Pa
 * 900 px brot headern darfor i tre rader och blev 193 px hog innan knappen tog
 * over. 1080 px ar den bredd dar det slutar se ut som ett misstag.
 */
@media (max-width: 1080px) {
	.fs-header__inner {
		gap: 12px;
	}
}
/*
 * Menyn som rad pa stora skarmar.
 *
 * Knapparna ligger numera inuti <nav>, sa <nav> ar sjalv flexraden: lankarna
 * till vanster i sin lista, telefon och kontaktknapp till hoger. Tidigare lag
 * knapparna som ett eget syskon i headern, och da gick de inte att fa in i
 * ladan pa mobil utan att skrivas ut tva ganger i markupen.
 */
.fs-nav {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 28px);
	margin-left: auto;
}

/* Stangknappen och dess rad hor bara ladan till. */
.fs-nav__head {
	display: none;
}

/*
 * Menyn som lada pa sma skarmar.
 *
 * Skjuts in fran vanster. Hoger hade varit lika enkelt tekniskt, men tummen
 * pa en telefon nar vansterkanten samre an hogerkanten, och ladan ska kunna
 * stangas med samma hand som oppnade den - darav krysset hogst upp i den.
 *
 * transform och inte left: en transform ritas om av kompositorn utan att
 * webblasaren behover rakna om sidans layout for varje bildruta.
 */
@media (max-width: 1080px) {
	/*
	 * Suddningen slas av har, och det ar inte en smaksak.
	 *
	 * backdrop-filter gor elementet till containing block for allt som ar
	 * position: fixed inuti det. Ladan och skarmen ligger i headern, och med
	 * suddningen kvar raknades deras inset: 0 mot headerns 72 px i stallet for
	 * mot fonstret - ladan blev 72 px hog och skarmen tackte ingenting.
	 *
	 * Bakgrunden blir samtidigt ogenomskinlig. En halvgenomskinlig yta utan
	 * suddning bakom sig ar bara en otydlig yta.
	 */
	.fs-header {
		background: var(--fs-ground);
		backdrop-filter: none;
	}

	.js .fs-nav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: min(86vw, 340px);
		margin: 0;
		padding: 16px 20px 28px;
		background: var(--fs-surface);
		box-shadow: 0 0 60px rgba(16, 18, 22, .28);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-100%);
		transition: transform .28s ease;
		visibility: hidden;
	}

	.js .fs-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	/*
	 * Admin-baren ar fast langst upp och ligger over allt. Ladan ar fast mot
	 * fonstret och vet inget om den, sa stangknappen hamnade under baren for
	 * inloggade. Hojden ar WordPress egen: 46 px pa smal skarm, 32 fran 783.
	 *
	 * Ordningen i selektorn ar inte godtycklig: .js sitter pa <html> och
	 * .admin-bar pa <body>. ".admin-bar .js" letar efter ett .js-element inuti
	 * <body> och traffar darfor aldrig nagot.
	 */
	.js body.admin-bar .fs-nav,
	.js body.admin-bar .fs-nav__scrim {
		top: 46px;
	}

	.js .fs-nav__head {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 8px;
	}

	.js .fs-nav__close {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: var(--fs-ground);
		color: var(--fs-ink);
		border: 0;
		border-radius: 50%;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.js .fs-nav__close:hover {
		background: var(--fs-ground-2);
	}

	/* Lankarna staplas och far en trafftyta som duger for en tumme. */
	.js .fs-nav .fs-nav__list {
		display: grid;
		gap: 2px;
	}

	.js .fs-nav .fs-nav__link {
		padding: 12px 14px;
		font-size: 16px;
	}

	/*
	 * Knapparna sist i ladan, i full bredd och under en harfin linje. De ar
	 * malet - inte ett av valen i listan - och ska darfor lasa som ett avslut.
	 */
	.js .fs-nav .fs-header__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: auto;
		padding-top: 20px;
		border-top: 1px solid var(--fs-hairline);
	}

	.js .fs-nav .fs-header__actions .fs-btn {
		justify-content: center;
		width: 100%;
	}

	.js .fs-nav__toggle {
		display: inline-flex;
		order: 2;
		margin-left: auto;
	}

	/* Skarmen bakom ladan. */
	.js .fs-nav__scrim {
		position: fixed;
		inset: 0;
		z-index: 55;
		display: block;
		background: rgba(16, 18, 22, .5);
		opacity: 0;
		transition: opacity .28s ease;
	}

	.js .fs-nav__scrim.is-open {
		opacity: 1;
	}

	/* Sidan bakom ladan ska inte ga att scrolla. */
	.js body.fs-nav-open {
		overflow: hidden;
	}
}

/*
 * Admin-baren ar 32 px fran 783 px och uppat, 46 px darunder. Den senare
 * hojden ligger i 1080-blocket ovan; det har blocket ror bara den smalare
 * baren i det ovre spannet.
 */
@media (max-width: 1080px) and (min-width: 783px) {
	.js body.admin-bar .fs-nav,
	.js body.admin-bar .fs-nav__scrim {
		top: 32px;
	}
}

/*
 * Utan JS finns ingen lada. Menyn ar utfalld och skarmen ritas aldrig, sa
 * lankarna gar att na precis som forut.
 */
.fs-nav__scrim {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .fs-nav,
	.js .fs-nav__scrim {
		transition: none;
	}
}

/* --- Karusell pa liten skarm --------------------------------------------- */

/*
 * Kortrutnat som blir en svepbar rad pa telefon.
 *
 * Fyra kort staplade pa varandra ar fyra skarmhojder att scrolla forbi innan
 * nasta rubrik. Som en rad man sveper i tar samma fyra kort en skarm, och det
 * syns direkt att det finns mer at hoger.
 *
 * Rullningen ar webblasarens egen med scroll-snap - ingen skriptad animering.
 * Det gor att tummen far tillbaka den tragheten och det motstand den vantar
 * sig, och att karusellen fungerar med tangentbord och skarmlasare utan att
 * nagot behover byggas om. Klassen sattes av initCarousels() i main.js, sa utan
 * JS ligger korten kvar staplade precis som forut.
 *
 * Inga pilar. De ar sma traffytor pa en telefon och sager dessutom mindre an
 * sjalva korten: ett halvt kort som sticker in fran hogerkanten ar den tydligaste
 * upplysningen om att raden fortsatter.
 */
/*
 * Prickarna finns i markupen sa fort JS byggt dem, men ritas bara dar raden ar
 * en karusell.
 *
 * Regeln maste sta fore mediafragan. Lag den efter vann den over
 * ".js .fs-dots { display: flex }" pa storre skarm - samma specificitet, och da
 * avgor ordningen - och prickarna forsvann aven pa telefon.
 */
.fs-dots {
	display: none;
}

@media (max-width: 720px) {
	.js .fs-carousel {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;

		/* Rullningslisten doljs - prickarna under ar det som visar var man ar. */
		scrollbar-width: none;
	}

	.js .fs-carousel::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Under ett musdrag (skriptet satter klassen) stangs snappningen och
	 * den mjuka rullningen av, annars kampar raden emot handen. Markoren
	 * visar att raden gar att dra, och text i korten ska inte markeras.
	 */
	.js .fs-carousel {
		cursor: grab;
	}

	.js .fs-carousel.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		scroll-behavior: auto;
		user-select: none;
	}

	.js .fs-carousel.is-dragging a,
	.js .fs-carousel.is-dragging img {
		pointer-events: none;
	}

	/*
	 * Ett kort i taget, i innehallets fulla bredd.
	 *
	 * Forst lag korten pa 86 % med raden utdragen till skarmkanten, sa att nasta
	 * kort stack in en bit - den vanliga signalen om att raden fortsatter. Men
	 * det ar prickarna under som ar signalen har, och ett halvt kort intill det
	 * man laser drar blicken at fel hall.
	 *
	 * 100 % raknas mot radens innehallsbredd. Mellanrummet mellan korten hamnar
	 * darmed helt utanfor det synliga faltet nar ett kort snappat pa plats - inget
	 * skymtar i kanten.
	 */
	.js .fs-carousel > * {
		flex: 0 0 100%;
		scroll-snap-align: start;

		/*
		 * Ett svep, ett kort.
		 *
		 * Utan det har bar rorelsemangden forbi flera snapp-punkter i ett enda
		 * svep - ett bestamt drag kunde hoppa tre kort, och prickarna under
		 * blinkade forbi utan att man hann se var man var. scroll-snap-stop:
		 * always tvingar rullningen att stanna vid narmaste kort oavsett hur
		 * hart man sveper, precis som en sida i en bildvisare.
		 */
		scroll-snap-stop: always;
	}

	/*
	 * Prickarna. De ar knappar och inte bara dekor: den som inte kan svepa ska
	 * kunna ta sig mellan korten anda.
	 */
	.js .fs-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 18px;
	}

	.js .fs-dots__dot {
		width: 8px;
		height: 8px;
		padding: 0;
		background: var(--fs-hairline-2);
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		transition: width .2s ease, background-color .2s ease;
	}

	.js .fs-dots__dot[aria-current="true"] {
		width: 22px;
		background: var(--fs-accent);
		border-radius: var(--fs-r-pill);
	}

	/* Mork sektion: prickarna maste synas mot botten de star pa. */
	.js .fs-sec--dark .fs-dots__dot,
	.js .fs-sec--photo .fs-dots__dot {
		background: rgba(255, 255, 255, .28);
	}

	.js .fs-sec--dark .fs-dots__dot[aria-current="true"],
	.js .fs-sec--photo .fs-dots__dot[aria-current="true"] {
		background: var(--fs-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .fs-carousel {
		scroll-behavior: auto;
	}

	.js .fs-dots__dot {
		transition: none;
	}
}

/*
 * Kartan ar en illustration pa telefon, inte en kontroll.
 *
 * Matt pa en skarm som ar 375 px bred: 14 av lanets 26 former ar mindre an
 * 44x44 px. Sundbyberg blir 8x12, Solna 13x16, Danderyd 18x19. WCAG 2.5.8
 * kraver 24x24 som minimum och 2.5.5 rekommenderar 44x44; Apple anger 44 pt och
 * Android 48 dp. En meta pa atta pixlar ar inte svar att traffa - den gar inte
 * att traffa, och det spelar ingen roll hur tydligt det framgar att den ar
 * klickbar.
 *
 * Geografin gar inte att gora storre utan att sluta vara geografi, sa kartan
 * slutar i stallet vara en kontroll. Den visar lanets form, vilket den gor bra
 * aven i den har storleken, och ortlistan under - dar varje rad ar minst 44 px -
 * ar det man klickar i. Samma mal, en meta som fungerar.
 *
 * aria-hidden satts av initMapDecorative() sa att skarmlasare slipper 26 lankar
 * som inte gar att anvanda och som andå finns i listan nedanfor.
 */
@media (max-width: 720px) {
	.fs-map-figure {
		pointer-events: none;
	}

	/* Hovertillstanden hor till en mus och ska inte fastna vid ett tryck. */
	.fs-map__area,
	.fs-map__area--linked {
		cursor: default;
	}

	/*
	 * Ortetiketterna blir riktiga metor. 41 px var under gransen, och det ar
	 * de som bar navigeringen nar kartan slutat gora det.
	 */
	.fs-tag--link {
		min-height: 44px;
		padding-inline: 16px;
	}
}

/* Sidfoten. Designens botten är en nyans mörkare än --fs-ink. */
.fs-footer {
	background: #0f1114;
	color: var(--fs-on-dark-3);
	font-size: 14.5px;
}

.fs-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 40px;
	padding-block: 64px 32px;
}

.fs-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: #fff;
	font-weight: 600;
}

/* Samma princip som i headern: höjdtak, bredden följer. */
/*
 * Sidfotens logotyp ligger inline som SVG, inte som <img>. Ordbildens banor
 * saknar eget fill och ärver därför färgen härifrån - det är enda sättet att få
 * en ljus ordbild mot den mörka sidfoten, eftersom ingen av logotypfilerna har
 * en vit variant och CSS aldrig når in i en <img>. Ikonens orange cirkel och
 * vita bock har explicit fill i filen och påverkas inte.
 */
/* --- Logotypmarket ------------------------------------------------------- */

/*
 * Market ar ikon till vanster och en spalt med ordbild och undertext till
 * hoger. align-items center gor att ikonen hamnar mitt for bada tva och inte
 * mitt for ordbilden ensam - det ar sa den tryckta logotypen ar satt, och hela
 * skalet till att filen ar delad i tva.
 *
 * Alla matt utom ett ar em av --fs-logo-h, som ar ikonens hojd. Storleken byts
 * darfor pa ett stalle och resten foljer med i ratt proportion.
 *
 * Filens egen kvot mellan ikon och ordbild ar 98,2/203 = 0,484. Ordbilden ar
 * satt till 0,58 i stallet, alltsa medvetet tyngre an sa - ordet ska bara mer
 * av market an det gor i den ritade filen.
 */
.fs-logo {
	--fs-logo-h: 38px;

	display: inline-flex;
	align-items: center;
	gap: .17em;
	font-size: var(--fs-logo-h);
	line-height: 1;
}

.fs-logo__icon {
	display: block;
	width: auto;
	height: 1em;
	flex: none;
}

.fs-logo__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .075em;
	min-width: 0;
}

.fs-logo__word {
	display: block;
	width: auto;
	height: .58em;
	max-width: 100%;
}

/* Sidfotens ordbild ar inline-svg, sa banorna gar att farga. */
.fs-logo--dark .fs-logo__word {
	fill: var(--fs-on-dark);
}

/*
 * Undertexten. Storleken ar satt sa att raden blir ungefar lika bred som ordet
 * ovanfor - det ar den enda relationen som inte gar att harleda ur filen,
 * eftersom texten satts med sajtens typsnitt och inte med logotypens.
 */
.fs-logo__tagline {
	font-size: .285em;
	text-align: center;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--fs-muted-2);
	white-space: nowrap;
}

.fs-logo--dark .fs-logo__tagline {
	color: var(--fs-on-dark-3);
}

.fs-logo--dark {
	--fs-logo-h: 34px;
}

@media (max-width: 1080px) {
	.fs-logo {
		--fs-logo-h: 30px;
	}
}

/* Undertexten ar dekor pa de minsta skarmarna, dar varje pixel behovs. */
@media (max-width: 400px) {
	.fs-logo__tagline {
		display: none;
	}
}

.fs-footer__text {
	max-width: 38ch;
	margin: 0;
	line-height: 1.65;
}

.fs-footer__title {
	margin: 0 0 14px;
	color: #fff;
	font-weight: 600;
}

.fs-footer__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-footer__link {
	color: inherit;
	text-decoration: none;
}

.fs-footer__link:hover {
	color: var(--fs-accent);
}

.fs-footer__link--strong {
	color: #fff;
	font-weight: 600;
}

.fs-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-block: 20px 32px;
	border-top: 1px solid var(--fs-line-dark);
	color: var(--fs-muted-2);
	font-size: 13px;
}

.fs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Knapp som ser ut som sidfotens lankar: "Cookieinstallningar". */
.fs-footer__btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

/*
 * Samtyckesrutan for besoksstatistik.
 *
 * Ett kort nere till vanster, inte en vagg over hela sidan: besokaren ska
 * kunna lasa sidan utan att svara, och "Avboj" ar exakt lika stor som
 * "Godkann". Pa smala skarmar tar kortet hela bredden. Rutan ligger under
 * mobilmenyns lager (60) men over allt innehall.
 */
.fs-consent {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 40;
	width: min(420px, calc(100vw - 40px));
	padding: 22px 24px;
	background: var(--fs-surface);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-r-md);
	box-shadow: var(--fs-shadow-float);
}

.fs-consent[hidden] {
	display: none;
}

.fs-consent__title {
	margin: 0;
	font-family: var(--fs-font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--fs-ink);
}

.fs-consent__text {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--fs-ink-soft);
}

.fs-consent__text a {
	color: var(--fs-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fs-consent__options {
	display: grid;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.fs-consent__option {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: start;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--fs-ink-soft);
}

.fs-consent__option input {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--fs-accent);
}

.fs-consent__option label {
	cursor: pointer;
}

.fs-consent__option input:disabled + label {
	cursor: default;
}

.fs-consent__option strong {
	display: block;
	color: var(--fs-ink);
	font-weight: 600;
}

.fs-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.fs-consent__actions .fs-btn {
	flex: 1 1 110px;
}

/*
 * Kakknappen: rund, nere till vanster, dar rutan stod. Mork pa ljus grund
 * sa att den syns pa bade vita och beige sektioner utan att skrika.
 */
.fs-consent-fab {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fs-ink);
	color: #fff;
	box-shadow: var(--fs-shadow-float);
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, opacity .15s ease;
}

.fs-consent-fab:hover {
	background: var(--fs-ink-2);
	transform: translateY(-2px);
}

.fs-consent-fab:focus-visible {
	outline: 3px solid var(--fs-accent);
	outline-offset: 3px;
}

.fs-consent-fab[hidden] {
	display: none;
}

/*
 * Nar sidfoten ar i bild lagger knappen sig annars over copyrightraden pa
 * smala skarmar. Skriptet satter klassen med en IntersectionObserver; i
 * sidfoten finns samma ingang som textlank, sa inget gar forlorat.
 */
.fs-consent-fab.is-parked {
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
}

@media (max-width: 720px) {
	.fs-consent-fab {
		left: 12px;
		bottom: 12px;
		width: 42px;
		height: 42px;
	}

	.fs-consent {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding: 18px 18px 16px;
	}
}


/* --- Tillägg för startsidan --------------------------------------------- */

/*
 * Rubrikerna har margin:0 i basen, eftersom samma skala används både med och
 * utan text under sig. Luften läggs därför med en modifierare där designen har
 * den. Temats PHP får inte innehålla en enda inline-stil, så avstånden måste ha
 * namn i stylesheeten.
 */
.fs-gap-sm {
	margin-bottom: 18px;
}

.fs-gap-md {
	margin-bottom: 28px;
}

.fs-gap-lg {
	margin-bottom: 48px;
}

.fs-top-sm {
	margin-top: 24px;
}

.fs-top-lg {
	margin-top: 56px;
}

.fs-top-md {
	margin-top: 40px;
}

/* Rad överst i ett tjänstekort: ikon till vänster, pil till höger. */
.fs-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*
 * Faktaraden langst ned i ett kort: vad sidan innehaller, inte vad den lovar.
 *
 * Den star avskild fran brodtexten med en harfin linje och i mindre grad, sa att
 * den last som en fotnot till kortet och inte som en tredje textrad.
 */
.fs-card__meta {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--fs-hairline);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fs-ink-soft);
}

/*
 * Namnet star pa samma rad som pilen. Forut lag en tom <span> dar bara for att
 * putta pilen at hoger, och rubriken hamnade pa raden under - kortet inleddes
 * alltsa med en rad som var tom sa nar som pa en pil.
 */
.fs-card__top .fs-h3 {
	margin: 0;
}

/* Pilen i tjänstekortet. Mot ljus botten gäller den mörkare accenten. */
.fs-card__arrow {
	color: var(--fs-accent);
	font-size: 20px;
	line-height: 1;
}

/* Kort utan egen ram eller platta - guidekortet bärs av sin bild. */
.fs-card--bare {
	gap: 16px;
	padding: 0;
	background: transparent;
	border: 0;
}

/*
 * Mörkt kort mot ljus sektion - paketet som är märkt "vanligast". Kickern,
 * bocken och brödtexten måste byta färg med underlaget; utan det ärver de
 * varianterna för ljus botten och tappar kontrast.
 */
.fs-card--ink {
	background: var(--fs-ink);
	color: var(--fs-on-dark);
	border-color: transparent;
}

.fs-card--ink .fs-kicker,
.fs-card--ink .fs-check > li::before {
	color: var(--fs-accent);
}

.fs-card--ink .fs-text,
.fs-card--ink .fs-note {
	color: var(--fs-on-dark-3);
}

/*
 * Lodrat lista med lankar - "andra tjanster", "las mer om".
 *
 * Ingen punktlista. Punkterna konkurrerar med lankarna om blicken, och raderna
 * ar redan avgransade av sin egen luft.
 */
.fs-linklist {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Raden med grannkommuner under marktexten.
 *
 * Etiketten star pa egen rad ovanfor lankarna och inte som forsta ord i samma
 * rad: den ar en forklaring, inte ett av valen, och i samma rad hade den last
 * som en kommun som hette "Vi arbetar aven i grannkommunerna".
 */
.fs-nearby {
	margin-top: 28px;
}

.fs-nearby__label {
	margin: 0 0 12px;
}

/*
 * Kommunlistan pa /omraden/ finns bara for telefonen (samma brytpunkt som
 * karusellen och den dekorativa kartan). Pa bredare skarmar gor kartan i
 * hjalten och korten under samma jobb.
 */
@media (min-width: 721px) {
	.fs-kommunlista {
		display: none;
	}
}

.fs-kommunlista .fs-h3,
.fs-kommunlista .fs-nearby__label {
	text-align: center;
}

/*
 * Vita piller med skugga, centrerade, mork text. Vid tryck (:active) och
 * pa det kort man haller pa att oppna blir pillret orange med vit text -
 * samma sprak som knapparna. Ingen hover-effekt: listan finns bara pa
 * pekskarmar, dar hover bara skulle fastna efter ett tryck.
 */
.fs-pills {
	justify-content: center;
	gap: 10px;
}

.fs-pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	background: var(--fs-surface);
	color: var(--fs-ink);
	border-radius: var(--fs-r-pill);
	box-shadow: 0 6px 18px -8px rgba(22, 25, 29, 0.35), 0 1px 2px rgba(22, 25, 29, 0.08);
	font-family: var(--fs-font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

.fs-pill:active,
.fs-pill.is-pressed,
.fs-pill:focus-visible {
	background: var(--fs-accent);
	color: #fff;
	transform: scale(0.97);
}

/* Rad med etiketter, t.ex. under ett tjänstekort. */
.fs-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* Steg-etikett med utfyllnadslinje i processkorten. */
.fs-steprule {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fs-steprule__line {
	flex: 1;
	height: 1px;
	background: var(--fs-hairline);
}

/*
 * Bildrutan i "därför Fuktspecialisten": bred bild över båda spalterna, sedan
 * kvadratisk bild och ROT-rutan bredvid varandra.
 */
.fs-media-duo {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr 1fr;
}

.fs-media-duo__wide {
	grid-column: 1 / -1;
}

/* Betygsrad. Symbolen är stor nog för att bära den rena accenten. */
.fs-stars {
	color: var(--fs-accent);
	font-size: 15px;
	letter-spacing: 2px;
}

.fs-stars--lg {
	font-size: 20px;
}

/* Initialer i ett omdöme. Orange fyllning bär mörk text, aldrig vit. */
.fs-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	background: var(--fs-accent);
	color: #fff;
	border-radius: 50%;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
}

/* Namnrad under ett citat. */
.fs-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.fs-byline__name {
	display: block;
	font-weight: 600;
}

.fs-byline__meta {
	font-size: 13px;
	color: var(--fs-muted-2);
}

.fs-sec--dark .fs-byline__meta,
.fs-sec--photo .fs-byline__meta {
	color: var(--fs-on-dark-3);
}

/* Metarad ovanför en guiderubrik: kategori och lästid. */
.fs-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	color: var(--fs-muted-2);
}

.fs-meta__cat {
	font-weight: 600;
	color: var(--fs-accent);
}

/* Tar bort komponentens egen bottenmarginal där föräldern äger avståndet. */
.fs-flush {
	margin-bottom: 0;
}

/*
 * Brödtext inuti ett kort - ett snäpp mindre än .fs-text. Färgen följer
 * underlaget: dämpad mot ljus botten, ljus mot mörk, och ärvd mot den orange
 * fyllningen, där varje dämpad texttoken skulle falla under 4.5:1.
 */
.fs-card__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--fs-muted);
}

.fs-sec--dark .fs-card__text,
.fs-sec--photo .fs-card__text,
.fs-card--glass .fs-card__text,
.fs-card--ink .fs-card__text {
	color: var(--fs-on-dark-3);
}

.fs-card--accent .fs-card__text {
	color: inherit;
}

/* Rubriklänk i ett kort - ärver rubrikens färg i stället för länkfärgen. */
.fs-card__link {
	color: inherit;
	text-decoration: none;
}

.fs-card__link:hover {
	color: var(--fs-accent);
}

/* Kortets bild som lank: en liten zoom sager att den gar att klicka pa. */
.fs-card__media {
	display: block;
	color: inherit;
	text-decoration: none;
}

.fs-card__media img {
	transition: transform .35s ease;
}

.fs-card__media:hover img {
	transform: scale(1.03);
}

/* --- Enskild guide ------------------------------------------------------ */

.fs-article-hero {
	margin-top: 8px;
}

.fs-article-head {
	max-width: 640px;
}

/* Vit ruta med skugga pa den beiga sektionsbakgrunden: "Kostnadsfritt platsbesok". */
.fs-card--raised {
	background: var(--fs-surface);
	border-color: transparent;
	box-shadow: var(--fs-shadow-card);
}

/*
 * Artikelspalten och sidospalten. Brodtexten ar vanster (dar ogat borjar),
 * innehallsforteckning och platsbesok till hoger, klistrade. Under 900 px
 * staplas allt: forteckningen hamnar ovanfor texten, dar den gor nytta, och
 * rutan om platsbesoket under.
 */
.fs-grid--article {
	--fs-grid-gap: 40px clamp(40px, 5vw, 96px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	align-items: start;
}

.fs-prose--article {
	max-width: 72ch;
}

.fs-rail--article {
	display: grid;
	gap: 24px;
}

.fs-toc {
	padding: 0 0 24px;
	border-bottom: 1px solid var(--fs-line);
}

.fs-toc__title {
	margin: 0 0 12px;
	font-family: var(--fs-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fs-ink);
}

.fs-toc__list {
	margin: 0;
	padding: 0 0 0 20px;
	display: grid;
	gap: 8px;
	font-size: 14.5px;
	line-height: 1.45;
}

.fs-toc__list li::marker {
	color: var(--fs-accent);
	font-weight: 600;
}

.fs-toc__link {
	color: var(--fs-ink-soft);
	text-decoration: none;
}

.fs-toc__link:hover {
	color: var(--fs-accent);
}

.fs-aside-cta__title {
	margin: 0 0 8px;
	font-family: var(--fs-font-head);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fs-ink);
}

.fs-aside-cta .fs-stack {
	gap: 10px;
}

.fs-article-service {
	max-width: 72ch;
}

/* Foregaende/nasta guide: tva kort sida vid sida, nasta hogerstallt. */
.fs-guide-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 72ch;
	padding-top: 28px;
	border-top: 1px solid var(--fs-line);
}

.fs-guide-nav__link {
	display: grid;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}

.fs-guide-nav__link--next {
	grid-column: 2;
	text-align: right;
}

.fs-guide-nav__label {
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fs-muted-2);
}

.fs-guide-nav__title {
	font-family: var(--fs-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fs-ink);
	transition: color .15s ease;
}

.fs-guide-nav__link:hover .fs-guide-nav__title {
	color: var(--fs-accent);
}

@media (max-width: 900px) {
	.fs-grid--article {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Forteckningen forst, texten sedan, platsbesoket sist. */
	.fs-article-aside {
		display: contents;
	}

	.fs-rail--article {
		display: contents;
	}

	.fs-toc {
		order: -1;
		padding: 0;
		border: 0;
	}

	.fs-aside-cta {
		order: 1;
	}
}

@media (max-width: 560px) {
	.fs-guide-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.fs-guide-nav__link--next {
		grid-column: 1;
		text-align: left;
	}
}

/* Roll under ett medarbetarnamn. */
.fs-role {
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fs-accent);
}

/* Rutnät som också är en lista - tar bort webbläsarens punkter och indrag. */
.fs-grid--plain {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ======================================================== 6. FORMULÄR === */

/*
 * Formularet. Luften ar medvetet tilltagen: med 14 px mellan faltradarna lag
 * etiketter, rutor och hjalptexter sa tatt att formularet lastes som ett enda
 * block och sag ofardigt ut.
 */
/*
 * [hidden] maste vinna over en egen display.
 *
 * Webblasarens egen regel ar [hidden] { display: none }, men den kommer fran
 * anvandaragenten och forlorar mot varenda display i den har filen. Ett
 * formularsteg med display: grid och hidden satt fortsatte darfor att ritas ut
 * i sin helhet - stegningen satte attributet, ingenting hande, och hela
 * formularet lag kvar synligt. Samma sak dolde vaxlingen i offertkalkylatorn:
 * bada panelerna ritades samtidigt.
 *
 * !important ar ratt har och inte en genvag. Regeln ska sla allt, och det ar
 * precis sa normalize.css och liknande losningar skriver den.
 */
[hidden] {
	display: none !important;
}

.fs-form {
	display: grid;
	gap: 20px;
	padding: 30px;
	background: var(--fs-surface);
	color: var(--fs-ink);
	border-radius: var(--fs-r-lg);
}

.fs-form__row {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.fs-field {
	display: grid;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-muted);
}

/* Kryssruta eller radioknapp på en rad. */
.fs-field--inline {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.fs-input,
.fs-select,
.fs-textarea {
	width: 100%;
	padding: 13px 15px;
	background: var(--fs-ground);
	color: var(--fs-ink);
	border: 1px solid var(--fs-hairline-2);
	border-radius: var(--fs-r-sm);
	font-size: 15px;
	font-weight: 400;
}

.fs-input::placeholder,
.fs-textarea::placeholder {
	color: var(--fs-muted-3);
}

.fs-input:hover,
.fs-select:hover,
.fs-textarea:hover {
	border-color: var(--fs-hairline-3);
}

.fs-textarea {
	min-height: 118px;
	line-height: 1.6;
	resize: vertical;
}

/* Fält som task 11 markerar som felaktigt. */
.fs-input[aria-invalid="true"],
.fs-select[aria-invalid="true"],
.fs-textarea[aria-invalid="true"] {
	border-color: var(--fs-err);
}

.fs-form__error {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-err);
}

.fs-form__note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fs-muted-2);
}

.fs-form__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fs-form__note a:hover {
	color: var(--fs-ink);
}

/* Kvittensruta efter skickat formulär. */
.fs-form__ok {
	margin: 0;
	padding: 28px;
	background: rgba(46, 157, 106, 0.12);
	border: 1px solid rgba(46, 157, 106, 0.4);
	border-radius: 20px;
}

/* --- Kontaktsidans egna listor --------------------------------------------- */

/*
 * Numrerad lista med siffran i en cirkel. <ol> bar redan numreringen for den
 * som lyssnar, sa siffran vi ritar ar dekor och bars av ett aria-hidden span -
 * annars laser en skarmlasare "ett ett" pa varje rad.
 */
.fs-steps {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fs-step {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 16px;
	align-items: start;
}

.fs-step__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--fs-accent-tint);
	color: var(--fs-accent-600);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
}

.fs-step h3 {
	margin: 0 0 4px;
}

/* Etikett och varde i tva spalter, med radbrytning nar det blir trangt. */
.fs-deflist {
	display: grid;
	gap: 12px;
	margin: 0 0 18px;
}

.fs-deflist__row {
	display: grid;
	grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
	gap: 6px 14px;
	align-items: baseline;
}

.fs-deflist dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fs-muted-2);
}

.fs-deflist dd {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--fs-ink);
}

@media (max-width: 480px) {
	.fs-deflist__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Offertkalkylatorn ---------------------------------------------------- */

/*
 * Kalkylatorn ligger pa morkt underlag i kontaktsektionen. Den ar byggd som en
 * egen ruta med egen botten i stallet for att lana sektionens - annars flyter
 * reglage och knappar ut i bakgrunden och det gar inte att se var verktyget
 * borjar och slutar.
 */
.fs-calc {
	display: grid;
	gap: 20px;
	margin-top: 26px;
	padding: 24px;
	background: var(--fs-glass);
	border: 1px solid var(--fs-glass-line);
	border-radius: var(--fs-r-lg);
}

/* Vaxlaren mellan de tva tjansterna. */
.fs-calc__tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: rgba(0, 0, 0, .22);
	border-radius: var(--fs-r-pill);
}

.fs-calc__tab {
	flex: 1;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-radius: var(--fs-r-pill);
	font-size: 14px;
	font-weight: 600;
	color: var(--fs-on-dark-3);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.fs-calc__tab:hover {
	color: #fff;
}

.fs-calc__tab[aria-selected="true"] {
	background: var(--fs-accent);
	color: #fff;
}

.fs-calc__panel {
	display: grid;
	gap: 20px;
}

.fs-calc .fs-field,
.fs-calc .fs-field__label {
	color: var(--fs-on-dark-3);
}

.fs-calc .fs-field__row strong {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* Knappgrupperna star mot mork botten och behover egna farger. */
.fs-calc .fs-pick span {
	background: rgba(255, 255, 255, .06);
	color: var(--fs-on-dark);
	border-color: var(--fs-glass-line);
}

.fs-calc .fs-pick input:checked + span {
	background: var(--fs-accent);
	color: #fff;
	border-color: var(--fs-accent);
}

/* Resultatet. Spannet ar sidans storsta tal och far bara vikten. */
.fs-calc__result {
	padding: 20px;
	background: rgba(0, 0, 0, .25);
	border-radius: var(--fs-r-md);
	text-align: center;
}

.fs-calc__label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--fs-on-dark-3);
}

.fs-calc__sum {
	margin: 0;
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.fs-calc__note {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--fs-on-dark-3);
}

.fs-calc__fine {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fs-on-dark-3);
}

/* --- Kontaktformularets steg ---------------------------------------------- */

/*
 * Formularet ar indelat i tre fieldset. Grupperna ar det enda som skiljer det
 * har formularet fran temats ovriga: fieldset har egen default-styling i varje
 * webblasare, sa ram, marginal och indrag nollas innan nagot annat satts.
 */
.fs-form--lead {
	gap: 26px;
}

.fs-form__step {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

/*
 * Skiljelinjen behovs bara nar stegen ligger under varandra, alltsa utan JS.
 * Med stegningen igang syns ett steg i taget och en linje over det forsta vore
 * bara en tom rand.
 */
.fs-form__step + .fs-form__step {
	padding-top: 26px;
	border-top: 1px solid var(--fs-hairline-2);
}

.js .fs-form__step + .fs-form__step {
	padding-top: 0;
	border-top: 0;
}

.fs-form__legend {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 2px;
	padding: 0;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--fs-ink);
}

/* Siffran i steget. Den ar dekor - legend-texten bar redan inneborden. */
.fs-form__num {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: var(--fs-accent);
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
}

.fs-field__help {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fs-muted-2);
}

/*
 * Postnumret far fylla sin ruta. Det behover inte 160 px for fem siffror, men
 * ett falt som slutar mitt i raden ser ut som ett misstag bredvid adressfaltet
 * som gar hela vagen ut.
 */
.fs-field--zip {
	max-width: none;
}

.fs-form__hint {
	margin: 0;
	padding: 12px 14px;
	background: var(--fs-accent-tint);
	border-radius: var(--fs-r-sm);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fs-ink);
}

/*
 * Notisen har ljus botten aven inne i en mork sektion, sa lanken maste ta
 * tillbaka sin farg. Utan den har raden arvde den .fs-sec--dark .fs-link och
 * blev vit mot ljus orange - 1,1:1, alltsa osynlig.
 */
.fs-form__hint .fs-link {
	/*
	 * Morkt och understruket, inte orange. Temats accent ger bara 2,7:1 mot
	 * den ljusa notisbottnen, och den morkare orangen ar den bruna ton kunden
	 * uttryckligen inte vill ha nagonstans pa sajten.
	 */
	color: var(--fs-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Obligatoriska falt --------------------------------------------------- */

.fs-req {
	color: var(--fs-err);
	font-weight: 700;
	text-decoration: none;
	border: 0;
	cursor: help;
}

/* --- Egna rullgardiner ---------------------------------------------------- */

/*
 * En inbyggd <select> oppnar at det hall det finns plats. Kommunlistan med
 * sina 26 poster fallde darfor uppat och tackte faltet man just fyllt i. Den
 * har listan ligger absolut under knappen och kan bara oppna nedat.
 *
 * Den riktiga rullgardinen ligger kvar och ar den som postar - det som byggs
 * har ar ett skal runt den.
 */
.fs-combo {
	position: relative;
}

/* Rullgardinen sjalv doljs, men blir kvar i formularet. */
.fs-combo__native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.fs-combo__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 13px 15px;
	background: var(--fs-ground);
	color: var(--fs-ink);
	border: 1px solid var(--fs-hairline-2);
	border-radius: var(--fs-r-sm);
	font-size: 15px;
	font-weight: 400;
	text-align: left;
	cursor: pointer;
}

.fs-combo__button:hover {
	border-color: var(--fs-hairline-3);
}

.fs-combo__button[aria-expanded="true"] {
	border-color: var(--fs-accent);
}

/* Platshallaren ska synas som en platshallare, inte som ett valt varde. */
.fs-combo__value.is-placeholder {
	color: var(--fs-muted-3);
}

.fs-combo__caret {
	width: 0;
	height: 0;
	flex: none;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--fs-muted-2);
}

/*
 * Panelen. top: 100% ar hela poangen - den kan aldrig hamna ovanfor faltet.
 * Ar listan langre an max-height rullar den i sig sjalv i stallet.
 */
.fs-combo__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--fs-hairline-2);
	border-radius: var(--fs-r-sm);
	box-shadow: 0 14px 34px rgba(16, 18, 22, .16);
}

.fs-combo__search {
	width: 100%;
	margin-bottom: 6px;
	padding: 9px 11px;
	background: var(--fs-ground);
	color: var(--fs-ink);
	border: 1px solid var(--fs-hairline-2);
	border-radius: var(--fs-r-sm);
	font-size: 14px;
}

.fs-combo__list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 240px;
	overflow-y: auto;
}

.fs-combo__option {
	padding: 9px 11px;
	border-radius: 6px;
	font-size: 14.5px;
	line-height: 1.35;
	cursor: pointer;
}

.fs-combo__option:hover,
.fs-combo__option.is-active {
	background: var(--fs-accent-tint);
}

.fs-combo__option[aria-selected="true"] {
	background: var(--fs-accent);
	color: #fff;
}

.fs-combo__empty {
	margin: 0;
	padding: 10px 11px;
	font-size: 13.5px;
	color: var(--fs-muted-2);
}

/* --- Stegindikatorn ------------------------------------------------------- */

/*
 * Prickarna och raden under. Bada byggs av initLeadSteps() ur antalet fieldset,
 * sa markupen har inget hardkodat antal - blir det ett steg till eller farre
 * foljer indikatorn med.
 */
.fs-form__progress {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin: 0 0 4px;
	text-align: center;
}

.fs-form__track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/*
 * Stegets rubrik star i indikatorn, sa fieldsetets egen legend skulle saga
 * samma sak en gang till strax under. Den doljs darfor visuellt - men bara nar
 * JS kor. Utan skript finns ingen indikator, alla steg ligger under varandra,
 * och da ar legenden det enda som skiljer dem at.
 */
.js .fs-form__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * En prick per steg. Linjen mellan dem ritas av prickens egen ::after och inte
 * av ett extra element, sa att antalet prickar ar det enda JS behover skapa.
 */
.fs-form__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: none;
	background: var(--fs-ground);
	border: 1px solid var(--fs-hairline-2);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: var(--fs-muted-2);
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.fs-form__dot + .fs-form__dot::after {
	content: "";
	position: absolute;
	right: 100%;
	width: 8px;
	height: 2px;
	background: var(--fs-hairline-2);
}

/* Steget man star i. */
.fs-form__dot.is-now {
	background: var(--fs-accent);
	border-color: var(--fs-accent);
	color: #fff;
}

/*
 * Avklarade steg. Bocken satts som text av initLeadSteps() och inte med
 * content i css. Ett forsok med content: "\2713" plus font-size: 0 pa
 * foraldern gav bade en felaktig tecken och siffran kvar bredvid - tecknet ar
 * enklare att bara skriva dit.
 */
.fs-form__dot.is-done {
	background: var(--fs-accent-tint);
	border-color: var(--fs-accent);
	color: var(--fs-accent-600);
}

.fs-form__dot.is-done + .fs-form__dot::after,
.fs-form__dot.is-now + .fs-form__dot::after {
	background: var(--fs-accent);
}

.fs-form__count {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--fs-muted-2);
}

/* Knapparna mellan stegen. Tillbaka till vanster, Nasta till hoger. */
.fs-form__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * Den knapp som for vidare star till hoger, vilken det an ar. Pa sista steget
 * byter Skicka plats med Nasta och flodet ser likadant ut hela vagen.
 */
.fs-form__nav [data-fs-form-next],
.fs-form__nav [data-fs-form-submit] {
	margin-left: auto;
}

/*
 * Etiketten over en knappgrupp. Grupperna bar bara aria-label forut - den lases
 * upp men syns inte, sa den som ser skarmen motte sex knappar utan att veta vad
 * de svarade pa. Etiketten ar nu riktig text och kopplas med aria-labelledby,
 * sa att det som syns och det som lases upp ar samma sak.
 */
.fs-field__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-muted);
}

/* Etikett och varde pa var sin sida, t.ex. "Gravdjup   1,8 m". */
.fs-field__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

/*
 * Skakningen pa ett falt som saknas.
 *
 * Felmeddelandet under faltet ar latt att missa nar man just tryckt Nasta och
 * blicken redan ar pa vag nerat. Rorelsen drar tillbaka den. Den ar kort och
 * sma - fyra pixlar - och ska lasas som "har hande nagot", inte som en
 * animation.
 */
@keyframes fs-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

.is-shake {
	animation: fs-shake .38s ease;
}

/*
 * Den som bett om mindre rorelse far en ram i stallet. Signalen ska finnas
 * kvar - det ar bara satt att ge den som byts.
 */
@media (prefers-reduced-motion: reduce) {
	.is-shake {
		animation: none;
		outline: 2px solid var(--fs-err);
		outline-offset: 3px;
	}
}

/* Felmeddelande under ett enskilt falt, satt av validateField(). */
.fs-field__error {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--fs-err);
}

/* --- Valknappar ----------------------------------------------------------- */

/*
 * Radioknappar som ser ut som knappar. Den riktiga <input> ligger kvar i
 * markupen och doljs visuellt i stallet for att tas bort: tangentbord,
 * skarmlasare och formularposten ska fungera precis som for en vanlig
 * radiogrupp. Allt utseende hanger darfor pa :checked och :focus-visible hos
 * inputen, som styr sitt eget syskon.
 */
.fs-picks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fs-pick {
	position: relative;
	display: inline-flex;
}

.fs-pick input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.fs-pick span {
	display: inline-flex;
	align-items: center;
	padding: 11px 16px;
	background: var(--fs-ground);
	color: var(--fs-ink);
	border: 1px solid var(--fs-hairline-2);
	border-radius: var(--fs-r-pill);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.fs-picks--tight .fs-pick span,
.fs-pick--sm span {
	padding: 8px 14px;
	font-size: 13.5px;
	font-weight: 500;
}

.fs-pick span:hover {
	border-color: var(--fs-accent);
}

.fs-pick input:checked + span {
	background: var(--fs-accent);
	color: #fff;
	border-color: var(--fs-accent);
}

/* En obesvarad obligatorisk grupp, markerad av validateForm(). */
.fs-picks.is-missing .fs-pick span {
	border-color: var(--fs-err);
}

/* Det akuta alternativet ska ga att hitta utan att lasa alla fem. */
.fs-pick--alert span {
	border-color: rgba(193, 45, 32, 0.45);
	color: #a3271c;
}

.fs-pick--alert input:checked + span {
	background: #c12d20;
	color: #fff;
	border-color: #c12d20;
}

/* Fokusringen maste ritas om: den riktiga inputen syns inte. */
.fs-pick input:focus-visible + span {
	outline: 2px solid var(--fs-accent);
	outline-offset: 2px;
}

/* --- Bifogade bilder ------------------------------------------------------ */

.fs-upload {
	gap: 8px;
}

.fs-upload__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-muted);
}

/*
 * Hela rutan ar en <label> for filfaltet, sa ett klick var som helst i den
 * oppnar filvaljaren. Sjalva inputen ligger kvar i flodet men utan storlek -
 * en display:none hade tagit den ur tabbordningen.
 */
.fs-upload__drop {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--fs-ground);
	border: 1px dashed var(--fs-hairline-3);
	border-radius: var(--fs-r-sm);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.fs-upload__drop:hover {
	background: var(--fs-accent-tint);
	border-color: var(--fs-accent);
}

.fs-upload__icon {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	color: var(--fs-accent);
}

.fs-upload__text {
	display: grid;
	gap: 2px;
}

.fs-upload__text strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--fs-ink);
}

.fs-upload__text small {
	font-size: 12px;
	line-height: 1.5;
	color: var(--fs-muted-2);
}

.fs-upload__drop input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip-path: inset(50%);
	overflow: hidden;
}

.fs-upload__drop:focus-within {
	outline: 2px solid var(--fs-accent);
	outline-offset: 2px;
}

/* Listan over valda filer fylls av initLeadForm(). */
.fs-upload__list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-upload__list:empty {
	display: none;
}

.fs-upload__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 6px 8px 6px 6px;
	background: var(--fs-ground);
	border-radius: var(--fs-r-sm);
	font-size: 13px;
	color: var(--fs-muted);
}

.fs-upload__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Krysset som plockar bort en vald bild. */
.fs-upload__remove {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: none;
	padding: 0;
	background: transparent;
	border: 1px solid var(--fs-hairline-2);
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	color: var(--fs-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.fs-upload__remove:hover {
	background: var(--fs-err);
	border-color: var(--fs-err);
	color: #fff;
}

.fs-upload__note {
	font-size: 12px;
	color: var(--fs-muted-2);
}

.fs-upload__thumb {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	object-fit: cover;
	border-radius: 6px;
}

.fs-upload__item--bad {
	color: var(--fs-err);
}

/* Reglage i kalkylatorn. */
.fs-range {
	width: 100%;
	accent-color: var(--fs-accent);
}

.fs-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--fs-accent);
}

/* Valknappar, t.ex. markförhållande. */
.fs-choice {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.fs-choice__btn {
	padding: 9px 16px;
	background: transparent;
	color: inherit;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--fs-r-pill);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.fs-choice__btn[aria-pressed="true"] {
	background: var(--fs-accent);
	color: #fff;
	border-color: var(--fs-accent);
}

/* Panel runt kalkylatorn mot mörk botten. */
.fs-panel {
	display: grid;
	gap: 20px;
	padding: 26px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--fs-r-lg);
}

.fs-panel__foot {
	padding-top: 20px;
	border-top: 1px solid var(--fs-line-dark);
}

/*
 * Honungsfälla. Ett fält som en människa aldrig ser och en robot fyller i.
 * Det får varken ritas ut eller läsas upp, och det tas ur tabbordningen i
 * markupen. display:none skulle få vissa robotar att hoppa över det, därför
 * flyttas det ur bild i stället.
 */
.fs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Fältetiketter i kalkylatorpanelen ligger mot mörk botten. Regeln är scopad
 * till .fs-panel med flit: kontaktformuläret står på vit yta inuti samma mörka
 * sektion, och en sektionsscopad regel skulle bleka dess etiketter.
 */
.fs-panel .fs-field {
	color: var(--fs-on-dark-2);
}

/* ============================================================= 7. FAQ === */

/*
 * Byggd på <details>/<summary>. Plustecknet kommer från ::after och vänds till
 * minus av [open] - accordionen fungerar utan JS.
 */
.fs-faq {
	display: grid;
	gap: 10px;
}

.fs-faq__item {
	overflow: hidden;
	background: var(--fs-surface);
	border: 1px solid var(--fs-hairline);
	border-radius: var(--fs-r-md);
}

.fs-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.4;
	color: var(--fs-ink);
	transition: color .2s ease;
}

.fs-faq__q::-webkit-details-marker {
	display: none;
}

.fs-faq__q::marker {
	content: "";
}

/* kontrast: designens hover är ren accent på 16.5px text - vi kör accent-link. */
.fs-faq__q:hover {
	color: var(--fs-accent);
}

.fs-faq__q::after {
	content: "+";
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	background: var(--fs-accent-tint);
	color: var(--fs-accent);
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
}

.fs-faq__item[open] .fs-faq__q::after {
	content: "\2212";
}

.fs-faq__a {
	margin: 0;
	padding: 0 22px 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--fs-ink-soft);
}

/* Variant mot vit sektion: krämfärgade rader. */
.fs-faq--ground .fs-faq__item {
	background: var(--fs-ground);
	border-color: transparent;
}

/* Svaret körs genom wpautop, så styckenas egna ytterkanter tas bort här. */
.fs-faq__a > :first-child {
	margin-top: 0;
}

.fs-faq__a > :last-child {
	margin-bottom: 0;
}

/* --- Tjänstesidan ------------------------------------------------------- */

/*
 * Brödsmulor överst i tjänstesidans hero. Wrappern är antingen temats egen
 * <nav> eller Rank Maths <nav class="rank-math-breadcrumb"><p>…</p></nav>, så
 * både direkta barn och ett inbäddat stycke måste ligga rätt.
 */
.fs-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	font-size: 13.5px;
	color: var(--fs-on-dark-3);
}

.fs-crumbs p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.fs-crumbs a {
	color: inherit;
	text-decoration: none;
}

.fs-crumbs a:hover {
	color: #fff;
}

/* Sista ledet är sidan man står på - full styrka mot de dämpade föregångarna. */
.fs-crumbs__current,
.fs-crumbs .last {
	color: #fff;
}

/* Rubrik som ska brytas tidigare än radlängden annars ger - "vad ingår". */
.fs-h2--narrow {
	max-width: 22ch;
}

/* Kickern i riktprisrutan ligger på orange fyllning och ärver kortets text. */
.fs-card--accent .fs-kicker {
	color: inherit;
}

/* ========================================================= 8. RÖRELSE === */

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(251, 140, 0, 0.45);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(251, 140, 0, 0);
	}
}

.fs-rise {
	animation: rise .7s ease both;
}

.fs-rise--delay {
	animation: rise .9s .1s ease both;
}

.fs-pulse {
	animation: pulse 1.8s infinite;
}

/*
 * Scroll-avslöjande. main.js sätter .fs-reveal-ready först och .fs-revealed när
 * elementet syns. Utan JS - och under prefers-reduced-motion, där initReveal()
 * hoppar av direkt - sätts ingen klass och innehållet syns från början.
 */
.fs-reveal-ready {
	opacity: 0;
}

.fs-revealed {
	animation: rise .7s ease both;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.fs-reveal-ready {
		opacity: 1;
	}
}

/* ========================= 9. GUIDER OCH KONTAKTSIDA === */

/*
 * Brödsmulor mot ljus botten. Basregeln är skriven för tjänstesidans mörka
 * hero och sätter --fs-on-dark-3, som mot vitt ger drygt 1,5:1. Varianten
 * byter bara färgerna; layouten ärvs.
 */
.fs-crumbs--light {
	color: var(--fs-muted);
}

.fs-crumbs--light a {
	color: var(--fs-muted);
}

.fs-crumbs--light a:hover {
	color: var(--fs-accent);
}

.fs-crumbs--light .fs-crumbs__current,
.fs-crumbs--light .last {
	color: var(--fs-ink);
}

/*
 * Sidnumrering i guidearkivet. Markupen kommer från the_posts_pagination():
 * <nav class="navigation fs-pagination"><div class="nav-links">
 * <a class="page-numbers">…</a>. Aktuell sida ligger på accentytan och bär
 * därför mörk text.
 */
.fs-pagination {
	margin-top: 40px;
}

.fs-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/*
 * Byte av sida utan omladdning.
 *
 * Medan nasta sida hamtas star de gamla korten kvar nedtonade i stallet for att
 * forsvinna. Rutnatet behaller da sin hojd, sidan hoppar inte till, och det syns
 * att nagot hander. pointer-events stanger av dubbelklick pa en lank vars svar
 * redan ar pa vag.
 */
[data-fs-areas].is-loading [data-fs-areas-grid] {
	opacity: .45;
	transition: opacity .18s ease;
}

[data-fs-areas].is-loading [data-fs-areas-nav] {
	pointer-events: none;
}

.fs-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	background: var(--fs-surface);
	color: var(--fs-ink-soft);
	border: 1px solid var(--fs-hairline-2);
	border-radius: var(--fs-r-sm);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.fs-pagination a.page-numbers:hover {
	color: var(--fs-ink);
	border-color: var(--fs-accent);
}

.fs-pagination .page-numbers.current {
	background: var(--fs-accent);
	color: #fff;
	border-color: var(--fs-accent);
}

.fs-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/*
 * WordPress egen rubrik ovanför sidnumreringen. Den ska läsas upp men inte
 * ritas ut, och temat hade ingen regel för klassen sedan tidigare.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================ 10. KARTA === */

/*
 * Kartan over Stockholms lan. Markupen kommer fran fs_render_map(), som lindar
 * de kommuner som har en publicerad omradessida i <a href> och lamnar ovriga
 * som rena former.
 *
 * Tre lager i filen:
 *   .fs-map__depth  atta <use>-kloner av samma grupp, forskjutna nedat. De ar
 *                   kartans tjocklek.
 *   .fs-map__top    de riktiga formerna, en <path> per kommun.
 *   .fs-map__area   sjalva kommunen.
 *
 * Om djupet: en <use> klonar sin kalla, och en klon bar med sig de CSS-regler
 * som traffade originalet - aven :hover pa lanken. Utan atgard hade alltsa hela
 * stapeln av atta kloner lyst orange nar man pekade pa kartans yta. Darfor
 * plattas djupet till med filter: brightness(0): oavsett vad klonen arver eller
 * matchar blir den svart, och opaciteten lyfter den till en morker bleckton mot
 * underlaget. Det ar ocksa billigare an att fargsatta atta lager var for sig.
 */

/* Ankare for namnbubblan, som ligger absolut placerad i figuren. */
.fs-map-figure {
	position: relative;
	margin: 0;
}

/* Perspektivet ligger pa omslaget, lutningen pa sjalva kartan. */
.fs-map-stage {
	perspective: 1400px;
	perspective-origin: 50% 38%;
}

.fs-map {
	--fs-map-face: var(--fs-ink-2);
	--fs-map-muted: var(--fs-line);
	--fs-map-edge: var(--fs-ground);

	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	transform-origin: 50% 62%;
	transform: rotateX(24deg) scale(.97);
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/*
 * Kartan reser sig nagot nar den anvands - med pekare via :hover och med
 * tangentbord via :focus-within, sa att den fokuserade kommunen inte lases i
 * kraftig forkortning.
 */
.fs-map-stage:hover .fs-map,
.fs-map-stage:focus-within .fs-map {
	transform: rotateX(10deg) scale(1);
}

/* Mot mork botten byter formerna roll: ytan ljusnar, kanterna blir bakgrunden. */
.fs-sec--dark .fs-map,
.fs-sec--photo .fs-map {
	--fs-map-face: #4a515a;
	--fs-map-muted: #262b31;
	--fs-map-edge: var(--fs-ink);
}

.fs-map__depth {
	fill: var(--fs-ink);
	filter: brightness(0);
	opacity: .82;
	pointer-events: none;
}

.fs-map__top {
	fill: var(--fs-map-muted);
}

.fs-map__area {
	fill: var(--fs-map-muted);
	stroke: var(--fs-map-edge);
	stroke-width: 1.1;
	stroke-linejoin: round;
	transition: fill .18s ease;
}

/* Kommuner utan egen sida ar dekor: de tar varken pekare eller fokus. */
.fs-map__area:not(.fs-map__area--linked) {
	pointer-events: none;
}

.fs-map__area--linked {
	fill: var(--fs-map-face);
	cursor: pointer;
}

.fs-map__link:hover .fs-map__area--linked,
.fs-map__link:focus-visible .fs-map__area--linked {
	fill: var(--fs-accent);
}

/*
 * Ingen fokusram alls pa kartan, i nagot tillstand.
 *
 * Webblasaren ritar sin egen ram som en rektangel runt lankens bounding box,
 * inte runt kommunens form. I ett lutat plan blir det en sned ljus ruta tvars
 * over lanet, och den lag kvar efter klicket. En egen tjock kontur i SVG
 * provades som ersattning och gav samma intryck.
 *
 * Markeringen ar i stallet fyllningen: den kommun som har fokus blir orange,
 * precis som vid hover, och hela kartan reser sig nagot pa :focus-within. Det
 * ar synligt utan att lagga nagot ovanpa kartan.
 */
.fs-map__link,
.fs-map__link:hover,
.fs-map__link:focus,
.fs-map__link:focus-within,
.fs-map__link:focus-visible,
.fs-map__link:active {
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.fs-map__link:focus .fs-map__area--linked,
.fs-map__link:focus-visible .fs-map__area--linked,
.fs-map__link:active .fs-map__area--linked {
	stroke: var(--fs-map-edge);
	stroke-width: 1.1;
	paint-order: normal;
}
/* I mobil blir lutningen for kraftig for en karta som redan ar smal. */
@media (max-width: 640px) {
	.fs-map {
		transform: rotateX(12deg) scale(1);
	}
}

/*
 * Lutningen ar rorelse och stangs av helt. Kartan star kvar i sitt viloläge -
 * ingen overgang och ingen resning vid hover eller fokus - medan fokusmarkering
 * och orange hover fungerar precis som forut.
 */
@media (prefers-reduced-motion: reduce) {
	.fs-map {
		transition: none !important;
	}
	.fs-map-stage:hover .fs-map,
	.fs-map-stage:focus-within .fs-map {
		transform: rotateX(24deg) scale(.97);
	}
}

/* ======================================================== 11. UTSKRIFT === */

@media print {
	.fs-topbar,
	.fs-header,
	.fs-nav,
	.fs-footer,
	.fs-skip,
	.fs-form,
	.fs-panel,
	.fs-actions,
	header,
	footer,
	nav,
	form {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.fs-sec,
	.fs-sec--dark,
	.fs-sec--darker,
	.fs-sec--surface,
	.fs-sec--photo {
		padding-block: 12pt;
		background: #fff !important;
		color: #000 !important;
	}

	.fs-sec__bg,
	.fs-sec__overlay {
		display: none !important;
	}

	.fs-card,
	.fs-faq__item {
		border: 1px solid #999;
		box-shadow: none;
	}

	.fs-faq__item {
		break-inside: avoid;
	}

	.fs-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		word-break: break-all;
	}
}


/* --- Sifferband --------------------------------------------------------- */

/*
 * Fyra fristående kort i stället för designens gemensamma ram. Ikonen över
 * siffran behöver luft omkring sig, och separata kort ger den det utan att
 * rutorna växer ihop. --fs-grid-min håller dem tvåspaltiga på surfplatta och
 * enspaltiga i mobil innan texten börjar brytas.
 */
.fs-grid--stats {
	--fs-grid-min: 230px;
	--fs-grid-gap: 16px;
}

.fs-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px 26px 26px;
}

/* Ikonrutan ärver accenten; svg:n i sin tur ärver rutans färg. */
.fs-stat__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--fs-accent-tint);
	color: var(--fs-accent);
	border-radius: var(--fs-r-sm);
}

.fs-stat .fs-stat__num,
.fs-stat .fs-stat__label {
	margin: 0;
}

.fs-svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* På mörk botten finns ingen ljus tintyta att ligga på. */
.fs-sec--dark .fs-stat__icon,
.fs-sec--photo .fs-stat__icon {
	background: rgba(251, 140, 0, 0.16);
}

/*
 * Två i bredd, i alla bredder. Auto-fit lade annars tre på en rad och lämnade
 * den fjärde ensam. Rutorna behåller 2x2 även i mobil - siffran är kort och
 * etiketten får radbryta i stället för att rutorna staplas på varandra.
 */
.fs-grid--2up {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

/* --- Priskort ----------------------------------------------------------- */

/*
 * Ett kort per prissatt tjänst, byggt av tjänstesidans egna fält. Fyra i bredd
 * på stor skärm, två på surfplatta och ett i mobil - priset behöver rad för att
 * inte brytas mitt i en siffra.
 */
.fs-grid--price {
	--fs-grid-min: 260px;
	--fs-grid-gap: 18px;
}

.fs-price {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px 28px 28px;
}

/* "fran" star pa egen rad ovanfor beloppet, dampat och i mindre grad. */
.fs-price__amount {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Samma typsnitt och vikt som beloppet, bara mindre och ljusare. */
.fs-price__from {
	font-family: var(--fs-font-head);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fs-muted-2);
}

.fs-price__figure {
	font-family: var(--fs-font-head);
	font-weight: 800;
	font-size: clamp(28px, 2.6vw, 34px);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.fs-price__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fs-muted);
}

/* Punkterna trycks ned så att knapparna hamnar i linje mellan korten. */
.fs-price__list {
	gap: 9px;
	margin: 4px 0 0;
	font-size: 14.5px;
	flex: 1;
}

.fs-price__cta {
	margin-top: 6px;
}

/*
 * Namnbubblan pa kartan.
 *
 * Ligger i figuren, utanfor det roterade planet, sa att den star rakt medan
 * kartan lutar. --x och --y sätts av initMap() och pekar pa mitten av den
 * kommun musen ar over - inte pa muspekaren. En etikett som foljer musen ar
 * rorig att lasa och pekar fel sa fort man ror sig langs en gräns.
 *
 * Vit botten, inte orange. Den hovrade kommunen ar redan orange, och orange pa
 * orange forsvann helt - bade bubblan och dess spets.
 *
 * pointer-events: none ar avgorande: annars hamnar bubblan under musen, tar
 * emot pointerleave fran formen under sig och blinkar.
 */
.fs-map-tip {
	position: absolute;
	top: var(--y, 0);
	left: var(--x, 0);
	z-index: 3;
	transform: translate(-50%, calc(-100% - 18px));
	padding: 9px 15px;
	background: var(--fs-surface);
	color: var(--fs-ink);
	border-radius: var(--fs-r-sm);
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
	font-family: var(--fs-font-head);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
	pointer-events: none;
}

/* Spetsen. Roterad kvadrat med samma botten som bubblan. */
.fs-map-tip::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 12px;
	height: 12px;
	background: var(--fs-surface);
	transform: translate(-50%, -58%) rotate(45deg);
	border-radius: 2px;
}

/*
 * Punkten under spetsen, som pa en kartnal: den markerar exakt vilken kommun
 * bubblan hor till. Vit ring runt sa att den syns bade mot den orange
 * kommunen och mot de dampade grannarna.
 */
.fs-map-tip::after {
	content: "";
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	width: 9px;
	height: 9px;
	background: var(--fs-ink);
	border: 2px solid var(--fs-surface);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
/*
 * Ingen fokusram nagonstans i kartan, pa nagot element.
 *
 * Regeln ovan traffar bara <a class="fs-map__link">, men webblasaren ritar
 * ringen runt det fokuserade elementets ruta - och for en SVG-lank bildas den
 * rutan av barnen. Hamnar ringen pa <path>, <g> eller pa rotelementet gar den
 * darfor forbi en regel som bara namner ankaret, och det syntes som en tunn
 * ljus rektangel tvars over det klickade lanet.
 *
 * Har tas den bort pa allt i kartan, oavsett vilket element den hamnar pa.
 * Markeringen finns kvar som fyllning: fokuserad kommun blir orange och hela
 * kartan reser sig nagot pa :focus-within.
 */
.fs-map,
.fs-map *,
.fs-map:focus,
.fs-map *:focus,
.fs-map:focus-visible,
.fs-map *:focus-visible,
.fs-map:focus-within,
.fs-map *:active {
	outline: none !important;
	outline-offset: 0 !important;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Ortlistan och kartan tander varandra.
 *
 * .is-marked satts av initAreaTags() pa bada sidor. Klass i stallet for :hover,
 * eftersom :hover inte gar att satta pa ett element fran ett annat.
 */
.fs-tag--link {
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.fs-tag--link:hover,
.fs-tag--link.is-marked,
.fs-tag--link:focus-visible {
	background: var(--fs-accent);
	border-color: var(--fs-accent);
	color: #fff;
}

/* Punkten framfor orten ar redan orange och forsvinner mot accentytan. */
.fs-tag--link:hover .fs-dot,
.fs-tag--link.is-marked .fs-dot,
.fs-tag--link:focus-visible .fs-dot {
	background: #fff;
}

.fs-map__area.is-marked {
	fill: var(--fs-accent);
}

/*
 * Ortlistans rutor fyller sin cell.
 *
 * Etiketten flyttade in i en <li> nar orterna blev lankar, och grid-cellen ar
 * numera <li>:n. Utan de har raderna krymper sjalva etiketten till textens
 * bredd och raden blir ojamn - rutorna ska ha samma bredd som innan.
 */
.fs-grid--plain > li {
	display: flex;
}

.fs-grid--plain > li > .fs-tag {
	flex: 1;
	justify-content: flex-start;
}