/*
Theme Name: BP GreenGarden
Theme URI:
Author: Erik (praktik) for BP GreenGarden
Description: Skræddersyet WordPress-blocktema til BP GreenGarden — enmandsvirksomhed inden for haveservice i Silkeborg. Bygget uden sidebygger, styret via theme.json. Appelsintræ-tema og fast farvepalet udtrukket fra logo og baggrundsbillede. Layout inspireret af FF Haveservice (bedst byggede side i konkurrentanalysen).
Requires at least: 6.1
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.40.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bpgreengarden
*/

/* -----------------------------------------------------------
   Farver refereres via theme.json's palet, så de kun defineres
   ét sted. Lokale hjælpevariabler til sektionsrytmen.
   ----------------------------------------------------------- */
:root {
	--bpg-dark: var(--wp--preset--color--moerkegroen);
	/* #051D17 – logoets meget mørke grøn, ikke sort */
	--bpg-cream: var(--wp--preset--color--flode);
	/* #F8F4D4 */
	--bpg-orange: var(--wp--preset--color--orange);
	/* #E66708 */
	--bpg-green: var(--wp--preset--color--groen);
	/* #3E700B */
	--bpg-light: #FEFCF2;
	/* næsten hvid, varm – til lyse sektioner */
	--bpg-orange-hover: #FF7A1A;
	--bpg-pad-x: var(--wp--preset--spacing--30);
	--bpg-nav-h: 92px;
	/* logo 68px + 2×0.75rem padding */
}

/* Anker-links (#ydelser osv.) må ikke lande under den faste bjælke */
html {
	scroll-padding-top: var(--bpg-nav-h);
}

/* Skærmlæser-tekst */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip-link: spring navigation over til hovedindhold (tilgængelighed) */
.bpg-skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 200;
	background: var(--bpg-orange);
	color: var(--bpg-dark);
	font-weight: 700;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	transition: top 0.15s ease;
}

.bpg-skip-link:focus {
	top: 0;
}

/* -----------------------------------------------------------
   Tilgængelighed: global focus-visible for alle interaktive
   elementer. Orange ring, 3px, 2px offset — synlig på både
   lyse og mørke baggrunde (WCAG 2.4.7).
   ----------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--bpg-orange);
	outline-offset: 2px;
}

/* Sikr at alle knapper og link-knapper er mindst 44×44 px (WCAG 2.5.5) */
.bpg-cta,
.bpg-cta-lg,
.bpg-cta-outline,
.bpg-cta-footer,
.bpg-beregner-brug,
.bpg-cookie-accepter,
.bpg-cookie-detaljer-knap,
button[type="submit"],
button[type="button"] {
	min-height: 44px;
	min-width: 44px;
}

/* Brødtekst: 18 px (1.125rem) som ÉNSARTET minimum — også al "sekundær"
   tekst (noter, hjælpetekst, disclaimers). Målgruppen er ofte ældre
   (29-07-2026, Eriks anmodning om en fuld skrift-inspektion): 16 px, som
   tidligere var den absolutte bund, er sat op til samme 18 px som
   brødteksten, så der IKKE findes en mindre "sekundær" tekststørrelse
   nogen steder på siderne — kun farve/vægt adskiller dem visuelt.
   theme.json sætter "medium" (1.125rem = 18 px) som global standard. */
body {
	font-size: 1.125rem;
	/* 18 px — WCAG AAA ved 1.5 line-height */
}

/* Kort-tekst og "sekundær" tekst: samme 18 px som brødteksten (se ovenfor) */
.bpg-card p,
.bpg-section-lead,
.bpg-form-note,
.bpg-field-hint,
.bpg-beregner-disclaimer,
.bpg-price-note {
	font-size: 1.125rem;
	/* 18 px — ensartet med brødteksten, ikke en mindre "sekundær" størrelse */
}

/* Hjælpetekst: mørk grå-grøn (~7:1 mod hvid) i stedet for opacity */
.bpg-form-note,
.bpg-field-hint {
	color: #3a4a44;
}

/* Hero-lead: fløde på mørk overlay — kontrast er allerede 15.8:1 */
.bpg-hero-lead {
	font-size: 1.25rem;
}

/* Ydelsesside lead-tekst */
.bpg-ydelse-body .bpg-lead {
	font-size: 1.2rem;
}

/* Beregner-brug knap: sikr 44px */
.bpg-beregner-brug {
	min-height: 44px;
	padding: 0.7rem 1.25rem;
}

/* =============================================================
   1. NAVIGATION — solid, sticky bjælke (FF-model: logo, menu,
   telefon, CTA). Hero starter flush lige under den.
   ============================================================= */
/* Fast (fixed) bjælke, der bliver liggende og lader hero-billedet skinne
   igennem. Ude af dokumentflowet — derfor rykkes hero-indholdet ned. */
