/* ============================================================================
   DT Kontaktformular — frontend
   ----------------------------------------------------------------------------
   Tokens er DT's fælles designtokens (Brand-Kit), defineret på plugin-roden
   .dt-kontakt — ikke på :root, så hverken vores farver lækker ud i temaet eller
   temaets CSS overskriver dem. Alle regler bruger tokens, aldrig løse hex-koder.
   ============================================================================ */

.dt-kontakt {
	/* --- Brand-farver (fra brand kit) --- */
	--dt-skovgroen: #2b4632;
	--dt-barkbrun:  #5a4632;
	--dt-rav:       #c97f3c;
	--dt-cream:     #f4efe6;
	--dt-kul:       #1c1c1a;

	/* --- Semantiske roller --- */
	--dt-brand:        var(--dt-skovgroen);
	--dt-brand-mork:   #213626;
	--dt-brand-toning: #e7ece6;

	--dt-accent:        var(--dt-rav);
	--dt-accent-mork:   #b06e30;
	--dt-accent-toning: #f5e7d8;

	--dt-tekst:           var(--dt-kul);
	--dt-tekst-daempet:   var(--dt-barkbrun);
	--dt-tekst-paa-brand: #ffffff;

	--dt-flade:       #ffffff;
	--dt-flade-2:     var(--dt-cream);
	--dt-kant:        #e3ded4;
	--dt-kant-staerk: #cfc8ba;

	/* --- Status --- */
	--dt-ok:             var(--dt-skovgroen);
	--dt-ok-flade:       var(--dt-brand-toning);
	--dt-advarsel:       #b26a00;
	--dt-advarsel-flade: #fff8e1;
	--dt-fejl:           #c62828;
	--dt-fejl-flade:     #fdecea;

	/* --- Spacing --- */
	--dt-space-1: 4px;
	--dt-space-2: 8px;
	--dt-space-3: 12px;
	--dt-space-4: 16px;
	--dt-space-5: 24px;
	--dt-space-6: 32px;

	/* --- Form --- */
	--dt-radius:      6px;
	--dt-radius-lg:   10px;
	--dt-radius-pill: 999px;

	--dt-skygge:    0 1px 3px rgba(28, 28, 26, 0.12);
	--dt-skygge-lg: 0 4px 16px rgba(28, 28, 26, 0.18);

	/* --- Typografi --- */
	--dt-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--dt-tekst-str:   1rem;
	--dt-tekst-lille: 0.875rem;
	--dt-tekst-mikro: 0.75rem;
	--dt-overskrift:  clamp(1.25rem, 1rem + 1vw, 1.6rem);
	--dt-linjehoejde: 1.5;

	/* --- Fokus --- */
	--dt-fokus-ring: var(--dt-rav);

	/* --- Mindste hit-target (tommelfinger på mobil) --- */
	--dt-hit: 44px;

	font-family: var(--dt-font);
	font-size: var(--dt-tekst-str);
	line-height: var(--dt-linjehoejde);
	color: var(--dt-tekst);

	max-width: 640px;
	margin-inline: auto;
}

/* Fælles fokus-ring. Én ring alle steder, så tastaturbrugere altid kan se,
   hvor de er. :focus-visible frem for :focus — musebrugere skal ikke se en
   ring om hver knap, de klikker på. */
.dt-kontakt :focus-visible {
	outline: 3px solid var(--dt-fokus-ring);
	outline-offset: 2px;
	border-radius: var(--dt-radius);
}

/* ---------------------------------------------------------------------------
   Kortet omkring formularen
   --------------------------------------------------------------------------- */

.dt-kontakt__form {
	background: var(--dt-flade-2);
	border: 1px solid var(--dt-kant);
	border-radius: var(--dt-radius-lg);
	box-shadow: var(--dt-skygge);
	padding: var(--dt-space-5);
}

.dt-kontakt__titel {
	margin: 0 0 var(--dt-space-4);
	color: var(--dt-brand);
	font-size: var(--dt-overskrift);
	font-weight: 700;
	line-height: 1.25;
}

/* ---------------------------------------------------------------------------
   Felter
   --------------------------------------------------------------------------- */

.dt-kontakt__felt {
	margin-bottom: var(--dt-space-4);
}

/* :not(.dt-kontakt__valg) er nødvendigt: radio- og checkbox-labels ligger som
   direkte børn af det samme .dt-kontakt__felt, og uden undtagelsen arver de
   den fede grønne feltoverskrift-stil (og display:block, så de stables). */
.dt-kontakt__felt > label:not(.dt-kontakt__valg),
.dt-kontakt__fieldset > legend {
	display: block;
	margin-bottom: var(--dt-space-1);
	padding: 0;
	color: var(--dt-brand);
	font-weight: 700;
}

.dt-kontakt__felt input[type="text"],
.dt-kontakt__felt input[type="tel"],
.dt-kontakt__felt input[type="email"],
.dt-kontakt__felt select,
.dt-kontakt__felt textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--dt-hit);
	padding: var(--dt-space-2) var(--dt-space-3);
	border: 1px solid var(--dt-kant-staerk);
	border-radius: var(--dt-radius);
	background: var(--dt-flade);
	color: var(--dt-tekst);
	font: inherit;
}

.dt-kontakt__felt textarea {
	min-height: 6em;
	resize: vertical;
}

.dt-kontakt__felt input::placeholder,
.dt-kontakt__felt textarea::placeholder {
	color: var(--dt-tekst-daempet);
	opacity: 0.75;
}

.dt-kontakt__felt input:hover,
.dt-kontakt__felt select:hover,
.dt-kontakt__felt textarea:hover {
	border-color: var(--dt-brand);
}

