/* Guidesidorna (web/guider/): läggs ovanpå anbud.css och använder bara dess --ak-*-variabler och typsnitt.
   Familjen Grotesk för all löptext, Noto Serif bara för det som är citat ur källorna (samma uppdelning som i listan).
   Genereras ur docs/guider-utkast/ av tools/bygg-guider.mjs. Ändras filen: bumpa ?v= i mallen (GUIDE_CSS_VERSION). */

.guide { max-width: calc(var(--ak-measure) + 2 * var(--ak-gutter)); margin: 0 auto; padding: 1.25rem var(--ak-gutter) 4.5rem; }

/* ---- Brödsmulor ---- */
.smulor ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: 0.9375rem; }
.smulor li { display: inline-flex; align-items: center; min-height: 44px; color: var(--ak-muted); }
.smulor li:not(:last-child)::after { content: "/"; content: "/" / ""; padding: 0 0.5rem; color: var(--ak-dim); }
.smulor a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ak-muted); }
.smulor a:hover { color: var(--ak-ink); }
.smulor [aria-current="page"] { color: var(--ak-ink); font-weight: 500; }

/* ---- Rubriker och löptext ---- */
.guide-artikel h1 {
  font-size: clamp(1.875rem, 5.2vw, 2.625rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em;
  margin: 0 0 1.5rem; text-wrap: balance; overflow-wrap: break-word;
}
.guide-artikel h2 { font-size: clamp(1.3125rem, 3.4vw, 1.5rem); font-weight: 600; line-height: 1.3; margin: 0 0 0.75rem; text-wrap: balance; }
.guide-artikel h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; margin: 1.5rem 0 0.5rem; }
.guide-artikel section { margin: 2.75rem 0 0; }
.guide-artikel p { margin: 0 0 1rem; line-height: 1.65; }
.guide-artikel ul, .guide-artikel ol { margin: 0 0 1.25rem; padding-left: 1.375rem; color: var(--ak-ink-2); }
.guide-artikel li { margin: 0 0 0.5rem; line-height: 1.6; padding-left: 0.25rem; }
.guide-artikel li::marker { color: var(--ak-dim); }
.guide-artikel section > :last-child { margin-bottom: 0; }
.guide-artikel strong { font-weight: 600; }

/* Inledningen på navsidan */
.ingang { margin: 0 0 0.5rem; }
.ingang > p:first-child { font-size: 1.1875rem; line-height: 1.6; color: var(--ak-ink-2); }

/* ---- Byline och AI-raden (stycken i "Om den här guiden" och på navsidan) ---- */
.byline { color: var(--ak-ink); font-weight: 500; }
.ai-rad, .ansvarsrad { color: var(--ak-ink-2); }
.kontrollrad { color: var(--ak-muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ingang .byline, .ingang .ansvarsrad { font-size: 0.9375rem; margin-bottom: 0.5rem; }

/* ---- I korthet ---- */
.guide-artikel .i-korthet {
  margin: 0; padding: 1.25rem 1.25rem 1.25rem 1.5rem; background: var(--ak-surface);
  border: 1px solid var(--ak-line-soft); border-left: 4px solid var(--ak-accent); border-radius: 12px;
}
.i-korthet h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; margin: 0 0 0.5rem; }
.i-korthet p { color: var(--ak-ink); }
.i-korthet p:last-child { margin-bottom: 0; }

/* ---- Citat med källrad ---- */
.citat { margin: 1.5rem 0 1.75rem; }
.citat blockquote {
  margin: 0; padding: 0.125rem 0 0.125rem 1.25rem; border-left: 3px solid var(--ak-ink-2);
  font-family: var(--ak-serif); font-size: 1.125rem; line-height: 1.6; color: var(--ak-ink);
}
.citat blockquote p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.citat blockquote p + p { margin-top: 0.75rem; }
.citat figcaption { margin: 0.375rem 0 0; padding-left: calc(1.25rem + 3px); font-size: 0.875rem; line-height: 1.5; color: var(--ak-dim); }
.citat figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ak-ink-2); overflow-wrap: anywhere; }
.citat figcaption a:hover { color: var(--ak-accent-ink); }

/* ---- Om den här guiden (byline, AI-raden, ansvar, kontrolldatum) ---- */
.guide-artikel .om-guiden { padding: 1.5rem; background: var(--ak-sunk); border-radius: 12px; }
.om-guiden h2 { font-size: 1.1875rem; }
.om-guiden p { font-size: 0.9375rem; }
.om-guiden p:last-child { margin-bottom: 0; }

/* ---- Läs också och listan över guiderna: en rad per guide, hela raden är lugn att träffa ---- */
.las-ocksa ul, .guidelista ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ak-line); }
.las-ocksa li, .guidelista li { margin: 0; padding: 0.75rem 0; min-height: 44px; border-bottom: 1px solid var(--ak-line); line-height: 1.6; color: var(--ak-ink-2); }
.las-ocksa li a, .guidelista li a { font-weight: 600; }
/* Hela raden är träffyta: länken sträcks över sin rad (minst 44 px hög), beskrivningen efter länken är vanlig text. */
.las-ocksa li, .guidelista li { position: relative; }
.las-ocksa li a::after, .guidelista li a::after { content: ""; position: absolute; inset: 0; }
.las-ocksa li a:focus-visible, .guidelista li a:focus-visible { outline: none; }
.las-ocksa li a:focus-visible::after, .guidelista li a:focus-visible::after { outline: 3px solid var(--ak-focus); outline-offset: -3px; border-radius: 4px; }

/* ---- Slutblock om tjänsten (pris och garanti) ---- */
.guide-artikel .slutblock {
  padding: 1.75rem 1.5rem; background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: 16px;
  box-shadow: var(--ak-skugga);
}
.slutblock h2 { margin-bottom: 1rem; }
.slutblock p { max-width: 38rem; }
.slutblock .pris { font-size: 1.25rem; font-weight: 600; color: var(--ak-ink); margin: 1.25rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--ak-line-soft); font-variant-numeric: tabular-nums; }
.slutblock p:last-child { margin-bottom: 0; }

/* ---- Källförteckning: långa adresser får aldrig ge sidled scroll ---- */
.kallor ul { padding-left: 1.125rem; font-size: 0.9375rem; }
.kallor li { overflow-wrap: anywhere; line-height: 1.6; margin-bottom: 0.75rem; }
.kallor a { color: var(--ak-ink-2); overflow-wrap: anywhere; }
.kallor a:hover { color: var(--ak-accent-ink); }

/* ---- Datum bryts inte vid bindestrecken (ska-krav har klassen .nowrap i anbud.css) ---- */
.guide-artikel time { white-space: nowrap; }

@media (min-width: 48rem) {
  .guide { padding-top: 2rem; }
  .guide-artikel section { margin-top: 3.25rem; }
  .guide-artikel .i-korthet { padding: 1.5rem 1.75rem 1.5rem 1.75rem; }
  .guide-artikel .om-guiden { padding: 1.75rem 2rem; }
  .guide-artikel .slutblock { padding: 2.25rem 2.25rem; }
}
@media (max-width: 30rem) {
  .citat blockquote { padding-left: 1rem; font-size: 1.0625rem; }
  .citat figcaption { padding-left: calc(1rem + 3px); }
}
@media print {
  .smulor { display: none; }
  .citat { break-inside: avoid; }
  .guide-artikel .slutblock { box-shadow: none; }
}