/* Shared base for grundex.dk's pages other than the landing page (guides,
   legal pages). Colors, fonts, nav and footer are copied from
   grundex-landing.html, which keeps its own inline copy because everything
   else in it is demo-specific: when the landing page's tokens, nav or footer
   change, change them here too.

   Two typefaces, same as the landing page: Source Serif 4 for headings and
   the logo, Schibsted Grotesk for everything else (JetBrains Mono only for
   the odd number or stamp, as on the landing page).

   Fonts are self-hosted, not loaded from fonts.googleapis.com - avoids
   sending every visitor's IP to Google with no consent basis (LG München
   2022). Paths are relative to this file, so pages at any depth can use it. */
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url('../fonts/source-serif-4.woff2') format('woff2');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/schibsted-grotesk.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('../fonts/jetbrains-mono.woff2') format('woff2');
}

/* Same tokens as grundex-landing.html's :root. */
:root{
  --paper:#E8E9E3;        /* stone */
  --paper-dim:#DCDED6;    /* stone-dark */
  --surface:#FFFFFF;
  --surface-2:#F5F6F2;
  --ink:#1A1A18;
  --ink-soft:#64665F;
  --ink-faint:#979991;
  --forest:#1E6B4A;
  --forest-dark:#155235;
  --forest-light:#EAF3EE;
  --forest-deep:#12241D;
  --forest-deep-light:#1F3D31;
  --forest-glow:#2D5A45;
  --bronze:#8C5A2B;
  --bronze-light:#F3E9DC;
  --info:#2B5F93;
  --info-light:#EAF0F6;
  --line:rgba(26,26,24,0.10);
  --radius:18px;
  --deep-hero:
    radial-gradient(circle at 85% 0%, rgba(255,255,255,0.07), transparent 55%),
    linear-gradient(160deg, var(--forest-deep-light), var(--forest-deep));
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Schibsted Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{font-family:'Source Serif 4', Georgia, serif; font-weight:600;}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--forest); color:#fff;}
.wrap{max-width:1160px; margin:0 auto; padding:0 16px;}

/* ---------- nav (same as grundex-landing.html) ----------
   Scoped to #nav, not the element: a guide's table of contents is a <nav>
   too, and must not become a fixed bar. */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  background:rgba(232,233,227,0.97);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
#nav.scrolled{border-bottom:1px solid var(--line);}
.nav-logo{font-family:'Source Serif 4', Georgia, serif; font-weight:600; font-size:19px; letter-spacing:normal; white-space:nowrap;}
.logo-x{color:var(--forest); font-style:normal;}
.nav-links{display:flex; gap:36px; font-size:14px; color:var(--ink-soft);}
.nav-links a{transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-actions{display:flex; align-items:center; gap:20px;}
.nav-login{font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:color .2s;}
.nav-login:hover{color:var(--ink);}
.nav-cta{
  font-size:13.5px; font-weight:600; background:var(--forest); color:#fff;
  padding:10px 20px; border-radius:100px; transition:background .25s ease, transform .25s ease;
}
.nav-cta:hover{background:var(--forest-dark); transform:translateY(-1px);}
@media (max-width:860px){ .nav-links{display:none;} }
@media (max-width:560px){
  #nav{padding:14px 16px;}
  .nav-actions{gap:14px;}
}

/* ---------- footer (same as grundex-landing.html) ---------- */
footer{border-top:1px solid var(--line); padding:32px 0;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.foot-left{font-size:13px; color:var(--ink-soft);}
.foot-note{opacity:.75;}
.foot-links{display:flex; gap:26px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap;}
.foot-links a{transition:color .2s;}
.foot-links a:hover{color:var(--ink);}