/* Sqord – SV-designskal (2026-11-06). Tokens från sverigesveterinarer.se
   via /workspace/lagacykeln/site/build-rapport/sv-design-tokens.md.
   Ingen JavaScript. Behåller checkbox-meny (.meny-vaxel / .meny-knapp).
   Godkänd logo i /brand/ orörd (mörkgrön #0f3d2e + vit). */

:root {
  --head: #16212e;
  --text: #2b3440;
  --muted: #5d6b7a;
  --link: #0a6aa8;
  --green: #2f8f4e;
  --green-dark: #23703c;
  --green-mid: #3aa564;
  --green-soft: #eef7f1;
  --ring: #cfe6d7;
  --page: #f4f6f8;
  --card: #ffffff;
  --bg-soft: #f6f8fa;
  --border: #e3e8ee;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .06);
  --max: 1200px;
  --narrow: 820px;
  --footer-bg: #12202b;
  --footer-om: #a9b6c2;
  --footer-botten: #8c9aa7;
  --footer-link: #d7e2ea;
  --varning-bg: #fff4ce;
  --varning-kant: #c99a00;
  /* Bakåtkompatibla alias (äldre kommenterar/referenser) */
  --dampad: var(--muted);
  --bakgrund: var(--card);
  --yta: var(--bg-soft);
  --kant: var(--border);
  --accent: var(--green);
  --accent-mork: var(--green-dark);
  --bredd: var(--max);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--page);
  text-rendering: optimizeLegibility;
}
::selection { background: #cdebd8; }
img { max-width: 100%; height: auto; display: block; }

/* Länkar: blå inline (SV --link); hover grön */
a { color: var(--link); text-decoration: underline; }
a:hover, a:focus { color: var(--green-dark); }
:focus-visible {
  outline: 3px solid #9fd3b0;
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: var(--head);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 1.6em 0 .5em;
}
h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 800;
  margin-top: .6em;
}
h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 750;
}
h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: .45em;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
}
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1.1rem; }

.hoppa { position: absolute; left: -999rem; }
.hoppa:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  padding: .5rem 1rem;
  z-index: 100;
  color: var(--head);
  text-decoration: none;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* Container: header/footer 1200px; main smalare «papper» */
.behallare {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 600px) {
  .behallare { padding: 0 16px; }
  body { font-size: 16px; }
}

/* ===== Sidhuvud: sticky glas ===== */
.sidhuvud {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.sidhuvud .behallare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 64px;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.logga {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--head);
  text-decoration: none;
  line-height: 0;
}
.logga:hover, .logga:focus { color: var(--green-dark); }
.logga img { display: block; height: 2rem; width: auto; }

/* Mobilmeny: checkbox + label, ingen JS */
.meny-vaxel {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.meny-knapp {
  display: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .9rem;
  font-weight: 600;
  color: var(--head);
  background: #fff;
  user-select: none;
}
.meny-vaxel:focus-visible + .meny-knapp {
  outline: 3px solid #9fd3b0;
  outline-offset: 2px;
}
.meny-vaxel:checked + .meny-knapp {
  background: var(--green-soft);
  border-color: var(--ring);
}

.huvudmeny ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  align-items: center;
}
.huvudmeny > ul:first-child { gap: .15rem; }
.huvudmeny a {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  color: var(--head);
  padding: .55rem .85rem;
  border-radius: 8px;
  line-height: 1.4;
}
.huvudmeny a:hover,
.huvudmeny a:focus {
  background: var(--green-soft);
  color: var(--green-dark);
  text-decoration: none;
}
.huvudmeny a[aria-current] {
  background: var(--green-soft);
  color: var(--green-dark);
}

