/*
Theme Name: D-T-I
Theme URI: https://d-t-i.dk/
Author: Dansk Transport Industri
Author URI: https://d-t-i.dk/
Description: Blok-tema for Dansk Transport Industri, bygget efter design/DESIGN.md og mockupperne i design/mockups/. Tokens ligger i theme.json; kategoriaccenter i inc/class-dti-accents.php. Selvstændig fork af Twenty Twenty-Five.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dti
Tags: full-site-editing, block-patterns, accessibility-ready, custom-colors, custom-logo, editor-style, translation-ready, wide-blocks, block-styles

Fork af Twenty Twenty-Five (https://wordpress.org/themes/twentytwentyfive/),
(C) the WordPress team, GNU GPL v2 eller senere.
*/

/*
 * Designtokens ligger i theme.json og udstilles af WordPress som
 * `--wp--preset--*` og `--wp--custom--*`. Kategoriaccenten kommer fra
 * inc/class-dti-accents.php som `--dti-accent`.
 *
 * Regel: ingen hex-værdier i denne fil ud over de tre gule nuancer, der ikke
 * findes i kernepaletten (hover/active). Alt andet skal gå gennem en token,
 * ellers overlever det ikke en farvejustering.
 */

/* -------------------------------------------------------------------------
 * Grundlag
 * ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*
 * Lange danske sammensatte ord må ikke skubbe layoutet ud i siden.
 *
 * Orddeling slås kun til på de mindre overskrifter, hvor ord som
 * "transportbåndsudskiftning" ellers bryder et smalt kort.
 *
 * h1 og h2 må hverken orddeles eller brydes midt i et ord. `overflow-wrap:
 * break-word` stod tidligere på alle fire niveauer, og den deler uden bindestreg
 * og på et vilkårligt sted: kategorititlen stod som "Transportbån" / "d". En
 * overskrift, der ikke kan være der, skal løses med skriftstørrelsen — se
 * .dti-hero--lys .wp-block-post-title — ikke ved at hakke ordet over.
 */
h3,
h4 {
	hyphens: auto;
	overflow-wrap: break-word;
}

/*
 * Synligt fokus er et WCAG 2.2 AA-krav (2.4.7 + 2.4.11), og DESIGN.md siger
 * udtrykkeligt: ikke browserens standard. Petrol med offset, så ringen også
 * kan ses på gule og mørke flader.
 */
:focus-visible {
	outline: 3px solid var(--dti-fokusfarve, var(--wp--custom--focus));
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/*
 * Fokusringen skifter farve på mørke flader.
 *
 * Petrol er den rigtige farve på lys og gul bund (8,70:1 mod elfenben, 6,54:1
 * mod gul), men målt mod den næsten sorte flade giver den kun 1,92:1 — ringen
 * var reelt usynlig i sidefoden og på CTA-båndet, hvor der sidder både links og
 * en knap. WCAG 1.4.11 kræver 3:1 for et grafisk element som denne ring.
 *
 * Gul giver 12,57:1 mod sort. Farven arves ned, så alt fokusbart inde i et
 * mørkt område får den uden at skulle nævnes hver for sig.
 */
.dti-morkt,
.dti-footer,
.dti-cta-baand {
	--dti-fokusfarve: var(--wp--preset--color--dti-gul);
}

/*
 * På mørke flader skifter ringen til gul for at bevare kontrasten.
 *
 * De lyse heroer er undtaget. Uden undtagelsen ramte reglen også dem, og så
 * stod fokusringen gul på elfenben — 1,33:1, altså langt under de 3:1, WCAG
 * 1.4.11 kræver af et grafisk element. Det gjaldt knappen "Få hjælp til valg"
 * på alle atten kategorisider og hele den nye lyse fotohero. Der er petrol den
 * rigtige farve (8,70:1), og den kommer fra standardreglen ovenfor.
 */
.dti-morkt :focus-visible,
.dti-hero:not(.dti-hero--lys) :focus-visible {
	outline-color: var(--wp--preset--color--dti-gul);
}

/*
 * Læsetekst: cirka 70–75 tegn pr. linje.
 *
 * WordPress' constrained-layout centrerer alle børn med `margin-left: auto
 * !important`. Uden `!important` her ville manchetten stå midt i spalten i
 * stedet for at flugte med overskriften — det er den eneste måde at vinde over
 * kernens egen regel på.
 */
.dti-maal {
	max-width: var(--wp--custom--container--text);
	/*
	 * Venstremargenen regnes ud, så teksten starter præcis dér, hvor en
	 * indholdsbred blok ville starte. `margin-left: 0` ville skyde den ud til
	 * kanten af den fuldbrede sektion i stedet for at flugte med overskriften.
	 * I en spalte, der allerede er smallere end contentSize, giver max() 0.
	 */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* -------------------------------------------------------------------------
 * Spring til indhold
 * ---------------------------------------------------------------------- */

.dti-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--dti-gul);
	color: var(--wp--preset--color--dti-sort);
	font-weight: 700;
	text-decoration: none;
}

.dti-skip-link:focus {
	left: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
 * Fuldbredde-bånd
 * ---------------------------------------------------------------------- */

/*
 * To farvede bånd efter hinanden skal støde sammen.
 *
 * WordPress lægger blokafstand som margen mellem søskende. På kontaktsiden
 * stod "Sådan hjælper vi dig hurtigst" og infokortene begge på elfenben, og de
 * 24px margen imellem blev en stribe af sidens egen bund — det ser ud som en
 * fejl i stedet for en pause. Båndenes egen indvendige polstring giver
 * rigeligt luft; det er selve farveskiftet, der skal markere overgangen.
 */
.wp-block-group.alignfull.has-background + .wp-block-group.alignfull.has-background {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Søgefelt
 * ---------------------------------------------------------------------- */

/*
 * Et enkelt inputfelt skal ikke være 1200px bredt.
 *
 * Feltet står i 404-siden, der er en fuldbredde-sektion, og strakte sig over
 * hele indholdsbredden. Et søgeord fylder sjældent mere end en håndfuld ord,
 * og et felt, der er fem gange bredere end sit indhold, ser ud som om det
 * mangler noget. 34rem svarer til manchettens læsemål lige ovenover.
 */
/*
 * Bredden sættes på selve formularen inde i blokken, ikke på blokken.
 *
 * Blokken skal blive i sidens midterstillede indholdsspalte — får den selv en
 * max-width, centrerer constrained-layoutet den inden i spalten, og nulstiller
 * man margenen, hopper feltet helt ud til sidens polstringskant, 96px til
 * venstre for overskriften. Formularen indeni er fri af begge dele.
 */
.dti-soeg .wp-block-search__inside-wrapper {
	max-width: 34rem;
}

/* -------------------------------------------------------------------------
 * Label — lille versallabel over en overskrift
 * ---------------------------------------------------------------------- */

.dti-label {
	font-family: var(--wp--preset--font-family--broedtekst);
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/*
 * Labelen er petrol på lys flade — ikke kategoriens accentfarve.
 *
 * Mockup 02 og 03 viser labelen i accentblå, og det virker for transportbånd
 * (#3E6F91 giver 5,22:1). Men fire af de atten accenter i DESIGN.md er for lyse
 * til at bære tekst: kuglelejer 2,49:1, løftestropper og olie/smøremidler
 * 2,83:1 og personlige værnemidler 2,86:1 — alle mod kravet på 4,5:1.
 *
 * Accenten bruges derfor kun som 4 px kant og ikonfarve, hvor den ikke skal
 * læses. Petrol giver 9,49:1 og er visuelt tæt på mockuppens blå.
 */
.dti-label {
	color: var(--wp--preset--color--dti-petrol);
}

/* På mørk flade er labelen gul. */
.dti-morkt .dti-label,
.dti-hero .dti-label {
	color: var(--wp--preset--color--dti-gul);
}

/*
 * Men ikke på den lyse hero.
 *
 * Reglen ovenfor rammer alle `.dti-hero`, og kategorisidens hero er lys. Der
 * stod "PRODUKTER" i gul på elfenben — 1,33:1, hvor WCAG 2.1 AA kræver 4,5:1
 * for tekst under 24px. Petrol giver 8,70:1 og er den samme farve, labelen har
 * alle andre steder på lys flade.
 */
.dti-hero--lys .dti-label {
	color: var(--wp--preset--color--dti-petrol);
}

/* -------------------------------------------------------------------------
 * Topbjælke og sidehoved
 * ---------------------------------------------------------------------- */

.dti-topbar {
	background-color: var(--wp--preset--color--dti-gul);
	color: var(--wp--preset--color--dti-sort);
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 700;
}

/*
 * DESIGN.md: "Tekst på gul skal altid være sort." Links i topbjælken arver
 * derfor sort og markeres med understregning ved hover — ikke med farveskift.
 */
.dti-topbar a {
	color: var(--wp--preset--color--dti-sort);
	text-decoration: none;
}

.dti-topbar a:hover,
.dti-topbar a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dti-topbar .wp-block-group {
	row-gap: var(--wp--preset--spacing--10);
}

/* Prikseparatorerne mellem telefon, mail og by. */
.dti-topbar-sep {
	opacity: 0.55;
	padding-inline: var(--wp--preset--spacing--20);
}

.dti-header {
	background-color: var(--wp--custom--surface--card);
	border-bottom: 4px solid var(--wp--preset--color--dti-gul);
}

/* Logolockup: mærke plus ordmærke på to linjer. */
.dti-logo {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	text-decoration: none;
}

.dti-logo img,
.dti-logo svg {
	height: clamp(2.75rem, 5vw, 3.5rem);
	width: auto;
	display: block;
}

.dti-header .wp-block-site-title a {
	color: var(--wp--preset--color--dti-sort);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------------------- */

.dti-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--broedtekst);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--ui-small);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/*
 * Understregningen vokser ud fra midten i stedet for at blinke frem. Den
 * ligger som pseudoelement, så den kan animeres uden at flytte teksten.
 */
.dti-header .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--dti-sort);
	text-decoration: none;
	padding-block: var(--wp--preset--spacing--30);
}

