/*
 * Vragen en antwoorden (Bold Builder) — de FAQ als builder-inhoud, bijgestuurd
 * naar het ontwerp templates/faq/Faq.dc.html. Laadt op elke pagina waarvan de
 * inhoud de marker "bnb-faq" bevat; elke sectie draagt el_class="bnb-faq" en
 * wordt op el_id aangesproken, zodat het ook in de front-end-editor klopt.
 */

/* --- Kop: beeld links en rechts op 25%, zonder tint --------------------- */

#kennisbank.bnb-faq {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#kennisbank.bnb-faq.bt_bb_with_overlay_image .bt_bb_port:before,
#kennisbank.bnb-faq.bt_bb_with_overlay_right_image .bt_bb_port:after {
	width: 25%;
	mix-blend-mode: normal;
}

#kennisbank.bnb-faq .bt_bb_port:before {
	background-position: right center;
}

#kennisbank.bnb-faq .bt_bb_port:after {
	background-position: left center;
}

/* Op smalle schermen blijven de beelden staan, maar smaller, en de tekst krijgt
   de ruimte ertussen: de builder-kolommen van 1/4 stapelen daar namelijk. */
@media (max-width: 991px) {
	#kennisbank.bnb-faq .bt_bb_port:before,
	#kennisbank.bnb-faq .bt_bb_port:after {
		width: 18%;
	}

	#kennisbank.bnb-faq .bt_bb_row_holder {
		padding-left: 18%;
		padding-right: 18%;
	}

	#kennisbank.bnb-faq .bt_bb_headline_subheadline {
		font-size: 15px;
	}
}

@media (max-width: 600px) {
	/* Het thema zet de titelmaat op een specifiekere selector; hier de eigen maat
	   voor de smalle kolom tussen de twee beelden. */
	#kennisbank.bnb-faq .bt_bb_headline.bt_bb_size_extralarge .bt_bb_headline_tag,
	#kennisbank.bnb-faq .bt_bb_headline .bt_bb_headline_tag {
		font-size: 1.75rem !important;
		line-height: 1.2;
	}
}

/* --- Hoofdstuknavigatie: kapitalen in tan met hairline ------------------- */

#onderwerpen.bnb-faq .bnb-faq-nav p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em 3em;
	margin: 0;
	font-family: var(--supertitle-font);
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing);
	font-size: var(--title-subtitle-size-small);
}

#onderwerpen.bnb-faq .bnb-faq-nav a {
	color: var(--accent-color);
	text-decoration: none;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--accent-50-color);
}

#onderwerpen.bnb-faq .bnb-faq-nav a:hover {
	color: var(--dark-color);
	border-bottom-color: var(--dark-color);
}

/* --- Thema's: kop links blijft staan bij het scrollen -------------------- */

/* Alleen zolang kop en accordeon naast elkaar staan; onder 992px stapelen de
   kolommen en zou een plakkende kop over de vragen heen schuiven. */
@media (min-width: 992px) {
	.bnb-faq .bnb-faq-head > .bt_bb_column_content {
		position: sticky;
		top: 120px;
	}
}

.bnb-faq .bnb-faq-head .bt_bb_text p {
	max-width: 34ch;
	line-height: 1.8;
}

/* --- Haargroei: de vier fasen ------------------------------------------- */

#haargroei.bnb-faq .bnb-faq-fase .bt_bb_headline.bt_bb_size_extrasmall .bt_bb_headline_superheadline {
	color: var(--dark-color);
	opacity: 1;
}

#haargroei.bnb-faq .bnb-faq-fase .bt_bb_headline h3 {
	margin-top: .4em;
	font-size: var(--extrasmall-title-size);
	line-height: 1.2;
}

#haargroei.bnb-faq .bnb-faq-fase .bt_bb_text p {
	line-height: 1.8;
}

/* --- Contactband: scrim en spacing als in het ontwerp -------------------- */

#contact.bnb-faq:before {
	background: var(--dark-60-color) !important;
	opacity: 1 !important;
}

#contact.bnb-faq > .bt_bb_port {
	padding-top: clamp(3em, 6vw, 5em) !important;
	padding-bottom: clamp(3em, 6vw, 5em) !important;
}