/* afklit.dk – fælles stylesheet
   Idé: en blanket. Tre hænder skriver på den:
   tryk (EB Garamond) er institutionen, maskinskrift (Courier Prime) er systemet,
   håndskrift (Playwrite DK Uloopet, dansk skoleskrift) er mennesket.
   Sort streg, grønligt papir, kuglepensblå.
   Alle farver og skrifter ændres her øverst. */

@font-face { font-family: "Playwrite DK Uloopet"; src: url("fonts/playwrite-dk-uloopet-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --papir: #e4eadf;
  --felt: #d2dbcb;
  --tryk: #000000;
  --daempet: #4a564d;
  --kuglepen: #1930c4;

  --skrift-tryk: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --skrift-maskine: "Courier Prime", "Courier New", Courier, monospace;
  --skrift-haand: "Playwrite DK Uloopet", "Segoe Print", "Bradley Hand", cursive;

  --streg: 3px;
  --tynd: 1.5px;
  --bredde: 64rem;
  --spalte: 11rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papir: #0e1410; --felt: #18221b; --tryk: #edf1ea; --daempet: #a0ada3;
    --kuglepen: #93a5ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papir: #0e1410; --felt: #18221b; --tryk: #edf1ea; --daempet: #a0ada3;
  --kuglepen: #93a5ff; color-scheme: dark;
}

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

body {
  margin: 0;
  padding-block: 1.25rem 3rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--papir);
  color: var(--tryk);
  font-family: var(--skrift-tryk);
  font-size: 1.25rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.skip { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--tryk); color: var(--papir); font-family: var(--skrift-maskine); font-size: 1rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Blanketten: én ramme om hele siden */
.blanket { max-width: var(--bredde); margin-inline: auto; border: var(--streg) solid var(--tryk); }

/* Hoved: institutionens navn skrevet i hånden, sagsfelter i maskinskrift */
.hoved { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); border-bottom: var(--streg) solid var(--tryk); }
.navnefelt { display: flex; align-items: center; padding: 1.1rem 1rem 1.3rem; border-right: var(--streg) solid var(--tryk); min-width: 0; }
.ordmaerke { display: inline-block; font-family: var(--skrift-haand); font-weight: 400; font-size: clamp(1.75rem, 4.6vw, 3.1rem); line-height: 1.3; color: var(--kuglepen); text-decoration: none; }
.ordmaerke:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.sagsfelter { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.sagsfelter div { padding: .5rem .75rem .6rem; border-bottom: var(--tynd) solid var(--tryk); min-width: 0; }
.sagsfelter div:nth-child(odd) { border-right: var(--tynd) solid var(--tryk); }
.sagsfelter div:nth-last-child(-n+2) { border-bottom: 0; }
.sagsfelter dt { font-family: var(--skrift-maskine); font-size: .8rem; line-height: 1.3; color: var(--daempet); }
.sagsfelter dd { margin: .1rem 0 0; font-family: var(--skrift-maskine); font-weight: 700; font-size: 1rem; line-height: 1.3; }

/* Menu: fem felter, det aktuelle er sværtet */
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: var(--streg) solid var(--tryk); }
.menu li + li { border-left: var(--tynd) solid var(--tryk); }
.menu a { display: block; padding: .7rem .75rem; font-family: var(--skrift-maskine); font-size: 1rem; line-height: 1.25; color: var(--tryk); text-decoration: none; overflow-wrap: anywhere; }
.menu a:hover { background: var(--felt); text-decoration: underline; }
.menu a[aria-current="page"] { background: var(--tryk); color: var(--papir); }

