/*
 * Ensure Blocks – globale regler (leveret uden build, 9. sept. 2026).
 * Indlæses af includes/global-styles.php; block styles registreres i
 * includes/block-styles.php.
 */

/*
 * N3: Brødtekst maks. ~720 px (≈ 66 tegn/linje) – KUN inden for Ensure-
 * modulerne. Alm. brødtekst (Rich Text / Advanced Text) styres native i
 * Kadence af redaktøren og røres ikke af pluginet.
 * De fleste modultekster er allerede smallere via deres layout; reglen
 * fanger de få intro-/notelinjer, der ellers kan løbe containerbredden ud.
 */
.ensure-block :is(p, ul, ol) {
	max-width: var(--ensure-w-narrow, 720px);
}

/* Layout-lister (tjekliste, ikonrække) er ikke brødtekst og må fylde hele båndet. */
.ensure-block :is(ul.ensure-p18__list, ul.ensure-p20__row) {
	max-width: none;
}

/* Centrerede intro-/notelinjer bevarer deres centrering. */
.ensure-block .ensure-p5__intro,
.ensure-block .ensure-p6__intro,
.ensure-block .ensure-p6__note {
	margin-left: auto;
	margin-right: auto;
}

/*
 * N4: "Spejlvendt" block style til Info-modulet (2 kolonner med ikoner).
 * Kolonnerne bytter kun plads på desktop – på mobil (1 kolonne) bevares den
 * oprindelige rækkefølge.
 */
@media (min-width: 782px) {
	.wp-block-ensure-info-icon-columns.is-style-spejlvendt .ensure-p6__grid > :first-child {
		order: 2;
	}
}

/*
 * Farvepanelet "Ensure farver" (alle ensure-blokke). Attributterne
 * oversættes til klasser + CSS-variabler af includes/color-overrides.php.
 * Uden valg gælder blokkens automatiske farver.
 *
 * Princip: AL tekst i en blok hører til præcis ét felt, så redaktøren altid
 * kan sætte sin egen farve:
 *   Overskrifter / Brødtekst ......... alt uden for bokse og kort
 *   Boks/kort – overskrift / tekst ... alt inde i bokse og kort
 *   Label / badge, Links, Tal, Knap, Ikon ... overalt, har forrang
 * Testes med tests/farvetest-*.js (Playwright).
 */