.bpg-header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Når man er logget ind, ligger WordPress' admin-bjælke fast i toppen.
   Ryk vores faste bjælke ned under den, så den ikke skæres af (32px på
   desktop, 46px på smalle skærme — WordPress' egne højder). */
.admin-bar .bpg-header-wrap {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .bpg-header-wrap {
		top: 46px;
	}
}

.bpg-main,
.bpg-ydelse-main {
	margin-top: 0 !important;
	/* Reservér plads til den faste bjælke som en MØRKEGRØN stribe, så
	   hero-billedet starter lige under baggen og der aldrig kan vise sig
	   cremet baggrund imellem. */
	padding-top: var(--bpg-nav-h);
	background-color: var(--bpg-dark);
}

/* Nulstil WordPress' standard blok-mellemrum mellem sektionerne i <main>.
   Uden dette viser `.bpg-main`s mørkegrønne baggrund sig som en synlig,
   mørk bjælke, hver gang to lyse/cremede sektioner mødes (fx Ydelser →
   Se vores arbejde). Sektionerne har i forvejen rigelig `padding-block`,
   så rytmen bevares uden det ekstra mellemrum. */
.bpg-main>*+*,
.bpg-ydelse-main>*+* {
	margin-top: 0;
}

.bpg-site-header {
	align-items: center;
	/* Massiv mørkegrøn bjælke (ingen transparens) */
	background-color: var(--bpg-dark);
	box-shadow: 0 2px 14px rgba(5, 29, 23, 0.28);
}

.bpg-logo-link {
	display: inline-flex;
	line-height: 0;
	border-radius: 8px;
	flex: none;
}

.bpg-logo-link:focus-visible {
	outline: 3px solid var(--bpg-orange);
	outline-offset: 3px;
}

.bpg-logo {
	display: block;
	width: auto;
	height: 68px;
	max-width: 100%;
}

.bpg-nav-cluster {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.bpg-header-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* -------------------------------------------------------------
   Navigation-blok (core) — stylet til den mørkegrønne bjælke.
   Menuen er en rigtig wp:navigation med Ydelser som undermenu;
   core leverer mobil-hamburger + overlay (TRIN 3).
   ------------------------------------------------------------- */
.bpg-nav {
	font-weight: 500;
	font-size: 1.3rem;
}

/* Vandret afstand mellem topniveau-punkter */
.bpg-nav .wp-block-navigation__container {
	gap: 1.5rem;
}

/* Fløde-farven på topniveau-links sættes via blokkens textColor:"flode".
   Orange ved hover/aktiv — dobbelt klasse for at slå core's
   `…__content.__content{color:inherit}` (specificitet 0,3,0). */
.bpg-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.bpg-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.bpg-nav .current-menu-item>.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--bpg-orange);
}

/* "Ydelser" er en klik-knap (openSubmenusOnClick) — nulstil knap-look */
.bpg-nav .wp-block-navigation-submenu__toggle {
	color: var(--bpg-cream);
	cursor: pointer;
}

.bpg-nav .wp-block-navigation__submenu-icon {
	fill: currentColor;
}

/* Undermenu-dropdown: mørkegrøn flade, fløde tekst, orange ved hover */
.bpg-nav .wp-block-navigation__submenu-container {
	background-color: var(--bpg-dark);
	border: 1px solid rgba(248, 244, 212, 0.16);
	border-radius: 10px;
	padding-block: 0.35rem;
	box-shadow: 0 12px 30px rgba(5, 29, 23, 0.35);
	min-width: 250px;
}

.bpg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
}

.bpg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.bpg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--bpg-orange);
}

/* Hamburger-knap (vises kun på mobil via overlayMenu:"mobile") */
.bpg-nav .wp-block-navigation__responsive-container-open,
.bpg-nav .wp-block-navigation__responsive-container-close {
	color: var(--bpg-cream);
}

.bpg-nav .wp-block-navigation__responsive-container-open:hover,
.bpg-nav .wp-block-navigation__responsive-container-close:hover {
	color: var(--bpg-orange);
}

/* Overlay (åben mobilmenu): mørkegrøn baggrund sættes af overlayBackgroundColor,
   her kun lidt luft og venstrestillede, større links */
.bpg-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.bpg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--bpg-cream);
	font-size: 1.15rem;
	padding-block: 0.4rem;
}

.bpg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
	padding-inline-start: 0.75rem;
}

.bpg-nav-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--bpg-cream);
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
}

.bpg-nav-phone:hover,
.bpg-nav-phone:focus-visible {
	color: var(--bpg-orange);
}

/* Orange knap — mørkegrøn tekst (kontrast 5,28:1, WCAG AA) */
.bpg-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	background: var(--bpg-orange);
	color: var(--bpg-dark);
	font-weight: 700;
	padding: 0.6rem 1.15rem;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.bpg-cta:hover,
.bpg-cta:focus-visible {
	background: var(--bpg-orange-hover);
	transform: translateY(-1px);
	color: var(--bpg-dark);
}

.bpg-cta-lg {
	padding: 0.85rem 1.6rem;
	font-size: 1.1rem;
}

