/* =======================================================================
   STYLE.CSS – Version 2.1 (CORE + PATCHES) – FARVER KUN I A7
   -----------------------------------------------------------------------
   Regel: Hvis du vil ændre farver, så gør det KUN i A7 (tema-blokkene).
   Alt andet bruger tokens (var(--...)) og skal ikke have hex/rgba.
   ======================================================================= */

/* ***********************************************************************
   DEL A · CORE
   *********************************************************************** */


/* =======================================================================
   A1) HJÆLPETEKST – FARVEVARIABLER
   -----------------------------------------------------------------------
   Farver styres i A7:
   :root, .theme-light { ... } · .theme-sepia { ... } · .theme-dark { ... }

   FARVENAVNE / HJÆLP (prioriteret):
   --bg            = Side-baggrund
   --fg            = Brødtekst (skal følge tema)
   --heading       = Overskrifter (skal følge tema)
   --muted         = Dæmpet/sekundær tekst
   --card          = Kort-flader
   --surface-soft  = Blød flade (fx cover-wrap)
   --quote         = Citat/resumé-baggrund
   --quote-fg      = Citat/resumé-tekst
   --border        = Linjer/rammer
   --accent        = Primær accent (knapper/markering)
   --link / --link-hover = Links
   --btn-*         = Knapper
   --menu-*        = Dropdown-menuer
   --shadow-*-theme= Skygger (tema-afhængige)

   PÆDAGOGIK (CSS-kaskaden i praksis):
   - Tekstfarve ("color") ARVES normalt fra forældrelementer.
   - Hvis du ser "sort brødtekst", skyldes det næsten altid, at en anden regel
     (evt. en anden CSS-fil eller inline-style) sætter color på fx p/li.
   - Vi løser det med "guardrails": p/li/td/th etc. tvinges til at arve farven
     (color: inherit) med høj specificitet + !important.
   ======================================================================= */


/* ======================================================================
   A2) BASE TOKENS (ikke farver) – størrelser, spacing, radius, shadow-tokens
   ====================================================================== */

:root{
  --font-size: 18px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 28px;

  --container-max: 1100px;

  /* Shadow tokens (farve-komponenter defineres i A7 som var(--shadow-...)) */
  --shadow-lg: var(--shadow-lg-theme);
  --shadow-menu: var(--shadow-menu-theme);
}


/* ======================================================================
   A3) RESET + GRUNDTYPOGRAFI
   ====================================================================== */

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

html, body{
  background: var(--bg);
  color: var(--fg);
}

body{
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  line-height: 1.75;
  font-size: var(--font-size);
}

/* FIX: Form-controls arver ikke altid textfarve -> kan blive sort.
   Vi tvinger dem til at følge temaets brødtekstfarve. */
button, input, select, textarea{
  color: var(--fg);
  font: inherit;
}

a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }

/* Overskrifter læser fra --heading */
h1,h2,h3,h4,h5,h6{ color: var(--heading); }
h1{
  font-size: 2.2rem;
  margin: .2rem 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
}
h2{ margin: 2rem 0 .7rem; }
h3{ margin: 1.2rem 0 .4rem; }

.lead{
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 70ch;
}

/* Læsevenlighed */
.daily-reflection,
.daily-reflection p,
.daily-reflection li{ color: var(--fg); }

h4.tight { margin-bottom: 0.25rem; }
.bullets { margin-top: 0; }


/* ======================================================================
   A4) LAYOUT / STRUKTUR (container, header, hero, grid)
   ====================================================================== */

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4);
}

main{ padding: var(--space-4); }

/* ======================================================================
   HEADER – STABILT 3-FELT LAYOUT (brand | nav | controls)
   - Løser: palettemenu "i toppen" (wrap) + topmenu skubbes
   ====================================================================== */
.header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav controls";
  align-items: center;
  gap: 18px;

  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--space-4);
  background: var(--quote);

  position: sticky;
  top: 0;
  z-index: 10;
}

