/* ==========================================================================
   Digitale Spor - delt designfundament
   --------------------------------------------------------------------------
   Denne fil er fælles for alle projektsites under digitalespor.dk
   (hvemkiggermed.dk, senere andre). Den indeholder kun det, der skal se ens
   ud på tværs: farver, typografi, spacing, basiselementer og kolofonen.

   Alt, der kun hører til ét site, hører hjemme i sitets egen site.css.

   VIGTIGT: sitene ligger på hvert sit domæne. De må ikke hente denne fil fra
   hinanden. Det ville være en tredjepartsforespørgsel, og hele pointen med
   materialet er, at der ikke er nogen. Filen kopieres derfor ind i hvert
   site som assets/css/fundament.css. Kilden her er den rigtige.

   Ingen webfonts, ingen eksterne billeder, ingen @import. Kun systemskrifter.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Farver, lyst tema. Papir og blæk, ikke produkt.
     Alle tekstfarver er kontrolleret mod baggrunden og ligger over 7:1. */
  --ds-papir:          #FBF8F3;
  --ds-papir-2:        #F2ECE1;
  --ds-papir-3:        #E8DFCF;
  --ds-blaek:          #1A1917;
  --ds-blaek-daempet:  #514B43;
  --ds-linje:          #D8CFBE;
  --ds-linje-staerk:   #B9AD97;
  --ds-accent:         #0B5D57;
  --ds-accent-flade:   #E0EFED;
  --ds-fremhaev:       #8F3A05;
  --ds-fremhaev-flade: #FAEBDD;
  --ds-ok:             #1F6032;
  --ds-ok-flade:       #E4F0E6;

  /* Typografi. Kun systemskrifter, så der ikke hentes en byte udefra.
     Serif til overskrifter giver læremiddel frem for produkt. */
  --ds-skrift-brand:
    Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    "Times New Roman", serif;
  --ds-skrift-tekst:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --ds-skrift-kode:
    ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", Menlo, Consolas, monospace;

  /* Skala. Vokser med skærmbredden, så den samme side er læsbar både på en
     iPad og bagerst i et klasselokale via projektor. */
  --ds-t-lille:   clamp(0.94rem, 0.90rem + 0.15vw, 1.06rem);
  --ds-t-brod:    clamp(1.06rem, 0.98rem + 0.38vw, 1.38rem);
  --ds-t-manchet: clamp(1.22rem, 1.06rem + 0.72vw, 1.75rem);
  --ds-t-h3:      clamp(1.20rem, 1.06rem + 0.62vw, 1.62rem);
  --ds-t-h2:      clamp(1.52rem, 1.24rem + 1.25vw, 2.55rem);
  --ds-t-h1:      clamp(2.05rem, 1.50rem + 2.60vw, 4.30rem);
  --ds-t-kaempe:  clamp(2.60rem, 1.40rem + 6.00vw, 7.00rem);

  /* Spacing */
  --ds-r1: 0.35rem;
  --ds-r2: 0.7rem;
  --ds-r3: 1.15rem;
  --ds-r4: 1.9rem;
  --ds-r5: 3.1rem;
  --ds-r6: 5.0rem;

  --ds-bredde:       72rem;
  --ds-bredde-tekst: 40rem;
  --ds-runding:      12px;
  --ds-runding-lille: 7px;
}

