/* =====================================================================
 * 1.59.0 — Florabloei-site in het thema Aubergine en saffraan.
 * Overschrijft de eigen header, footer en homepage (blokken met eigen stijl
 * in het WordPress-thema) en de basiskleuren van het thema, op alle pagina's.
 * "html body" + !important is nodig omdat de blokken hun kleuren deels in
 * style-attributen en met !important hebben staan.
 * ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root {
	--fb-aubergine: #2d1e3e;
	--fb-aubergine-2: #5b3c7d;
	--fb-aubergine-3: #3e2d52;
	--fb-saffraan: #f2a93b;
	--fb-saffraan-donker: #e0951f;
	--fb-grond: #f4f3f8;
	--fb-tekst-zwak: #6b5f78;
	--fb-rand: #e2dde8;
	/* Basiskleuren en letter van het WordPress-thema */
	--wp--preset--color--base: #f4f3f8 !important;
	--wp--preset--color--contrast: #2d1e3e !important;
	--wp--preset--font-family--body: "Urbanist", system-ui, sans-serif !important;
	--wp--preset--font-family--heading: "Urbanist", system-ui, sans-serif !important;
}
html body { background: var(--fb-grond) !important; color: var(--fb-aubergine); font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
html body :where(h1, h2, h3, h4) { font-family: "Urbanist", system-ui, sans-serif; letter-spacing: -0.01em; }

/* ---------- Header ---------- */
html body .fb-site-header {
	background: var(--fb-aubergine) !important;
	border-bottom: 0 !important;
	font-family: "Urbanist", system-ui, sans-serif !important;
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}
html body .fb-site-header .fb-sh-logo { color: #ffffff !important; }
html body .fb-site-header .fb-sh-logo svg { stroke: var(--fb-saffraan) !important; }
html body .fb-site-header .fb-sh-naam { font-family: "Urbanist", system-ui, sans-serif !important; font-style: normal !important; font-weight: 800 !important; font-size: 23px !important; letter-spacing: -0.02em !important; }
html body .fb-site-header .fb-sh-tag { color: #cfc6da !important; font-size: 15px !important; }
html body .fb-site-header .fb-sh-link { color: #ffffff !important; font-weight: 600 !important; }
html body .fb-site-header .fb-sh-link:hover { color: var(--fb-saffraan) !important; }
html body .fb-site-header .fb-sh-btn {
	background: var(--fb-saffraan) !important;
	color: var(--fb-aubergine) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	padding: 11px 24px !important;
}
html body .fb-site-header .fb-sh-btn:hover { background: var(--fb-saffraan-donker) !important; text-decoration: none !important; }
html body .fb-site-header a:focus-visible { outline: 2px solid var(--fb-saffraan); outline-offset: 3px; border-radius: 6px; }

/* ---------- Footer ---------- */
html body .fb-site-footer {
	background: #241731 !important;
	border-top: 0 !important;
	color: #cfc6da !important;
	font-family: "Urbanist", system-ui, sans-serif !important;
	font-size: 15px !important;
}
html body .fb-site-footer a { color: #ffffff !important; }
html body .fb-site-footer a:hover { color: var(--fb-saffraan) !important; }
html body .fb-site-footer .fb-sf-logo { color: #ffffff !important; }
html body .fb-site-footer .fb-sf-logo svg { stroke: var(--fb-saffraan) !important; }
html body .fb-site-footer .fb-sf-naam { font-family: "Urbanist", system-ui, sans-serif !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: -0.02em; }
html body .fb-site-footer .fb-sf-kop { color: var(--fb-saffraan) !important; font-weight: 700 !important; }
html body .fb-site-footer .fb-sf-onder { border-top-color: rgba(255, 255, 255, 0.12) !important; color: #b3a8c2 !important; }

/* ---------- Homepage ---------- */
html body #florabloei-home { background: var(--fb-grond) !important; color: var(--fb-aubergine) !important; font-family: "Urbanist", system-ui, sans-serif !important; }
html body #florabloei-home .fb-display { font-family: "Urbanist", system-ui, sans-serif !important; font-style: normal !important; }
html body #florabloei-home .fb-hero span { color: var(--fb-aubergine-2) !important; font-weight: 700 !important; }
html body #florabloei-home .fb-hero-title { color: var(--fb-aubergine) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
html body #florabloei-home .fb-hero-title em {
	font-style: normal !important;
	color: var(--fb-aubergine-2) !important;
	background: linear-gradient(transparent 62%, rgba(242, 169, 59, 0.55) 62%);
	padding: 0 4px;
}
html body #florabloei-home .fb-hero p { color: var(--fb-tekst-zwak) !important; }
html body #florabloei-home .fb-btn-primary {
	background: var(--fb-saffraan) !important;
	color: var(--fb-aubergine) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}
html body #florabloei-home .fb-btn-primary:hover { background: var(--fb-saffraan-donker) !important; color: var(--fb-aubergine) !important; }
html body #florabloei-home .fb-btn-ghost {
	border: 1.5px solid var(--fb-aubergine) !important;
	color: var(--fb-aubergine) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	background: #ffffff !important;
}
html body #florabloei-home .fb-btn-ghost:hover { background: #efe8f6 !important; }
html body #florabloei-home .fb-benefit {
	border: 1px solid var(--fb-rand) !important;
	border-radius: 18px !important;
	box-shadow: 0 1px 2px rgba(45, 30, 62, 0.05), 0 6px 18px rgba(45, 30, 62, 0.06);
}
html body #florabloei-home .fb-benefit svg {
	stroke: var(--fb-aubergine-2) !important;
	box-sizing: content-box;
	padding: 10px;
	border-radius: 12px;
	background: #fbeed8;
}
html body #florabloei-home .fb-benefit h3 { color: var(--fb-aubergine) !important; font-weight: 700 !important; font-size: 17px !important; }
html body #florabloei-home .fb-benefit p { color: var(--fb-tekst-zwak) !important; }
html body #florabloei-home .fb-cta { background: var(--fb-aubergine) !important; }
html body #florabloei-home .fb-cta .fb-display { color: #ffffff !important; font-weight: 800 !important; font-size: 32px !important; }
html body #florabloei-home .fb-cta p { color: #e6dff0 !important; }
html body #florabloei-home .fb-cta .fb-btn-primary { background: var(--fb-saffraan) !important; color: var(--fb-aubergine) !important; }
html body #florabloei-home a:focus-visible { outline: 2px solid var(--fb-aubergine-2); outline-offset: 3px; }

/* ---------- Gewone WordPress-pagina's (tekst, knoppen, links) ---------- */
html body .wp-block-post-content a:not(.wp-element-button):not([class*="kwp-"]):not([class*="fb-"]) { color: var(--fb-aubergine-2); }
html body .wp-element-button,
html body .wp-block-button__link {
	background: var(--fb-saffraan) !important;
	color: var(--fb-aubergine) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}

/* Paginatitels van het thema (was Cardo) */
html body .wp-block-post-title,
html body .wp-block-site-title,
html body main h1,
html body main h2 {
	font-family: "Urbanist", system-ui, sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	color: var(--fb-aubergine);
}

/* =====================================================================
 * 2.14.0 — Nieuw Florabloei-logo in header en footer.
 * De HTML van header/footer staat in WordPress (blokken), niet in de plugin.
 * Daarom vervangen we het oude bladicoon + de tekst "florabloei" hier via CSS
 * door het nieuwe logo (witte variant, voor de donkere aubergine balk).
 * De link houdt zijn aria-label "Florabloei – naar de homepage".
 * ===================================================================== */
html body .fb-site-header .fb-sh-logo > svg,
html body .fb-site-header .fb-sh-logo > .fb-sh-naam,
html body .fb-site-footer .fb-sf-logo > svg,
html body .fb-site-footer .fb-sf-logo > .fb-sf-naam { display: none !important; }
html body .fb-site-header .fb-sh-logo,
html body .fb-site-footer .fb-sf-logo { display: inline-flex !important; align-items: center !important; line-height: 0 !important; }
html body .fb-site-header .fb-sh-logo::before,
html body .fb-site-footer .fb-sf-logo::before {
	content: "";
	display: block;
	background: url("../img/florabloei-logo-wit.svg") no-repeat left center / contain;
	aspect-ratio: 2722 / 880;
}
html body .fb-site-header .fb-sh-logo::before { height: 40px; width: 124px; }
html body .fb-site-footer .fb-sf-logo::before { height: 34px; width: 105px; }
@media (max-width: 600px) {
	html body .fb-site-header .fb-sh-logo::before { height: 32px; width: 99px; }
}

/* =====================================================================
 * 2.16.0 — Homepage: aanmelden als kweker duidelijker (zie class-kwp-homepage.php).
 * ===================================================================== */
html body .fb-site-header .fb-sh-aanmelden { color: #ffffff !important; font-weight: 600 !important; text-decoration: none !important; }
html body .fb-site-header .fb-sh-aanmelden:hover { color: var(--fb-saffraan) !important; }
@media (max-width: 600px) { html body .fb-site-header .fb-sh-aanmelden { display: none !important; } }

html body #florabloei-home .fb-hero .fb-hero-code {
	flex-basis: 100%;
	margin-top: 4px;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--fb-tekst-zwak) !important;
}
html body #florabloei-home .fb-hero .fb-hero-code a { color: var(--fb-aubergine-2) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html body #florabloei-home .fb-hero br { display: none; }

html body #florabloei-home .fb-stappen { padding: 0 24px 104px; display: flex; justify-content: center; }
html body #florabloei-home .fb-stappen-in { max-width: 1140px; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
html body #florabloei-home .fb-stappen-eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fb-aubergine-2); font-weight: 700; }
html body #florabloei-home .fb-stappen-titel { margin: 0 0 18px; font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--fb-aubergine); }
html body #florabloei-home .fb-stappen-lijst {
	list-style: none; margin: 0 0 22px; padding: 0; width: 100%;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left;
	counter-reset: none;
}
html body #florabloei-home .fb-stappen-lijst li {
	background: #ffffff; border: 1px solid var(--fb-rand); border-radius: 18px; padding: 26px 24px;
	box-shadow: 0 1px 2px rgba(45, 30, 62, 0.05), 0 6px 18px rgba(45, 30, 62, 0.06);
	display: flex; flex-direction: column; gap: 10px;
}
html body #florabloei-home .fb-stap-nr {
	width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--fb-saffraan); color: var(--fb-aubergine); font-weight: 800; font-size: 17px;
}
html body #florabloei-home .fb-stappen-lijst h3 { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--fb-aubergine); }
html body #florabloei-home .fb-stappen-lijst p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fb-tekst-zwak); }

html body #florabloei-home .fb-cta .fb-cta-knoppen { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
html body #florabloei-home .fb-cta .fb-btn-licht {
	border: 1.5px solid rgba(255, 255, 255, 0.55) !important; color: #ffffff !important; background: transparent !important;
	border-radius: 999px !important; font-weight: 600 !important; text-decoration: none !important;
}
html body #florabloei-home .fb-cta .fb-btn-licht:hover { background: rgba(255, 255, 255, 0.1) !important; }
html body #florabloei-home .fb-btn-aanmelden { text-decoration: none !important; }

@media (max-width: 760px) {
	html body #florabloei-home .fb-stappen-lijst { grid-template-columns: 1fr; }
	html body #florabloei-home .fb-stappen-titel { font-size: 30px; }
	html body #florabloei-home .fb-stappen { padding-bottom: 72px; }
}