/* kommunikationforalla.se – grundstil, version PA1
   Designtokens enligt KFA:s designsystem (kommunikation-f-r-alla-design-system):
   plommonlila #461452 som primär, cyan #00C9FF som signaturaccent,
   Atkinson Hyperlegible Next i alla roller. Mobile-first, WCAG AA. */

/* ===== Typsnitt: Atkinson Hyperlegible Next, self-hostat (GDPR) ===== */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-700.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-800.woff2") format("woff2");
}

/* ===== Designtokens ===== */
:root {
  /* Färger – ur logotypen */
  --plom-900: #1B0D28;
  --plom-800: #34103F;
  --plom-700: #461452;
  --plom-600: #5C2469;
  --plom-100: #EDE3F1;
  --plom-50:  #F7F2F9;
  --cyan-700: #007697;
  --cyan-500: #00C9FF;
  --cyan-100: #D8F5FF;
  --bla-700:  #3346C8;
  --bla-500:  #5271FF;
  --bla-100:  #DFE5FF;
  --papper:   #FBFAFC;
  --dis-100:  #F3F0F6;
  --dis-200:  #E6E1ED;
  --svart:    #1B0D28;
  --gra-600:  #5C556A;
  --linje:    #DDD6E4;
  --linje-mork: #C4BACF;
  --vit:      #FFFFFF;

  /* Semantiska alias */
  --text-rubrik: var(--plom-700);
  --text-brod: var(--svart);
  --text-dampad: var(--gra-600);
  --text-invers: var(--vit);
  --lank: var(--bla-700);
  --lank-hover: var(--plom-900);
  --yta-sida: var(--papper);
  --yta-kort: var(--vit);
  --yta-alt: var(--dis-100);
  --yta-tonad: var(--plom-50);
  --yta-mork: var(--plom-700);
  --accent: var(--cyan-500);
  --accent-mork: var(--cyan-700);
  --accent-bla: var(--bla-500);
  --fokus: var(--cyan-500);
  --kant: var(--linje);

  /* Status */
  --ok: #2E7D4F;
  --ok-yta: #E7F2EA;
  --varning: #9A5B07;
  --varning-yta: #FBF0DC;
  --fel: #B3261E;
  --fel-yta: #F9E5E4;

  /* Typografi */
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.625rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.375rem, 5vw, 3.25rem);
  --vikt-normal: 400;
  --vikt-medium: 500;
  --vikt-fet: 700;
  --vikt-display: 800;
  --radavstand-brod: 1.6;
  --radavstand-rubrik: 1.15;
  --radmax: 68ch;

  /* Avstånd, radier, skuggor, rörelse */
  --mellanrum-1: 0.25rem;
  --mellanrum-2: 0.5rem;
  --mellanrum-3: 0.75rem;
  --mellanrum-4: 1rem;
  --mellanrum-5: 1.5rem;
  --mellanrum-6: 2rem;
  --mellanrum-7: 3rem;
  --mellanrum-8: 4.5rem;
  --radie-liten: 6px;
  --radie-falt: 8px;
  --radie-kort: 12px;
  --radie-pill: 999px;
  --skugga-kort: 0 1px 2px rgba(27, 13, 40, 0.06), 0 4px 16px rgba(27, 13, 40, 0.07);
  --skugga-lyft: 0 2px 4px rgba(27, 13, 40, 0.08), 0 10px 28px rgba(27, 13, 40, 0.12);
  --sidbredd: 72rem;
  --overgang: 150ms ease;
}

/* ===== Grundstil för element ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--radavstand-brod);
  color: var(--text-brod);
  background: var(--yta-sida);
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  color: var(--text-rubrik);
  line-height: var(--radavstand-rubrik);
  font-weight: var(--vikt-fet);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-weight: var(--vikt-display); letter-spacing: -0.01em; margin: 0.4em 0; }
h2 { font-size: var(--text-2xl); margin: 1.6em 0 0.5em; }
h3 { font-size: var(--text-xl); margin: 1.4em 0 0.4em; }

p, ul, ol { max-width: var(--radmax); }

a { color: var(--lank); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--lank-hover); text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--kant); margin: var(--mellanrum-6) 0; }

::selection { background: var(--plom-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Hoppa till innehållet ===== */
.hoppa {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--yta-mork);
  color: var(--vit);
  padding: 0.6em 1em;
  z-index: 10;
}
.hoppa:focus { left: 0; }

