/* grundlag.css — temaets basisudtryk.
 *
 * Filen indeholder INGEN farve-, typografi- eller spacingværdi. Hver eneste
 * står i tokenlaget (_designtokens.genereret.css), som scripts/synk-kilder.sh
 * henter fra sin kilde ved hvert build. Prøven `ingen løse farver i temaet`
 * i test/tokenlag.test.ts afviser en hex- eller rgb()-værdi hvor som helst i
 * denne mappe.
 *
 * Temaets EGNE variabler bærer præfikset --tema-. Det er den eneste måde at se
 * på en linje, om en værdi er facit eller opfundet her.
 *
 * Brydepunkterne skrives med literale pixelværdier, fordi var() ikke virker i
 * en @media-forespørgsel (S13 afsnit 6.1). Tallene er --bp-tablet 600,
 * --bp-desktop 1024 og --bp-desktop-bred 1440 fra tokenlagets afsnit 14, og
 * prøven `brydepunkterne følger tokenlaget` holder dem sammen. */

@import "./_designtokens.genereret.css";
@import "./brand.css";

/* --- Dokumentet ----------------------------------------------------------- */

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

html {
  /* Kunden skal kunne zoome. Ingen maximum-scale, ingen fast rem-størrelse. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: var(--type-broed-m);
  color: var(--tekst-primaer);
  background: var(--dk-graa-25);
}

/* Mobile-first (KR-D-029, S13 afsnit 6.2): basislaget ER mobil. */
.tema-side {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tema-indhold {
  width: 100%;
  max-width: var(--bredde-side);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
  flex: 1 0 auto;
}

@media (min-width: 600px) {
  .tema-indhold {
    padding: var(--sp-6) var(--sp-5);
  }
}

@media (min-width: 1024px) {
  .tema-indhold {
    padding: var(--sp-7) var(--sp-6);
  }
}

/* --- Overskrifter --------------------------------------------------------- */

h1 {
  font: var(--type-display-l);
  /* Versal sættes i komponenten og ikke i tokenet, fordi versal-tekst på
     engelsk bliver markant bredere (tokenlagets afsnit 12). */
  text-transform: uppercase;
  margin: 0 0 var(--sp-5);
}

h2 {
  font: var(--type-display-m);
  margin: 0 0 var(--sp-4);
}

h3 {
  font: var(--type-display-s);
  margin: 0 0 var(--sp-3);
}

/* --- Links ---------------------------------------------------------------- */

a {
  color: var(--dk-roed-dyb);
  text-decoration: underline;
  /* Understregningen er der, fordi farve aldrig må være eneste
     informationsbærer (KR-D-022, KR-SY-021). Den fjernes ikke ved hover. */
  text-underline-offset: 0.15em;
}

/* --- Springlink (WCAG 2.4.1) ---------------------------------------------- */

.tema-springlink {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--dk-hvid);
  color: var(--tekst-primaer);
  border: var(--kant-komponent);
  border-radius: var(--radius-0);
  font: var(--type-broed-m);
  /* Skjult indtil det får fokus — ikke display:none, for så kan det ikke
     tabbes til. */
  transform: translateY(-200%);
}

.tema-springlink:focus {
  transform: translateY(0);
}

/* --- Brandhoved og sidefod ------------------------------------------------ */

.tema-brandhoved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--dk-hvid);
  border-bottom: var(--kant-haar);
}

.tema-brandmaerke {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font: var(--type-display-s);
  color: var(--tekst-primaer);
  text-decoration: none;
  min-height: var(--min-maalflade);
}

.tema-brandmaerke__logo {
  /* Logoet er museets rigtige mærkefil, valgt af brandlaget i brand.css.
     Det er DEKORATIVT her: indgangens navn står som tekst ved siden af, så
     mærket skal ikke annonceres to gange (WCAG 1.1.1). */
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  background-image: var(--tema-indgang-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.tema-brandmaerke__navn {
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
}

.tema-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tema-menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-maalflade);
}

.tema-sidefod {
  padding: var(--sp-6) var(--sp-4);
  background: var(--dk-bordeaux);
  color: var(--paa-moerk-tekst);
  flex: none;
}

.tema-sidefod a {
  color: var(--paa-moerk-tekst);
}

.tema-sidefod__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.tema-sidefod__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-maalflade);
}

/* --- Ø-beholderen --------------------------------------------------------- */

.tema-oe {
  /* En React-ø fylder sin plads, også før den er hydreret, så siden ikke
     hopper når klientkoden lander. */
  display: block;
  width: 100%;
  max-width: var(--bredde-flow);
  margin: 0 auto;
}