/* ==========================================================================
   Sorø Fag- og Efterskole - core styles (loaded on every page)
   Tokens, base, typography, layout primitives, buttons, header, page header
   band, footer, motion, editor content and accessibility helpers.

   Styles for a single section live next to its template:
     sections/page/<layout>/<layout>.css
   and are only loaded on pages that use that section.
   ========================================================================== */

/* Tokens and component rules come from the approved design handoff
   ("Fagskole.nu Website Rebuild/design_handoff_fagskole_website/README.md").

   Contents
     1. Tokens            5. Buttons and pills      9. Footer
     2. Reset and base    6. Header, menu, panels  10. Motion
     3. Typography        7. Accent colours        11. Narrow screens
     4. Layout primitives 8. Page header band       12. WordPress + accessibility
*/
/* -- 0. Fonts ------------------------------------------------------------
   Self-hosted (assets/fonts), no Google Fonts request. Outfit and Space Grotesk
   are variable fonts (one file covers every weight). Latin covers Danish
   (æ ø å); the latin-ext files only download if a page uses those characters.
   Licence: SIL Open Font License 1.1 (assets/fonts/OFL-*.txt). */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/dm-mono-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/dm-mono-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/dm-mono-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/dm-mono-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* -- 1. Tokens ----------------------------------------------------------- */
:root {
  --ink: oklch(0.17 0.015 265);
  --ink2: oklch(0.40 0.02 265);
  --paper: oklch(0.975 0.012 85);
  --paper2: oklch(0.935 0.02 85);
  --line: oklch(0.86 0.02 85);

  --a1: oklch(0.74 0.16 45);    /* orange - primary accent, Gastronomi */
  --a2: oklch(0.74 0.16 355);   /* pink   - Mode Design */
  --a3: oklch(0.74 0.16 288);   /* violet - Grafisk Design */
  --a4: oklch(0.74 0.16 238);   /* blue   - Game Design, Fagskole */
  --a5: oklch(0.74 0.16 155);   /* green  - Teknologi */

  /* --ink as sRGB channels. Gradient stops must use this, not oklch(): Chrome
     renders an oklch() stop that carries an alpha as fully opaque, which turns
     the hero scrims into a flat black panel and hides the photograph. */
  --ink-rgb: 12 15 22;

  /* Hover text on the five accent grounds. Client direction, 17 Sep 2026. */
  --hover-on-accent: #fff;

  --on-dark: oklch(0.82 0.02 265);
  --on-dark-muted: oklch(0.68 0.02 265);
  --dark-line: oklch(0.35 0.02 265);

  --display: Outfit, "Trebuchet MS", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1240px;
  --pad-y: clamp(52px, 6.5vw, 100px);
  --pad-x: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Fallback for browsers without oklch(); overridden by @supports below. */
  color-scheme: light;
}
@media @supports not (color: oklch(0.5 0.1 200)) {
  :root {
      --ink: #17191f; --ink2: #5d626e; --paper: #faf7f1; --paper2: #eee8dd;
      --line: #ddd6c8; --a1: #f0914a; --a2: #f083a0; --a3: #b596ee;
      --a4: #62a6ee; --a5: #4dbb92; --on-dark: #c8cbd3; --on-dark-muted: #9aa0ab;
      --dark-line: #3d414b;
  }
}
/* -- 2. Reset and base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
/* The default hover is a deepened orange, which only works on paper. On the
   five accents and on ink it drops well below 4.5:1, and because the accent
   cards are themselves links the whole card would recolour. Both grounds keep
   their own legible hover instead. */
a:hover { color: oklch(0.55 0.16 45); }
ul, ol { margin: 0; padding-left: 1.15em; }
li { margin: 0 0 8px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--a1); color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--a1);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; color: var(--paper); }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* -- 3. Typography scale ------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  margin: 0 0 .5em;
  text-wrap: normal;
  /* Long Danish compounds at display sizes are wider than a narrow column.
     Hyphenation is tried first, so a word that has to break does so at a
     syllable with a visible hyphen. overflow-wrap stays as the last resort for
     a word that cannot be hyphenated, but on its own it split
     "GENERALFORSAMLING" after 16 characters and left the G alone on the next
     line. The lang attribute is set per page, so hyphens: auto uses Danish
     rules on the Danish pages and English on /en/. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their widest word and pushes content out of the layout. */
