/* The Cakery: footer. Alles draait om waar je bent, wanneer je open bent en hoe
   iemand er komt. Instelbare waarden komen als custom properties binnen op .cf,
   zodat dit bestand statisch blijft. Laadt bewust geen fonts. */

/* The class is in there twice. The Elementor kit sets h1 to h3 and p with a
   class plus an element (.elementor-kit-000 h1), and that beats a single class.
   Without this doubling the kit would decide the colour and the typeface here.
   Your own settings in the widget still come first: Elementor writes those with
   the wrapper included and so more specifically still. */

.cf,
.cf * { box-sizing: border-box; }

.cf {
	--cf-bg: #181109;
	--cf-cream: #F4EEE2;
	--cf-soft: rgba(244, 238, 226, .55);
	--cf-gold: #C9BE9E;
	--cf-line: rgba(216, 204, 166, .16);
	--cf-ease: cubic-bezier(.2, .7, .3, 1);
	--cf-cut: 6px;
	--cf-cut-h: 46px;
	--cf-cut-w: 74px;
	--cf-shot-h: 440px;
	--cf-pad-y: 96px;
	--cf-pad-b: 74px;
	--cf-open: #8FD3A8;

	position: relative;
	background: var(--cf-bg);
	color: var(--cf-cream);
	font-weight: 300;
}

.cf a { color: inherit; text-decoration: none; }

/* De schuine bovenhoeken, gespiegeld aan de hap onder de banner. */
.cf--cut {
	clip-path: polygon(
		0 var(--cf-cut-h),
		var(--cf-cut-w) 0,
		calc(100% - var(--cf-cut-w)) 0,
		100% var(--cf-cut-h),
		100% 100%,
		0 100%
	);
}

/* Uit een container met een maximumbreedte breken. */
.cf--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ---------- Hoofdblok: foto naast de praktische informatie ---------- */

.cf__main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.cf--photo-right .cf__main { grid-template-columns: 1fr 1fr; }

.cf--photo-right .cf__shot { order: 2; }

/* Zonder foto zou de halve breedte leeg blijven staan. */
.cf--nophoto .cf__main { grid-template-columns: 1fr; }

.cf--nophoto .cf__info { max-width: var(--cf-info-w, 780px); }

.cf__shot {
	position: relative;
	overflow: hidden;
	min-height: var(--cf-shot-h);
	margin: 0;
}

/* De foto staat in een grid naast de tekst en rekt daardoor mee met de hoogste
   van de twee; min-height kan hem dan wel groter maken maar nooit kleiner. Met
   deze stand telt de maat als een echte hoogte, en gaat de foto niet meer mee
   met de kolom ernaast. */
.cf--shotfix .cf__shot {
	height: var(--cf-shot-h);
	min-height: 0;
	align-self: start;
}

/* De class staat er twee keer. Elementor zet .elementor img op height:auto met
   dezelfde specificiteit als een enkele class; wie dan wint hangt af van de
   volgorde waarin de stylesheets binnenkomen. */
.cf__shot.cf__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cf-focus, 50% 50%);
}

.cf__shot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(24, 17, 9, .25) 0%, rgba(24, 17, 9, 0) 45%, var(--cf-veil, rgba(24, 17, 9, .85)) 100%);
}

.cf--photo-right .cf__shot::after {
	background: linear-gradient(270deg, rgba(24, 17, 9, .25) 0%, rgba(24, 17, 9, 0) 45%, var(--cf-veil, rgba(24, 17, 9, .85)) 100%);
}

.cf__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--cf-pad-y) clamp(28px, 5vw, 80px) var(--cf-pad-b);
}
.cf__kicker.cf__kicker {
	margin: 0;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--cf-gold);
}
.cf__addr.cf__addr {
	margin: 14px 0 0;
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.12;
	color: inherit;
}

.cf__addr span { display: block; }

/* ---------- Status en de routeknop ---------- */

.cf__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.cf__status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 15px;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cf-gold);
	box-shadow: inset 0 0 0 1px var(--cf-line);
	clip-path: polygon(var(--cf-cut) 0, calc(100% - var(--cf-cut)) 0, 100% var(--cf-cut),
		100% calc(100% - var(--cf-cut)), calc(100% - var(--cf-cut)) 100%, var(--cf-cut) 100%,
		0 calc(100% - var(--cf-cut)), 0 var(--cf-cut));
}

.cf__dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--cf-open);
	box-shadow: 0 0 0 3px rgba(143, 211, 168, .2);
}

.cf__status.is-closed { color: var(--cf-soft); }