/* =============================================================
   2. HERO — fuldt-bredt appelsintræ-billede med mørk overlay.
   WebP med JPEG-reserve via image-set(). Stier relative til
   denne style.css (temaets rod).
   ============================================================= */
.bpg-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(440px, 72vh, 660px);
	margin-top: 0 !important;
	/* Bjælkehøjden reserveres nu af .bpg-main; her kun luft om indholdet */
	padding-top: clamp(2rem, 6vw, 4rem);
	padding-bottom: clamp(3rem, 9vw, 6rem);
	padding-inline: var(--bpg-pad-x);
	background-color: var(--bpg-dark);
	background-image: url('assets/BP_Greengarden_BackgroundPicture.jpg');
	background-image: -webkit-image-set(url('assets/BP_Greengarden_BackgroundPicture.webp') type('image/webp'),
			url('assets/BP_Greengarden_BackgroundPicture.jpg') type('image/jpeg'));
	background-image: image-set(url('assets/BP_Greengarden_BackgroundPicture.webp') type('image/webp'),
			url('assets/BP_Greengarden_BackgroundPicture.jpg') type('image/jpeg'));
	background-size: cover;
	background-position: center;
}

/* Mørk overlay — fløde-tekst på denne måler 15,8:1 (WCAG AAA).
   Lidt tungere i venstre side, hvor teksten står. */
.bpg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(5, 29, 23, 0.78) 0%, rgba(5, 29, 23, 0.45) 55%, rgba(5, 29, 23, 0.30) 100%),
		linear-gradient(180deg, rgba(5, 29, 23, 0.25) 0%, rgba(5, 29, 23, 0.55) 100%);
}

.bpg-hero-inner {
	position: relative;
	z-index: 1;
	margin-inline: 0;
	/* venstrestillet indhold */
}

.bpg-hero h1,
.bpg-hero p {
	overflow-wrap: break-word;
}

.bpg-hero-lead {
	font-size: 1.25rem;
	max-width: 40ch;
	margin-top: 1rem;
}

.bpg-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
}

.bpg-actions-center {
	justify-content: center;
}

.bpg-hero-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--bpg-cream);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
}

.bpg-hero-phone:hover,
.bpg-hero-phone:focus-visible {
	color: var(--bpg-orange);
}

/* =============================================================
   3. FORDELE-STRIBE — ikonrække lige under hero (FF-model).
   Kun neutrale, sande udsagn. Konkrete garantier: TRIN 11.
   ============================================================= */
.bpg-usp {
	padding-block: 1.4rem;
	padding-inline: var(--bpg-pad-x);
}

.bpg-usp-list {
	list-style: none;
	/* Centreret blok, 80% af sektionens bredde (29-07-2026, Eriks
	   anmodning) — i stedet for at strække fra kant til kant. */
	max-width: 80%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2.5rem;
}

.bpg-usp-list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
}

.bpg-usp-list svg {
	color: var(--bpg-orange);
	flex: none;
}

/* Om os-teaser på forsiden (tidligere "Om Bojan", TRIN 11): billede + tekst
   side om side, stak på mobil. Rund lille avatar — den fulde, uklippede
   portrætudgave bruges i stedet på /om-os/ (.bpg-om-os-photo nedenfor). */
.bpg-om-bojan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem 2.5rem;
	margin-top: 2.25rem;
}

.bpg-om-bojan-photo {
	width: 200px;
	height: 200px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--bpg-orange);
}

.bpg-om-bojan-text {
	flex: 1 1 320px;
}

.bpg-om-bojan-list {
	justify-content: flex-start;
	margin-top: 1rem;
}

.bpg-om-bojan-more {
	margin-top: 1rem;
}

.bpg-om-bojan-more a {
	color: var(--bpg-cream);
	font-weight: 600;
}

/* 30-07-2026 (Eriks anmodning): på smal skærm ombrydes billede og tekst i
   .bpg-om-bojan (flex-wrap), men containerens standard `justify-content:
   flex-start` holdt billedet ved venstre kant i stedet for centreret, mens
   resten af sitet centrerer "Om os"-overskriften over den. Centrér både
   billede og tekstblok under det, når de er stablet. */
@media (max-width: 600px) {
	.bpg-om-bojan {
		justify-content: center;
		text-align: center;
	}

	.bpg-om-bojan-list {
		justify-content: center;
	}
}

/* Interaktivt kort (Leaflet + OpenStreetMap) under "Find os" på /om-os/
   (29-07-2026: fjernet fra forsiden igen på Eriks anmodning). */
.bpg-kort-wrap {
	margin-top: 1.75rem;
	max-width: 640px;
}

.bpg-kort {
	height: 300px;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: rgba(248, 244, 212, 0.15);
}

