/*
Theme Name: Viloguiden
Theme URI: https://viloguiden.se
Description: Barntema till GeneratePress. Byggt efter DESIGNSPEC.md. Inga gradienter (utom ton över foto i hero), inga skuggor, max två bakgrundsfärger per sida.
Author: Viloguiden
Template: generatepress
Version: 1.7.0
Text Domain: viloguiden
*/

/* =========================================================
   TYPSNITT — självhostade, inga externa anrop
   Svenska å ä ö ligger i latin-subsettet. Latin-ext laddas
   bara om sidan faktiskt innehåller sådana tecken.
   ========================================================= */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* =========================================================
   TOKENS — enda tillåtna källa till färg, mått och typsnitt
   ========================================================= */
:root{
  --vg-indigo:#1A2347; --vg-indigo-700:#283362; --vg-indigo-kant:#444F7E; --vg-bla:#3E5098;
  --vg-bla-mork:#32417B;
  --vg-salvia:#6CAC9C; --vg-salvia-700:#549C8A;
  --vg-dimma:#EEEAF2; --vg-papper:#FAF9F7; --vg-vit:#FFFFFF;
  --vg-text:#211F3B; --vg-text-svag:#5B5770; --vg-linje:#E3DEEA;
  --vg-linje-mork:#444F7E; --vg-linje-ljus:#D9D3E6;
  --vg-ingress-mork:#C7C4E0; --vg-fot-svag:#8D89AE;

  --vg-font-rubrik:'Poppins',system-ui,sans-serif;
  --vg-font-text:'Source Sans 3',system-ui,sans-serif;
  --vg-font-etikett:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --vg-bredd:1180px; --vg-radie:6px; --vg-radie-knapp:4px;
  --vg-sektion-y:52px; --vg-sektion-x:40px; --vg-gap:18px;
  /* Startvarde innan guide.js hinner mata upp den riktiga
     headerhojden (och admin-baren om inloggad), se assets/guide.js */
  --vg-toc-offset:100px;
  /* Delade mellan artikelhuvudet och sjalva artikeltexten, bade pa
     guider och vanliga sidor, sa vansterkanten aldrig kan glida isar. */
  --vg-toc-bredd:240px; --vg-toc-gap:56px; --vg-artikel-bredd:720px;
}

/* =========================================================
   BAS
   ========================================================= */
body{
  font-family:var(--vg-font-text); font-size:17px; line-height:1.65;
  color:var(--vg-text); background:var(--vg-papper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--vg-font-rubrik); color:var(--vg-indigo); margin:0 0 .5em; }
h1{ font-size:clamp(32px,4.4vw,46px); line-height:1.1; letter-spacing:-.03em; font-weight:700; }
h2{ font-size:clamp(24px,2.6vw,28px); line-height:1.2; letter-spacing:-.02em; font-weight:600; }
h3{ font-size:20px; line-height:1.4; font-weight:600; }
h4{ font-size:17px; line-height:1.4; font-weight:600; }
p{ margin:0 0 1rem; }
a{ color:var(--vg-bla); }
a:hover{ color:var(--vg-indigo); }
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--vg-bla); outline-offset:2px;
}
img{ max-width:100%; height:auto; border-radius:var(--vg-radie); }

.vg-wrap{ max-width:var(--vg-bredd); margin-inline:auto; padding-inline:var(--vg-sektion-x); }

/* Verktygssidor via egen sidmall (mall-somntest.php).
   Mallen anropar get_header() direkt och far darfor inte GeneratePress
   vanliga innehallsomslag — centrering och luft maste satta har. */
.vg-verktygssida{
  max-width:var(--vg-bredd);
  margin-inline:auto;
  padding:56px var(--vg-sektion-x) 72px;
}
@media (max-width:768px){
  .vg-verktygssida{ padding:32px var(--vg-sektion-x) 48px; }
}

/* Sömntestet: herons foto upptill, testkortet överlappar bilden.
   Mörk ton över foto är samma undantag som i heron (DESIGNSPEC), men mörkare.
   Selektorerna har .vg-somnsida först så de vinner över mallens inline-CSS. */
.vg-somnsida{ position:relative; isolation:isolate; background:var(--vg-papper); }
.vg-somnsida__bg{
  position:absolute; inset:0 0 auto 0; height:60vh; height:60svh; min-height:360px;
  z-index:0; overflow:hidden; pointer-events:none;
}
.vg-somnsida__bild{
  display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center;
}
.vg-somnsida__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--vg-indigo) 82%,transparent) 0%,
    color-mix(in srgb,var(--vg-indigo) 52%,transparent) 100%);
}
.vg-somnsida .vg-verktygssida{ position:relative; z-index:1; padding-top:clamp(72px,14vh,140px); }
@media (max-width:768px){
  .vg-somnsida .vg-verktygssida{ padding-top:56px; }
}

/* Kortet: lugn, mjuk ton och en svag inskrollning */
.vg-somnsida .vgt__panel{
  background:var(--vg-papper); border-color:var(--vg-linje-ljus);
  padding:44px 40px;
  animation:vg-somn-in .6s ease both;
}
.vg-somnsida .vgt__panel:hover{ border-color:var(--vg-linje-ljus); }
.vg-somnsida #vgt-intro h2{ font-size:clamp(1.9rem,4.4vw,2.5rem); margin-bottom:14px; }
.vg-somnsida #vgt-intro .vgt__lead{ line-height:1.7; margin-bottom:0; }
.vg-somnsida .vgt__eyebrow{ color:var(--vg-bla-mork); }

/* Meta-raden: tre tydliga rutor i stället för en tunn rad */
.vg-somnsida .vgt__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:28px 0 32px; padding:0; border:0;
}
.vg-somnsida .vgt__meta div{
  background:var(--vg-dimma); border-radius:var(--vg-radie); padding:16px 18px;
}
.vg-somnsida .vgt__meta div b{ font-size:1.3rem; color:var(--vg-indigo); line-height:1.2; margin-bottom:4px; }
.vg-somnsida .vgt__meta div span{ font-size:.75rem; color:var(--vg-text-svag); }

/* Påbörjat test: "Fortsätt" ligger under Starta med tydligt avstånd */
.vg-somnsida .vgt__resume{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:16px 0 0; font-size:.95rem; color:var(--vg-text-svag);
}
@keyframes vg-somn-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width:600px){
  .vg-somnsida .vgt__panel{ padding:28px 20px; }
  .vg-somnsida .vgt__meta{ grid-template-columns:1fr; gap:10px; margin:22px 0 26px; }
  .vg-somnsida .vgt__meta div{ padding:12px 16px; }
}
@media (prefers-reduced-motion:reduce){
  .vg-somnsida .vgt__panel{ animation:none; }
}

.vg-sec{ padding-block:var(--vg-sektion-y); }
.vg-sec--dimma{ background:var(--vg-dimma); }
/* Vanlig blå klarar 6,30:1 på dimma, men mörkare nyans direkt på dimma
   ger bättre marginal (8,12:1) — bara där texten faktiskt ligger på
   dimman, inte inuti vita kort. */
.vg-sec--dimma > .vg-wrap > .vg-head a,
.vg-sec--dimma > .vg-wrap > .vg-head .vg-etikett,
.vg-sec--dimma > .vg-wrap > .vg-etikett{ color:var(--vg-bla-mork); }
.vg-sec--indigo{ background:var(--vg-indigo); color:var(--vg-vit); }
.vg-sec--indigo h2,.vg-sec--indigo h3{ color:var(--vg-vit); }
.vg-sec--indigo p{ color:var(--vg-ingress-mork); }
.vg-sec--linje{ border-top:1px solid var(--vg-linje); }

