/*
Theme Name: eDødsbo Blocks
Theme URI: https://edoedsbo.dk
Author: eDødsbo
Description: Blokke-tema for eDødsbo. Afløser Elementor-opsætningen — al layout og
typografi styres fra theme.json, sektioner genbruges som block patterns.
Version: 1.21.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edodsbo-blocks
Tags: full-site-editing, blocks, one-column, custom-colors, custom-menu
*/

/*
 * Layout og farver bor i theme.json. Her ligger kun det, theme.json ikke kan
 * udtrykke — hovedsageligt interaktionsdetaljer og små korrektioner.
 */

/*
 * Afsnittenes linjehøjde er fast, ikke et forhold.
 *
 * Det gamle tema satte `p { line-height: 25px !important }` for hele sitet, med
 * to undtagelser for bannere og de hvide kort. Reglen slog enhver linjehøjde en
 * Elementor-widget måtte have — én widget står med 8px på 15px tekst, og de
 * værdier har derfor aldrig været brugt. Konverteren skriver dem ikke længere
 * ud på afsnit, så her behøves intet !important.
 *
 * Værdierne er hævet ét trin, da brødteksten gik fra 16 til 17px: 25px på 17px
 * tekst er 1,47 og klemmer linjerne. Forholdet fra 16/25 er beholdt.
 */
p {
	line-height: 27px;
}

.Bannerside p {
	line-height: 32px;
}

.Threebox .box p,
.Ansside .item .box p {
	line-height: 24px;
}

/*
 * Ti sider bar den samme brugerdefinerede CSS i Elementors sideindstillinger.
 * Den er grunden til, at brødteksten på netop de sider er en tone mørkere end
 * widgetens egen farve — det var den forskel, kortene på forsiden viste som
 * #909090 mod produktionens #515151. Den står med !important i Elementor og
 * skal gøre det her også, ellers vinder afsnittets egen inline-stil.
 *
 * Størrelsen er hævet fra Elementors 15 til 16px sammen med resten af
 * brødteksten. Den er stadig ét trin under de øvrige sider, som designet vil.
 *
 * Reglen står nu på `main p`, ikke `body p`. Elementors side-CSS ramte kun
 * sidens indhold; på blokke-temaet ramte den også bundbjælken, hvor firmaets
 * adresse er hvid på mørkeblå. Den blev tvunget til #515151 og stod på ti
 * sider — forsiden iblandt — som 1,3:1 og var i praksis usynlig.
 */
body.page-id-14 main p,
body.page-id-720 main p,
body.page-id-725 main p,
body.page-id-736 main p,
body.page-id-1396 main p,
body.page-id-1460 main p,
body.page-id-1462 main p,
body.page-id-1473 main p,
body.page-id-2240 main p,
body.page-id-4439 main p {
	color: #515151 !important;
	font-size: 16px !important;
	font-weight: 300 !important;
}

/*
 * Elementors "Custom CSS" pr. element. Reglerne er skrevet mod Elementors egen
 * DOM og kan ikke oversættes maskinelt; konverteren sætter i stedet klassen
 * .edodsbo-css-<Elementor-id> på widgeten, så de kan skrives om her.
 * Konverteringen lister de id'er, den har fundet.
 */

/* Forsidens banner. Skal stå efter sidereglen ovenfor og med højere vægt:
   begge er !important, og sidens selektor tæller lige så meget. */
body p.edodsbo-css-f704413,
body .edodsbo-css-f704413 * {
	color: #fff !important;
}

/* Pilen "scroll ned" under forsidens banner — hvid på 14, grå på prisberegneren. */
.edodsbo-css-c08e9c0 p {
	color: #fff !important;
}

.edodsbo-css-7f75eba3 p,
.edodsbo-css-7f75eba3 .edodsbo-ikon {
	color: #bbb !important;
}

/* Brochurekortets overskrift er i virkeligheden en knap. */
#brochure-container h3 {
	margin-bottom: 3rem;
}

#brochure-container h3 > a {
	background: var(--wp--preset--color--groen);
	border-radius: 10em;
	color: var(--wp--preset--color--hvid);
	font-size: 16px;
	letter-spacing: 1.5px;
	padding: 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
}

#brochure-container h3 > a:hover {
	background: var(--wp--preset--color--groen-hover);
}

#iframe_prisberegner,
#iframe_prisberegner iframe {
	border-radius: 20px;
}