.grid > *, .split > *, .g2 > *, .g3 > *, .g4 > *, .aud-grid > * { min-width: 0; }
.h-hero {
  font-size: clamp(34px, 5vw, 68px);
  line-height: .94; letter-spacing: -.03em; text-transform: uppercase;
}
.h-page {
  font-size: clamp(30px, 7.5vw, 104px);
  line-height: .86; letter-spacing: -.035em; text-transform: uppercase;
}
@media (max-width: 560px) {
  /* Page titles are single Danish compounds of 17 or 18 characters
     ("Overgangsfrekvens", "Undervisningsmiljø", "Generalforsamling"). At the
     design's scale one of those is wider than a phone, so it breaks mid-word and
     strands the last letter on its own line. Chrome does not hyphenate them even
     with hyphens:auto and lang="da". Dropping the scale on narrow screens is the
     only thing that keeps the word whole; desktop is untouched. */
  .h-page { font-size: clamp(22px, 6.4vw, 34px); }
}
.h-sec {
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: .95; letter-spacing: -.025em;
}
.h-card {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: .98; text-transform: uppercase;
}
.h-sub { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.15; }
.lead {
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.5;
  margin: 0 0 1em;
}
.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink2);
  border: 1px dashed var(--ink2);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 20px;
}
/* -- 4. Layout primitives ------------------------------------------------ */
.sec { padding: var(--pad-y) var(--pad-x); }
.sec-tight { padding: clamp(34px, 4vw, 64px) var(--pad-x); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.alt { background: var(--paper2); border-block: 2px solid var(--ink); }
.dark { background: var(--ink); color: var(--paper); }
.dark a { color: var(--paper); }
.dark .lead, .dark p { color: var(--on-dark); }
.dark h2, .dark h3 { color: var(--paper); }
.grid { display: grid; gap: clamp(18px, 2.5vw, 32px); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
/* Exactly two across, for sets of four that auto-fit would break 3 + 1. */
.g-2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .g-2up { grid-template-columns: 1fr; }
}
/* Two-column sections centre their columns against each other, so the shorter
   one sits in the middle of the taller rather than hugging the top and leaving
   a block of dead space beneath it. */
.split {
  display: grid; gap: clamp(22px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: center;
}
.split-a { grid-template-columns: minmax(min(280px, 100%), 1fr) minmax(min(300px, 100%), 1.35fr); }
@media (max-width: 860px) {
  .split-a { grid-template-columns: 1fr; }
}
.row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px);
}
/* -- 5. Buttons and pills ------------------------------------------------ */
.btn {
  display: inline-block; font-family: var(--display); font-weight: 900;
  font-size: 16px; padding: 18px 32px; border-radius: 99px;
  border: 2px solid var(--ink); cursor: pointer;
  background: var(--ink); color: var(--paper);
  /* Document titles become button labels, and a Danish compound such as
     "Undervisningsmiljøvurdering" is wider than a 320px phone. */
  max-width: 100%; overflow-wrap: anywhere;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--a1); color: var(--ink); transform: translateY(-3px); }
.btn-2 {
  background: transparent; color: var(--ink); font-weight: 700; }
