/* Grund: GOV.UK Design System (raster, typografisk skala, komponenter och mönster).
   Egna färger och systemtypsnitt, så att inget kan förväxlas med brittisk statlig profil. */
:root {
  --text: #0b0c0c;
  --text-sekundar: #4d5458;
  --bakgrund: #ffffff;
  --yta: #f3f2f1;
  --kant: #b1b4b6;
  --kant-mork: #5f6669;
  --profil: #0b3c49;
  --profil-ljus: #d6e7eb;
  --lank: #0f5a8a;
  --lank-besokt: #5b3a8c;
  --lank-hover: #083a5c;
  --fokus: #ffdd00;
  --fel: #b3261e;
  --klar: #0f6b3a;
  --kolumn: 960px;
  --marginal: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bakgrund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.25;
}
@media (min-width: 40.0625em) {
  :root { --marginal: 30px; }
  body { font-size: 1.1875rem; line-height: 1.32; }
}

/* Länkar och fokus enligt GOV.UK:s princip: gul bakgrund med svart underkant */
a { color: var(--lank); text-decoration-thickness: max(1px, .0625rem); text-underline-offset: .15em; }
a:visited { color: var(--lank-besokt); }
a:hover { color: var(--lank-hover); text-decoration-thickness: max(3px, .1875rem); }
a:focus-visible {
  outline: 3px solid transparent;
  color: var(--text);
  background: var(--fokus);
  box-shadow: 0 -2px var(--fokus), 0 4px var(--text);
  text-decoration: none;
}
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 0; }

.bredd { max-width: calc(var(--kolumn) + var(--marginal) * 2); margin: 0 auto; padding: 0 var(--marginal); }
.dold {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important;
}

/* Hoppa till innehållet */
.hopplank {
  position: absolute; left: -9999px; top: 0;
  padding: 10px 15px; background: var(--fokus); color: var(--text);
  text-decoration: underline; z-index: 10;
}
.hopplank:focus { left: 0; }
.hopplank:visited { color: var(--text); }