/* Foldelistens spørgsmål står mindre og federe end temaets summary. */
.edodsbo-css-ca61063 summary {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

/* Skip-link til tastaturbrugere. */
.skip-link:focus {
	background-color: var(--wp--preset--color--hvid);
	color: var(--wp--preset--color--moerkeblaa);
	outline-offset: 2px;
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

/* Details-blokken erstatter Elementors accordion/toggle. */
.wp-block-details summary {
	/* Overgangen hører til hover-fladen nedenfor. */
	border-radius: 6px;
	color: var(--wp--preset--color--moerkeblaa);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	list-style: none;
	/*
	 * Polstringen stod på blokken i theme.json. Luften så rigtig ud, men kun de
	 * 30px af selve tekstlinjen kunne klikkes — resten var blokkens polstring og
	 * gjorde ingenting. Nu bærer summary luften og er 62px højt klikmål.
	 */
	padding-block: var(--wp--preset--spacing--20);
	/* Den negative margen lader hover-fladen brede sig 8px ud til hver side,
	   mens teksten bliver stående i flugt med resten af sidens indhold. */
	margin-inline: -0.5rem;
	padding-inline: 0.5rem 2.5rem;
	position: relative;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hele rækken lyser op — ikke kun teksten — så man kan se, hvad man rammer.
   Farveskiftet er ikke eneste signal: fladen skifter med. */
.wp-block-details summary:hover {
	background-color: var(--wp--preset--color--graa-2);
	color: var(--wp--preset--color--groen);
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--moerkeblaa);
	outline-offset: -2px;
}

/*
 * Uden blokkens polstring lå indholdet klods op ad stregen nedenunder, når
 * panelet var åbent. Luften hører kun til den åbne tilstand: lukket har
 * summary sin egen.
 */
.wp-block-details[open] {
	padding-bottom: var(--wp--preset--spacing--20);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/*
 * Vinklen sad på første linjes højde. Med et klikmål på 62px — og på spørgsmål
 * i FAQ'en, der bryder over to linjer — hører den midt i rækken i stedet.
 * translateY er -60% og ikke -50%, fordi den roterede firkants tyngdepunkt
 * ligger over dens midte: kun to af kanterne er streger.
 */
.wp-block-details summary::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	height: 0.5em;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-60%) rotate(45deg);
	transition: transform 0.2s ease;
	width: 0.5em;
}

.wp-block-details[open] summary::after {
	transform: translateY(-60%) rotate(-135deg);
}

/*
 * Genvejsmenuen i toppen af FAQ'en.
 *
 * 70 spørgsmål i syv grupper er for langt at rulle sig igennem for at finde
 * det, man kom efter. Menuen er syv links til gruppernes ankre; hvert link ser
 * ud som en knap, så det er tydeligt, at rækken kan klikkes — den ville ellers
 * ligne en punktopstilling af emner.
 */
.edodsbo-faq-genveje {
	background-color: var(--wp--preset--color--graa-2);
	border-radius: 1rem;
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
}

.edodsbo-faq-genveje__titel {
	color: var(--wp--preset--color--moerkeblaa);
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 400;
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* Punkttegnene og indrykningen hører til en liste, der læses; den her springes
   man igennem, og linkene skal kunne stå side om side. */
.edodsbo-faq-genveje__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.edodsbo-faq-genveje__liste li {
	margin: 0;
}

.edodsbo-faq-genveje__liste a {
	background-color: var(--wp--preset--color--hvid);
	border: 1px solid var(--wp--preset--color--graa-3);
	border-radius: 999px;
	color: var(--wp--preset--color--moerkeblaa);
	display: block;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--medium);
	/* 0.7rem lodret giver 44px klikmål på et link med 17px tekst. */
	padding: 0.7rem 1.1rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Farveskiftet er ikke eneste signal: hele fladen og kanten skifter med. */
.edodsbo-faq-genveje__liste a:hover,
.edodsbo-faq-genveje__liste a:focus-visible {
	background-color: var(--wp--preset--color--groen);
	border-color: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--hvid);
}

.edodsbo-faq-genveje__liste a:focus-visible {
	outline: 2px solid var(--wp--preset--color--moerkeblaa);
	outline-offset: 2px;
}

/*
 * Springet skal ikke lande bag den klæbende header.
 *
 * Højden kommer fra inc/faq-genveje.php, som måler headeren og sætter
 * --edodsbo-header-h. Uden variablen (script slået fra) falder afstanden
 * tilbage til de 1,5rem, og så er springet stadig brugbart — bare tættere på
 * kanten. Målene får også et fokusomrids fjernet: de får tabindex="-1" af
 * scriptet, så tastaturet fortsætter fra det rette sted, men de er ikke
 * betjeningselementer, og et omrids omkring en overskrift ville forvirre.
 */
.wp-block-details[id],
.wp-block-heading[id] {
	scroll-margin-top: calc(var(--edodsbo-header-h, 0px) + 1.5rem);
}

.wp-block-details[id]:focus,
.wp-block-heading[id]:focus {
	outline: none;
}

/*
 * Ikon-/billedbokse. Elementors image-box og icon-box er konverteret til
 * grupper med denne klasse, så de kan styles ét sted.
 */
/*
 * Højden må kun strækkes, når boksen står alene hos sin forælder — det er
 * tilfældet for kort i et gitter, hvor de skal flugte i bunden.
 *
 * Ligger der flere bokse i samme kolonne, er 100% kolonnens *fulde* højde for
 * hver af dem. Kolonnen får sin højde af det samlede indhold, hvorefter hver
 * boks vokser til hele den højde: tre bokse på 313px giver en kolonne på 938px
 * og derefter tre bokse på 938px. Indholdet løber ud af kolonnen og lægger sig
 * oven i næste kolonne — på prisberegneren stod spørgsmål og svar oven i
 * hinanden på mobil og efterlod 450px tomt hul på desktop.
 */
.edodsbo-boks:only-child {
	height: 100%;
}

.edodsbo-boks .wp-block-image img {
	display: block;
}

/*
 * Centrerede billeder i en boks skal blive på midten.
 *
 * `aligncenter` centrerer selve figuren med auto-margener, men `.edodsbo-boks
 * > *` giver figuren hele boksens bredde, så der er ikke noget tilovers at
 * fordele. Billedet indeni er `display: block` uden egne margener og lagde sig
 * derfor i figurens venstre kant — 138 px til venstre for de centrerede
 * titler i sidefodens tre fordele. Auto-margenerne skal ned på billedet, hvor
 * der stadig er plads at fordele.
 */
.edodsbo-boks .wp-block-image.aligncenter img {
	margin-inline: auto;
}

.edodsbo-boks__titel {
	margin-bottom: 0.5rem;
}

/* Bokse i et gitter skal have ens højde. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .edodsbo-boks {
	display: flex;
	flex-direction: column;
}

/*
 * Headeren fulgte med ned ad siden i Elementor-opsætningen — men kun på
 * desktop, hvor der er plads til den. På mobil ville den æde skærmen.
 */
@media (min-width: 768px) {
	.edodsbo-header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/*
 * De to bjælker i headeren sidder klods op ad hinanden. WordPress' layout-CSS
 * skriver temaets blockGap direkte som margin-block-start, så det hjælper ikke
 * at nulstille --wp--style--block-gap; margenen skal fjernes på selve bjælken.
 */
.edodsbo-header > * + * {
	margin-block-start: 0;
}

/* Topbjælken: kontakt til venstre, logo i midten, genveje til højre. */
.edodsbo-header__bjaelke .wp-block-columns {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block: 0;
}

/* Elementors kolonner har 10px hele vejen rundt. Uden den lodrette del bliver
   topbjælken 61px i stedet for 81px, og logoet sidder for tæt på navigationen. */
.edodsbo-header__bjaelke .wp-block-column {
	padding-block: 10px;
}

.edodsbo-header .wp-block-site-logo img {
	margin-inline: auto;
}

/*
 * Kontaktlinjen er Oswald 300/14px med hvid tekst og beige ikoner — de to
 * farver bærer hele topbjælkens udtryk.
 */
.edodsbo-header__bjaelke .edodsbo-ikonliste {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	font-weight: 300;
	letter-spacing: 0.2px;
	line-height: 1.5;
}

/* Ikonerne i topbjælken er 14px — samme størrelse som teksten, ikke 1,15em
   som i brødteksten. */
.edodsbo-header__bjaelke .edodsbo-ikon {
	color: var(--wp--preset--color--beige);
	height: 1em;
	width: 1em;
}

.edodsbo-footer__kontakt {
	font-size: 0.9rem;
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * Momslinjen står direkte på det beige bånd — resten af båndets tekst ligger på
 * hvide kort. Brødtekstgråt giver 4,5:1 mod beige på 13,6px tekst og lander
 * lige under AA; mørkeblå giver 7,7:1 og er i forvejen båndets overskriftsfarve.
 */
footer.has-beige-background-color > p {
	color: var(--wp--preset--color--moerkeblaa);
}

/* Trustpilot-mærket er en wordmark, ikke et ikon — det skal ikke skaleres
   med teksthøjden som de øvrige. */
.edodsbo-tp-logo {
	height: auto;
	vertical-align: middle;
	width: 90px;
}

/*
 * Stjernestriben i anmeldelsesafsnittet står i sideindholdet med width="180"
 * height="24" — men kilden er 370x62. Uden height:auto trykker browseren de
 * 62px ned i 24 og gør stjernerne 26% for brede. Billedet ligger på 16 sider,
 * så det rettes her frem for i hver enkelt side.
 */
img[src$="/Trustpilot.jpg"] {
	height: auto;
}

/*
 * Navigationen. Elementor-menuen var 54px høj med 33px mellem punkterne;
 * kerneblokken lander på det halve, hvis den ikke får målene med.
 */
.edodsbo-navbar .wp-block-navigation {
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 1.1px;
}

/*
 * De to bjælker er #272D3F og #373E55 — så tæt på hinanden, at navigationen
 * læses som en stribe og ikke som sin egen bjælke. Den tynde beige streg er
 * den samme farve som logoet og ikonerne i topbjælken og skiller de to ad
 * uden at lægge endnu en flade på.
 */
.edodsbo-navbar {
	border-top: 1px solid rgb(212 193 148 / 22%);
}

/*
 * Afstanden lå før alene i blokkens blockGap på 33px, så punkterne stod som
 * en klump midt i en 1200px bred bjælke, og der var intet at holde musen hen
 * over. Nu bærer punkterne selv luften som vandret polstring: markeringen
 * nedenunder får en bredde, der svarer til punktet, og rækken får plads at
 * ånde i.
 */
/*
 * Alt herunder gælder kun den vandrette bjælke. Under 768px er navigationen et
 * fuldskærmsoverlay med sine egne regler længere nede — dér er undermenuerne
 * indrykkede rækker i fuld bredde, ikke svævende paneler, og en markering under
 * punktet ville blive en guldstribe tværs over skærmen.
 *
 * Brudpunktet var kernens eget for overlayMenu: mobile, altså 600px. Men
 * mellem 600 og 782px kunne punkterne ikke stå på én række: bjælken brød over
 * tre linjer, og headeren blev 234px høj. Overlayet gælder derfor til 782px —
 * samme sted som WordPress holder op med at stable kolonner — og hamburgeren
 * tvinges frem i båndet nedenfor.
 */
@media (min-width: 782px) {
	.edodsbo-navbar .wp-block-navigation__container {
		gap: 0.5rem;
	}

	.edodsbo-navbar .wp-block-navigation-item__content {
		/* 21 + 16 + 21 = 58px. Uden linjehøjden arver punkterne temaets 1,7. */
		line-height: 16px;
		padding-block: 21px;
		padding-inline: 1.25rem;
		position: relative;
		transition: color 0.2s ease;
	}

	/*
	 * Markeringen under det aktive og det berørte punkt. Den vokser ud fra
	 * venstre frem for at blinke frem, så bjælken får liv uden at flytte noget.
	 * Farven er aldrig eneste signal — punktet skifter også tekstfarve.
	 */
	.edodsbo-navbar .wp-block-navigation-item__content::after {
		background: var(--wp--preset--color--beige);
		bottom: 0;
		content: "";
		height: 2px;
		inset-inline: 1.25rem;
		position: absolute;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.25s ease;
	}

	.edodsbo-navbar .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
	.edodsbo-navbar .wp-block-navigation-item__content:focus-visible::after,
	.edodsbo-navbar .current-menu-item > .wp-block-navigation-item__content::after,
	.edodsbo-navbar .current-menu-ancestor > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}

	.edodsbo-navbar .current-menu-item > .wp-block-navigation-item__content,
	.edodsbo-navbar .current-menu-ancestor > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--beige);
	}

	.edodsbo-navbar .wp-block-navigation__submenu-icon {
		padding-inline-start: 0.35em;
		transition: transform 0.2s ease;
	}

	.edodsbo-navbar .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
		transform: rotate(180deg);
	}

	/*
	 * Undermenuen var 200px bred med polstring 0, så punkterne stod klods op ad
	 * begge kanter, og den havde hverken skygge eller afrunding — den lignede et
	 * hul i bjælken frem for et lag oven på siden.
	 */
	.edodsbo-navbar .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--moerkeblaa);
		border: 0;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 14px 30px rgb(0 0 0 / 22%);
		padding-block: 0.5rem;
	}

	/*
	 * Bredden kræver fem klasser. Den regel, der bestemmer den åbne undermenu,
	 * er kernens
	 * `.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container`
	 * med `width: auto; min-width: 200px`. Ved 200px brød halvdelen af punkterne
	 * under Vejledning over to linjer. Temaets stylesheet indlæses efter
	 * block-library, så samme vægt er nok.
	 *
	 * max-content med et loft lader korte menuer beholde de 260px og giver de
	 * lange etiketter én linje.
	 *
	 * Bemærk `.wp-block-navigation.wp-block-navigation__container`: kernen sætter
	 * begge klasser på den samme <ul>, så en efterkommer-selektor mellem de to
	 * matcher aldrig noget. Kun første niveau skal være bredere.
	 */
	.edodsbo-navbar .wp-block-navigation.wp-block-navigation__container > .wp-block-navigation-item.wp-block-navigation-submenu.has-child > .wp-block-navigation__submenu-container {
		max-width: 330px;
		min-width: 260px;
		width: max-content;
	}

	/*
	 * Tredje niveau åbner mod højre ud fra andet niveau. Da andet niveau blev
	 * bredere, nåede tredje ud over skærmkanten i et 1280px-vindue. Det åbner
	 * derfor mod venstre i stedet — punkterne med undermenuer sidder i menuens
	 * højre side, så der er rigeligt plads den vej.
	 *
	 * `left` skal sættes til auto med samme vægt som kernens `left: 100%`,
	 * ellers vinder venstrekanten over højrekanten, og `right` er uden virkning.
	 */
	.edodsbo-navbar .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		border-radius: 10px;
		left: auto;
		right: 100%;
	}

	/*
	 * Sidste punkt i bjælken er Vejledning, og dens panel er 260-330px bredt.
	 * Panelet åbner fra punktets venstrekant, så på en skærm mellem 782 og
	 * 850px stak det 11-47px ud over kanten og gav siden en vandret rullebjælke,
	 * selv om menuen var lukket — absolut placerede elementer tæller med i
	 * scrollWidth. Det sidste punkt åbner derfor mod venstre ud fra sin
	 * højrekant.
	 */
	.edodsbo-navbar .wp-block-navigation.wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}

	.edodsbo-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		line-height: 1.45;
		padding-block: 0.65rem;
		padding-inline: 1.4rem;
		white-space: normal;
	}

	/* Markeringen hører til den vandrette bjælke. I undermenuen markeres punktet
	   i stedet med sin egen flade, som er hele rækkens bredde og dermed et
	   større mål at ramme. */
	.edodsbo-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		content: none;
	}

	.edodsbo-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	.edodsbo-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: rgb(212 193 148 / 12%);
		color: var(--wp--preset--color--beige);
	}
}

