/* ═══════════════════════════════════════════════════════════════════
   Godt Boligliv — komponenter
   Farver og skrifttyper kommer fra theme.json (var(--wp--preset--…)).
   ═══════════════════════════════════════════════════════════════════ */

:root {
	--gbl-blaek: var(--wp--preset--color--blaek);
	--gbl-broed: var(--wp--preset--color--broedtekst);
	--gbl-daempet: var(--wp--preset--color--daempet);
	--gbl-blaa: var(--wp--preset--color--blaa);
	--gbl-mint: var(--wp--preset--color--mint);
	--gbl-streg: var(--wp--preset--color--streg);
	--gbl-baggrund: var(--wp--preset--color--baggrund);
	--gbl-hvid: var(--wp--preset--color--hvid);
	--gbl-gul: var(--wp--preset--color--reklame);
	--gbl-lys: var(--wp--preset--color--lys-tekst);
	--gbl-felt-kant: #B9C7C4;
	--gbl-sans: var(--wp--preset--font-family--sans);
	--gbl-serif: var(--wp--preset--font-family--serif);
	--gbl-sektion: clamp(56px, 8vw, 96px);

	/* Ikoner (bruges som maske, så de tager farven fra CSS) */
	--ikon-maane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");
	--ikon-luft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3'/%3E%3Cpath d='M3 12h16a3 3 0 1 1-3 3'/%3E%3Cpath d='M3 16h8'/%3E%3C/svg%3E");
	--ikon-draabe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3c-3.8 4.6-6 8-6 10.8a6 6 0 0 0 12 0C18 11 15.8 7.6 12 3z'/%3E%3C/svg%3E");
	--ikon-blad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14 0 9-5 14-13 14z'/%3E%3Cpath d='M5 19 13 11'/%3E%3C/svg%3E");
	--ikon-dokument: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m10 14 2 2 4-4'/%3E%3C/svg%3E");
	--ikon-retur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6'/%3E%3Cpath d='M4 4v4h4'/%3E%3C/svg%3E");
	--ikon-kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	--ikon-vaerktoej: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E");
	--ikon-flueben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--ikon-streg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
	--ikon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--gbl-blaa); outline-offset: 3px; }
::placeholder { color: #6A7D80; }
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .gbl-main { flex: 1 0 auto; }
img { height: auto; }

/* ── Sidehoved ─────────────────────────────────────────────────────── */

.gbl-sidehoved { border-bottom: 1px solid var(--gbl-streg); background: var(--gbl-baggrund); }
.gbl-sidehoved__indre { padding-block: 18px; gap: 16px; align-items: center; }

.gbl-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--gbl-blaek); text-decoration: none; font-family: var(--gbl-sans); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.gbl-logo:hover, .gbl-logo:focus { color: var(--gbl-blaek); }
.gbl-logo--lille { font-size: 20px; }

.gbl-hovedmenu .wp-block-navigation__container { gap: 2px; }
.gbl-hovedmenu .wp-block-navigation-item__content { padding: 12px 14px; border-radius: 12px; text-decoration: none; }
.gbl-hovedmenu .wp-block-navigation-item__content:hover { background: var(--gbl-mint); color: var(--gbl-blaek); }
.gbl-hovedmenu .current-menu-item > .wp-block-navigation-item__content,
.gbl-hovedmenu .current-menu-ancestor > .wp-block-navigation-item__content,
.gbl-hovedmenu [aria-current="page"] { background: var(--gbl-mint); }

.gbl-hovedmenu .wp-block-navigation__responsive-container-open {
	width: 44px; height: 44px; border-radius: 13px; background: var(--gbl-blaek); color: var(--gbl-baggrund);
	display: grid; place-items: center;
}
.gbl-hovedmenu .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--gbl-baggrund); color: var(--gbl-blaek); padding: 18px;
}
.gbl-hovedmenu .is-menu-open .wp-block-navigation-item__content { font-size: 24px; font-weight: 700; padding: 12px 0; }
.gbl-hovedmenu .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; border-radius: 13px; background: var(--gbl-mint); display: grid; place-items: center; }

.gbl-soeg .wp-block-search__inside-wrapper { border: 0; padding: 0; gap: 8px; }
.gbl-soeg .wp-block-search__button.wp-element-button {
	width: 46px; height: 46px; min-width: 46px; padding: 0; margin: 0; border-radius: 14px; border: 1px solid var(--gbl-streg);
	background: var(--gbl-hvid); color: var(--gbl-blaek); display: grid; place-items: center;
}
.gbl-soeg .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; min-width: 22px; }
.gbl-soeg .wp-block-search__input { height: 46px; border-radius: 14px; border: 1.5px solid var(--gbl-felt-kant); padding: 0 14px; font-family: var(--gbl-sans); font-size: 16px; background: var(--gbl-hvid); }