.dti-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background-color: var(--wp--preset--color--dti-gul);
	transform: scaleX(0);
	transition: transform var(--wp--custom--duration--normal) var(--wp--custom--easing--standard);
}

.dti-header .wp-block-navigation-item__content:hover::after,
.dti-header .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* Aktuel side markeres med streg — ikke med farve alene (WCAG 1.4.1). */
.dti-header .current-menu-item > .wp-block-navigation-item__content::after,
.dti-header .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/*
 * Hamburgerknap og luk-knap skal kunne rammes med en tommelfinger.
 *
 * Bemærk: her sættes bevidst ingen `display`. WordPress skjuler selv
 * hamburgeren over 600px med `display: none`, og en `display`-erklæring med
 * `.dti-header` foran ville vinde på specificitet og tvinge knappen frem på
 * desktop ved siden af den almindelige menu.
 */
.dti-header .wp-block-navigation__responsive-container-open,
.dti-header .wp-block-navigation__responsive-container-close {
	min-width: var(--wp--custom--min-tap-target);
	min-height: var(--wp--custom--min-tap-target);
	align-items: center;
	justify-content: center;
}

.dti-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.dti-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--dti-gul);
	font-size: var(--wp--preset--font-size--titel-m);
	border-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Knapper
 *
 * Farverne kommer fra theme.json; her ligger kun bevægelsen, som theme.json
 * ikke kan udtrykke.
 * ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
		transform var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
		box-shadow var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(17, 17, 17, 0.18);
}

/* Ved klik sætter knappen sig igen, så trykket føles fysisk. */
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

/*
 * Outline-knappen vendes om på mørk flade.
 *
 * theme.json definerer varianten med sort kant og sort tekst, hvilket er
 * rigtigt på lys bund. På 404-siden står den samme knap på den næsten sorte
 * hero — sort på sort — og var reelt usynlig: målt var hele knapfladen #111111
 * uden så meget som en kant.
 *
 * Forsidens hero slipper for fejlen, fordi den er en cover-blok, og core sætter
 * selv `color: #fff` der. Et almindeligt mørkt gruppe-hero gør ikke, så farverne
 * skal sættes her.
 */
.dti-hero:not(.dti-hero--lys) .is-style-outline .wp-block-button__link,
.dti-morkt .is-style-outline .wp-block-button__link {
	color: #FFFFFF;
	border-color: #FFFFFF;
	background-color: transparent;
}

/* Den lyse outline-knap på mørk flade fyldes ved hover. */
.dti-hero:not(.dti-hero--lys) .is-style-outline .wp-block-button__link:hover,
.dti-morkt .is-style-outline .wp-block-button__link:hover {
	background-color: #FFFFFF;
	color: var(--wp--preset--color--dti-sort);
}

/* -------------------------------------------------------------------------
 * Brødkrumme
 * ---------------------------------------------------------------------- */

.dti-broedkrumme {
	font-size: var(--wp--preset--font-size--ui-small);
	margin-bottom: var(--wp--preset--spacing--50);
}

.dti-broedkrumme a {
	text-decoration: none;
}

.dti-broedkrumme a:hover {
	text-decoration: underline;
}

/*
 * Aktuel side i brødkrummen markeres med petrol og halvfed — af samme grund
 * som labelen ovenfor kan accentfarven ikke bruges til tekst på alle
 * atten kategorier.
 */
.dti-broedkrumme [aria-current="page"] {
	color: var(--wp--preset--color--dti-petrol);
	font-weight: 600;
}

.dti-hero .dti-broedkrumme,
.dti-morkt .dti-broedkrumme {
	color: var(--wp--custom--surface--border-strong);
}

.dti-hero .dti-broedkrumme a,
.dti-morkt .dti-broedkrumme a {
	color: var(--wp--custom--surface--border-strong);
}

.dti-hero .dti-broedkrumme [aria-current="page"],
.dti-morkt .dti-broedkrumme [aria-current="page"] {
	color: var(--wp--preset--color--dti-gul);
}

/* -------------------------------------------------------------------------
 * Mørke flader
 * ---------------------------------------------------------------------- */

.dti-morkt,
.dti-hero {
	background-color: var(--wp--preset--color--dti-sort);
	color: #FFFFFF;
}

.dti-morkt :where(h1, h2, h3, h4, h5, h6),
.dti-hero :where(h1, h2, h3, h4, h5, h6) {
	color: #FFFFFF;
}

/*
 * Petrol-linkfarven kan ikke læses på næsten sort. På mørke flader bliver
 * links gule med understregning.
 */
.dti-morkt a:where(:not(.wp-element-button)),
.dti-hero a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--dti-gul);
}

.dti-morkt a:where(:not(.wp-element-button)):hover,
.dti-hero a:where(:not(.wp-element-button)):hover {
	color: #FFFFFF;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Hero — dækkende variant (core/cover)
 * ---------------------------------------------------------------------- */

/*
 * Fotoheroen er mørk: hvid tekst på et sort slør.
 *
 * Behandlingen har været forbi en lys udgave og er endt her igen. Historikken
 * er værd at kende, fordi den forklarer, hvorfor tallene er, som de er.
 *
 * Den nye fotoserie er komponeret modsat den gamle: motivet står til højre, og
 * venstresiden er lys — vinduer, hvid væg, blankt gulv. Målt på de seks
 * billeder ligger venstre halvdel på L=0,50–0,68, og de lyseste pixels helt
 * oppe omkring L=0,97 (sRGB 250). Det er dét tal, sløret skal regne imod, ikke
 * gennemsnittet: en overskrift, der tilfældigvis lander hen over et vindue,
 * skal også kunne læses.
 *
 * Hvert element har sit eget krav, og de er ikke ens:
 *
 * - Overskriften er 64px og tæller som stor tekst (WCAG regner fra 24px). Den
 *   skal kun nå 3:1 og klarer sig allerede ved 41 % slør.
 * - Manchetten er 22px og tæller som almindelig tekst. Den kræver 4,5:1, altså
 *   mindst 59 % slør.
 * - Den gule label er 14px og er den strengeste: gul har i sig selv en høj
 *   luminans (L=0,649), så den kræver 64 % slør for at nå 4,5:1.
 *
 * Labelen sætter altså grænsen. 66 % er valgt som det letteste slør, der lader
 * alle tre elementer bestå — ikke som et rundt tal. Sænkes det til 58 %, falder
 * både manchet (4,26:1) og label (3,77:1) igennem, hvilket er målt og ikke
 * beregnet. Hæves det til 74 %, bliver fotoet unødigt mørkt uden at nogen tekst
 * får gavn af det.
 *
 * Den lyse udgave, der stod her indimellem, var teknisk set fejlfri — men et
 * elfenbenslør på 80 % lægger sig som mælk over fotoet. Den mørke behandling
 * lader motivet beholde sin farve og sin kontrast; sløret tager kun lyset.
 */
.wp-block-cover.dti-hero--daekkende {
	color: #FFFFFF;

	/*
	 * Indholdsspaltens venstre kant, regnet ud fra elementets egen bredde.
	 *
	 * Cover-blokkens constrained-layout centrerer sine børn, så et barn med
	 * egen `max-width` bliver centreret i spalten i stedet for at flugte med
	 * resten. Formlen giver den kant, alt i heroen skal flugte med. Den bruges
	 * tre steder — overskriften, manchetten og slørets aftrapning — og står
	 * derfor ét sted frem for at være skrevet af.
	 *
	 * Procenter i en custom property bliver først regnet ud dér, hvor
	 * egenskaben bruges, så `100%` er det enkelte elements egen bredde. Alle
	 * tre elementer ligger i samme fuldbredde-container, så de får samme tal.
	 */
	--dti-hero-venstre: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));

	/*
	 * Hvor teksten senest slutter. Sløret må ikke begynde at aftrappe før her.
	 */
	--dti-hero-tekstslut: calc(var(--dti-hero-venstre) + 46rem);

	/*
	 * Slørets styrke. Standard er 0,70 — se begrundelsen ovenfor.
	 *
	 * Den kan sættes ned pr. hero, fordi fotografierne ikke er lige lyse. Et
	 * fast tal ville enten være for svagt til de lyse eller kvæle de mørke, og
	 * det sidste er netop den fejl, hele omlægningen skulle rette.
	 */
	--dti-hero-slor: 0.70;
}

/*
 * Sløret sættes pr. foto, så de fem heroer ser lige lyse ud.
 *
 * De fem fotografier er ikke i nærheden af at være lige lyse i sig selv. Målt
 * som gennemsnit i tekstfeltet: kontakt 175, forside 164, om os 96, produkter
 * 59 og værksted 48. Med ét fælles slør ville forskellen slå direkte igennem —
 * og gjorde det: kontakt stod synligt lysere end resten.
 *
 * Fordi sløret er sort og lægges oven på fotoet, er den sammensatte flade
 * simpelthen `foto × (1 − slør)`. Målet er sat til sRGB 42, og hvert slør er
 * regnet ud af den formel frem for at være valgt i øjemål. Så lander alle fem
 * på samme lyshed, uanset hvilket foto der ligger bagved.
 *
 * 42 er valgt, fordi det er dét niveau "Om os" allerede lå på — mørkt nok til
 * at hvid tekst står skarpt, lyst nok til at fotoet stadig kan ses. De to lyse
 * fotos trækkes ned, de to mørke får næsten intet slør.
 *
 * Skiftes et foto ud, skal dets gennemsnit måles og sløret regnes om. Ellers
 * falder netop den hero ud af rækken igen.
 */
