/* Den gemensamma stilmallen för undersidorna. Samma tokens, typsnitt och komponenter
   som startsidan, med värdena ur stilen i public/index.html. Startsidan länkar inte hit. */

/* Typsnittet för rubrikerna ligger på sajten, under /fonts/. */
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2")}
/* Hemsidans elva tokens ur HEMSIDAN i src/tema.js. Inga andra färger. Bara ljust läge. */
:root{
  color-scheme:light;
  --ink:#2B2733; --rosa:#B0306B; --rosa-hover:#8E2456; --rosa-ton:#FCE8F1;
  --paper:#FCFAFE; --kort:#FFFFFF; --lyft:#F4F0F8; --linje:#E9E2F0; --mjuk:#6B6377;
  --ratt:#2E7D4F; --rattyta:#E2F7E9;
  --rubrik:"Bricolage Grotesque",system-ui,sans-serif;
  --brod:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Åtta storlekar */
  --t-display:clamp(40px,6vw,64px); --t-h2:clamp(28px,4vw,40px); --t-fraga:30px; --t-h3:20px;
  --t-ingress:19px; --t-brod:16px; --t-liten:15px; --t-ovan:13px;
  /* Radier */
  --r-svar:12px; --r-knapp:14px; --r-kort:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-brod)/1.5 var(--brod);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-family:var(--rubrik);font-weight:800;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 32px}}
.ovan{font:700 var(--t-ovan)/1.3 var(--brod);letter-spacing:1.4px;text-transform:uppercase;color:var(--rosa)}

/* Loggan: ett ord, rosa Skapa och rosa prick över det prickfria ı */
.logo{display:inline-flex;align-items:baseline;padding-block:8px;white-space:nowrap;line-height:1;font:800 28px var(--rubrik);letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.logo .s{color:var(--rosa)}
.logo .i{position:relative;display:inline-block}
.logo .prick{position:absolute;left:50%;top:.03em;width:.28em;height:.28em;transform:translateX(-50%);border-radius:50%;background:var(--rosa)}

/* Knappar: bläckram och hård skugga, rakt ned. Hård skugga betyder att det går att trycka. */
.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--r-knapp);font:700 var(--t-brod) var(--brod);text-decoration:none;cursor:pointer;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s}
.knapp.huvud{background:var(--rosa);color:var(--kort)}
.knapp.huvud:hover{background:var(--rosa-hover)}
.knapp.sido{background:var(--kort);color:var(--ink)}
.knapp.sido:hover{background:var(--lyft)}
.knapp.liten{min-height:44px;padding:0 16px;font-size:var(--t-liten)}
.knapp:active{transform:translateY(4px);box-shadow:none}
.knapprad{display:flex;flex-wrap:wrap;gap:16px}

/* Toppen */
header.topp{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--linje)}
header.topp .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
header.topp nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0}
header.topp nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-weight:600;font-size:var(--t-liten);text-decoration:none}
header.topp nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:820px){header.topp nav{display:none}}

/* Brödsmulan: Start som länk, en avskiljare och sidans namn som text */
.brodsmula ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:16px 0 0;font-size:var(--t-liten)}
.brodsmula li{display:inline-flex;align-items:center;gap:8px}
.brodsmula a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:4px}
.brodsmula .avskiljare{color:var(--mjuk)}
.brodsmula [aria-current="page"]{color:var(--mjuk)}

/* Inledningen med loggans prick som stor cirkel, som heron på startsidan */
.intro{background:radial-gradient(circle at 100% 0%,var(--rosa-ton) 0 340px,transparent 341px),var(--paper)}
.intro .wrap{padding-block:24px 64px}
@media (max-width:700px){.intro .wrap{padding-block:16px 56px}}
.intro h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.035em;margin-top:8px;max-width:16ch}
.intro .kort.svar{max-width:720px;margin:24px 0}

/* Avsnitt */
section.del{padding-block:72px}
@media (max-width:700px){section.del{padding-block:56px}}
.rubrik{max-width:720px;margin-bottom:32px}
.rubrik h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.03em;margin-top:8px}
.rubrik p:not(.ovan){font-size:var(--t-ingress);color:var(--mjuk);margin-top:16px}
.rubrik:last-child{margin-bottom:0}
.band{background:var(--lyft)}

/* Kort: bläckram, ingen skugga, eftersom de inte går att trycka på */
.kort{background:var(--kort);border:2px solid var(--ink);border-radius:var(--r-kort);padding:24px}
.kort h2,.kort h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.kort p+p{margin-top:8px}
.kort.svar{background:var(--lyft);border-color:var(--lyft)}
.kort.svar p{font-size:var(--t-ingress);line-height:1.5}

/* Rutnät av kort, som Fyra typer av quiz på startsidan */
.rutnat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:960px){.rutnat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rutnat{grid-template-columns:1fr}}
.rutnat .kort p{font-size:var(--t-liten);color:var(--mjuk)}

/* Steg: numret ligger inne i kortet */
.steg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:820px){.steg{grid-template-columns:1fr}}
.steg .nr{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--rosa);color:var(--kort);font:800 var(--t-h3) var(--rubrik);margin-bottom:16px}
.steg p{font-size:var(--t-liten);color:var(--mjuk)}

/* Källistan */
.kallor{margin:16px 0 0;padding-left:24px;font-size:var(--t-liten);color:var(--mjuk)}
.kallor li+li{margin-top:8px}
.kallor a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px;overflow-wrap:anywhere}

/* Länkar i löptext, minst 44 px höga som allt annat som går att trycka på */
main p a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}

/* Frågor */
.fragor{display:grid;gap:12px;max-width:820px}
details{background:var(--kort);border:2px solid var(--ink);border-radius:var(--r-svar)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;min-height:56px;font:800 var(--t-h3)/1.25 var(--rubrik);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--lyft);color:var(--ink);border:1.5px solid var(--ink);font:800 var(--t-h3)/1 var(--rubrik)}
details[open] summary::after{content:"–"}
details p{padding:0 16px 16px;max-width:64ch}

/* Foten med listan över alla sidor */
footer{border-top:2px solid var(--linje);padding-block:48px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
@media (max-width:820px){footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .wrap{grid-template-columns:1fr}}
/* COMMENT_FOR_REDTEAM: Startsidans fot har h4 som kolumnrubrik. Mallen förbjuder hopp i rubrikerna,
   så undersidorna har h2 med samma utseende som startsidans h4. */
footer h2{margin:0 0 8px;font:700 var(--t-ovan) var(--brod);letter-spacing:1.4px;text-transform:uppercase;color:var(--mjuk)}
footer ul{list-style:none;margin:0;padding:0}
footer li a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-liten);text-decoration:none}
footer li a:hover{text-decoration:underline}
footer .om{margin-top:16px;font-size:var(--t-liten);color:var(--mjuk);max-width:32ch}

/* Minskad rörelse: inga övergångar, inga animationer och ingen mjuk rullning */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}