/* Om missfall – gemensam stilmall för alla sidor.
   Tema "dimma och ljung": sval dimma som bakgrund, djupt havsblågrönt för text,
   ljung som accent. Rött används bara för akutinformation. */

:root {
  --dimma: #edf0ee;
  --papper: #f8f9f7;
  --djup: #1e3236;
  --dampad: #4a5d60;
  --hav: #2f6468;
  --ljung: #7b5a86;
  --ljung-ljus: #ece5ef;
  --akut: #a2412f;
  --akut-ljus: #f6e6e1;
  --linje: #c9d2cf;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;

  --text: 40rem;
  --ram: 68rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dimma: #141d1f;
    --papper: #1b2628;
    --djup: #e3eae8;
    --dampad: #a9b8b7;
    --hav: #86c1c1;
    --ljung: #c7a8d3;
    --ljung-ljus: #2c2531;
    --akut: #f0a08f;
    --akut-ljus: #3a2320;
    --linje: #34464a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --dimma: #141d1f;
  --papper: #1b2628;
  --djup: #e3eae8;
  --dampad: #a9b8b7;
  --hav: #86c1c1;
  --ljung: #c7a8d3;
  --ljung-ljus: #2c2531;
  --akut: #f0a08f;
  --akut-ljus: #3a2320;
  --linje: #34464a;
  color-scheme: dark;
}

/* Typsnitt och ikoner definieras i css/typsnitt.css (genererad, se tools/bygg-typsnitt.py). */

*,
*::before,
*::after { box-sizing: border-box; }

/* Reservera plats för rullningslisten så att sidan inte flyttar sig i sidled
   mellan korta och långa sidor. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--dimma);
  color: var(--djup);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

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

a { color: var(--hav); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ljung); text-decoration-thickness: 2px; }
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ljung);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fast storlek, och overflow: hidden gör att baslinjen blir rutans nederkant,
   så ikonerna står still även innan ikonfonten hunnit laddas. */
.ph { display: inline-block; width: 1em; height: 1em; overflow: hidden; vertical-align: -0.14em; }

.ram {
  max-width: var(--ram);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 48rem) {
  .ram { padding: 0 2rem; }
}

/* Hoppa-länk */
.hoppa {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--djup);
  color: var(--dimma);
  padding: 0.5rem 1rem;
  font-family: var(--sans);
  z-index: 10;
}
.hoppa:focus { top: 0.5rem; color: var(--dimma); }

/* Akutremsa – finns på varje sida */
.akut {
  background: var(--akut-ljus);
  color: var(--djup);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--linje);
}
.akut .ram {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.akut .ph { color: var(--akut); font-size: 1.1rem; flex: none; vertical-align: 0; line-height: 1; display: block; }
.akut strong { color: var(--akut); }
.akut a { color: inherit; font-weight: 700; }

/* Förbehåll under menyn – finns på varje sida */
.forbehall {
  background: var(--ljung-ljus);
  color: var(--dampad);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--linje);
}
.forbehall .ram {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.forbehall p { margin: 0; }
.forbehall .ph { color: var(--ljung); font-size: 1.05rem; flex: none; line-height: 1; display: block; }
.forbehall a { color: inherit; font-weight: 700; }

/* Sidhuvud och meny – en enkel rad länkar */
.topp {
  background: var(--papper);
  border-bottom: 1px solid var(--linje);
}
.topp .ram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.1rem;
  padding-bottom: 1rem;
}
.logga {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--djup);
  line-height: 1.2;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.logga .ph { color: var(--ljung); margin-right: 0.15em; }
.logga:hover { color: var(--djup); }

