/* KBH Facebook — homepage timeline embed, click-to-load.
   A branded placeholder card (.kbh-fb) with a koningsblauw button; on click
   assets/js/facebook.js swaps in the Page Plugin <iframe>. The iframe is
   capped at 100% width and centred so it never overflows on mobile, and no
   Meta cookies drop until the visitor opts in. */

:root {
	--kbh-fb-blue: var(--wp--preset--color--koningsblauw, #23388e);
	--kbh-fb-red: var(--wp--preset--color--venetiaans-rood, #a42a04);
	--kbh-fb-border: var(--wp--preset--color--zilvergrijs, #c0c0c0);
	--kbh-fb-ink: var(--wp--preset--color--zwart, #000);
}

/* ---- Placeholder card ----------------------------------------------- */
.kbh-fb {
	max-width: 500px;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
	padding: var(--wp--preset--spacing--50, 3rem) var(--wp--preset--spacing--40, 1.5rem);
	text-align: center;
	background: var(--wp--preset--color--wit, #fff);
	border: 1px solid var(--kbh-fb-border);
	border-radius: 8px;
}

/* ---- Load button ---------------------------------------------------- */
.kbh-fb-load {
	display: inline-block;
	cursor: pointer;
	padding: 0.75em 1.5em;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--wit, #fff);
	background: var(--kbh-fb-blue);
	border: 0;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.kbh-fb-load:hover,
.kbh-fb-load:focus-visible {
	background: var(--kbh-fb-red);
}

/* ---- Privacy note + fallback ---------------------------------------- */
.kbh-fb-note {
	margin: var(--wp--preset--spacing--20, 0.75rem) 0 0;
	font-size: 0.8125rem;
	color: var(--kbh-fb-ink);
	opacity: 0.7;
}

.kbh-fb-fallback {
	margin: var(--wp--preset--spacing--20, 0.75rem) 0 0;
	font-size: 0.875rem;
}

.kbh-fb-fallback a {
	color: var(--kbh-fb-blue);
}

/* ---- Loaded iframe -------------------------------------------------- */
/* Once loaded the card sheds its chrome; the iframe carries its own frame. */
.kbh-fb.is-loaded {
	padding: 0;
	background: none;
	border: 0;
}

.kbh-fb iframe {
	display: block;
	width: 500px;
	max-width: 100%;
	margin-inline: auto;
	border: none;
	overflow: hidden;
}