/* Stort søgefelt (søgeside og 404) */
.gbl-soegefelt { max-width: 560px; }
.gbl-soegefelt .wp-block-search__inside-wrapper { border: 0; padding: 0; gap: 10px; }
.gbl-soegefelt .wp-block-search__input { height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--gbl-felt-kant); background: var(--gbl-hvid); font-family: var(--gbl-sans); font-size: 18px; }
.gbl-soegefelt .wp-block-search__button { margin: 0; border-radius: 14px; padding: 0 24px; }

/* ── Sidefod ───────────────────────────────────────────────────────── */

.gbl-sidefod { margin-top: 88px; border-top: 1px solid var(--gbl-streg); }
.gbl-sidefod__indre { display: flex; flex-wrap: wrap; gap: 40px 56px; padding-block: 48px 56px; }
.gbl-sidefod__indre > * { margin: 0 !important; }
.gbl-sidefod__om { flex: 2 1 320px; min-width: 0; }
.gbl-sidefod__tekst { margin-top: 16px !important; font-size: 16px; line-height: 1.6; color: var(--gbl-daempet); max-width: 30em; }
.gbl-fodlinks { flex: 1 1 160px; display: flex; flex-direction: column; gap: 10px; font-family: var(--gbl-sans); }
.gbl-fodlinks__titel { font-weight: 700; }
.gbl-fodlinks a { color: var(--gbl-broed); text-decoration: none; }
.gbl-fodlinks a:hover { color: var(--gbl-blaa); text-decoration: underline; }

/* ── Knapper ───────────────────────────────────────────────────────── */

.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; text-decoration: none; }

