/* ==========================================================================
   Zijbalk recept/artikel/weekmenu (besluit Quint 3 okt; weekmenu sinds 4 okt): advertentie 300x600,
   Facebook-kaart, nieuwsbriefkaart. 340 px breed, 32 px tussen de blokken.
   Breedte en plek (340 px rechts op desktop, na de inhoud op mobiel) regelt
   het paginaraster in recipe.css; hier alleen de blokken zelf.
   ========================================================================== */

/* ---------- Zijbalk ---------- */
/* Geen gap: per paginasoort is één van de twee advertentiewidgets leeg (hoogte 0)
   en een gap zou daar dubbele ruimte geven. De kaarten krijgen zelf 32 px erboven.
   Geen overflow/transform/contain op #sidebar: de 300x600 schuift mee (AdPushup). */
.sidebar {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sidebar > .sidebar-card { margin-top: var(--s-8); }

/* Op mobiel staan er op receptpagina's geen advertenties in de zijbalk, en lokaal
   (lcc_hide_ads) nergens: dan begint de zijbalk direct met de Facebook-kaart
   (de afstand tot de inhoud regelt recipe.css). */
.lcc-no-ads .sidebar > .fb-card { margin-top: 0; }
@media (max-width: 1023px) {
	.sidebar--recept > .fb-card { margin-top: 0; }
}

/* Advertentiewidgets (AdPushup). Ruimte vooraf vasthouden, anders verspringt de
   zijbalk zodra de advertentie laadt. Per paginasoort alleen het vak dat daar
   gevuld wordt (redesign/advertenties.md): recept = custom_html-8 (meeschuivende
   300x600, alleen desktop), artikel en weekmenu (paginagroep BLOG POST) =
   custom_html-7 / qatrh (mobiel 336x280, desktop 300x600). Het andere vak blijft
   leeg en neemt dus geen ruimte in. */
.sidebar > .widget_custom_html {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

.sidebar--artikel > #custom_html-7,
.sidebar--weekmenu > #custom_html-7 { min-height: 280px; }

@media (min-width: 1024px) {
	.sidebar--recept > #custom_html-8,
	.sidebar--artikel > #custom_html-7,
	.sidebar--weekmenu > #custom_html-7 { min-height: 600px; }
}

/* Widgettitels (als iemand er een toevoegt) in dezelfde stijl als onze koppen. */
.sidebar .widget-title {
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--c-ink);
	margin: 0 0 var(--s-3);
}

/* ---------- Kaarten (gedeeld) ---------- */
.sidebar-card {
	border-radius: 22px;
	overflow: hidden; /* foto in de hoeken mee afronden; geen advertentie erin */
}

.sidebar-card :is(.fb-card__title, .newsletter__title) {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 19px;
	line-height: 25px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--c-ink);
}

.sidebar-card :is(.fb-card__text, .newsletter__text) {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 23px;
	color: #444;
}

/* ---------- Facebook-kaart ---------- */
.fb-card {
	border: 1px solid #e6e8ec;
	background: #fff;
	color: var(--c-text);
}

.fb-card__media {
	display: block;
	aspect-ratio: 720 / 376;
	background: #e7f0fd;
}
.fb-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zolang fb-groep-omslag nog niet is aangeleverd. */
.fb-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1877f2 0%, #0b5fcc 100%);
	color: #fff;
}
.fb-card__placeholder .fb-card__logo { width: 64px; height: 64px; }

.fb-card__body { padding: 18px 24px 24px; }

.fb-card__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #1877f2;
}
.fb-card__label .fb-card__logo { flex-shrink: 0; width: 18px; height: 18px; }

.fb-card__btn {
	width: 100%;
	min-height: 46px;
	margin-top: 18px;
	background: #1877f2;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}
.fb-card__btn:hover { background: #0f63d6; color: #fff; }
.fb-card__btn:focus-visible { outline: 2px solid #1877f2; outline-offset: 2px; }

/* ---------- Nieuwsbriefkaart (newsletter.php, variant card) ---------- */
.newsletter.newsletter--card {
	padding: 0;
	border-radius: 22px;
	background: #fbf4e4;
	color: var(--c-text);
}

/* Sfeerbeeld, niet klikbaar (besluit Quint 4 okt): geen hover, geen pointer. */
.newsletter__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--c-placeholder, #efe6d2);
}
.newsletter__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newsletter__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 12px;
	border-radius: 15px;
	background: #fff;
	color: var(--c-navy);
	/* Besluit Quint 4 okt: Inter, gewone hoofdletter, geen letterspatiëring; hier vastgezet
	   zodat een kicker- of kopstijl van de omgeving het nooit overneemt. */
	font-family: var(--f-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.newsletter--card .newsletter__inner { padding: 20px 24px 24px; }
.newsletter--card .newsletter__form { margin-top: 18px; }

.newsletter--card .newsletter__input {
	height: 46px;
	border-color: #e6dcc6;
}
.newsletter--card .newsletter__input:focus { border-color: var(--c-navy); }
.newsletter--card .newsletter__input[aria-invalid="true"] { border-color: var(--c-error); }

.newsletter--card .newsletter__btn {
	width: 100%;
	min-height: 46px;
}