/* ===== Sidhuvud ===== */
.sidhuvud {
  background: var(--yta-mork);
  color: var(--vit);
}
.sidhuvud-inre {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.logotyp { display: block; line-height: 0; }
.logotyp img { height: 52px; width: auto; display: block; }

.meny-knapp {
  background: transparent;
  color: var(--vit);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radie-pill);
  font: inherit;
  font-weight: var(--vikt-medium);
  padding: 0.35em 1em;
  cursor: pointer;
  transition: background-color var(--overgang);
}
.meny-knapp:hover { background: rgba(255, 255, 255, 0.12); }

.huvudmeny { display: none; width: 100%; }
.huvudmeny.oppen { display: block; }
.huvudmeny ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.huvudmeny a {
  display: block;
  color: var(--vit);
  text-decoration: none;
  padding: 0.5em 0.8em;
  border-radius: var(--radie-liten);
  font-weight: var(--vikt-medium);
  font-size: 1.0625rem;
  transition: background-color var(--overgang);
}
.huvudmeny a:hover { color: var(--vit); background: rgba(255, 255, 255, 0.12); }
.huvudmeny a[aria-current] {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 -3px 0 var(--accent);
}

@media (min-width: 48rem) {
  .meny-knapp { display: none; }
  .huvudmeny { display: block; width: auto; }
  .huvudmeny ul { flex-direction: row; flex-wrap: wrap; }
}

/* ===== Sidfot ===== */
.sidfot {
  background: var(--yta-mork);
  color: var(--vit);
  margin-top: var(--mellanrum-8);
}
.sidfot-inre {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sidfot-logotyp { height: 48px; width: auto; display: block; }
.sidfot p { font-size: var(--text-sm); color: var(--plom-100); max-width: 32ch; }
.sidfot-rubrik {
  color: var(--vit);
  font-size: var(--text-md);
  font-weight: var(--vikt-fet);
  margin: 0 0 0.5rem;
}
.sidfot-lankar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
  font-size: var(--text-sm);
}
.sidfot a { color: var(--vit); }
.sidfot a:hover { color: var(--cyan-100); }

/* ===== Sidor och sektioner ===== */
.sida {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.sektion {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 0;
}
.sektion-band {
  background: var(--yta-alt);
  margin-top: var(--mellanrum-7);
}
.sektion-band > .sektion-inre {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 3rem 1.25rem 3.5rem;
}

/* Signaturmotivet: kort cyanstreck ovanför rubriker */
.signal {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 0.75rem;
}
.signal + h1, .signal + h2 { margin-top: 0; }

.ingress {
  font-size: var(--text-lg);
  color: var(--text-dampad);
  max-width: var(--radmax);
}

/* ===== Hero (startsidan) ===== */
.hero {
  background: var(--yta-mork);
  color: var(--vit);
}
.hero-inre {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 4rem 1.25rem 4.5rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}
.hero h1 { color: var(--vit); margin: 0 0 0.5em; }
.hero .signal { margin-bottom: 1.25rem; }
.hero-ingress {
  font-size: var(--text-lg);
  color: var(--plom-100);
  max-width: 48ch;
  margin: 0 0 1.75rem;
}
.hero-knappar { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-bild img {
  display: block;
  width: 100%;
  border-radius: var(--radie-kort);
}
@media (min-width: 48rem) {
  .hero-inre { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ===== Knappar ===== */
.knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: var(--vikt-medium);
  font-size: 1.1875rem;
  line-height: 1.2;
  padding: 0.9em 1.9em;
  border-radius: var(--radie-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
.knapp-primar {
  background: var(--plom-700);
  color: var(--vit);
  border: 2px solid var(--plom-700);
}
.knapp-primar:hover { background: var(--plom-900); border-color: var(--plom-900); color: var(--vit); }
.knapp-invers {
  background: var(--vit);
  color: var(--plom-800);
  border: 2px solid var(--vit);
}
.knapp-invers:hover { background: var(--plom-100); border-color: var(--plom-100); color: var(--plom-900); }
.knapp-invers-kontur {
  background: transparent;
  color: var(--vit);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.knapp-invers-kontur:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--vit); color: var(--vit); }

/* ===== Kort ===== */
.kort-rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.kort {
  display: block;
  background: var(--yta-kort);
  border: 1px solid var(--kant);
  border-radius: var(--radie-kort);
  box-shadow: var(--skugga-kort);
  padding: 1.1rem 1.25rem 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--overgang), border-color var(--overgang);
}
a.kort:hover {
  box-shadow: var(--skugga-lyft);
  border-color: var(--linje-mork);
  color: inherit;
}
a.kort:hover .kort-rubrik { text-decoration: underline; text-underline-offset: 3px; }
.kort-etikett {
  font-size: var(--text-xs);
  font-weight: var(--vikt-fet);
  color: var(--accent-mork);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.kort-rubrik {
  font-size: var(--text-lg);
  font-weight: var(--vikt-fet);
  color: var(--text-rubrik);
  line-height: 1.25;
}
.kort-text { font-size: 1.0625rem; margin-top: 0.45rem; line-height: 1.55; }
.kort-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-dampad);
  margin-bottom: 0.4rem;
}

/* ===== Etiketter ===== */
.etikett {
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: var(--radie-liten);
  font-size: var(--text-xs);
  font-weight: var(--vikt-medium);
  line-height: 1.5;
  background: var(--dis-200);
  color: var(--text-brod);
  border: 1px solid var(--kant);
}
.etikett-plom { background: var(--plom-50); color: var(--plom-700); border-color: var(--plom-100); }
.etikett-bla { background: var(--bla-100); color: var(--bla-700); border-color: var(--bla-100); }

/* ===== Meddelanderuta ===== */
.meddelande {
  border-radius: var(--radie-kort);
  padding: 1rem 1.25rem;
  max-width: var(--radmax);
  margin: var(--mellanrum-6) 0;
}
.meddelande-info { background: var(--yta-tonad); border: 1px solid var(--plom-100); }
.meddelande-rubrik {
  font-size: 1.0625rem;
  font-weight: var(--vikt-fet);
  color: var(--plom-700);
  margin: 0 0 0.25rem;
}
.meddelande p, .meddelande ul { font-size: 1.0625rem; line-height: 1.55; margin: 0.25rem 0; }

/* ===== Länk med pil ===== */
.lank-pil {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--vikt-fet);
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* ===== Nyhetslista (Aktuellt) ===== */
.nyhetslista {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin-top: 2rem;
}
.nyhetskort {
  display: grid;
  gap: 0.4rem;
  background: var(--yta-kort);
  border: 1px solid var(--kant);
  border-radius: var(--radie-kort);
  box-shadow: var(--skugga-kort);
  padding: 1.25rem 1.5rem;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--overgang), border-color var(--overgang);
}
.nyhetskort:hover {
  box-shadow: var(--skugga-lyft);
  border-color: var(--linje-mork);
  color: inherit;
}
.nyhetskort:hover .nyhetskort-rubrik { text-decoration: underline; text-underline-offset: 3px; }
.nyhetskort-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-dampad);
}
.nyhetskort-rubrik {
  font-size: var(--text-lg);
  font-weight: var(--vikt-fet);
  color: var(--text-rubrik);
  line-height: 1.25;
}
.nyhetskort-text { font-size: 1.0625rem; }

