/* Boekenfun stemfunctie -- Leesladder-design: licht crème + amberbruin accent, radius 0. */

.bfun-intro {
	color: #6E6960;
}

.bfun-uitleg {
	font-family: Geist, system-ui, sans-serif;
	font-size: 14px;
	color: #6E6960;
	margin: 24px 0 16px;
}

.bfun-lijst {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 16px 0 32px;
}

.bfun-item {
	display: grid;
	grid-template-columns: 48px 1fr 140px;
	gap: 16px;
	align-items: start;
	padding: 16px;
	background: #FFFFFF;
	border: 1px solid #E3DDD0;
	border-radius: 0;
}

.bfun-item-rang {
	font-family: Geist, system-ui, sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: #96692E;
}

.bfun-item-titel {
	font-family: Geist, system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #2B2420 !important;
	margin: 0 0 8px;
}

.bfun-item-tekst,
.bfun-item-bol,
.bfun-reacties {
	grid-column: 1 / -1;
}

.bfun-item-tekst {
	font-family: Geist, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #6E6960 !important;
	margin-top: 8px;
}

.bfun-item-bol {
	/* Lichte kaart i.p.v. de donkere .bfun-item-achtergrond -- de bol.com-
	 * widget zelf is een vast wit kaartje dat we niet kunnen herstijlen, en
	 * stak scherp af tegen het donkere thema. Een crèmekleurige ondergrond
	 * (--bfun-ink, elders al gebruikt als lichte tekstkleur) sluit er veel
	 * natuurlijker bij aan dan puur wit of de donkere achtergrond. */
	margin-top: 12px;
	background: #FAF8F5;
	border: 1px solid #E3DDD0;
	padding: 12px;
	border-radius: 0;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bfun-item-bol > div {
	max-width: none;
}

.bfun-item-stem {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 6px;
}

.bfun-stem-groep {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.bfun-stem-totaal-doos {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid #96692E;
	border-radius: 0;
	flex-shrink: 0;
}

.bfun-stem-knop {
	width: 34px;
	height: 32px;
	border: 1px solid #96692E;
	background: transparent;
	color: #96692E;
	font-size: 14px;
	cursor: pointer;
	border-radius: 0;
	box-shadow: none;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.bfun-stem-knop:hover:not(:disabled) {
	background: #96692E;
	color: #FAF7F2;
}

.bfun-stem-omlaag:hover:not(:disabled) {
	background: #6B4F74;
	border-color: #6B4F74;
	color: #FAF7F2;
}

.bfun-stem-knop:disabled {
	opacity: 0.4;
	cursor: default;
}

.bfun-stem-omhoog.actief {
	background: #96692E;
	color: #FAF7F2;
}

.bfun-stem-omlaag.actief {
	background: #6B4F74;
	border-color: #6B4F74;
	color: #FAF7F2;
}

.bfun-stem-aantal {
	font-family: Geist, system-ui, sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #2B2420 !important;
}

.bfun-stem-detail-up,
.bfun-stem-detail-down {
	font-family: Geist, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.bfun-stem-detail-up { color: #96692E; }
.bfun-stem-detail-down { color: #6B4F74; }

@media (max-width: 480px) {
	.bfun-item {
		grid-template-columns: 36px 1fr 112px;
		gap: 10px;
	}
	.bfun-item-titel { font-size: 17px; }
	.bfun-stem-knop { width: 30px; }
	.bfun-stem-totaal-doos { min-width: 28px; padding: 0 4px; }
}

.bfun-item:target {
	border-color: #96692E;
	box-shadow: 0 0 0 2px #96692E;
}

.bfun-affiliate-disclosure {
	max-width: 900px;
	margin: 32px auto 0;
	padding: 12px 16px;
	font-family: Geist, system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #6E6960;
	border-top: 1px solid #E3DDD0;
}

/* ==========================================================================
   Kopmerk (logo) in de header: "Boeken" + "fun.nl" in accentkleur, met een
   tagline eronder.
   ========================================================================== */

.site-branding[data-id="logo"] .site-title-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.site-branding[data-id="logo"] .site-title a {
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: none;
}

.bfun-logo-accent {
	color: #96692E;
}

.bfun-header-tagline {
	margin: 0;
	font-family: Geist, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #6E6960;
}

@media (max-width: 999.98px) {
	.bfun-header-tagline {
		display: none;
	}
}

/* ==========================================================================
   Uitgebreide footer: merkblok + "Ontdek"-kolom, boven de dunne
   copyright-onderbalk van het thema.
   ========================================================================== */

.bfun-footer {
	background: #FFFFFF;
	border-top: 1px solid #E3DDD0;
}

.bfun-footer-inner {
	max-width: 1024px;
	margin: 0 auto;
	padding: 56px 20px 40px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
	box-sizing: border-box;
}

.bfun-footer-logo {
	display: inline-block;
	font-family: Geist, system-ui, sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.02em;
	color: #2B2420;
	text-decoration: none;
}

.bfun-footer-tagline {
	margin: 8px 0 0;
	font-family: Geist, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6E6960;
}

.bfun-footer-blurb {
	margin: 14px 0 0;
	max-width: 420px;
	font-family: Geist, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #6E6960;
}

.bfun-footer-kolom-titel {
	margin: 0 0 14px;
	font-family: Geist, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #2B2420;
}

.bfun-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bfun-footer-links a {
	font-family: Geist, system-ui, sans-serif;
	font-size: 14px;
	color: #6E6960;
	text-decoration: none;
}

.bfun-footer-links a:hover {
	color: #96692E;
}

@media (max-width: 560px) {
	.bfun-footer-inner {
		grid-template-columns: 1fr;
		padding: 40px 20px 32px;
		gap: 32px;
	}
}

/* ==========================================================================
   Reacties per item.
   ========================================================================== */

.bfun-reacties {
	margin-top: 12px;
}

.bfun-reacties-toggle {
	background: none;
	border: none;
	color: #6E6960;
	font-family: Geist, system-ui, sans-serif;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
}

.bfun-reacties-toggle:hover {
	color: #96692E;
}

.bfun-reacties-lijst {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #E3DDD0;
}

.bfun-reactie-inhoud strong {
	color: #96692E;
	font-size: 13px;
}

.bfun-reactie-inhoud p {
	color: #2B2420;
	font-size: 14px;
	margin: 2px 0 0;
	overflow-wrap: break-word;
}

.bfun-reactie-acties {
	margin-top: 4px;
}

.bfun-reactie-verbergen {
	color: #6B4F74;
	font-size: 11px;
}

.bfun-reactie-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
	max-width: 320px;
}

.bfun-reactie-form input,
.bfun-reactie-form textarea {
	background: #F4F1EA;
	border: 1px solid #E3DDD0;
	color: #2B2420;
	padding: 6px 8px;
	font-family: Geist, system-ui, sans-serif;
	font-size: 12px;
}

.bfun-reactie-form textarea {
	min-height: 46px;
	resize: vertical;
}

.bfun-reactie-form button {
	background: #96692E;
	color: #FAF7F2;
	border: none;
	border-radius: 0;
	padding: 8px 16px;
	font-weight: 700;
	cursor: pointer;
	align-self: flex-start;
}

.bfun-reactie-form button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ==========================================================================
   Cookiemelding.
   ========================================================================== */

.bfun-cookiemelding[hidden] { display: none !important; }

.bfun-cookiemelding {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2147483647;
	max-width: 560px;
	margin: 0 auto;
	background: #FFFFFF;
	color: #2B2420;
	border: 1px solid #E3DDD0;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: Geist, system-ui, sans-serif;
	font-size: 13px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.bfun-cookiemelding p {
	margin: 0;
	flex: 1;
	line-height: 1.5;
}

.bfun-cookiemelding a {
	color: #96692E;
}

.bfun-cookiemelding button {
	background: #96692E;
	color: #FAF7F2;
	border: none;
	border-radius: 0;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	font-family: Geist, system-ui, sans-serif;
}

@media (max-width: 560px) {
	.bfun-cookiemelding {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Contactformulier + statische pagina's (Over ons / Privacybeleid).
   ========================================================================== */

.bfun-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
	font-family: Geist, system-ui, sans-serif;
}

.bfun-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #2B2420;
}

.bfun-form input,
.bfun-form textarea {
	background: #FFFFFF;
	border: 1px solid #E3DDD0;
	color: #2B2420;
	padding: 10px 12px;
	font-family: Geist, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
}

.bfun-form-knop {
	background: #96692E;
	color: #FAF7F2;
	border: none;
	border-radius: 0;
	padding: 12px 24px;
	font-family: Geist, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	cursor: pointer;
	align-self: flex-start;
}

.bfun-form-melding {
	max-width: 480px;
	padding: 12px 16px;
	font-family: Geist, system-ui, sans-serif;
	font-size: 14px;
	margin-bottom: 16px;
}

.bfun-form-succes {
	background: #FFFFFF;
	border: 1px solid #96692E;
	color: #2B2420;
}

.bfun-form-fout {
	background: #FFFFFF;
	border: 1px solid #6B4F74;
	color: #2B2420;
}

.entry-content {
	/* 984px, zelfde breedte als muziektop10.nl/filmfun.nl (was hier eerder
	 * 720px ingesteld, merkbaar smaller dan de andere sites). */
	max-width: 984px;
	margin: 0 auto;
	padding: 32px 20px 64px;
	font-family: Geist, system-ui, sans-serif;
	color: #6E6960;
	line-height: 1.7;
}

/* Uitgelichte afbeelding boven het artikel -- zelfde patroon als
 * ffun-featured-wrap/muzt10-featured-wrap (inc-layout.php op de andere
 * twee sites), hier toegevoegd via bfun_featured_image_boven_content() in
 * inc-header-footer.php. */
.bfun-featured-wrap {
	position: relative;
	line-height: 0;
	margin: 0 0 28px;
}

.bfun-featured-afbeelding {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid #E3DDD0;
	display: block;
}

.bfun-featured-credit {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(26, 29, 34, 0.75);
	color: #F5F2EA;
	font-family: Geist, system-ui, sans-serif;
	font-size: 10px;
	line-height: 1.4;
	padding: 3px 8px;
	border-radius: 2px;
	pointer-events: none;
}

body.page-template-default .entry-content h1,
body.page-template-default .entry-content h2 {
	color: #2B2420;
}

/* ==========================================================================
   Account (inloggen/registreren) + lijstje-indienen.
   ========================================================================== */

.bfun-account-kolommen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.bfun-account-kolom h2 {
	font-size: 18px;
	margin: 0 0 16px;
	color: #2B2420;
}

@media (max-width: 600px) {
	.bfun-account-kolommen {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.bfun-inzending-form {
	max-width: 560px;
}

.bfun-inzending-uitleg {
	color: #6E6960;
	font-size: 13px;
	margin: 0 0 8px;
}

.bfun-inzending-item {
	border: 1px solid #E3DDD0;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.bfun-inzending-item legend {
	font-weight: 700;
	color: #96692E;
	padding: 0 6px;
}

.bfun-meer-items-knop {
	background: transparent;
	color: #96692E;
	border: 1px solid #96692E;
	padding: 10px 16px;
	font-family: Geist, system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	align-self: flex-start;
}

.bfun-meer-items-knop:hover:not(:disabled) {
	background: #96692E;
	color: #FAF7F2;
}

.bfun-meer-items-knop:disabled {
	opacity: 0.5;
	cursor: default;
}