/**
 * Tilbuddet om en pakkeanbefaling.
 *
 * Farverne og skrifterne kommer fra theme.json via `--wp--preset--*`, så en
 * ændring i paletten slår igennem her uden at nogen skal huske det. Reservefarven
 * bag hver `var()` er den samme værdi som i theme.json; den bruges kun, hvis
 * temaets stylesheet af en eller anden grund ikke er nået frem.
 *
 * Dialogen låner sidens egne virkemidler frem for at opfinde nye: mørkeblå
 * bjælke med versaler i Oswald som sidens sektioner, beige streg som skille,
 * og den grønne pilleknap med tynd beige kant, præcis som resten af sidens
 * knapper. En dialog, der ser ud som en fremmed kasse oven på siden, læses som
 * en reklame - en, der ser ud som siden selv, læses som en del af tilbuddet.
 */

.edodsbo-popup {
	max-width: 520px;
	width: calc(100% - 32px);
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--hvid, #FFFFFF);
	color: var(--wp--preset--color--tekst, #515151);
	box-shadow: 0 18px 48px rgba(39, 45, 63, 0.28);

	/* Bjælken øverst er selv afrundet af kortet. Uden `clip` stikker dens
	   firkantede hjørner ud under de runde. */
	overflow: hidden;
}

/* Baggrunden bag dialogen. `::backdrop` arver ikke fra siden, så farven står
   eksplicit. */
.edodsbo-popup::backdrop {
	background: rgba(39, 45, 63, 0.55);
}

/*
 * Toppen. Samme mørkeblå som sidens bånd, med den beige streg forneden som
 * skille. Krydset ligger heri, så det står på mørk baggrund og ikke skal
 * konkurrere med teksten om plads.
 */
.edodsbo-popup__top {
	position: relative;
	padding: 24px 64px 22px 32px;
	border-bottom: 3px solid var(--wp--preset--color--beige, #D4C194);
	background: var(--wp--preset--color--moerkeblaa, #272D3F);
}

.edodsbo-popup__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald, system-ui, sans-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hvid, #FFFFFF);
}

/*
 * Overskriften får fokus, når dialogen åbner, så den bliver læst op først.
 * Den er ikke en betjeningsdel og kan ikke nås med Tab, så den skal ikke have
 * en fokusramme (WCAG 2.4.7 gælder betjeningsdele). Chrome regner alligevel
 * programmatisk fokus for `:focus-visible`, og så stod der en grøn ramme om
 * overskriften, der lignede en fejl.
 */
.edodsbo-popup__titel:focus,
.edodsbo-popup__titel:focus-visible {
	outline: none;
}

.edodsbo-popup__indhold {
	padding: 26px 32px 32px;
	font-size: 17px;
	line-height: 27px;
}

.edodsbo-popup p {
	margin: 0 0 16px;
}

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

.edodsbo-popup__knapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin-top: 24px;
}

/*
 * Samme knap som sidens øvrige: pilleformet, 50 px høj, grøn med en tynd beige
 * kant. Radius skal være større end knappen er høj, ellers bliver hjørnerne
 * bare afrundede i stedet for runde.
 */
.edodsbo-popup__knap {
	display: inline-block;
	padding: 15px 25px;
	border: 2px solid var(--wp--preset--color--beige-moerk, #CDBC8C);
	border-radius: 40px;
	background: var(--wp--preset--color--groen, #4D7E28);
	color: var(--wp--preset--color--hvid, #FFFFFF);
	font-family: var(--wp--preset--font-family--oswald, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.edodsbo-popup__knap:hover,
.edodsbo-popup__knap:focus {
	background: var(--wp--preset--color--groen-hover, #3E6620);
	color: var(--wp--preset--color--hvid, #FFFFFF);
}

/*
 * "Nej tak" er en knap og ikke et link: den udfører en handling på siden,
 * den fører ikke nogen steder hen. Den er understreget, så den ikke kun kendes
 * på at være grå (WCAG 1.4.1), og har samme højde som den grønne, så rækken
 * ikke ser skæv ud.
 */
.edodsbo-popup__afvis {
	min-height: 50px;
	padding: 12px 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
	font-family: inherit;
	font-size: 16px;
	text-decoration: underline;
	cursor: pointer;
}

.edodsbo-popup__afvis:hover {
	color: var(--wp--preset--color--tekst, #515151);
}

/*
 * Krydset i hjørnet. 44x44 px klikmål - langt over kravet på 24 px i 2.5.8,
 * fordi et kryds, man rammer ved siden af, er den mest irriterende knap på en
 * side.
 */
.edodsbo-popup__luk {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--wp--preset--color--beige, #D4C194);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.edodsbo-popup__luk:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--hvid, #FFFFFF);
}

.edodsbo-popup :is(a, button):focus-visible {
	outline: 3px solid var(--wp--preset--color--groen, #4D7E28);
	outline-offset: 2px;
}

/* På den mørke bjælke ville den grønne kontur forsvinde. */
.edodsbo-popup__luk:focus-visible {
	outline-color: var(--wp--preset--color--beige, #D4C194);
}

@media (max-width: 520px) {
	.edodsbo-popup__top {
		padding: 20px 56px 18px 20px;
	}

	.edodsbo-popup__titel {
		font-size: 21px;
	}

	.edodsbo-popup__indhold {
		padding: 22px 20px 24px;
	}

	/* Knapperne stables, og den grønne fylder bredden. På en telefon skal den
	   primære handling ikke deles med et "nej tak". Radius bliver stående, så
	   den stadig er en pilleknap og ikke en firkantet plade. */
	.edodsbo-popup__knapper {
		gap: 4px;
	}

	.edodsbo-popup__knap {
		display: block;
		width: 100%;
		text-align: center;
	}

	.edodsbo-popup__afvis {
		width: 100%;
	}
}