/* ===== Artikel ===== */
.brodsmulor { font-size: var(--text-xs); margin-bottom: 1.5rem; }
.brodsmulor span { color: var(--text-dampad); margin: 0 0.35em; }
.artikel { max-width: var(--radmax); }
.artikel-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-dampad);
  margin-bottom: 0.75rem;
}
.artikel h1 { margin-top: 0; }
.artikel-bild { margin: 1.5rem 0; }
.artikel-bild img {
  display: block;
  width: 100%;
  border-radius: var(--radie-kort);
  border: 1px solid var(--kant);
}
.artikel-bild figcaption { font-size: var(--text-sm); color: var(--text-dampad); margin-top: 0.5rem; }
.artikel-brod img { border-radius: var(--radie-kort); border: 1px solid var(--kant); }
.artikel-brod figure { margin: 1.5rem 0; }
.artikel-brod figcaption { font-size: var(--text-sm); color: var(--text-dampad); margin-top: 0.5rem; }
.artikel-tillbaka { margin-top: var(--mellanrum-6); }

/* ===== Dokumentlista ===== */
.dokumentlista {
  background: var(--yta-tonad);
  border: 1px solid var(--plom-100);
  border-radius: var(--radie-kort);
  padding: 1.25rem 1.5rem;
  margin: var(--mellanrum-6) 0;
}
.dokumentlista h2 { font-size: var(--text-xl); margin: 0 0 0.75rem; }
.dokumentlista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.dokument-beskrivning { display: block; font-size: var(--text-sm); color: var(--text-dampad); }

/* ===== Kontaktsida ===== */
.kontakt-rutnat {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 48rem) {
  .kontakt-rutnat { grid-template-columns: repeat(3, 1fr); }
}
.kontaktrad { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.kontaktrad li { font-size: 1.0625rem; }

/* ===== Publikationslista (Kunskap) ===== */
.publikationslista { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 52rem; }
.publikationslista li {
  background: var(--yta-kort);
  border: 1px solid var(--kant);
  border-radius: var(--radie-kort);
  box-shadow: var(--skugga-kort);
  padding: 1rem 1.25rem;
}