/* Brand */
.brand{ letter-spacing: .3px; }
.header .brand{
  grid-area: brand;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 400;
}

/* Nav – centreret i midterfeltet */
.header .nav{
  grid-area: nav;
  justify-self: center;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  min-width: 0;
}

/* Controls – højre felt */
.header .controls{
  grid-area: controls;
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Mobil/Smalle skærme: brand+controls øverst, nav på egen linje */
@media (max-width: 980px){
  .header{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand controls"
      "nav nav";
  }
  .header .nav{ justify-self: start; justify-content: flex-start; }
}

/* Navigation (topmenu) – ingen margin-right, vi bruger gap på .nav */
.nav a{ font-weight: 400; margin: 0; }
.nav a,
.nav .nav-link{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1.1rem;
}

/* Header controls – palette label + select (permanent, derfor ikke i PATCHES) */
.header .controls #themeSel,
.header .controls button{ margin: 0; }

.header .controls .palette-label{
  margin-right: 6px;
  font-size: 0.9rem;
  color: var(--menu-fg);
}

.header .controls #themeSel{
  background: var(--bg);
  color: var(--menu-fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 18px 2px 8px;
  font: inherit;
  font-size: 0.85em;
  line-height: 1.2;
  cursor: pointer;
  min-width: 90px;
  appearance: auto;
}

/* Standard grid */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

/* Forside – tospaltet hero */
.hero{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-5);
  align-items: center;
}

/* Hero-lead får egen farve pr. tema (i stedet for !important patch) */
.hero .lead{ color: var(--hero-lead); }

.hero .cover-wrap{
  justify-self: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-lg);
}

.hero img{
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

@media (max-width:900px){
  .hero{ grid-template-columns: 1fr; }
  .hero .cover-wrap{ justify-self: start; }
}

/* Desktop: stabil hero-højde/align uden !important */
@media (min-width: 900px){
  .hero{ align-items: stretch; }
}

/* Undtagelse: sider der IKKE er K02 (historisk layout-forskel) */
@media (min-width: 900px){
  body:not(.K02) .hero{ align-items: start; }

  body:not(.K02) .hero .cover-wrap{
    align-self: start;
    display: inline-block;
    height: auto;
    max-height: none;
    line-height: 0;
  }
  body:not(.K02) .hero .cover-wrap img{
    display: block;
    height: auto;
    max-width: 340px;
    width: 100%;
  }
}

/* Pull quotes */
.pull-quote{
  max-width: 26ch;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--quote);
  border: 1px solid var(--border);
  font-style: italic;
}
.pull-left{ float:left; margin:8px 18px 8px 0; }
.pull-right{ float:right; margin:8px 0 8px 18px; }

@media (max-width:720px){
  .pull-left,.pull-right{ float:none; margin:12px 0; }
}


/* ======================================================================
   A5) KOMPONENTER (cards / quote / footer / badges / buttons / dropdown)
   ====================================================================== */

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.kapitelliste .card h3{ margin: 0 0 .5rem; }

.quote{
  background: var(--quote);
  color: var(--quote-fg);

  border-left: 6px solid var(--accent);
  padding: 18px 24px;
  border-radius: var(--radius-md);
  margin: 16px 0;

  min-height: 9.5rem;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  font-family: Georgia, "Times New Roman", serif;
}
.quote p, .quote li{ color: inherit; }

#takeawayText{
  min-height: 120px;
  display: flex;
  align-items: center;
}

/* Basis for “Dagens refleksion” */
#takeawayText.quote{
  height: 13.5rem;
  overflow: auto;
  display: block;
  text-align: left;
}

.footer{
  border-top: 1px solid var(--border);
  padding: var(--space-4);
  color: var(--muted);
  text-align: center;
}

.reading{
  max-width: 75ch;
  margin: 0 auto;
  font-size: var(--font-size);
}

.controls .sep{
  width: 1px;
  height: 24px;
  background: var(--border);
  display: inline-block;
  margin: 0 2px;
}

.small{ font-size: .9rem; color: var(--muted); }

