/* ==========================================================================
   Footer — donkerbruin blok met nieuwsbrief, merknaam, contact, links,
   betaalmethodes en de gegevens van de verkoper.
   MOBILE FIRST: basis = 390px, opschalen met min-width.
   ========================================================================== */

.bc-footer {
	background: var(--bc-bruin);
	color: var(--bc-footer-tekst);
	padding: 22px var(--bc-gutter);
}

.bc-footer.heeft-nieuwsbrief {
	padding-top: 28px;
}

/* De bruine achtergrond loopt over de volle breedte; de inhoud erbinnen
   lijnt uit met de rest van de site. */
.bc-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.bc-footer__info {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bc-footer__merk {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--bc-ls-lockup);
	color: var(--bc-wit);
}


/* --- Contact ------------------------------------------------------------ */

.bc-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	font-size: var(--bc-fs-klein);
}

.bc-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* Ruim genoeg om met een duim te raken. */
	padding: 6px 0;
	color: var(--bc-wit);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.bc-footer__contact a:hover,
.bc-footer__contact a:focus {
	text-decoration: underline;
}

.bc-footer__icoon {
	flex: 0 0 auto;
	color: var(--bc-oranje-zacht);
}


/* --- Links -------------------------------------------------------------- */

.bc-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: var(--bc-fs-klein);
}

.bc-footer__links a {
	color: var(--bc-footer-tekst);
	text-decoration: none;
	/* Ruim genoeg om met een duim te raken, zonder de regelafstand
	   uit het ontwerp op te blazen. */
	padding: 6px 0;
}

.bc-footer__links a:hover,
.bc-footer__links a:focus {
	color: var(--bc-wit);
	text-decoration: underline;
}


/* --- Betaalmethodes ------------------------------------------------------
   De logo's zijn gemaakt voor een witte achtergrond, dus elk krijgt een
   eigen wit kaartje. Een methode zonder logo krijgt haar naam. */

.bc-footer__betalen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-top: 6px;
}

.bc-footer__label {
	font-size: 12px;
	color: var(--bc-footer-tekst);
}

.bc-footer__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bc-footer__logo {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 30px;
	padding: 3px 6px;
	border-radius: 6px;
	background: var(--bc-wit);
}

.bc-footer__logo img {
	display: block;
	width: 32px;
	height: 24px;
}

.bc-footer__logo--tekst {
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--bc-bruin);
	white-space: nowrap;
}


/* --- Onderaan: wie verkoopt ---------------------------------------------- */

.bc-footer__onder {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 14px;
	border-top: 1px solid rgba(235, 221, 203, 0.16);
}

.bc-footer__bedrijf {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--bc-footer-tekst);
}

/* Een deel past op de regel of schuift als geheel door; alleen een deel
   dat zelf breder is dan het scherm, breekt nog binnenin af. */
.bc-footer__bedrijf span {
	display: inline-block;
}

.bc-footer__credit {
	margin: 0;
	font-size: 11px;
	color: var(--bc-credit);
}


/* ==========================================================================
   De nieuwsbrief in de footer
   Het formulier zelf krijgt zijn opmaak uit formulieren.css; hier alleen
   wat anders moet op de donkere achtergrond.
   ========================================================================== */

.bc-footer__nieuwsbrief {
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(235, 221, 203, 0.16);
}

.bc-nieuwsbrief--footer .bc-nieuwsbrief__kop {
	margin: 0 0 4px;
	font-family: var(--bc-font);
	font-size: var(--bc-fs-kop-klein);
	font-weight: 700;
	line-height: 1.25;
	color: var(--bc-wit);
}

.bc-nieuwsbrief--footer .bc-nieuwsbrief__tekst {
	margin: 0 0 16px;
	font-size: var(--bc-fs-body-plus);
	line-height: 1.5;
	color: var(--bc-footer-tekst);
}

.bc-footer .frm-fluent-form {
	color: var(--bc-footer-tekst);
}

.bc-footer .frm-fluent-form .ff-el-group {
	margin-bottom: 12px;
}

.bc-footer .frm-fluent-form .ff-el-input--label label {
	font-size: 12.5px;
	color: var(--bc-wit);
}

.bc-footer .frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: var(--bc-oranje-zacht);
}

.bc-footer .frm-fluent-form .ff-el-form-control {
	min-height: 46px;
	border-color: transparent;
}

.bc-footer .frm-fluent-form .ff-el-form-check-label,
.bc-footer .frm-fluent-form .ff_tc_label {
	font-size: 12.5px;
	color: var(--bc-footer-tekst);
}

.bc-footer .frm-fluent-form .ff_tc_label a,
.bc-footer .frm-fluent-form .ff-el-form-check-label a {
	color: var(--bc-wit);
}

.bc-footer .frm-fluent-form .ff_submit_btn_wrapper {
	margin-top: 14px;
}

/* Foutmeldingen: het donkerrood van de lichte pagina's is op bruin niet
   te lezen. */
.bc-footer .frm-fluent-form .error,
.bc-footer .frm-fluent-form .text-danger,
.bc-footer .frm-fluent-form .error-text {
	color: #FFC9BD;
}

.bc-footer .frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: #FF9C87;
	box-shadow: 0 0 0 3px rgba(255, 156, 135, 0.28);
}


/* --- Opschalen ---------------------------------------------------------- */

@media (min-width: 768px) {

	.bc-footer {
		padding: 32px 32px 28px;
	}

	.bc-footer.heeft-nieuwsbrief {
		padding-top: 40px;
	}

	.bc-footer__inner {
		max-width: 1120px;
		margin: 0 auto;
		gap: 26px;
	}

	.bc-footer__links {
		font-size: 13.5px;
		gap: 4px 24px;
	}

	.bc-footer__contact {
		font-size: 13.5px;
	}
}

/* Breed scherm: links de merknaam, contact en links; rechts de
   nieuwsbrief; onderaan over de hele breedte wie verkoopt. */
@media (min-width: 900px) {

	.bc-footer.heeft-nieuwsbrief .bc-footer__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-areas:
			"info  nieuws"
			"onder onder";
		column-gap: 64px;
		row-gap: 30px;
		align-items: start;
	}

	.bc-footer.heeft-nieuwsbrief .bc-footer__nieuwsbrief {
		grid-area: nieuws;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.bc-footer.heeft-nieuwsbrief .bc-footer__info {
		grid-area: info;
	}

	.bc-footer.heeft-nieuwsbrief .bc-footer__onder {
		grid-area: onder;
	}

	.bc-footer__onder {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 4px 24px;
	}
}