/* Anmeldelser-pladsholder (29-07-2026, Eriks anmodning) — mellem "Vores
   ydelser" og "Se vores arbejde". Samme stiplede visuelle sprog som
   galleriets manglende billeder (TRIN 9): tydeligt en "afventer indhold"-
   tilstand, ikke et forsøg på at ligne rigtige anmeldelser. */
.bpg-anmeldelser-carousel-pladsholder {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2.75rem;
}

.bpg-anmeldelser-carousel-pladsholder .bpg-carousel-btn {
	position: static;
	flex: none;
	opacity: 0.5;
	cursor: default;
}

.bpg-anmeldelse-kort {
	border: 2px dashed rgba(248, 244, 212, 0.35);
	border-radius: 12px;
	padding: 2rem 1.75rem;
	text-align: center;
	max-width: 480px;
	flex: 1 1 380px;
}

.bpg-anmeldelse-stjerner {
	font-size: 1.35rem;
	letter-spacing: 0.15em;
	color: rgba(248, 244, 212, 0.4);
	margin-bottom: 0.6rem;
}

.bpg-anmeldelse-tekst {
	margin: 0;
	color: rgba(248, 244, 212, 0.75);
	font-style: italic;
}

/* Punkt-indikatorer — samme visuelle sprog som en rigtig karrusel, men
   dekorative (ingen billeder at bladre imellem endnu). */
.bpg-anmeldelser-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.bpg-anmeldelser-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(248, 244, 212, 0.3);
}

.bpg-anmeldelser-dot.is-active {
	background: var(--bpg-cream);
}

@media (max-width: 600px) {
	.bpg-anmeldelser-carousel-pladsholder .bpg-carousel-btn {
		display: none;
	}
}

/* Forsidens servicefradrag-sektion (29-07-2026), mellem "Se vores arbejde"
   og "Om os": tekst + tjekliste til venstre, fast pris-faktaboks (genbruger
   .bpg-fact/.bpg-fact-price, se afsnit 4 nederst i filen) til højre. Stakker
   på mobil. */
.bpg-servicefradrag {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2rem 2.5rem;
	margin-top: 2.5rem;
}

.bpg-servicefradrag-text {
	flex: 2 1 360px;
}

.bpg-servicefradrag-text h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
}

/* Tjekliste i én kolonne — .bpg-usp-list er som standard en vandret,
   ombrydende ikonrække (til fx den mørke fordels-stribe under hero'en),
   hvilket ikke passer fire linjer med længere tekst. */
.bpg-servicefradrag-list {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.75rem;
}

/* Grøn i stedet for standard-orange: sektionen har lys baggrund
   (.bpg-section-light, næsten hvid), hvor mørkegrøn ~5,7:1 kontrast slår
   orange ~3,2:1 — orange er kun afprøvet på mørke baggrunde andre steder. */
.bpg-servicefradrag-list svg {
	color: var(--bpg-green);
}

.bpg-servicefradrag-more {
	margin-top: 1.5rem;
}

/* Kort introduktion på forsiden: mindre tekst + tilgængelig collapsible */
.bpg-servicefradrag-short {
	margin: 0;
	font-size: 1.125rem;
	color: #23302a;
	/* lidt mørkere end brødtekst for kontrast på cremet baggrund */
}

.bpg-servicefradrag-details {
	margin-top: 0.75rem;
}

.bpg-servicefradrag-summary {
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	color: var(--bpg-green);
	background: none;
	border: 0;
	padding: 0;
	text-decoration: underline;
}

/* Fjern browserens standard marker og tilføj et enkelt tekstligt hint for læsbarhed */
details.bpg-servicefradrag-details summary::-webkit-details-marker {
	display: none;
}

details.bpg-servicefradrag-details summary::marker {
	display: none;
}

details.bpg-servicefradrag-details summary::after {
	content: ' ▾';
	font-weight: 600;
	color: var(--bpg-green);
}

details.bpg-servicefradrag-details[open] summary::after {
	content: ' ▴';
}

.bpg-servicefradrag-fact {
	flex: 1 1 300px;
	margin-top: 0;
}

/* "Om os"-siden (/om-os/): samme foto som forsiden, men i fuld
   portrætstørrelse (360×480, ikke beskåret til en rund avatar) side om side
   med den uddybende tekst. Stakker på mobil ligesom teaseren ovenfor. */
.bpg-om-os-intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.75rem 2.5rem;
	margin-top: 1.5rem;
}

.bpg-om-os-photo {
	width: 100%;
	max-width: 320px;
	height: auto;
	flex: 1 1 260px;
	border-radius: 14px;
	object-fit: cover;
}

.bpg-om-os-text {
	flex: 2 1 360px;
}