.ensure-block.has-eb-heading :is(h1, h2, h3, h4, h5, h6):not(:is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card) *),
.ensure-block.has-eb-heading :is(h1, h2, h3, h4, h5, h6):not(:is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card) *) :not(.ensure-arrow-link, .ensure-arrow-link *, .ensure-p19__link, .ensure-p19__link *, p a, p a *, li a, li a *, .ensure-icon-tile, .ensure-icon-tile *, .ensure-icon, .ensure-icon *, [data-ensure-icon], [data-ensure-icon] *, .ensure-faq__icon, .ensure-p18__icon, .ensure-p18__icon *, .ensure-p19__icon, .ensure-p19__icon *, .ensure-p20__icon, .ensure-p20__icon *, .ensure-p17__brand, .ensure-p17__brand *, svg, svg *, .ensure-btn, .ensure-btn *, .gform_button, [type="submit"], .ensure-label, .ensure-badge, .ensure-stat__value) {
	color: var(--eb-heading) !important;
}
.ensure-block.has-eb-text,
.ensure-block.has-eb-text :not(h1, h2, h3, h4, h5, h6, :is(h1, h2, h3, h4, h5, h6) *, .ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card, :is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card) *, .ensure-arrow-link, .ensure-arrow-link *, .ensure-p19__link, .ensure-p19__link *, p a, p a *, li a, li a *, .ensure-icon-tile, .ensure-icon-tile *, .ensure-icon, .ensure-icon *, [data-ensure-icon], [data-ensure-icon] *, .ensure-faq__icon, .ensure-p18__icon, .ensure-p18__icon *, .ensure-p19__icon, .ensure-p19__icon *, .ensure-p20__icon, .ensure-p20__icon *, .ensure-p17__brand, .ensure-p17__brand *, svg, svg *, .ensure-btn, .ensure-btn *, .gform_button, [type="submit"], .ensure-label, .ensure-badge, .ensure-stat__value, :is(.ensure-btn, .ensure-label, .ensure-badge) *, input, textarea, select, option) {
	color: var(--eb-text) !important;
}
.ensure-block.has-eb-box-bg :is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card, .ensure-band) {
	background-color: var(--eb-box-bg) !important;
}
.ensure-block.has-eb-box-heading :is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card) :is(h1, h2, h3, h4, h5, h6),
.ensure-block.has-eb-box-heading :is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card) :is(h1, h2, h3, h4, h5, h6) :not(.ensure-arrow-link, .ensure-arrow-link *, .ensure-p19__link, .ensure-p19__link *, p a, p a *, li a, li a *, .ensure-icon-tile, .ensure-icon-tile *, .ensure-icon, .ensure-icon *, [data-ensure-icon], [data-ensure-icon] *, .ensure-faq__icon, .ensure-p18__icon, .ensure-p18__icon *, .ensure-p19__icon, .ensure-p19__icon *, .ensure-p20__icon, .ensure-p20__icon *, .ensure-p17__brand, .ensure-p17__brand *, svg, svg *, .ensure-btn, .ensure-btn *, .gform_button, [type="submit"], .ensure-label, .ensure-badge, .ensure-stat__value) {
	color: var(--eb-box-heading) !important;
}
.ensure-block.has-eb-box-text :is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card),
.ensure-block.has-eb-box-text :is(.ensure-p1__box, .ensure-quote__panel, .ensure-p17__box, .ensure-card, .ensure-p10__card, .ensure-p11__card) :not(h1, h2, h3, h4, h5, h6, :is(h1, h2, h3, h4, h5, h6) *, .ensure-arrow-link, .ensure-arrow-link *, .ensure-p19__link, .ensure-p19__link *, p a, p a *, li a, li a *, .ensure-icon-tile, .ensure-icon-tile *, .ensure-icon, .ensure-icon *, [data-ensure-icon], [data-ensure-icon] *, .ensure-faq__icon, .ensure-p18__icon, .ensure-p18__icon *, .ensure-p19__icon, .ensure-p19__icon *, .ensure-p20__icon, .ensure-p20__icon *, .ensure-p17__brand, .ensure-p17__brand *, svg, svg *, .ensure-btn, .ensure-btn *, .gform_button, [type="submit"], .ensure-label, .ensure-badge, .ensure-stat__value, :is(.ensure-btn, .ensure-label, .ensure-badge) *, input, textarea, select, option) {
	color: var(--eb-box-text) !important;
}
.ensure-block.has-eb-label :is(.ensure-label, .ensure-badge) {
	color: var(--eb-label) !important;
	border-color: var(--eb-label) !important;
}
.ensure-block.has-eb-link :is(.ensure-arrow-link, .ensure-arrow-link *, .ensure-p19__link, .ensure-p19__link *, p a, p a *, li a, li a *) {
	color: var(--eb-link) !important;
}
.ensure-block.has-eb-number .ensure-stat__value {
	color: var(--eb-number) !important;
}
.ensure-block.has-eb-icon-bg :is(.ensure-icon-tile, .ensure-p18__icon, .ensure-p20__icon) {
	background-color: var(--eb-icon-bg) !important;
}
.ensure-block.has-eb-icon-color :is(.ensure-icon-tile, .ensure-icon, .ensure-faq__icon, .ensure-p18__icon, .ensure-p19__icon, .ensure-p20__icon, .ensure-p17__brand) {
	color: var(--eb-icon-color) !important;
}
.ensure-block.has-eb-btn-bg :is(.ensure-btn, .gform_wrapper .gform_button, .gform_wrapper [type="submit"]) {
	background-color: var(--eb-btn-bg) !important;
	border-color: var(--eb-btn-bg) !important;
}
.ensure-block.has-eb-btn-text :is(.ensure-btn, .ensure-btn *, .gform_wrapper .gform_button, .gform_wrapper [type="submit"]) {
	color: var(--eb-btn-text) !important;
}

/* Tekstlink-varianten i Faktaboks-båndet */
.ensure-p19__link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/*
 * Automatisk læsbarhed: uden egne farvevalg følger teksten den flade, den
 * faktisk står på (ikke blokkens yderste baggrund). Et valgt "Tekstfarve"
 * (has-text-*) eller farvepanelet har altid forrang.
 */