/* etikett */
.vg-etikett{
  font-family:var(--vg-font-etikett); font-size:11px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--vg-bla); margin-bottom:10px; display:block;
  white-space:nowrap; line-height:1.4;
}
/* I smala kort far etiketten hellre krympa an bryta rad */
.vg-guidekort .vg-etikett,
.vg-kort .vg-etikett{ font-size:10.5px; letter-spacing:.12em; }
.vg-sec--indigo .vg-etikett,.vg-hero .vg-etikett{ color:var(--vg-salvia); }

/* sektionshuvud */
.vg-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.vg-head p{ color:var(--vg-text-svag); margin:0; }
.vg-head h2{ margin-bottom:6px; text-wrap:balance; }
.vg-kort h3, .vg-hero h1, .vg-cta h2{ text-wrap:balance; }
.vg-head__mer{ font-family:var(--vg-font-rubrik); font-weight:600; font-size:15px;
  text-decoration:none; white-space:nowrap; }

/* =========================================================
   HELBREDD PA STARTSIDAN
   Bygger pa WordPress egen body-klass "home" i stallet for
   en egen klass — den finns alltid och kan inte missas.
   Det som styr bredden ar den yttre #page.grid-container,
   inte de inre elementen.
   ========================================================= */
body.home #page.grid-container,
body.home .site.grid-container,
body.home .site-content,
body.home .content-area,
body.home .site-main,
body.home .inside-article,
body.home .entry-content,
body.vg-helbredd #page.grid-container,
body.vg-helbredd .site-content,
body.vg-helbredd .content-area,
body.vg-helbredd .site-main,
body.vg-helbredd .inside-article,
body.vg-helbredd .entry-content{
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
body.home .site-content,
body.vg-helbredd .site-content{ display:block !important; }
body.home .entry-content > *:first-child,
body.vg-helbredd .entry-content > *:first-child{ margin-top:0 !important; }

/* Sektionerna fyller den nu oppna behallaren */
body.home .vg-hero,
body.home .vg-sec,
body.home .vg-cta,
body.home .vg-nyhetsbrev,
body.home .alignfull{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Pa vanliga guidesidor, dar behallaren ar smal, far
   alignfull daremot bryta sig ut som vanligt. */
.vg-guide:not(.home) .entry-content > .alignfull{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Inre omslaget star for centrering och luft. Hogre specificitet
   an Gutenbergs constrained-layout, som annars nollar padding. */
.vg-hero .vg-wrap,
.vg-sec .vg-wrap,
.vg-cta .vg-wrap,
.vg-nyhetsbrev .vg-wrap,
.wp-block-group.vg-wrap{
  max-width:var(--vg-bredd) !important;
  margin-inline:auto !important;
  padding-inline:var(--vg-sektion-x) !important;
  box-sizing:border-box;
}

/* =========================================================
   SPACING-NORMALISERING
   WordPress lagger egna marginaler mellan block ovanpa temats
   spacing, vilket ger dubbla mellanrum. Nastlade Gutenberg-
   omslag staplar ytterligare. Har nollas det sa att temat
   ensamt styr rytmen — galler automatiskt pa alla sidor.
   ========================================================= */
.vg-hero > .wp-block-group__inner-container,
.vg-sec > .wp-block-group__inner-container,
.vg-cta > .wp-block-group__inner-container,
.vg-nyhetsbrev > .wp-block-group__inner-container,
.vg-wrap > .wp-block-group__inner-container{
  margin-block:0;
}
.vg-hero > .wp-block-group__inner-container > *,
.vg-sec > .wp-block-group__inner-container > *,
.vg-cta > .wp-block-group__inner-container > *,
.vg-nyhetsbrev > .wp-block-group__inner-container > *,
.vg-wrap > .wp-block-group__inner-container > * + *{
  margin-block-start:0;
}

/* Sektionsrubriken bar sitt eget avstand nedat, inget annat */
.vg-head{ margin-top:0; }
.vg-head + *{ margin-top:0 !important; }
.vg-head .wp-block-group,
.vg-head .wp-block-group__inner-container{ margin-block:0; }
.vg-head h2:first-child{ margin-top:0; }
.vg-head p:last-child{ margin-bottom:0; }

/* Gridar ska aldrig arva blockmarginal ovanifran */
.vg-cards,.vg-grid-2,.vg-grid-3,.vg-grid-4{ margin-block:0; }

/* =========================================================
   NEUTRALISERA WORDPRESS LAYOUTSYSTEM INUTI KOMPONENTER

   Gutenberg satter "is-layout-constrained" pa varje nastlad
   inner-container. Den begransar innehallet till WordPress
   globala content-size och centrerar det med auto-marginaler
   — aven inuti ett kort som redan ar smalt. Resultatet blir
   luft pa bada sidor om texten och for tidiga radbrytningar.

   Har slas det av en gang for alla innanfor temats komponenter.
   Temat styr bredd och luft; WordPress styr ingenting.
   Galler automatiskt i allt du bygger framover.
   ========================================================= */
.vg-kort .wp-block-group__inner-container,
.vg-guidekort .wp-block-group__inner-container,
.vg-guidekort__kropp,
.vg-head .wp-block-group__inner-container,
.vg-hero .wp-block-group__inner-container,
.vg-sec .wp-block-group__inner-container,
.vg-cta .wp-block-group__inner-container,
.vg-nyhetsbrev .wp-block-group__inner-container{
  max-width:none !important;
  width:100% !important;
}

/* WordPress lagger aven egen padding pa inner-containern via
   sin globala root-padding. Det ger bade stora tomrum ovanfor
   rubriker och for smala textytor inuti kort. Temat ska sta
   for all luft — WordPress ingen. */
.vg-hero .wp-block-group__inner-container,
.vg-sec .wp-block-group__inner-container,
.vg-cta .wp-block-group__inner-container,
.vg-nyhetsbrev .wp-block-group__inner-container,
.vg-kort .wp-block-group__inner-container,
.vg-guidekort .wp-block-group__inner-container,
.vg-head .wp-block-group__inner-container,
.vg-wrap > .wp-block-group__inner-container{
  padding:0 !important;
}

.vg-kort .wp-block-group__inner-container > *,
.vg-guidekort .wp-block-group__inner-container > *,
.vg-head .wp-block-group__inner-container > *,
.vg-hero__grid .wp-block-column > *,
.vg-nyhetsbrev__grid > * > *{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Det har ar det avgorande: WordPress satter max-bredd pa BARNEN
   till en constrained container, inte pa containern sjalv. Utan
   den har regeln kryms gridet till WordPress content-size i
   stallet for att fylla .vg-wrap. */
.vg-wrap > .wp-block-group__inner-container > *{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Undantag: .vg-wrap ar temats egen centrering och ska sta kvar */
.vg-wrap{ max-width:var(--vg-bredd) !important; }


/* =========================================================
   BALANSERAD SEKTIONSRYTM
   Rubriker bar en egen toppmarginal fran GeneratePress som
   lagger sig ovanpa sektionens padding. Det gor sektionerna
   toppatunga — mer luft ovanfor rubriken an under innehallet.
   Har nollas den sa att --vg-sektion-y ensam styr, och
   sektionerna blir symmetriska pa alla sidor automatiskt.
   ========================================================= */
.vg-hero h1, .vg-hero h2,
.vg-sec h2, .vg-sec h3,
.vg-cta h2,
.vg-nyhetsbrev h2,
.vg-head h2, .vg-head h3,
.vg-kort h3, .vg-guidekort h3{
  margin-top:0 !important;
}

/* Forsta och sista elementet i en sektion ska aldrig lagga
   till egen luft utover sektionens padding */
.vg-wrap > .wp-block-group__inner-container > *:first-child,
.vg-head > *:first-child,
.vg-head .wp-block-group__inner-container > *:first-child{
  margin-top:0 !important;
}
.vg-wrap > .wp-block-group__inner-container > *:last-child,
.vg-head p:last-child{
  margin-bottom:0 !important;
}


/* =========================================================
   INRE RYTM I KORT
   Rubrikernas toppmarginal nollas globalt for att sektionerna
   ska bli symmetriska. Inuti kort behovs dock explicit luft
   mellan etikett, rubrik och brodtext — annars klumpas de ihop.
   Sats har i stallet for att arvas fran WordPress.
   ========================================================= */
.vg-guidekort__kropp{ padding:22px 20px 24px !important; }
.vg-kort{ padding:26px 24px 24px; }

.vg-guidekort .vg-etikett,
.vg-kort .vg-etikett{ margin-bottom:14px !important; }

.vg-guidekort h3{ margin-bottom:10px !important; }
.vg-kort h3{ margin-bottom:9px !important; }

.vg-guidekort p:last-child,
.vg-kort p:last-child{ margin-bottom:0 !important; }

/* =========================================================
   SIDHUVUD — sticky, lätt bakgrund, tunn kant, ordmärke med undertext,
   menylänkar med indikator och knappen "Gör sömntestet" sist.
   Ingen skugga och ingen gradient. Knappen ligger i primärmenyn
   (functions.php, 5b) och följer därför med i mobilmenyn.
   ========================================================= */
.site-header{
  background:color-mix(in srgb,var(--vg-vit) 97%,transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--vg-linje);
  position:sticky; top:0; z-index:99; padding-block:0;
}
body.admin-bar .site-header{ top:32px; }
.site-header .inside-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap:24px; max-width:var(--vg-bredd); margin-inline:auto;
  padding:12px var(--vg-sektion-x);
}
.site-header .site-branding-container,
.site-header .site-branding{ display:flex; align-items:center; margin:0; }
.site-header .site-branding-container{ gap:12px; flex:0 0 auto; }
.site-header .site-logo{ margin:0; flex:0 0 auto; }
.site-logo img{ max-height:40px; width:auto; border-radius:var(--vg-radie-knapp); display:block; }

.vg-varumarke{ flex-direction:column; align-items:flex-start !important; gap:2px; }
.vg-varumarke .main-title{
  margin:0; font-family:var(--vg-font-rubrik); font-weight:700; font-size:20px;
  line-height:1.1; letter-spacing:-.02em;
}
.vg-varumarke .main-title a{ color:var(--vg-indigo); text-decoration:none; }
.vg-varumarke__text{
  margin:0; font-family:var(--vg-font-text); font-size:13px; line-height:1.2;
  color:var(--vg-text-svag); white-space:nowrap;
}

.main-navigation,
.main-navigation .main-nav ul li a{
  background:transparent; color:var(--vg-indigo);
  font-family:var(--vg-font-rubrik); font-weight:600; font-size:15px;
}
.site-header .main-navigation{ float:none; width:auto; margin-left:auto; }
.site-header .main-navigation .inside-navigation{ padding:0; }
.main-navigation .main-nav ul{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; }
.main-navigation .main-nav ul li{ float:none; white-space:nowrap; }
.main-navigation .main-nav ul li a{
  position:relative; line-height:1.2; padding:10px 14px; border-radius:var(--vg-radie-knapp);
  transition:background .15s ease,color .15s ease;
}
.main-navigation .main-nav ul li:not(.vg-nav-knapp-post)>a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--vg-salvia); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.main-navigation .main-nav ul li:not(.vg-nav-knapp-post)>a:hover{
  color:var(--vg-indigo); background:transparent;
}
.main-navigation .main-nav ul li:not(.vg-nav-knapp-post)>a:hover::after{ transform:scaleX(1); }
.main-navigation .main-nav ul li[class*="current-menu-"]:not(.vg-nav-knapp-post)>a,
.main-navigation .main-nav ul li[class*="current_page_"]:not(.vg-nav-knapp-post)>a{
  color:var(--vg-indigo); background:transparent;
}
.main-navigation .main-nav ul li[class*="current-menu-"]:not(.vg-nav-knapp-post)>a::after,
.main-navigation .main-nav ul li[class*="current_page_"]:not(.vg-nav-knapp-post)>a::after{ transform:scaleX(1); }

.main-navigation .main-nav ul li.vg-nav-knapp-post{ margin-left:28px; }
.main-navigation .main-nav ul li a.vg-nav-knapp{
  background:var(--vg-indigo); color:var(--vg-vit); padding:11px 20px;
  border-radius:var(--vg-radie-knapp); line-height:1.2; white-space:nowrap;
}
.main-navigation .main-nav ul li a.vg-nav-knapp:hover{ background:var(--vg-indigo-700); color:var(--vg-vit); }
.main-navigation .main-nav ul li a:focus-visible,
.vg-varumarke .main-title a:focus-visible,
.menu-toggle:focus-visible{ outline:2px solid var(--vg-bla); outline-offset:2px; }

/* Sömntest finns som knapp — dölj den vanliga menyposten överallt */
.main-navigation .main-nav ul li.vg-nav-somntest{ display:none; }
/* Undertexten tar plats — dölj den när bredden blir trång */
@media (max-width:1060px){ .vg-varumarke__text{ display:none; } }

.menu-toggle{
  font-family:var(--vg-font-rubrik); font-weight:600; color:var(--vg-indigo);
  background:transparent; border:1px solid var(--vg-linje-ljus); border-radius:var(--vg-radie-knapp);
  padding:9px 14px; line-height:1.2;
}
.menu-toggle:hover,
.menu-toggle[aria-expanded="true"]{ background:var(--vg-dimma); color:var(--vg-indigo); }

@media (max-width:768px){
  .site-header .inside-header{ padding:10px 20px; gap:12px; flex-wrap:wrap; }
  .site-header .main-navigation{ margin-left:0; flex:0 0 auto; }
  .main-navigation .main-nav{ flex-basis:100%; }
  /* Uppfälld meny: hel rad under märket, rader med linje emellan */
  .main-navigation.toggled .inside-navigation{ flex-wrap:wrap; }
  .main-navigation.toggled .main-nav{
    width:100%; background:var(--vg-vit); border-top:1px solid var(--vg-linje); padding:8px 0 16px;
  }
  .main-navigation .main-nav ul{ display:block; }
  .main-navigation .main-nav ul li{ white-space:normal; }
  .main-navigation .main-nav ul li a{ padding:14px 12px; font-size:16px; border-radius:0; }
  .main-navigation .main-nav ul li:not(.vg-nav-knapp-post)>a{ border-bottom:1px solid var(--vg-linje); }
  .main-navigation .main-nav ul li:not(.vg-nav-knapp-post)>a::after{
    left:0; right:auto; top:8px; bottom:8px; width:3px; height:auto;
    transform:scaleY(0); transform-origin:top;
  }
  .main-navigation .main-nav ul li:not(.vg-nav-knapp-post)>a:hover::after,
  .main-navigation .main-nav ul li[class*="current-menu-"]:not(.vg-nav-knapp-post)>a::after,
  .main-navigation .main-nav ul li[class*="current_page_"]:not(.vg-nav-knapp-post)>a::after{ transform:scaleY(1); }
  .main-navigation .main-nav ul li.vg-nav-knapp-post{ margin:16px 0 0; }
  .main-navigation .main-nav ul li a.vg-nav-knapp{ display:block; text-align:center; padding:14px 20px; border-radius:var(--vg-radie-knapp); }
  .vg-varumarke .main-title{ font-size:19px; }
}

/* =========================================================
   HERO — indigo, text vänster, bild höger
   ========================================================= */
.vg-hero{ background:var(--vg-indigo); color:var(--vg-vit); padding-block:64px; }
.vg-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.vg-hero h1{ color:var(--vg-vit); margin-bottom:16px; }
.vg-hero p{ color:var(--vg-ingress-mork); font-size:18px; max-width:46ch; margin-bottom:26px; }
.vg-hero__bild img{ border-radius:var(--vg-radie); aspect-ratio:3/2; object-fit:cover; width:100%; }

/* Startsidan: hero i helskärmshöjd med bakgrundsbild och långsam zoom */
body.home .vg-hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:78vh; min-height:78svh;
  display:flex; align-items:center;
}
/* Allt utom bilden (inner-container eller .vg-wrap) ligger över överlägget */
body.home .vg-hero > :not(.vg-hero__bg){ position:relative; z-index:2; width:100%; }
.vg-hero__bg{
  position:absolute !important; inset:0; z-index:0;
  width:100% !important; height:100% !important; max-width:none !important;
  margin:0 !important; object-fit:cover; object-position:center;
  transform-origin:65% 50%;
  animation:vg-kenburns 20s ease-in-out infinite alternate;
}
body.home .vg-hero p{ max-width:52ch !important; }
body.home .vg-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--vg-indigo) 85%,transparent) 0%,
    color-mix(in srgb,var(--vg-indigo) 35%,transparent) 100%);
}
@keyframes vg-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.1); } }
@media (max-width:768px){
  /* Smal skärm: texten täcker bilden, så överlägget är starkare */
  body.home .vg-hero::after{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--vg-indigo) 88%,transparent) 0%,
      color-mix(in srgb,var(--vg-indigo) 60%,transparent) 100%);
  }
}