/*
 * `--dti-hero-slor-mobil` er et andet tal end skrivebordets.
 *
 * Under 48em fylder teksten hele bredden, så der er ingen fri højreside at
 * skåne — hele fotoet ligger bag tekst, og sløret skal derfor kunne bære også
 * de lyseste steder i motivet. Ensretningen af lysheden gælder skrivebordet,
 * hvor de fem heroer ses i forlængelse af hinanden; på en telefon ses de aldrig
 * side om side, og læsbarheden vejer tungest.
 *
 * Selektorerne er bevidst tunge. Standardværdien står på
 * `.wp-block-cover.dti-hero--daekkende`, som har specificitet (0,2,0); en
 * modifikator med bare én klasse (0,1,0) taber til den, uanset rækkefølge.
 * Fejlen var tavs — sløret så plausibelt ud, men alle fem heroer kørte videre
 * på standardens 0,70, og netop den ensretning, klasserne skulle levere,
 * udeblev. Målt gav forside og kontakt 64 mod de øvriges 26–42.
 */
.wp-block-cover.dti-hero--daekkende.dti-hero--slor-81 {
	--dti-hero-slor: 0.81;
	--dti-hero-slor-mobil: 0.68;
}

.wp-block-cover.dti-hero--daekkende.dti-hero--slor-70 {
	--dti-hero-slor: 0.70;
	--dti-hero-slor-mobil: 0.72;
}

.wp-block-cover.dti-hero--daekkende.dti-hero--slor-27 {
	--dti-hero-slor: 0.27;
	--dti-hero-slor-mobil: 0.66;
}

/*
 * Kortere plateau: sløret slipper motivet tidligere.
 *
 * Standardplateauet slutter 46rem inde, hvilket er sat efter det bredest
 * tænkelige tekstelement. Forsidens overskrift er kappet til 44rem og brydes
 * til to linjer, så dens længste linje faktisk slutter 679px inde ved 1440px —
 * der stod altså 177px slør tilbage, som kun dækkede motivet uden at bære
 * tekst.
 *
 * 39rem er 15% kortere. Ved 1440px rykker aftrapningen fra 856px til 745px og
 * frilægger transportbåndet tidligere, mens der stadig er 66px luft efter
 * sidste bogstav.
 *
 * Bindingen er overskriftens faktiske linjelængde, ikke dens max-width. Skiftes
 * forsidens overskrift til en længere tekst, skal afstanden måles igen — se
 * `.dti-hero--daekkende :where(h1)` for målet, den er kappet til.
 */
.wp-block-cover.dti-hero--daekkende.dti-hero--plateau-kort {
	--dti-hero-tekstslut: calc(var(--dti-hero-venstre) + 39rem);
}

.wp-block-cover.dti-hero--daekkende.dti-hero--slor-56 {
	--dti-hero-slor: 0.56;
	--dti-hero-slor-mobil: 0.68;
}

/*
 * Heroens overskrift får et mål.
 *
 * "Find komponenter og løsninger" stod på én linje og løb 814px ud — til 64,9%
 * af skærmbredden ved 1440px. Sløret aftrappede fra 58%, så halen af ordet
 * "løsninger" lå på et næsten blottet foto: målt 4,77:1. Det er lige over
 * AA-kravet på 4,5, men langt fra de 8:1, resten af teksten har, og det holder
 * kun så længe motivet bag netop dét ord er lyst.
 *
 * 44rem holder overskriften inden for slørets fulde styrke ved enhver
 * skærmbredde og er samtidig den rigtige typografiske beslutning: en display-
 * overskrift på over 800px er for lang en linje at læse i ét greb.
 *
 * `margin-left` skal sættes eksplicit og med `!important`. Uden den ville
 * constrained-layout centrere den nu smallere overskrift i spalten, så den
 * ikke længere flugtede med label, manchet og knapper.
 */
.dti-hero--daekkende :where(h1) {
	max-width: 44rem;
	margin-left: var(--dti-hero-venstre) !important;
	margin-right: auto !important;
}

/*
 * Sløret aftrappes mod højre, så motivet står frit.
 *
 * Styrken er flad på 0,70 hele vejen ud til `--dti-hero-tekstslut` og aftrappes
 * først derefter. Fladt, ikke faldende: en tidligere udgave gled fra 0,70 til
 * 0,66 hen over tekstområdet, altså svagest præcis dér, hvor labelen slutter.
 * Det kostede tre af de fem sider deres label — målt 4,32:1 på Produkter og
 * Værksted mod kravet på 4,5. Hældningen gjorde ingen visuel gavn; den flyttede
 * kun kontrast væk fra det eneste sted, den var brug for.
 *
 * Med den flade plateau ligger baggrunden bag labelen på sRGB 76 i værste fald,
 * hvilket giver gul 5,90:1 — margen nok til, at et senere billedskift ikke
 * vælter det.
 *
 * Aftrapningen begynder ved `--dti-hero-tekstslut`, ikke ved en procentdel af
 * skærmbredden. Det er hele pointen: en procent flytter sig i forhold til
 * teksten, hver gang vinduet ændrer størrelse, og netop dét gav 4,77:1 i halen
 * af overskriften ved 1440px. Bundet til indholdsspalten ligger aftrapningen
 * altid 2rem efter, hvor teksten senest kan slutte — ved enhver skærmbredde.
 *
 * Aftrapningen er bevidst kort og går helt i nul. Motivet står i højre
 * trediedel og skal være ubeskåret dér; det var netop den ensartede mørkhed
 * hen over hele fladen, der gjorde den gamle behandling tung.
 *
 * `opacity: 1` er nødvendig: WordPress' `has-background-dim-70` sætter opacity
 * 0,7 på laget, hvilket ellers ville gange sig oven på gradientens egne
 * alfaværdier.
 *
 * DESIGN.md forbyder dekorative gradienter. Denne er ikke dekoration, men et
 * læsbarhedsslør — samme begrundelse som det flade slør, den erstatter.
 */
@media (min-width: 48em) {
	/*
	 * Selektoren er bevidst tung. WordPress' egen regel er
	 * `.wp-block-cover .wp-block-cover__background.has-background-dim-70`
	 * med specificitet (0,3,0); en lettere selektor taber, og `opacity: 0.7`
	 * ville så gange sig oven på gradientens egne alfaværdier.
	 */
	.wp-block-cover.dti-hero--daekkende .wp-block-cover__background.has-background-dim {
		/*
		 * `background-color` skal nulstilles eksplicit og med `!important`.
		 * WordPress' preset-klasse `has-dti-sort-background-color` sætter selv
		 * farven med `!important`, så uden dette ligger gradienten oven på en
		 * helt uigennemsigtig flade, og fotoet forsvinder.
		 */
		background-color: transparent !important;
		background-image: linear-gradient(
			90deg,
			rgba(17, 17, 17, var(--dti-hero-slor)) 0,
			rgba(17, 17, 17, var(--dti-hero-slor)) var(--dti-hero-tekstslut),
			rgba(17, 17, 17, calc(var(--dti-hero-slor) * 0.43)) calc(var(--dti-hero-tekstslut) + 14%),
			rgba(17, 17, 17, calc(var(--dti-hero-slor) * 0.10)) calc(var(--dti-hero-tekstslut) + 28%),
			rgba(17, 17, 17, 0) 100%
		);
		opacity: 1;
	}
}

/*
 * Under 48em: fladt slør, styret herfra frem for af blokken.
 *
 * Cover beskærer til den vandrette midte, og teksten fylder hele bredden — der
 * er hverken en venstre- eller højreside at skelne, så gradienten giver ingen
 * mening. Til gengæld skal sløret stadig kunne sættes præcist.
 *
 * Blokkens eget `dimRatio` duer ikke til det. WordPress definerer kun
 * `has-background-dim-10` til `-100` i spring på ti; alt derimellem har ingen
 * regel, og så falder laget tilbage til `has-background-dim`, som er 50 %.
 * Værdierne 75 og 55 blev derfor stiltiende til 50, og på mobil faldt både
 * manchet og label under kravet — målt helt nede på 1,81:1 på værkstedssiden.
 * Fejlen var usynlig på skrivebordet, hvor gradienten alligevel overtager.
 *
 * `dimRatio` bevares i blokkommentaren som nærmeste tier, så editoren viser
 * noget rimeligt, men det er reglen her, der bestemmer.
 */
@media (max-width: 47.999em) {
	.wp-block-cover.dti-hero--daekkende .wp-block-cover__background.has-background-dim {
		background-color: transparent !important;
		background-image: linear-gradient(
			rgba(17, 17, 17, var(--dti-hero-slor-mobil, 0.68)),
			rgba(17, 17, 17, var(--dti-hero-slor-mobil, 0.68))
		);
		opacity: 1;
	}
}

/*
 * Manchetten flugter med overskriften.
 *
 * `margin-left: 0` er ikke nok: cover-blokkens constrained-layout centrerer
 * børn med egen max-width, så label, overskrift og knapper starter ved
 * indholdscontainerens kant, mens manchetten ville ryge helt ud til
 * cover-blokkens kant — cirka 100px længere til venstre. Kanten er den samme,
 * overskriften bruger.
 */
.dti-hero--daekkende .dti-hero__manchet {
	margin-left: var(--dti-hero-venstre) !important;
	margin-right: auto !important;
}

.dti-hero--daekkende .dti-broedkrumme {
	margin-bottom: var(--wp--preset--spacing--40);
}

/*
 * Luften omkring heroens tekst.
 *
 * Var spacing-80 og er sat ned. Sammen med en min-height på 22rem gør det, at
 * heroen ikke længere skubber sidens egentlige indhold under skærmkanten — den
 * skal introducere siden, ikke være den.
 */