.cf__status.is-closed .cf__dot {
	background: rgba(244, 238, 226, .4);
	box-shadow: none;
}

.cf__btn.cf__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 22px;
	background: transparent;
	border: none;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	box-shadow: inset 0 0 0 1px var(--cf-line);
	transition: background .35s ease, box-shadow .35s ease;
	clip-path: polygon(var(--cf-cut) 0, calc(100% - var(--cf-cut)) 0, 100% var(--cf-cut),
		100% calc(100% - var(--cf-cut)), calc(100% - var(--cf-cut)) 100%, var(--cf-cut) 100%,
		0 calc(100% - var(--cf-cut)), 0 var(--cf-cut));
}

.cf__btn svg { width: 14px; height: 14px; flex: none; }

.cf__btn.cf__btn:hover,
.cf__btn.cf__btn:focus-visible {
	background: rgba(244, 238, 226, .09);
	box-shadow: inset 0 0 0 1px var(--cf-gold);
}

/* ---------- Opening hours ---------- */

.cf-hrs {
	margin-top: 30px;
	max-width: var(--cf-hrs-w, 390px);
}

.cf-hrs__r {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 7px 0;
	font-size: 13.5px;
	border-bottom: 1px solid rgba(216, 204, 166, .08);
}

.cf-hrs__r span:first-child { color: var(--cf-soft); }

.cf-hrs__r.is-closed span { color: rgba(244, 238, 226, .28); }

.cf-hrs__r.is-today,
.cf-hrs__r.is-today span:first-child { color: var(--cf-gold); }

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

.cf__contact {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 24px;
	font-size: 13.5px;
	color: var(--cf-soft);
}

.cf__contact a {
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(216, 204, 166, .28);
	transition: color .3s ease, border-color .3s ease;
}

.cf__contact a:hover,
.cf__contact a:focus-visible {
	color: var(--cf-cream);
	border-color: var(--cf-gold);
}

/* ---------- Onderbalk: links en socials ---------- */

.cf__bar { border-top: 1px solid var(--cf-line); }

.cf__bar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	width: 100%;
	padding: 20px clamp(20px, 4vw, 42px);
}

.cf__links {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cf__links a {
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cf-soft);
	transition: color .3s ease, border-color .3s ease;
}

.cf__links a:hover,
.cf__links a:focus-visible {
	color: var(--cf-cream);
	border-color: var(--cf-gold);
}

.cf__socials {
	display: flex;
	gap: 8px;
}

.cf__soc.cf__soc {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	color: var(--cf-soft);
	box-shadow: inset 0 0 0 1px var(--cf-line);
	transition: color .35s var(--cf-ease), background .35s var(--cf-ease), box-shadow .35s var(--cf-ease);
	clip-path: polygon(var(--cf-cut) 0, calc(100% - var(--cf-cut)) 0, 100% var(--cf-cut),
		100% calc(100% - var(--cf-cut)), calc(100% - var(--cf-cut)) 100%, var(--cf-cut) 100%,
		0 calc(100% - var(--cf-cut)), 0 var(--cf-cut));
}

.cf__soc svg { width: 16px; height: 16px; }

.cf__soc.cf__soc:hover,
.cf__soc.cf__soc:focus-visible {
	color: var(--cf-bg);
	background: var(--cf-gold);
	box-shadow: none;
}

/* ---------- Kleine lettertjes ---------- */

.cf__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px clamp(20px, 4vw, 42px) 20px;
	border-top: 1px solid rgba(216, 204, 166, .08);
	font-size: 11px;
	color: rgba(244, 238, 226, .34);
}

.cf__legal ul {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cf__legal a { transition: color .3s ease; }

.cf__legal a:hover,
.cf__legal a:focus-visible { color: var(--cf-cream); }

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

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

@media (max-width: 900px) {
	.cf {
		--cf-cut-h: 26px;
		--cf-cut-w: 42px;
		--cf-shot-h: 230px;
		--cf-pad-y: 52px;
		--cf-pad-b: 40px;
	}

	.cf__main { grid-template-columns: 1fr; }

	/* De foto bovenaan, zodat je meteen ziet waar je terechtkomt. */
	.cf__shot,
	.cf--photo-right .cf__shot { order: -1; }

	.cf__shot::after,
	.cf--photo-right .cf__shot::after {
		background: linear-gradient(180deg, rgba(24, 17, 9, .2) 0%, var(--cf-veil, rgba(24, 17, 9, .85)) 100%);
	}

	.cf__info { padding-left: 24px; padding-right: 24px; }

	.cf__bar-in {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cf,
	.cf * {
		transition: none !important;
		animation: none !important;
	}
}