/* Gul = reklamelink. Bruges kun til links, vi får provision af. */
.wp-block-button.is-style-reklame .wp-block-button__link { background: var(--gbl-gul); color: var(--gbl-blaek); font-weight: 700; }
.wp-block-button.is-style-reklame .wp-block-button__link:hover { background: #E3A223; color: var(--gbl-blaek); }

.wp-block-button.is-style-kontur .wp-block-button__link { background: transparent; color: var(--gbl-blaa); border: 1.5px solid var(--gbl-blaa); min-height: 46px; padding: 0 18px; border-radius: 14px; }
.wp-block-button.is-style-kontur .wp-block-button__link:hover { background: var(--gbl-blaa); color: var(--gbl-hvid); }

.wp-block-button.is-style-lys .wp-block-button__link { background: var(--gbl-hvid); color: var(--gbl-blaek); border: 1px solid #C5D1CE; }
.wp-block-button.is-style-lys .wp-block-button__link:hover { border-color: var(--gbl-blaek); background: var(--gbl-hvid); color: var(--gbl-blaek); }

.wp-block-buttons.is-small .wp-block-button__link,
.gbl-produktrad .wp-block-button__link { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 16px; }

/* ── Tekststile ────────────────────────────────────────────────────── */

.is-style-ingress, .gbl-ingress { font-family: var(--gbl-serif); font-size: var(--wp--preset--font-size--ingress); line-height: 1.6; max-width: 36em; }
.is-style-ingress { color: var(--gbl-daempet); }
.gbl-ingress { color: var(--gbl-broed); margin: 28px 0 0; }
p.is-style-etiket { font-family: var(--gbl-sans); font-size: 15px; font-weight: 700; color: var(--gbl-blaa); line-height: 1.3; }
p.is-style-note { font-family: var(--gbl-sans); font-size: 15px; color: var(--gbl-daempet); line-height: 1.5; }
h2.is-style-sektion { font-size: clamp(32px, 3.4vw, 44px); }
.gbl-pil-link { font-family: var(--gbl-sans); font-size: 17px; }
.gbl-pil-link a { font-weight: 650; color: var(--gbl-blaek); }
.gbl-pil-link a:hover { color: var(--gbl-blaa); }

/* Ikoner: tilføj fx "gbl-ikon-maane" under Avanceret → Ekstra CSS-klasse */
[class*="gbl-ikon-"]::before { content: ""; flex: none; background: var(--gbl-blaa); -webkit-mask: var(--ikon) center / contain no-repeat; mask: var(--ikon) center / contain no-repeat; }
.gbl-ikon-maane { --ikon: var(--ikon-maane); }
.gbl-ikon-luft { --ikon: var(--ikon-luft); }
.gbl-ikon-draabe { --ikon: var(--ikon-draabe); }
.gbl-ikon-blad { --ikon: var(--ikon-blad); }
.gbl-ikon-dokument { --ikon: var(--ikon-dokument); }
.gbl-ikon-retur { --ikon: var(--ikon-retur); }
.gbl-ikon-kalender { --ikon: var(--ikon-kalender); }
.gbl-ikon-vaerktoej { --ikon: var(--ikon-vaerktoej); }
p[class*="gbl-ikon-"] { display: flex; align-items: center; gap: 10px; }
p[class*="gbl-ikon-"]::before { width: 22px; height: 22px; }
h3[class*="gbl-ikon-"]::before { display: block; width: 28px; height: 28px; margin-bottom: 14px; }

/* ── Lister ────────────────────────────────────────────────────────── */

ul.is-style-fordele, ul.is-style-vaerd { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.5; }
ul.is-style-fordele li, ul.is-style-vaerd li { position: relative; padding-left: 30px; margin: 0; }
ul.is-style-fordele li::before, ul.is-style-vaerd li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
ul.is-style-fordele li::before { --m: var(--ikon-flueben); background: var(--gbl-blaa); }
ul.is-style-vaerd li::before { --m: var(--ikon-streg); background: var(--gbl-daempet); }

ul.is-style-linkliste { list-style: none; padding: 0; border-top: 1px solid var(--gbl-streg); font-family: var(--gbl-sans); font-size: 17px; }
ul.is-style-linkliste li { border-bottom: 1px solid var(--gbl-streg); margin: 0; }
ul.is-style-linkliste a { display: block; padding: 13px 0; color: var(--gbl-blaek); font-weight: 600; text-decoration: none; }
ul.is-style-linkliste a:hover { color: var(--gbl-blaa); }

/* ── Grupper: kort og bånd ─────────────────────────────────────────── */

.is-style-kort { background: var(--gbl-hvid); border: 1px solid var(--gbl-streg); border-radius: 28px; padding: clamp(20px, 3vw, 32px); }
.is-style-kort-graa { background: var(--gbl-baggrund); border-radius: 26px; padding: clamp(22px, 3vw, 30px); }
.is-style-kort-mint { background: var(--gbl-mint); border-radius: 24px; padding: clamp(22px, 3vw, 30px); }
.is-style-kort-moerk { background: var(--gbl-blaek); color: var(--gbl-baggrund); border-radius: 30px; padding: clamp(26px, 4vw, 48px); }
.is-style-kort-moerk :is(h1, h2, h3, h4) { color: var(--gbl-baggrund); }
.is-style-kort-moerk p { color: var(--gbl-lys); }
.is-style-kort-moerk a:not(.wp-block-button__link) { color: var(--gbl-baggrund); }
.is-style-kort > :first-child, .is-style-kort-graa > :first-child, .is-style-kort-mint > :first-child, .is-style-kort-moerk > :first-child { margin-top: 0; }

.is-style-baand-hvid { background: var(--gbl-hvid); border-block: 1px solid var(--gbl-streg); padding-block: clamp(56px, 7vw, 88px); }
.is-style-baand-mint { background: var(--gbl-mint); padding-block: clamp(56px, 7vw, 88px); }
.is-style-baand-mint p { color: var(--gbl-broed); }
.is-style-streg-top { border-top: 1.5px solid var(--gbl-blaek); padding-top: 20px; }

.gbl-sektion { padding-block: var(--gbl-sektion); }
.gbl-vaerktoejsindhold > .gbl-sektion { padding-bottom: 0; }
.gbl-vaerktoejsindhold > * + * { margin-block-start: 0; }
.gbl-bred > * + * { margin-block-start: 0; }
.gbl-bred > .is-style-kort-moerk { margin-top: 56px; }

/* Gitter: kortene lægger sig selv i 1–3 kolonner */
.gbl-kortgitter, .gbl-trekolonner, .gbl-firkolonner { display: grid; gap: 24px; margin-top: 44px; }
.gbl-kortgitter { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.gbl-trekolonner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 36px 32px; }
.gbl-firkolonner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px 32px; margin-top: 48px; }
.gbl-kortgitter > *, .gbl-trekolonner > *, .gbl-firkolonner > * { margin: 0 !important; min-width: 0; }
.gbl-firkolonner h3 { font-size: 21px; margin: 0 0 8px; }
.gbl-firkolonner p, .gbl-trekolonner p { font-size: 17px; line-height: 1.6; margin-top: 10px; }
.gbl-trekolonner h3 { font-size: 22px; margin: 0; }

.gbl-overskrift-raekke { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.gbl-overskrift-raekke > * { margin: 0 !important; }
.gbl-overskrift-raekke > .wp-block-group > * + * { margin-top: 14px; }
.gbl-overskrift-raekke > p { font-family: var(--gbl-sans); font-weight: 650; font-size: 17px; }
.gbl-overskrift-raekke > p.is-style-note { font-weight: 400; font-size: 15px; max-width: 30em; }

/* ── Forside ───────────────────────────────────────────────────────── */

.gbl-hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-block: clamp(40px, 7vw, 80px) clamp(40px, 6vw, 72px); }
.gbl-hero > * { margin: 0 !important; }
.gbl-hero__tekst { flex: 1 1 520px; min-width: 0; }
.gbl-hero__titel { font-size: var(--wp--preset--font-size--hero); line-height: 1; letter-spacing: -0.04em; max-width: 12ch; margin: 0; }
.gbl-hero__tekst .is-style-ingress { margin-top: 28px; max-width: 32em; }
.gbl-hero__tekst .wp-block-buttons { margin-top: 36px; gap: 12px; }
.gbl-hero > .gbl-vandkort { flex: 1 1 440px; }

.gbl-vaerktoejskort { display: flex; flex-direction: column; gap: 18px; }
.gbl-vaerktoejskort > * { margin: 0 !important; }
.gbl-vaerktoejskort h3 { font-size: var(--wp--preset--font-size--stor); line-height: 1.1; letter-spacing: -0.025em; }
.gbl-vaerktoejskort p:not(.is-style-etiket) { font-size: 17px; line-height: 1.6; color: var(--gbl-daempet); }
.gbl-vaerktoejskort p.is-style-etiket { font-size: 16px; }
.gbl-vaerktoejskort .is-style-linkliste { margin-top: 6px !important; }

.gbl-todelt { display: flex; flex-wrap: wrap; gap: 48px; }
.gbl-todelt > * { margin: 0 !important; min-width: 0; }
.gbl-todelt > :first-child { flex: 1 1 340px; }
.gbl-todelt > :last-child { flex: 2 1 560px; }
.gbl-todelt > :first-child > p { margin-top: 16px; max-width: 26em; }

.gbl-raekker > * { margin: 0 !important; }
.gbl-raekke { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 26px 0; border-top: 1px solid #AFC4BE; }
.gbl-raekke:first-child { border-top: 1.5px solid var(--gbl-blaek); }
.gbl-raekke:last-child { border-bottom: 1px solid #AFC4BE; }
.gbl-raekke > * { margin: 0 !important; }
.gbl-raekke > h3 { flex: 0 0 160px; font-size: 22px; }
.gbl-raekke > .wp-block-group { flex: 1 1 300px; min-width: 0; }
.gbl-raekke p { font-size: 17px; line-height: 1.6; margin: 0; }
.gbl-raekke .gbl-pil-link { margin-top: 10px; }

.gbl-nyhedsbrev { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: space-between; }
.gbl-nyhedsbrev > * { margin: 0 !important; flex: 1 1 380px; min-width: 0; }
.gbl-nyhedsbrev h2 { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.gbl-nyhedsbrev p { font-size: 18px; margin-top: 12px; }
/* Formularer fra et nyhedsbrevsplugin får samme udseende */
.gbl-nyhedsbrev input[type="email"], .gbl-nyhedsbrev input[type="text"] { height: 54px; padding: 0 18px; border-radius: 14px; border: 0; background: var(--gbl-hvid); font-family: var(--gbl-sans); font-size: 17px; color: var(--gbl-blaek); width: 100%; }
.gbl-nyhedsbrev button, .gbl-nyhedsbrev input[type="submit"], .gbl-nyhedsbrev .wp-block-button__link { height: 54px; min-height: 54px; padding: 0 24px; border-radius: 14px; border: 0; background: var(--gbl-mint); color: var(--gbl-blaek); font-family: var(--gbl-sans); font-weight: 700; font-size: 17px; cursor: pointer; }
.gbl-nyhedsbrev .wp-block-button__link:hover { background: var(--gbl-hvid); color: var(--gbl-blaek); }

/* ── Guideliste (Bedst i test, kategorier, søgning) ────────────────── */

.gbl-guideliste .wp-block-post-template { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1.5px solid var(--gbl-blaek); }
.gbl-guideliste .wp-block-post { border-bottom: 1px solid var(--gbl-streg); margin: 0; position: relative; }
.gbl-guiderad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; padding: 24px 4px; }
.gbl-guiderad > * { margin: 0 !important; }
.gbl-guiderad__emne { flex: 0 0 120px; font-size: 15px; font-weight: 650; color: var(--gbl-blaa); }
.gbl-guiderad__emne a { color: inherit; text-decoration: none; position: relative; z-index: 1; }
.gbl-guiderad__emne .wp-block-post-terms__separator { display: none; }
.gbl-guiderad__emne a + a { display: none; }
.gbl-guiderad__titel { flex: 1 1 260px; font-size: 23px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.gbl-guiderad__titel a { color: var(--gbl-blaek); text-decoration: none; }
.gbl-guiderad__titel a::after { content: ""; position: absolute; inset: 0; }
.gbl-guideliste .wp-block-post:hover .gbl-guiderad__titel a { color: var(--gbl-blaa); }
.gbl-guiderad__tekst { flex: 1 1 320px; }
.gbl-guiderad__tekst p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--gbl-daempet); }
.gbl-guiderad__tekst .wp-block-post-excerpt__more-text { display: none; }
.gbl-guiderad__mere { flex: 0 0 auto; font-weight: 650; color: var(--gbl-blaa); text-decoration: none; }

.wp-block-query-pagination { margin-top: 40px; gap: 12px; font-weight: 650; }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-no-results p { font-family: var(--gbl-serif); }

/* ── Indlæg (guide) og sider ───────────────────────────────────────── */

.gbl-top { padding-top: clamp(24px, 4vw, 40px); }
.gbl-top > * { margin: 0; }
.gbl-titel { margin: 22px 0 0 !important; max-width: 18ch; }
.gbl-titel--bred { max-width: 22ch; }
.gbl-top > .gbl-ingress, .gbl-top > .wp-block-term-description { margin-top: 28px; max-width: 36em; }

.gbl-brodkrummer { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--gbl-daempet); font-family: var(--gbl-sans); }
.gbl-brodkrummer a { color: var(--gbl-daempet); }
.gbl-brodkrummer [aria-current], .gbl-brodkrummer .last { color: var(--gbl-blaek); font-weight: 600; }
.gbl-brodkrummer p { margin: 0; font: inherit; color: inherit; }

.gbl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px !important; font-size: 15.5px; color: var(--gbl-daempet); }
.gbl-byline a { color: inherit; }
.gbl-byline__forfatter { display: inline-flex; align-items: center; gap: 10px; }
.gbl-byline__initialer { width: 36px; height: 36px; border-radius: 50%; background: var(--gbl-mint); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--gbl-blaek); }
.gbl-reklame-maerke { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 99px; background: var(--wp--preset--color--reklame-lys); color: #5C4206; font-weight: 600; }

.gbl-guide__krop { padding-top: 48px; }
.gbl-guide__krop:has(.gbl-indhold) { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 780px); gap: 56px; align-items: start; }
.gbl-guide__krop > * { margin: 0 !important; }
.gbl-guide__aside:not(:has(.gbl-indhold)) { display: none; }
.gbl-guide__aside { position: sticky; top: 24px; }
.admin-bar .gbl-guide__aside { top: 56px; }
.gbl-guide__indhold { max-width: 780px; min-width: 0; }