.dti-hero--daekkende .wp-block-cover__inner-container {
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 48em) {
	.dti-hero--daekkende .wp-block-cover__inner-container {
		padding-block: var(--wp--preset--spacing--60);
	}
}

.dti-hero__manchet {
	max-width: 34rem;
	font-size: var(--wp--preset--font-size--manchet);
	line-height: var(--wp--custom--line-height--normal);
	color: #E8E6E1;
}

/* Lys hero-variant — bruges på produktsider (mockup 03) og på fotoheroen. */
.dti-hero--lys {
	background-color: var(--wp--custom--surface--page);
	color: var(--wp--preset--color--dti-sort);
}

.dti-hero--lys :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--dti-sort);
}

/*
 * Kategorititlen skal kunne stå uden at knække midt i et ord.
 *
 * Sidens h1 er `titel-xl` (op til 4rem = 64px), og det er den rigtige størrelse
 * på forsiden, hvor heroen fylder hele bredden. Her står den i en spalte ved
 * siden af kategorimenuen: tekstfeltet er 336px, og "Transportbånd" fylder
 * 370px ved 64px. Det længste kategorinavn er "Svejsetilbehør".
 *
 * `titel-l` (op til 2,75rem = 44px) holder det længste navn under 300px og er
 * samtidig den størrelse, spalten kan bære. Overskriften er stadig sidens
 * største element.
 *
 * Reglen er bundet til kategorisiden. Den lyse tone deles nu med fotoheroen på
 * forside, om os, værksted og produkter, og dér står overskriften i fuld bredde
 * og skal have sin fulde størrelse — det er kun spalten her, der er for smal.
 */
.dti-kategoriside__indhold .dti-hero--lys .wp-block-post-title {
	font-size: var(--wp--preset--font-size--titel-l);
}

/*
 * Manchetten er 1,375rem = 22px og tæller derfor som almindelig tekst, ikke
 * som stor (WCAG regner fra 24px). Stålgrå giver 4,45:1 mod elfenben og falder
 * lige under kravet på 4,5:1; den dæmpede tone giver 6,71:1.
 */
.dti-hero--lys .dti-hero__manchet {
	color: var(--wp--custom--text--daempet);
}

.dti-hero--lys a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--dti-petrol);
}

/*
 * Pladsholder for fotografi, der endnu ikke er leveret. Tydeligt mærket, så et
 * tomt felt aldrig forveksles med færdigt design (jf. dti-fotobrief.md).
 */
.dti-foto-pladsholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 22rem;
	height: 100%;
	background-color: #2A2E31;
	color: var(--wp--custom--surface--border-strong);
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	text-align: center;
	padding: var(--wp--preset--spacing--50);
}

.dti-hero--lys .dti-foto-pladsholder {
	background-color: var(--wp--preset--color--dti-elfenben);
	/* Stålgrå giver kun 4,45:1 mod elfenben; den dæmpede tone giver 6,71:1. */
	color: var(--wp--custom--text--daempet);
}

/* -------------------------------------------------------------------------
 * Kort — fælles
 * ---------------------------------------------------------------------- */

.dti-kort {
	position: relative;
	background-color: var(--wp--custom--surface--card);
	border: 1px solid var(--wp--custom--surface--border);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition:
		transform var(--wp--custom--duration--normal) var(--wp--custom--easing--standard),
		box-shadow var(--wp--custom--duration--normal) var(--wp--custom--easing--standard),
		border-color var(--wp--custom--duration--normal) var(--wp--custom--easing--standard);
}

/*
 * Kortene løftes ved hover, men hover afslører aldrig information — alt står
 * på kortet i forvejen.
 */
.dti-kort:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
	border-color: var(--wp--custom--surface--border-strong);
}

/*
 * 4 px topkant i kategoriens accentfarve — DESIGN.md's komponentregel.
 *
 * Kanten ligger som et pseudoelement frem for en border, så den kan vokse ved
 * hover uden at flytte kortets indhold en pixel.
 */
.dti-kort--accent::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	/*
	 * 5px — et helt pixeltal tæt på DESIGN.md's 4px.
	 *
	 * Kanten var først 4px og læstes som en tynd streg frem for et
	 * kategorisignal. Den blev sat op til 8px efter mockuppens proportion, men
	 * det blev for tungt i praksis, så den er skruet en tredjedel ned igen.
	 * 5 frem for 5,36 holder kanten skarp i stedet for at blive udjævnet over
	 * en halv pixel.
	 */
	height: 5px;
	background-color: var(--dti-accent, var(--wp--custom--accent--fallback));
	transition: height var(--wp--custom--duration--normal) var(--wp--custom--easing--standard);
	z-index: 2;
}

/* Samme relative vækst ved hover som før: halvanden gang højden. */
.dti-kort--accent:hover::before {
	height: 8px;
}

.dti-kort__krop {
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	flex-grow: 1;
}

.dti-kort__titel {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--titel-m);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
	margin: 0;
	color: var(--wp--preset--color--dti-sort);
	/*
	 * Ingen orddeling på kortets titel. Med tre kolonner blev "Slanger og
	 * tilbehør" delt til "tilbe-hør" og "Olie og div. smøremidler" til
	 * "smøre-midler". Uden orddeling ombrydes der ved mellemrum i stedet, hvilket
	 * læses langt bedre på et kategorinavn. `overflow-wrap` er stadig sikkerhed
	 * mod et enkelt ord, der er bredere end kortet.
	 */
	hyphens: none;
	overflow-wrap: break-word;
}

/*
 * "Se muligheder →" er ren visuel affordance. Titlen bærer det rigtige link, og
 * denne linje er aria-hidden, så den ikke gentages for skærmlæsere.
 */
.dti-kort__link {
	font-size: var(--wp--preset--font-size--ui-small);
	/*
	 * Ren stålgrå giver kun 4,45:1 mod elfenben-fladen på kategorikortet og
	 * falder dermed lige under AA. Den dæmpede tone er #4F5558, som allerede
	 * findes i designsystemets accentliste, og giver 6,71:1.
	 */
	color: var(--wp--custom--text--daempet);
	text-decoration: none;
	margin-top: auto;
}

.dti-kort__link::after {
	content: "→";
	display: inline-block;
	margin-left: var(--wp--preset--spacing--20);
	transition: transform var(--wp--custom--duration--normal) var(--wp--custom--easing--standard);
}

.dti-kort:hover .dti-kort__link {
	color: var(--wp--preset--color--dti-sort);
}

/* Pilen glider frem — retningen understøtter handlingen. */
.dti-kort:hover .dti-kort__link::after {
	transform: translateX(4px);
}

.dti-kort__titel a {
	color: inherit;
	text-decoration: none;
}

.dti-kort:hover .dti-kort__titel a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Hele kortet er klikbart: titlens anker strækkes hen over fladen. Det
 * tilgængelige navn bliver dermed siddende på titlen, ikke på en anonym boks.
 */
.dti-kort--klikbar {
	position: relative;
}

.dti-kort--klikbar .dti-kort__titel a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * Kategorikort — rundt produktudsnit til venstre (mockup 01)
 * ---------------------------------------------------------------------- */

.dti-kort--kategori .dti-kort__krop {
	flex-direction: row;
	align-items: center;
	/* Tre kolonner giver smallere kort, så foto og luft skaleres ned. */
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--dti-elfenben);
}

.dti-kort--kategori .dti-kort__foto {
	/*
	 * Kortets billede er det eneste, der viser hvad kategorien indeholder.
	 * Ved 6rem var det et mærke ved siden af titlen; mockup 01 har det som
	 * kortets halve venstre side. 7,5rem er det største, tre kort i bredden kan
	 * bære, uden at de længste titler ("Svejsetilbehør og reservedele") knækker
	 * over tre linjer.
	 */
	width: clamp(5rem, 9vw, 7.5rem);
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--round);
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--wp--custom--surface--card);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Tynd ring, så det runde udsnit får en kant mod den varme flade. */
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.dti-kort--kategori .dti-kort__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--standard);
}

/* Fotoet zoomer ganske lidt ved hover — bevægelsen er kort og funktionel. */
.dti-kort--kategori:hover .dti-kort__foto img {
	transform: scale(1.06);
}

.dti-kort--kategori .dti-kort__tekst {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Billedkort — fuldbredde foto øverst (mockup 02, 03)
 * ---------------------------------------------------------------------- */

.dti-kort__medie {
	aspect-ratio: 16 / 10;
	background-color: var(--wp--preset--color--dti-elfenben);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Stålgrå giver kun 4,45:1 mod elfenben; den dæmpede tone giver 6,71:1. */
	color: var(--wp--custom--text--daempet);
	font-size: var(--wp--preset--font-size--ui-small);
	overflow: hidden;
}

.dti-kort__medie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Infokort — de tre nederst på forsiden
 * ---------------------------------------------------------------------- */

.dti-infokort {
	background-color: var(--wp--custom--surface--card);
	border: 1px solid var(--wp--custom--surface--border);
	border-radius: var(--wp--custom--radius--sm);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	overflow: hidden;
}

/*
 * Billedet går til kortets kant; teksten får sin egen indrykning. Derfor
 * ligger padding på børnene og ikke på kortet.
 */
.dti-infokort > *:not(.dti-infokort__foto) {
	padding-inline: var(--wp--preset--spacing--60);
}

.dti-infokort > *:not(.dti-infokort__foto):first-child {
	padding-top: var(--wp--preset--spacing--60);
}

/*
 * Linket skubbes ned i bunden, så de tre kort får deres "Læs mere" på samme
 * linje uanset hvor lang brødteksten er.
 *
 * `margin-top: auto` stod på selve <a>-elementet, men flexbarnet er det <p>,
 * der omslutter det — så reglen gjorde intet, og linket i det korteste kort lå
 * 26px højere end i de to andre.
 */
.dti-infokort > *:last-child {
	padding-bottom: var(--wp--preset--spacing--60);
}

/*
 * Linket skubbes ned i bunden, så de tre kort får deres "Læs mere" på samme
 * linje uanset hvor lang brødteksten er. Kortet er et flexlayout, og den
 * automatiske margen æder den plads, det korteste kort ellers står med.
 *
 * Reglen sad tidligere på selve <a>-elementet, men flexbarnet er afsnittet
 * omkring det — så den gjorde intet, og linket i det korteste kort lå 26px
 * højere end i de to andre.
 */
.dti-infokort__handling {
	margin-block: auto 0;
}

.dti-infokort {
	overflow: hidden;
	transition:
		transform var(--wp--custom--duration--normal) var(--wp--custom--easing--standard),
		box-shadow var(--wp--custom--duration--normal) var(--wp--custom--easing--standard);
}

.dti-infokort:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

/*
 * Fotoet er en `wp:image`-blok, ikke rå HTML.
 *
 * Det betyder, at billedet ligger i en `<figure>`, og at klassen sidder på
 * figuren frem for på `<img>`. Det er ikke kosmetik: `.dti-infokort > *` sætter
 * vandret polstring på alle direkte børn undtagen fotoet, og en umærket figur
 * ville derfor få polstring og billedet ville ikke længere gå til kanten.
 *
 * Blokken er valgt, fordi en redaktør skal kunne skifte billedet i editoren.
 * Rå HTML kan ikke redigeres — se noten i mønsteret.
 */
.dti-infokort__foto {
	margin: 0;
	overflow: hidden;
}

.dti-infokort__foto img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--standard);
}