@media (max-width: 781.98px) {
	/* De 20px lodret polstring hører til desktopbjælken, hvor logoet er 166px
	   bredt. Logoets og bjælkens mobilmål står i én-linje-blokken længere nede. */
	.edodsbo-header__bjaelke .wp-block-column {
		padding-block: 0;
	}
}

/*
 * Elementors responsive synlighed. Brudpunkterne er Elementors egne, så et
 * element skjules præcis dér hvor det blev skjult før.
 */
@media (max-width: 767px) {
	.edodsbo-skjul-mobil { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.edodsbo-skjul-tablet { display: none !important; }
}

@media (min-width: 1025px) {
	.edodsbo-skjul-desktop { display: none !important; }
}

/*
 * Den åbne mobilmenu. Kerneblokken centrerer punkterne midt på skærmen, hvor
 * de flyder sammen; her er de en venstrestillet liste i fuld bredde med tynde
 * skillelinjer, så hele rækken er et klikmål og undermenuerne kan ses at høre
 * til deres forælder.
 *
 * .edodsbo-navbar skal med i hver selektor: kernens egne overlay-regler har
 * samme specificitet og indlæses efter temaets stylesheet, så uden den ekstra
 * klasse vinder de.
 */
.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 72px 0 28px;
	width: 100%;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	width: 100%;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.7px;
	line-height: 1.4;
	padding: 15px 24px;
	text-align: left;
	width: 100%;
}