/* Populära orter: SV ort-nav-pills (CSS-only, ingen dropdown/JS) */
.huvudmeny {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .15rem;
  flex: 1 1 auto;
}
.huvudmeny-orter {
  list-style: none;
  margin: .35rem 0 0;
  padding: .4rem .5rem;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .35rem;
  font-size: .9rem;
  border-top: 1px solid #dcefe2;
  background: linear-gradient(180deg, #f1f9f4, #e9f5ee);
  border-radius: 8px;
}
.huvudmeny-orter a {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d3e8da;
  color: var(--head);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}
.huvudmeny-orter a:hover,
.huvudmeny-orter a:focus {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  text-decoration: none;
}
.huvudmeny-orter a[aria-current] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

@media (max-width: 68rem) {
  .sidhuvud { position: relative; } /* undvik sticky-jank med mobilmeny */
  .meny-knapp { display: inline-block; }
  .huvudmeny { display: none; width: 100%; }
  .meny-vaxel:checked ~ .huvudmeny { display: block; }
  .huvudmeny ul {
    flex-direction: column;
    gap: 0;
    padding: .5rem 0;
    align-items: stretch;
  }
  .huvudmeny > ul:first-child li a {
    display: block;
    padding: .6rem .85rem;
    border-radius: 8px;
  }
  .huvudmeny {
    flex: 1 1 100%;
    justify-content: stretch;
    align-items: stretch;
  }
  .huvudmeny-orter {
    flex-direction: row;
    flex-wrap: wrap;
    margin: .25rem 0 0;
    padding: .5rem;
    border-top: 1px solid #dcefe2;
    flex: 1 0 100%;
  }
  .huvudmeny-orter li a {
    display: inline-block;
    padding: .3rem .75rem;
    border-top: 0;
  }
}

/* ===== Main: vitt papper ===== */
main.behallare {
  max-width: var(--narrow);
  padding-top: 1.25rem;
  padding-bottom: 3rem;
}
@media (min-width: 860px) {
  main.behallare {
    margin: 1.25rem auto 2.5rem;
    padding: 2.5rem 3rem 3rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
  }
}
@media (max-width: 859px) {
  main.behallare {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding-top: 1.4rem;
    padding-bottom: 2.5rem;
  }
}

/* Brödsmulor och innehållsförteckning */
.brodsmulor ol {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .85rem;
  color: var(--muted);
}
.brodsmulor li + li::before {
  content: "›";
  padding: 0 .35rem 0 0;
  color: #888;
}
.brodsmulor a { color: var(--muted); text-decoration: none; }
.brodsmulor a:hover { text-decoration: underline; color: var(--green-dark); }
.brodsmulor [aria-current] { color: var(--head); font-weight: 600; }

.innehall-lista {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
}
.innehall-lista p { margin: 0 0 .25rem; font-weight: 700; color: var(--head); }
.innehall-lista ul { margin: 0; padding-left: 1.2rem; }

.ingress {
  font-size: 1.1rem;
  color: #334150;
  margin-top: 0;
}

/* Startsida: mjuk hero runt H1 när den följs av .ingress */
main > h1:has(+ p.ingress) {
  margin: -.25rem -.25rem 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, #e3f3e9 0%, #f3faf6 45%, #fff 100%);
  border-left: 4px solid var(--green);
}
@media (min-width: 860px) {
  main > h1:has(+ p.ingress) {
    margin: -1rem -1.25rem 1.5rem;
    padding: 2rem 1.75rem 1.75rem;
  }
}

figure { margin: 1.5rem 0; }
figure img { border-radius: 12px; box-shadow: var(--shadow); }
figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.bild-liten img { max-width: 22rem; }

/* Film som bild + länk (ingen iframe) */
.film a { display: block; text-decoration: none; max-width: 40rem; }
.film span {
  display: block;
  margin-top: .4rem;
  text-decoration: underline;
  font-weight: 600;
  color: var(--link);
}

/* Kort för tjänstekategorier / klinikkort-stil */
.kort-lista {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .9rem;
  margin: 1rem 0 1.75rem;
}
.kort-lista li {
  border: 1px solid var(--border);
  border-top: 3px solid var(--green);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.05rem;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kort-lista li:hover {
  border-color: #bfe0ca;
  border-top-color: var(--green);
  box-shadow: 0 4px 14px rgba(16, 24, 40, .09);
  transform: translateY(-1px);
}
.kort-lista a {
  font-weight: 700;
  color: var(--head);
  text-decoration: none;
}
.kort-lista a:hover,
.kort-lista a:focus {
  color: var(--green-dark);
  text-decoration: underline;
}
.kort-lista img { margin-bottom: .6rem; border-radius: 8px; }
.kort-lista h3 { margin: .1rem 0 .45rem; font-size: 1.05rem; line-height: 1.35; }
.kort-lista p { margin: .25rem 0; font-size: .95rem; line-height: 1.55; }
.kort-lista--mall {
  opacity: .85;
  border: 1px dashed var(--border);
  padding: 1rem;
  border-radius: 8px;
  display: block;
}
.kort-lista--mall h3 { margin: 0 0 .35rem; font-size: 1.05rem; }

/* ol.kort-lista (ortsidor med företagsrader) – en kolumn när innehåll är rikt */
ol.kort-lista {
  grid-template-columns: 1fr;
  counter-reset: none;
}

/* Vanliga frågor och ortlista med <details>/<summary> */
details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: .75rem 0;
  background: var(--card);
}
summary {
  cursor: pointer;
  padding: .9rem 2.5rem .9rem 1.1rem;
  font-weight: 700;
  list-style: none;
  position: relative;
  background: var(--bg-soft);
  border-radius: var(--radius);
  color: var(--head);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s;
}
details[open] > summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}
details[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
summary h3 { display: inline; font-size: 1.1rem; margin: 0; }
details > div {
  padding: .9rem 1.1rem 1rem;
  background: #fff;
}
.ortlista { columns: 14rem; padding-left: 1.2rem; }
.ortlista li { break-inside: avoid; }
.ortlista a { text-decoration: none; color: var(--head); font-weight: 600; }
.ortlista a:hover { color: var(--green-dark); text-decoration: underline; }

/* Tabell (annonspaket) */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: .95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
th, td {
  border: 1px solid var(--border);
  padding: .6rem .8rem;
  text-align: left;
  vertical-align: top;
}
thead th { background: var(--bg-soft); color: var(--head); }
tbody tr:nth-child(even) td { background: #fafbfc; }

/* Knappar (om de används) */
.knapp,
a.knapp {
  display: inline-block;
  padding: .7rem 1.3rem;
  background: var(--green);
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(47, 143, 78, .25);
}
.knapp:hover,
.knapp:focus,
a.knapp:hover,
a.knapp:focus {
  background: var(--green-dark);
  color: #fff !important;
  text-decoration: none;
}

/* Platshållare – måste synas tydligt även på ny palett */
.platshallare {
  background: var(--varning-bg);
  border: 2px dashed var(--varning-kant);
  padding: .1rem .4rem;
  border-radius: .25rem;
  font-weight: 600;
  color: var(--head);
}
p.platshallare,
div.platshallare { padding: .75rem 1rem; }

/* ===== Sidfot: mörk ===== */
.sidfot {
  background: var(--footer-bg);
  color: var(--footer-om);
  padding: 2.75rem 0 0;
  margin-top: 0;
  font-size: .95rem;
  line-height: 1.7;
  border-top: 0;
}
.sidfot .behallare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-bottom: 0;
}
.sidfot ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
}
.sidfot a {
  color: var(--footer-link);
  text-decoration: none;
  font-size: .95rem;
}
.sidfot a:hover,
.sidfot a:focus {
  color: #fff;
  text-decoration: underline;
}
.sidfot p {
  margin: 0 0 .65rem;
  color: var(--footer-om);
  font-size: .92rem;
  max-width: 56ch;
}
.sidfot p:last-child {
  margin: 1.75rem 0 0;
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--footer-botten);
  font-size: .85rem;
  max-width: none;
}
/* Platshållare i footer ska synas mot mörk bakgrund */
.sidfot .platshallare {
  background: #3a2f0a;
  border-color: #d4a017;
  color: #ffe9a8;
}

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