.dti-infokort:hover .dti-infokort__foto img {
	transform: scale(1.04);
}

.dti-infokort__link::after {
	display: inline-block;
	margin-left: var(--wp--preset--spacing--20);
	transition: transform var(--wp--custom--duration--normal) var(--wp--custom--easing--standard);
}

.dti-infokort:hover .dti-infokort__link::after {
	transform: translateX(4px);
}

.dti-infokort--mork {
	background-color: var(--wp--preset--color--dti-sort);
	border-color: var(--wp--preset--color--dti-sort);
	color: #FFFFFF;
}

.dti-infokort--mork :where(h2, h3, h4) {
	color: #FFFFFF;
}

.dti-infokort--mork .dti-label {
	color: #FFFFFF;
}

.dti-infokort__link {
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--dti-sort);
}

.dti-infokort--mork .dti-infokort__link {
	color: var(--wp--preset--color--dti-gul);
}

.dti-infokort__link::after {
	content: " →";
}

/* -------------------------------------------------------------------------
 * Egenskabskort — ikon, titel, kort tekst (mockup 03, 05)
 * ---------------------------------------------------------------------- */

.dti-egenskab {
	background-color: var(--wp--custom--surface--card);
	border: 1px solid var(--wp--custom--surface--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--60);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* Variant med accentkant øverst, som "Anvendelse / Mål / Levering". */
.dti-egenskab--accent {
	border-top: 4px solid var(--dti-accent, var(--wp--custom--accent--fallback));
}

/*
 * Ikonet følger petrol, ikke accenten. Fire af de atten accentfarver kommer
 * ikke over 3:1 mod den lyse flade og ville blive utydelige som grafisk
 * element (WCAG 1.4.11).
 */
.dti-egenskab__ikon {
	color: var(--wp--preset--color--dti-petrol);
}

.dti-egenskab__titel {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--manchet);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Mørkt CTA-bånd — "Send billeder og mål"
 * ---------------------------------------------------------------------- */

.dti-cta-baand {
	background-color: var(--wp--preset--color--dti-sort);
	color: #FFFFFF;
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.dti-cta-baand :where(h2, h3) {
	color: #FFFFFF;
	margin: 0;
}

.dti-cta-baand__ikon {
	color: var(--wp--preset--color--dti-gul);
	flex-shrink: 0;
}

.dti-cta-baand__tekst {
	color: #D6D3CE;
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* Lys variant med kant, som "Er du i tvivl?" nederst på kategorisiden. */
.dti-cta-baand--lys {
	background-color: var(--wp--custom--surface--card);
	border: 1px solid var(--wp--custom--surface--border);
	color: var(--wp--preset--color--dti-sort);
}

.dti-cta-baand--lys :where(h2, h3) {
	color: var(--wp--preset--color--dti-sort);
}

.dti-cta-baand--lys .dti-cta-baand__ikon {
	color: var(--wp--preset--color--dti-petrol);
}

.dti-cta-baand--lys .dti-cta-baand__tekst {
	color: var(--wp--preset--color--dti-staalgraa);
}

/* -------------------------------------------------------------------------
 * Ikoner
 * ---------------------------------------------------------------------- */

.dti-ikon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

.dti-ikon--sm {
	width: 1.125rem;
	height: 1.125rem;
}

.dti-ikon--lg {
	width: 2rem;
	height: 2rem;
}

.dti-ikon--xl {
	width: 2.75rem;
	height: 2.75rem;
}

/* Rund ikonplade, som i kontaktoplysningerne på mockup 04. */
.dti-ikon-plade {
	width: 3rem;
	height: 3rem;
	border-radius: var(--wp--custom--radius--round);
	background-color: var(--wp--preset--color--dti-petrol);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Ikonknapper skal have mindst 44x44 px interaktionsflade. */
.dti-ikon-knap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--min-tap-target);
	min-height: var(--wp--custom--min-tap-target);
	padding: var(--wp--preset--spacing--20);
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--sm);
}

/* -------------------------------------------------------------------------
 * Sidefod
 * ---------------------------------------------------------------------- */

.dti-footer {
	background-color: var(--wp--preset--color--dti-sort);
	color: #FFFFFF;
	border-top: 4px solid var(--wp--preset--color--dti-gul);
}

.dti-footer :where(h1, h2, h3, h4, h5, h6) {
	color: #FFFFFF;
}

.dti-footer a {
	color: #FFFFFF;
	text-decoration-color: var(--wp--preset--color--dti-staalgraa);
}

.dti-footer a:hover {
	color: var(--wp--preset--color--dti-gul);
}

/* -------------------------------------------------------------------------
 * Bevægelse
 *
 * theme.json kan ikke udtrykke en media query, så reduced-motion håndhæves
 * her.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/*
	 * Ved reduceret bevægelse fjernes selve forskydningen — ikke bare dens
	 * varighed. En transition på 0,01ms ville stadig flytte elementet, bare
	 * øjeblikkeligt. Farve- og skyggeskift bevares, så hover stadig kan ses.
	 */
	.dti-kort:hover,
	.dti-infokort:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}

	.dti-kort--kategori:hover .dti-kort__foto img,
	.dti-infokort:hover .dti-infokort__foto {
		transform: none;
	}

	.dti-kort:hover .dti-kort__link::after,
	.dti-infokort:hover .dti-infokort__link::after {
		transform: none;
	}

	.dti-kort--accent:hover::before {
		height: 4px;
	}
}

/* -------------------------------------------------------------------------
 * Mobil
 * ---------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	/* Kategorikortets runde foto skrumper, så titlen får plads. */
	.dti-kort--kategori .dti-kort__foto {
		width: 4.5rem;
	}

	/* CTA-båndets knap skal fylde bredden på mobil. */
	.dti-cta-baand .wp-block-buttons {
		width: 100%;
	}

	.dti-cta-baand .wp-block-button {
		width: 100%;
	}

	.dti-cta-baand .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Kategoriside — layout med venstremenu
 *
 * Ét sæt markup, to placeringer. Navigationen står efter indholdet i DOM'en,
 * hvilket er den rigtige læserækkefølge på mobil; på desktop flytter CSS grid
 * den om i venstre kolonne. Alternativet — to sæt markup — ville give
 * skærmlæsere atten links to gange.
 * ---------------------------------------------------------------------- */

.dti-kategoriside {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--80);
	/*
	 * Beholderen begrænses selv til indholdsbredden.
	 *
	 * WordPress' constrained-layout centrerer normalt via max-width og auto-
	 * margener på børnene, men de margener nulstilles nedenfor, fordi de
	 * ødelægger grid-celler. Uden denne max-width ville gitteret derfor spænde
	 * over hele vinduet, og indholdet ville stikke ~90px længere ud til højre
	 * end heroen ovenover.
	 */
	max-width: var(--wp--custom--container--content);
	margin-inline: auto;
}

/*
 * WordPress' constrained-layout sætter `margin-left/right: auto !important` på
 * alle børn for at centrere dem. I en grid-beholder betyder auto-margener noget
 * andet end i flow: elementet krymper til sit indhold og centreres i cellen.
 * Uden dette rykkede kategorilisten ~60px ind i forhold til brødteksten på
 * mobil. Margenerne nulstilles, så cellerne fylder deres spalte.
 */
.dti-kategoriside > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	min-width: 0;
}

@media (min-width: 62em) {
	.dti-kategoriside {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--80);
		align-items: start;
	}

	/* Menuen hentes op i første kolonne, selv om den står sidst i DOM'en. */
	.dti-katnav {
		/*
		 * Menuen hentes op i foerste spalte og foerste raekke, selv om den staar
		 * sidst i DOM'en. Kilden bevarer dermed den rigtige laeserraekkefoelge
		 * paa mobil — indhold foerst, liste bagefter — mens den paa desktop
		 * ligger oeverst til venstre, lige under headeren.
		 */
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: var(--wp--preset--spacing--40);
		align-self: start;
	}

	.dti-kategoriside__indhold {
		grid-column: 2;
		grid-row: 1;
	}
}

/* -------------------------------------------------------------------------
 * Kategorinavigation
 * ---------------------------------------------------------------------- */