/* Sociale links (enkelt ikon) */
.bpg-social-links {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Footer-specific social layout: ensure visible on dark background */
.bpg-footer-socials .bpg-social-link {
	color: var(--bpg-cream);
}

.bpg-footer-socials .bpg-social-link svg {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.bpg-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: inherit;
	/* inherit text color so it contrasts on both light/dark sections */
	text-decoration: none;
}

.bpg-social-link svg {
	display: block;
	width: 36px;
	height: 36px;
	color: currentColor;
	/* follow link color */
}

.bpg-social-link:hover,
.bpg-social-link:focus-visible {
	color: var(--bpg-orange);
	transform: translateY(-2px);
}

/* =============================================================
   4. SEKTIONER — veksler lyst/cremet/mørkt for rytme (FF-model)
   ============================================================= */
.bpg-section {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	padding-inline: var(--bpg-pad-x);
}

.bpg-section-light {
	background: var(--bpg-light);
}

.bpg-section-cream {
	background: var(--bpg-cream);
}

.bpg-section-dark {
	background: var(--bpg-dark);
}

.bpg-section h2 {
	margin-bottom: 0.5rem;
}

.bpg-section-lead {
	font-size: 1.15rem;
	max-width: 60ch;
	margin-inline: auto;
}

/* Ydelseskort */
.bpg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.25rem;
	margin-top: 2.75rem;
}

.bpg-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: #fff;
	border: 1px solid rgba(5, 29, 23, 0.08);
	border-radius: 14px;
	padding: 1.6rem;
	text-decoration: none;
	color: var(--bpg-dark);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bpg-card:hover,
.bpg-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(5, 29, 23, 0.13);
	border-color: var(--bpg-green);
}

.bpg-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(62, 112, 11, 0.12);
	color: var(--bpg-green);
}

.bpg-card h3 {
	margin: 0.35rem 0 0;
	font-size: 1.2rem;
}

.bpg-card p {
	margin: 0;
	font-size: 1.125rem;
}

.bpg-card-cta {
	background: var(--bpg-dark);
	color: var(--bpg-cream);
	border-color: transparent;
}

.bpg-card-cta .bpg-card-icon {
	background: rgba(230, 103, 8, 0.2);
	color: var(--bpg-orange);
}

.bpg-card-cta:hover {
	border-color: var(--bpg-orange);
}

/* Galleriet på forsiden er indholdstypen "Haveprojekt" fra
   galleri-pluginnet (TRIN 9). Dets styling ligger i pluginnet, så den
   følger med ved et temaskift — se assets/galleri.css dér. */

.bpg-contact-cta {
	text-align: center;
}

/* Almindelige sider (page.html / index.html): indhold starter under den
   faste bjælke, lys baggrund, læsbar bredde. Skeletsider i TRIN 3 —
   indhold skrives i senere trin. */
.bpg-page-main {
	padding-top: calc(var(--bpg-nav-h) + clamp(1.5rem, 4vw, 3rem));
	padding-bottom: clamp(3rem, 7vw, 5rem);
	padding-inline: var(--bpg-pad-x);
	background: var(--bpg-light);
	min-height: 60vh;
}

.bpg-page-header {
	margin-bottom: 1.25rem;
}

/* Mere luft mellem afsnit på almindelige sider (fx spørgsmålene på
   /spoergsmaal-og-svar/, 29-07-2026, Eriks anmodning) — WP's standard
   block-gap (24px) mellem hvert H2 og forrige afsnit stod for tæt til en
   side, der reelt er en lang liste af spørgsmål/svar. */
.bpg-page-main .wp-block-post-content h2 {
	margin-top: 3.5rem;
}

.bpg-page-main .wp-block-post-content>h2:first-child {
	margin-top: 0;
}

/* Svartid-linjen på /kontakt/ (29-07-2026) — siden er bevidst rendyrket til
   skriftlig kontakt (formularen), intet telefonlink her; nummeret findes i
   header/sidefod til dem, der hellere vil ringe. */
.bpg-lead+.bpg-field-hint {
	margin-top: 1.25rem;
	margin-bottom: 1.75rem;
}

/* =============================================================
   5. SIDEFOD
   ============================================================= */
.bpg-footer {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	padding-inline: var(--bpg-pad-x);
}

.bpg-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	column-gap: clamp(3.5rem, 8vw, 7rem);
	row-gap: 2.75rem;
	justify-content: space-between;
}

.bpg-footer h3 {
	font-size: 1.2rem;
	margin: 0 0 0.5rem;
}

.bpg-footer p {
	margin: 0.25rem 0;
}

.bpg-footer a {
	color: var(--bpg-cream);
}

.bpg-footer a:hover {
	color: var(--bpg-orange);
}

.bpg-footer-logo {
	height: 60px;
	width: auto;
	margin-bottom: 0.75rem;
}

.bpg-footer-slogan {
	font-weight: 700;
	color: var(--bpg-orange);
}

/* Én linje pr. kontaktoplysning (ikke "Telefon: …"/"E-mail: …" klemt ind i
   selve det understregede link — det så rodet ud, 29-07-2026). */
.bpg-footer-linje {
	margin: 0.6rem 0 0;
}

.bpg-footer-linje+.bpg-footer-linje {
	margin-top: 0.6rem;
}

.bpg-footer-hint {
	margin: 0.15rem 0 0;
	color: rgba(248, 244, 212, 0.72);
	font-style: italic;
}

