/*
 * Bouw Steen Pagina's - styling voor de door de plugin beheerde landingspagina's.
 * Kleuren volgen de huisstijl van bouwsteeninstallaties.nl:
 *   oranje  #FC6A20 (knoppen / accenten, hover #E2570F)
 *   amber   #FFAA00 (secundair accent)
 *   donker  #222222 / #2B2B31, grijs #575760, licht #F7F8F9
 * Lettertype wordt overgenomen van het thema (Poppins/Roboto).
 */

.bsp-page {
	--bsp-orange: #fc6a20;
	--bsp-orange-dark: #e2570f;
	--bsp-amber: #ffaa00;
	--bsp-dark: #222222;
	--bsp-dark-2: #2b2b31;
	--bsp-grey: #575760;
	--bsp-light: #f7f8f9;
	/* Volledige-breedte-pagina: de content vult de breedte, maar de tekst
	   blijft leesbaar door hem te centreren op een prettige maximale breedte. */
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 24px 40px;
	line-height: 1.7;
	color: var(--bsp-dark);
}

.bsp-page h2 {
	margin: 1.6em 0 0.6em;
	color: var(--bsp-dark);
}

.bsp-page h3 {
	margin: 0 0 0.4em;
	font-size: 1.05em;
}

.bsp-intro {
	font-size: 1.08em;
	color: var(--bsp-grey);
}

/* USP-lijst met oranje vinkjes */
.bsp-usps {
	list-style: none;
	margin: 1em 0 1.4em;
	padding: 0;
}

.bsp-usps li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 8px;
}

.bsp-usps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bsp-orange);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM227 387l184-184c6-6 6-16 0-23l-22-22c-6-6-16-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 22c-6 6-6 16 0 23l104 104c6 6 16 6 22 0z"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM227 387l184-184c6-6 6-16 0-23l-22-22c-6-6-16-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 22c-6 6-6 16 0 23l104 104c6 6 16 6 22 0z"/></svg>') no-repeat center / contain;
}

/* Knoppen */
.bsp-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 1.2em 0 1.6em;
}

.bsp-btn,
.bsp-btn:visited {
	display: inline-block;
	background: var(--bsp-orange);
	color: #ffffff;
	padding: 12px 26px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 4px 15px rgba(252, 106, 32, 0.3);
	transition: all 0.25s ease;
}

.bsp-btn:hover,
.bsp-btn:focus {
	background: var(--bsp-orange-dark);
	color: #ffffff;
	transform: translateY(-2px);
}

.bsp-btn--outline,
.bsp-btn--outline:visited {
	background: transparent;
	color: var(--bsp-orange);
	border: 2px solid var(--bsp-orange);
	box-shadow: none;
}

.bsp-btn--outline:hover,
.bsp-btn--outline:focus {
	background: var(--bsp-orange);
	color: #ffffff;
}

/* Dienstenkaarten */
.bsp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 1em 0 1.4em;
}

@media (max-width: 900px) {
	.bsp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.bsp-grid {
		grid-template-columns: 1fr;
	}
}

.bsp-card {
	background: var(--bsp-light);
	border: 1px solid #ececf0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.bsp-card p {
	margin: 0 0 12px;
	color: var(--bsp-grey);
	font-size: 0.95em;
	flex: 1;
}

.bsp-card a {
	color: var(--bsp-orange);
	font-weight: 600;
	text-decoration: none;
}

.bsp-card a:hover {
	color: var(--bsp-orange-dark);
	text-decoration: underline;
}

/* Stappenplan */
.bsp-steps {
	counter-reset: bsp-step;
	list-style: none;
	margin: 1em 0 1.4em;
	padding: 0;
}

.bsp-steps li {
	counter-increment: bsp-step;
	position: relative;
	padding: 0 0 14px 46px;
}

.bsp-steps li::before {
	content: counter(bsp-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bsp-orange);
	color: #ffffff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Reviewcitaat */
.bsp-quote {
	border-left: 4px solid var(--bsp-amber);
	background: var(--bsp-light);
	margin: 1.4em 0;
	padding: 16px 20px;
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: var(--bsp-grey);
}

.bsp-quote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-weight: 600;
	color: var(--bsp-dark);
}

/* FAQ (details/summary, geen JavaScript nodig) */
.bsp-faq {
	border: 1px solid #ececf0;
	border-radius: 10px;
	margin-bottom: 10px;
	background: #ffffff;
}

.bsp-faq summary {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 40px;
}

.bsp-faq summary::-webkit-details-marker {
	display: none;
}

.bsp-faq summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bsp-orange);
	font-size: 1.3em;
	font-weight: 700;
}

.bsp-faq[open] summary::after {
	content: "\2212";
}

.bsp-faq div {
	padding: 0 18px 14px;
	color: var(--bsp-grey);
}

/* CTA-banner */
.bsp-cta {
	background: linear-gradient(135deg, var(--bsp-dark-2), #3f4047);
	color: #ffffff;
	border-radius: 14px;
	padding: 28px 26px;
	margin: 1.8em 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* De kop en tekst in de CTA-banner MOETEN wit zijn. Het thema (GeneratePress)
   drukt zijn eigen kopkleur - het blauw #1e73be - via losse CSS in de <head>
   die na dit bestand laadt en anders wint. Daarom hier hogere specificiteit
   plus !important, zodat de titel altijd leesbaar wit blijft op de donkere
   achtergrond. De oranje knop (.bsp-btn) blijft hierbuiten. */
.bsp-page .bsp-cta h2,
.bsp-page .bsp-cta h2 a,
.bsp-page .bsp-cta p,
.bsp-page .bsp-cta div p {
	color: #ffffff !important;
	margin: 0;
}

.bsp-page .bsp-cta div p {
	opacity: 0.9;
	margin-top: 4px;
}

/* Regiolinks onderaan */
.bsp-links {
	font-size: 0.95em;
	color: var(--bsp-grey);
	border-top: 1px solid #ececf0;
	padding-top: 14px;
	margin-top: 1.6em;
}

.bsp-links a {
	color: var(--bsp-orange);
	text-decoration: none;
}

.bsp-links a:hover {
	text-decoration: underline;
}