/* viden.css
   Videnssektionen på vanovis.dk (/viden og /viden/<slug>).

   Designlinjen er vanovis.dk's: mørkegrøn #173e3c, creme #f4efea,
   fersken-accent #e8a791 og Jost. Indholds-typografien (.viden-content)
   følger samme mønster som guide_shared.css, men med vanovis.dk's palette,
   så artiklerne føles som en del af virksomhedssiden - ikke som guiden. */

:root{
  --vd-green:#173e3c; --vd-green-deep:#0f2c2b; --vd-peach:#e8a791;
  --vd-cream:#f4efea; --vd-paper:#ffffff; --vd-soft:#faf8f5;
  --vd-ink:#20282a; --vd-muted:#6b7573; --vd-line:#e3ded5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Jost',sans-serif; color:var(--vd-ink);
  background:var(--vd-cream); line-height:1.7;
}

/* ------------------------------- Topbar ------------------------------- */
.viden-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:16px; padding:14px 26px; background:var(--vd-green); color:#f4efea;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.viden-top .brand{
  font-weight:600; font-size:1.15rem; letter-spacing:1.5px;
  text-decoration:none; color:#f4efea;
}
.viden-top .brand:hover{color:var(--vd-peach);}
.viden-top .sep{width:1px; height:22px; background:rgba(244,239,234,.25);}
.viden-top .spacer{flex:1;}
.viden-top .top-link{
  text-decoration:none; color:#f4efea; font-size:.95rem;
  padding:7px 12px; border-radius:8px; transition:background .15s, color .15s;
}
.viden-top .top-link:hover{background:rgba(244,239,234,.14); color:var(--vd-peach);}
.viden-top .top-link.aktiv{color:var(--vd-peach);}

/* ------------------------------ Layout ------------------------------- */
.viden-wrap{max-width:720px; margin:0 auto; padding:38px 24px 72px;}
.viden-wrap-bred{max-width:900px;}

.viden-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:.88rem; color:var(--vd-muted); margin:0 0 18px 2px;
}
.viden-crumbs a{color:var(--vd-muted); text-decoration:none;}
.viden-crumbs a:hover{color:var(--vd-green); text-decoration:underline;}
.viden-crumbs .sep{opacity:.55;}
.viden-crumbs .current{color:var(--vd-ink);}

.viden-dato{
  font-size:.9rem; color:var(--vd-muted); letter-spacing:.4px;
  text-transform:uppercase; margin:0 0 10px 2px;
}