.gbl-indhold { display: flex; flex-direction: column; gap: 2px; border-top: 1.5px solid var(--gbl-blaek); padding-top: 14px; font-family: var(--gbl-sans); }
.gbl-indhold__titel { font-weight: 700; font-size: 15px; padding: 6px 0 10px; }
.gbl-indhold a { padding: 9px 0; color: var(--gbl-broed); text-decoration: none; font-size: 16px; line-height: 1.35; }
.gbl-indhold a:hover, .gbl-indhold a.er-aktiv { color: var(--gbl-blaek); font-weight: 650; }

/* Overskrifter og afstande inde i en guide */
.gbl-guide__indhold > :first-child { margin-top: 0; }
.gbl-guide__indhold > h2, .gbl-side__indhold > h2 { margin-top: clamp(56px, 7vw, 80px); }
.gbl-guide__indhold > h3, .gbl-side__indhold > h3 { margin-top: 32px; }
.gbl-guide__indhold > h3 + p, .gbl-side__indhold > h3 + p { margin-top: 10px; }
.gbl-guide__indhold > .gbl-beregner, .gbl-guide__indhold > .is-style-kort-mint { margin-top: clamp(48px, 6vw, 72px); }
.gbl-guide__indhold > .gbl-overblik + .gbl-beregner { margin-top: 48px; }
:is(.gbl-guide__indhold, .gbl-side__indhold) a:not(.wp-block-button__link) { text-underline-offset: 3px; }
[id] { scroll-margin-top: 24px; }