.meny ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.9875rem;
  line-height: 1.4;
}
.meny a {
  color: var(--djup);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.meny a:hover { color: var(--ljung); border-bottom-color: var(--linje); }
.meny a[aria-current="page"] { border-bottom-color: var(--ljung); }

/* Startsidans hero: dimmigt hav, rubriken ligger i himlen */
.hero {
  position: relative;
  min-height: min(78vh, 44rem);
  display: flex;
  align-items: flex-start;
  background: #dfe3e2 url("../images/dimmigt-hav.jpg") center 62% / cover no-repeat;
  color: #1e3236;
  border-bottom: 1px solid var(--linje);
}
.hero .ram { width: 100%; padding-top: clamp(3rem, 12vh, 7rem); padding-bottom: 3rem; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 14ch;
  margin: 0 0 1.25rem;
}
.hero p {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  max-width: 32rem;
  margin: 0;
}
.hero .fotokredit {
  position: absolute;
  right: 1rem;
  bottom: 0.6rem;
  margin: 0;
  color: #4a5d60;
  font-size: 0.8125rem;
}
.hero .fotokredit a { color: inherit; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { filter: brightness(0.92); }
}

/* Vägval under horisonten – tre ingångar som enkla länkrader */
.vagval {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linje);
}
.text .vagval { padding-left: 0; }
.vagval li { border-bottom: 1px solid var(--linje); }
.vagval a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1rem;
  padding: 1.4rem 0.25rem;
  text-decoration: none;
  color: var(--djup);
}
.vagval .ph { font-size: 1.9rem; color: var(--ljung); grid-row: span 2; margin-top: 0.2rem; }
.vagval strong {
  font-weight: 400;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.vagval span { font-family: var(--sans); font-size: 1rem; color: var(--dampad); margin-top: 0.3rem; }
.vagval a:hover strong { color: var(--ljung); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Innehållssidor */
main { display: block; }

.sidhuvud {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 1.5rem;
}
.sidhuvud h1 {
  font-weight: 300;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  max-width: 20ch;
}
.ingress {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--dampad);
  max-width: var(--text);
  margin: 0;
}

.bild {
  margin: 0 0 2.5rem;
}
.bild img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
}
@media (max-width: 40rem) {
  .bild img { aspect-ratio: 4 / 3; }
}

.fotokredit {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--dampad);
  margin-top: 0.4rem;
}
.fotokredit a { color: inherit; }

.upplagg {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 4rem;
}
@media (min-width: 62rem) {
  .upplagg { grid-template-columns: minmax(0, var(--text)) 17rem; justify-content: space-between; gap: 4rem; }
  .upplagg aside { position: sticky; top: 1.5rem; align-self: start; }
}

.text { max-width: var(--text); }
.text h2 {
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.75rem;
  scroll-margin-top: 1rem;
}
.text h2:first-child { margin-top: 0; }
.text h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 1.75rem 0 0.35rem;
}
.text p, .text ul, .text ol { margin: 0 0 1rem; }
.text ul, .text ol { padding-left: 1.25rem; }
.text li { margin-bottom: 0.4rem; }
.text li::marker { color: var(--ljung); }

/* Horisontlinjen – sidans återkommande motiv */
.horisont {
  border: 0;
  height: 1px;
  margin: 3rem 0;
  background: linear-gradient(90deg, transparent, var(--linje) 12%, var(--linje) 88%, transparent);
}

/* Rutor */
.ruta {
  background: var(--papper);
  border-left: 3px solid var(--hav);
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.ruta > :last-child { margin-bottom: 0; }
.ruta h2, .ruta h3 { margin-top: 0; }
.ruta--akut { border-left-color: var(--akut); background: var(--akut-ljus); }
.ruta--akut h2, .ruta--akut h3 { color: var(--akut); }
.ruta--varm { border-left-color: var(--ljung); background: var(--ljung-ljus); }

.ruta h3 { font-family: var(--sans); font-size: 1.0625rem; margin-bottom: 0.5rem; }
.ruta h2 { font-size: 1.4rem; }

/* Sidospalt */
aside {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}
aside h2 {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}
aside nav ul { list-style: none; margin: 0 0 2rem; padding: 0; border-left: 1px solid var(--linje); }
aside nav li { margin: 0; }
aside nav a { display: block; padding: 0.3rem 0 0.3rem 1rem; color: var(--dampad); text-decoration: none; }
aside nav a:hover { color: var(--ljung); }
aside .ruta { margin: 0; font-size: 0.9375rem; }
aside .ruta p { margin: 0 0 0.6rem; }

/* Kontaktlista på stödsidan */
.kontakter { list-style: none; padding: 0 !important; margin: 1rem 0 2rem; }
.kontakter li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 0.75rem;
  padding: 1rem 0;
  margin: 0 !important;
  border-bottom: 1px solid var(--linje);
}
.kontakter li:first-child { border-top: 1px solid var(--linje); }
.kontakter .ph { font-size: 1.5rem; color: var(--ljung); margin-top: 0.15rem; }
.kontakter h3 { margin: 0 0 0.2rem; }
.kontakter p { margin: 0 0 0.3rem; }
.kontakter .nummer {
  font-family: var(--sans);
  font-size: 1rem;
}
.kontakter .nummer a { font-weight: 700; }