.btn-2:hover { background: var(--ink); color: var(--paper); }
.btn-on-dark { background: var(--a1); color: var(--ink); }
.btn-on-dark:hover { background: var(--paper); color: var(--ink); }
.btn-sm { font-size: 14.5px; padding: 12px 22px; }
.btn-block { display: block; width: 100%; text-align: center; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3vw, 36px); }
.pill {
  display: inline-block; font-family: var(--display); font-weight: 900;
  font-size: 16px; padding: 11px 22px; border-radius: 99px;
  border: 2px solid var(--ink); color: var(--ink);
  max-width: 100%; overflow-wrap: anywhere;
  transition: transform .25s var(--ease);
}
.pill:hover { transform: translateY(-3px); color: var(--ink); }
.arrow-link {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  border-bottom: 2px solid var(--a1); padding-bottom: 2px;
}
/* -- 6. Header ----------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.util {
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12.5px;
  padding: 10px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap;
}
.util a { color: var(--paper); }
.util a:hover { color: var(--a1); }
.util-l, .util-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.util .dot {
  width: 8px; height: 8px; border-radius: 99px; background: var(--a5);
  animation: blink 1.8s ease-in-out infinite; flex: none;
}
.util .hl { color: var(--a1); }
.lang { display: flex; border: 1px solid oklch(0.40 0.02 265); border-radius: 99px; overflow: hidden; }
.lang a { font-family: var(--mono); font-size: 12px; padding: 4px 10px; color: var(--paper); }
.lang a[aria-current="true"] { background: var(--a1); color: var(--ink); }
.bar {
  padding: 10px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.logo img { height: clamp(38px, 4vw, 56px); width: auto; }
.nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.nav a, .aud-tab {
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  padding: 8px 11px; border-radius: 99px; white-space: nowrap;
  border: 2px solid transparent; background: none; color: var(--ink);
  cursor: pointer; transition: background .22s var(--ease), border-color .22s var(--ease);
}
.nav a:hover { background: var(--paper2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--paper2); }
.aud-tab { background: var(--paper2); }
.aud-tab[aria-expanded="true"] { background: var(--a1); border-color: var(--ink); }
.nav .divider { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.cta-group { display: flex; align-items: center; gap: 10px; }
.burger {
  display: none; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  background: var(--paper2); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 99px;
  padding: 9px 16px; cursor: pointer;
}
.burger .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.burger .bars i { display: block; width: 16px; height: 2px; background: var(--ink); }
.aud-panel {
  background: var(--paper2); border-top: 1px solid var(--line);
  padding: clamp(22px, 3vw, 38px) var(--pad-x);
  animation: rise .45s var(--ease-out);
}
.aud-panel[hidden] { display: none; }
.aud-panel h2 { font-size: clamp(24px, 2.6vw, 38px); margin-bottom: .6em; }
.aud-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.aud-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; font-family: var(--display); font-weight: 700; font-size: 16px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.aud-grid a:hover { background: var(--a1); color: var(--ink); transform: translateY(-3px); }
.aud-grid span:last-child { opacity: .5; }
@media (max-width: 1080px) {
  .nav, .cta-group { display: none; }
  .burger { display: inline-flex; }
  .bar { justify-content: space-between; }
  .nav.open {
      display: flex; flex-direction: column; align-items: stretch;
      justify-content: flex-start; order: 3; width: 100%; gap: 2px;
      padding: 14px 0 4px; border-top: 1px solid var(--line);
  }
  .nav.open a, .nav.open .aud-tab { text-align: left; font-size: 17px; padding: 12px 10px; }
  .nav.open .divider { display: none; }
  .cta-group.open { display: flex; order: 4; width: 100%; padding-bottom: 12px; }
  .cta-group.open .btn { flex: 1 1 auto; text-align: center; }
}
/* -- 7. Accent colours (cards, pills and panels) --------------------- */

.a1 { background: var(--a1); color: var(--ink); }
.a2 { background: var(--a2); color: var(--ink); }
.a3 { background: var(--a3); color: var(--ink); }
.a4 { background: var(--a4); color: var(--ink); }
.a5 { background: var(--a5); color: var(--ink); }
/* An accent card inside a dark section still has an accent ground, so it must
   keep ink text. Without this, ".dark p" targets the paragraph directly and
   beats the card's inherited colour, leaving washed-out grey body copy on
   orange, pink and violet. */
.dark .a1, .dark .a2, .dark .a3, .dark .a4, .dark .a5, .dark .a1 p, .dark .a2 p, .dark .a3 p,
.dark .a4 p, .dark .a5 p, .dark .a1 h2, .dark .a2 h2, .dark .a3 h2, .dark .a4 h2, .dark .a5 h2,
.dark .a1 h3, .dark .a2 h3, .dark .a3 h3, .dark .a4 h3, .dark .a5 h3, .dark .a1 li, .dark .a2 li,
.dark .a3 li, .dark .a4 li, .dark .a5 li, .dark .a1 .lead, .dark .a2 .lead, .dark .a3 .lead,
.dark .a4 .lead, .dark .a5 .lead { color: var(--ink); }
.a1 a, .a2 a, .a3 a, .a4 a, .a5 a { color: var(--ink); }
/* Accent grounds turn white on hover (client direction, 17 Sep 2026). The
   global deepened-orange hover was illegible on all five accents and worst on
   --a4 blue. White is the requested treatment; note that white on an accent at
   lightness 0.74 measures roughly 2.2:1, so the hover state is below WCAG AA
   even though the resting ink state is around 8.5:1. */
a.a1:hover, a.a2:hover, a.a3:hover, a.a4:hover, a.a5:hover, .a1 a:hover, .a2 a:hover, .a3 a:hover,
.a4 a:hover, .a5 a:hover, a.pill:hover { color: var(--hover-on-accent); }
/* Everything inside an accent card follows the card's own hover colour, so the
   counter, the heading, the body copy and the "Læs mere" line move together
   rather than the link text changing on its own. */
a.a1:hover *, a.a2:hover *, a.a3:hover *, a.a4:hover *, a.a5:hover * {
  color: var(--hover-on-accent); }
