/* guide_shared.css
   Fælles styles for brugerguidens sider: den samlede /brugerguide og de
   offentlige enkeltsider /guide/<modul>/<emne>. Reglerne er flyttet uændret
   ud af brugerguide.html's inline <style>, så begge sider ser ens ud og kun
   skal vedligeholdes ét sted.

   Her ligger: palette, basis-typografi, den sticky topbar og alt, der styler
   selve det renderede markdown-indhold (.guide-content, figurer, videoer og
   billed-placeholdere). Sidespecifikt (indholdsfortegnelse, søgning,
   brødkrummer, søskende-navigation) bliver i den enkelte template. */

:root{
  --green:#1d524f; --green-deep:#143b39; --peach:#E8A791;
  --ink:#1f2328; --muted:#5b6770; --line:#e3e0d8;
  --cream:#F4EFEA; --paper:#ffffff; --soft:#fafaf7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Jost',sans-serif; color:var(--ink);
  background:var(--cream); line-height:1.65;
}
/* Topbar */
.guide-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:14px; padding:14px 26px; background:var(--green); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.guide-top .brand{font-weight:600; font-size:1.15rem; letter-spacing:.3px; text-decoration:none; color:#fff;}
.guide-top .brand span{color:var(--peach);}
.guide-top .sep{width:1px; height:22px; background:rgba(255,255,255,.25);}
.guide-top .title{font-weight:500; opacity:.95;}
.guide-top .spacer{flex:1;}
.guide-top .back{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:#fff; background:rgba(255,255,255,.12); padding:7px 14px;
  border-radius:8px; font-size:.92rem; transition:background .15s;
}
.guide-top .back:hover{background:rgba(255,255,255,.22);}
.guide-top .auth-btn{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:7px 14px; border-radius:8px; font-size:.92rem; white-space:nowrap;
  transition:background .15s, box-shadow .15s;
}
.guide-top .auth-login{color:#fff; background:rgba(255,255,255,.12);}
.guide-top .auth-login:hover{background:rgba(255,255,255,.22);}
.guide-top .auth-register{background:var(--peach); color:var(--green-deep); font-weight:600;}
.guide-top .auth-register:hover{background:#f0b7a3; box-shadow:0 2px 10px rgba(0,0,0,.18);}
.guide-top .material-symbols-outlined{font-size:1.15rem;}
/* Indhold */
.guide-content{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:46px 54px; box-shadow:0 1px 3px rgba(20,40,38,.05);
}
.guide-content h1{
  font-size:2.15rem; font-weight:600; color:var(--green-deep);
  margin:0 0 .4em; line-height:1.2;
}
.guide-content h2{
  font-size:1.5rem; font-weight:600; color:var(--green);
  margin:2.2em 0 .5em; padding-bottom:.3em; border-bottom:2px solid var(--line);
  scroll-margin-top:84px;
}
.guide-content h3{
  font-size:1.18rem; font-weight:600; color:var(--green); margin:1.6em 0 .4em;
  scroll-margin-top:84px;
}
.guide-content p{margin:.7em 0;}
.guide-content a{color:var(--green); text-decoration:underline; text-underline-offset:2px;}
.guide-content ul,.guide-content ol{padding-left:1.4em; margin:.6em 0;}
.guide-content li{margin:.3em 0;}
.guide-content blockquote{
  margin:1.2em 0; padding:.8em 1.2em; border-left:4px solid var(--peach);
  background:var(--soft); border-radius:0 8px 8px 0; color:var(--muted);
}
.guide-content code{
  background:#f0eee9; padding:.12em .4em; border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
}
.guide-content pre{
  background:var(--green-deep); color:#eef2f1; padding:16px 18px;
  border-radius:10px; overflow:auto;
}
.guide-content pre code{background:none; color:inherit; padding:0;}
.guide-content table{
  border-collapse:collapse; width:100%; margin:1.2em 0; font-size:.95rem;
}
.guide-content th,.guide-content td{border:1px solid var(--line); padding:9px 12px; text-align:left;}
.guide-content th{background:var(--soft); font-weight:600; color:var(--green);}
.guide-content hr{border:none; border-top:1px solid var(--line); margin:2em 0;}
/* Billeder */
.guide-figure{margin:1.4em 0; text-align:center;}
.guide-img{
  max-width:100%; height:auto; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 2px 12px rgba(20,40,38,.10);
}
.guide-video-wrap{
  position:relative; display:inline-block; max-width:100%; line-height:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 2px 12px rgba(20,40,38,.10);
}
.guide-video{display:block; max-width:100%; height:auto; background:#000;}
/* Diskrete hover-kontroller ovenpå guide-videoerne */
.guide-video-controls{
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:8px;
  padding:8px 10px 9px; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 100%);
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.guide-video-wrap:hover .guide-video-controls,
.guide-video-wrap:focus-within .guide-video-controls{
  opacity:1; pointer-events:auto;
}
.gvc-btn{
  flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  background:rgba(255,255,255,.2); border:none; border-radius:50%; color:#fff; cursor:pointer; padding:0;
}
.gvc-btn:hover{background:rgba(255,255,255,.35);}
.gvc-btn .material-symbols-outlined{font-size:16px;}
.gvc-seek{flex:1; height:3px; cursor:pointer; accent-color:var(--peach);}
.guide-figure figcaption{margin-top:.5em; font-size:.88rem; color:var(--muted); font-style:italic;}
/* Manglende billede - placeholder */
.guide-img-missing{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; margin:1.4em 0; padding:30px 20px; text-align:center;
  border:2px dashed var(--peach); border-radius:12px; background:var(--soft); color:var(--muted);
}
.guide-img-missing .material-symbols-outlined{font-size:2rem; color:var(--peach);}
.guide-img-missing .gim-name{font-family:ui-monospace,Menlo,monospace; font-size:.9rem; color:var(--ink);}
.guide-img-missing .gim-alt{font-size:.85rem; font-style:italic;}
@media (max-width:860px){
  .guide-content{padding:28px 22px;}
  .guide-top .title{display:none;}
  .guide-top .auth-btn .auth-label{display:none;}
  .guide-top .auth-btn{padding:7px 10px;}
}