/* =========================================================
   KNAPPAR
   ========================================================= */
.vg-btn,
.wp-block-button.vg-btn-primar .wp-block-button__link{
  display:inline-block; text-decoration:none; cursor:pointer; border:0;
  font-family:var(--vg-font-rubrik); font-weight:600; font-size:16px;
  padding:14px 26px; border-radius:var(--vg-radie-knapp);
  background:var(--vg-indigo); color:var(--vg-vit);
  transition:background .15s ease;
}
.vg-btn:hover,
.wp-block-button.vg-btn-primar .wp-block-button__link:hover{
  background:var(--vg-indigo-700); color:var(--vg-vit);
}
.vg-btn--sek{
  background:transparent; color:var(--vg-vit); border:1px solid var(--vg-linje-mork);
}
.vg-btn--sek:hover{ background:var(--vg-indigo-700); color:var(--vg-vit); }
.vg-btn--sek-ljus{
  background:transparent; color:var(--vg-indigo); border:1px solid var(--vg-linje-ljus);
}
.vg-btn--sek-ljus:hover{ background:var(--vg-dimma); color:var(--vg-indigo); }
.vg-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* Primärknappen är indigo med vit text - fungerar fint pa ljus botten,
   men blir osynlig ovanpa indigo hero/sektioner (samma farg mot samma
   farg). Vand darfor pa den dar: vit yta, indigo text. */
