/* 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. */

/* De class staat er twee keer. De Elementor-kit zet h1 t/m h3 en p met een
   class plus een element (.elementor-kit-000 h1), en dat verslaat een enkele
   class. Zonder deze verdubbeling bepaalt de kit hier de kleur en het
   lettertype. Eigen instellingen in de widget blijven wel voorgaan: die
   schrijft Elementor met de wrapper erbij en dus nog specifieker. */

.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: 780px; }

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

/* 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);
}

/* ---------- Openingstijden ---------- */

.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;
	}
}