/* Frågor och svar – inbyggt utan JavaScript */
.fragor details {
  border-bottom: 1px solid var(--linje);
}
.fragor details:first-of-type { border-top: 1px solid var(--linje); }
.fragor summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-size: 1.25rem;
  line-height: 1.35;
}
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after {
  content: "+";
  font-family: var(--sans);
  color: var(--ljung);
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
  transition: transform 0.2s ease;
}
.fragor details[open] summary::after { transform: rotate(45deg); }
.fragor summary:hover { color: var(--ljung); }
.fragor .svar { padding: 0 0 1.25rem; }
.fragor .svar > :last-child { margin-bottom: 0; }

/* Källförteckning längst ned på varje innehållssida */
.kallor {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linje);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--dampad);
}
.text .kallor h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--djup);
  margin: 0 0 0.6rem;
}
.text .kallor ul { padding-left: 1.1rem; }
.text .kallor li { margin-bottom: 0.35rem; }
.kallor .ph { font-size: 0.85em; }

/* Sidfot */
.fot {
  background: var(--papper);
  border-top: 1px solid var(--linje);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--dampad);
  padding: 2.5rem 0 3rem;
}
.fot .ram { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) {
  .fot .ram { grid-template-columns: 1fr auto; align-items: start; }
}
.fot p { margin: 0 0 0.5rem; max-width: 36rem; }
.fot ul { list-style: none; margin: 0; padding: 0; }
.fot li { margin-bottom: 0.3rem; }
.fot a { color: var(--djup); }

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

@media print {
  .akut, .meny, aside nav, .hero .fotokredit { display: none; }
  body { background: #fff; color: #000; }
}

.upplagg--start { padding-top: 3rem; }

/* Samtyckesruta för besöksmätning – byggs av js/samtycke.js, finns bara
   när besökaren ännu inte har svarat. Ligger nedtill så att akutremsan
   överst aldrig skyms. */
.samtycke {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--papper);
  border-top: 1px solid var(--linje);
  box-shadow: 0 -2px 16px rgba(30, 50, 54, 0.1);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--dampad);
}
.samtycke .ram {
  display: grid;
  gap: 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
@media (min-width: 48rem) {
  .samtycke .ram {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
  }
}
.samtycke h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--djup);
  margin: 0 0 0.35rem;
}
.samtycke h2:focus-visible { outline: 3px solid var(--ljung); outline-offset: 3px; }
.samtycke p { margin: 0; max-width: 46rem; }
.samtycke a { color: var(--hav); }

/* Båda knapparna ser likadana ut. Att neka ska vara lika lätt som att godkänna. */
.samtycke-knappar { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.samtycke-knappar button,
.samtycke-andra {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--djup);
  background: var(--dimma);
  border: 1px solid var(--linje);
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  min-width: 8rem;
}
.samtycke-knappar button:hover,
.samtycke-andra:hover { border-color: var(--ljung); color: var(--ljung); }
.samtycke-knappar button:focus-visible,
.samtycke-andra:focus-visible { outline: 3px solid var(--ljung); outline-offset: 2px; }
.samtycke-andra { min-width: 0; margin-bottom: 1rem; }

#samtycke-kvitto:not(:empty) {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--hav);
  margin: 0 0 1rem;
}

@media print {
  .samtycke { display: none; }
}