/*! The Cakery theme.
 *  Basisopmaak: de lettertypes, de kleuren, de reset waar de Cakery-widgets op
 *  rekenen, en de reservepagina's. Wat de winkel laat zien komt uit Elementor en
 *  de widgets; daarom blijft dit bestand klein. */

/* ---------- Lettertypes ----------
   Jost staat in het thema: geen verbinding met Google, geen wachten op een
   andere server. Variabel, dus 300 tot en met 600 in één bestand per tekenset.
   Myorie komt uit de mediabibliotheek, zie inc/assets.php. */

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url(../fonts/jost-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url(../fonts/jost-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: 300 600;
	font-display: swap;
	src: url(../fonts/jost-italic-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: 300 600;
	font-display: swap;
	src: url(../fonts/jost-italic-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Kleuren en maten ----------
   Dezelfde waarden als in de widgets, zodat een reservepagina naast een
   Elementor-pagina niet opvalt. */

:root {
	--ck-paper: #F5F2E9;
	--ck-card: #FFFDF8;
	--ck-ink: #2A2117;
	--ck-ink-soft: #867C6D;
	--ck-dark: #231C13;
	--ck-dark-hover: #3A2C1F;
	--ck-cream: #F5F0E3;
	--ck-gold: #A9A083;
	--ck-gold-deep: #877E63;
	--ck-gold-light: #C9BE9E;
	--ck-gold-mid: #BCB08F;
	--ck-line: rgba(42, 33, 23, .15);
	--ck-line-soft: rgba(42, 33, 23, .09);
	--ck-bad: #9A3B33;
	--ck-good: #2F7A46;

	--ck-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ck-display: 'Myorie', Georgia, serif;

	--ck-ease: cubic-bezier(.2, .7, .3, 1);
	--ck-cut: 7px;
	--ck-wrap: 760px;
	--ck-wrap-wide: 1240px;
	--ck-gutter: 16px;
}

/* ---------- Reset ----------
   Dezelfde basis als die van Rey, waar de Cakery-widgets op zijn ontworpen:
   een knop zonder achtergrond, rand of opvulling, velden over de volle breedte,
   koppen en alinea's met alleen een marge onder. Wijkt dit af, dan zien de
   widgets er na de wissel anders uit. */

*,
::before,
::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
}

/* overflow-x: clip en niet hidden: clip maakt geen eigen scrollvlak, en dan
   blijft de vastgezette header werken. Het vangt de horizontale balk die een
   sectie over de volle breedte anders op Windows geeft. */
body {
	margin: 0;
	font-family: var(--ck-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ck-ink);
	text-align: start;
	background-color: var(--ck-paper);
	overflow-x: clip;
	overflow-y: scroll;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 1.375rem;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	word-break: break-word;
}

h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

b,
strong { font-weight: 600; }

small { font-size: 80%; font-weight: 400; }

/* Geen eigen hoverkleur voor alle links: een widget die er zelf geen zet, zou
   dan ineens goud worden. De reservepagina's zetten hun eigen kleur. */
a {
	color: inherit;
	text-decoration: none;
}

hr {
	box-sizing: content-box;
	height: 0;
	margin: 1rem 0;
	border: 0;
	border-top: 1px solid var(--ck-line);
}

figure { margin: 0 0 1rem; }

img,
svg,
video { vertical-align: middle; }

/* Net als bij Rey: een foto of video in de inhoud schaalt mee met de kolom en
   houdt zijn verhouding. Zonder dit wordt een video die breder is dan het
   scherm op een telefoon afgeknipt. De widgets zetten hun eigen maten met een
   klasse ervoor en winnen het daarvan. */
img,
video {
	max-width: 100%;
	height: auto;
}

ul,
ol,
menu {
	margin: 1.25rem 0;
	padding: 0 0 0 1.875rem;
}

table {
	width: 100%;
	margin: 0 0 1.5625rem;
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	padding: .5rem .625rem;
	border: 0;
	text-align: inherit;
}

td { padding: .5rem .75rem; }

label {
	display: inline-block;
	margin-bottom: .5rem;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: 1em;
	line-height: inherit;
	vertical-align: baseline;
}

button,
input { overflow: visible; }

button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	color: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

button:disabled { cursor: default; }

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="date"],
select,
textarea {
	display: block;
	width: 100%;
	height: calc(2.5625rem + 2px);
	padding: .625rem .8125rem;
	background-color: var(--ck-card);
	background-clip: padding-box;
	border: 1px solid var(--ck-line);
	border-radius: 2px;
	outline: 0;
	color: var(--ck-ink);
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.5;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--ck-gold);
	outline: 0;
}

textarea {
	height: auto;
	resize: vertical;
}

[type="search"] { -webkit-appearance: none; }

input[type="checkbox"],
input[type="radio"] {
	margin-right: .375rem;
	accent-color: var(--ck-gold-deep);
}

/* ---------- Toegankelijkheid ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	background: var(--ck-dark);
	color: var(--ck-cream);
	font-size: 14px;
	font-weight: 400;
}

:focus-visible { outline: 2px solid var(--ck-gold-deep); outline-offset: 2px; }

/* ---------- Omhulling ---------- */

.site-main--full { display: block; }

.wrap {
	width: 100%;
	max-width: calc(var(--ck-wrap) + 2 * var(--ck-gutter));
	margin-inline: auto;
	padding-inline: var(--ck-gutter);
}

.wrap--wide { max-width: calc(var(--ck-wrap-wide) + 2 * var(--ck-gutter)); }

.site-main:not(.site-main--full) {
	padding-block: clamp(40px, 8vw, 96px);
}

/* ---------- De knop van het huis ----------
   Goud verloop, afgeschuinde hoeken, kleine kapitalen met ruimte ertussen.
   Zo staat hij ook in de kassa en het winkelmandpaneel. */

.ck-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	background: linear-gradient(135deg, var(--ck-gold-light) 0%, var(--ck-gold) 52%, var(--ck-gold-mid) 100%);
	color: var(--ck-dark);
	border: 0;
	box-shadow: 0 8px 24px rgba(42, 33, 23, .15);
	font-family: var(--ck-body);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .2em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
	transition: background .45s ease, color .45s ease, letter-spacing .45s var(--ck-ease);
}