.badge{
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .8rem;
  color: var(--muted);
}

/* Knapper (permanent komponent – derfor ikke i PATCHES) */
.btn{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: box-shadow .2s, transform .04s;
}
.btn:hover{
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}
.btn:active{ transform: translateY(1px); }

a.btn{ text-decoration: none; }
a.btn:hover{ text-decoration: none; }


/* ---------- Dropdown (funktion + base look) ----------
   FIX: Må IKKE være låst til ".nav ..." – fordi farvepaletten ofte ligger i ".controls".
   Derfor gælder det nu globalt for .nav-dropdown og .palette-dropdown (uanset placering).

   FIX (hover-drop): Fjern "hul" mellem trigger og submenu, så den ikke forsvinder,
   når markøren flyttes ned på menupunkterne.
------------------------------------------------------ */

.nav-dropdown,
.palette-dropdown{
  position: relative;
  display: inline-block;
}

.nav-dropdown > a,
.palette-dropdown > a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* submenu må ikke ligge inline i topmenu/header */
.nav-dropdown > .nav-submenu,
.palette-dropdown > .nav-submenu{
  display: none;                 /* <- kritisk */
  position: absolute;            /* <- kritisk */
  left: 0;
  top: 100%;                     /* <- ingen luft-hul */
  transform: translateY(6px);    /* <- samme visuelle afstand som før */
  z-index: 1000;

  list-style: none;
  margin: 0;
  padding: 8px;

  min-width: 260px;

  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  box-shadow: var(--shadow-menu);
}

/* Hover-bro: usynligt felt der forbinder trigger og submenu */
.nav-dropdown > .nav-submenu::before,
.palette-dropdown > .nav-submenu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;       /* skal være >= 6px (din translateY) */
  height: 10px;
  background: transparent;
}

/* fold ud ved hover + keyboard */
.nav-dropdown:hover > .nav-submenu,
.nav-dropdown:focus-within > .nav-submenu,
.palette-dropdown:hover > .nav-submenu,
.palette-dropdown:focus-within > .nav-submenu{
  display: block;
}

/* submenu links som rækker */
.nav-submenu a{
  display: block;
  margin: 0;
  padding: 10px 14px;
  line-height: 1.4;
  white-space: nowrap;

  color: var(--menu-fg);
  text-decoration: none;
}
.nav-submenu a:hover{
  background: var(--menu-hover-bg);
  color: var(--menu-hover-fg);
  text-decoration: none;
}

/* Dropdown: evt. links med .btn må ikke ligne knapper */
.nav-submenu a.btn{
  background: transparent;
  border-color: transparent;
}

/* Hvis palette-dropdown ligger helt til højre (i controls),
   så undgår vi, at menuen falder ud over højre kant */
.header .controls .palette-dropdown > .nav-submenu{
  right: 0;
  left: auto;
}

/* Essenscitat (permanent komponent) */
.essenscitat{
  text-align: center;
  font-style: italic;
  margin: 2.5rem auto;
  max-width: 38rem;
  padding: 0.75rem 1.5rem;
  position: relative;
}
.essenscitat::before,
.essenscitat::after{
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 0.18rem;
  border-radius: 999px;
  box-shadow: var(--shadow-menu);
}
.essenscitat::before{ left: 0; }
.essenscitat::after{ right: 0; }