/*
 * Undermenuen er indrykket og beige, så niveauet kan ses uden at klikke.
 * Indrykningen ligger på teksten, ikke på beholderen, så skillelinjerne
 * bliver ved med at gå fra kant til kant.
 */
.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	/* Undermenuen er en flex-boks, der ellers kun bliver så bred som sit
	   længste punkt — så bliver skillelinjerne forskellige i længde. */
	left: auto;
	/* !important: kernens egne regler har samme specificitet og står efter.
	   Uden dem beholder undermenuen sin egen polstring og sit mellemrum, og
	   skillelinjerne bliver forskellige i længde. */
	gap: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	width: 100%;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	width: 100%;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--beige);
	font-size: 14px;
	padding-block: 11px;
	padding-left: 44px;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 64px;
}

.edodsbo-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	right: 20px;
	top: 20px;
}

/* Log ind i navigationsbjælken findes kun på telefon. !important fordi
   .edodsbo-ikonliste--inline sætter display: flex længere nede med samme
   specificitet — uden det stod Log ind også i desktop-menuen. */
.edodsbo-kun-mobil {
	display: none !important;
}

/* 781.98px: Log ind hører til hamburgerlinjen, og den holder til 782px, hvor
   kolonnerne holder op med at stables. */
@media (max-width: 781.98px) {
	.edodsbo-kun-mobil {
		display: flex !important;
	}

	.edodsbo-navbar__login {
		font-family: var(--wp--preset--font-family--oswald);
		font-weight: 300;
		justify-content: center;
		text-transform: uppercase;
	}

	.edodsbo-navbar__login .edodsbo-ikon {
		color: var(--wp--preset--color--beige);
	}
}

/*
 * Telefon: logo, Log ind og hamburger på én linje.
 *
 * Headeren var tre bjælker under hinanden — logo, hamburger, Log ind — og
 * fyldte 135px, før indholdet begyndte. De tre elementer sidder i hver sin
 * blok (logoet i topbjælkens kolonner, hamburgeren inde i navigationsblokken),
 * så rækken laves her: headeren bliver et gitter med to spor, topbjælken i det
 * første og navigationsbjælken i det andet. Bjælkerne beholder deres egne
 * elementer — `header` og `nav` skal blive ved med at være landemærker, så de
 * må ikke fjernes med display: contents.
 *
 * Brudpunktet er 782px — det sted, hvor WordPress holder op med at stable
 * kolonner, og hvor topbjælken derfor først kan være tre kolonner på en linje.
 * Under det stod headeren i tre til fem rækker; på en iPad i portræt (768px)
 * var den 270px høj. .98 fordi den vandrette bjælke begynder på min-width:
 * 782px — et helt tal her ville lade begge sæt regler gælde på præcis 782px.
 */
@media (max-width: 781.98px) {
	/*
	 * Kernen viser den vandrette menu og skjuler hamburgeren fra 600px, fordi
	 * blokken står med overlayMenu: mobile. Rækken kan ikke bære punkterne så
	 * tidligt, så hamburgeren bliver her indtil 782px.
	 *
	 * Selektorerne gentager kernens :not()-led og lægger .edodsbo-navbar oven i:
	 * block-library indlæses efter temaet, så samme vægt ville tabe.
	 */
	.edodsbo-navbar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.edodsbo-navbar .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.edodsbo-header {
		align-items: center;
		/* Farven flyttes op på headeren, så den dækker hele rækkens højde:
		   sporene er ikke lige høje (hamburgeren er 44px, logoet 28px), og
		   topbjælkens egen flade ville efterlade en stribe under logoet. */
		background-color: var(--wp--preset--color--moerkeblaa);
		/* Den beige streg skilte de to bjælker. Nu er der én bjælke, så stregen
		   flytter ned og skiller headeren fra banneret. */
		border-bottom: 1px solid rgb(212 193 148 / 22%);
		column-gap: 4px;
		display: grid;
		/* minmax(0, 1fr): logoets spor må gerne blive smallere end sit indhold
		   på en 320px skærm, i stedet for at skubbe hamburgeren ud over kanten. */
		grid-template-columns: minmax(0, 1fr) auto;
		/* 4px + hamburgerknappens egne 10px = 14px til ikonet, det samme som
		   topbjælkens 10px inline-polstring + 4px giver logoet. */
		padding-inline: 4px;
	}

	/* Navigationsbjælken er ikke længere sin egen flade. !important fordi
	   WordPress skriver farveklasserne fra paletten med !important. */
	.edodsbo-navbar {
		align-items: center;
		background-color: transparent !important;
		border-top: 0;
		display: flex;
		gap: 4px;
		justify-content: flex-end;
	}

	/* Bjælken er et constrained layout: kernen giver hvert barn 1200px og
	   margin-inline: auto, og de auto-margener ville skubbe hamburgeren og
	   Log ind fra hinanden i flex-rækken. */
	.edodsbo-navbar > * {
		margin-inline: 0;
		max-width: none;
	}

	/* Log ind står før hamburgeren for øjet, men efter den i koden. */
	.edodsbo-navbar__login {
		order: -1;
	}

	/* Kun logoets kolonne — den anden — hører til linjen. Kontaktoplysningerne
	   og genvejene står i bunden af siden på de her bredder, og kolonnerne
	   stables under 782px, så de tomme kolonner lagde rækker under logoet. */
	.edodsbo-header__bjaelke .wp-block-column:not(:nth-child(2)) {
		display: none;
	}

	/* Logoet er centreret på tre bjælker; på én linje hører det til venstre.
	   Centreringen ligger både på .aligncenter og på img'ets auto-margener. */
	.edodsbo-header .wp-block-site-logo {
		text-align: left;
	}

	.edodsbo-header .wp-block-site-logo img {
		margin-inline: 0;
		/* 96px var målet fra produktionens tre-bjælke-header. Med kun én bjælke
		   er der plads til logoet i fuld højde, men det må ikke tage pladsen
		   fra Log ind på en smal skærm. */
		width: clamp(96px, 30vw, 116px);
	}

	/* Hamburgeren var kernens 24px ikon uden flade omkring — under WCAG 2.2's
	   24x24 med god margin, og svær at ramme. 44px er AAA-målet. */
	.edodsbo-navbar .wp-block-navigation__responsive-container-open {
		align-items: center;
		border-radius: 6px;
		display: flex;
		height: 44px;
		justify-content: center;
		padding: 0;
		width: 44px;
	}

	.edodsbo-navbar .wp-block-navigation__responsive-container-open svg {
		height: 24px;
		width: 24px;
	}

	.edodsbo-navbar .wp-block-navigation__responsive-container-open:focus-visible {
		outline: 2px solid var(--wp--preset--color--beige);
		outline-offset: 2px;
	}

	/* Log ind var en bjælke i fuld bredde med en streg over. På linjen er den
	   en knap: beige kant som logoet og ikonerne, og 36px højt klikmål.
	   .edodsbo-navbar skal med: .edodsbo-ikonliste nulstiller padding-left
	   længere nede i filen og vinder ellers på rækkefølgen. */
	.edodsbo-navbar .edodsbo-navbar__login {
		align-items: center;
		border: 1px solid rgb(212 193 148 / 45%);
		border-radius: 999px;
		font-size: 0.8125rem;
		gap: 0.4em;
		letter-spacing: 0.5px;
		min-height: 36px;
		padding: 0 0.85rem;
		white-space: nowrap;
	}

	.edodsbo-navbar__login li > a {
		gap: 0.45em;
	}

	/* Topbjælken bar 2px lodret polstring, fordi tre bjælker skulle nå at være
	   der før indholdet. Én linje er 45-49px høj og kan bære lidt mere luft. */
	.edodsbo-header__bjaelke {
		padding-block: 4px;
	}
}

