/* ============================================================
   Cookiesamtykke — Riffs eget udtryk lagt oven på vanilla-cookieconsent 3.1.0.

   Filen står bevidst UDEN FOR samlefilen i riff_css_components(): den skal
   ligge efter bibliotekets egen CSS i kaskaden, og samlefilen er ét håndtag,
   der altid printes før. Rækkefølgen står som afhængigheder i inc/consent.php.

   ── Farveaftalen, som den står i global.css ────────────────────────────
   «Riff har to brandfarver, og de deler ikke arbejde. Blå er handling: alt
   hvad man kan klikke på. Grøn er status og tal.»

   Derfor: knapperne er `--riff`, ikke blæk. Der er INTET grønt i denne
   flade — ikke et flueben, ikke en kontakt, ikke en kant.

   ── Radius ────────────────────────────────────────────────────────────
   Temaet har to: `--radius` (8px) til felter, rækker og kort, `--radius-lg`
   (16px) til den store flade. Biblioteket bruger ÉN variabel,
   `--cc-btn-border-radius`, til både knapper, kategorirækker, deres
   udfoldede tekstblokke og luk-knappen. Stod den på 999px, blev et
   tekstafsnit til en stadionform — og det var dét, der fik modalen til at
   se forkert ud. Den står nu på `--radius`.

   Den ENE undtagelse er kontakten (`--cc-pm-toggle-border-radius`). En
   afbryder er pilleformet, fordi formen ER affordancen; en firkantet
   kontakt ligner et afkrydsningsfelt, der er gået i stykker. Skal den også
   være 8px, er det én linje herunder.

   ── Ingen skygger ─────────────────────────────────────────────────────
   Riff Neon er nær-monokromt og skarpt. Temaets egne flader står på
   hårlinjer, ikke skygger (mega-panelet i c-nav.css:125-126 er
   `--paper-raise` med 1px `--sand-line`). Bibliotekets tre bløde skygger —
   på banneret, på modalen og på kontaktens knop — er slukket herunder og
   erstattet af hårlinjer.

   ── Det bærende krav ──────────────────────────────────────────────────
   «Accepter alle» og «Afvis unødvendige» skal se FULDSTÆNDIG ens ud: samme
   flade, samme tekstfarve, samme grad, samme radius, samme bredde. Det er
   cookiebekendtgørelsens ligevægtskrav, ikke en smagssag — bibliotekets
   default gør afvis-knappen lysegrå, og det er nøjagtig det, Datatilsynets
   Eksempel 3 forbyder. Derfor er hele secondary-sættet sat til de samme
   værdier som primary, og de to knapper styles kun gennem `data-role`.
   Rører du denne fil, så efterprøv de to knapper først.

   «Gem mit valg» er en tredje, svagere handling og har derfor temaets
   ghost-knap (global.css:357) — kant, ingen flade. Den konkurrerer ikke med
   de to svar, og de to svar konkurrerer ikke med hinanden.
   ============================================================ */