/* Mørke bokse (P1 sideboks, P2 citatfelt, P17): lyse overskrifter. */
.ensure-block .ensure-surface-dark:not(.is-light-surface):not([class*="has-text-"]) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ensure-hvid, #fff);
}
/* Lyse bokse (lysegrå/hvid/lys palette): mørk tekst og mørkt citattegn. */
.ensure-block .ensure-surface-dark.is-light-surface:not([class*="has-text-"]) :is(h1, h2, h3, h4, h5, h6),
.ensure-block .ensure-surface-dark.is-light-surface:not([class*="has-text-"]) :is(.ensure-quote__text, .ensure-quote__mark, .ensure-quote__attribution) {
	color: var(--ensure-morkeblaa, #1e3140);
}
/* P12: hvide service-kort på mørk baggrund beholder mørk tekst. */
.ensure-block.has-dark-bg:not([class*="has-text-"]) .ensure-card {
	color: var(--ensure-body-color);
}
.ensure-block.has-dark-bg:not([class*="has-text-"]) .ensure-card :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ensure-morkeblaa, #1e3140);
}
/* P11: hvidt kort er et lyst kort. */
.ensure-block.wp-block-ensure-inspiration-grid .ensure-p11__card.has-bg-hvid {
	background-color: var(--ensure-hvid, #fff);
	box-shadow: inset 0 0 0 1px var(--ensure-lysegraa, #d8dfe1);
	color: var(--ensure-body-color);
}
.ensure-block.wp-block-ensure-inspiration-grid .ensure-p11__card.has-bg-hvid :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ensure-morkeblaa, #1e3140);
}
.ensure-block.wp-block-ensure-inspiration-grid .ensure-p11__card.has-bg-hvid :is(.ensure-btn.is-style-secondary, .ensure-icon-tile) {
	background-color: var(--ensure-morkeblaa, #1e3140);
	color: var(--ensure-hvid, #fff);
}
/* P4: turkis tal på mørk baggrund, mørkeblå på lys (turkis kan ikke læses på lyst). */
.ensure-block.wp-block-ensure-fact-divider.has-dark-bg .ensure-stat__value.ensure-p4__value {
	color: var(--ensure-turkis, #52b1c7);
}
/* P15: formularens tekster og knap på lys baggrund. */
.ensure-block.wp-block-ensure-cta-contact-form.has-light-bg:not([class*="has-text-"]):not(.has-eb-text) .gform_wrapper :is(label, legend, .gfield_label, .gfield_description, .gfield_required, .gfield_required *, .gform_confirmation_message) {
	color: var(--ensure-morkeblaa, #1e3140) !important;
}
.ensure-block.wp-block-ensure-cta-contact-form.has-light-bg:not(.has-eb-btn-bg) .gform_wrapper :is([type="submit"], .gform_button) {
	background-color: var(--ensure-morkeblaa, #1e3140) !important;
}
.ensure-block.wp-block-ensure-cta-contact-form.has-light-bg:not(.has-eb-btn-text) .gform_wrapper :is([type="submit"], .gform_button) {
	color: var(--ensure-hvid, #fff) !important;
}
.ensure-block.wp-block-ensure-cta-contact-form.has-light-bg .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select) {
	box-shadow: inset 0 0 0 1px var(--ensure-lysegraa, #d8dfe1);
}
/* P16: telefon, skillelinjer og knapper på lys baggrund. */
.ensure-block.wp-block-ensure-double-cta.has-light-bg:not([class*="has-text-"]) .ensure-p16__phone {
	color: var(--ensure-morkeblaa, #1e3140);
}
.ensure-block.wp-block-ensure-double-cta.has-light-bg .ensure-p16__col + .ensure-p16__col,
.ensure-block.wp-block-ensure-double-cta.has-light-bg.is-reversed .ensure-p16__col:first-child {
	border-color: rgba(30, 49, 64, 0.2);
}
.ensure-block.wp-block-ensure-double-cta.has-light-bg .ensure-btn.is-style-secondary {
	background-color: var(--ensure-morkeblaa, #1e3140);
	color: var(--ensure-hvid, #fff);
}

/* P17: baggrundsfarven sidder på den afrundede boks – ikke på yderboksen. */
.ensure-block.ensure-block.wp-block-ensure-text-media-box {
	background-color: transparent;
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-lysegraa .ensure-p17__box {
	background-color: var(--ensure-lysegraa, #d8dfe1);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-hvid .ensure-p17__box {
	background-color: var(--ensure-hvid, #fff);
	box-shadow: inset 0 0 0 1px var(--ensure-lysegraa, #d8dfe1);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette1 .ensure-p17__box {
	background-color: var(--global-palette1);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette2 .ensure-p17__box {
	background-color: var(--global-palette2);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette3 .ensure-p17__box {
	background-color: var(--global-palette3);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette4 .ensure-p17__box {
	background-color: var(--global-palette4);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette5 .ensure-p17__box {
	background-color: var(--global-palette5);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette6 .ensure-p17__box {
	background-color: var(--global-palette6);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette7 .ensure-p17__box {
	background-color: var(--global-palette7);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette8 .ensure-p17__box {
	background-color: var(--global-palette8);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette9 .ensure-p17__box {
	background-color: var(--global-palette9);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette10 .ensure-p17__box {
	background-color: var(--global-palette10);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette11 .ensure-p17__box {
	background-color: var(--global-palette11);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette12 .ensure-p17__box {
	background-color: var(--global-palette12);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette13 .ensure-p17__box {
	background-color: var(--global-palette13);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette14 .ensure-p17__box {
	background-color: var(--global-palette14);
}
.ensure-block.wp-block-ensure-text-media-box.has-bg-palette15 .ensure-p17__box {
	background-color: var(--global-palette15);
}
.ensure-block.wp-block-ensure-text-media-box.has-light-bg:not([class*="has-text-"]) .ensure-p17__box {
	color: var(--ensure-body-color);
}
.ensure-block.wp-block-ensure-text-media-box.has-light-bg:not([class*="has-text-"]) .ensure-p17__box :is(h1, h2, h3, h4, h5, h6, .ensure-badge) {
	color: var(--ensure-morkeblaa, #1e3140);
}
.ensure-block.wp-block-ensure-text-media-box.has-light-bg .ensure-p17__box .ensure-btn.is-style-secondary {
	background-color: var(--ensure-morkeblaa, #1e3140);
	color: var(--ensure-hvid, #fff);
}
/* P13: lyst overlay (lysegrå/hvid) giver mørk tekst og mørk knap. */
.ensure-block.wp-block-ensure-cta-branding-band:is(.is-overlay-lysegraa, .is-overlay-hvid).has-overlay .ensure-p13__band :is(h1, h2, h3, h4, h5, h6, .ensure-badge) {
	color: var(--ensure-morkeblaa, #1e3140);
}
.ensure-block.wp-block-ensure-cta-branding-band:is(.is-overlay-lysegraa, .is-overlay-hvid).has-overlay .ensure-btn.is-style-secondary {
	background-color: var(--ensure-morkeblaa, #1e3140);
	color: var(--ensure-hvid, #fff);
}

/*
 * Faktaboksene (tjekliste, bånd med ikon, ikonrække): farven sidder på det
 * afrundede bånd – ikke på yderboksen, som ellers giver en firkantet kant
 * rundt om båndet. Temapalette-farver (paletteN) sættes via --ensure-band-bg
 * fra render.php.
 */
.ensure-block.ensure-block:is(.ensure-p18, .ensure-p19, .ensure-p20) {
	background-color: transparent;
}
.ensure-block:is(.ensure-p18, .ensure-p19, .ensure-p20).has-palette-bg > .ensure-band {
	background-color: var(--ensure-band-bg);
}

/*
 * Tjeklisten (P18, slide 34): tekstdelen står som en venstrestillet kolonne,
 * der er centreret i den farvede boks. "Venstrestillet i hele boksen" slår
 * centreringen fra.
 */
.wp-block-ensure-fact-checklist.is-content-centered .ensure-p18__content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Egne ikoner (SVG/billede fra Mediebiblioteket) i faktaboksene. Ensures egne
 * ikoner er mørke stregikoner, så fliser/cirkler med eget ikon er altid lyse.
 */
.ensure-block.wp-block-ensure-fact-checklist .ensure-p18__icon.has-media-icon,
.ensure-block.wp-block-ensure-fact-icon-row .ensure-p20__icon.has-media-icon {
	background-color: var(--ensure-hvid, #fff);
}
.ensure-block.has-bg-hvid .ensure-p18__icon.has-media-icon,
.ensure-block.has-bg-hvid .ensure-p20__icon.has-media-icon {
	box-shadow: inset 0 0 0 1px var(--ensure-lysegraa, #d8dfe1);
}
.ensure-block .has-media-icon img {
	display: block;
	object-fit: contain;
}
.wp-block-ensure-fact-band .ensure-p19__icon.has-media-icon img {
	width: 96px;
	height: 96px;
}
.wp-block-ensure-fact-checklist .ensure-p18__icon.has-media-icon img {
	width: 20px;
	height: 20px;
}
.wp-block-ensure-fact-icon-row .ensure-p20__icon.has-media-icon img {
	width: 40px;
	height: 40px;
}
@media (max-width: 781px) {
	.wp-block-ensure-fact-band .ensure-p19__icon.has-media-icon img {
		width: 64px;
		height: 64px;
	}
}

/* P15 på mobil: formularfelterne fylder hele formularens bredde. */
@media (max-width: 781px) {
	.wp-block-ensure-cta-contact-form .gform_wrapper .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select) {
		width: 100% !important;
		max-width: 100%;
	}
}