/* The Cakery: paginabanner.
   Bewust zonder JavaScript. De lichtstrips tekenen zichzelf op CSS keyframes en
   het lichtpuntje loopt op SMIL, net als in de hero. */

.pbnr {
	--pb-h: 320px;
	--pb-cream: #F7F1E6;
	--pb-gold: #C9BE9E;
	--pb-bg: #201913;

	--pb-cut-h: 34px;
	--pb-cut-w: 56px;

	--pb-pad-t: 64px;
	--pb-pad-b: 58px;
	--pb-inner: 900px;

	--pb-veil-1: rgba(26, 20, 14, .62);
	--pb-veil-2: rgba(26, 20, 14, .82);
	--pb-warm: rgba(64, 46, 24, .3);

	--pb-glow: #EFC98E;
	--pb-core: #FFF6E4;
	--pb-glow-o: .16;
	--pb-core-o: .6;
	--pb-glow-w: 3;
	--pb-core-w: 1;

	position: relative;
	overflow: hidden;
	min-height: var(--pb-h);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pb-bg);
	color: var(--pb-cream);
}

/* Dezelfde hap uit de onderrand als bij de hero, zodat de banner op een
   binnenpagina dezelfde vorm heeft als de hero op de homepage. */
.pbnr--cut {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--pb-cut-h)),
		calc(100% - var(--pb-cut-w)) 100%,
		var(--pb-cut-w) 100%,
		0 calc(100% - var(--pb-cut-h))
	);
}

/* Uit een boxed container breken. De banner loopt van rand tot rand. */
.pbnr--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ---------- Medialaag ---------- */

.pbnr__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* De class staat er bewust twee keer. Elementor zet .elementor img op
   height:auto, met precies dezelfde specificiteit als een enkele class; wie
   dan wint hangt dan af van de volgorde waarin de stylesheets binnenkomen.
   Die volgorde ligt niet vast, dus geven we hem hier het laatste woord. */
.pbnr__media.pbnr__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pb-focus, 50% 50%);
	display: block;
}

.pbnr__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(620px 260px at 50% 100%, var(--pb-warm), rgba(0, 0, 0, 0) 70%),
		linear-gradient(180deg, var(--pb-veil-1) 0%, var(--pb-veil-1) 55%, var(--pb-veil-2) 100%);
}

/* Zonder foto is er niets om doorheen te laten schemeren; dan zou de sluier de
   gekozen achtergrondkleur alleen maar donkerder maken. De warme gloed blijft. */
.pbnr--noimg .pbnr__media::after {
	background: radial-gradient(620px 260px at 50% 100%, var(--pb-warm), rgba(0, 0, 0, 0) 70%);
}

/* ---------- Lichtstrips ---------- */

.pbnr__led {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.pbnr__led svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* De vervaging staat op de groep in plaats van in een SVG-filter. Scheelt een
   defs-blok en daarmee ids die per widget uniek moeten blijven. */
.pbnr__led .pb-glow {
	stroke: var(--pb-glow);
	stroke-width: var(--pb-glow-w);
	filter: blur(5px);
	opacity: var(--pb-glow-o);
	animation: pbBreathe 7s ease-in-out 3s infinite;
}

.pbnr__led .pb-core {
	stroke: var(--pb-core);
	stroke-width: var(--pb-core-w);
	opacity: var(--pb-core-o);
	filter: drop-shadow(0 0 3px rgba(255, 246, 228, .5));
}

.pbnr__led .pb-dots {
	filter: drop-shadow(0 0 4px rgba(255, 253, 244, .9));
}

.pbnr--draw .pbnr__led .pb-glow path,
.pbnr--draw .pbnr__led .pb-core path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: pbDraw 2.4s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes pbDraw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes pbBreathe {
	0%,
	100% {
		opacity: var(--pb-glow-o);
	}

	50% {
		opacity: calc(var(--pb-glow-o) * 1.5);
	}
}

/* ---------- Inhoud ---------- */

.pbnr__in {
	position: relative;
	z-index: 2;
	width: min(var(--pb-inner), 92%);
	margin: 0 auto;
	padding-top: var(--pb-pad-t);
	padding-bottom: var(--pb-pad-b);
	text-align: center;
}

.pbnr--left .pbnr__in {
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}

.pbnr--left .pbnr__crumbs {
	justify-content: flex-start;
}

.pbnr--left .pbnr__sub {
	margin-left: 0;
}

/* ---------- Kruimelpad ---------- */

.pbnr__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pb-crumb, rgba(247, 241, 230, .55));
}

.pbnr__crumbs li {
	display: flex;
	align-items: center;
	gap: 9px;
}

/* Het scheidingsteken is dezelfde octagoon als in het logo. */
.pbnr__crumbs li + li::before {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	flex: none;
	background: var(--pb-gold);
	opacity: .7;
	clip-path: polygon(35% 0, 65% 0, 100% 35%, 100% 65%, 65% 100%, 35% 100%, 0 65%, 0 35%);
}

/* De variant van WooCommerce is een platte rij zonder lijst. Die krijgt zijn
   scheidingsteken als los element mee in plaats van via ::before. */
.pbnr__crumbs--flat i {
	display: block;
	width: 4px;
	height: 4px;
	flex: none;
	background: var(--pb-gold);
	opacity: .7;
	clip-path: polygon(35% 0, 65% 0, 100% 35%, 100% 65%, 65% 100%, 35% 100%, 0 65%, 0 35%);
}

.pbnr__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color .3s ease;
}

.pbnr__crumbs a:hover,
.pbnr__crumbs a:focus-visible {
	color: var(--pb-gold);
}

/* ---------- Titel en subtekst ---------- */

.pbnr__title {
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.14;
	margin: 14px 0 0;
	color: inherit;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}

.pbnr__title em {
	font-style: normal;
	color: var(--pb-gold);
}

.pbnr__sub {
	margin: 14px auto 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pb-sub, rgba(247, 241, 230, .72));
}

.pbnr a:focus-visible {
	outline: 2px solid var(--pb-gold);
	outline-offset: 3px;
}

/* ---------- Klein scherm ----------
   Alleen een vangnet. Zodra er in Elementor een waarde is ingevuld schrijft die
   zijn eigen mediaquery en wint hij hiervan; daarom staan de responsieve
   controls op alle drie de formaten met een standaardwaarde. */

@media (max-width: 767px) {
	.pbnr {
		--pb-h: 230px;
		--pb-cut-h: 22px;
		--pb-cut-w: 36px;
		--pb-pad-t: 46px;
		--pb-pad-b: 42px;
	}

	.pbnr__sub {
		font-size: 14px;
	}
}

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

	.pbnr--draw .pbnr__led .pb-glow path,
	.pbnr--draw .pbnr__led .pb-core path {
		animation: none;
		stroke-dashoffset: 0;
	}

	.pbnr__led .pb-glow {
		animation: none;
	}

	.pbnr__crumbs a {
		transition: none;
	}
}