:root {
  /* ── Skrift ── */
  --cc-font-family: var(--font);              /* Geist, self-hosted */

  /* ── Flader og tekst ── */
  --cc-bg: var(--paper-raise);                /* #ffffff — hævet flade, som .card */
  --cc-primary-color: var(--ink);             /* #14141a */
  --cc-secondary-color: var(--ink-soft);      /* #55555f — dæmpet tekst */
  --cc-link-color: var(--riff);               /* #2b1fd1 — handling */

  /* ── Kanter og hjørner ── */
  --cc-modal-border-radius: var(--radius-lg); /* 16px */
  --cc-btn-border-radius: var(--radius);      /* 8px: knapper, rækker, felter */
  --cc-pm-toggle-border-radius: 999px;        /* eneste undtagelse — se hovedet */
  --cc-separator-border-color: var(--sand-line);
  --cc-section-category-border: var(--sand-line);
  --cc-footer-border-color: var(--sand-line);
  --cc-cookie-category-block-border: var(--sand-line);
  --cc-cookie-category-block-hover-border: var(--sand-line);

  /* ── Knapper: handling er blå ── */
  --cc-btn-primary-bg: var(--riff);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--riff);
  --cc-btn-primary-hover-bg: var(--riff-deep);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--riff-deep);

  /* Samme vægt. Ikke «næsten samme» — de samme værdier. */
  --cc-btn-secondary-bg: var(--riff);
  --cc-btn-secondary-color: #fff;
  --cc-btn-secondary-border-color: var(--riff);
  --cc-btn-secondary-hover-bg: var(--riff-deep);
  --cc-btn-secondary-hover-color: #fff;
  --cc-btn-secondary-hover-border-color: var(--riff-deep);

  /* ── Sekundære flader ── */
  --cc-cookie-category-block-bg: var(--paper);        /* #f4f3ef */
  --cc-cookie-category-block-hover-bg: var(--sand);   /* #e8e6de */
  --cc-cookie-category-expanded-block-bg: var(--paper-raise);
  --cc-cookie-category-expanded-block-hover-bg: var(--sand-line);
  --cc-footer-bg: var(--paper);
  --cc-footer-color: var(--ink-faint);                /* #6a6a75 */

  /* ── Kontakter ── */
  --cc-toggle-on-bg: var(--riff);
  --cc-toggle-off-bg: var(--sand);
  --cc-toggle-on-knob-bg: var(--paper-raise);
  --cc-toggle-off-knob-bg: var(--paper-raise);
  --cc-toggle-readonly-bg: var(--sand);
  --cc-toggle-readonly-knob-bg: var(--paper-raise);
  --cc-toggle-readonly-knob-icon-color: var(--ink-faint);
  --cc-toggle-enabled-icon-color: #fff;
  --cc-toggle-disabled-icon-color: var(--ink-faint);

  /* ── Øvrigt ──
     Scrimmen er ordret navigationens i c-nav.css:202, så de to gange siden
     bliver dækket, ser ens ud. */
  --cc-overlay-bg: rgba(20, 20, 26, 0.3);
  --cc-webkit-scrollbar-bg: var(--sand-line);
  --cc-webkit-scrollbar-hover-bg: var(--ink-faint);
  --cc-modal-transition-duration: 0.22s;      /* temaets 0.18-0.25s */
  --cc-modal-margin: var(--pad-card);
}

/* ── Grundskrift ────────────────────────────────────────────────────── */

#cc-main {
  font-size: 1rem;
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links: samme tykkelse og samme afstand til grundlinjen som `a` i
   global.css:166. */
#cc-main a {
  color: var(--cc-link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
#cc-main a:hover { color: var(--riff-deep); }

/* Fokusmarkeringen er sitets. Afstanden er trukket ind fra 3px til 2px,
   fordi både banneret og modalen har `overflow: hidden`: en ring med luft
   udenfor bliver skåret af kanten og står tilbage som en løs blå streg. */
#cc-main :focus-visible {
  outline: 3px solid var(--riff);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Biblioteket lægger fokus på en tom `div[tabindex="-1"]`, når en dialog
   åbner. Den er ikke noget, man kan bruge — den skal ikke tegne en ring. */
#cc-main [tabindex="-1"]:focus,
#cc-main [tabindex="-1"]:focus-visible { outline: none; }

/* `#cc-main p { all: unset }` i bibliotekets reset gør et afsnit til inline
   tekst. Teksten i Statistik-afsnittet står i to afsnit og skal være to. */
#cc-main p { display: block; }

/* ── Første lag: banneret ───────────────────────────────────────────── */

#cc-main .cm {
  max-width: 27rem;
  border: 1px solid var(--sand-line);
  box-shadow: none;
}

/* Sideluften er `--pad-card` — den samme inderkant, `.card` har overalt.
   Biblioteket havde 1.3rem skrevet hårdt ind. */
#cc-main .cm__title,
#cc-main .cm__desc,
#cc-main .cm__btns,
#cc-main .cm__links { padding-inline: var(--pad-card); }

#cc-main .cm__texts { padding-top: var(--pad-card); }
#cc-main .cm__btns { padding-block: var(--pad-card); }