/*
 * Sammenfoldningen under 62em.
 *
 * Sidemenuen bliver først en spalte ved 62em. Under den bredde ligger den under
 * indholdet, og dér koster atten punkter 1334px — 1,6 skærmfulde på en telefon.
 * Sammenfoldet koster den cirka 48px.
 *
 * Se `dti-katnav__foldning` i mønsteret for hvorfor det er et `<details>` og
 * ikke en knap med aria-expanded.
 */
.dti-katnav__knap {
	/*
	 * `display: list-item` er summaryens egen visningstype og dét, der tegner
	 * trekanten. Den må ikke skiftes til flex — så forsvinder markøren i flere
	 * browsere, og det var dér, de tre mislykkede forsøg på en egen pil startede.
	 */
	min-height: var(--wp--custom--min-tap-target);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	cursor: pointer;
	background-color: var(--wp--preset--color--dti-elfenben);
	border: 1px solid var(--wp--custom--surface--border);
	border-radius: var(--wp--custom--radius--sm);
	/* Trekanten står i petrol som overskriften, den peger på. */
	color: var(--wp--preset--color--dti-petrol);
}

/*
 * Overskriften skal stå på markørens linje, ikke under den. En h2 er en blok og
 * ville ellers skubbe sig selv ned under trekanten.
 */
.dti-katnav__knap .dti-katnav__titel {
	display: inline;
	vertical-align: middle;
}

.dti-katnav__foldning[open] > .dti-katnav__knap {
	margin-bottom: var(--wp--preset--spacing--40);
}

.dti-katnav__titel {
	font-family: var(--wp--preset--font-family--broedtekst);
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--dti-petrol);
	margin: 0;
}

/*
 * Over 62em er menuen en fast spalte, og foldningen skal være væk igen.
 *
 * Overskriften får sin oprindelige streg og luft tilbage, pilen fjernes, og
 * musen kan ikke længere klikke på rækken — uden det kunne en desktopbruger
 * folde menuen sammen ved et uheld, hvilket ikke er en funktion, siden har haft.
 * Scriptet tager samtidig summary ud af tabrækkefølgen, så tastaturbrugere
 * heller ikke lander på en knap, der ikke gør noget.
 */
@media (min-width: 62em) {
	.dti-katnav__knap {
		display: block;
		min-height: 0;
		padding: 0 0 var(--wp--preset--spacing--30);
		cursor: default;
		background-color: transparent;
		border: none;
		border-bottom: 1px solid var(--wp--custom--surface--border);
		border-radius: 0;
		pointer-events: none;
	}

	/*
	 * Trekanten fjernes, når menuen er en fast spalte — dér er der intet at
	 * folde. `list-style: none` rammer markøren; Safari kræver sin egen regel.
	 */
	.dti-katnav__knap {
		list-style: none;
	}

	.dti-katnav__knap::-webkit-details-marker {
		display: none;
	}

	.dti-katnav__foldning[open] > .dti-katnav__knap {
		margin-bottom: var(--wp--preset--spacing--40);
	}
}

.dti-katnav__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dti-katnav__punkt {
	margin: 0;
	border-left: 4px solid transparent;
	transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.dti-katnav__punkt a {
	display: block;
	/*
	 * Punkterne skal kunne rammes med en tommelfinger på mobil, hvor listen
	 * ligger under indholdet. 44px inklusive polstring (WCAG 2.5.8).
	 */
	min-height: var(--wp--custom--min-tap-target);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--ui-small);
	line-height: 1.35;
	color: var(--wp--preset--color--dti-sort);
	text-decoration: none;
}

/*
 * På desktop er listen en sidemenu. Med atten kategorier blev spalten 860px høj
 * mod indholdets godt 250px, så rækkerne strammes til ~38px.
 *
 * Det er stadig langt over WCAG 2.2 AA's minimum på 24×24px (SC 2.5.8); de 44px
 * er AAA-niveauet (SC 2.5.5) og bevares på mobil, hvor listen betjenes med
 * tommelfingeren. Betingelsen hænger bevidst kun på bredden — `pointer: fine`
 * er upålidelig på hybridenheder og slår slet ikke igennem i headless browsere.
 */
@media (min-width: 62em) {
	.dti-katnav__punkt a {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--20);
	}
}

.dti-katnav__punkt:hover {
	border-left-color: var(--dti-accent, var(--wp--custom--accent--fallback));
}

.dti-katnav__punkt:hover a {
	background-color: var(--wp--preset--color--dti-elfenben);
}

/*
 * Den aktuelle kategori markeres med sin egen accentfarve som venstrekant plus
 * fed skrift. Farven er aldrig eneste signal — `aria-current` bærer det for
 * skærmlæsere, og fedheden for dem der ikke skelner farverne (WCAG 1.4.1).
 */
.dti-katnav__punkt--aktiv {
	border-left-color: var(--dti-accent, var(--wp--custom--accent--fallback));
}

.dti-katnav__punkt--aktiv a {
	background-color: var(--wp--preset--color--dti-elfenben);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Se også
 * ---------------------------------------------------------------------- */

.dti-se-ogsaa {
	display: grid;
	/*
	 * `auto-fill` beholder tomme spor i rækken. I indholdsspalten, hvor der er
	 * plads til to spor à 17rem plus et halvt, blev det tredje kort skubbet ned
	 * på egen række. Under 62em stakker kortene som før.
	 */
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 40em) {
	.dti-se-ogsaa {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tre relaterede kategorier skal stå på én række på desktop. */
@media (min-width: 62em) {
	.dti-se-ogsaa {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dti-kort--se-ogsaa .dti-kort__krop {
	gap: var(--wp--preset--spacing--20);
}

.dti-kort--se-ogsaa .dti-kort__titel {
	font-size: var(--wp--preset--font-size--manchet);
}

/* -------------------------------------------------------------------------
 * Accentfarve på kategorisidens detaljer
 *
 * Kun kanter og streger. Tre af de otte paletfarver ligger på 2,5–2,8:1 mod
 * lys flade og ville blive utydelige som tekst eller ikon; som markering ved
 * siden af en overskrift eller et navn fungerer de.
 * ---------------------------------------------------------------------- */

/* Beskrivelsens første afsnit skal flugte med menuens øverste kant. */
.dti-kategoriside__indhold > .wp-block-post-content > :first-child {
	margin-top: 0;
}

/*
 * Den gule streg under heroens overskrift.
 *
 * Reglen hang tidligere på `.wp-block-post-title` alene, og så fik kun de sider
 * stregen, hvis hero henter titlen fra siden — om os, værksted, produkter og
 * kategorisiderne. Forsiden, kontakt, søgeresultatet og 404 skriver deres
 * overskrift som en almindelig `wp:heading`, og dér manglede den. Fem heroer
 * med streg og fire uden er ikke et system.
 *
 * Selektoren rammer nu heroens h1, uanset hvilken blok der har lavet den.
 */
.dti-hero h1::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 5px;
	margin-top: var(--wp--preset--spacing--40);
	background-color: var(--dti-accent, var(--wp--preset--color--dti-gul));
}

/* Brødkrummens aktuelle led får accenten som understregning. */
.dti-hero--daekkende .dti-broedkrumme [aria-current="page"] {
	box-shadow: inset 0 -3px 0 var(--dti-accent, var(--wp--preset--color--dti-gul));
	padding-bottom: 2px;
}

/* -------------------------------------------------------------------------
 * Kategoriside — tokolonne-området øverst
 *
 * Kun heroen og kategoribeskrivelsen står i spalten ved siden af menuen.
 * Kortrækkerne nedenunder ligger i fuld bredde, fordi kundens USP-titler er op
 * til 32 tegn og skal kunne stå på én linje: i spalten var kortene 261px brede,
 * og det rækker ikke til nogen læselig titelstørrelse. I fuld bredde er de
 * 384px, og billederne bliver samtidig knap 50% større.
 *
 * Menuen er 640px høj og heroen plus beskrivelsen omtrent det samme, så de to
 * spalter slutter næsten samtidig og efterlader ikke et hul.
 * ---------------------------------------------------------------------- */

/*
 * Heroen er bygget som fuldbredde-sektion. Inde i gitterspalten skal den
 * opføre sig som en almindelig blok: ingen udbrydning og ingen egen
 * sidepolstring.
 */
.dti-kategoriside__indhold .alignfull {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0 !important;
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: 0 !important;
}

/* Heroen er første blok i spalten og skal ikke have luft over sig. */
.dti-kategoriside__indhold > .dti-hero,
.dti-kategoriside__indhold > .wp-block-cover:first-child {
	padding-top: 0 !important;
	margin-top: 0;
}

/*
 * Heroen får sin egen flade.
 *
 * Uden den åbnede kategorisiden med sort tekst på sidens egen hvide bund og et
 * produktfoto, der svævede uden underlag. Mockup 03 har en tonet flade under
 * hele heroen; den giver samtidig sidens eneste lyse bånd foroven, så rytmen
 * bliver flade → hvidt indhold → mørkt CTA-bånd → flade, i stedet for ét langt
 * hvidt felt med to bånd klemt sammen i bunden.
 *
 * Polstringen skal sætte sig igennem med `!important`, fordi reglen for
 * `.alignfull` ovenfor nulstiller alle fire sider. Selektoren her er tungere
 * (0,3,0 mod 0,2,0), så den vinder uanset rækkefølge.
 */
.dti-kategoriside__indhold > .dti-hero--lys {
	background-color: var(--wp--preset--color--dti-elfenben);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--60) !important;
}

@media (min-width: 48em) {
	.dti-kategoriside__indhold > .dti-hero--lys {
		padding: var(--wp--preset--spacing--70) !important;
	}
}

/*
 * Produktfotoet ligger nu på den tonede flade og skal have sin egen lyse bund,
 * så et fritlagt emne ikke flyder ud i fladen. Kanten er den samme hårfine
 * streg som på kortene.
 */
.dti-kategoriside__indhold > .dti-hero--lys .dti-hero__produktfoto {
	background-color: var(--wp--custom--surface--card);
	box-shadow: inset 0 0 0 1px var(--wp--custom--surface--border);
}

/*
 * "Find den løsning" mister sin kortramme på kategorisiden.
 *
 * Sektionen står lige under fordelskortene og havde samme silhuet: tre hvide
 * kasser med kant, i samme bredde, med ikon og titel. To ens kortrækker i træk
 * læses som en gentagelse, uanset at teksterne er forskellige. Her bliver de
 * tre til spalter med accentstregen som eneste markering, så rækken virker som
 * en let opsummering frem for endnu et sæt kort.
 *
 * Reglen er scopet til kategorisiden, fordi mønsteret er bygget til at kunne
 * stå alene på en side — der er kortrammen stadig den rigtige.
 */
.page-template-page-kategori .dti-egenskab {
	background-color: transparent;
	border-inline-width: 0;
	border-bottom-width: 0;
	border-radius: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0 0;
}

/*
 * Tekstrummet må ikke længere begrænses til 52rem: egenskabskortene ligger nu
 * i samme spalte og skal kunne fylde den. Læsemålet flyttes til selve
 * brødteksten i stedet.
 *
 * Læsemålet ligger på afsnittene, ikke på spalten: designsystemet vil have
 * 70–75 tegn pr. linje, og uden dette løber teksten op omkring 95.
 */
.dti-kategoriside__indhold .wp-block-post-content > p {
	max-width: 46rem;
}

/*
 * Kategorisidens sektioner strammes.
 *
 * Mønstrene cta-baand og se-ogsaa bruges også på forsiden og 404, hvor luften
 * er passende. Her sidder de tættere, fordi kategorisiden er kort og ellers
 * falder fra hinanden i løsrevne bånd. Polstringen ligger som inline-style i
 * blokmarkupen, så `!important` er den eneste vej udenom.
 */
.page-template-page-kategori .dti-kategoriside + .wp-block-group,
.page-template-page-kategori .dti-kategoriside ~ .wp-block-group {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}


/* -------------------------------------------------------------------------
 * Mærkede billedpladsholdere
 *
 * Designsystemet kræver, at uafklaret indhold er synligt mærket. Pladsholderen
 * skriver det bestilte mål ind i feltet, så enhver der ser siden kan se hvilket
 * billede der mangler — og fotografen kan læse specen direkte af skærmen.
 * ---------------------------------------------------------------------- */

.dti-pladsholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	padding: var(--wp--preset--spacing--50);
	text-align: center;
	background-color: var(--wp--preset--color--dti-elfenben);
	border: 2px dashed var(--wp--custom--surface--border-strong);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--custom--text--daempet);
}

.dti-pladsholder__rolle {
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.dti-pladsholder__maal {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--titel-m);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--dti-sort);
}