.ck-btn:hover,
.ck-btn:focus-visible {
	background: var(--ck-dark-hover);
	color: var(--ck-cream);
	letter-spacing: .24em;
}

/* Rechte hoeken: een rand op afgeschuinde hoeken wordt bij de hoeken
   weggeknipt, en dan staat er een lijn met gaten. */
.ck-btn--line {
	background: transparent;
	border: 1px solid var(--ck-gold);
	box-shadow: none;
	color: var(--ck-ink);
	clip-path: none;
}

/* ---------- Reserve-header en -footer ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--ck-dark);
	color: var(--ck-cream);
}

.admin-bar .site-header { top: var(--wp-admin-bar-height, 32px); }

.site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	min-height: 72px;
}

.site-header .custom-logo { width: auto; max-height: 48px; }

.site-header__name {
	font-family: var(--ck-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: inherit;
}

.site-header a:hover { color: var(--ck-gold-light); }

.site-nav__list,
.site-nav__list ul,
.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a,
.site-header__cart,
.site-header__toggle {
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.site-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.site-header__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--ck-gold);
	color: var(--ck-dark);
	font-size: 11px;
	letter-spacing: 0;
}

.site-header__toggle { color: inherit; font-weight: 400; }

@media (min-width: 900px) {
	.site-header__toggle { display: none; }

	.site-nav__list {
		display: flex;
		gap: 28px;
	}

	.site-nav__list li { position: relative; }

	.site-nav__list ul {
		position: absolute;
		top: 100%;
		left: -16px;
		min-width: 220px;
		padding: 12px 16px;
		background: var(--ck-dark);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, visibility .2s;
	}

	.site-nav__list li:hover > ul,
	.site-nav__list li:focus-within > ul {
		opacity: 1;
		visibility: visible;
	}

	.site-nav__list ul a { display: block; padding: 6px 0; }
}

@media (max-width: 899px) {
	.site-header__cart { order: 2; }
	.site-header__toggle { order: 3; }

	.site-nav {
		display: none;
		order: 4;
		width: 100%;
		padding-bottom: 18px;
	}

	.site-nav.is-open { display: block; }

	.site-nav__list a { display: block; padding: 10px 0; border-top: 1px solid rgba(245, 240, 227, .12); }
	.site-nav__list ul { padding-left: 16px; }
}

.site-footer {
	padding-block: 40px;
	background: var(--ck-dark);
	color: rgba(245, 240, 227, .7);
	font-size: 13px;
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
}

.site-footer__copy { margin: 0; }

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.site-footer a:hover { color: var(--ck-gold-light); }

/* ---------- Gewone pagina's en berichten ----------
   De privacyverklaring, de voorwaarden, een blogbericht: tekst die gelezen
   moet worden, dus een smalle kolom en ruim regelwit. */