/* Mørkt tema. Følger systemet, medmindre siden selv har sat data-tema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lyst"]) {
    --ds-papir:          #14161A;
    --ds-papir-2:        #1C2026;
    --ds-papir-3:        #262B33;
    --ds-blaek:          #EFEAE1;
    --ds-blaek-daempet:  #B3AC9F;
    --ds-linje:          #333A44;
    --ds-linje-staerk:   #4C5561;
    --ds-accent:         #6BCEC2;
    --ds-accent-flade:   #13312F;
    --ds-fremhaev:       #F2A765;
    --ds-fremhaev-flade: #33251A;
    --ds-ok:             #7BCB92;
    --ds-ok-flade:       #17301E;
  }
}

:root[data-tema="moerkt"] {
  --ds-papir:          #14161A;
  --ds-papir-2:        #1C2026;
  --ds-papir-3:        #262B33;
  --ds-blaek:          #EFEAE1;
  --ds-blaek-daempet:  #B3AC9F;
  --ds-linje:          #333A44;
  --ds-linje-staerk:   #4C5561;
  --ds-accent:         #6BCEC2;
  --ds-accent-flade:   #13312F;
  --ds-fremhaev:       #F2A765;
  --ds-fremhaev-flade: #33251A;
  --ds-ok:             #7BCB92;
  --ds-ok-flade:       #17301E;
}

/* --- Nulstilling og basis ------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ds-papir);
  color: var(--ds-blaek);
  font-family: var(--ds-skrift-tekst);
  font-size: var(--ds-t-brod);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ds-skrift-brand);
  font-weight: 700;
  line-height: 1.14;
  margin: 0 0 var(--ds-r3);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--ds-t-h1); }
h2 { font-size: var(--ds-t-h2); }
h3 { font-size: var(--ds-t-h3); line-height: 1.25; }

p, li { max-width: var(--ds-bredde-tekst); }
p { margin: 0 0 var(--ds-r3); }

a {
  color: var(--ds-accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}
a:hover { text-decoration-thickness: 0.16em; }

strong { font-weight: 700; }

code, kbd, samp {
  font-family: var(--ds-skrift-kode);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--ds-linje);
  margin: var(--ds-r5) 0;
}

img, svg { max-width: 100%; height: auto; }

/* Tastaturfokus skal være umuligt at overse, også på projektor. */
:focus-visible {
  outline: 3px solid var(--ds-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Springlink til indhold */
.ds-spring {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ds-accent);
  color: var(--ds-papir);
  padding: var(--ds-r2) var(--ds-r3);
  z-index: 100;
  border-radius: 0 0 var(--ds-runding-lille) 0;
}
.ds-spring:focus {
  left: 0;
}

/* --- Layout -------------------------------------------------------------- */

.ds-ramme {
  width: 100%;
  max-width: var(--ds-bredde);
  margin: 0 auto;
  padding: 0 var(--ds-r4);
}

/* På meget brede skærme (projektor, tavle-pc i fuld bredde) må linjerne ikke
   blive uendeligt lange. Rammen vokser lidt, teksten går op i størrelse via
   clamp, men linjelængden holdes i ro. */
@media (min-width: 100rem) {
  :root { --ds-bredde: 84rem; --ds-bredde-tekst: 46rem; }
}

.ds-sektion { padding: var(--ds-r6) 0; }
.ds-sektion--tyk { padding: calc(var(--ds-r6) * 1.3) 0; }

/* --- Knapper ------------------------------------------------------------- */

.ds-knap {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-r2);
  font: inherit;
  font-weight: 600;
  padding: 0.72em 1.5em;
  border-radius: var(--ds-runding);
  border: 2px solid var(--ds-accent);
  background: var(--ds-accent);
  color: var(--ds-papir);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.ds-knap:hover { transform: translateY(-1px); }
.ds-knap:active { transform: translateY(1px); }

.ds-knap--rolig {
  background: transparent;
  color: var(--ds-accent);
}
.ds-knap--rolig:hover { background: var(--ds-accent-flade); }

/* --- Kort ---------------------------------------------------------------- */

.ds-kort {
  background: var(--ds-papir-2);
  border: 1px solid var(--ds-linje);
  border-radius: var(--ds-runding);
  padding: var(--ds-r4);
}

/* --- Kolofon ------------------------------------------------------------- */
/* Bunden af hvert projektsite. Her, og kun her, står afsenderen.
   Kataloglinjen er det, der gør, at en lærer, som er landet på ét
   projektsite, kan finde de andre. */

.ds-kolofon {
  border-top: 1px solid var(--ds-linje);
  background: var(--ds-papir-2);
  padding: var(--ds-r5) 0 var(--ds-r4);
  font-size: var(--ds-t-lille);
  color: var(--ds-blaek-daempet);
  line-height: 1.7;
}

.ds-kolofon__indhold {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-r4);
  justify-content: space-between;
  align-items: flex-start;
}

.ds-kolofon p { max-width: 34rem; margin: 0 0 var(--ds-r2); }
.ds-kolofon a { color: var(--ds-accent); }

.ds-kolofon__titel {
  font-family: var(--ds-skrift-brand);
  font-size: 1.05rem;
  color: var(--ds-blaek);
  margin: 0 0 var(--ds-r2);
  font-weight: 700;
}

.ds-kolofon__katalog {
  border-top: 1px solid var(--ds-linje);
  margin-top: var(--ds-r4);
  padding-top: var(--ds-r3);
  font-size: var(--ds-t-lille);
}

/* --- Hjælpere ------------------------------------------------------------ */

.ds-daempet { color: var(--ds-blaek-daempet); }
.ds-manchet {
  font-size: var(--ds-t-manchet);
  line-height: 1.45;
  color: var(--ds-blaek-daempet);
  max-width: 44rem;
}
.ds-usynlig {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Bevægelse ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .ds-knap, .ds-spring { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}