/* Sidens titel */
.titel { padding: 2.5rem 1rem 2.25rem; border-bottom: var(--streg) solid var(--tryk); }
h1 { margin: 0; max-width: 17ch; font-weight: 500; font-size: clamp(2.5rem, 7.5vw, 5rem); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.titel--lang h1 { max-width: 20ch; font-size: clamp(2.2rem, 6vw, 4rem); }
.indledning { margin: 1.5rem 0 0; max-width: 34rem; font-size: 1.4rem; line-height: 1.4; }


/* Paragraffer: nummer og rubrik i venstre spalte, tekst i højre */
.paragraf { display: grid; grid-template-columns: var(--spalte) minmax(0, 1fr); border-bottom: var(--tynd) solid var(--tryk); }
.paragraf:last-child { border-bottom: 0; }
.paragraf > header { padding: 1.4rem .75rem 1rem 1rem; border-right: var(--tynd) solid var(--tryk); font-family: var(--skrift-maskine); }
.paragraf .nr { display: block; font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.paragraf h2 { margin: .35rem 0 0; font-family: var(--skrift-maskine); font-weight: 400; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.paragraf .indhold { padding: 1.3rem 1rem 1.6rem 1.25rem; min-width: 0; }
.indhold > * { max-width: 35rem; }
.indhold > .bred { max-width: none; }
.indhold p, .indhold ul, .indhold ol { margin: 0 0 1rem; }
.indhold > :last-child { margin-bottom: 0; }
.indhold ul, .indhold ol { padding-left: 1.3rem; }
.indhold li { margin-bottom: .55rem; }
.indhold li::marker { font-family: var(--skrift-maskine); font-size: .9em; }

a { color: var(--kuglepen); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 4px; }
a:focus-visible { outline: 3px solid var(--kuglepen); outline-offset: 3px; }

/* Definitionen står i sit eget felt */
.definition { margin: 0 0 1rem; padding: 1.1rem 1.2rem 1.2rem; border: var(--streg) solid var(--tryk); background: var(--felt); font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.22; font-weight: 500; }
.indhold > .definition { max-width: 42rem; }

/* Knap: felt med hård skygge */
.knapper { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin: .25rem 0 1rem; }
.knapper .knap { margin: 0; }
.knap { display: inline-block; margin: .25rem 0 .5rem; padding: .7rem 1rem .6rem; border: var(--streg) solid var(--tryk); background: var(--papir); color: var(--tryk); box-shadow: 6px 6px 0 var(--tryk); font-family: var(--skrift-maskine); font-weight: 700; font-size: 1.05rem; line-height: 1.25; text-decoration: none; }
.knap:hover { background: var(--tryk); color: var(--papir); box-shadow: 6px 6px 0 var(--kuglepen); }
.adresse { font-family: var(--skrift-maskine); font-weight: 700; font-size: 1.05em; overflow-wrap: anywhere; }

/* Tabeller og blanketfelter */
.rulle { overflow-x: auto; margin: 0 0 1rem; }
table { width: 100%; border-collapse: collapse; border: var(--streg) solid var(--tryk); font-size: 1.1rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; padding: 0 0 .4rem; font-family: var(--skrift-maskine); font-size: .9rem; color: var(--daempet); }
th, td { padding: .55rem .7rem; border: var(--tynd) solid var(--tryk); text-align: left; vertical-align: top; }
thead th, tbody th { font-family: var(--skrift-maskine); font-weight: 400; font-size: .9rem; background: var(--felt); }
tbody th { width: 11rem; }
.tal td:last-child, .tal th:last-child { text-align: right; }
.tal td:last-child { font-family: var(--skrift-maskine); font-weight: 700; }
.register { min-width: 34rem; }
.register td:first-child { font-family: var(--skrift-maskine); font-weight: 700; }
.tomt { color: var(--daempet); font-style: italic; }
.ledig { font-family: var(--skrift-maskine); font-weight: 700; color: var(--daempet); }
.blanketfelter td { color: var(--daempet); font-style: italic; }
.udfyldt td { font-family: var(--skrift-haand); font-weight: 400; font-size: 1.05rem; line-height: 1.7; color: var(--kuglepen); }

.note { font-family: var(--skrift-maskine); font-size: .9rem; line-height: 1.4; color: var(--daempet); }

/* Udgivelsesside: teksten selv */
.vaerk { padding: 2.5rem 1rem 3rem; border-bottom: var(--streg) solid var(--tryk); }
.vaerk .tekst { max-width: 34rem; margin-inline: auto; font-size: 1.3rem; line-height: 1.55; }
.vaerk .tekst p { margin: 0 0 1rem; }
.vaerk .tekst .vers { white-space: pre-wrap; }

/* Bund */
.bund { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--streg) solid var(--tryk); font-family: var(--skrift-maskine); font-size: .9rem; line-height: 1.35; }
.bund p { margin: 0; padding: .7rem .75rem; min-width: 0; overflow-wrap: anywhere; }
.bund p + p { border-left: var(--tynd) solid var(--tryk); }
.bund a { color: var(--tryk); }

@media (max-width: 46rem) {
  body { font-size: 1.15rem; }
  .hoved { grid-template-columns: 1fr; }
  .navnefelt { border-right: 0; border-bottom: var(--streg) solid var(--tryk); }
  .menu ul { grid-template-columns: 1fr 1fr; }
  .menu li { border-left: 0 !important; border-bottom: var(--tynd) solid var(--tryk); }
  .menu li:nth-child(even) { border-left: var(--tynd) solid var(--tryk) !important; }
  .menu li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .titel { padding: 1.75rem .9rem 1.6rem; }
  .paragraf { grid-template-columns: 1fr; }
  .paragraf > header { display: flex; align-items: baseline; gap: .75rem; padding: .6rem .9rem; border-right: 0; border-bottom: var(--tynd) solid var(--tryk); background: var(--felt); }
  .paragraf .nr { font-size: 1.15rem; }
  .paragraf h2 { margin: 0; }
  .paragraf .indhold { padding: 1.1rem .9rem 1.4rem; }
  tbody th { width: 38%; }
  .bund { grid-template-columns: 1fr; }
  .bund p + p { border-left: 0; border-top: var(--tynd) solid var(--tryk); }
}

@media print {
  body { background: #fff; color: #000; }
  .menu, .skip, .knap { display: none; }
}