/*!
 * D2 Consent (claude) — banneret. Version 1.2.0
 *
 * 1.1.0 var et hvidt kort med grå hårstreg. Det så ud som et plugin, ikke som
 * Digital2. Denne udgave taler sitets eget sprog: det mørke panel fra foden
 * og helten, Montserrat i overskriften, orange som accent.
 *
 * KORTET ER MØRKT, FORDI SITET ER DET
 *   Sitets fod (.d2d-footer) er #1a1a1a, og helten er lige så mørk. Et mørkt
 *   banner læses derfor som en del af siden frem for noget lagt ovenpå.
 *   Selve kortet er #292929 og altså et trin lysere end foden — den
 *   almindelige måde at vise en hævet flade i et mørkt design.
 *
 * DE TO VALGKNAPPER ER NU LIGE TUNGE
 *   I 1.1.0 var "Tillad alle" fyldt og "Kun nødvendige" havde kant. Det er
 *   almindelig praksis og accepteres, men det ER en forskel i vægt, og den
 *   peger på accept. Nu er begge fyldte, lige store, med samme skriftvægt:
 *   orange og hvid. Der er ingen vej der er lettere end den anden.
 *
 * KONTRAST — regnet, ikke husket. Alt mod kortet #292929:
 *   Titel hvid                              14,55:1
 *   Brødtekst #dddddd                       10,71:1
 *   Beskrivelse #bbbbbb                      7,58:1
 *   Politiklink #fc8902                      6,04:1
 *   Fokusring hvid                          14,55:1
 *   Kortets kant mod kortet / mod foden      4,16:1 / 4,98:1
 *   Knap "Tillad alle"   #1a1a1a på #fc8902  7,23:1
 *   Knap "Kun nødvendige" #1a1a1a på hvid   17,40:1
 *
 *   Hvid tekst på #fc8902 ville være 2,41:1 og falder igennem. Det er derfor
 *   de orange knapper her har mørk tekst, selv om sitets øvrige orange knapper
 *   bruger hvid. Fejlen ligger i de øvrige knapper, ikke i disse.
 */

.d2cn {
	position: fixed;
	z-index: 999999;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px;
	/* Ingen baggrund der fanger klik. Banneret spærrer ikke for siden:
	   der måles intet, før der er svaret, så der er intet at spærre for. */
	pointer-events: none;
	display: flex;
	justify-content: center;
}

.d2cn:focus {
	outline: none;
}