@media print {
  .sidhuvud, .sidfot, .hoppa { display: none !important; }
  body { background: #fff; }
  main.behallare {
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: none;
  }
}

/* ===== SV-sidupplägg (2026-11-06 sv2): ortssida, företagskort, usp, sidfot i kolumner ===== */
[hidden] { display: none !important; }

/* Tom företagslista – ärligt meddelande, inga platshållarkort */
.tom-lista {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  color: var(--text);
}

/* Företagskort enligt SV-klinikkort */
ol.foretagslista { grid-template-columns: 1fr; gap: 1rem; }
.foretagslista li.foretag-kort:hover { transform: none; }
.foretagslista h3 { font-size: 1.15rem; margin: .1rem 0 .5rem; }
.foretagslista a { font-weight: 600; color: var(--link); text-decoration: underline; }
.foretagslista a:hover, .foretagslista a:focus { color: var(--green-dark); }
.kort-adress { color: var(--text); }
/* Google-betyg i SV-format (Bengt t78u, 2026-11-10).
   Samma rad som sverigesveterinarer.se. Klassen .kort-betyg behålls
   (Sqords motsvarighet till .klinik-google). Färger: --muted och --head
   är redan samma tokens som SV; stjärnan #f59e0b är samma som SV och
   krockar inte med Sqords gröna palett. */
.kort-betyg {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}
.kort-betyg a,
.foretagslista .kort-betyg a {
  display: inline;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.55;
}
.kort-betyg a:hover,
.kort-betyg a:focus,
.foretagslista .kort-betyg a:hover,
.foretagslista .kort-betyg a:focus {
  color: var(--muted);
  text-decoration: none;
}
.kort-betyg a:hover .g-antal,
.kort-betyg a:focus .g-antal,
.foretagslista .kort-betyg a:hover .g-antal,
.foretagslista .kort-betyg a:focus .g-antal {
  text-decoration: underline;
}
.kort-betyg strong {
  color: var(--head);
  font-weight: 500;
}
.kort-betyg .stjarna,
.stjarna {
  color: #f59e0b;
  font-size: 1.05em;
  line-height: 1;
}
.kort-betyg .g-antal {
  color: var(--muted);
}
.kort-not { color: var(--muted); font-size: .9rem !important; }
.kort-ring { margin: .6rem 0 !important; }
.foretagslista a.ring-knapp,
a.ring-knapp {
  display: inline-block;
  padding: .45rem 1rem;
  border: 2px solid #1d4ed8;
  border-radius: 999px;
  color: #1d4ed8;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}
.foretagslista a.ring-knapp:hover,
.foretagslista a.ring-knapp:focus,
a.ring-knapp:hover,
a.ring-knapp:focus { background: #dbeafe; color: #1e40af; text-decoration: none; }
a.ring-knapp:active { background: #bfdbfe; }
.foretagslista details { margin: .5rem 0; }
.foretagslista summary { padding: .5rem 2.25rem .5rem .8rem; font-size: .95rem; }
.foretagslista details > div { padding: .5rem .8rem; }

/* «Så får du hjälp» – SV usp-lista med bock */
.usp-lista { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.usp-lista li {
  position: relative;
  padding: .35rem 0 .35rem 2.1rem;
  margin: 0 0 .35rem;
}
.usp-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .4rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--green-soft);
  border: 1px solid var(--ring);
  color: var(--green);
  font-weight: 800;
  font-size: .85rem;
  line-height: 1.35rem;
  text-align: center;
}

/* Sidfot i kolumner (SV: 1.6fr/1fr/1fr) */
.sidfot .sidfot-rutnat {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 1.5rem;
}
.sidfot-logga { display: inline-block; line-height: 0; margin-bottom: .75rem; }
.sidfot-logga img { height: 2rem; width: auto; }
.sidfot .sidfot-om p,
.sidfot .sidfot-om p:last-child {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--footer-om);
  font-size: .92rem;
}
.sidfot .sidfot-rubrik,
.sidfot .sidfot-kol p:last-child {
  color: #fff;
  font-weight: 700;
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  font-size: .95rem;
}
.sidfot .sidfot-kol ul { display: block; margin: 0; }
.sidfot .sidfot-kol li { margin: 0 0 .3rem; }
.sidfot .sidfot-botten p,
.sidfot .sidfot-botten p:last-child {
  margin: 0;
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--footer-botten);
  font-size: .85rem;
  max-width: none;
}
@media (max-width: 760px) {
  .sidfot .sidfot-rutnat { grid-template-columns: 1fr 1fr; }
  .sidfot-om { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .sidfot .sidfot-rutnat { grid-template-columns: 1fr; }
}

/* Header: logga vänster + meny höger på samma rad, ortraden under över hela bredden (SV) */
@media (min-width: 68.01rem) {
  .sidhuvud .behallare {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0;
  }
  .sidhuvud .huvudmeny { display: contents; }
  .sidhuvud .huvudmeny > ul:first-child { grid-column: 2; justify-content: flex-end; }
  .sidhuvud .huvudmeny-orter { grid-column: 1 / -1; margin: .4rem 0 0; }
}

/* ===== Toppmeny med tjänstegrupper + sidfot-nav (2026-11-10 nav1) ===== */
/* Ingen JS: <details>/<summary> för tjänstegrupper, befintlig checkbox (.meny-vaxel) för mobilmenyn. */
.huvudmeny .meny-grupp { position: relative; }
.huvudmeny .meny-grupp details {
  margin: 0;
  border: 0;
  background: transparent;
}
.meny-grupp summary {
  position: static;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--head);
  background: transparent;
  padding: .55rem .85rem;
  border-radius: 8px;
  line-height: 1.4;
  white-space: nowrap;
}
.meny-grupp details[open] > summary { border-bottom: 0; border-radius: 8px; }
.meny-grupp summary::-webkit-details-marker { display: none; }
.meny-grupp summary::after {
  content: "";
  position: static;
  display: inline-block;
  width: .4em;
  height: .4em;
  margin-left: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.2em) rotate(45deg);
}
.meny-grupp details[open] > summary::after { transform: translateY(.05em) rotate(-135deg); }
.meny-grupp summary:hover,
.meny-grupp summary:focus-visible,
.meny-grupp details[open] > summary,
.meny-grupp-aktiv summary {
  background: var(--green-soft);
  color: var(--green-dark);
}
.meny-grupp summary:focus-visible { outline: 3px solid #9fd3b0; outline-offset: 2px; }
.huvudmeny .meny-grupp ul {
  display: block;
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 60;
  min-width: 13rem;
  padding: .4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.huvudmeny .meny-grupp ul a { display: block; }
@media (max-width: 68rem) {
  .meny-grupp summary { display: flex; justify-content: space-between; align-items: center; }
  .huvudmeny .meny-grupp ul {
    position: static;
    min-width: 0;
    padding: 0 0 .35rem 1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}
.sidfot .sidfot-rutnat { grid-template-columns: 1.1fr 4fr; }
.sidfot-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.sidfot a[aria-current] { color: #fff; font-weight: 700; }
@media (max-width: 960px) {
  .sidfot .sidfot-rutnat { grid-template-columns: 1fr; }
  .sidfot-nav { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}