/* The Cakery: contact blocks. Quick cards, a form with shop details, and the
   frequently asked questions. Adjustable values come in as custom properties on
   .cct, so this file stays static. Deliberately loads no fonts. */

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

.cct {
	--cct-gold: #A9A083;
	--cct-gold-deep: #877E63;
	--cct-ink: #2A2117;
	--cct-ink-soft: #867C6D;
	--cct-card: #FFFDF8;
	--cct-line: rgba(42, 33, 23, .15);
	--cct-line-soft: rgba(42, 33, 23, .09);
	--cct-ease: cubic-bezier(.2, .7, .3, 1);
	--cct-open: #2F7A46;

	--cct-cut-card: 12px;
	--cct-cut-field: 7px;
	--cct-cut-small: 6px;
	--cct-gap: 56px;

	color: var(--cct-ink);
	font-weight: 300;
	/* Vertical breathing room: the site setting wins, with zero as the fallback. */
	padding-top: var(--cakery-space-top, 0px);
	padding-bottom: var(--cakery-space-bottom, 0px);
}

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

/* ---------- Quick contact cards ---------- */

.cct__quick {
	display: grid;
	grid-template-columns: repeat(var(--cct-quick-cols, 3), minmax(0, 1fr));
	gap: 16px;
}

.cct-q {
	--c: var(--cct-cut-card);
	padding: 26px 24px 22px;
	background: var(--cct-card);
	box-shadow: inset 0 0 0 1px var(--cct-line-soft), 0 16px 40px rgba(42, 33, 23, .08);
	transition: box-shadow .4s ease, transform .4s var(--cct-ease);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct-q:hover {
	box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .7), 0 20px 44px rgba(42, 33, 23, .1);
	transform: translateY(-3px);
}

.cct-q__i {
	--c: var(--cct-cut-small);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--cct-gold-deep);
	box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .45);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct-q__i svg { width: 16px; height: 16px; }

