/* ==========================================================================
   Header — topbalk, logo, nieuwsbriefknop, winkelmand, streepjesband
   MOBILE FIRST: basis = 390px, opschalen met min-width.
   ========================================================================== */

/* --- Topbalk ------------------------------------------------------------ */

.bc-topbalk {
	background: var(--bc-oranje);
	color: var(--bc-wit);
	font-size: var(--bc-fs-klein);
	font-weight: 700;
	line-height: 1.35;
	padding: 8px 16px;
	overflow: hidden;
}

.bc-topbalk__spoor {
	display: block;
	text-align: center;
}

.bc-topbalk a {
	color: var(--bc-wit);
	text-decoration: none;
	white-space: nowrap;
}

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


/* --- Lopende band ------------------------------------------------------- */

.bc-topbalk--beweegt {
	padding-left: 0;
	padding-right: 0;
}

.bc-topbalk--beweegt .bc-topbalk__spoor {
	display: flex;
	width: max-content;
	text-align: left;
	/* Het spoor bevat vier identieke stukken. Door het over precies een
	   kwart te verschuiven, sluit het einde naadloos aan op het begin. */
	animation: bc-schuif 16s linear infinite;
	will-change: transform;
}

.bc-topbalk--beweegt .bc-topbalk__tekst {
	display: block;
	padding-right: 48px;
	white-space: nowrap;
}

@keyframes bc-schuif {
	from { transform: translateX(0); }
	to   { transform: translateX(-25%); }
}

/* Stilzetten zolang iemand er met de muis op staat of erin navigeert. */
.bc-topbalk--beweegt:hover .bc-topbalk__spoor,
.bc-topbalk--beweegt:focus-within .bc-topbalk__spoor {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

	.bc-topbalk--beweegt {
		padding-left: 16px;
		padding-right: 16px;
	}

	.bc-topbalk--beweegt .bc-topbalk__spoor {
		display: block;
		width: auto;
		text-align: center;
		animation: none;
	}

	.bc-topbalk--beweegt .bc-topbalk__tekst {
		padding-right: 0;
		white-space: normal;
	}

	.bc-topbalk--beweegt .bc-topbalk__tekst ~ .bc-topbalk__tekst {
		display: none;
	}
}


/* --- Header-balk --------------------------------------------------------
   Logo links, acties rechts. De regels hieronder zorgen dat niets ooit
   over elkaar schuift: het logo mag krimpen, de knoppen rechts niet.
   ------------------------------------------------------------------------ */

.bc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 10px;
	padding: 10px var(--bc-gutter);
	background: var(--bc-wit);
}


/* --- Logo --------------------------------------------------------------- */

.bc-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	/* Mag krimpen als de ruimte krap wordt; zonder min-width:0 weigert
	   een flex-item kleiner te worden dan zijn inhoud en loopt het over. */
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-decoration: none;
	color: var(--bc-oranje);
}

/* De hoogte ligt vast, de breedte volgt de vorm. */
.bc-logo__merk {
	height: var(--bc-logo-hoogte, 22px);
	max-height: var(--bc-logo-hoogte, 22px);
	width: auto;
	max-width: 100%;
	flex: 0 1 auto;
	min-width: 0;
	display: block;
	object-fit: contain;
	object-position: left center;
}

.bc-logo__tekst {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	flex: 0 1 auto;
	min-width: 0;
}

.bc-logo__naam {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--bc-ls-lockup);
	color: var(--bc-bruin);
	white-space: nowrap;
}

.bc-logo__shop {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: var(--bc-ls-shop);
	color: var(--bc-oranje);
	white-space: nowrap;
}


/* --- Eigen logobestand naast de merknaam --------------------------------
   Een geüpload logo draagt meestal zelf al tekst. Samen met de merknaam,
   de nieuwsbriefknop en de winkelmand is dat op een telefoon te breed.
   Daarom krimpen logo én merknaam hier mee met de schermbreedte, in
   plaats van dat er iets wegvalt. De clamp() houdt een ondergrens aan
   zodat het leesbaar blijft, en gaat nooit boven de ingestelde hoogte.
   ------------------------------------------------------------------------ */

.bc-header--beeldlogo {
	gap: 8px;
}