.entry__head { margin-bottom: 40px; }

.entry__title,
.archive__title {
	margin-bottom: 14px;
	font-family: var(--ck-display);
	font-size: clamp(36px, 6vw, 60px);
	font-weight: 400;
	line-height: 1.05;
}

.entry__meta {
	margin: 0;
	color: var(--ck-ink-soft);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.entry__img {
	display: block;
	width: 100%;
	margin-bottom: 40px;
}

.entry__body {
	font-size: 17px;
	line-height: 1.8;
}

.entry__body h2,
.entry__body h3,
.entry__body h4 {
	margin-top: 2.2em;
	margin-bottom: .6em;
	font-family: var(--ck-display);
	font-weight: 400;
}

.entry__body h2 { font-size: 32px; }
.entry__body h3 { font-size: 24px; }
.entry__body h4 { font-size: 20px; }

.entry__body a {
	color: var(--ck-gold-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry__body a:hover { color: var(--ck-ink); }

.entry__body ul,
.entry__body ol { padding-left: 1.4em; }

.entry__body li { margin-bottom: .4em; }

.entry__body blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--ck-gold);
	font-family: var(--ck-display);
	font-size: 24px;
	line-height: 1.4;
}

.entry__body table {
	font-size: 15px;
}

.entry__body th,
.entry__body td { border-bottom: 1px solid var(--ck-line-soft); }

.entry__body th { font-weight: 500; }

.entry__body figcaption,
.wp-caption-text {
	margin-top: 8px;
	color: var(--ck-ink-soft);
	font-size: 13px;
}

.entry__pages { margin-top: 32px; }

.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-inline: auto; }

/* ---------- Lijsten: blog, categorie, zoeken ---------- */

.archive__head { margin-bottom: 48px; }

.archive__title span { color: var(--ck-gold-deep); }

.archive__intro { max-width: 60ch; color: var(--ck-ink-soft); }

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 40px 28px;
}

.card__link { display: block; }

.card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 18px;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.card__title {
	margin-bottom: 8px;
	font-family: var(--ck-display);
	font-size: 26px;
	font-weight: 400;
}

.card__text { color: var(--ck-ink-soft); font-size: 15px; }

.pagination { margin-top: 56px; }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	box-shadow: inset 0 0 0 1px var(--ck-line);
	font-size: 13px;
}

.pagination .page-numbers.current {
	background: var(--ck-dark);
	color: var(--ck-cream);
	box-shadow: none;
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
}

.search-form label { flex: 1; margin: 0; }

.search-form .search-submit {
	padding: 0 20px;
	background: var(--ck-dark);
	color: var(--ck-cream);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ---------- 404 ---------- */

.notfound { text-align: center; }

.notfound__code {
	margin-bottom: 8px;
	color: var(--ck-gold);
	font-family: var(--ck-display);
	font-size: 96px;
	line-height: 1;
}

.notfound__go {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

/* ---------- Reacties ---------- */

.comments { margin-top: 64px; }

.comments__title {
	font-family: var(--ck-display);
	font-size: 28px;
	font-weight: 400;
}

.comments__list,
.comments__list .children {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.comments__list .children { margin: 16px 0 0 24px; }

.comments__list .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--ck-line-soft);
}

.comments__list .avatar { float: left; margin-right: 12px; border-radius: 50%; }

.comment-metadata { font-size: 12px; color: var(--ck-ink-soft); }

.comment-respond .submit {
	min-height: 48px;
	padding: 0 26px;
	background: var(--ck-dark);
	color: var(--ck-cream);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.comments a:hover,
.archive__head a:hover,
.card__link:hover .card__title { color: var(--ck-gold-deep); }