/*
 * Responsiv polstring og skriftstørrelse. Blokke kan kun ét sæt værdier;
 * konverteren lægger brudpunkternes værdier i custom properties her.
 */
@media (max-width: 1024px) {
	/* !important fordi konverteren skriver desktop-polstringen som inline-style;
	   uden det kan brudpunktet aldrig komme til. */
	/* Billedernes brudpunktsstørrelser. Elementor skalerer ikonerne ned fra
	   67px til 50px, når kortene stables. */
	.edodsbo-billed-tablet {
		max-width: var(--edodsbo-billed-tablet-max-width, 100%);
		width: var(--edodsbo-billed-tablet-width, auto);
	}

	.edodsbo-pad-tablet {
		padding-top: var(--edodsbo-pad-tablet-top) !important;
		padding-right: var(--edodsbo-pad-tablet-right) !important;
		padding-bottom: var(--edodsbo-pad-tablet-bottom) !important;
		padding-left: var(--edodsbo-pad-tablet-left) !important;
	}

	/* Samme additive model som .edodsbo-mar-ekstra, bare med brudpunktets
	   værdier. */
	.edodsbo-mar-tablet:not(:first-child) {
		margin-block-start: calc(var(--wp--style--block-gap, 0px) + var(--edodsbo-mar-tablet-top)) !important;
	}

	.edodsbo-mar-tablet:first-child {
		margin-block-start: var(--edodsbo-mar-tablet-top) !important;
	}

	.edodsbo-mar-tablet {
		margin-block-end: var(--edodsbo-mar-tablet-bottom) !important;
	}

	.edodsbo-marx-tablet {
		margin-left: var(--edodsbo-marx-tablet-left) !important;
		margin-right: var(--edodsbo-marx-tablet-right) !important;
	}
}

@media (max-width: 767px) {
	.edodsbo-pad-mobil {
		padding-top: var(--edodsbo-pad-mobil-top) !important;
		padding-right: var(--edodsbo-pad-mobil-right) !important;
		padding-bottom: var(--edodsbo-pad-mobil-bottom) !important;
		padding-left: var(--edodsbo-pad-mobil-left) !important;
	}

	.edodsbo-mar-mobil:not(:first-child) {
		margin-block-start: calc(var(--wp--style--block-gap, 0px) + var(--edodsbo-mar-mobil-top)) !important;
	}

	.edodsbo-mar-mobil:first-child {
		margin-block-start: var(--edodsbo-mar-mobil-top) !important;
	}

	.edodsbo-mar-mobil {
		margin-block-end: var(--edodsbo-mar-mobil-bottom) !important;
	}

	.edodsbo-marx-mobil {
		margin-left: var(--edodsbo-marx-mobil-left) !important;
		margin-right: var(--edodsbo-marx-mobil-right) !important;
	}

	.edodsbo-fs-responsiv {
		font-size: var(--edodsbo-fs-mobil) !important;
	}

	.edodsbo-billed-mobil {
		max-width: var(--edodsbo-billed-mobil-max-width, 100%);
		width: var(--edodsbo-billed-mobil-width, auto);
	}

	.edodsbo-lh-responsiv {
		line-height: var(--edodsbo-lh-mobil) !important;
	}

	.edodsbo-ls-responsiv {
		letter-spacing: var(--edodsbo-ls-mobil) !important;
	}

	/* Knapper står side om side på desktop, men centreret når kolonnerne
	   stables — ellers falder de ud til hver sin kant. Klassen skrives sammen
	   med .wp-block-buttons, fordi WordPress' egen layout-regel ellers vinder. */
	.wp-block-buttons.edodsbo-knap-mobil-center { justify-content: center; }
	.wp-block-buttons.edodsbo-knap-mobil-left   { justify-content: flex-start; }
	.wp-block-buttons.edodsbo-knap-mobil-right  { justify-content: flex-end; }

	/*
	 * Elementors vandrette forskydninger er regnet til desktopbredden. Et
	 * billede med margin-left:-120px står pænt forskudt i en 1170px-spalte,
	 * men trækkes 100px ud over venstre skærmkant på en 390px-skærm. Der er
	 * ingen brudpunktsværdi at falde tilbage på, så forskydningen nulstilles.
	 */
	.wp-block-image[style*="margin-left:-"] {
		margin-left: 0 !important;
	}

	.wp-block-image[style*="margin-right:-"] {
		margin-right: 0 !important;
	}
}

/*
 * Elementors margener er finjusteringer *oven i* afstanden mellem elementer,
 * ikke erstatninger for den: en sektion med margin-top -10px rykker 10px op
 * fra sin normale plads. Skriver man den som en almindelig margin-top, ryger
 * afstanden i stedet helt — og bannerets knapper landede oven på rubrikken.
 *
 * Afstanden ligger på det efterfølgende element som margin-block-start, så
 * første og sidste barn regnes hver for sig. WordPress' egne layoutregler er
 * pakket i :where() og har derfor specificitet 0; klassen her vinder uden
 * !important.
 */
/*
 * Overskrifter skrevet direkte i en text-editor havde i Elementor-temaet deres
 * egen luft ovenover (35px). Widgeternes negative margener er tunet mod netop
 * den, så uden den lægger bannerets underrubrik sig oven i overskriften.
 */
.edodsbo-tekst-overskrift {
	--edodsbo-h-margin: 35px;
}

/*
 * Custom properties nedarves. Uden en nulstilling her arver et element med
 * .edodsbo-mar-ekstra sin forælders værdier, hvis det ikke selv sætter dem —
 * en overskrift midt på siden fik -40px i bundmargen fra sin sektion og lagde
 * sig oven i teksten nedenunder. Elementets egen inline-værdi vinder stadig.
 */
.edodsbo-mar-ekstra {
	--edodsbo-mar-bottom: 0px;
	--edodsbo-mar-top: 0px;
}

.edodsbo-mar-ekstra:not(.edodsbo-tekst-overskrift) {
	--edodsbo-h-margin: 0px;
}

.edodsbo-tekst-overskrift:not(:first-child) {
	margin-block-start: calc(var(--wp--style--block-gap, 0px) + var(--edodsbo-h-margin, 0px));
}

.edodsbo-mar-ekstra:not(:first-child) {
	margin-block-start: calc(var(--wp--style--block-gap, 0px) + var(--edodsbo-mar-top, 0px) + var(--edodsbo-h-margin, 0px));
}

.edodsbo-mar-ekstra:first-child {
	margin-block-start: var(--edodsbo-mar-top, 0px);
}

/* Bundmargenen står rå: afstanden ligger på det næste element som en topmargen,
   og de to lægges sammen — præcis som i Elementor, hvor -20px på en overskrift
   netop ophæver de 20px til det næste element. */
.edodsbo-mar-ekstra {
	margin-block-end: var(--edodsbo-mar-bottom, 0px);
}