/* Overskriften er trin `.d4`: sitets mindste display-grad (global.css:222). */
#cc-main .cm__title {
  font-size: clamp(1.32rem, 1.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Brødteksten er sidens egen grad og linjeafstand, i manchettens farve og
   sperring (`.lede`, global.css:277) — ikke bibliotekets 0.9em. */
#cc-main .cm__desc {
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--ink-soft);
  text-wrap: pretty;
}
#cc-main .cm__title + .cm__desc { margin-top: 0.7em; }

/* Knappernes mål ligger mellem `.btn` (3rem) og `.btn-sm` (2,5rem): 2,75rem
   er 44px, og 44px er det mål, en tommelfinger rammer. Grad, vægt og
   sperring er `.btn`s egne. Radius er temaets `--radius`, ikke pillen. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  min-height: 2.75rem;
  padding: 0.7rem 1.2rem;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

/* Luften mellem de to svar og ned til «Indstillinger». */
#cc-main .cm--inline .cm__btn + .cm__btn { margin-left: 0.5rem; }
#cc-main .cm__btn-group + .cm__btn-group { margin-top: 0.75rem; }

/* «Indstillinger» er det TREDJE valg og må ikke ligne de to første. Begge
   svar står allerede som ligeværdige knapper; det her er vejen til
   detaljerne, og det er et link, ikke et svar. */
#cc-main .cm__btn[data-role="show"] {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
  min-height: 2rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  /* Knapgruppen er et gitter med lige brede spor, så en knap fylder hele
     bredden og centrerer sin tekst. Et link gør ikke det: det starter, hvor
     teksten ovenfor starter, og fylder kun sig selv. */
  justify-self: start;
  text-align: left;
}
#cc-main .cm__btn[data-role="show"]:hover {
  background: transparent;
  border-color: transparent;
  color: var(--riff);
}

/* Fodlinjen med de to politik-links: sitets finskrift (`.fine`). */
#cc-main .cm__footer { padding-block: 0.7rem; }
#cc-main .cm__links { font-size: 0.875rem; line-height: 1.5; }

/* ── Andet lag: indstillingerne ─────────────────────────────────────── */

/* Biblioteket tvinger modalen op i fuld skærmhøjde (`height: calc(100% -
   2em)`), uanset hvor lidt der står i den. Det var den tomme luft mellem
   «Mere om det» og bundlinjen. Højden følger nu indholdet og stopper først,
   når den løber tør for skærm. */
#cc-main .pm--box {
  height: auto;
  max-height: min(37.5em, calc(100% - 2 * var(--cc-modal-margin)));
}

#cc-main .pm {
  border: 1px solid var(--sand-line);
  box-shadow: none;
}

#cc-main .pm__header { border-bottom: 1px solid var(--sand-line); }

#cc-main .pm__title {
  font-size: clamp(1.32rem, 1.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Luk-knappen var en fyldt cirkel i knapfarven og dominerede hele toppen.
   Nu er den temaets ghost-knap i lille: kant, ingen flade. */
#cc-main .pm__close-btn {
  background: transparent;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  height: 2.25rem;
  width: 2.25rem;
}
#cc-main .pm__close-btn svg { stroke: var(--ink-soft); }
#cc-main .pm__close-btn:hover {
  background: var(--paper);
  border-color: var(--ink);
}
#cc-main .pm__close-btn:hover svg { stroke: var(--ink); }

#cc-main .pm__section-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.014em;
}

#cc-main .pm__section-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Statistik-afsnittet står i to afsnit: hvad der måles, og hvem der får det
   at se. Graden arves; kun luften imellem mangler. */
#cc-main .pm__section-desc p + p { margin-top: 0.9em; }

/* Chevronen sad i en beige cirkel, der ikke betyder noget. Cirklen er væk;
   pilen står alene, og titlen rykker tilsvarende ind. */
#cc-main .pm__section--expandable .pm__section-arrow {
  background: transparent;
  border-radius: 0;
  left: 1.1em;
}
#cc-main .pm__section--expandable .pm__section-arrow svg { stroke: var(--ink-faint); }
#cc-main .pm__section--expandable .pm__section-title { padding-left: 2.7em; }

