/**
 * Formularens udseende.
 *
 * Farver og skrifter tages fra temaets `theme.json` via `--wp--preset--*`, så
 * en ændring i paletten slår igennem her uden at nogen skal huske det. Der er
 * med vilje ingen hårdkodede grønne nuancer: den grønne blev mørknet til
 * #4D7E28 for at klare kontrastkravet, og en kopi af den gamle værdi herinde
 * ville have overlevet den rettelse.
 *
 * Faldbackværdierne er der, fordi blokken også kan tegnes i redaktøren og i en
 * kontekst uden temaets variabler.
 */

.edodsbo-formular {
	--edodsbo-form-kant: #C7C7C7;
	--edodsbo-form-fejl: #A4262C;
	--edodsbo-form-tekst: var(--wp--preset--color--tekst, #515151);
	--edodsbo-form-groen: var(--wp--preset--color--groen, #4D7E28);
	--edodsbo-form-groen-hover: var(--wp--preset--color--groen-hover, #3E6620);

	color: var(--edodsbo-form-tekst);
	font-size: 17px;
	line-height: 27px;
}

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

.edodsbo-felt {
	margin-bottom: 20px;
}

.edodsbo-felt__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--wp--preset--color--sort, #1F1F1F);
}

/*
 * `<legend>` arver hverken bredde eller margen fra sin blok i alle browsere, og
 * i Safari kan den ikke få `display: block` uden også at få nulstillet
 * `padding`. Derfor sættes de tre ting eksplicit.
 */
legend.edodsbo-felt__label {
	display: block;
	width: 100%;
	padding: 0;
}

.edodsbo-felt__stjerne {
	color: var(--edodsbo-form-fejl);
}

.edodsbo-felt__hjaelp {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 22px;
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
}

.edodsbo-felt__input {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--edodsbo-form-kant);
	border-radius: 4px;
	background: var(--wp--preset--color--hvid, #FFFFFF);
	color: inherit;
	font-family: inherit;
	font-size: 17px;
	line-height: 25px;
}

.edodsbo-felt__input::placeholder {
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
}

textarea.edodsbo-felt__input {
	resize: vertical;
	min-height: 120px;
}

/*
 * Fokusmarkeringen er en kontur og ikke en skygge: en `box-shadow` forsvinder i
 * Windows' kontrasttilstand, og så har tastaturbrugeren ingen markør
 * (WCAG 2.4.7 og 2.4.11). `outline-offset` holder den fri af feltets egen kant,
 * så de to ikke smelter sammen til én tyk streg.
 */
.edodsbo-formular :is(input, textarea, select, button, a):focus-visible {
	outline: 3px solid var(--edodsbo-form-groen);
	outline-offset: 2px;
}

/* --- Valg og afkrydsning -------------------------------------------------- */

.edodsbo-felt__gruppe {
	margin: 0;
	padding: 0;
	border: 0;
}

.edodsbo-felt__valgmulighed,
.edodsbo-felt__samtykke {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/*
	 * 2.5.8 Target Size (Minimum) kræver 24×24 px. Selve fluebenet er 20 px i de
	 * fleste browsere, så rækken får højde nok til, at hele linjen - flueben og
	 * tekst - er ét klikmål, der er stort nok.
	 */
	min-height: 32px;
	padding: 4px 0;
}

.edodsbo-felt__valgmulighed input,
.edodsbo-felt__samtykke input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--edodsbo-form-groen);
}

.edodsbo-felt__valgmulighed label,
.edodsbo-felt__samtykke label {
	flex: 1 1 auto;
	cursor: pointer;
}

/* --- Fejl ----------------------------------------------------------------- */

/*
 * Fejlen har både farve, et tegn og sin egen tekst. Farven alene ville være i
 * strid med 1.4.1 Use of Color - og ubrugelig for den, der printer siden.
 */
.edodsbo-felt__fejl {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 24px;
	color: var(--edodsbo-form-fejl);
}