a.a1:hover .arrow-link, a.a2:hover .arrow-link, a.a3:hover .arrow-link, a.a4:hover .arrow-link,
a.a5:hover .arrow-link {
  border-bottom-color: var(--hover-on-accent); }
/* On an accent the orange underline disappears into the ground, so the
   arrow-link rule is inverted: ink underline on accent, orange on paper. */
.a1 .arrow-link, .a2 .arrow-link, .a3 .arrow-link, .a4 .arrow-link, .a5 .arrow-link { border-bottom-color: var(--ink); }
/* Buttons standing on an accent ground keep their own palette. Without this,
   ".a1 a" outranks ".btn" and paints ink text onto the ink button, which makes
   the label vanish into its own background. The hover inverts to paper rather
   than to --a1, which on an orange card would be an orange button on orange. */
.a1 a.btn, .a2 a.btn, .a3 a.btn, .a4 a.btn, .a5 a.btn, .a1 button.btn, .a2 button.btn,
.a3 button.btn, .a4 button.btn, .a5 button.btn {
  background: var(--ink); color: var(--paper); border-color: var(--ink); }
.a1 a.btn:hover, .a2 a.btn:hover, .a3 a.btn:hover, .a4 a.btn:hover, .a5 a.btn:hover,
.a1 button.btn:hover, .a2 button.btn:hover, .a3 button.btn:hover, .a4 button.btn:hover,
.a5 button.btn:hover {
  background: var(--paper); color: var(--ink); border-color: var(--ink); }
.a1 a.btn-2, .a2 a.btn-2, .a3 a.btn-2, .a4 a.btn-2, .a5 a.btn-2 {
  background: transparent; color: var(--ink); }
.a1 a.btn-2:hover, .a2 a.btn-2:hover, .a3 a.btn-2:hover, .a4 a.btn-2:hover, .a5 a.btn-2:hover {
  background: var(--ink); color: var(--paper); }
.dark .btn:hover, .dark .btn-on-dark:hover { color: var(--ink); }
/* -- 8. Page header band and shared text ----------------------------- */

@media (max-width: 480px) {
  /* Phone: keep the utility bar to two lines. The phone number and the language
     toggle earn their place; the address does the e-mail's job on /kontakt/. */
  .util { font-size: 11.5px; gap: 6px 12px; }
  .util-r a[href^="mailto:"] { display: none; }
}
/* Page hero band. overflow-x: clip because the "rise" keyframe tilts the
   heading 2.5deg on entry, which swings its corners past the content column
   for the length of the animation. */
.band {
  padding: clamp(46px, 6vw, 86px) var(--pad-x);
  border-bottom: 2px solid var(--ink);
  overflow-x: clip;
}
.band h1 { animation: rise .8s var(--ease-out) both; }
.band .back {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  display: inline-block; margin-bottom: 18px;
}
/* A document button sits inside a run of prose, so it needs room underneath as
   well as above; otherwise the next paragraph butts straight up against it. */