.vg-hero .vg-btn,
.vg-sec--indigo .vg-btn{ background:var(--vg-vit); color:var(--vg-indigo); }
.vg-hero .vg-btn:hover,
.vg-sec--indigo .vg-btn:hover{ background:var(--vg-dimma); color:var(--vg-indigo); }

/* =========================================================
   KORT — vit yta, kant, ingen skugga, hover = blå kant
   ========================================================= */
/* Kolumnerna ar inte lasta till ett antal — de anpassar sig efter
   tillgangligt utrymme. Da behover du aldrig justera kolumnantal
   manuellt nar du bygger nya sidor.

   !important kravs: WordPress skriver ut sina layoutstilar inline
   i <head>, alltsa efter den har filen. Vid samma specificitet
   vinner den senare, sa .wp-block-columns-is-layout-flex skulle
   annars sla ut gridet och tvinga fram WordPress egna mellanrum. */
.vg-grid-2,.vg-grid-3,.vg-grid-4,.vg-cards{
  display:grid !important;
  gap:var(--vg-gap) !important;
  align-items:stretch;
}
.vg-grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important; }
.vg-grid-3{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)) !important; }
/* Tak pa 290px sa fardigt-fyllda 4-kort inte andras (de landar redan
   runt 261px), men farre kort - t.ex. vg/senaste-guider innan fyra
   guider ar publicerade - stracks inte ut kant i kant. justify-content
   centrerar dem istallet for att klumpa ihop sig till vanster. */
.vg-grid-4{ grid-template-columns:repeat(auto-fit,minmax(240px,290px)) !important; justify-content:center; }
.vg-cards{ grid-template-columns:repeat(auto-fit,minmax(258px,1fr)) !important; }

/* Kolumnblock inuti gridet ska inte bara pa med egna flexmatt */
.vg-grid-2 > .wp-block-column,
.vg-grid-3 > .wp-block-column,
.vg-grid-4 > .wp-block-column,
.vg-cards > .wp-block-column{
  flex-basis:auto !important;
  flex-grow:0 !important;
  min-width:0;
  margin:0 !important;
}

.vg-kort{
  background:var(--vg-vit); border:1px solid var(--vg-linje); border-radius:var(--vg-radie);
  padding:26px; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:border-color .15s ease;
}
.vg-kort:hover,.vg-kort:focus-within{ border-color:var(--vg-bla); }
.vg-kort h3{ margin-bottom:8px; }
.vg-kort p{ color:var(--vg-text-svag); font-size:16px; flex:1; margin-bottom:16px; }
.vg-kort__lank{
  font-family:var(--vg-font-rubrik); font-weight:600; font-size:15px;
  color:var(--vg-bla); margin-top:auto;
}
.vg-kort:hover .vg-kort__lank{ color:var(--vg-indigo); }
.vg-kort__ikon{
  width:34px; height:34px; border-radius:var(--vg-radie-knapp);
  background:var(--vg-dimma); color:var(--vg-bla);
  display:grid; place-items:center; margin-bottom:18px;
}
.vg-kort__ikon svg{ width:19px; height:19px; }

/* guidekort med bild */
.vg-guidekort{
  background:var(--vg-vit); border:1px solid var(--vg-linje); border-radius:var(--vg-radie);
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:border-color .15s ease;
}
.vg-guidekort:hover{ border-color:var(--vg-bla); }
.vg-guidekort__bild{ aspect-ratio:3/2; width:100%; object-fit:cover; border-radius:0; display:block; }
.vg-guidekort__kropp{ padding:18px 18px 20px; }
.vg-guidekort h3{ font-size:16.5px; line-height:1.28; letter-spacing:-.015em; margin-bottom:5px; text-wrap:balance; hyphens:auto; }
.vg-guidekort p{ color:var(--vg-text-svag); font-size:14px; line-height:1.45; margin:0; }

/* guidehubb: vg-head ger bara luft efter sin egen rubrik, inte fore
   nasta grupp nar flera kategorier staplas i samma sektion */
.vg-guidehubb__grupp + .vg-guidehubb__grupp{ margin-top:var(--vg-sektion-y); }

/* =========================================================
   NYHETSBREV
   ========================================================= */