/* Telefonikon i sidefoden, så nummeret tydeligt læses som et telefonnummer
   (samme ikon som headerens .bpg-nav-phone). */
.bpg-footer-tlf {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

/* CTA-knap gentaget i sidefoden — samme orange/mørkegrøn kombination
   som i headeren (målt 5,28:1, WCAG AA), kun med luft ovenover. */
.bpg-cta-footer {
	margin-top: 0.75rem;
}

/* =============================================================
   6. YDELSESSIDER (TRIN 6) — fælles skabelon for de fem ydelser
   efter FF Haveservice-modellen.
   ============================================================= */
.bpg-ydelse-main {
	/* Samme greb som forsiden: bjælkehøjden reserveres som en mørkegrøn
	   stribe, så sidehovedets billede/farve starter flush under baggen. */
	padding-top: var(--bpg-nav-h);
	background-color: var(--bpg-dark);
}

/* Sidehoved for ydelsen: appelsintræet er med, men afdæmpet — det skal
   ikke konkurrere med ydelsestekst og priser (docs: Del 1 §6). */
.bpg-ydelse-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	padding-inline: var(--bpg-pad-x);
	background-color: var(--bpg-dark);
	background-image: url('assets/BP_Greengarden_BackgroundPicture.jpg');
	background-image: -webkit-image-set(url('assets/BP_Greengarden_BackgroundPicture.webp') type('image/webp'),
			url('assets/BP_Greengarden_BackgroundPicture.jpg') type('image/jpeg'));
	background-image: image-set(url('assets/BP_Greengarden_BackgroundPicture.webp') type('image/webp'),
			url('assets/BP_Greengarden_BackgroundPicture.jpg') type('image/jpeg'));
	background-size: cover;
	background-position: center 60%;
}

/* Tungere overlay end på forsiden (0,80-0,88 mod forsidens 0,30-0,78):
   fløde-tekst måler dermed mindst samme 15,8:1 som forsidens hero. */
.bpg-ydelse-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(5, 29, 23, 0.90) 0%, rgba(5, 29, 23, 0.80) 100%);
}

.bpg-ydelse-hero .wp-block-post-title {
	margin: 0;
	overflow-wrap: break-word;
}

/* Brødtekst i læsbar bredde */
.bpg-ydelse-body h2 {
	margin-top: 2.75rem;
	font-size: 1.6rem;
}

.bpg-ydelse-body> :first-child {
	margin-top: 0;
}

/* Indledningen (første afsnit) står lidt større — aktiv, kort anslag */
.bpg-ydelse-body .bpg-lead {
	font-size: 1.2rem;
	font-weight: 500;
}

.bpg-ydelse-body ul {
	padding-left: 1.15rem;
}

.bpg-ydelse-body li {
	margin-bottom: 0.4rem;
}

/* Faktaboks — bruges til pris og til sæson-overblik */
.bpg-fact {
	background: #fff;
	border: 1px solid rgba(5, 29, 23, 0.10);
	border-left: 5px solid var(--bpg-green);
	border-radius: 12px;
	padding: 1.1rem 1.35rem;
	margin-top: 1.25rem;
}

.bpg-fact p {
	margin: 0.35rem 0;
}

.bpg-fact p:first-child {
	margin-top: 0;
}

.bpg-fact p:last-child {
	margin-bottom: 0;
}

.bpg-fact-price {
	border-left-color: var(--bpg-orange);
}

.bpg-price-figure {
	font-size: 1.35rem;
	font-weight: 700;
}

.bpg-price-note {
	font-size: 1.125rem;
}

/* FAQ nederst på ydelsessiden (2-3 spørgsmål) */
.bpg-ydelse-body .bpg-faq-q {
	margin-top: 1.6rem;
	margin-bottom: 0.35rem;
	font-size: 1.1rem;
	font-weight: 700;
}

/* =============================================================
   7. KONTAKTFORMULAR PÅ YDELSESSIDEN (markup i TRIN 6,
   afsendelse i TRIN 7)
   ============================================================= */
.bpg-form {
	margin-top: 1.75rem;
}

.bpg-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	/* Lodret luft mellem feltrækken, "Hvilken opgave…", "Hvornår ønsker
	   du…", "Beskriv kort opgaven" og "Billede af haven" — øget yderligere
	   29-07-2026 på Eriks anmodning (var 2rem). */
	gap: 3rem 1.25rem;
}

.bpg-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.bpg-field-full {
	grid-column: 1 / -1;
}

.bpg-field label {
	font-weight: 700;
	font-size: 1.125rem;
}

.bpg-req {
	color: var(--bpg-orange);
}

.bpg-field input,
.bpg-field select,
.bpg-field textarea {
	font: inherit;
	color: var(--bpg-dark);
	background: #fff;
	border: 1px solid rgba(5, 29, 23, 0.28);
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
	width: 100%;
	/* Uden dette lægger padding sig oven i bredden og skaber vandret overløb */
	box-sizing: border-box;
	min-height: 44px;
	/* tilgængeligt trykmål, jf. TRIN 16 */
}