/* Sidhuvud */
.sidhuvud { background: var(--profil); color: #fff; }
.sidhuvud .bredd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
.sidhuvud__namn {
  color: #fff; font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -.01em;
  text-decoration: none; padding: 4px 0;
}
.sidhuvud__namn:visited, .sidhuvud__namn:hover { color: #fff; }
.sidhuvud__namn:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.sprak { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 1rem; }
.sprak a, .sprak a:visited { color: #fff; }
/* Målstorlek minst 24 px enligt WCAG 2.2 (2.5.8), som GOV.UK:s länkar i sidhuvudet (261029) */
.sprak a, .genvagar a, .topp__akut a { display: inline-block; min-height: 24px; padding: 2px 0; }
.sprak a:focus-visible { color: var(--text); }

/* Fasbanner. Ligger inuti <header> tillsammans med sidhuvudet, som GOV.UK:s phase banner, så att den hamnar i ett landmärke (261029). */
.fasbanner { border-bottom: 1px solid var(--kant); }
.fasbanner p { margin: 0; padding: 10px 0; font-size: 1rem; display: flex; gap: 10px; align-items: baseline; }
.etikett {
  flex: none; display: inline-block; padding: 3px 8px 2px; background: var(--profil-ljus); color: var(--profil);
  font-weight: 700; font-size: 1rem; line-height: 1.25;
}

/* Toppen */
.topp { background: var(--profil); color: #fff; padding: 24px 0 32px; }
.topp h1 { margin: 0 0 12px; font-size: 2rem; line-height: 1.09; font-weight: 700; }
.topp__ingress { margin: 0 0 24px; font-size: 1.125rem; line-height: 1.33; max-width: 36em; }
.sok label { display: block; margin-bottom: 6px; font-weight: 700; }
.sok__rad { display: flex; max-width: 36em; }
.sok input {
  flex: 1; min-width: 0; height: 48px; margin: 0; padding: 6px 10px;
  font: inherit; font-size: 1.1875rem; color: var(--text); background: #fff;
  border: 2px solid #fff; border-right: 0; border-radius: 0; appearance: none;
}
.sok input:focus { outline: 3px solid var(--fokus); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--text); }
.sok button {
  flex: none; height: 48px; padding: 0 18px; margin: 0;
  font: inherit; font-weight: 700; color: var(--text); background: #e8f1f3;
  border: 2px solid #fff; border-radius: 0; cursor: pointer;
}
.sok button:hover { background: #fff; }
.sok button:focus-visible { outline: 3px solid var(--fokus); background: var(--fokus); box-shadow: inset 0 -4px var(--text); }
.topp__akut { margin: 20px 0 0; font-size: 1rem; }
.topp__akut a, .topp__akut a:visited { color: #fff; font-weight: 700; }
.topp__akut a:focus-visible { color: var(--text); }
@media (min-width: 40.0625em) {
  .topp { padding: 40px 0 48px; }
  .topp h1 { font-size: 3rem; line-height: 1.04; margin-bottom: 16px; }
  .topp__ingress { font-size: 1.5rem; line-height: 1.25; margin-bottom: 30px; }
  .topp__akut { font-size: 1.1875rem; }
}

/* Sektioner */
main { display: block; }
.sektion { padding: 32px 0; }
.sektion + .sektion { border-top: 1px solid var(--kant); }
.sektion--yta { background: var(--yta); }
h2 { margin: 0 0 16px; font-size: 1.5rem; line-height: 1.04; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 16px; }
.ingress { max-width: 36em; }
@media (min-width: 40.0625em) {
  .sektion { padding: 48px 0; }
  h2 { font-size: 2.25rem; margin-bottom: 20px; }
  h3 { font-size: 1.5rem; line-height: 1.25; }
  p { margin-bottom: 20px; }
}

/* Livssituationer: GOV.UK:s ämneslista med länk och en rad beskrivning */
.amnen { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 30px; }
.amnen li { padding: 14px 0 16px; border-top: 1px solid var(--kant); }
.amnen a { font-weight: 700; font-size: 1.125rem; }
.amnen p { margin: 6px 0 0; color: var(--text-sekundar); font-size: 1rem; }
@media (min-width: 40.0625em) {
  .amnen { grid-template-columns: 1fr 1fr; }
  .amnen a { font-size: 1.1875rem; }
  .amnen p { font-size: 1.1875rem; }
}

.sektion--tat { padding-top: 0; }
.sektion + .sektion--tat { border-top: 0; }
.lankkolumner { margin: 0 0 4px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 30px; }
.lankkolumner li { padding: 8px 0; }
@media (min-width: 40.0625em) { .lankkolumner { grid-template-columns: 1fr 1fr; } }
.alla-amnen { margin: 0; padding-top: 16px; border-top: 1px solid var(--kant); font-weight: 700; }

.skyldigheter { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--kant); max-width: 36em; }
.skyldigheter p:last-child { margin-bottom: 0; }

/* Vem gör vad */
.nivaer { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 20px; }
.niva { background: #fff; border-top: 5px solid var(--profil); padding: 16px 16px 4px; }
.niva ul { margin: 0 0 12px; padding-left: 20px; }
.niva li { margin-bottom: 6px; }
.niva__vem { color: var(--text-sekundar); font-size: 1rem; }
@media (min-width: 48.0625em) {
  .nivaer { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .niva li { font-size: 1.0625rem; }
}
.infoblock { border-left: 5px solid var(--kant); padding: 4px 0 4px 15px; margin: 0; max-width: 36em; }
.infoblock p:last-child { margin-bottom: 0; }

/* Formulär för kommunval, GOV.UK:s mönster för textfält med hjälptext och felmeddelande */
.falt { margin-bottom: 20px; }
.falt label { display: block; font-weight: 700; margin-bottom: 4px; }
.hjalptext { display: block; color: var(--text-sekundar); margin-bottom: 10px; }
[hidden] { display: none !important; }
.felmeddelande { display: block; color: var(--fel); font-weight: 700; margin-bottom: 10px; }
.falt--fel { border-left: 5px solid var(--fel); padding-left: 15px; }
.falt input {
  display: block; width: 100%; max-width: 20em; height: 44px; padding: 5px 8px;
  font: inherit; color: var(--text); background: #fff;
  border: 2px solid var(--text); border-radius: 0; appearance: none;
}
.falt--fel input { border-color: var(--fel); }
.falt input:focus { outline: 3px solid var(--fokus); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--text); }
.knapp {
  display: inline-block; margin: 0; padding: 10px 14px 8px; min-height: 44px;
  font: inherit; font-weight: 700; line-height: 1.2; color: #fff; background: var(--klar);
  border: 2px solid transparent; border-radius: 0; box-shadow: 0 2px 0 #062d18; cursor: pointer;
}
.knapp:hover { background: #0a5230; }
a.knapp, a.knapp:visited { color: #fff; text-decoration: none; }
.tjanstsvar { margin-top: 20px; }
.tjanstsvar:focus { outline: none; }
.sidhuvud__namn:focus-visible, a.knapp:focus-visible { color: var(--text); }
.knapp:focus-visible { outline: 3px solid transparent; color: var(--text); background: var(--fokus); box-shadow: 0 2px 0 var(--text); border-color: var(--fokus); }
.kvitto { margin-top: 20px; padding: 15px; border: 5px solid var(--klar); max-width: 36em; }
.kvitto p:last-child { margin-bottom: 0; }
.kvitto[hidden] { display: none; }

/* Telefonnummer */
.nummer { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; }
.nummer li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--kant); }
.nummer a { flex: none; min-width: 4.6em; font-size: 1.5rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.nummer p { margin: 0; }
@media (min-width: 40.0625em) {
  .nummer { grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .nummer a { font-size: 1.875rem; }
}

/* Här gör du ärendet */
.ingangar { margin: 0 0 20px; padding: 0; list-style: none; }
.ingangar li { padding: 12px 0; border-top: 1px solid var(--kant); }
.ingangar a { font-weight: 700; }
.ingangar p { margin: 4px 0 0; color: var(--text-sekundar); }

/* Sidfot */
.sidfot { background: var(--yta); border-top: 1px solid var(--kant); padding: 32px 0 40px; font-size: 1rem; }
.sidfot__lankar { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.sidfot__lankar a, .sidfot__lankar a:visited { color: var(--text); }
.sidfot p { margin: 0 0 10px; max-width: 40em; }
.sidfot__ansvar { font-weight: 700; }

@media print {
  .sok, .sprak, .hopplank, #kommunval form { display: none; }
  .topp, .sidhuvud { background: none; color: var(--text); }
  .sidhuvud__namn, .topp__akut a { color: var(--text); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Undersidor: GOV.UK:s mönster för guider (brödsmulor, innehållsförteckning, två tredjedelars spalt) */
.brodsmulor { margin: 0; padding: 12px 0 0; list-style: none; display: flex; flex-wrap: wrap; font-size: 1rem; }
.brodsmulor li { display: flex; align-items: center; }
.brodsmulor li + li::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 0 8px;
  border: solid var(--kant-mork); border-width: 1px 1px 0 0; transform: rotate(45deg);
}
.brodsmulor a, .brodsmulor a:visited { color: var(--text); }
.sida { padding: 24px 0 48px; }
.spalt { max-width: 40em; }
.sida h1 { margin: 0 0 16px; font-size: 2rem; line-height: 1.09; overflow-wrap: break-word; hyphens: auto; }
.sida .ingress { font-size: 1.1875rem; line-height: 1.32; }
.sida h2 { margin-top: 40px; font-size: 1.5rem; }
.sida h3 { margin-top: 28px; }
.sida ul.punkter, .sida ol.punkter { padding-left: 20px; margin: 0 0 20px; }
.sida .punkter li { margin-bottom: 8px; }
@media (min-width: 40.0625em) {
  .sida { padding: 30px 0 60px; }
  .sida h1 { font-size: 3rem; line-height: 1.04; margin-bottom: 24px; }
  .sida .ingress { font-size: 1.5rem; line-height: 1.25; }
  .sida h2 { font-size: 2.25rem; margin-top: 50px; }
}
.innehall { margin: 0 0 30px; padding: 0; list-style: none; }
.innehall__rubrik { margin: 0 0 8px; font-size: 1rem; font-weight: 400; color: var(--text-sekundar); }
.innehall li { position: relative; padding-left: 26px; margin-bottom: 6px; }
.innehall li::before { content: "\2014"; position: absolute; left: 0; color: var(--text-sekundar); }
.inset { border-left: 10px solid var(--kant); padding: 15px; margin: 20px 0; }
.inset p:last-child { margin-bottom: 0; }
.varning { display: flex; gap: 14px; align-items: flex-start; margin: 20px 0; }
.varning__ikon {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: #fff;
  font-weight: 700; font-size: 1.5rem; line-height: 34px; text-align: center;
}
.varning p { margin: 3px 0 0; font-weight: 700; }
.ordlista { margin: 0 0 20px; }
.ordlista dt { font-weight: 700; margin-top: 16px; }
.ordlista dd { margin: 4px 0 0; }
.uppdaterad { margin-top: 40px; padding-top: 15px; border-top: 1px solid var(--kant); color: var(--text-sekundar); font-size: 1rem; }
.nummerrad { font-weight: 700; }

.sida .innehall__rubrik { margin: 0 0 8px; font-size: 1rem; line-height: 1.25; font-weight: 400; }

/* Genvägar i toppen */
.genvagar__rubrik { margin: 28px 0 8px; font-size: 1.125rem; color: #fff; }
.genvagar { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; max-width: 40em; }
.genvagar a, .genvagar a:visited { color: #fff; font-weight: 700; }
.genvagar a:focus-visible { color: var(--text); }
@media (min-width: 40.0625em) { .genvagar { grid-template-columns: repeat(3, 1fr); } .genvagar__rubrik { font-size: 1.1875rem; } }

/* Vald kommun: ett diskret band under fasbannern, sätts av offentliga.js. Som GOV.UK:s fasbanner, men med kommunens namn. */
.kommunband { background: var(--profil-ljus); border-bottom: 1px solid var(--kant); }
.kommunband p { margin: 0; padding: 8px 0; font-size: 1rem; }
.kommunband a, .kommunband a:visited { color: var(--profil); font-weight: 700; margin-left: 4px; }
.kommunband a:focus-visible { color: var(--text); }

/* Ägaretikett: vem som gör det, staten, regionen eller kommunen. Bygger på GOV.UK:s tag-komponent. */
.agare {
  display: inline-block; margin: 0 0 10px; padding: 3px 8px 2px; max-width: 100%;
  font-size: 1rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere;
  background: var(--profil-ljus); color: var(--profil);
}
.agare--region { background: #e1f0e6; color: #0d5c32; }
.agare--kommun { background: #ece6f4; color: #4a2f74; }
.agare--stat { background: var(--profil-ljus); color: var(--profil); }
/* Annan än stat, region och kommun, till exempel arbetsgivaren eller a-kassan */
.agare--annan { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--kant-mork); }

/* Kontaktuppgifter: GOV.UK:s contact-block i govspeak (.contact på till exempel gov.uk/pension-credit/how-to-claim),
   en tunn linje till vänster och raderna namn, telefon, texttelefon, bildtelefon, öppettider och vad samtalet kostar. */
.kontakt { margin: 0 0 20px; padding-left: 15px; border-left: 1px solid var(--kant); }
.kontakt p { margin: 0; }
.kontakt:last-child { margin-bottom: 0; }

/* Steg för steg: GOV.UK:s step-by-step navigation (design-system.service.gov.uk/patterns/step-by-step-navigation).
   Numrerade steg på en lodrät linje. "och" för steg som görs samtidigt som det förra, "eller" för ett alternativ. */
.steg { margin: 0 0 30px; padding: 0; list-style: none; }
.steg__steg { position: relative; padding: 0 0 24px 52px; }
.steg__steg::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 0;
  border-left: 2px solid var(--kant);
}
.steg__steg:last-child { padding-bottom: 0; }
.steg__steg:last-child::before { bottom: auto; height: 20px; }
.steg__rubrik { margin: 0 0 8px; padding-top: 4px; font-size: 1.1875rem; line-height: 1.25; }
.sida .steg__rubrik { margin-top: 0; }
.steg__nummer {
  position: absolute; left: 0; top: 0; z-index: 1;
  min-width: 36px; height: 36px; padding: 0 4px; border: 2px solid var(--kant-mork); border-radius: 18px;
  background: var(--bakgrund); color: var(--text);
  font-size: 1rem; font-weight: 700; line-height: 32px; text-align: center;
}
.steg__steg--och .steg__nummer, .steg__steg--eller .steg__nummer { font-weight: 400; font-size: .9375rem; }
.steg__steg p { margin-bottom: 10px; }
.steg__steg p:last-child { margin-bottom: 0; }
@media (min-width: 40.0625em) {
  .steg__rubrik { font-size: 1.5rem; padding-top: 2px; }
}

/* Checklista med frister: Danmarks huskeliste på borger.dk. Fristen markeras i meningen. Rutorna är bara bild, inga fält. */
.checklista { margin: 0 0 20px; padding: 0; list-style: none; }
.checklista li { position: relative; padding: 0 0 12px 38px; }
.checklista li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 22px; height: 22px;
  border: 2px solid var(--text); background: var(--bakgrund);
}
.checklista__frist { font-weight: 700; }
.checklista__tid { margin: 24px 0 10px; font-size: 1.1875rem; }
.sida .checklista__tid { margin-top: 24px; }

/* Lokal ruta: Danmarks modell, där sajten skriver sidan och kommunen fyller rutan.
   Utan vald kommun är rutan streckad och ber dig välja. Med vald kommun får den kommunens färg och en tjock kant. */
.lokal { margin: 20px 0 30px; padding: 16px; border: 2px dashed var(--kant-mork); background: var(--bakgrund); }
.lokal p:last-child { margin-bottom: 0; }
.lokal .lokal__rubrik, .sida .lokal .lokal__rubrik { margin: 0 0 10px; font-size: 1.1875rem; }
.lokal--vald { border: 0; border-left: 10px solid var(--profil); background: var(--profil-ljus); }
.lokal--saknas { border: 0; border-left: 10px solid var(--kant-mork); background: var(--yta); }
.lokal__niva { margin: 0 0 4px; font-size: 1rem; color: var(--profil); font-weight: 700; }
.lokal__lista { margin: 0 0 16px; padding: 0; list-style: none; }
.lokal__lista li { padding: 12px 0; border-top: 1px solid #9fb9c0; }
.lokal__lista li p { margin: 0 0 6px; }
.lokal__lista li p:last-child { margin-bottom: 0; }
.lokal__tjanst a { font-weight: 700; }
.lokal__lokalt, .lokal__kalla { color: #33393c; font-size: 1rem; }
.lokal__etikett {
  display: inline-block; margin-right: 4px; padding: 1px 6px; font-size: .875rem; font-weight: 700;
  background: var(--bakgrund); color: var(--profil);
}
.lokal__kontakt { padding-top: 12px; border-top: 1px solid #9fb9c0; }
.lokal--saknas .lokal__kontakt { border-color: var(--kant); }
.lokal__fot { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 1rem; }
.lokal--vald a:visited { color: var(--lank-besokt); }
@media (min-width: 40.0625em) {
  .lokal { padding: 20px; }
  .lokal .lokal__rubrik, .sida .lokal .lokal__rubrik { font-size: 1.5rem; }
}

/* Ämnessida: GOV.UK:s ämnessidor och borger.dk:s emnesider. Mest använda tjänster överst,
   sedan underrubriker med länklistor och en mening per länk, och en markerad länk till steg för steg. */
.mest-anvanda { margin: 0 0 30px; padding: 16px 16px 4px; background: var(--yta); border-top: 5px solid var(--profil); }
.mest-anvanda h2, .sida .mest-anvanda h2 { margin: 0 0 12px; font-size: 1.1875rem; }
.mest-anvanda ul { margin: 0; padding: 0; list-style: none; }
.mest-anvanda li { margin: 0 0 12px; font-weight: 700; }
.lanklista { margin: 0 0 20px; padding: 0; list-style: none; }
.lanklista li { padding: 12px 0; border-top: 1px solid var(--kant); }
.lanklista a { font-weight: 700; }
.lanklista p { margin: 4px 0 0; color: var(--text-sekundar); }
.stegsida { margin: 0 0 30px; padding: 12px 16px; border-left: 5px solid var(--profil); background: var(--profil-ljus); }
.stegsida p { margin: 0; }
/* Avstånd mellan länkarna, så att klickytorna inte överlappar vid 320 px (WCAG 2.2, 2.5.8, 261029) */
.stegsida p + p { margin-top: 8px; }
.stegsida__etikett { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--profil); font-weight: 700; }
.stegsida a { font-weight: 700; }
.stegsida a:not(:focus-visible) { color: var(--profil); }

/* Relaterat: GOV.UK:s "Related content" längst ner på undersidor */
.relaterat { margin-top: 40px; padding-top: 10px; border-top: 2px solid var(--profil); }
.relaterat h2, .sida .relaterat h2 { margin: 0 0 12px; font-size: 1.5rem; }
.relaterat ul { margin: 0; padding: 0; list-style: none; }
.relaterat li { margin-bottom: 10px; }
.steg__steg .punkter:last-child { margin-bottom: 0; }

/* Lättläst: kortare rader, högst omkring 55 tecken enligt Myndigheten för tillgängliga mediers råd */
.lattlast main p, .lattlast main li { max-width: 30em; }

/* ==========================================================================
   A till Ö och sök
   Bokstavsraden och listan på a-o.html, och sökfältet, filtren och träffarna på sok.html.
   I GOV.UK Design Systems anda: search/all med filter i en tredjedel och träffar i två tredjedelar,
   checkboxar och rullista i fieldset med legend, och details för filtren på smal skärm.
   ========================================================================== */

/* Bokstavsraden. Bokstäver utan innehåll är vanlig text, inte länkar. */
.bokstaver { margin: 8px 0 24px; }
.bokstaver ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.bokstaver a, .bokstaver__tom {
  display: inline-block; min-width: 44px; min-height: 44px; padding: 8px 6px;
  font-size: 1.1875rem; font-weight: 700; line-height: 28px; text-align: center;
}
.bokstaver__tom { color: var(--text-sekundar); font-weight: 400; }
@media (min-width: 40.0625em) { .bokstaver a, .bokstaver__tom { font-size: 1.5rem; } }

/* Listan under varje bokstav. Två spalter på bred skärm, som läses uppifrån och ner. */
.ao { padding-top: 8px; }
.ao__bokstav, .sida .ao__bokstav {
  margin: 24px 0 8px; padding-top: 12px; border-top: 2px solid var(--profil);
  font-size: 2rem; line-height: 1;
}
.ao__lista { margin: 0; padding: 0; list-style: none; }
.ao__lista li { padding: 8px 0; border-bottom: 1px solid var(--kant); overflow-wrap: anywhere; break-inside: avoid; }
.ao__info { color: var(--text-sekundar); font-size: 1rem; }
.ao__se { color: var(--text); }
@media (min-width: 48.0625em) {
  .ao__lista { column-count: 2; column-gap: 30px; }
  .ao__bokstav, .sida .ao__bokstav { font-size: 2.25rem; }
}

/* Sökfältet på sok.html: samma komponent som på förstasidan, men på vit botten */
.sok--sida { margin-bottom: 30px; }
.sok--sida h1, .sida .sok--sida h1 { margin: 0 0 16px; }
.sok--sida h1 label { display: block; margin: 0; font-weight: 700; }
.sok--sida input { border: 2px solid var(--text); border-right: 0; }
.sok--sida button { color: #fff; background: var(--profil); border: 2px solid var(--profil); }
.sok--sida button:hover { background: var(--lank-hover); border-color: var(--lank-hover); }
.sok--sida button:focus-visible { color: var(--text); border-color: var(--fokus); }

/* Resultatytan: filter och träffar */
.sokresultat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sokresultat[hidden] { display: none; }
@media (min-width: 48.0625em) { .sokresultat { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 30px; } }

/* Filtren i en details, som GOV.UK:s details-komponent. Fälls ut av sok.js på bred skärm. */
.filter { border-top: 5px solid var(--profil); background: var(--yta); }
.filter__rubrik {
  display: block; padding: 12px 16px 12px 40px; position: relative; cursor: pointer;
  font-weight: 700; color: var(--lank); list-style: none;
}
.filter__rubrik::-webkit-details-marker { display: none; }
.filter__rubrik::before {
  content: ""; position: absolute; left: 16px; top: 50%; margin-top: -7px;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent; border-left-color: currentColor;
}
.filter[open] > .filter__rubrik::before { margin-top: -4px; border-width: 12px 7px 0 7px; border-color: transparent; border-top-color: currentColor; }
.filter__rubrik span { text-decoration: underline; text-underline-offset: .15em; }
.filter__rubrik:hover { color: var(--lank-hover); }
.filter__rubrik:focus-visible { outline: 3px solid transparent; color: var(--text); background: var(--fokus); box-shadow: 0 -2px var(--fokus), 0 4px var(--text); }
.filter__rubrik:focus-visible span { text-decoration: none; }
.filter__innehall { padding: 4px 16px 20px; }
.filter__grupp { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.filter__grupp legend { margin-bottom: 8px; padding: 0; font-weight: 700; font-size: 1.1875rem; }
.filter__etikett { display: block; margin-bottom: 6px; color: var(--text-sekundar); font-size: 1rem; }
.filter select {
  display: block; width: 100%; height: 44px; padding: 5px 8px;
  font: inherit; font-size: 1rem; color: var(--text); background: #fff;
  border: 2px solid var(--text); border-radius: 0;
}
.filter select:focus-visible { outline: 3px solid var(--fokus); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--text); }

/* Checkboxar: inbyggda rutor med stort klickbart område och synligt fokus (svart ring och gul kant) */
.kryss { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.kryss input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--profil); cursor: pointer; }
.kryss input:focus-visible { outline: 3px solid var(--text); outline-offset: 0; box-shadow: 0 0 0 7px var(--fokus); }
.kryss label { padding: 6px 0; cursor: pointer; }

/* Andra knappen, som GOV.UK:s secondary button */
.knapp--andra { color: var(--text); background: #dcdcdc; box-shadow: 0 2px 0 #858686; }
.knapp--andra:hover { background: #c6c6c6; }

/* Antal träffar och träfflistan */
.sokresultat__antal { margin: 0 0 12px; font-weight: 700; font-size: 1.1875rem; }
.sokresultat__antal:focus { outline: 3px solid var(--fokus); }
.traffar { margin: 0; padding: 0; list-style: none; }
.traff { padding: 16px 0; border-top: 1px solid var(--kant); overflow-wrap: anywhere; }
.traff__lank { font-weight: 700; font-size: 1.1875rem; }
.traff__typ { margin: 4px 0 0; color: var(--text-sekundar); font-size: 1rem; }
.traff__beskrivning { margin: 6px 0 0; }
.inga-traffar { padding-top: 12px; border-top: 1px solid var(--kant); }
.inga-traffar h2, .sida .inga-traffar h2 { margin: 0 0 12px; font-size: 1.5rem; }