/* --------------------------- Artikel-indhold -------------------------- */
.viden-content{
  background:var(--vd-paper); border:1px solid var(--vd-line); border-radius:14px;
  padding:44px 48px; box-shadow:0 1px 3px rgba(23,62,60,.06);
  font-size:1.03rem;
}
.viden-content h1{
  font-size:2.1rem; font-weight:600; color:var(--vd-green-deep);
  margin:0 0 .5em; line-height:1.25;
}
.viden-content h2{
  font-size:1.42rem; font-weight:600; color:var(--vd-green);
  margin:2em 0 .5em; padding-bottom:.3em; border-bottom:2px solid var(--vd-line);
  scroll-margin-top:80px;
}
.viden-content h3{
  font-size:1.14rem; font-weight:600; color:var(--vd-green); margin:1.6em 0 .4em;
  scroll-margin-top:80px;
}
.viden-content p{margin:.85em 0;}
.viden-content a{
  color:var(--vd-green); text-decoration:underline; text-underline-offset:3px;
}
.viden-content a:hover{color:#c46a4a;}
.viden-content ul,.viden-content ol{padding-left:1.4em; margin:.7em 0;}
.viden-content li{margin:.35em 0;}
.viden-content blockquote{
  margin:1.3em 0; padding:.85em 1.2em; border-left:4px solid var(--vd-peach);
  background:var(--vd-soft); border-radius:0 8px 8px 0; color:var(--vd-muted);
}
.viden-content code{
  background:#f0eee9; padding:.12em .4em; border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
}
.viden-content pre{
  background:var(--vd-green-deep); color:#eef2f1; padding:16px 18px;
  border-radius:10px; overflow:auto;
}
.viden-content pre code{background:none; color:inherit; padding:0;}
.viden-content table{
  border-collapse:collapse; width:100%; margin:1.3em 0; font-size:.95rem;
}
.viden-content th,.viden-content td{
  border:1px solid var(--vd-line); padding:9px 12px; text-align:left;
}
.viden-content th{background:var(--vd-soft); font-weight:600; color:var(--vd-green);}
.viden-content hr{border:none; border-top:1px solid var(--vd-line); margin:2em 0;}
.viden-content .guide-figure{margin:1.4em 0; text-align:center;}
.viden-content .guide-img{
  max-width:100%; height:auto; border:1px solid var(--vd-line);
  border-radius:10px; box-shadow:0 2px 12px rgba(23,62,60,.10);
}
.viden-content .guide-figure figcaption{
  margin-top:.5em; font-size:.88rem; color:var(--vd-muted); font-style:italic;
}
.viden-content .guide-img-missing{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; margin:1.4em 0; padding:28px 20px; text-align:center;
  border:2px dashed var(--vd-peach); border-radius:12px;
  background:var(--vd-soft); color:var(--vd-muted);
}
.viden-content .guide-img-missing .gim-name{
  font-family:ui-monospace,Menlo,monospace; font-size:.9rem; color:var(--vd-ink);
}
.viden-content .guide-img-missing .gim-alt{font-size:.85rem; font-style:italic;}

/* ----------------------------- Læs mere ------------------------------- */
.viden-mere{
  margin-top:26px; background:var(--vd-soft); border:1px solid var(--vd-line);
  border-radius:14px; padding:22px 26px;
}
.viden-mere h2{
  margin:0 0 12px; font-size:1.05rem; font-weight:600; color:var(--vd-green);
  letter-spacing:.3px;
}
.viden-mere ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.viden-mere a{
  color:var(--vd-green); text-decoration:none; font-weight:600;
  border-bottom:1px solid transparent;
}
.viden-mere a:hover{color:#c46a4a; border-bottom-color:var(--vd-peach);}
.viden-mere .mere-note{color:var(--vd-muted); font-weight:400;}

/* ------------------------------ Indeks -------------------------------- */
.viden-hero{margin:0 0 30px;}
.viden-hero h1{
  font-size:2.4rem; font-weight:600; color:var(--vd-green-deep); margin:0 0 .25em;
}
.viden-hero .viden-rect{
  width:64px; height:4px; background:var(--vd-peach); border-radius:2px; margin:0 0 18px;
}
.viden-hero p{margin:0; color:var(--vd-muted); font-size:1.05rem;}

.viden-liste{display:grid; gap:16px;}
.viden-kort{
  display:block; text-decoration:none; color:inherit;
  background:var(--vd-paper); border:1px solid var(--vd-line); border-radius:14px;
  padding:24px 26px; box-shadow:0 1px 3px rgba(23,62,60,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.viden-kort:hover{
  transform:translateY(-2px); border-color:var(--vd-peach);
  box-shadow:0 6px 18px rgba(23,62,60,.10);
}
.viden-kort .kort-dato{
  font-size:.82rem; color:var(--vd-muted); text-transform:uppercase; letter-spacing:.5px;
}
.viden-kort h2{
  margin:.35em 0 .35em; font-size:1.3rem; font-weight:600; color:var(--vd-green-deep);
  line-height:1.3;
}
.viden-kort p{margin:0; color:var(--vd-muted); font-size:.98rem;}
.viden-kort .kort-pil{
  display:inline-block; margin-top:12px; color:var(--vd-green);
  font-weight:600; font-size:.95rem;
}

.viden-tom{
  background:var(--vd-paper); border:1px dashed var(--vd-line); border-radius:14px;
  padding:32px 26px; text-align:center; color:var(--vd-muted);
}

/* ------------------------------- Footer ------------------------------- */
.viden-footer{
  background:var(--vd-green); color:#f4efea; padding:34px 26px;
}
.viden-footer-inner{
  max-width:900px; margin:0 auto; display:flex; flex-wrap:wrap; gap:36px;
  align-items:flex-start; font-size:.95rem;
}
.viden-footer .navn{font-weight:600;}
.viden-footer a{color:#f4efea; text-decoration:underline;}
.viden-footer a:hover{color:var(--vd-peach);}
.viden-footer .copy{color:var(--vd-peach); font-size:.9rem;}

@media (max-width:860px){
  .viden-wrap{padding:26px 16px 56px;}
  .viden-content{padding:26px 20px;}
  .viden-hero h1{font-size:1.9rem;}
  .viden-footer-inner{gap:20px;}
}