/* Hurtigt overblik (kort med tabel) */
.gbl-overblik h2 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
.gbl-overblik .wp-block-table { margin: 20px 0 0; }

/* ── Tabeller ──────────────────────────────────────────────────────── */

.wp-block-table.is-style-overblik, .wp-block-table.is-style-enkel { overflow-x: auto; }
.wp-block-table.is-style-overblik table, .wp-block-table.is-style-enkel table { width: 100%; border-collapse: collapse; }
.wp-block-table.is-style-overblik :is(th, td), .wp-block-table.is-style-enkel :is(th, td) { border: 0; }
.wp-block-table.is-style-overblik thead, .wp-block-table.is-style-enkel thead { border: 0; }

.wp-block-table.is-style-overblik table { min-width: 640px; font-size: 16px; }
.wp-block-table.is-style-overblik th { text-align: left; color: var(--gbl-daempet); font-size: 14.5px; font-weight: 600; padding: 12px 14px; border-bottom: 1.5px solid var(--gbl-blaek); }
.wp-block-table.is-style-overblik th:first-child, .wp-block-table.is-style-overblik td:first-child { padding-left: 0; }
.wp-block-table.is-style-overblik th:last-child { font-size: 0; }
.wp-block-table.is-style-overblik td { padding: 18px 14px; border-bottom: 1px solid var(--gbl-streg); vertical-align: middle; }
.wp-block-table.is-style-overblik td:first-child { font-weight: 700; font-size: 18px; }
.wp-block-table.is-style-overblik td:last-child { text-align: right; padding-right: 0; }
.wp-block-table.is-style-overblik td:last-child a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 13px; background: var(--gbl-gul); color: var(--gbl-blaek); font-weight: 700; text-decoration: none; white-space: nowrap; }
.wp-block-table.is-style-overblik td:last-child a:hover { background: #E3A223; }

.wp-block-table.is-style-enkel table { font-size: 17px; font-variant-numeric: tabular-nums; }
.wp-block-table.is-style-enkel th { text-align: left; font-size: 14.5px; color: var(--gbl-daempet); font-weight: 600; padding: 10px 0; border-bottom: 1.5px solid var(--gbl-blaek); }
.wp-block-table.is-style-enkel td { padding: 14px 0; border-bottom: 1px solid var(--gbl-streg); }
.wp-block-table.is-style-enkel :is(th, td):last-child { text-align: right; }

/* Hårdhedsskala som tabel: farveprik foran hver række */
.gbl-skalatabel tbody td:first-child::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 12px; vertical-align: -1px; background: var(--prik); }
.gbl-skalatabel tbody tr:nth-child(1) { --prik: #1F5F8B; }
.gbl-skalatabel tbody tr:nth-child(2) { --prik: #3C7DA6; }
.gbl-skalatabel tbody tr:nth-child(3) { --prik: #78A7C0; }
.gbl-skalatabel tbody tr:nth-child(4) { --prik: #B7CDD0; }
.gbl-skalatabel tbody tr:nth-child(5) { --prik: #DCD8C6; }
.gbl-skalatabel tbody tr:nth-child(6) { --prik: #EDE5D0; }

/* ── Produktgennemgang ─────────────────────────────────────────────── */

.gbl-produkt { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gbl-streg); }
h2 + .gbl-produkt { margin-top: 32px; border-top: 1.5px solid var(--gbl-blaek); }
.gbl-produkt > * { margin-top: 0; }
.gbl-produkt .wp-block-columns { gap: 28px; margin-bottom: 0; }
.gbl-produkt__top > .wp-block-column > * { margin-top: 0; }
.gbl-produkt__billede { margin: 0; }
.gbl-produkt__billede img { width: 100%; height: 200px; object-fit: cover; border-radius: 22px; background: var(--gbl-mint); display: block; }
.gbl-produkt p.is-style-etiket { margin: 0; }
.gbl-produkt__navn { font-size: 32px; letter-spacing: -0.025em; margin-top: 6px !important; }
.gbl-produkt h3 + p { margin-top: 12px; }
.gbl-produkt__fakta { margin-top: 26px !important; }
.gbl-produkt__fakta h4 { margin: 0 0 10px; }
.gbl-produkt__fakta ul { margin: 0; }
.gbl-produkt__koeb { margin-top: 28px !important; gap: 16px; align-items: center; }
.gbl-produkt__koeb > * { margin: 0 !important; }
.gbl-produkt--kort .gbl-produkt__navn { font-size: 30px; }
.gbl-produkt--kort .wp-block-buttons { margin-top: 20px; }

/* Rækker med flere produkter i ét kort (fx Løsninger til dit hjem) */
.gbl-loesningskort > * { margin-top: 0; }
.gbl-loesningskort > h3 { font-size: 24px; }
.gbl-loesningskort > p.is-style-note { margin-top: 6px; }
.gbl-produktrad { padding: 18px 0; border-top: 1px solid var(--gbl-streg); }
.gbl-loesningskort > .gbl-produktrad:first-of-type { margin-top: 18px; }
.gbl-loesningskort > .gbl-produktrad:last-child { padding-bottom: 0; }
.gbl-produktrad > * { margin: 0 !important; }
.gbl-produktrad__navn { font-family: var(--gbl-sans); font-weight: 700; font-size: 18px; color: var(--gbl-blaek); }
.gbl-produktrad p:not(.gbl-produktrad__navn) { font-size: 16px; line-height: 1.55; margin: 6px 0 12px !important; }

.gbl-noteband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding: 24px 28px; border-radius: 22px; background: var(--gbl-mint); }
.gbl-noteband > * { margin: 0 !important; }
.gbl-noteband > p:first-child { max-width: 40em; color: var(--gbl-blaek); }
.gbl-noteband .gbl-pil-link a { font-weight: 700; }

/* Læs også */
.gbl-laes-ogsaa h3 { font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.gbl-laes-ogsaa ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--gbl-sans); font-size: 17px; }
.gbl-laes-ogsaa li { margin: 0; }
.gbl-laes-ogsaa a { font-weight: 650; color: var(--gbl-blaek); }

/* ── Spørgsmål og svar (Detaljer-blokken) ──────────────────────────── */

.wp-block-details { border-top: 1px solid var(--gbl-streg); padding: 20px 0; margin: 0; }
:not(.wp-block-details) + .wp-block-details { border-top: 1.5px solid var(--gbl-blaek); margin-top: 16px; }
.wp-block-details:not(:has(+ .wp-block-details)) { border-bottom: 1px solid var(--gbl-streg); }
.wp-block-details + .wp-block-details { margin-top: 0 !important; }
.wp-block-details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--gbl-sans); line-height: 1.3; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--gbl-blaa); -webkit-mask: var(--ikon-plus) center / contain no-repeat; mask: var(--ikon-plus) center / contain no-repeat; transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { font-weight: 400; font-size: 17px; line-height: 1.65; margin-top: 12px; }

/* ── Dynevægt-beregner ─────────────────────────────────────────────── */

.gbl-beregner { background: var(--gbl-blaek); color: var(--gbl-baggrund); border-radius: 28px; padding: clamp(22px, 4vw, 36px); font-family: var(--gbl-sans); }
.gbl-beregner__titel { margin: 0; color: var(--gbl-baggrund); font-size: var(--wp--preset--font-size--stor); line-height: 1.1; letter-spacing: -0.025em; }
.gbl-beregner__tekst { margin: 10px 0 0; font-family: var(--gbl-serif); font-size: 17px; line-height: 1.6; color: var(--gbl-lys); }
.gbl-beregner__raekke { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; margin-top: 26px; }
.gbl-beregner__skyder { flex: 1 1 280px; min-width: 0; }
.gbl-beregner__skyder label { display: flex; justify-content: space-between; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.gbl-beregner__skyder input { width: 100%; margin-top: 14px; height: 28px; accent-color: var(--gbl-baggrund); cursor: pointer; }
.gbl-beregner__minmax { display: flex; justify-content: space-between; font-size: 13.5px; color: #A9BEB9; font-variant-numeric: tabular-nums; }
.gbl-beregner__resultat { flex: 0 1 220px; min-width: 0; background: var(--gbl-baggrund); color: var(--gbl-blaek); border-radius: 20px; padding: 20px 22px; }
.gbl-beregner__resultat > div { font-size: 15px; font-weight: 600; color: var(--gbl-daempet); }
.gbl-beregner__resultat output { display: block; margin-top: 4px; font-size: 44px; line-height: 1; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gbl-beregner__note { margin: 22px 0 0; font-family: var(--gbl-sans); font-size: 14.5px; line-height: 1.55; color: var(--gbl-lys); }
.gbl-beregner__knap { display: inline-flex; align-items: center; min-height: 48px; margin-top: 20px; padding: 0 20px; border-radius: 14px; background: var(--gbl-baggrund); color: var(--gbl-blaek) !important; font-weight: 700; text-decoration: none; }
.gbl-beregner__knap:hover { background: var(--gbl-mint); }

/* ── Vandhårdhed ───────────────────────────────────────────────────── */

.gbl-vandkort, .gbl-vandresultat { background: var(--gbl-hvid); border: 1px solid var(--gbl-streg); border-radius: 30px; padding: clamp(22px, 4vw, 36px); font-family: var(--gbl-sans); min-width: 0; }
.gbl-vandkort h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.gbl-vandkort > p { margin: 12px 0 0; font-family: var(--gbl-serif); font-size: 17px; line-height: 1.55; color: var(--gbl-daempet); }
.gbl-vandkort .gbl-skala { margin-top: 32px; }
.gbl-vandkort__note { margin: 14px 0 0 !important; font-family: var(--gbl-sans) !important; font-size: 13.5px !important; }

.gbl-vandform { margin: 24px 0 0; }
.gbl-vandform label { display: block; font-weight: 600; font-size: 15px; }
.gbl-vandform__raekke { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; max-width: 480px; }
.gbl-vandform input { flex: 1 1 160px; min-width: 0; height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--gbl-felt-kant); background: #F8FAF8; font-family: var(--gbl-sans); font-size: 18px; color: var(--gbl-blaek); font-variant-numeric: tabular-nums; }
.gbl-vandform button { height: 54px; padding: 0 24px; border-radius: 14px; border: 0; background: var(--gbl-blaa); color: var(--gbl-hvid); font-family: var(--gbl-sans); font-weight: 650; font-size: 17px; cursor: pointer; }
.gbl-vandform button:hover { background: var(--gbl-blaek); }

.gbl-skala__bar, .gbl-skala__tal, .gbl-skala__markoer { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.gbl-skala__trin { height: 16px; border-radius: 3px; }
.gbl-skala__trin--0 { background: #1F5F8B; border-radius: 8px 3px 3px 8px; }
.gbl-skala__trin--1 { background: #3C7DA6; }
.gbl-skala__trin--2 { background: #78A7C0; }
.gbl-skala__trin--3 { background: #B7CDD0; }
.gbl-skala__trin--4 { background: #DCD8C6; }
.gbl-skala__trin--5 { background: #EDE5D0; border: 1px solid #D6CCB2; border-radius: 3px 8px 8px 3px; }
.gbl-skala__trin.er-valgt { outline: 2.5px solid var(--gbl-blaek); outline-offset: 2px; }
.gbl-skala__tal { margin-top: 8px; font-size: 13px; color: var(--gbl-daempet); font-variant-numeric: tabular-nums; }
.gbl-skala__markoer { margin-bottom: 4px; align-items: end; }
.gbl-skala__markoer > * { justify-self: center; display: flex; flex-direction: column; align-items: center; font-size: 13px; font-weight: 700; color: var(--gbl-blaek); }
.gbl-skala__ender { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; font-weight: 600; }

.gbl-vandtjek { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.gbl-vandtjek__form { flex: 1 1 440px; min-width: 0; }
.gbl-vandtjek__form > p { margin: 0; font-family: var(--gbl-serif); font-size: 20px; line-height: 1.6; color: var(--gbl-broed); max-width: 30em; }
.gbl-vandtjek__form .gbl-vandform { margin-top: 30px; }
.gbl-vandtjek__form .gbl-vandform input { background: var(--gbl-hvid); font-size: 19px; height: 56px; }
.gbl-vandtjek__form .gbl-vandform button { height: 56px; padding: 0 26px; }
.gbl-vandresultat { flex: 1 1 480px; }
.gbl-vandresultat__hoved { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.gbl-vandresultat__hoved h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.gbl-vandresultat__hoved span { font-size: 15px; color: var(--gbl-daempet); }
.gbl-vandresultat__tal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 18px 0 30px; }
.gbl-vandresultat__dh { font-size: clamp(52px, 7vw, 76px); line-height: .95; font-weight: 750; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.gbl-vandresultat__kategori { padding: 7px 14px; border-radius: 99px; background: #EDE5D0; color: #4F4223; font-weight: 700; font-size: 16px; }
.gbl-vandresultat__tom { margin: 14px 0 26px; font-family: var(--gbl-serif); font-size: 17px; line-height: 1.6; color: var(--gbl-broed); }
.gbl-vandresultat__kilde { margin: 22px 0 0; font-size: 14.5px; color: var(--gbl-daempet); }

/* ── Mobil: favoritbjælke nederst på skærmen ───────────────────────── */

.gbl-favoritbjaelke { display: none; }
.gbl-favoritbjaelke p { margin: 0; font-family: var(--gbl-sans); font-size: 13px; color: var(--gbl-daempet); line-height: 1.3; }
.gbl-favoritbjaelke strong { display: block; font-size: 17px; color: var(--gbl-blaek); }
.gbl-favoritbjaelke .wp-block-button__link { min-height: 50px; padding: 0 22px; border-radius: 15px; font-size: 16px; }

/* ── Editor ────────────────────────────────────────────────────────── */

.gbl-pladsholder { padding: 12px 16px; border: 1.5px dashed var(--gbl-felt-kant); border-radius: 12px; color: var(--gbl-daempet); font-family: var(--gbl-sans); font-size: 14px; background: var(--gbl-hvid); }
.editor-styles-wrapper .gbl-favoritbjaelke { display: flex; padding: 12px 16px; border: 1.5px dashed var(--gbl-felt-kant); border-radius: 16px; background: var(--gbl-hvid); }
.editor-styles-wrapper .gbl-favoritbjaelke::before { content: "Kun på mobil: bjælke nederst på skærmen"; position: absolute; transform: translateY(-30px); font-size: 12px; color: var(--gbl-daempet); }

/* ── Mobil ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.gbl-guide__krop:has(.gbl-indhold) { display: block; }
	.gbl-guide__aside { display: none; }
}

@media (max-width: 700px) {
	.gbl-sidehoved__indre { padding-block: 14px; }
	.gbl-logo { font-size: 20px; }
	.gbl-logo svg { width: 28px; height: 28px; }

	/* Overbliktabellen bliver til en liste: navn, "bedst til" og knap */
	.wp-block-table.is-style-overblik table { min-width: 0; }
	.wp-block-table.is-style-overblik thead { display: none; }
	.wp-block-table.is-style-overblik tbody, .wp-block-table.is-style-overblik table { display: block; }
	.wp-block-table.is-style-overblik tr { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--gbl-streg); }
	.wp-block-table.is-style-overblik td { display: none; padding: 0; border: 0; }
	.wp-block-table.is-style-overblik td:first-child { display: block; grid-column: 1; font-size: 17px; }
	.wp-block-table.is-style-overblik td:nth-child(2) { display: block; grid-column: 1; font-size: 14px; color: var(--gbl-daempet); }
	.wp-block-table.is-style-overblik td:last-child { display: block; grid-column: 2; grid-row: 1 / span 2; }
	.wp-block-table.is-style-overblik td:last-child a { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 15px; }
	.gbl-overblik .wp-block-table { margin-top: 12px; }

	.gbl-produkt__billede img { height: 180px; }
	.gbl-produkt__navn { font-size: 28px; }

	.gbl-favoritbjaelke { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0 !important; padding: 12px 14px 22px; background: var(--gbl-hvid); border-top: 1px solid var(--gbl-streg); align-items: center; justify-content: space-between; gap: 12px; }
	body:has(.gbl-favoritbjaelke) { padding-bottom: 92px; }
}