.prose .btns { margin-bottom: clamp(22px, 3vw, 34px); }
.prose .btns:last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(24px, 2.6vw, 36px); margin-top: 1.4em; }
.prose h3 { font-size: clamp(19px, 1.8vw, 25px); margin-top: 1.3em; }
.prose > :first-child { margin-top: 0; }
.prose ul { margin-bottom: 1em; }
/* -- 9. Footer ----------------------------------------------------------- */
.ftr {
  background: var(--ink); color: var(--paper);
  padding: clamp(48px, 6vw, 90px) var(--pad-x) 32px;
}
.ftr a { color: oklch(0.85 0.02 265); }
.ftr a:hover { color: var(--paper); }
.ftr-cols { display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.ftr h2 {
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1em; }
.ftr-links { display: flex; flex-direction: column; gap: 9px; font-size: 15.5px; }
.ftr address { font-style: normal; line-height: 1.6; margin: 18px 0 14px; color: var(--on-dark); }
.ftr .tel { font-family: var(--display); font-weight: 900; font-size: 20px; color: var(--a1); display: block; }
.ftr .ids { font-family: var(--mono); font-size: 12px; color: var(--on-dark-muted); margin-top: 14px; }
.ftr-logo img { height: clamp(56px, 6vw, 76px); width: auto; }
.ftr-bot {
  border-top: 1px solid oklch(0.32 0.02 265); margin-top: clamp(34px, 4vw, 56px);
  padding-top: 26px; display: flex; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; align-items: center;
}
.ftr-social { display: flex; gap: 18px; font-family: var(--mono); font-size: 13px; }
.ftr-bot p { font-family: var(--mono); font-size: 13px; color: oklch(0.62 0.02 265); margin: 0; }
/* -- 10. Motion ---------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(1.05em) rotate(2.5deg); } to { opacity: 1; transform: none; } }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
/* Scroll reveals. The revealed state is the CSS default; only a document that
   has run site.js gets the hidden state, so content is never permanently
   invisible if the script fails, is blocked, or the page is being printed. */
.js [data-anim] { opacity: 0; transform: translateY(28px); }
.js [data-anim].in, .js [data-anim] { transition: opacity .75s var(--ease), transform .75s var(--ease); }
.js [data-anim].in { opacity: 1; transform: none; }
@media print {
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
  .hdr, .ftr, .btns { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
  }
  .js [data-anim] { opacity: 1; transform: none; }
  .util .dot { animation: none; }
}
@media (max-width: 400px) {
  /* -- 11. Narrow screens ---------------------------------------------------
     These live at the end on purpose. A media query carries no extra
     specificity, so an override of ".btn" or ".h-card" only wins if it comes
     after the rule it is overriding. Parked here, they always do.

     Danish page titles are single compounds of 17 to 20 characters, and the
     document buttons are labelled with document titles
     ("Undervisningsmiljøvurdering", 27 characters). At the design's scale one of
     those is wider than a phone, so it breaks mid-word and strands the last
     letter or two on a line of their own. Chrome will not hyphenate them even
     with hyphens:auto and lang="da", so the type steps down instead. Desktop is
     untouched. */
  .h-page { font-size: clamp(19px, 5.9vw, 28px); }
  .h-card { font-size: clamp(18px, 5.6vw, 24px); }
  .h-sub { font-size: clamp(16px, 5vw, 20px); }
  .btn { font-size: 14px; padding: 15px 20px; }
  .btn-sm { font-size: 13px; padding: 11px 16px; }
  .pill { font-size: 14px; padding: 10px 16px; }
}
/* Target size. A 15px link in a stacked list renders about 19px tall, below
   the 24px minimum in WCAG 2.5.8. Buttons and panel tiles already carry enough
   padding; these are the list and inline links that do not. 24px is the floor
   for every pointer, because the rule is not touch-only. */
.ftr-links a, .util a, .ftr-social a, .arrow-link, .band .back, a[href^="mailto:"], a[href^="tel:"] {
  display: inline-flex; align-items: center; min-height: 24px; }
@media (pointer: coarse), (max-width: 860px) {
  /* Touch pointers and small screens get a roomier target than the minimum. */
  .ftr-links a, .util a, .ftr-social a, .arrow-link, .band .back, a[href^="mailto:"], a[href^="tel:"] { min-height: 32px; }
  .ftr-links a { min-height: 40px; }
  .ftr-links { gap: 2px; }
  .util { row-gap: 2px; }
}
/* -- 12. WordPress and accessibility ------------------------------------ */
/* Rows rendered inside the previous section ("Fortsæt forrige sektion") */
.stack { margin-top: clamp(28px, 3vw, 44px); }
/* Sticky header below the WP admin bar */
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .hdr { top: 46px; }
}
/* Content from the editor */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.prose img, .rich img { max-width: 100%; height: auto; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
/* --------------------------------------------------------------------------
   Gravity Forms, styled as the design's enquiry form (.form)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Section partials (styles that were inline in the static design)
   -------------------------------------------------------------------------- */
.d-block { display: block; }
/* Mobile menu: "Back to menu" at the top of an audience panel (Student / Parents / Advisors). */
.aud-back { display: none; }
@media (max-width: 1080px) {
  .aud-back {
      display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
      padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 999px;
      background: var(--paper); color: var(--ink); font: 700 15px/1 var(--display); cursor: pointer;
  }
  .aud-back:hover, .aud-back:focus-visible { background: var(--ink); color: var(--paper); }
}
/* ==========================================================================
   Accessibility (WCAG 2.2 AA)
   ========================================================================== */
/* Focus ring: dark on light backgrounds, orange on dark (3:1 against both). */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible, .hdr .util :focus-visible, .ftr :focus-visible, .btn:focus-visible:not(.btn-2) { outline-color: var(--a1); }
main:focus { outline: none; }
/* Skip link: clearly visible when focused. */
.skip:focus { left: 12px; top: 12px; border-radius: 12px; outline: 3px solid var(--a1); outline-offset: 2px; }
/* Sticky header: keep focused elements, form errors and confirmations clear of it (WCAG 2.4.11). */
html { scroll-padding-top: calc(var(--hdr-h, 0px) + 16px); }