/* ======================================================================
   A5.x) Hover-popups / tooltips (Metode 2)
   ----------------------------------------------------------------------
   QUICK GUIDE (så du hurtigt kan finde “formatet”):
     - Wrapper:     .hoverbox
     - Trigger:     .hoverbox .term              (det klikbare ord/reference)
     - Popup:       .hoverbox .popup             (selve tooltip-boksen)
     - Hjælpelinje: .hoverbox .popup .title      (fx “Hold musen…” / “Klik…”)
     - Indhold:     .hoverbox .popup .hint       (om:/relevans + evt. link)
     - Visning:     .hoverbox:hover .popup
                    .hoverbox:focus-within .popup
                    .hoverbox.pinned .popup

   Typiske justeringer:
     - Større popup-tekst:     .hoverbox .popup .hint  { font-size: ... }
     - Større hjælpelinje:     .hoverbox .popup .title { font-size: ... }
     - Placering/bredde:       .hoverbox .popup        { top/left/width/... }

   Markup (anbefalet):
     <span class="hoverbox">
       <button type="button" class="term" aria-expanded="false">(Ainsworth et al., 1978)</button>
       <span class="popup" role="tooltip">
         <span class="title">Hold musen her for at læse • Klik på ordet for at fastholde</span>
         <span class="hint">…om:/relevans + link…</span>
       </span>
     </span>

   Farver følger paletten via CSS-variabler (ingen hardkodede farver her)
   ====================================================================== */


.hoverbox{
  position: relative;
  display: inline-block;
}

.hoverbox .term{
  /* gør knappen typografisk som almindelig tekst */
  all: unset;
  font: inherit;
  color: inherit;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 1px;
  text-decoration-thickness: 2px;
}
/* Kilde-markering (term-src): tynd stitch-underline (kan flyttes ned via padding-bottom) */
.hoverbox .term.term-src{
  position: relative;
  display: inline-block;

  /* NØGLEN: giver “luft” under ordet, så linjen kan ligge lavere */
  padding: 0 0 0.18em 0;

  border: 0;
  background: transparent;
  text-decoration: none;

  line-height: 1.05;
  vertical-align: baseline;
}

/* selve stitch-linjen */
.hoverbox .term.term-src::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  height: 1.5px;      /* tyndere */
  bottom: 0;        /* ligger helt nede i bunden af padding-området */

  background: repeating-linear-gradient(
    90deg,
    currentColor 0 10px,
    transparent 10px 14px
  );
  pointer-events: none;
}



/* Undgå “boks” ved tastaturfokus på netop kilder */
.hoverbox .term.term-src:focus-visible{
  outline: none;
}


/* Popup er som udgangspunkt skjult */
.hoverbox .popup{
  display: none;                 /* <- gør det robust (ikke bare opacity) */
  position: absolute;
  left: 0;
  top: 135%;
  width: min(360px, 75vw);

  background: var(--quote, var(--card));
  color: var(--quote-fg, var(--fg));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-menu);

  padding: 12px 12px 10px;
  line-height: 1.45;
  z-index: 1001;
}

.hoverbox .popup::before{
  content: "";
  position: absolute;
  left: 16px;
  top: -8px;
  border: 10px solid transparent;
  border-bottom-color: var(--quote, var(--card));
  filter: drop-shadow(0 -1px 0 var(--border));
}

.hoverbox .popup .title{
  display: block;
  font-size: 13px;
  opacity: .85;
  margin-bottom: 6px;
}

/* Hint: ingen delingslinje */
.hoverbox .popup .hint{
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  opacity: .8;
}

/* Vises ved hover/fokus eller når den er "pinned" */
.hoverbox:hover .popup,
.hoverbox:focus-within .popup,
.hoverbox.pinned .popup{
  display: block;
}


/* ======================================================================
   A6) KOLONNER (K-sider)
   ====================================================================== */