.edodsbo-felt__fejlikon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--edodsbo-form-fejl);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.edodsbo-felt--fejl .edodsbo-felt__input {
	border-color: var(--edodsbo-form-fejl);
	border-width: 2px;
	/* Kompensér for den tykkere kant, så feltet ikke hopper 1 px. */
	padding: 10px 11px;
}

.edodsbo-formular__fejlliste {
	margin-bottom: 24px;
	padding: 16px 20px;
	border-left: 4px solid var(--edodsbo-form-fejl);
	background: #FDF3F3;
}

.edodsbo-formular__fejlliste p {
	margin: 0 0 8px;
}

.edodsbo-formular__fejlliste ul {
	margin: 0;
	padding-left: 20px;
}

.edodsbo-formular__fejlliste li {
	margin-bottom: 4px;
}

.edodsbo-formular__fejlliste a {
	color: var(--edodsbo-form-fejl);
}

/* Fejllisten får selv fokus efter indsendelse; konturen om hele boksen ville
   være larmende, så den markeres kun diskret. */
.edodsbo-formular__fejlliste:focus {
	outline: none;
}

.edodsbo-formular__fejlliste:focus-visible {
	outline: 3px solid var(--edodsbo-form-fejl);
	outline-offset: 2px;
}

/* --- Kvittering ----------------------------------------------------------- */