/*
 * Sektioner der rummer et kort med negativ margen. flow-root giver gruppen sin
 * egen block formatting context, så kortet løfter sig alene i stedet for at
 * trække sektionens baggrund med op.
 */
.edodsbo-ingen-kollaps {
	display: flow-root;
}

/*
 * Trinlisten på /forloebet-i-et-doedsbo/.
 *
 * Ikonerne lå før som <img class="alignleft"> i deres eget tomme afsnit. Floaten
 * gav hvert ikon en linje for sig selv med et hul ned til den tekst, det hører
 * til — ikonet stod løsrevet fra sit trin. Her ligger ikonet i sin egen kolonne
 * ved siden af overskriften, og den lodrette linje mellem ikonerne binder
 * trinnene sammen på samme måde som tidslinjegrafikken øverst på siden.
 */
.edodsbo-trin {
	--edodsbo-trin-ikon: 70px;

	column-gap: clamp(1rem, 3vw, 2rem);
	display: grid;
	grid-template-columns: var(--edodsbo-trin-ikon) minmax(0, 1fr);
	padding-bottom: clamp(2rem, 4vw, 3rem);
	position: relative;
}

/* Alt andet end ikonet står i tekstkolonnen. Kernens flow-layout skriver sin
   afstand i :where() og har derfor specificitet 0; klassen her vinder. */
.edodsbo-trin > * {
	grid-column: 2;
	margin-block-start: 1rem;
}