.bpg-field textarea {
	resize: vertical;
}

.bpg-field input:focus-visible,
.bpg-field select:focus-visible,
.bpg-field textarea:focus-visible {
	outline: 3px solid var(--bpg-orange);
	outline-offset: 1px;
	border-color: var(--bpg-green);
}

.bpg-form-actions {
	/* Mere luft ned til billed-samtykke-checkboxen ovenfor
	   (29-07-2026, Eriks anmodning) — var 1.5rem. */
	margin-top: 2.5rem;
	margin-bottom: 0;
}

.bpg-form-actions .bpg-cta {
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.bpg-form-note {
	font-size: 1.125rem;
	margin-top: 0.75rem;
}

/* Honeypot (TRIN 7) — flyttet ud af skærmen, IKKE display:none. Nogle
   robotter genkender og springer netop display:none/visibility:hidden-felter
   over; en off-canvas position fanger dem stadig. */
.bpg-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	margin: 0;
}

/* Afkrydsnings-/radiogrupper (opgavetype, engang/fast) */
.bpg-fieldset {
	border: 0;
	border-top: 2px solid rgba(5, 29, 23, 0.12);
	padding: 1.5rem 0 0;
	margin: 0;
}

/* Et fieldset-legend introducerer en HEL gruppe af valg (fx alle
   opgave-afkrydsningerne) — det skal derfor tydeligt læses som en
   overskrift, ikke som endnu et feltlabel på linje med "Navn"/"Telefon"
   (29-07-2026, Eriks anmodning om mere kontrast mellem de to niveauer). */
.bpg-fieldset legend {
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--bpg-green);
	padding: 0;
	margin-bottom: 0.85rem;
}

.bpg-checkbox-group,
.bpg-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
}

.bpg-checkbox-item,
.bpg-radio-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 400;
	color: #3a4a44;
	cursor: pointer;
}

.bpg-checkbox-item input,
.bpg-radio-item input {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	accent-color: var(--bpg-green);
}

.bpg-field-hint {
	font-size: 1.125rem;
}

.bpg-samtykke label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 500;
	cursor: pointer;
}

.bpg-samtykke input {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	margin-top: 0.2rem;
	accent-color: var(--bpg-green);
}

/* Turnstile-widgettens iframe har sin egen bredde — undgå overløb på smal skærm */
.cf-turnstile {
	max-width: 100%;
	overflow: hidden;
}

/* Statusbanner efter indsendelse (TRIN 7) */
.bpg-banner {
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	font-weight: 600;
}

.bpg-banner-ok {
	background: rgba(62, 112, 11, 0.14);
	border: 1px solid var(--bpg-green);
	color: var(--bpg-dark);
}

.bpg-banner-fejl {
	background: rgba(230, 103, 8, 0.12);
	border: 1px solid var(--bpg-orange);
	color: var(--bpg-dark);
}

.bpg-slut-cta {
	text-align: center;
}

/* =============================================================
   COOKIEBANNER (TRIN 14/17) — diskret, ældre-venligt design.
   - Lille boks i nederste højre hjørne (dækker ikke indhold).
   - Store knapper (44px+) med tydelig kontrast.
   - Læsbar tekst (18px).
   - "Hvad er cookies?" kan foldes ud for detaljer.
   - Sporing starter først efter "Ja tak".
   ============================================================= */
.bpg-cookie-banner {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 100;
	max-width: 340px;
	background: var(--bpg-dark);
	color: var(--bpg-cream);
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(5, 29, 23, 0.30);
	padding: 1.25rem;
}

.bpg-cookie-banner[hidden] {
	display: none;
}