.bc-header--beeldlogo .bc-logo {
	gap: 7px;
}

.bc-header--beeldlogo .bc-logo__merk {
	height: clamp(14px, 4.3vw, var(--bc-logo-hoogte, 22px));
}

.bc-header--beeldlogo .bc-logo__naam {
	font-size: clamp(9px, 2.75vw, 13px);
	letter-spacing: 0.10em;
}

.bc-header--beeldlogo .bc-logo__shop {
	font-size: clamp(7.5px, 2.3vw, 10.5px);
	letter-spacing: 0.30em;
}

.bc-header--beeldlogo .bc-nieuwsbriefknop {
	padding-left: 13px;
	padding-right: 13px;
}


/* --- Acties rechts ------------------------------------------------------ */

.bc-header__acties {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Nooit krimpen: dit zijn de twee dingen die altijd aanklikbaar
	   moeten blijven. */
	flex: 0 0 auto;
	margin-right: -10px;
}


/* --- Nieuwsbriefknop ----------------------------------------------------
   De hoogte van deze knop bepaalt mee hoe hoog de witte balk wordt.
   ------------------------------------------------------------------------ */

.bc-nieuwsbriefknop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 5px 16px;
	border: 2px solid var(--bc-oranje);
	border-radius: var(--bc-radius-pill);
	background: transparent;
	color: var(--bc-oranje-tekst);
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bc-nieuwsbriefknop:hover,
.bc-nieuwsbriefknop:focus-visible {
	background: var(--bc-oranje);
	color: var(--bc-wit);
}


/* --- Winkelmand --------------------------------------------------------- */

.bc-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bc-tap);
	height: 36px;
	flex: 0 0 auto;
	color: var(--bc-bruin);
	text-decoration: none;
}

.bc-icoon:hover,
.bc-icoon:focus {
	color: var(--bc-oranje);
}

.bc-icoon__inner {
	position: relative;
	display: inline-flex;
}

/* Tekst die alleen voor schermlezers bestaat. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* --- Zeer krappe schermen -----------------------------------------------
   Onder ongeveer 360px is er zelfs verkleind geen plaats meer voor alle
   drie. Dan wijkt de merknaam; het logo blijft staan.
   ------------------------------------------------------------------------ */

@media (max-width: 359px) {

	.bc-logo__tekst {
		display: none;
	}

	.bc-nieuwsbriefknop {
		padding: 5px 12px;
		font-size: var(--bc-fs-meta);
	}
}


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

@media (min-width: 768px) {

	.bc-topbalk {
		font-size: 13.5px;
		padding: 10px 24px;
	}

	.bc-topbalk--beweegt {
		padding-left: 0;
		padding-right: 0;
	}

	.bc-topbalk--beweegt .bc-topbalk__tekst {
		padding-right: 64px;
	}

	/* Op een breed scherm legt de band een langere weg af; iets meer
	   tijd houdt de snelheid gelijk aan die op mobiel. */
	.bc-topbalk--beweegt .bc-topbalk__spoor {
		animation-duration: 20s;
	}

	.bc-header,
	.bc-header--beeldlogo {
		max-width: 1120px;
		margin: 0 auto;
		padding: 12px 32px;
		gap: 16px;
	}

	.bc-logo,
	.bc-header--beeldlogo .bc-logo {
		gap: 12px;
	}

	.bc-logo__merk,
	.bc-header--beeldlogo .bc-logo__merk {
		height: calc(var(--bc-logo-hoogte, 22px) * 1.4);
		max-height: calc(var(--bc-logo-hoogte, 22px) * 1.4);
		max-width: 320px;
	}

	.bc-logo__naam,
	.bc-header--beeldlogo .bc-logo__naam {
		font-size: 15px;
		letter-spacing: var(--bc-ls-lockup);
	}

	.bc-logo__shop,
	.bc-header--beeldlogo .bc-logo__shop {
		font-size: 12px;
		letter-spacing: var(--bc-ls-shop);
	}

	.bc-header__acties {
		gap: 14px;
	}

	.bc-nieuwsbriefknop,
	.bc-header--beeldlogo .bc-nieuwsbriefknop {
		min-height: 34px;
		font-size: var(--bc-fs-body-plus);
		padding: 6px 20px;
	}
}