/* Tælleren ved siden af en kategori er en etiket, ikke en handling. Den må
   derfor ikke bære handlingsfarven. */
#cc-main .pm__badge {
  background: var(--sand);
  color: var(--ink-soft);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 500;
}
#cc-main .pm__service-counter {
  background: var(--sand);
  color: var(--ink-soft);
}

/* «Gem mit valg» er den tredje, svagere handling: temaets ghost-knap
   (global.css:357). Kant, ingen flade — så den ikke konkurrerer med de to
   svar, og de to svar ikke konkurrerer med hinanden. */
#cc-main .pm__btn[data-role="save"] {
  background: transparent;
  border-color: var(--sand-line);
  color: var(--ink);
}
#cc-main .pm__btn[data-role="save"]:hover {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}

/* ── Kontakterne ────────────────────────────────────────────────────── */

/* Knoppen havde en blød skygge. Den er væk; i stedet en hårlinje, så den
   hvide knop kan ses på den lyse fra-flade. */
#cc-main .toggle__icon-circle {
  box-shadow: 0 0 0 1px var(--sand-line);
}
#cc-main .toggle__icon { box-shadow: 0 0 0 1px var(--sand-line); }
#cc-main .section__toggle:checked ~ .toggle__icon {
  box-shadow: 0 0 0 1px var(--riff);
}
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  box-shadow: none;
}

/* Fra: krydset skal kunne ses på sand. */
#cc-main .toggle__icon-off svg { stroke: var(--ink-faint); }
/* Til: fluebenet står hvidt på blåt. */
#cc-main .toggle__icon-on svg { stroke: #fff; }

/* Låst: «Nødvendige» står i TIL-position, men dæmpet — den er slået til, og
   den kan ikke slås fra. Forskellen på låst og fra er derfor ikke kun en
   farve: knappen står til højre, og hele kontakten er tonet ned. */
#cc-main .section__toggle:disabled ~ .toggle__icon { opacity: 0.62; }
#cc-main .section__toggle:checked:disabled ~ .toggle__icon {
  background: var(--sand);
  box-shadow: 0 0 0 1px var(--sand-line);
}
#cc-main .section__toggle:checked:disabled ~ .toggle__icon svg {
  stroke: var(--ink-faint);
}

/* ── Cookietabellen ─────────────────────────────────────────────────── */

/* Læses som en tabel i brødteksten. Tallene er `.prose table` i
   c-prose.css: 0,95 grad, sandfarvet hoved, hårlinje under hver række,
   0,65/0,7rem celleluft. */
#cc-main .pm__table { font-size: 0.95em; }
#cc-main .pm__table-th {
  font-weight: 600;
  color: var(--ink);
  background: var(--sand);
}
#cc-main .pm__table-th,
#cc-main .pm__table-td { padding: 0.65rem 0.7rem; }

/* ── Små skærme ─────────────────────────────────────────────────────── */

/* Biblioteket sætter selv `--cc-modal-margin` på `#cc-main` her — ikke på
   `:root` — så vores skal stå samme sted for at nå frem. Under 640px lægger
   det også selv banneret ud i fuld bredde og stabler de to svar i lige
   brede, fuldbredde spor (med !important), så ligevægten holder af sig
   selv. Tilbage er sideluften og knaphøjden. */
@media screen and (max-width: 640px) {
  #cc-main { --cc-modal-margin: 0.75rem; }

  #cc-main .cm { max-width: none; }
  #cc-main .cm__texts { padding-top: 1.1rem; }
  #cc-main .cm__btns { padding-block: 1.1rem; }

  #cc-main .cm__btn,
  #cc-main .pm__btn { min-height: 3rem; }
  #cc-main .cm__btn[data-role="show"] { min-height: 2.25rem; }

  #cc-main .pm--box { max-height: calc(100% - 2 * var(--cc-modal-margin)); }
}

/* Sitet respekterer prefers-reduced-motion overalt; biblioteket slår selv
   sine egne overgange fra, men knappernes er vores egen. */
@media (prefers-reduced-motion: reduce) {
  #cc-main .cm__btn,
  #cc-main .pm__btn { transition: none; }
}