.d2cn__kort {
	pointer-events: auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 760px;
	background: var(--d2-ink-body, #292929);
	color: #dddddd;
	/* Så browseren tegner afkrydsningsfelter og rullepanel til en mørk flade.
	   Uden dette bliver felterne lyse kasser midt i det mørke kort. */
	color-scheme: dark;
	/* KANTEN ER IKKE PYNT.
	   Ruller man ned til foden, ligger banneret oven på .d2d-footer, som er
	   #1a1a1a. Et mørkt kort på en mørk fod smelter sammen — jeg så det selv
	   i browseren. Og en lysere kortfarve løser det ikke: #292929 mod #1a1a1a
	   er 1,20:1, og selv #333333 kommer kun op på 1,38:1. Der er ingen
	   kortfarve der kan bære adskillelsen alene.
	   Kanten kan. Hvid 45% bliver #898989, som giver 4,16:1 mod kortet og
	   4,98:1 mod foden. Begge over WCAG's 3:1 for det, der skal kunne
	   identificere en komponent. */
	border: 1px solid rgba(255, 255, 255, 0.45);
	/* Den orange kant foroven er det eneste sted, brandfarven bærer noget
	   alene. Den binder banneret til sitet uden at konkurrere med knapperne. */
	border-top: 3px solid var(--d2-orange, #fc8902);
	border-radius: var(--d2-radius-lg, 12px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	padding: 22px 24px;
	font-family: var(--d2-font-body, Arial, Helvetica, sans-serif);
	font-size: 15px;
	line-height: 1.55;
}

.d2cn__titel {
	margin: 0 0 10px;
	font-family: var(--d2-font-display, 'Montserrat', Arial, sans-serif);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.d2cn__brod {
	margin: 0 0 18px;
	/* Ingen max-width.
	   Her stod 62ch, som på et 760 px kort blev til 517 px — altså 73 % af
	   bredden, med et tomt bælte ude til højre. Reglen var sat af hensyn til
	   læselinjens længde, og det hensyn er rigtigt i en artikel. Her er det
	   tre linjer i et banner, og den synlige ubalance kostede mere, end den
	   kortere læselinje gav. Teksten følger nu kortets egen polstring. */
	color: #dddddd;
}

/* ------------------------------------------------------------------ panel */

.d2cn__panel {
	margin: 0 0 18px;
	/* Skillelinjerne er DEKORATIVE. WCAG 1.4.11's krav på 3:1 gælder det, der
	   skal kunne identificere en komponent; hver række kendes på sit eget
	   afkrydsningsfelt og sin egen overskrift, ikke på stregen. Derfor er en
	   diskret linje det rigtige her — en kraftig ville støje. */
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.d2cn__panel[hidden] {
	display: none;
}

.d2cn__raekke {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.d2cn__raekke:last-child {
	border-bottom: 0;
}

.d2cn__raekke input[type="checkbox"] {
	/* 20px er stort nok til at kunne rammes med en finger, og
	   flex-shrink: 0 forhindrer at det klemmes sammen på en smal skærm. */
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--d2-orange, #fc8902);
	cursor: pointer;
}

.d2cn__raekke input[type="checkbox"]:disabled {
	cursor: default;
	/* Nødvendige cookies kan ikke slås fra. Feltet er låst, men skal stadig
	   kunne ses — et helt udvisket felt ligner en fejl. */
	opacity: 0.8;
}

.d2cn__tekster {
	min-width: 0;
}

.d2cn__navn {
	display: block;
	font-weight: 700;
	color: #ffffff;
	cursor: pointer;
}

.d2cn__raekke input:disabled + .d2cn__tekster .d2cn__navn {
	cursor: default;
}

.d2cn__om {
	margin: 3px 0 0;
	font-size: 14px;
	/* Samme grund som i .d2cn__brod: ingen max-width. */
	color: #bbbbbb;
}

/* --------------------------------------------------------------- knapper */

.d2cn__handlinger {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.d2cn__btn {
	box-sizing: border-box;
	min-height: 48px;
	padding: 13px 22px;
	border: 0;
	border-radius: var(--d2-radius-md, 6px);
	font-family: var(--d2-font-body, Arial, Helvetica, sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--d2-transition, 0.2s ease),
		color var(--d2-transition, 0.2s ease);
}

.d2cn__btn[hidden] {
	display: none;
}

/* De to valg. Begge FYLDTE, samme størrelse, samme skriftvægt, samme
   mindstebredde. At afvise skal ikke bare være muligt — det skal være lige
   så let og lige så synligt som at acceptere. */
.d2cn__btn--primaer,
.d2cn__btn--sekundaer {
	/* De vokser og deler den plads, der er tilbage, når "Vælg selv" har fået
	   sin. Her stod 0 1 auto med en fast mindstebredde, og så endte rækken
	   med 209 px tomt ude til højre. De to er stadig nøjagtig lige brede —
	   samme grundbredde og samme vækstfaktor — så den ene vej er ikke
	   lettere end den anden. */
	flex: 1 1 190px;
}

.d2cn__btn--primaer {
	background: var(--d2-orange, #fc8902);
	color: var(--d2-ink-strong, #1a1a1a);
}

.d2cn__btn--primaer:hover {
	background: var(--d2-orange-hover, #e57a00);
}

.d2cn__btn--sekundaer {
	background: #ffffff;
	color: var(--d2-ink-strong, #1a1a1a);
}

.d2cn__btn--sekundaer:hover {
	background: #e8e8e8;
}

.d2cn__btn--tredje {
	background: transparent;
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 13px 14px;
	min-width: 0;
	/* Her stod margin-left: auto, som skubbede knappen helt ud til højre og
	   efterlod 233 px tomt hul midt i rækken. Tanken var at adskille den fra
	   de to valg, fordi den ikke selv afgør noget. Men et hul er ikke en
	   adskillelse — det er bare et hul. Den står nu ved siden af de andre og
	   skiller sig ud ved at være understreget og uden flade. */
}

.d2cn__btn--tredje:hover {
	color: var(--d2-orange, #fc8902);
}

/* Hvid ring med afstand. Afstanden gør, at ringen altid ligger UDEN FOR
   knappen — altså på det mørke kort, hvor hvid giver 17,40:1. Lå den oven på
   den orange knap, ville den være 2,41:1 og reelt usynlig. */
.d2cn__btn:focus-visible,
.d2cn__raekke input[type="checkbox"]:focus-visible,
.d2cn__politik a:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Browsere uden :focus-visible skal stadig vise fokus. */
.d2cn__btn:focus {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.d2cn__btn:focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------- politik */

.d2cn__politik {
	margin: 16px 0 0;
	font-size: 14px;
}

.d2cn__politik a {
	color: var(--d2-orange, #fc8902);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.d2cn__politik a:hover {
	color: #ffffff;
}

/* -------------------------------------------------- tilbagekaldelsesindgang */

/* Indgangen lægges i sitets egen politikrække i foden, nav.d2d-footer-policy.
   Derfor efterligner den nøjagtig de links, der i forvejen står der:
   12px, vægt 500, hvid 55%, ingen understregning. Den skal se ud som om den
   altid har været der — ikke som noget der er klistret på bagefter. */
.d2cn-kaldfrem {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

.d2cn-kaldfrem--politik {
	font-family: var(--d2-font-body, Arial, Helvetica, sans-serif);
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
}

.d2cn-kaldfrem--politik:hover {
	color: #ffffff;
}

/* Fandt vi ikke politikrækken, men dog en fod. */
.d2cn-kaldfrem--fod {
	display: block;
	margin: 10px auto;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Ingen fod overhovedet. Indgangen må ikke mangle — uden den kan samtykket
   ikke trækkes tilbage, og så er accepten ikke gyldig. */
.d2cn-kaldfrem--fast {
	position: fixed;
	z-index: 999998;
	left: 12px;
	bottom: 12px;
	background: var(--d2-ink-body, #292929);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--d2-radius-sm, 4px);
	padding: 8px 12px;
	font-size: 13px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.d2cn-kaldfrem:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Mens banneret står, får siden plads i bunden, så det ikke dækker foden.
   Uden dette kan et banner skjule netop de kontaktoplysninger, en offentlig
   indkøber leder efter.

   PLADSEN LIGGER PÅ <html>, IKKE PÅ <body>, OG DET ER MÅLT FREM.
   Først lagde jeg den på body. Ruller man så helt ned, bliver der en hvid
   strimmel under den mørke fod — body har hvid baggrund, og polstringen
   hører til body's egen kasse. Det så jeg i browseren.
   Når <html> får en baggrund, holder body op med at sende sin egen videre
   til lærredet, og pladsen under body tegnes med html's farve i stedet.
   Den sættes til fodens egen #1a1a1a, så strimlen forsvinder i foden.
   Alt dette gælder kun mens banneret står; klassen fjernes ved et valg. */
html.d2cn-aaben {
	scroll-padding-bottom: 260px;
	padding-bottom: 260px;
	background: var(--d2-ink-strong, #1a1a1a);
}

/* 1.1.0 lagde pladsen på body. Den regel ligger stadig i LiteSpeeds samlede
   CSS, indtil bundtet er genskabt efter en udrulning, og i det tidsrum ville
   siden få pladsen TO gange — 520 px i stedet for 260. Jeg så det i testen.
   Derfor nulstilles den gamle regel udtrykkeligt. */
html.d2cn-aaben body {
	padding-bottom: 0;
}

/* ------------------------------------------------------------------ smalt */

@media (max-width: 640px) {
	.d2cn {
		padding: 10px;
	}

	.d2cn__kort {
		padding: 18px 16px;
		font-size: 14px;
		/* Banneret må ikke fylde hele skærmen på en lille telefon. Kan
		   indholdet ikke være der, skal det kunne rulles — ikke klippes. */
		max-height: 82vh;
		overflow-y: auto;
	}

	.d2cn__titel {
		font-size: 18px;
	}

	.d2cn__handlinger {
		gap: 10px;
	}

	.d2cn__btn--primaer,
	.d2cn__btn--sekundaer {
		/* Fuld bredde hver, så de to valg står lige under hinanden og
		   fortsat er lige store. */
		flex: 1 1 100%;
		min-width: 0;
	}

	.d2cn__btn--tredje {
		flex: 1 1 100%;
		margin-left: 0;
		text-align: center;
	}

	html.d2cn-aaben {
		padding-bottom: 360px;
	}
}

/* ----------------------------------------------------------- hensyn og print */

@media (prefers-reduced-motion: reduce) {
	.d2cn__btn {
		transition: none;
	}
}

@media print {
	.d2cn,
	.d2cn-kaldfrem--fast {
		display: none !important;
	}

	html.d2cn-aaben {
		padding-bottom: 0;
		background: none;
	}
}

/* Nogle besøgende kører med tvungen høj kontrast. Så tegner systemet
   farverne om, og kanterne skal stadig kunne ses. */
@media (forced-colors: active) {
	.d2cn__kort {
		border: 1px solid CanvasText;
	}

	.d2cn__btn {
		border: 2px solid ButtonText;
	}
}