/* Activero design tokens
 *
 * The single source for colour, type, spacing, radius and motion across the site and the
 * products. Import it, then use the variables — do not paste hex values into a product.
 *
 *   <link rel="stylesheet" href="https://activero.net/tokens.css">
 *
 * Values are the ones the site already used; where a token had drifted into two values, the
 * majority spelling won. Eight had drifted as of 2026-08-11, including --accent, which existed
 * as both #12857A and #0E6E63 — two greens for one brand.
 */

:root{
  /* ── surfaces ─────────────────────────────────────────────── */
  --ground:#FBFCFB;                    /* page background */
  --panel:#FFFFFF;                     /* cards, raised surfaces */
  --hair:#E3E8E4;                      /* borders, rules */
  --hair-dk:#2C3A44;                   /* borders on dark surfaces */

  /* ── ink ──────────────────────────────────────────────────── */
  --ink:#101B24;                       /* body text, dark sections */
  --ink-2:#1B2A38;                     /* footers on dark */
  --slate:#5A646D;                     /* secondary text */
  --slate-lt:#8A929A;                  /* captions, metadata */

  /* ── brand ────────────────────────────────────────────────── */
  --accent:#12857A;                    /* the green. One green. */
  --accent-ink:#0B5049;                /* links, text on light */
  --accent-lt:#3FB3A5;                 /* accents on dark surfaces */
  --accent-tint:rgba(18,133,122,.08);  /* hover washes */

  /* ── secondary: clay, for contrast panes and pull quotes ──── */
  --clay:#A9662F;
  --clay-ink:#8A531F;
  --clay-tint:rgba(169,102,47,.10);

  /* ── status ───────────────────────────────────────────────── */
  --ok:#0B7A5B;
  --ok-tint:rgba(11,122,91,.10);
  --red:#A2412F;
  --red-tint:rgba(162,65,47,.10);

  /* ── type ─────────────────────────────────────────────────── */
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;   /* headings, pull quotes */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;  /* eyebrows, labels */

  --t-eyebrow:11.5px;    /* uppercase, letter-spacing .2em, mono */
  --t-caption:13.5px;
  --t-body:16px;
  --t-lede:18.5px;
  --t-h3:17px;
  --t-h2:27px;
  --t-h1:clamp(30px,4.6vw,46px);
  --t-display:clamp(34px,5.4vw,58px);   /* front page only */

  --lh-tight:1.1;        /* display and h1 */
  --lh-heading:1.22;
  --lh-body:1.6;
  --ls-tight:-.02em;     /* large serif headings */
  --ls-wide:.2em;        /* mono eyebrows */

  /* ── spacing ──────────────────────────────────────────────── */
  --s-1:6px;
  --s-2:10px;
  --s-3:14px;
  --s-4:20px;
  --s-5:26px;
  --s-6:32px;
  --s-7:44px;
  --s-8:58px;            /* section padding */
  --s-9:76px;

  --wrap:1080px;         /* text-heavy pages may narrow to 1000px */
  --gutter:32px;

  /* ── radius ───────────────────────────────────────────────── */
  --r-sm:4px;
  --r-md:6px;            /* buttons */
  --r-lg:8px;            /* cards */
  --r-xl:10px;           /* images, portraits */
  --r-pill:100px;

  /* ── motion ───────────────────────────────────────────────── */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:.12s;       /* hover lifts */
  --dur-mid:.25s;        /* colour and border transitions */
  --dur-slow:.7s;        /* entrance */
}

/* Motion is decoration. Anything built on these tokens must honour this. */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0s; --dur-mid:0s; --dur-slow:0s; }
}

/* ── Varela Round ──────────────────────────────────────────────────────────
 * Selvhostet, ikke hentet fra Google. Sitet saelger GDPR-raadgivning, og et
 * opslag til fonts.googleapis.com sender besoegendes IP til en tredjepart.
 * Filen er subsat til latin + dansk + de typografiske tegn sitet bruger:
 * 129 tegn, 149 glyffer, 15 KB. Versionsnummeret staar i filnavnet, saa en
 * ny udgave ikke rammer en gammel cache.
 *
 * Skriften har KUN vaegt 400 og INGEN kursiv. Bruges den et sted med
 * font-style:italic, skraastiller browseren den selv - det ser klodset ud paa
 * en rundet skrift. Tag kursiven af i stedet.
 */