.vg-nyhetsbrev{ background:var(--vg-vit); border-top:1px solid var(--vg-linje); padding-block:var(--vg-sektion-y); }
.vg-nyhetsbrev__grid{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
.vg-nyhetsbrev p{ color:var(--vg-text-svag); margin:0; }
.vg-nyhetsbrev__form{ display:flex; gap:10px; }
.vg-nyhetsbrev input[type=email]{
  font-family:var(--vg-font-text); font-size:16px; padding:13px 16px; min-width:260px;
  border:1px solid var(--vg-linje); border-radius:var(--vg-radie-knapp); background:var(--vg-vit); color:var(--vg-text);
}
.vg-nyhetsbrev button{
  font-family:var(--vg-font-rubrik); font-weight:600; font-size:16px; cursor:pointer;
  padding:13px 26px; border:0; border-radius:var(--vg-radie-knapp);
  background:var(--vg-indigo); color:var(--vg-vit); transition:background .15s ease;
}
.vg-nyhetsbrev button:hover{ background:var(--vg-indigo-700); }

/* =========================================================
   SIDFOT — indigo
   ========================================================= */
.vg-footer{ background:var(--vg-indigo); color:var(--vg-ingress-mork); padding-block:48px 28px; font-size:16px; }
.vg-footer a{ color:var(--vg-vit); text-decoration:none; }
.vg-footer a:hover{ text-decoration:underline; }
.vg-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.vg-footer h4{
  color:var(--vg-vit); font-family:var(--vg-font-etikett); font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
.vg-footer ul{ list-style:none; margin:0; padding:0; }
.vg-footer li{ margin-bottom:9px; }
.vg-footer__brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.vg-footer__brand img{ height:26px; width:auto; border-radius:0; }
.vg-footer__brand span{ font-family:var(--vg-font-rubrik); font-weight:600; font-size:18px; color:var(--vg-vit); }
.vg-footer__brand-text{ max-width:38ch; margin:0; }
.vg-footer__bas{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--vg-indigo-700);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:14px; color:var(--vg-fot-svag);
}

/* =========================================================
   GUIDETYPOGRAFI
   ========================================================= */
.vg-guide .entry-content{ max-width:72ch; }
.vg-guide .entry-content > * + *{ margin-top:1.1em; }
.vg-guide .entry-content h2{ margin-top:2.2em; }
.vg-guide .entry-content h3{ margin-top:1.8em; }
.vg-guide .entry-content ul,.vg-guide .entry-content ol{ padding-left:1.3em; }
.vg-guide .entry-content li{ margin-bottom:.4em; }
.vg-guide .entry-content blockquote{
  border-left:3px solid var(--vg-salvia); padding:2px 0 2px 20px; margin-left:0;
  color:var(--vg-text-svag); font-style:normal;
}
.vg-guide .entry-content table{ width:100%; border-collapse:collapse; font-size:16px; }
.vg-guide .entry-content th,.vg-guide .entry-content td{
  padding:11px 13px; border:1px solid var(--vg-linje); text-align:left;
}
.vg-guide .entry-content th{ background:var(--vg-dimma); font-weight:600; }
.vg-lead{ font-size:19px; color:var(--vg-text-svag); line-height:1.55; }
.vg-faktaruta{
  background:var(--vg-dimma); border-left:3px solid var(--vg-bla);
  border-radius:0 var(--vg-radie) var(--vg-radie) 0; padding:20px 24px;
}
.vg-faktaruta p:last-child{ margin-bottom:0; }
.vg-breadcrumbs{ font-size:14px; color:var(--vg-text-svag); margin-bottom:16px; }
.vg-breadcrumbs a{ text-decoration:none; }

/* =========================================================
   RESPONSIVT
   ========================================================= */
@media (max-width:900px){
  .vg-hero__grid{ grid-template-columns:1fr; gap:32px; }
  .vg-footer__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .vg-nyhetsbrev__grid{ grid-template-columns:1fr; gap:20px; }
  /* Inline-satta kolumnantal i gamla monster ska ge vika */
  .vg-grid-2,.vg-grid-3,.vg-grid-4{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
  }
}
@media (max-width:768px){
  :root{ --vg-sektion-y:38px; --vg-sektion-x:20px; --vg-gap:14px; }
  .vg-hero{ padding-block:44px; }
  .vg-grid-2,.vg-grid-3,.vg-grid-4,.vg-cards{
    grid-template-columns:1fr !important;
  }
  .vg-footer__grid{ grid-template-columns:1fr; }
  .vg-nyhetsbrev__form{ flex-direction:column; }
  .vg-nyhetsbrev input[type=email]{ min-width:0; width:100%; }
  .vg-head{ align-items:flex-start; }
  .vg-kort{ padding:22px 20px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* =========================================================
   GUIDESIDOR
   Artikelmall enligt DESIGNSPEC.md. Sticky innehallsforteckning
   240px, artikeltext 720px. Under 768px blir forteckningen en
   hopfallbar ruta hogst upp och layouten en kolumn.
   ========================================================= */

/* ---- Artikelhuvud ---- */
.vg-artikelhuvud{
  background:var(--vg-papper);
  border-bottom:1px solid var(--vg-linje);
  padding-block:var(--vg-sektion-y) 32px;
}
/* Artikelhuvudets bredd bestams per mall langre ned - vg-guidemall
   (grid, matchar TOC+artikel) och vg-sida (enkel artikel-bredd) -
   sa den aldrig av misstag kan bli en egen tredje siffra har. */
.vg-artikelhuvud .vg-etikett{ margin-bottom:12px; }
.vg-artikelhuvud h1{ margin:0 0 16px; max-width:22ch; }
.vg-artikelhuvud .vg-lead{ max-width:62ch; margin-bottom:20px; }
.vg-meta{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-family:var(--vg-font-etikett); font-size:12px;
  letter-spacing:.06em; color:var(--vg-text-svag);
}

/* ---- Artikelhuvud pa guider: samma grid som kroppen under, sa
   rubrik/ingress hamnar i kolumn 2 - ratt ovanfor artikeltexten,
   inte ovanfor TOC-kolumnen. max-width faller tillbaka pa temats
   vanliga --vg-bredd (samma box som .vg-guidebody__grid anvander). */
body.vg-guidemall .vg-artikelhuvud .vg-wrap{
  display:grid;
  grid-template-columns:var(--vg-toc-bredd) minmax(0,var(--vg-artikel-bredd));
  gap:var(--vg-toc-gap);
  justify-content:center;
}
.vg-artikelhuvud__innehall{ grid-column:2; }

/* ---- Tvakolumnslayout ---- */
.vg-guidebody{ background:var(--vg-papper); padding-block:40px var(--vg-sektion-y); }
.vg-guidebody__grid{
  display:grid;
  grid-template-columns:var(--vg-toc-bredd) minmax(0,var(--vg-artikel-bredd));
  gap:var(--vg-toc-gap);
  align-items:start;
  justify-content:center;
}

/* mall-sida.php: samma artikelbredd som guidernas text, men utan
   TOC-kolumnen - bade huvud och kropp far darfor samma enkla
   max-width, ingen grid behovs har. Egen klass pa kroppen sa den
   aldrig kan matcha .vg-guidebody .vg-wrap i allmanhet och trycka
   ihop guidemallens tvakolumnsgrid. */
.vg-sida .vg-artikelhuvud .vg-wrap{ max-width:var(--vg-artikel-bredd) !important; }
.vg-sida__innehall{ max-width:var(--vg-artikel-bredd) !important; }

/* ---- Innehallsforteckning ---- */
.vg-toc{ position:sticky; top:var(--vg-toc-offset); }
.vg-toc__toggle{
  display:none; width:100%; align-items:center; justify-content:space-between;
  background:var(--vg-dimma); border:1px solid var(--vg-linje);
  border-radius:var(--vg-radie); padding:13px 16px; cursor:pointer;
  font-family:var(--vg-font-rubrik); font-weight:600; font-size:15px;
  color:var(--vg-indigo);
}
.vg-toc__toggle svg{ transition:transform .18s ease; flex:none; }
.vg-toc.ar-oppen .vg-toc__toggle svg{ transform:rotate(180deg); }
.vg-toc__lista{
  list-style:none; margin:0; padding:0 0 0 14px;
  border-left:2px solid var(--vg-linje);
  counter-reset:kgtoc;
}
.vg-toc__lista li{ margin:0 0 2px; }
.vg-toc__lista a{
  display:block; padding:7px 0 7px 2px; text-decoration:none;
  font-size:14.5px; line-height:1.4; color:var(--vg-text-svag);
  border-left:2px solid transparent; margin-left:-16px; padding-left:16px;
  transition:color .15s ease, border-color .15s ease;
}
.vg-toc__lista a:hover{ color:var(--vg-indigo); }
.vg-toc__lista a.ar-aktiv{
  color:var(--vg-indigo); font-weight:600;
  border-left-color:var(--vg-salvia);
}

/* ---- Artikeltext ---- */
.vg-artikel{ font-size:17px; line-height:1.7; }
.vg-artikel > * + *{ margin-top:1.15em; }
/* Faktarutan far ingen spacing av ovanstaende nar den ligger nastlad
   i ett vg-stegblock (dvs inte direkt barn till vg-artikel) */
.vg-artikel .vg-faktaruta{ margin-block:2em; }
.vg-artikel h2{ font-size:26px; margin-top:2em !important; margin-bottom:.5em; scroll-margin-top:var(--vg-toc-offset); }
.vg-artikel h3{ font-size:20px; margin-top:1.7em !important; margin-bottom:.4em; }
.vg-artikel ul,.vg-artikel ol{ padding-left:1.35em; }
.vg-artikel li{ margin-bottom:.45em; }
.vg-artikel li::marker{ color:var(--vg-bla); }
.vg-artikel a{ text-decoration:underline; text-underline-offset:.18em; }
.vg-artikel blockquote{
  border-left:3px solid var(--vg-salvia); padding:2px 0 2px 22px;
  margin-left:0; color:var(--vg-text-svag); font-style:normal;
}

/* ---- Tabeller: header dimma, inget zebra, 1px linjer ---- */
.vg-artikel table{
  width:100%; border-collapse:collapse; font-size:15.5px; margin-block:1.5em;
}
.vg-artikel th,
.vg-artikel td{
  padding:12px 14px; border:1px solid var(--vg-linje);
  text-align:left; vertical-align:top;
}
.vg-artikel th{ background:var(--vg-dimma); font-weight:600; color:var(--vg-indigo); }
.vg-artikel tbody tr{ background:transparent; }

/* ---- Snabbsvar ---- */
.vg-snabbsvar{
  background:var(--vg-dimma); border-radius:var(--vg-radie);
  padding:24px 26px; margin-block:2em !important;
}
.vg-snabbsvar__rubrik{
  font-family:var(--vg-font-etikett) !important;
  font-size:11px !important; text-transform:uppercase; letter-spacing:.14em;
  color:var(--vg-bla-mork) !important; font-weight:400 !important;
  margin:0 0 14px !important;
}
.vg-snabbsvar ul{ margin:0; padding-left:1.25em; }
.vg-snabbsvar li{ margin-bottom:.5em; }
.vg-snabbsvar li:last-child{ margin-bottom:0; }

/* ---- Stegblock: numrerad indigo-cirkel ---- */
.vg-stegblock{ counter-reset:kgsteg; margin-block:2em !important; }
.vg-steg{
  position:relative; padding-left:58px; margin-block:0 2em !important;
}
.vg-steg::before{
  counter-increment:kgsteg; content:counter(kgsteg);
  position:absolute; left:0; top:2px;
  width:38px; height:38px; border-radius:50%;
  background:var(--vg-indigo); color:var(--vg-vit);
  display:grid; place-items:center;
  font-family:var(--vg-font-rubrik); font-weight:700; font-size:17px;
}
.vg-steg h2{ margin-top:0 !important; font-size:22px; }
.vg-steg:last-child{ margin-bottom:0 !important; }

/* ---- Vanliga misstag ---- */
.vg-misstag{
  background:var(--vg-papper); border:1px solid var(--vg-linje);
  border-radius:var(--vg-radie); padding:24px 26px; margin-block:2em !important;
}
.vg-misstag__rubrik{
  margin:0 0 14px !important; font-size:18px; color:var(--vg-indigo);
}
.vg-misstag__lista{ list-style:none; margin:0; padding:0; }
.vg-misstag__lista li{
  position:relative; padding-left:26px; margin-bottom:.7em; font-size:16px;
}
.vg-misstag__lista li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:2px; background:var(--vg-salvia); border-radius:2px;
}
.vg-misstag__lista li:last-child{ margin-bottom:0; }

/* ---- FAQ ---- */
.vg-faq{ margin-block:2.5em !important; }
.vg-faq__item{
  border-bottom:1px solid var(--vg-linje);
}
.vg-faq__item:first-of-type{ border-top:1px solid var(--vg-linje); }
.vg-faq__item summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-family:var(--vg-font-rubrik); font-weight:600; font-size:17px;
  color:var(--vg-indigo);
}
.vg-faq__item summary::-webkit-details-marker{ display:none; }
.vg-faq__item summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:10px; height:10px; margin-top:-6px;
  border-right:2px solid var(--vg-bla); border-bottom:2px solid var(--vg-bla);
  transform:rotate(45deg); transition:transform .18s ease;
}
.vg-faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.vg-faq__item summary:hover{ color:var(--vg-bla); }
.vg-faq__svar{ padding:0 0 20px; color:var(--vg-text-svag); font-size:16px; }
.vg-faq__svar p:last-child{ margin-bottom:0; }