.bpg-cookie-banner-inner {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.bpg-cookie-banner-tekst {
	margin: 0;
	font-size: 1.125rem;
	/* 18px — læsbart for ældre */
	line-height: 1.45;
}

.bpg-cookie-banner-knapper {
	display: flex;
	gap: 0.6rem;
}

.bpg-cookie-accepter {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.125rem;
	min-height: 44px;
	padding: 0.5rem 1.1rem;
}

.bpg-cookie-detaljer-toggle {
	margin: 0;
}

.bpg-cookie-detaljer-knap {
	background: none;
	border: 0;
	color: var(--bpg-cream);
	text-decoration: underline;
	font: inherit;
	font-size: 1.125rem;
	cursor: pointer;
	padding: 0.25rem 0;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.bpg-cookie-detaljer-knap:hover,
.bpg-cookie-detaljer-knap:focus-visible {
	color: var(--bpg-orange);
}

.bpg-cookie-detaljer {
	font-size: 1.125rem;
	background: rgba(248, 244, 212, 0.08);
	border-radius: 10px;
	padding: 0.85rem 1rem;
}

.bpg-cookie-detaljer[hidden] {
	display: none;
}

.bpg-cookie-detaljer ul {
	margin: 0;
	padding-left: 1.1rem;
}

.bpg-cookie-detaljer li+li {
	margin-top: 0.4rem;
}

.bpg-cookie-detaljer a {
	color: var(--bpg-cream);
}

.bpg-cookie-detaljer a:hover {
	color: var(--bpg-orange);
}

/* På meget smalle skærme: fuld bredde i bunden */
@media (max-width: 400px) {
	.bpg-cookie-banner {
		right: 0;
		left: 0;
		bottom: 0;
		max-width: none;
		border-radius: 14px 14px 0 0;
	}
}

/* =============================================================
   8. PRISBEREGNER TIL HÆKKLIPNING (TRIN 8)
   Rent klientside-beregnet vejledende overslag — se
   inc/prisberegner.php (satser) og assets/prisberegner.js (regnestykket).
   ============================================================= */
.bpg-beregner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

/* To spalter: input/radio til venstre, resultatet til højre — så prisen
   fremkommer ved siden af felterne, opdateret i realtid (29-07-2026,
   ffhaveservice.dk-inspireret). Ombrydes til én spalte på smal skærm. */
.bpg-beregner-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
}

.bpg-beregner-inputs {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1 1 240px;
}

.bpg-beregner-layout .bpg-beregner-result {
	flex: 1 1 240px;
}

.bpg-beregner-result {
	margin-top: 0;
}

.bpg-beregner-disclaimer {
	font-size: 1.125rem;
}

.bpg-beregner-brug {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	align-self: flex-start;
}

.bpg-beregner-brug:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* =============================================================
   9. YDELSESSIDE GALLERI (før/efter på ydelsessider)
   Galleriet breder sig ud til 1100px (alignwide i mønsteret),
   mens brødteksten er 760px. Seksionsrytme matcher forsiden.
   ============================================================= */
.bpg-ydelse-galleri {
	margin-top: 0;
}

.bpg-ydelse-main>*+* {
	margin-top: 0;
}

/* =============================================================
   10. POP-UP — henvisning til prisberegneren på forsiden (29-07-2026)
   Samme dialog-/backdrop-mønster som galleriets lightbox
   (bpgreengarden-galleri/assets/lightbox.js).
   ============================================================= */
.bpg-popup-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(5, 29, 23, 0.72);
	z-index: 300;
}

.bpg-popup-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 301;
	width: min(92vw, 440px);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--bpg-cream);
	color: var(--bpg-dark);
	border-radius: 16px;
	padding: 2.5rem 2rem 2rem;
	text-align: center;
	box-shadow: 0 20px 50px rgba(5, 29, 23, 0.35);
}

.bpg-popup-kicker {
	margin: 0 0 0.25rem;
	color: var(--bpg-orange);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1rem;
}

.bpg-popup-dialog h2 {
	margin: 0 0 0.85rem;
	font-size: 1.75rem;
}

.bpg-popup-dialog p {
	margin: 0 0 1.5rem;
}

.bpg-popup-luk {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--bpg-dark);
	cursor: pointer;
	padding: 0.5rem;
}

/* Låser baggrundens scroll, mens pop-up'en er åben (samme greb som
   .bpg-lightbox-aaben andetsteds). */
body.bpg-popup-aaben {
	overflow: hidden;
}

/* =============================================================
   11. RESPONSIVT
   ============================================================= */
/* Navigation-blokken håndterer selv skift til mobil-hamburger (core
   overlayMenu:"mobile", omkring 600 px). I mellemområdet strammes
   afstand/skrift, så den vandrette menu ikke løber over. Logo, telefon
   og CTA er altid synlige — logoet gemmes aldrig bag menuknappen. */
@media (max-width: 1100px) {
	.bpg-nav-cluster {
		gap: 1rem;
	}

	.bpg-header-actions {
		gap: 0.9rem;
	}

	.bpg-nav {
		font-size: 1.15rem;
	}

	.bpg-nav .wp-block-navigation__container {
		gap: 0.85rem;
	}
}

/* Under hamburger-grænsen: skjul telefonens tal-tekst for at give plads til
   CTA + menuknap; selve telefonikonet forbliver klikbart. */
@media (max-width: 500px) {
	.bpg-nav-phone span {
		display: none;
	}

	.bpg-nav-phone {
		gap: 0;
	}
}

@media (max-width: 600px) {
	:root {
		--bpg-nav-h: 80px;
	}

	/* logo 56px + 2×0.75rem padding */
	.bpg-logo {
		height: 56px;
	}

	.bpg-cta {
		padding: 0.5rem 0.9rem;
	}

	.bpg-hero {
		min-height: 60vh;
	}

	/* Overlay lidt tungere på mobil, hvor teksten fylder mere */
	.bpg-hero::before {
		background: linear-gradient(180deg, rgba(5, 29, 23, 0.55) 0%, rgba(5, 29, 23, 0.72) 100%);
	}
}