@font-face{
  font-family:'Varela Round';
  src:url('/fonts/varela-round-v1.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Ordmaerkets skrift, brugt i overskrifter og menu. Faldbacken er sans, ikke
     serif, saa ombytningen ved indlaesning ikke rykker synligt. */
  --display:'Varela Round', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Ordmaerkets skrift i menuen. Resten af menuen staar nedenfor. */
.nav .lk a{font-family:var(--display);}
/* ── Menuen ───────────────────────────────────────────────────────────────
 * Grunddesignet fra forsiden, valgt 2026-08-21: klaebende, hairline forneden,
 * gennemsigtig bund med blur, og en groen streg der vokser frem under punktet
 * ved hover.
 *
 * Reglerne stod foer i 53 style-blokke i syv indbyrdes forskellige udgaver -
 * 25 sider klaebede, 28 gjorde ikke, /forskning havde 24 px mellem punkterne
 * hvor alle andre havde 22, og fire sider brugte klassen .sitenav i stedet.
 * Det var ikke design, det var drift.
 *
 * Sidens egen .wrap bestemmer stadig bredde og sidepolstring, saa en side med
 * --wrap:1000px beholder sin smallere spalte. Kun de lodrette maal staar her.
 */
.nav{background:var(--ink); position:sticky; top:0; z-index:10;}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:16px; padding-bottom:16px;}
.nav .lk{display:flex; gap:22px; flex-wrap:wrap; justify-content:flex-end;}
.nav .lk a{font-size:14.5px; color:#D3DEDA; font-weight:600; text-decoration:none;
  position:relative; padding-bottom:4px; white-space:nowrap;}
.nav .lk a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  border-radius:2px; background:var(--accent-lt); transition:right .28s var(--ease);}
.nav .lk a:hover{color:#FFFFFF;} .nav .lk a:hover::after{right:0;}
.nav .lk a.active{color:#FFFFFF;} .nav .lk a.active::after{right:0;}
@media(max-width:640px){ .nav .lk{gap:16px; font-size:13px;} }

/* Arkene paa /protokol, /regler og /whitepaper er lavet til at blive printet,
   og en klaebende menu oeverst paa hver printet side hoerer ikke med. Reglen
   stod tre steder; nu gaelder den alle sider, hvilket den lige saa godt kan. */
@media print{ .nav{display:none;} }

/* ── Burgeren og mobil-menuen ──
 * 8-9 punkter ombrydes til tre raekker under ~860 px. Blokken stod byte for
 * byte ens i 52 style-blokke. */
.burger{display:none;}
@media(max-width:860px){
  .nav .wrap{flex-wrap:wrap;}
  .burger{display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 9px; margin:0; flex:none; cursor:pointer;
    background:none; border:0; border-radius:6px; -webkit-tap-highlight-color:transparent;}
  .burger span{display:block; width:100%; height:2px; border-radius:2px; background:#D3DEDA;
    transition:transform .2s ease, opacity .2s ease;}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .js-nav .lk{display:none;}
  .js-nav .lk.open{display:flex; flex-direction:column; align-items:stretch; gap:0;
    flex-basis:100%; width:100%; order:9; margin:10px 0 0; padding:0;
    border-top:1px solid rgba(255,255,255,.16);}
  .js-nav .lk.open a{display:block; padding:13px 0; font-size:16px; font-weight:600;
    white-space:normal; border-bottom:1px solid rgba(255,255,255,.16);}
  .js-nav .lk.open a::after{display:none;}
  .js-nav .lk.open a:last-child{border-bottom:0;}
}


/* ── Sektionsskellet ──
 * Variant L (4 px groen) blev proevet 2026-08-20 og valgt fra igen: for mange
 * groenne linjer ned ad en side med elleve sektioner. Tilbage til haarlinjen.
 *
 * Vaerdien staar HER og ikke i 19 style-blokke, saa den kan skiftes ét sted:
 *   1px solid var(--hair)     som nu
 *   none                      ingen streg, kun luften mellem sektionerne
 *   2px solid var(--accent)   groen, men halvt saa kraftig som variant L */
:root{ --skel:1px solid var(--hair); }

/* ── Ordmaerket i nav'en ──
 * Filen har width="81" height="26" som sin egen stoerrelse, saa browseren
 * reserverer plads foer den er hentet. Her skaleres den, og width:auto skal
 * med - ellers holder browseren bredden fra attributten og traekker maerket
 * ud af form. Ét tal at aendre. */
.nav a[aria-label="Activero"] img{ height:38px; width:auto; }