/* ---- Nasta steg ---- */
.vg-nasta{
  background:var(--vg-indigo); color:var(--vg-vit);
  border-radius:var(--vg-radie); padding:32px 30px; margin-top:3em !important;
}
.vg-nasta h2{ color:var(--vg-vit) !important; margin:0 0 8px !important; font-size:24px; }
.vg-nasta > p{ color:var(--vg-ingress-mork); margin-bottom:22px; }
.vg-nasta__kort{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.vg-nasta__kort-item{
  display:flex; flex-direction:column; gap:5px;
  background:var(--vg-indigo-700); border:1px solid var(--vg-indigo-kant);
  border-radius:var(--vg-radie); padding:18px 20px;
  text-decoration:none; color:var(--vg-vit); transition:border-color .15s ease;
}
.vg-nasta__kort-item:hover{ border-color:var(--vg-salvia); color:var(--vg-vit); }
.vg-nasta__kort-item .vg-etikett{ color:var(--vg-salvia) !important; margin:0 0 2px !important; }
.vg-nasta__kort-item strong{ font-family:var(--vg-font-rubrik); font-weight:600; font-size:17px; }
.vg-nasta__pil{ font-size:14px; color:var(--vg-ingress-mork); }
.vg-nasta__kort-item:hover .vg-nasta__pil{ color:var(--vg-vit); }

/* ---- Mobil ---- */
@media (max-width:768px){
  .vg-artikelhuvud{ padding-block:32px 24px; }
  body.vg-guidemall .vg-artikelhuvud .vg-wrap{ grid-template-columns:1fr; gap:0; }
  .vg-artikelhuvud__innehall{ grid-column:1; }
  .vg-guidebody{ padding-block:24px 32px; }
  .vg-guidebody__grid{ grid-template-columns:1fr; gap:24px; }
  .vg-toc{ position:static; }
  .vg-toc__toggle{ display:flex; }
  .vg-toc__lista{
    display:none; border-left:0; padding:12px 0 0 4px;
  }
  .vg-toc.ar-oppen .vg-toc__lista{ display:block; }
  .vg-toc__lista a{ margin-left:0; padding-left:12px; }
  .vg-artikel{ font-size:16.5px; }
  .vg-artikel h2{ font-size:22px; }
  .vg-artikel h3{ font-size:18.5px; }
  .vg-steg{ padding-left:48px; }
  .vg-steg::before{ width:32px; height:32px; font-size:15px; }
  .vg-snabbsvar,.vg-misstag{ padding:20px; }
  .vg-nasta{ padding:24px 20px; }
  .vg-artikel table{ font-size:14.5px; display:block; overflow-x:auto; }
}

/* =========================================================
   STARTSIDAN — kort med bild, hover och inskrollning
   ========================================================= */
.vg-kort.vg-kort--bild{ padding:0 0 24px; overflow:hidden; }
.vg-kort__ram{ display:block; aspect-ratio:16/10; overflow:hidden; margin-bottom:20px; }
.vg-kort__bild{
  display:block; width:100%; height:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s ease;
}
.vg-kort--bild > :not(.vg-kort__ram){ margin-inline:24px; }
.vg-kort--bild h3{ margin-top:0 !important; }
body.home .vg-kort{ transition:border-color .15s ease, transform .25s ease; }
body.home .vg-kort:hover,
body.home a.vg-kort:focus-visible{ transform:translateY(-4px); }
.vg-kort:hover .vg-kort__bild,
.vg-kort:focus-visible .vg-kort__bild{ transform:scale(1.06); }
@media (max-width:768px){
  .vg-kort.vg-kort--bild{ padding:0 0 22px; }
  .vg-kort--bild > :not(.vg-kort__ram){ margin-inline:20px; }
}

/* Guidehubben: ljus tidningsstil */
.vg-tid__huvud{ background:var(--vg-papper); padding-block:var(--vg-sektion-y) 32px; }
.vg-tid__huvud-in{ border-bottom:1px solid var(--vg-linje-ljus); padding-bottom:32px; }
.vg-tid__huvud h1{
  font-size:clamp(38px,6vw,64px); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 20px; max-width:16ch; text-wrap:balance;
}
.vg-tid__huvud .vg-lead,
.vg-tid__huvud .vg-guidehubb__intro{ max-width:60ch; margin:0 0 12px; }
.vg-tid__huvud .vg-guidehubb__intro{ font-size:18px; color:var(--vg-text-svag); }
.vg-tid__huvud .vg-guidehubb__intro > :last-child,
.vg-tid__huvud .vg-lead:last-child{ margin-bottom:0; }
.vg-tid__lista{ background:var(--vg-papper); padding-block:8px var(--vg-sektion-y); }
.vg-tid__ram{ display:block; overflow:hidden; }
.vg-tid__ram img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.vg-tid__utvald:hover img,.vg-tid__utvald:focus-visible img,
.vg-tid__rad:hover img,.vg-tid__rad:focus-visible img{ transform:scale(1.04); }
.vg-tid__utvald,.vg-tid__rad{ display:grid; text-decoration:none; color:inherit; }
.vg-tid__text h3{
  margin:0 0 8px; text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:4px; text-decoration-thickness:2px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.vg-tid__utvald:hover h3,.vg-tid__utvald:focus-visible h3,
.vg-tid__rad:hover h3,.vg-tid__rad:focus-visible h3{ color:var(--vg-bla); text-decoration-color:currentColor; }
.vg-tid__text p{ color:var(--vg-text-svag); margin:0 0 12px; }
.vg-tid__tid{ font-family:var(--vg-font-etikett); font-size:12px; color:var(--vg-text-svag); display:block; }
.vg-tid__text .vg-etikett{ white-space:normal; }
.vg-tid__utvald{
  grid-template-columns:3fr 2fr; gap:40px; align-items:center;
  padding-block:32px; border-bottom:1px solid var(--vg-linje-ljus);
}
.vg-tid__utvald .vg-tid__ram{ aspect-ratio:3/2; }
.vg-tid__utvald h3{ font-size:clamp(26px,3.4vw,38px); line-height:1.12; letter-spacing:-.025em; }
.vg-tid__utvald .vg-tid__text p{ font-size:18px; }
.vg-tid__rutnat{ display:grid; grid-template-columns:1fr 1fr; column-gap:48px; }
.vg-tid__rad{
  grid-template-columns:160px 1fr; gap:20px; align-items:start;
  padding-block:24px; border-bottom:1px solid var(--vg-linje-ljus);
}
.vg-tid__rad .vg-tid__ram{ aspect-ratio:3/2; }
.vg-tid__rad h3{ font-size:18px; line-height:1.25; }
.vg-tid__rad .vg-tid__text p{ font-size:15px; line-height:1.5; margin-bottom:8px; }
/* Hubbens löpande innehåll: smal textspalt, kort och ruta i samma stil som listan */
.vg-tid__innehall{ background:var(--vg-papper); padding-block:var(--vg-sektion-y) 8px; }
.vg-tid__innehall--sist{ padding-block:0 var(--vg-sektion-y); }
.vg-tid__innehall--sist .vg-hubb-text{ border-top:1px solid var(--vg-linje-ljus); padding-top:var(--vg-sektion-y); }
.vg-hubb-text{ max-width:none; }
.vg-hubb-text p,.vg-hubb-text li,.vg-hubb-kol p,.vg-hubb-kol li{ max-width:75ch; }
.vg-hubb-kolumner{ display:grid; grid-template-columns:1fr; gap:var(--vg-sektion-y); margin-top:var(--vg-sektion-y); }
.vg-hubb-kol > :first-child{ margin-top:0; }
.vg-hubb-kol h2{ margin:0 0 12px; }
.vg-hubb-kol a{ color:var(--vg-bla); }
.vg-hubb-kol ul{ padding-left:1.25em; }
.vg-hubb-kol li{ margin-bottom:.5em; }
@media (min-width:900px){
  .vg-hubb-kolumner{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--vg-sektion-y) 48px; }
  .vg-hubb-ruta{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px; align-items:center; }
  .vg-hubb-ruta .vg-etikett,.vg-hubb-ruta h2,.vg-hubb-ruta p{ grid-column:1; }
  .vg-hubb-ruta .vg-btn{ grid-column:2; grid-row:1 / span 3; align-self:center; margin:0; }
  .vg-hubb-ruta p{ margin-bottom:0; }
}
.vg-hubb-text h2{ margin:var(--vg-sektion-y) 0 12px; }
.vg-hubb-text > :first-child{ margin-top:0; }
.vg-hubb-text a{ color:var(--vg-bla); }
.vg-hubb-text ul{ padding-left:1.25em; }
.vg-hubb-text li{ margin-bottom:.5em; }
.vg-hubb-text .vg-hubb-kort,
.vg-hubb-text .vg-hubb-ruta{ max-width:none; }
.vg-hubb-kort{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--vg-gap); margin:24px 0 0; width:min(var(--vg-bredd),100%); }
.vg-hubb-kort__item{
  background:var(--vg-vit); border:1px solid var(--vg-linje); border-radius:var(--vg-radie);
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
}
.vg-hubb-text a.vg-hubb-kort__item{ color:inherit; }
.vg-hubb-kort__item:hover,.vg-hubb-kort__item:focus-visible{ border-color:var(--vg-bla); }
.vg-hubb-kort__item .vg-tid__ram{ aspect-ratio:3/2; }
.vg-hubb-kort__item:hover img,.vg-hubb-kort__item:focus-visible img{ transform:scale(1.04); }
.vg-hubb-kort__text{ display:flex; flex-direction:column; flex:1; padding:22px 26px 26px; }
.vg-hubb-kort__text .vg-etikett{ white-space:normal; margin-bottom:8px; }
.vg-hubb-kort__item h3{
  margin:0 0 10px; text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:4px; text-decoration-thickness:2px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.vg-hubb-kort__item:hover h3,.vg-hubb-kort__item:focus-visible h3{ color:var(--vg-bla); text-decoration-color:currentColor; }
.vg-hubb-kort__item p{ color:var(--vg-text-svag); margin:0 0 16px; }
.vg-hubb-kort__lank{ margin-top:auto; font-weight:600; color:var(--vg-bla); }
.vg-tid__delad{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:center; }
.vg-tid__foto{ border-radius:var(--vg-radie); overflow:hidden; aspect-ratio:3/2; }
.vg-tid__foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.vg-hubb-ruta{
  background:var(--vg-dimma); border-radius:var(--vg-radie);
  border-left:4px solid var(--vg-salvia); padding:28px; margin:var(--vg-sektion-y) 0 0;
}
.vg-hubb-ruta h2{ margin:8px 0 10px; }
.vg-hubb-ruta p{ color:var(--vg-text-svag); margin:0 0 18px; max-width:60ch; }
.vg-hubb-ruta .vg-btn,.vg-hubb-ruta .vg-btn:hover{ color:var(--vg-vit); }
.vg-hubb-kallor{ font-size:15px; }
.vg-hubb-kallor h2{ margin-top:0; }
.vg-hubb-kallor li{ overflow-wrap:anywhere; }
@media (max-width:900px){
  .vg-tid__rutnat{ grid-template-columns:1fr; }
  .vg-hubb-kort{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .vg-tid__delad{ grid-template-columns:1fr; gap:24px; }
  .vg-tid__foto{ aspect-ratio:16/9; }
  .vg-tid__huvud{ padding-block:32px 24px; }
  .vg-tid__utvald{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:480px){
  .vg-tid__rad{ grid-template-columns:110px 1fr; gap:14px; }
  .vg-tid__rad .vg-tid__text p{ display:none; }
}

/* Om oss: ingress, textkort och principlista (bara på /om-oss) */
.vg-om-ingress{ font-size:19px; line-height:1.6; color:var(--vg-text-svag); }
.vg-om-kort{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--vg-gap); margin-block:1.4em .4em; }
.vg-om-kort__item{
  display:flex; flex-direction:column; gap:6px; padding:20px 22px;
  background:var(--vg-vit); border:1px solid var(--vg-linje); border-left:3px solid var(--vg-salvia);
  border-radius:var(--vg-radie); color:var(--vg-text); text-decoration:none !important;
}
.vg-om-kort__item strong{ font-family:var(--vg-font-rubrik); font-size:18px; line-height:1.3; color:var(--vg-indigo); }
.vg-om-kort__item span:last-child{ font-size:15.5px; line-height:1.5; color:var(--vg-text-svag); }
.vg-om-kort__item .vg-etikett{ margin-bottom:2px; }
.vg-om-kort__item:hover,.vg-om-kort__item:focus-visible{ border-color:var(--vg-bla); border-left-color:var(--vg-bla); }
.vg-om-kort__item:hover strong,.vg-om-kort__item:focus-visible strong{ color:var(--vg-bla); }
.vg-artikel ul.vg-om-principer{ list-style:none; margin-inline:0; padding:0; display:grid; gap:12px; }
.vg-om-principer li{
  position:relative; margin:0; padding:14px 18px 14px 62px; min-height:48px;
  background:var(--vg-vit); border:1px solid var(--vg-linje); border-radius:var(--vg-radie);
}
.vg-om-principer li::before{
  content:"\2713"; position:absolute; left:16px; top:14px;
  width:30px; height:30px; border-radius:50%; background:var(--vg-indigo); color:var(--vg-vit);
  display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1;
}
.vg-om-principer li:nth-child(2)::before{ content:"="; }
.vg-om-principer li:nth-child(3)::before{ content:"\2715"; font-size:13px; }
.vg-om-principer li:nth-child(4)::before{ content:"\2715"; font-size:13px; }
.vg-om-principer li:nth-child(5)::before{ content:"\21BB"; }
@media (max-width:600px){
  .vg-om-kort{ grid-template-columns:1fr; }
  .vg-om-principer li{ padding:12px 14px 12px 54px; }
  .vg-om-principer li::before{ left:12px; top:12px; }
}

/* ---- Kontakt (content/sidor/kontakt.html) ---- */
.vg-kontakt-ingress{ font-size:19px; line-height:1.6; color:var(--vg-text-svag); }
.vg-kontakt-epost{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-block:1.6em; padding:28px 30px;
  background:var(--vg-dimma); border:1px solid var(--vg-linje-ljus); border-radius:var(--vg-radie);
}
.vg-kontakt-epost__text .vg-etikett{ color:var(--vg-bla-mork); margin-bottom:6px; }
.vg-kontakt-epost__adress{
  margin:0 0 4px; font-family:var(--vg-font-rubrik); font-weight:600; font-size:clamp(20px,3.4vw,26px);
  line-height:1.2; color:var(--vg-indigo); overflow-wrap:anywhere;
}
.vg-kontakt-epost__notis{ margin:0; font-size:15px; color:var(--vg-text-svag); }
.vg-artikel a.vg-kontakt-epost__knapp{ color:var(--vg-vit); text-decoration:none; }
.vg-artikel a.vg-kontakt-epost__knapp:hover{ color:var(--vg-vit); }
.vg-kontakt-amnen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--vg-gap); margin-block:1.2em; }
.vg-kontakt-amnen__item{
  display:flex; flex-direction:column; gap:8px; padding:20px 20px 22px;
  background:var(--vg-vit); border:1px solid var(--vg-linje); border-top:3px solid var(--vg-salvia);
  border-radius:var(--vg-radie);
}
.vg-kontakt-amnen__item strong{ font-family:var(--vg-font-rubrik); font-size:17px; line-height:1.3; color:var(--vg-indigo); }
.vg-kontakt-amnen__item span{ font-size:15.5px; line-height:1.5; color:var(--vg-text-svag); }
.vg-kontakt-viktigt{
  margin-block:2em; padding:22px 26px;
  background:var(--vg-vit); border:1px solid var(--vg-linje); border-left:4px solid var(--vg-indigo);
  border-radius:var(--vg-radie);
}
.vg-kontakt-viktigt .vg-etikett{ margin-bottom:6px; }
.vg-kontakt-viktigt p{ margin:0; }
.vg-kontakt-viktigt p + p{ margin-top:8px; }
.vg-kontakt-viktigt__rubrik{ font-family:var(--vg-font-rubrik); font-weight:600; font-size:19px; line-height:1.35; color:var(--vg-indigo); }
.vg-kontakt-integritet{ font-size:15.5px; color:var(--vg-text-svag); }
@media (max-width:768px){
  .vg-kontakt-amnen{ grid-template-columns:1fr; }
  .vg-kontakt-epost{ padding:22px 20px; }
  .vg-kontakt-epost__knapp{ width:100%; text-align:center; }
}

/* Inskrollning: js lägger klassen vg-fx bara på sektioner under första skärmen */
.vg-fx{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.vg-fx.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .vg-hero__bg{ animation:none !important; }
  .vg-fx{ opacity:1 !important; transform:none !important; }
  body.home .vg-kort:hover,body.home a.vg-kort:focus-visible{ transform:none; }
  .vg-tid__ram img{ transition:none; }
  .vg-tid__utvald:hover img,.vg-tid__rad:hover img,.vg-hubb-kort__item:hover img{ transform:none; }
  .vg-kort:hover .vg-kort__bild,.vg-kort:focus-visible .vg-kort__bild{ transform:none; }
}