/* To felter side om side, når der er plads. Under ~460 px falder de i én
   kolonne af sig selv — flex-basis er større end den halve bredde. */
.dt-kontakt__raekke {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--dt-space-4);
}

.dt-kontakt__raekke > .dt-kontakt__felt {
	flex: 1 1 14rem;
}

.dt-kontakt__raekke > .dt-kontakt__felt--smal {
	flex: 0 1 9rem;
}

/* ---------------------------------------------------------------------------
   Radioknapper og checkbox
   --------------------------------------------------------------------------- */

.dt-kontakt__fieldset {
	margin: 0 0 var(--dt-space-4);
	padding: 0;
	border: 0;
}

.dt-kontakt__hjaelp {
	margin: 0 0 var(--dt-space-2);
	color: var(--dt-tekst-daempet);
	font-size: var(--dt-tekst-lille);
}

.dt-kontakt__valg {
	display: flex;
	align-items: center;
	gap: var(--dt-space-2);
	min-height: var(--dt-hit);
	margin: 0;
	color: var(--dt-tekst);
	font-weight: 400;
	cursor: pointer;
}

.dt-kontakt__valg input {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	accent-color: var(--dt-brand);
}

.dt-kontakt__samtykke .dt-kontakt__valg {
	align-items: flex-start;
	padding-block: var(--dt-space-2);
}

.dt-kontakt__samtykke .dt-kontakt__valg input {
	margin-top: 0.2em;
}

.dt-kontakt__samtykke a {
	color: var(--dt-barkbrun);
	text-underline-offset: 2px;
}

.dt-kontakt__samtykke a:hover {
	color: var(--dt-brand);
}

/* ---------------------------------------------------------------------------
   Fejl- og statustilstande
   --------------------------------------------------------------------------- */

.dt-kontakt__fejl {
	margin: var(--dt-space-1) 0 0;
	color: var(--dt-fejl);
	font-size: var(--dt-tekst-lille);
}

.dt-kontakt__fejl:empty {
	display: none;
}

/* Attribut-selektorerne gentages med vilje: uden dem har basis-reglen ovenfor
   HØJERE specificitet end fejl-reglen, og så bliver kun <select> markeret rødt
   (set live — tekstfelterne så helt normale ud, selvom klassen var sat). */
.dt-kontakt__felt--fejl input[type="text"],
.dt-kontakt__felt--fejl input[type="tel"],
.dt-kontakt__felt--fejl input[type="email"],
.dt-kontakt__felt--fejl select,
.dt-kontakt__felt--fejl textarea {
	border-color: var(--dt-fejl);
	background: var(--dt-fejl-flade);
}

.dt-kontakt__status {
	margin: 0 0 var(--dt-space-3);
	padding: var(--dt-space-2) var(--dt-space-3);
	border-radius: var(--dt-radius);
	background: var(--dt-ok-flade);
	color: var(--dt-brand);
	font-weight: 700;
}

.dt-kontakt__status:empty {
	display: none;
}

.dt-kontakt__status--fejl {
	background: var(--dt-fejl-flade);
	color: var(--dt-fejl);
}

/* ---------------------------------------------------------------------------
   Send-knap
   --------------------------------------------------------------------------- */

.dt-kontakt__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--dt-hit);
	padding: var(--dt-space-3) var(--dt-space-5);
	border: 0;
	border-radius: var(--dt-radius);
	/* Skovgrøn + hvid. Rav ville dumpe kontrastkravet med hvid tekst. */
	background: var(--dt-brand);
	color: var(--dt-tekst-paa-brand);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dt-kontakt__send:hover {
	background: var(--dt-brand-mork);
}

.dt-kontakt__send:active {
	transform: translateY(1px);
}

.dt-kontakt__send[disabled] {
	background: var(--dt-kant-staerk);
	color: var(--dt-tekst);
	cursor: progress;
}

/* ---------------------------------------------------------------------------
   Honeypot — skjult for mennesker, men ikke display:none (nogle bots springer
   display:none-felter over, og så virker fælden ikke).
   --------------------------------------------------------------------------- */

.dt-kontakt__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Kvittering og advarsel
   --------------------------------------------------------------------------- */

.dt-kontakt__kvittering {
	padding: var(--dt-space-5);
	border: 1px solid var(--dt-kant);
	border-left: 5px solid var(--dt-brand);
	border-radius: var(--dt-radius-lg);
	background: var(--dt-flade-2);
	box-shadow: var(--dt-skygge);
}

.dt-kontakt__kvittering h3 {
	margin: 0 0 var(--dt-space-2);
	color: var(--dt-brand);
	font-size: var(--dt-overskrift);
	line-height: 1.25;
}

.dt-kontakt__kvittering p {
	margin: 0;
	color: var(--dt-tekst);
}

.dt-kontakt__advarsel {
	margin: 0;
	padding: var(--dt-space-4);
	border-left: 5px solid var(--dt-accent);
	border-radius: var(--dt-radius);
	/* Rav-flade med MØRK tekst — hvid tekst på rav dumper WCAG AA. */
	background: var(--dt-accent-toning);
	color: var(--dt-tekst);
}

/* ---------------------------------------------------------------------------
   Reduceret bevægelse
   --------------------------------------------------------------------------- */

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

	.dt-kontakt__send:active {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Smalle skærme
   --------------------------------------------------------------------------- */

@media (max-width: 30rem) {
	.dt-kontakt__form,
	.dt-kontakt__kvittering {
		padding: var(--dt-space-4);
	}

	/* Fuld bredde på knappen: nemmere at ramme med tommelfingeren. */
	.dt-kontakt__send {
		width: 100%;
	}
}