.edodsbo-formular__kvittering {
	padding: 20px 24px;
	border-left: 4px solid var(--edodsbo-form-groen);
	background: var(--wp--preset--color--graa-2, #F7F7F7);
}

.edodsbo-formular__kvittering p {
	margin: 0;
}

.edodsbo-formular__kvittering:focus {
	outline: none;
}

.edodsbo-formular__kvittering:focus-visible {
	outline: 3px solid var(--edodsbo-form-groen);
	outline-offset: 2px;
}

/* --- Knap ----------------------------------------------------------------- */

.edodsbo-formular__handlinger {
	margin-top: 24px;
}

.edodsbo-formular__knap {
	display: inline-block;
	min-height: 48px;
	padding: 12px 32px;
	border: 0;
	border-radius: 4px;
	background: var(--edodsbo-form-groen);
	color: var(--wp--preset--color--hvid, #FFFFFF);
	font-family: var(--wp--preset--font-family--oswald, inherit);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.edodsbo-formular__knap:hover {
	background: var(--edodsbo-form-groen-hover);
}

.edodsbo-formular__knap[disabled] {
	opacity: 0.7;
	cursor: default;
}

/*
 * `hidden` skal vinde over enhver display-regel.
 *
 * Browserens indbyggede stylesheet siger `[hidden] { display: none }`, men den
 * regel har ingen specificitet og taber til hvad som helst med en klasse.
 * `.edodsbo-formular__knap` sætter `display: inline-block`, og resultatet var,
 * at «Tilbage» stod fremme på første trin og «Næste» på det sidste - begge med
 * `hidden` sat, begge synlige.
 *
 * Det er den slags fejl, der ikke kan ses i markup'en: attributten ER der, og
 * JavaScript gør det rigtige. Derfor `!important` - `hidden` betyder «findes
 * ikke», og ingen layoutregel skal kunne diskutere med det.
 */
.edodsbo-formular [hidden],
.edodsbo-formular__form [hidden] {
	display: none !important;
}

.edodsbo-felt__taeller {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
}

/* --- Turnstile ------------------------------------------------------------ */

/*
 * Widgeten fylder kun noget, når Cloudflare beslutter at vise den. I
 * "interaction-only" og "invisible" er elementet tomt, og margenen ville
 * efterlade et hul over knappen. `:not(:empty)` giver kun luft, når der
 * faktisk står noget.
 */
.edodsbo-formular__turnstile:not(:empty) {
	margin: 24px 0 0;
}

/* --- Honningkrukken ------------------------------------------------------- */

/*
 * Ude af syne, men stadig i tilgængelighedstræet som et rigtigt felt - bots
 * læser HTML, ikke CSS, og udfylder det. `display: none` ville være den ene
 * ting, enhver bot tjekker for. Feltet er `aria-hidden` og `tabindex="-1"` i
 * markup'en, så hverken skærmlæser eller tastatur når det.
 */
.edodsbo-formular__krukke {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.edodsbo-formular__advarsel {
	padding: 12px 16px;
	border-left: 4px solid #B26B00;
	background: #FFF8E5;
}

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

@media (max-width: 781px) {
	.edodsbo-formular__knap {
		/* Knappen fylder hele bredden, som resten af sitets CTA'er gør på mobil. */
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------------------- *
 * Spørgsmålstegnet og forklaringen bag det
 *
 * Samme mønster som i sagssystemet: et spørgsmålstegn ved siden af
 * spørgsmålet, som folder en blå hjælpeboks ud. Den blå er sagssystemets
 * informationsfarve og er med vilje en anden end sidens grønne og beige - grøn
 * betyder «gør det her», og en forklaring beder ikke om noget.
 * ------------------------------------------------------------------------- */

.edodsbo-felt--forklaret {
	position: relative;
}

/*
 * Knappen ligger i feltets øverste højre hjørne i stedet for inde i etiketten.
 * En knap inde i et `<label>` ville aktivere selve feltet, når man trykker på
 * den, og et `<legend>` skal være fieldsettets første barn og kan ikke bære en
 * flex-række uden at gå i stykker i ældre browsere.
 */
.edodsbo-forklar__knap {
	position: absolute;
	top: -4px;
	right: 0;
	display: flex;
	align-items: center;
	gap: 6px;

	/* 44px højt klikmål, langt over kravet på 24px i WCAG 2.5.8. */
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: #17295E;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.edodsbo-forklar__tegn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
}

.edodsbo-forklar__ord {
	text-decoration: underline;
}

.edodsbo-forklar__knap:hover {
	color: #2849aa;
}

.edodsbo-forklar__knap:focus-visible {
	outline: 3px solid #2849aa;
	outline-offset: 2px;
}

/* Åben tilstand: tegnet bliver fyldt, så det er til at se på afstand, hvilke
   spørgsmål man har foldet ud. */
.edodsbo-forklar__knap[aria-expanded="true"] .edodsbo-forklar__tegn {
	background: #17295E;
	color: #FFFFFF;
}

/*
 * Etiketten skal holde sig fri af knappen. Uden det løber lange spørgsmål ind
 * under «Hjælp» og bliver ulæselige - og det er netop de lange spørgsmål, der
 * har en forklaring.
 */
.edodsbo-felt--forklaret > .edodsbo-felt__label,
.edodsbo-felt--forklaret > .edodsbo-felt__gruppe > .edodsbo-felt__label {
	padding-right: 96px;
}

.edodsbo-forklar__tekst {
	margin: 0 0 12px;
	padding: 16px 18px;
	border: 1px solid #c0d0ff;
	border-left: 4px solid #2849aa;
	border-radius: 4px;
	background: #F4F7FF;
	color: #17295E;
	font-size: 16px;
	line-height: 25px;
}

.edodsbo-forklar__tekst > :first-child {
	margin-top: 0;
}

.edodsbo-forklar__tekst > :last-child {
	margin-bottom: 0;
}

.edodsbo-forklar__tekst p {
	margin: 0 0 12px;
}

.edodsbo-forklar__tekst a {
	color: #2849aa;
	text-decoration: underline;
}

.edodsbo-forklar__tekst a:hover {
	color: #17295E;
}

/*
 * På smalle skærme fylder «Hjælp» for meget ved siden af spørgsmålet. Kun
 * tegnet bliver stående, og klikmålet forbliver 44px.
 */
@media (max-width: 480px) {
	.edodsbo-forklar__ord {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.edodsbo-felt--forklaret > .edodsbo-felt__label,
	.edodsbo-felt--forklaret > .edodsbo-felt__gruppe > .edodsbo-felt__label {
		padding-right: 44px;
	}
}