.left-column{
  background-color: var(--resume-bg, var(--bg));
  color: var(--resume-fg);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.right-column{ padding: var(--space-3); }

/* Kapiteloverskrift (h1) skal fylde hele bredden */
.full-width-header{
  grid-column: span 2;
  text-align: center;
  font-size: 2.5rem;
  margin: 0;
}

/* K-sider: gør tekst i venstre/højre kolonne større end standard */
.left-column p,
.left-column li,
.right-column p,
.right-column li{
  font-size: 1.15rem;
}

/* Resumé-links følger resuméfarve (defineret i A7)
   MEN: Knapper i resumé er ofte <a class="btn">...</a>
   - Almindelige links: bruger --resume-fg (temaets resumé/quote-tekst)
   - Knap-links (.btn): bruger --btn-fg (hvid i lys/sepia, sort i mørk) */
.left-column a:not(.btn){
  color: var(--resume-fg);
  text-decoration: underline;
}
.left-column a.btn{
  color: var(--btn-fg);
  text-decoration: none;
}
.left-column a.btn:hover{
  color: var(--btn-fg-hover);
  text-decoration: none;
}

/* Desktop: lås resumé/kolonne-højder (bevarer evt. nødvendige !important) */
@media (min-width: 900px){
  :root{ --resume-viewport-offset: 32px; }

  .left-column{
    height: calc(90vh - var(--resume-viewport-offset)) !important;
    max-height: calc(90vh - var(--resume-viewport-offset)) !important;
    overflow: auto !important;
  }

  .resume-box,
  .resume-box-kx{
    height: 90vh !important;
    max-height: 90vh !important;
    overflow: auto !important;
  }
}


/* ======================================================================
   A7) TEMA-VARIABLER (CANONICAL – ENESTE STED MED FARVER)
   -----------------------------------------------------------------------
   Skift farver her – så følger ALT andet automatisk med.

   Kommentar-standard:
   - Først: hvor farven bruges (fx side-baggrund / topmenu / resumé / knapper)
   - Så: et “farvenavn” (menneskeligt)
   ====================================================================== */

/* Light (default) */
:root, .theme-light{
  /* Farvenavne: Lys (mint/creme + grøn accent) */
  --bg: #F3F8F4;                 /* Side-baggrund – “mint” */
  --text: #137c40;               /* Brødtekst (generelt) – “grøn” */
  --fg: var(--text);             /* Brødtekst = --fg */

  --card: #ffffff;               /* Kort-flader – “hvid” */
  --quote: #fff9ef;              /* Citat/resumé + header-baggrund – “creme” */
  --resume-bg: var(--quote);        /* Resumé-boks baggrund – “mint (samme som bg)” */
  --border: #e0e0e0;             /* Linjer/rammer (cards/menu/header) – “lys grå” */

  --accent: #2f8f4e;             /* Accent (knapper/markering/quote-linje) – “mørk grøn” */
  --menu-fg: #145A32;            /* Dropdown/citat/resumé-tekst – “grøn” */
  --heading: #16713d;            /* Overskrifter – “dyb grøn” */

  --muted: #2E4B38;              /* Dæmpet/sekundær tekst – “grøn-grå” */
  --surface-soft: #fdfaf6;       /* Blød flade (cover-wrap) – “varm offwhite” */

  --link: var(--accent);         /* Links – (samme som accent) */
  --link-hover: var(--accent);   /* Link hover – (samme som accent) */

  --btn-bg: var(--accent);       /* Knap baggrund – (samme som accent) */
  --btn-fg: #ffffff;             /* Knap tekst – “hvid” */
  --btn-bg-hover: #277a42;       /* Knap hover-baggrund – “dyb grøn” */
  --btn-fg-hover: #ffffff;       /* Knap hover-tekst – “hvid” */

  --menu-bg: var(--quote);       /* Dropdown-baggrund – (samme som quote) */
  --menu-border: var(--border);  /* Dropdown-ramme – (samme som border) */
  --menu-hover-bg: var(--quote); /* Dropdown hover-baggrund – (samme som quote) */
  --menu-hover-fg: #277A42;      /* Dropdown hover-tekst – “dyb grøn” */

  --quote-fg: var(--menu-fg);    /* Citat-tekst – (samme som menu-fg) */
  --resume-fg: var(--menu-fg);   /* Resumé-tekst – (samme som menu-fg) */

  --hero-lead: #3b5d46;          /* Forside lead-tekst (.hero .lead) – “mørk grøn-grå” */

  --shadow-lg-theme: 0 10px 24px rgba(0,0,0,.12);   /* Store skygger (cards/cover) – sort 12% */
  --shadow-menu-theme: 0 8px 24px rgba(0,0,0,.12);  /* Menu-skygge (dropdown) – sort 12% */
}

/* Sepia */
.theme-sepia{
  /* Farvenavne: Sepia (varm baggrund + blå accent) */
  --bg: #f6efde;                 /* Side-baggrund – “sepia sand” */
  --text: #3868ed;               /* Brødtekst (generelt) – “blå” */
  --fg: var(--text);

  --card: #fff9ef;               /* Kort-flader – “creme” */
  --quote: #fbf5e7;              /* Citat/resumé + header-baggrund – “lys sepia” */
  --resume-bg: var(--quote);        /* Resumé-boks baggrund – “sepia sand (samme som bg)” */
  --border: #d8ccb8;             /* Linjer/rammer – “sepia grå” */

  --accent: #1E72C5;             /* Accent (knapper/markering) – “klar blå” */
  --menu-fg: #1E72C5;            /* Dropdown/citat/resumé-tekst – “klar blå” */
  --heading: var(--menu-fg);     /* Overskrifter – (samme som menu-fg) */

  --muted: #5a4a38;              /* Dæmpet/sekundær tekst – “brun” */
  --surface-soft: #fdfaf6;       /* Blød flade (cover-wrap) – “varm offwhite” */

  --link: var(--accent);         /* Links – (samme som accent) */
  --link-hover: var(--accent);   /* Link hover – (samme som accent) */

  --btn-bg: var(--accent);       /* Knap baggrund – (samme som accent) */
  --btn-fg: #ffffff;             /* Knap tekst – “hvid” */
  --btn-bg-hover: var(--accent); /* Knap hover-baggrund – (samme som accent) */
  --btn-fg-hover: #ffffff;       /* Knap hover-tekst – “hvid” */

  --menu-bg: var(--quote);       /* Dropdown-baggrund – (samme som quote) */
  --menu-border: var(--border);  /* Dropdown-ramme – (samme som border) */
  --menu-hover-bg: var(--quote); /* Dropdown hover-baggrund – (samme som quote) */
  --menu-hover-fg: #1558A4;      /* Dropdown hover-tekst – “mørk blå” */

  --quote-fg: var(--menu-fg);    /* Citat-tekst – (samme som menu-fg) */
  --resume-fg: var(--menu-fg);   /* Resumé-tekst – (samme som menu-fg) */

  --hero-lead: #6cc0e8;          /* Forside lead-tekst (.hero .lead) – “lys cyan” */

  --shadow-lg-theme: 0 10px 24px rgba(0,0,0,.12);   /* Store skygger – sort 12% */
  --shadow-menu-theme: 0 8px 24px rgba(0,0,0,.12);  /* Menu-skygge – sort 12% */
}

/* Dark */
.theme-dark{
  /* Farvenavne: Mørk (koks + orange accent) */
  --bg: #121212;                 /* Side-baggrund – “koks” */
  --fg: #FF8C3A;                 /* Brødtekst (generelt) – “orange” */
  --heading: #FFB680;            /* Overskrifter – “lys orange” */

  --card: #1a1a1a;               /* Kort-flader – “mørk koks” */
  --quote: #2a241e;              /* Citat/resumé + header-baggrund – “koks brun” */
  --resume-bg: var(--quote);     /* Resumé-boks baggrund – “koks brun (samme som quote)” */
  --border: #333333;             /* Linjer/rammer – “mørk grå” */

  --accent: #FF8C3A;             /* Accent (knapper/markering) – “orange” */
  --muted: #eaeaea;              /* Dæmpet/sekundær tekst – “lys grå” */
  --surface-soft: #1a1a1a;       /* Blød flade (cover-wrap) – “mørk koks” */

  --link: var(--accent);         /* Links – (samme som accent) */
  --link-hover: var(--accent);   /* Link hover – (samme som accent) */

  --btn-bg: var(--accent);       /* Knap baggrund – (samme som accent) */
  --btn-fg: #000000;             /* Knap tekst – “sort” */
  --btn-bg-hover: var(--accent); /* Knap hover-baggrund – (samme som accent) */
  --btn-fg-hover: #000000;       /* Knap hover-tekst – “sort” */

  --menu-bg: var(--quote);       /* Dropdown-baggrund – (samme som quote) */
  --menu-border: var(--border);  /* Dropdown-ramme – (samme som border) */
  --menu-hover-bg: var(--quote); /* Dropdown hover-baggrund – (samme som quote) */
  --menu-fg: #FF8C3A;            /* Dropdown/citat/resumé-tekst – “orange” */
  --menu-hover-fg: #E67824;      /* Dropdown hover-tekst – “mørk orange” */

  --quote-fg: var(--menu-fg);    /* Citat-tekst – (samme som menu-fg) */
  --resume-fg: var(--fg);        /* Resumé-tekst – (samme som fg) */

  --hero-lead: #FFB680;          /* Forside lead-tekst (.hero .lead) – “lys orange” */

  --shadow-lg-theme: 0 10px 24px rgba(0,0,0,.18);   /* Store skygger – sort 18% */
  --shadow-menu-theme: 0 8px 24px rgba(0,0,0,.18);  /* Menu-skygge – sort 18% */
}


/* ***********************************************************************
   DEL B · PATCHES (ingen farver her – kun tokens)
   *********************************************************************** */

/* ======================================================================
   PATCH: BRØDTEKST SKAL FØLGE TEMAET (OG IKKE BLIVE SORT)
   ----------------------------------------------------------------------
   Hvorfor virker "body { color: var(--fg) }" nogle gange ikke?
   - Hvis en anden regel sætter fx p { color: #000 !important; }
   - Hvis en anden CSS-fil kommer EFTER denne fil
   - Hvis inline-style sætter color

   Teknik:
   1) Giv containerne farven igen (med !important)
   2) Tving brødtekst-tags til at ARVE "color" (med !important)
   3) Brug høj specificitet (html body ...), så vi vinder over .class p {...}
   ====================================================================== */

/* 1) Sikr at de vigtigste containere faktisk bærer temaets brødtekstfarve */
html body,
html body main,
html body .container,
html body .reading,
html body .right-column{ color: var(--fg) !important; }
html body .left-column{  color: var(--resume-fg) !important; }


/* 2) Tving “almindelig brødtekst” til at arve farven (MEN undtag .lead) */
html body p:not(.lead),
html body li,
html body dt,
html body dd,
html body blockquote,
html body figcaption,
html body caption,
html body td,
html body th,
html body label,
html body legend{
  color: inherit !important;
}

/* 3) Extra anti-sort i læse-containere (MEN undtag .lead) */
html body .reading p:not(.lead),
html body .reading li,
html body main p:not(.lead),
html body main li,
html body .left-column p,
html body .left-column li,
html body .right-column p,
html body .right-column li{
  color: inherit !important;
}
/* Hub: kapitel-knap-tilstande (gratis / låst) */
.hub-kapitel-btn {
  position: relative;
}

/* Generel "låst" knap – kan bruges andre steder også */
.btn--locked,
.hub-kapitel-btn.btn--locked {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Sørg for at hover ikke ændrer farve på låste knapper */
.btn--locked:hover,
.hub-kapitel-btn.btn--locked:hover {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

/* Eksplicit “fri” variant, hvis vi vil sikre fuld klikbarhed */
.btn--free,
.hub-kapitel-btn.btn--free {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
.nav-link.is-disabled{
  opacity: .45;
  cursor: default;
  pointer-events: none;
  text-decoration: none !important;
}
/* Reader top-nav: ALT skal være normal vægt */
.reader-header .reader-nav a,
.reader-header .reader-nav a.nav-link,
.reader-header .kilder-nav a,
.reader-header .kilder-nav a.nav-link{
  font-weight: 400 !important;
}

/* Hvis nogen links har <strong> indeni, så arver de 400 */
.reader-header .reader-nav a strong,
.reader-header .kilder-nav a strong{
  font-weight: inherit !important;
}