.dti-pladsholder__motiv {
	font-size: var(--wp--preset--font-size--ui-small);
	max-width: 22rem;
	line-height: var(--wp--custom--line-height--normal);
}

/* -------------------------------------------------------------------------
 * Fordele — tre kort med billede (mockup 03)
 * ---------------------------------------------------------------------- */

/*
 * Sporbredden er 18,5rem og ikke 17rem, fordi titlen skal kunne stå på én linje
 * også ved 18px: den bredeste måler 231px, og et kort skal derfor være mindst
 * 281px bredt. Med 17rem (272px) kunne gitteret danne to spalter i et vindue,
 * hvor kortene lige akkurat blev for smalle, og den længste titel knækkede.
 */
.dti-fordele {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18.5rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
}

/*
 * Kortets skal, billedformat, titel, brødtekst og ikonfarve står samlet under
 * "Ensretning af produktsidens tre kortrækker" længere nede — de tre rækker
 * deler dem. Her ligger kun det, der er fordelskortets eget.
 */

/* Pladsholderen sidder i mediefeltet og skal ikke have sin egen kant der. */
.dti-fordel__medie .dti-pladsholder {
	border-width: 0 0 2px 0;
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * Hero-produktfoto (mockup 03)
 * ---------------------------------------------------------------------- */

/*
 * Klassen sidder nu på en `figure`, ikke på `img`.
 *
 * Produktfotoet blev lagt om fra en `wp:html`-blok til en rigtig `wp:image`,
 * og core pakker altid billedet i `<figure class="wp-block-image">`. Klassen
 * følger med figuren, så målene skal stå her — men afrundingen skal ramme
 * selve billedet. En `border-radius` på figuren klipper ikke barnet, og
 * hjørnerne blev firkantede igen uden at det kunne ses i et almindeligt
 * øjekast: målt var forskellen 88 pixels, altså netop de fire hjørner.
 */
.dti-hero__produktfoto {
	display: block;
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--md);
	/* Klipper billedet, så figurens afrunding også gælder fotoet. */
	overflow: hidden;
}

.dti-hero__produktfoto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

/*
 * Egenskabskortene skal fylde bredden som fordelskortene ovenover.
 *
 * WordPress genererer gitteret med `repeat(auto-fill, ...)`, som beholder tomme
 * spor i rækken, så tre kort klumper til venstre og efterlader en fjerdedel tom.
 * `auto-fit` folder de tomme spor sammen, så kortene strækker sig — samme
 * opførsel som `.dti-fordele`.
 */
@media (min-width: 48em) {
	.dti-egenskab {
		height: 100%;
	}

	:where(.wp-block-group.is-layout-grid):has(> .dti-egenskab) {
		grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Kontaktside (mockup 04)
 * ---------------------------------------------------------------------- */

.dti-kontakt {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (min-width: 62em) {
	.dti-kontakt {
		/* Formularen er den brede: den skal kunne rumme to felter side om side. */
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.dti-kontakt__spalte {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.dti-kontaktkort,
.dti-kortudsnit,
.dti-formular {
	background-color: var(--wp--custom--surface--card);
	border: 1px solid var(--wp--custom--surface--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--60);
}

.dti-kontaktkort__titel {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--titel-m);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--50);
	hyphens: none;
}

.dti-kontaktkort__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dti-kontaktkort__liste li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.dti-kontaktkort__liste a {
	text-decoration: none;
	font-weight: 600;
}

.dti-kontaktkort__liste a:hover {
	text-decoration: underline;
}

/*
 * Kortudsnittet er bevidst ikke en indlejret Google Maps-iframe: den sætter
 * cookies og sender den besøgendes IP videre, før nogen har trykket på noget.
 * Adressen står som tekst, og linket åbner først kortet ved klik.
 */
.dti-kortudsnit {
	background-color: var(--wp--preset--color--dti-elfenben);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.dti-kortudsnit__adresse {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--manchet);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
	margin: 0;
}

.dti-kortudsnit__link {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--ui-small);
	align-self: flex-start;
}

/* -------------------------------------------------------------------------
 * Forespørgselsformular
 * ---------------------------------------------------------------------- */

.dti-formular__titel {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--titel-m);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--40);
	hyphens: none;
}

/* Mærkning af, at formularen endnu ikke kan sende. */
.dti-formular__note {
	background-color: var(--wp--preset--color--dti-gul);
	color: var(--wp--preset--color--dti-sort);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--ui-small);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.dti-formular__felter {
	display: grid;
	/*
	 * To kolonner, som mockuppen viser: Navn/Virksomhed på én række,
	 * E-mail/Telefon på næste. `auto-fit` gav tre kolonner i den brede spalte og
	 * efterlod Telefon alene på sin egen række.
	 */
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 40em) {
	.dti-formular__felter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.dti-felt {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.dti-felt--bred {
	grid-column: 1 / -1;
}

.dti-felt label {
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 600;
}

.dti-felt input,
.dti-felt textarea {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--ui-small);
	/* 44px høje felter, så de kan rammes med en tommelfinger. */
	min-height: var(--wp--custom--min-tap-target);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--surface--border-strong);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--custom--surface--card);
	color: var(--wp--preset--color--dti-sort);
}

.dti-felt input:disabled,
.dti-felt textarea:disabled,
.dti-felt button:disabled {
	background-color: var(--wp--preset--color--dti-elfenben);
	cursor: not-allowed;
	opacity: 1;
}

.dti-vedhaeft {
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border: 2px dashed var(--wp--custom--surface--border-strong);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--ui-small);
}

.dti-vedhaeft__ikon {
	color: var(--wp--preset--color--dti-staalgraa);
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Sådan hjælper vi dig hurtigst
 * ---------------------------------------------------------------------- */

.dti-trin {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
	counter-reset: none;
}

.dti-trin__punkt {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	/*
	 * Centrering fik trinnene til at flugte forkert: teksterne er ikke lige
	 * lange, så et trin med tre linjer blev skubbet ned i forhold til et med
	 * fire, og de tre titler landede på hver sin baseline. Topjustering får
	 * titlerne til at flugte og lader samtidig nummerbadgen lande på ikonets
	 * hjørne i stedet for at svæve over det.
	 */
	align-items: start;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.dti-trin__tal {
	position: absolute;
	top: -0.4rem;
	left: -0.4rem;
	z-index: 1;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--wp--custom--radius--round);
	background-color: var(--wp--preset--color--dti-sort);
	color: var(--wp--preset--color--dti-gul);
	font-size: var(--wp--preset--font-size--ui-small);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.dti-trin__ikon {
	width: 3.5rem;
	height: 3.5rem;
}

.dti-trin__tekst {
	font-size: var(--wp--preset--font-size--ui-small);
	line-height: var(--wp--custom--line-height--normal);
}

.dti-trin__tekst strong {
	display: block;
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--manchet);
	margin-bottom: var(--wp--preset--spacing--10);
}

/* -------------------------------------------------------------------------
 * Kategoriside — strammet efter mockup 03
 *
 * Målt mod mockuppen havde siden 42% luft mod mockuppens 21%. Gennemsnittet pr.
 * mellemrum var det samme; problemet var antallet af sektionsgrænser og de
 * største enkeltmellemrum.
 * ---------------------------------------------------------------------- */

/*
 * Sektionerne efter tokolonne-området strammes ét trin. Mønstrene bruges også
 * på forsiden og kontaktsiden, hvor luften er passende, så det gælder kun
 * kategorisidens skabelon. Polstringen ligger inline i blokmarkupen, så
 * `!important` er den eneste vej udenom.
 */
.page-template-page-kategori .dti-kategoriside ~ .wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* Menuens rækker et trin tættere, så listen ikke driver sidens højde. */
@media (min-width: 62em) {
	.dti-katnav__punkt a {
		padding-block: calc(var(--wp--preset--spacing--20) - 2px);
	}
}

/* -------------------------------------------------------------------------
 * Tekstsider (Om os, Værksted)
 * ---------------------------------------------------------------------- */

/* Billeder i brødteksten må gerne bryde ud af læsemålet. */
.dti-tekstside .wp-block-image {
	margin-block: var(--wp--preset--spacing--60);
}

.dti-tekstside .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--sm);
}