.cct-q__t.cct-q__t {
	margin: 16px 0 0;
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.cct-q__p.cct-q__p {
	margin: 5px 0 0;
	color: var(--cct-ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

.cct-q__a.cct-q__a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(169, 160, 131, .5);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: color .3s ease, border-color .3s ease;
}

.cct-q__a svg {
	width: 13px;
	height: 13px;
	flex: none;
	transition: transform .4s var(--cct-ease);
}

.cct-q__a.cct-q__a:hover,
.cct-q__a.cct-q__a:focus-visible {
	color: var(--cct-gold-deep);
	border-color: var(--cct-gold-deep);
}

.cct-q__a:hover svg { transform: translateX(3px); }

/* ---------- Form beside the shop details ---------- */

/* Two columns that keep their own height independently of each other. */
.cct__col,
.cct__aside { min-width: 0; }

.cct__main {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	align-items: start;
	gap: var(--cct-gap);
	padding-top: 82px;
}

.cct__kicker.cct__kicker {
	margin: 0;
	color: var(--cct-gold-deep);
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.cct__title.cct__title {
	max-width: var(--cct-title-w, none);
	margin: 12px 0 0;
	color: inherit;
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.14;
	letter-spacing: 0;
	text-transform: none;
}

.cct__lead.cct__lead {
	max-width: var(--cct-lead-w, 46ch);
	margin: 14px 0 0;
	color: var(--cct-ink-soft);
	font-size: 15px;
	line-height: 1.75;
}

.cct__form { margin-top: 28px; }

.cct__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cct__field { margin-top: 14px; }

.cct__field label {
	display: block;
	margin-bottom: 8px;
	color: var(--cct-ink-soft);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* Twice the class: a theme rule on input or select is a class plus an element
   and would otherwise beat a single class. */
.cct__field.cct__field input,
.cct__field.cct__field select,
.cct__field.cct__field textarea {
	--c: var(--cct-cut-field);
	width: 100%;
	padding: 15px 17px;
	background: var(--cct-card);
	color: var(--cct-ink);
	border: none;
	box-shadow: inset 0 0 0 1px var(--cct-line);
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	transition: box-shadow .3s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct__field.cct__field textarea {
	min-height: 140px;
	resize: vertical;
}

.cct__field input::placeholder,
.cct__field textarea::placeholder { color: rgba(42, 33, 23, .3); }

.cct__field.cct__field input:focus,
.cct__field.cct__field select:focus,
.cct__field.cct__field textarea:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(169, 160, 131, .85);
}

/* A field only a bot fills in. Not with display:none, because some bots fill
   exactly those in; this way it simply is not there for people. */
.cct__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cct__hint.cct__hint {
	margin: 10px 0 0;
	color: var(--cct-ink-soft);
	font-size: 12px;
	line-height: 1.6;
}

.cct__send.cct__send {
	--c: 8px;
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 17px 36px;
	background: linear-gradient(135deg, #C9BE9E 0%, #A9A083 52%, #BCB08F 100%);
	color: #231C13;
	border: none;
	box-shadow: 0 8px 24px rgba(42, 33, 23, .15);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .4s var(--cct-ease), box-shadow .4s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* Rustig van goud naar bruin, met lichtbeige tekst. Geen glansveeg en geen
   sprongetje: die trekken de aandacht naar het effect in plaats van naar de
   knop. Kleur en tekst staan in variabelen, dus je kunt er in Elementor
   overheen. */
.cct__send.cct__send:hover,
.cct__send.cct__send:focus-visible {
	background-color: var(--cct-btn-hover-bg, #3A2C1F);
	background-image: none;
	color: var(--cct-btn-hover-ink, #F5F0E3);
	box-shadow: 0 8px 22px rgba(42, 33, 23, .16);
}

.cct__send[disabled] {
	opacity: .6;
	cursor: default;
	transform: none;
}

.cct__send span,
.cct__send svg { position: relative; z-index: 1; }

.cct__send svg { width: 15px; height: 15px; flex: none; }

/* The notice after sending, and the notice when something went wrong. */
.cct__done,
.cct__error {
	--c: 9px;
	display: none;
	margin-top: 20px;
	padding: 18px 20px;
	background: var(--cct-card);
	box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .6);
	font-size: 14.5px;
	line-height: 1.7;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct__done.is-on,
.cct__error.is-on { display: block; }

.cct__error { box-shadow: inset 0 0 0 1px rgba(163, 74, 58, .5); }

/* ---------- The shop column ---------- */

.cct__shot {
	--c: var(--cct-cut-card);
	display: block;
	overflow: hidden;
	aspect-ratio: var(--cct-shot-ratio, 3 / 2);
	background: #EDE6D9;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct__shot.cct__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.3s var(--cct-ease);
}

.cct__shot:hover img { transform: scale(1.04); }

.cct__addr.cct__addr {
	margin: 22px 0 0;
	color: inherit;
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.cct__addr span { display: block; }

.cct__row-inline {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

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

.cct__dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--cct-open);
	box-shadow: 0 0 0 3px rgba(47, 122, 70, .18);
}

.cct__status.is-closed { color: var(--cct-ink-soft); }

.cct__status.is-closed .cct__dot {
	background: rgba(42, 33, 23, .3);
	box-shadow: none;
}

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

.cct__btn svg { width: 13px; height: 13px; flex: none; }

.cct__btn.cct__btn:hover,
.cct__btn.cct__btn:focus-visible {
	background: rgba(169, 160, 131, .1);
	box-shadow: inset 0 0 0 1px var(--cct-gold);
}

.cct-hrs { margin-top: 26px; }

.cct-hrs__r {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cct-line-soft);
	font-size: 13.5px;
}

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

.cct-hrs__r.is-closed span { color: rgba(42, 33, 23, .3); }

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

/* ---------- Frequently asked questions ---------- */

.cct__faq {
	border-top: 1px solid var(--cct-line-soft);
	margin-top: 90px;
	padding-top: 76px;
}

.cct__faqgrid {
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: start;
	gap: var(--cct-gap);
}

.cct__q { border-bottom: 1px solid var(--cct-line-soft); }

.cct__q summary {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 19px 0;
	font-size: 14.5px;
	font-weight: 400;
	list-style: none;
	cursor: pointer;
}

.cct__q summary::-webkit-details-marker { display: none; }

.cct__q summary:focus-visible {
	outline: 2px solid var(--cct-gold);
	outline-offset: 2px;
}

.cct__plus {
	position: relative;
	width: 11px;
	height: 11px;
	flex: none;
	margin-top: 5px;
}

.cct__plus::before,
.cct__plus::after {
	content: "";
	position: absolute;
	background: var(--cct-gold-deep);
	transition: transform .35s ease, opacity .35s ease;
}

.cct__plus::before {
	top: 5px;
	left: 0;
	width: 11px;
	height: 1px;
}

.cct__plus::after {
	top: 0;
	left: 5px;
	width: 1px;
	height: 11px;
}

.cct__q[open] .cct__plus::after {
	transform: scaleY(0);
	opacity: 0;
}

.cct__a.cct__a {
	max-width: var(--cct-a-w, 62ch);
	margin: 0;
	padding: 0 0 20px;
	color: var(--cct-ink-soft);
	font-size: 14px;
	line-height: 1.75;
}

/* ---------- Small screen ---------- */

@media (max-width: 960px) {
	.cct {
		--cct-gap: 40px;
	}

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

	.cct__main {
		grid-template-columns: 1fr;
		padding-top: 56px;
	}

	.cct__faq {
		margin-top: 64px;
		padding-top: 52px;
	}

	.cct__faqgrid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 560px) {
	.cct__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

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

/* ---------- Het onderwerpveld ----------
   Een select tekent zijn tekst zelf, binnen een regelhoogte die de browser
   bepaalt. Past die niet in de doos, dan schaaft de clip-path de onderkant van
   de letters eraf. Een vaste hoogte zonder verticale padding laat de browser de
   tekst netjes midden zetten. */
.cct__field.cct__field select {
	height: 52px;
	padding-top: 0;
	padding-bottom: 0;
	line-height: normal;
}

/* Draait het script, dan schuift het echte veld uit beeld en neemt onze eigen
   knop het over. Niet display:none: het formulier verstuurt de waarde nog. */
.cct__field--custom { position: relative; }

/* Drie keer de class, want het veld hierboven staat op .cct__field.cct__field
   select en dat is een class meer dan een enkele. Zonder die extra classes
   verliest deze regel en staat het echte veld gewoon nog in beeld, met zijn
   tekst dwars door die van onze eigen knop heen. */
.cct__field.cct__field.cct__field--custom select {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: none;
	box-shadow: none;
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

/* Twee keer de class. Een themaregel als ".elementor button" is een class plus
   een element en verslaat een enkele class; die maakt de knop doorzichtig, vet
   en gecentreerd. Alles wat zo'n regel aanraakt staat hier daarom expliciet. */
.cct__selbtn.cct__selbtn {
	--c: var(--cct-cut-field);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 52px;
	padding: 0 17px;
	background: var(--cct-card);
	color: var(--cct-ink);
	border: none;
	box-shadow: inset 0 0 0 1px var(--cct-line);
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	border-radius: 0;
	cursor: pointer;
	transition: box-shadow .3s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct__selbtn.cct__selbtn:hover,
.cct__field--custom.is-open .cct__selbtn.cct__selbtn { box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .85); }

.cct__selbtn.cct__selbtn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(169, 160, 131, .85);
}

.cct__selval {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Het eigen pijltje. Dat van het besturingssysteem ziet er op elk platform
   anders uit en past bij geen van de drie. */
.cct__selarrow {
	width: 8px;
	height: 8px;
	flex: none;
	border-right: 1px solid var(--cct-gold-deep);
	border-bottom: 1px solid var(--cct-gold-deep);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s ease;
}

.cct__field--custom.is-open .cct__selarrow { transform: translateY(2px) rotate(-135deg); }

.cct__sellist.cct__sellist {
	--c: var(--cct-cut-field);
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 260px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	background: var(--cct-card);
	box-shadow: inset 0 0 0 1px var(--cct-line), 0 18px 40px rgba(42, 33, 23, .14);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct__sellist.cct__sellist:focus-visible { outline: none; }

.cct__selopt.cct__selopt {
	--c: 5px;
	padding: 11px 13px;
	color: var(--cct-ink);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cct__selopt.cct__selopt:hover { background: rgba(169, 160, 131, .12); }

.cct__selopt.cct__selopt.is-on {
	background: rgba(169, 160, 131, .18);
	color: var(--cct-gold-deep);
}