.edodsbo-trin > .edodsbo-trin__ikon {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.edodsbo-trin__ikon img {
	display: block;
	height: auto;
	width: 100%;
}

/* Overskriften centreres mod ikonet, så de to læses som ét. */
.edodsbo-trin > .edodsbo-trin__titel {
	align-self: center;
	margin-block: 0;
}

/*
 * Fristen stod før inde i overskriften som en parentes. Som sit eget mærke er
 * den til at skimme ned gennem siden. Mørkeblå på lysegrå frem for den olivenrøde
 * #7f7341, teksten havde i Elementor — den har 3,2:1 mod hvid og er for svag.
 */
.edodsbo-trin > .edodsbo-trin__frist {
	background: var(--wp--preset--color--graa-1);
	border-radius: 999px;
	color: var(--wp--preset--color--moerkeblaa);
	font-size: 0.8rem;
	justify-self: start;
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin-block-start: 0.6rem;
	padding: 0.3em 0.9em;
	text-transform: uppercase;
}

/*
 * Forbindelseslinjen tegnes kun på et trin, der har et trin efter sig — ellers
 * hænger der en streg under det sidste ikon. Browsere uden :has() får ingen
 * linje, og listen står stadig rigtigt.
 */
.edodsbo-trin:has(+ .edodsbo-trin)::before {
	background: var(--wp--preset--color--graa-3);
	content: "";
	inset-block: calc(var(--edodsbo-trin-ikon) + 0.75rem) 0;
	inset-inline-start: calc(var(--edodsbo-trin-ikon) / 2);
	position: absolute;
	width: 1px;
}

@media (max-width: 600px) {
	.edodsbo-trin {
		--edodsbo-trin-ikon: 52px;
	}
}

/*
 * Ikonlister. Ikonet hører til teksten, så punkttegnet skal væk og ikonet
 * ind på dets plads.
 */
.edodsbo-ikonliste {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.edodsbo-ikonliste li > a,
.edodsbo-ikonliste li {
	align-items: center;
	display: flex;
	gap: 0.5em;
}

.edodsbo-ikonliste--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.75em;
}

.edodsbo-ikon-boks {
	display: inline-flex;
	flex: 0 0 auto;
}

.edodsbo-ikon {
	fill: currentColor;
	height: 1.15em;
	width: 1.15em;
}

/*
 * Elementor kunne sætte et separat baggrundsbillede på mobil. core/group har
 * kun ét, så konverteren lægger mobilvarianten i custom properties og de
 * byttes ind her. Sektioner uden mobilbillede har ikke klassen og rammes ikke.
 */
@media (max-width: 767px) {
	.edodsbo-bg-mobil {
		background-image: var(--edodsbo-bg-mobil) !important;
		background-position: var(--edodsbo-bg-mobil-pos, center center) !important;
		background-size: var(--edodsbo-bg-mobil-size, cover) !important;
	}

	/*
	 * Den samme baggrund i WebP, sat af inc/webp.php. Den kan ikke stå som
	 * reserve inde i den samme var(): en værdi, browseren ikke forstår, gør
	 * hele background-image ugyldig, og banneret ville forsvinde i stedet for
	 * at falde tilbage. @supports spørger derfor først, og properties uden
	 * WebP-udgave falder tilbage på originalen gennem var()'ens andet led.
	 */
	@supports (background-image: image-set(url("b.webp") type("image/webp"))) {
		.edodsbo-bg-mobil {
			background-image: var(--edodsbo-bg-mobil-webp, var(--edodsbo-bg-mobil)) !important;
		}
	}
}

/*
 * Sektioner fra Elementors "Content Width: Full Width" har flow-layout og får
 * derfor ikke WordPress' has-global-padding. Uden dette ville teksten klistre
 * til skærmkanten. Sektionens egen polstring skrives inline og vinder over
 * denne regel, så det kun er et gulv.
 */
/* :not(main) fordi indholdsområdet selv er en alignfull flow-gruppe, og
   :has() ellers ville trumfe undtagelsen for det længere nede. */
.wp-block-group.alignfull.is-layout-flow:not(main):not(:has(> .has-background)) {
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

/*
 * Selve indholdsområdet er en ren beholder og skal ikke rykkes ind. Den
 * lodrette margen skal også væk: headeren står klods op ad det første banner,
 * og rodens blockGap lagde ellers en hvid stribe ind under navigationen.
 */
main.wp-block-group.alignfull.is-layout-flow {
	margin-block-start: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Et fåtal knapper stod uden kant i Elementor. Målene bevares, så de står
   lige så høje som de øvrige. */
.edodsbo-knap-uden-kant {
	border-color: transparent;
}

/*
 * Embeds må aldrig skubbe layoutet vandret. core/html lægger ingen wrapper om
 * sit indhold på frontend, så bookingsidens iframe skal fanges på indholdet
 * som helhed — den bar en width="1170" og sprængte telefonskærmen.
 */
.entry-content iframe,
.wp-block-embed iframe {
	max-width: 100%;
}

/* Lange URL'er i privatlivspolitikken skubbede siden vandret på telefon. */
.entry-content {
	overflow-wrap: break-word;
}

/*
 * Lange ord deles med bindestreg frem for at blive hugget over.
 *
 * Dansk er et sammensætningssprog — "dødsboadministration", "værdigenstande",
 * "ejendomsmæglervurdering" — og på telefon fylder ét sådant ord næsten en hel
 * linje. Uden orddeling skubbes hele ordet ned på næste linje, og linjen over
 * står med et hul; er ordet bredere end spalten, træder reglen ovenfor til og
 * hugger det over midt i uden bindestreg.
 *
 * `hyphens: auto` bruger browserens danske orddelingsordbog, så bruddet falder
 * mellem to stavelser og markeres med bindestreg. Den virker kun, fordi <html>
 * bærer lang="da-DK" — sproget er det, ordbogen vælges ud fra.
 * `overflow-wrap` bliver stående som sidste udvej: den rammer nu kun det,
 * ordbogen ikke kan dele, altså URL'er og mailadresser.
 *
 * Grænserne holder delingen læselig: kun ord på mindst 8 tegn deles, og der
 * skal stå mindst 4 tegn før og 3 efter bruddet. Uden dem deler browseren
 * gerne "bo-et" og efterlader to bogstaver alene på linjen.
 */
.entry-content {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 8 4 3;
}

/*
 * Knapper, kode og adresser deles ikke.
 *
 * En bindestreg midt i et knapnavn ligner en fejl, og knapperne er korte nok
 * til at bryde pænt af sig selv. Kode og URL'er må ikke få tegn, der ikke står
 * i dem — en bindestreg i en sti kan ikke skelnes fra en, der hører til.
 */
.entry-content .wp-block-button__link,
.entry-content code,
.entry-content kbd,
.entry-content pre,
.entry-content samp {
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Tabeller og brede blokke scroller i sig selv frem for at bryde siden. */
.wp-block-table {
	overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details summary::after {
		transition: none;
	}
}

/*
 * Knappen "Gå til top". Markup og adfærd står i inc/op-knap.php.
 *
 * Værdierne er overtaget uændret fra pluginnet wpfront-scroll-top, som knappen
 * afløser — samme farver, samme skrift, samme placering, samme skygge.
 *
 * Knappen er skjult som udgangspunkt og vises kun over 640 px. Grænsen ligger i
 * en min-width-forespørgsel i stedet for som en max-width-undtagelse, så der
 * ikke skal et !important til for at holde den væk på telefon.
 */
.edodsbo-op {
	background-color: var(--wp--preset--color--groen);
	border: 0;
	border-radius: 100rem;
	bottom: 20px;
	box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.5);
	color: var(--wp--preset--color--hvid);
	cursor: pointer;
	display: none;
	font-family: Oswald, sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	padding: 10px 20px;
	position: fixed;
	right: 20px;
	text-transform: uppercase;
	z-index: 9999;
}

.edodsbo-op:hover,
.edodsbo-op:focus-visible {
	background-color: var(--wp--preset--color--groen-hover);
}

@media (min-width: 641px) {
	.edodsbo-op.vis {
		display: block;
	}
}

/*
 * Slør bag bannerteksten.
 *
 * Bannerne er hvid tekst lagt direkte oven på et foto. Fotoerne er lyse, og
 * målt pixel for pixel bag teksten lå kontrasten helt nede på 1,64:1 mod
 * kravet på 3:1 for de store overskrifter og 4,5:1 for undertitlerne — over
 * halvdelen af fladen bag hver overskrift var under kravet. Det er WCAG 1.4.3,
 * og det er den slags, et automatisk værktøj ikke finder: axe melder
 * "background color could not be determined" og springer feltet over.
 *
 * Sløret er den eneste rettelse, der virker uden at skifte billederne ud. En
 * skyggekant under teksten ville ikke tælle — kontrast måles mod baggrunden,
 * ikke mod indtrykket.
 *
 * 0,55 er målt frem som den laveste værdi, hvor alle 28 tekstfelter på tværs
 * af sitets bannere klarer deres krav. Skal den justeres, er det den ene
 * værdi her; alt andet følger med.
 */
.edodsbo-sloer {
	--edodsbo-banner-sloer: 0.55;

	position: relative;
}

.edodsbo-sloer::before {
	background: rgb(39 45 63 / var(--edodsbo-banner-sloer));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* Indholdet skal ligge over sløret, ikke under det. */
.edodsbo-sloer > * {
	position: relative;
	z-index: 1;
}

/*
 * Klikmål under 24×24 px.
 *
 * WCAG 2.2 kræver 24×24 CSS-pixel (2.5.8 Target Size, Minimum). To mål ligger
 * under: undermenuens pil i navigationen er 10×10, og logoets link er 23,5 px
 * højt, fordi billedet er det.
 *
 * Området udvides med et ::after i stedet for med polstring. Polstring ville
 * flytte layoutet — pilen ville skubbe menupunktet, og logoet ville gøre
 * topbjælken to pixel højere. Et gennemsigtigt lag oven på ændrer kun, hvor
 * musen og fingeren rammer.
 */
.wp-block-navigation__submenu-icon,
.custom-logo-link {
	position: relative;
}

.wp-block-navigation__submenu-icon::after,
.custom-logo-link::after {
	content: "";
	position: absolute;
}

/*
 * Pilen er 9,6 px, ikke 10 — -8px giver 25,6 og ligger sikkert over kravet.
 *
 * z-index skal med. Menupunktets <a> er en positioneret søskende, og uden et
 * lag over den vandt linket det halve af feltet tilbage: et klik 11 px til
 * venstre for pilen ramte linket i stedet for knappen.
 */
.wp-block-navigation__submenu-icon::after {
	inset: -8px;
	z-index: 1;
}

/* 23,5 → 27,5 px i højden; bredden er rigelig. */
.custom-logo-link::after {
	inset: -2px 0;
}


/*
 * Tekst i topbanneret er hvid.
 *
 * Bannerets baggrund er et foto med et slør henover, og hele opsætningen er
 * bygget til lys tekst. De fleste bannere har den også — men fem steder står
 * teksten stadig i temaets mørke farver, fordi de aldrig fik en farve sat:
 * H1'erne på /vejledning/ og /fjernsupport/ i mørkeblå (1,11:1), "Ring til os"
 * på prisberegneren i brødtekstgrå, og "Rul ned på siden" to steder, hvor
 * Elementors gamle regel peger på en beholder, klassen slet ikke sidder på.
 *
 * Reglen sættes på banneret i stedet for på hvert enkelt element, så et nyt
 * afsnit i et banner ikke kan gentage fejlen. Knapperne står uden for: de har
 * deres egen baggrund og deres egen farve.
 *
 * Klassen står to gange med vilje. Ti sider bærer Elementors side-CSS med
 * `body.page-id-… main p { color: … !important }`, og uden den ekstra klasse
 * ville vægten være den samme — så ville rækkefølgen i filen afgøre det, og
 * det er for skrøbeligt til at bygge på.
 */
body main .edodsbo-sloer.edodsbo-sloer :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, b, u, a):not(.wp-block-button__link):not(.wp-block-button__link *) {
	color: var(--wp--preset--color--hvid) !important;
}

.edodsbo-sloer .edodsbo-ikon {
	color: var(--wp--preset--color--hvid) !important;
}

/*
 * Kolonnernes egen polstring gælder kun, når der er plads til den.
 *
 * Konverteren skrev Elementors polstring direkte på kolonnerne, og den følger
 * ikke med ned i størrelse. På /dodsbobehandling/ betød det 64 px i hver side
 * oven i sidens egne 24 og gruppens 16: 104 px fra kanten på en 390 px skærm,
 * så brødteksten stod i en spalte på 182 px — tre-fire ord pr. linje.
 *
 * Når kolonnerne stables på telefon, har den vandrette polstring ingen opgave;
 * afstanden til kanten kommer fra siden selv. Kolonner med egen baggrund er
 * undtaget — dér er polstringen kortets indre luft, og uden den ville teksten
 * ligge klods op ad kanten. Det gælder fx bundens hvide kort.
 */
@media (max-width: 781px) {
	.wp-block-column:not(.has-background) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/*
 * Et knappepar i to kolonner må ikke sakse på telefon.
 *
 * "Udfyld selv – online" og "Lad os udfylde for dig" står i hver sin kolonne;
 * den venstre er højrestillet og den højre venstrestillet, så parret samler
 * sig om midterfugen på desktop. Når kolonnerne stables, får hver knap hele
 * bredden at rette ind efter, og de samme to regler skubber så den ene helt
 * ud til højre kant og den anden helt ud til venstre. Knapperne er ikke lige
 * brede (228 og 247 px), så det så ud som en trappe, ikke som et par.
 *
 * Justeringen pegede mod fugen, og uden fuge er midten det, den betød. Reglen
 * kræver begge retninger til stede i samme kolonneblok, så den kun rammer et
 * par, der faktisk klemmer sig om en fuge — enlige venstrestillede knapper i
 * en stablet kolonne står stadig, hvor de skal, ud for teksten over dem.
 *
 * Konverteren mente allerede det her med .edodsbo-knap-mobil-center længere
 * oppe, men den klasse står i `max-width: 767px`, og WordPress stabler først
 * kolonnerne ved 781px. I de 14px derimellem saksede knapperne på alle 15
 * sider. To sider — /hvor-lang-tid-tager-en-sag-i-skifteretten/ og
 * /boafgift-foerhen-arveafgift/ — fik aldrig klassen og saksede hele vejen ned
 * til 320px. Brudpunktet hører til kolonnerne, ikke til klassen, så reglen her
 * står ved 781px og virker uanset om klassen er sat.
 */
@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column > .wp-block-buttons.is-content-justification-right):has(> .wp-block-column > .wp-block-buttons.is-content-justification-left)
		> .wp-block-column > .wp-block-buttons {
		justify-content: center;
	}
}

/*
 * Prissidernes sidespalte følger med ned.
 *
 * De tre pakker fylder omkring 3.000 px i venstre spalte, mens højre spalte
 * kun rummer tre foldede paneler med pris og "kom i gang". Resultatet var
 * 2.500 px tom højreside — og en købsknap, der forsvandt efter første skærm.
 * Nu bliver panelerne stående, mens man læser pakkerne igennem.
 *
 * `align-self` skal med: uden den strækker kolonnen sig over hele rækkens
 * højde, og et element, der allerede fylder det hele, kan ikke klæbe.
 * Afstanden foroven er headerens 140 px plus lidt luft.
 *
 * Bemærk: ingen udgivet side har den opbygning mere. /dodsbobehandling/ (4463)
 * og /doedsbo-raadgivning/ (4444) fik harmonikaerne foldet ud i august 2026, og
 * kun kladderne 5153 og 5154 har stadig en sidespalte med paneler. Reglen står
 * her, til de er afklaret.
 */
@media (min-width: 782px) {
	.wp-block-columns > .wp-block-column:has(> .wp-block-details) {
		align-self: flex-start;
		position: sticky;
		top: 160px;
	}
}

/*
 * Ikonkortenes indhold fylder kortets bredde.
 *
 * WordPress' "constrained" layout giver hvert barn `margin-inline: auto`. I en
 * almindelig blok gør det ingenting, men kortet her er en flexspalte, og dér
 * betyder auto-margener at barnet krymper til sin egen tekstbredde og lægger
 * sig på midten. Overskrift og undertekst fik hver sin bredde og hver sin
 * venstrekant — 292 px mod 215 px på det samme kort — og rækken stod skæv.
 *
 * Løsningen er at give børnene hele bredden frem for at fjerne margenerne.
 * `margin: auto` har intet at fordele, når barnet allerede fylder, og
 * justeringen kommer så fra teksten selv, som den skal. At nulstille
 * margenerne ville også have taget ikonet ud af midten — det havde ingen
 * anden centrering end netop dem.
 */
.edodsbo-boks > * {
	width: 100%;
}

/* Ikonet stod centreret af auto-margenerne; nu af sin egen beholder. */
.edodsbo-boks__ikon {
	text-align: center;
}

/*
 * Stregtegnede ikoner i en boks.
 *
 * De tre ikoner i sidefoden lå som PNG'er med hver sit sideforhold — 300×332,
 * 300×274 og 300×342. Skaleret til 64 px bredde blev de 71, 59 og 73 px høje,
 * og da titlen følger lige efter ikonet, stod de tre titler i tre forskellige
 * højder. Som SVG med samme kvadratiske viewBox fylder alle tre lige meget,
 * og rækken flugter uanset hvad der tegnes indeni.
 *
 * Reglen har sin egen klasse frem for at ramme `svg` i beholderen: de udfyldte
 * `.edodsbo-ikon`-glyffer ligger samme sted på rådgivnings- og prissiden, og
 * `fill: none` ville viske dem ud.
 *
 * `block` frem for `inline-block`: ellers står ikonet på en tekstlinje og får
 * ~7 px underlængde med som luft ned til titlen.
 */
.edodsbo-boks__ikon-streg {
	display: block;
	margin-inline: auto;
	width: 64px;
	height: 64px;
	fill: none;
	stroke: #d4c291;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Luft mellem pakkerne på prissiderne.
 *
 * De tre pakker står som `.edos-box` med en overskrift imellem, og
 * overskrifterne har ingen topmargen. Sidste punkt i én pakkes liste stødte
 * derfor direkte op mod næste pakkes titel, så de tre blokke løb sammen til
 * én lang tekst. Afstanden skal være tydeligt større end afstanden inde i
 * pakken, ellers hjælper den ikke med at adskille dem.
 */
.edos-box + .wp-block-heading {
	margin-top: 2.5rem;
}

/*
 * Mærkekort uden ikon står på linje med dem, der har et.
 *
 * Rækken "100 %" og "Tidsforbrug" er to kort af samme slags, men kun det ene
 * har et ikon øverst. Kolonnerne er lige høje, så kortet uden ikon begyndte
 * højere oppe, og de to titler stod i hver sin højde. Ved at lægge indholdet
 * mod bunden flugter titel og undertekst, og ikonet får lov at stikke op.
 */
.wp-block-column > .edodsbo-boks:not(:has(.edodsbo-boks__ikon)):not(:has(figure)) {
	justify-content: flex-end;
}

/*
 * Brødkrummer.
 *
 * Rank Math skriver stien ud som `<nav class="rank-math-breadcrumb"><p>`.
 * Den ligger øverst i `main`, før sidens eget indhold, og skal læses som en
 * hjælpelinje — ikke som en overskrift. Farven er den dæmpede grå fra
 * kontrastgennemgangen, så den stadig klarer 4,5:1 mod hvid.
 *
 * Sidste led er den side, man står på. Det er ikke et link, og det skal ikke
 * ligne et — derfor kun farveskift, ingen understregning.
 */
.edodsbo-broedkrumme {
	padding-top: 1rem;
	padding-bottom: 0;
}

.rank-math-breadcrumb p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #6e6e6e;
}

.rank-math-breadcrumb a {
	color: #515151;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus-visible {
	color: #4d7e28;
}

.rank-math-breadcrumb .separator {
	margin: 0 0.4em;
	color: #9a9a9a;
}

.rank-math-breadcrumb .last {
	color: #515151;
}