.dti-tekstside .wp-block-list {
	padding-left: var(--wp--preset--spacing--50);
}

.dti-tekstside .wp-block-list li {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
 * Historikstribe (Om os)
 * ---------------------------------------------------------------------- */

.dti-historik {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--60);
}

.dti-historik__punkt {
	margin: 0;
	background-color: var(--wp--custom--surface--card);
	border: 1px solid var(--wp--custom--surface--border);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--50);
}

.dti-historik__medie img {
	display: block;
	width: 100%;
	/* Som andre steder: uden height:auto vinder billedets height-attribut. */
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.dti-historik__aar {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--titel-l);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--dti-gul);
	-webkit-text-stroke: 1px var(--wp--preset--color--dti-sort);
	margin: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
	line-height: 1;
}

.dti-historik__titel {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--titel-m);
	font-weight: 700;
	margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50) 0;
	hyphens: none;
}

.dti-historik__tekst {
	font-size: var(--wp--preset--font-size--ui-small);
	margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50) 0;
}

/* -------------------------------------------------------------------------
 * Tekstsider — vekslende to-spaltede sektioner
 *
 * Om os og Værksted brugte tidligere én smal spalte på 46rem og lod resten af
 * bredden ligge tom. De er nu bygget som skiftevis tekst/billede, som mockup 05
 * viser. Læsemålet flytter derfor fra spalten til de enkelte afsnit.
 * ---------------------------------------------------------------------- */

.dti-tekstside .dti-sektion {
	margin-block: var(--wp--preset--spacing--80);
}

.dti-tekstside .dti-sektion:first-child {
	margin-top: 0;
}

/* Afsnit uden for en kolonne holder læsemålet på egen hånd. */
.dti-tekstside > .wp-block-post-content > p {
	max-width: 46rem;
}

.dti-tekstside .wp-block-column > :first-child {
	margin-top: 0;
}

.dti-tekstside .wp-block-column > :last-child {
	margin-bottom: 0;
}

.dti-sektionsfoto img {
	width: 100%;
	/* Uden height:auto vinder billedets egen height-attribut over aspect-ratio. */
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

/* Opgavelisten står som et kort ved siden af teksten. */
.dti-opgaveliste {
	background-color: var(--wp--preset--color--dti-elfenben);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--60);
}

.dti-opgaveliste h3 {
	margin-top: 0;
}

.dti-opgaveliste ul {
	margin-bottom: 0;
	padding-left: var(--wp--preset--spacing--50);
}

.dti-opgaveliste li {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--ui-small);
}

/* Tre korte pointer side om side. */
.dti-sektion--tre {
	margin-top: var(--wp--preset--spacing--50);
}

/* Overskriften står nu over spalterne og skal have luft ned til dem. */
.dti-sektion > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dti-sektion--tre p {
	font-size: var(--wp--preset--font-size--ui-small);
	border-top: 3px solid var(--wp--preset--color--dti-gul);
	padding-top: var(--wp--preset--spacing--40);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Ensretning af produktsidens tre kortrækker
 *
 * Fordele, "Find den løsning" og "Se også" var bygget hver for sig og havde
 * derfor forskellig polstring, titelstørrelse og accentmarkering. De deler nu
 * samme skal: accentkant øverst, ens indvendig luft, ens titel og ens brødtekst.
 * Kun det, der reelt adskiller dem — billede, ikon eller link — er forskelligt.
 * ---------------------------------------------------------------------- */

/* Fælles skal. */
.dti-fordel,
.dti-egenskab,
.dti-kort--se-ogsaa {
	position: relative;
	background-color: var(--wp--custom--surface--card);
	border: 1px solid var(--wp--custom--surface--border);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Accentkant øverst på alle tre — samme 5px som kategorikortene. */
.dti-fordel::before,
.dti-egenskab::before,
.dti-kort--se-ogsaa::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 5px;
	background-color: var(--dti-accent, var(--wp--custom--accent--fallback));
	z-index: 2;
}

/* Egenskabskortet havde kanten som border; den er nu pseudoelementet ovenfor. */
.dti-egenskab--accent {
	border-top: 1px solid var(--wp--custom--surface--border);
}

/* Ens indvendig luft i tekstdelen. */
.dti-fordel__krop,
.dti-egenskab,
.dti-kort--se-ogsaa .dti-kort__krop {
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	flex-grow: 1;
}

/* Billedfelterne deler format, så rækkerne flugter vandret. */
.dti-fordel__medie img,
.dti-kort--se-ogsaa .dti-kort__medie img {
	display: block;
	width: 100%;
	/* Uden height:auto vinder billedets egen height-attribut over aspect-ratio. */
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Accentkanten ligger over billedet, så mediefeltet får luft foroven. */
/*
 * Mediefeltet er nu en `figure` fra core/image, ikke en tom `div`.
 *
 * Core giver `.wp-block-image` en bundmargen på 1em. Den var der ikke før,
 * og kategorisiden voksede 48px, da kortene blev lagt om til rigtige blokke.
 * Margenen nulstilles her, hvor kortets egen polstring bestemmer afstanden.
 */
.dti-fordel__medie,
.dti-kort--se-ogsaa .dti-kort__medie {
	margin: 0;
	padding-top: 5px;
	background-color: var(--wp--preset--color--dti-elfenben);
}

/* Ens titel. */
.dti-fordel__titel,
.dti-egenskab__titel,
.dti-kort--se-ogsaa .dti-kort__titel {
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: var(--wp--preset--font-size--manchet);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
	margin: 0;
	hyphens: none;
}

/* Ens brødtekst. */
.dti-fordel__tekst,
.dti-egenskab p,
.dti-kort--se-ogsaa .dti-kort__link {
	font-size: var(--wp--preset--font-size--ui-small);
	margin: 0;
}

/* Ens ikonfarve og -størrelse. */
.dti-fordel__ikon,
.dti-egenskab__ikon {
	color: var(--wp--preset--color--dti-petrol);
	line-height: 1;
}

/*
 * Ikonet står i en ring over titlen — ikke ved siden af den.
 *
 * Ved siden af titlen ser det bedre ud og matcher mockup 03, men ringen og dens
 * mellemrum koster 60px af kortets bredde. Kundens USP-titler er op til 32 tegn,
 * og de skal stå på én linje. Titlen får derfor hele kortets bredde.
 */
.dti-fordel__ikon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--round);
	/* Ringen følger petrol, ikke accenten — se noten ved .dti-egenskab__ikon. */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--dti-petrol) 35%, transparent);
}

/*
 * Titlen må ikke knække over to linjer.
 *
 * Målt på siden fylder den bredeste af de 54 USP-titler — "Rigtigt tilbehør med
 * det samme" — 282px ved 22px og 231px ved 18px. Kortets tekstfelt er bredden
 * minus 50px kant og polstring, så 22px kræver et kort på mindst 332px.
 *
 * Trinnet hænger på kortets egen bredde, ikke vinduets: gitteret skifter mellem
 * én, to og tre spalter, så den samme vinduesbredde giver vidt forskellige
 * kortbredder. En almindelig media query ville derfor ramme forkert.
 */
.dti-fordel {
	container-type: inline-size;
}

.dti-fordel__titel {
	font-size: var(--wp--preset--font-size--broedtekst);
}

@container (min-width: 22rem) {
	.dti-fordel__titel {
		font-size: var(--wp--preset--font-size--manchet);
	}
}

/* Egenskabskortet har intet billede; det får luft, hvor de andre har foto. */
.dti-egenskab {
	padding-top: var(--wp--preset--spacing--60);
}

/* -------------------------------------------------------------------------
 * Tekstsider — introafsnittet skal flugte med overskrifterne
 * ---------------------------------------------------------------------- */

/*
 * WordPress' constrained-layout centrerer børn med egen max-width. Uden dette
 * stod introafsnittet midt i spalten i stedet for ved venstrekanten sammen med
 * sektionsoverskrifterne. Beholderen er allerede indholdsbred, så en simpel
 * nulstilling er nok her.
 */
.dti-tekstside > .wp-block-post-content > p {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ---------------------------------------------------------------------------
 * Rytme mellem tekstsektioner
 *
 * "Om os" og "Værksted" kører to spaltesektioner efter hinanden på samme hvide
 * bund. Uden en markering løb de sammen til ét langt tekstfelt. Hårstregen og
 * den ekstra luft adskiller emnerne uden at bryde siden op i flere farvebånd.
 * ------------------------------------------------------------------------ */

.dti-sektion + .dti-sektion {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--custom--surface--border);
}