/*
Theme Name:  XO Groningen
Theme URI:   https://xo-groningen.nl/
Description: Child theme van Blocksy voor XO Groningen. Tokens, lokale fonts, block styles en patterns; inhoud en logica staan in de mu-plugins.
Author:      MR10
Author URI:  https://mr10.nl/
Template:    blocksy
Version:     0.1.0
Text Domain: xo
*/

/* =========================================================
   1. Tokens (design/design-tokens.json, setup/design.php)
   Palette 1–9 live in Blocksy (theme mods). Only font stacks and values Blocksy does not know are defined here.
   ========================================================= */
:root {
	--xo-radius: 8px;
	--xo-lijn: var(--theme-palette-color-5);
	--xo-lijn-sterk: #CFC9BF; /* softer than black for structural lines (feedback MR10) */
	--xo-display: "Dala Floda", Georgia, serif;
	--xo-text: "Calluna", Georgia, serif;
}

/* Fallback fonts as in the design (Blocksy appends sans-serif). */
body {
	font-family: var(--xo-text);
}

/* Dala Floda is a display face: only large (H1, H2, big figures). Everything functional is Calluna (feedback MR10). */
h1, h2 {
	font-family: var(--xo-display);
}

h3, h4, h5, h6, .ct-button, .wp-element-button, .ct-menu-link, button, input, select, textarea {
	font-family: var(--xo-text);
}

/* =========================================================
   2. Menu card blocks (xo-core/menu, kennisbank 08 #12)
   Fixed styling: same in the menu card editor and on the site.
   ========================================================= */
.xo-menusectie {
	margin-block: 40px 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--theme-palette-color-5);

	&:first-child {
		margin-top: 0;
	}
}

.xo-menusectie__regel,
.xo-gerecht__regel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.xo-menusectie__titel {
	margin: 0;
	font-family: var(--xo-text);
	font-size: 26px;
	line-height: 1.2;
	color: var(--theme-palette-color-4);
}

.xo-menusectie__prijs,
.xo-gerecht__prijs {
	margin: 0;
	font-family: var(--xo-text);
	font-size: 17px;
	color: var(--theme-palette-color-4);
	white-space: nowrap;
	text-align: right;
}

.xo-menusectie__tekst {
	margin: 4px 0 0;
	font-size: 16px;
	font-style: italic;
	color: var(--theme-palette-color-3);
}

.xo-gerecht {
	padding-block: 14px;
	border-bottom: 1px dotted var(--theme-palette-color-5);
}

.xo-gerecht__naam {
	margin: 0;
	font-family: var(--xo-text);
	font-size: 19px;
	line-height: 1.3;
	color: var(--theme-palette-color-4);
}

.xo-gerecht__vega {
	font-family: var(--xo-text);
	font-size: 15px;
	color: var(--theme-palette-color-2);
}

.xo-gerecht__omschrijving {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--theme-palette-color-3);
}

/* Editor only: show "vegetarisch" on the dish and keep empty fields visible. */
.editor-styles-wrapper {
	.xo-gerecht--vega .xo-gerecht__naam::after {
		content: " (v)";
		font-family: var(--xo-text);
		font-size: 15px;
		color: var(--theme-palette-color-2);
	}

	.xo-gerecht__prijs,
	.xo-menusectie__prijs {
		min-width: 6em;
	}
}

/* =========================================================
   3. Shared components: buttons and text links (tokens: motion)
   ========================================================= */
.xo-knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	font-family: var(--xo-text);
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;

	&:hover {
		transform: translateY(-2px);
	}

	&:hover .xo-knop__pijl {
		transform: translateX(5px);
	}

	&.xo-knop--groen {
		background: var(--theme-palette-color-1);
		color: var(--theme-palette-color-4);

		&:hover,
		&:focus-visible {
			background: var(--theme-palette-color-7);
			color: var(--theme-palette-color-4);
		}
	}
}

.xo-knop__pijl {
	display: inline-block;
	transition: transform .25s ease;
}

.xo-link {
	color: var(--theme-palette-color-4);
	text-decoration: none;
	background-image: linear-gradient(var(--theme-palette-color-1), var(--theme-palette-color-1));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s ease;

	&:hover,
	&:focus-visible {
		color: var(--theme-palette-color-4);
		background-size: 100% 2px;
	}
}

/* =========================================================
   4. Reservation module (block xo/reserveren, kennisbank 03)
   ========================================================= */
.xo-reserveer {
	max-width: 560px;
	padding: 32px;
	background: var(--theme-palette-color-7);
	border: 1px solid var(--xo-lijn-sterk);
	border-radius: var(--xo-radius);
	box-shadow: 12px 12px 0 var(--theme-palette-color-6);
	scroll-margin-top: 96px;

	.rtb-booking-form {
		margin: 0;
	}

	fieldset {
		margin: 0;
		padding: 0;
		border: 0;
	}

	legend {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	/* Fields: label in small capitals inside a bordered box, green on hover/focus. */
	.rtb-text,
	.rtb-select,
	.rtb-textarea {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: 0;
		padding: 10px 14px;
		border: 1px solid var(--xo-lijn);
		border-radius: var(--xo-radius);
		transition: border-color .2s ease;

		&:hover,
		&:focus-within {
			border-color: var(--theme-palette-color-1);
		}
	}

	label {
		font-family: var(--xo-text);
		font-size: 11px;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--theme-palette-color-4);
	}

	input,
	select,
	textarea {
		width: 100%;
		min-height: 28px;
		height: auto;
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--xo-text);
		font-size: 17px;
		color: var(--theme-palette-color-3);
		box-shadow: none;

		&:focus {
			outline: none;
		}
	}

	textarea {
		min-height: 72px;
	}

	/* The plugin hides the message until "Add a message" is clicked; the design always shows it. */
	.rtb-textarea.message {
		display: flex !important;
	}

	fieldset.reservation {
		display: grid;
		grid-template-columns: 1fr 1.4fr 1fr;
		gap: 12px;
	}

	fieldset.rtb-contact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-top: 12px;

		.name,
		.message,
		.xo-reserveer__samenvatting {
			grid-column: 1 / -1;
		}
	}

	.rtb-form-submit button,
	.xo-reserveer__volgende {
		grid-column: 1 / -1;
		order: 4;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		min-height: 52px;
		margin-top: 16px;
		border: 0;
		border-radius: 999px;
		background: var(--theme-palette-color-2);
		color: #fff;
		font-family: var(--xo-text);
		font-size: 17px;
		cursor: pointer;
		transition: background-color .25s ease, transform .25s ease;

		&:hover,
		&:focus-visible {
			background: var(--theme-palette-color-4);
			transform: translateY(-2px);
		}
	}

	.rtb-form-submit button::after {
		content: " →";
	}

	/* Messages of the plugin (e.g. no times on this date): plain red text below the field, not an orange box. */
	.rtb-error {
		grid-column: 1 / -1;
		order: 3;
		margin: 4px 0 0;
		padding: 0;
		background: none;
		color: #B3261A;
		font-size: 14px;
		line-height: 1.35;

		&::before {
			display: none;
		}
	}

	.rtb-text label,
	.rtb-select label {
		order: 1;
	}

	.rtb-text input,
	.rtb-select select {
		order: 2;
	}

	.rtb-message {
		padding: 16px;
		background: var(--theme-palette-color-6);
		font-size: 17px;
	}
}

.xo-reserveer__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 20px;
}

.xo-reserveer__titel {
	margin: 0;
	font-size: 24px;
}

.xo-reserveer__stappen {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--xo-text);
	font-size: 14px;
	color: var(--theme-palette-color-3);
}

.xo-reserveer__stap {
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;

	&.is-actief {
		color: var(--theme-palette-color-4);
		border-bottom-color: var(--theme-palette-color-1);
	}
}

.xo-reserveer__samenvatting {
	border-radius: var(--xo-radius);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	background: var(--theme-palette-color-6);
	font-family: var(--xo-text);
	font-size: 16px;
	color: var(--theme-palette-color-4);
}

.xo-reserveer__wijzig {
	padding: 0;
	border: 0;
	background: none;
	color: var(--theme-palette-color-2);
	font-family: var(--xo-text);
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
}

.xo-reserveer__melding:empty {
	display: none;
}

.xo-reserveer__melding {
	grid-column: 1 / -1;
	order: 3;
	margin: 4px 0 0;
	color: #B3261A;
	font-size: 15px;
}

.xo-reserveer__groot {
	margin: 16px 0 0;
	font-size: 15px;
	color: var(--theme-palette-color-3);
}

/* Two steps only when the script runs (is-gesplitst); without JS everything is visible. */
.xo-reserveer.is-gesplitst {
	&[data-stap="1"] {
		fieldset.rtb-contact,
		fieldset.rtb-form-footer {
			display: none;
		}
	}

	&[data-stap="2"] {
		fieldset.reservation {
			display: none;
		}
	}
}

.xo-reserveer:not(.is-gesplitst) .xo-reserveer__samenvatting {
	display: none;
}

@media (max-width: 689.98px) {
	.xo-reserveer {
		padding: 24px 20px;
		box-shadow: 8px 8px 0 var(--theme-palette-color-6);

		fieldset.reservation,
		fieldset.rtb-contact {
			grid-template-columns: 1fr;
		}
	}
}

/* =========================================================
   5. Menu tabs (block xo/menu-tabs, kennisbank 03 §5)
   ========================================================= */
.xo-menu__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 36px;
	border-bottom: 1px solid var(--theme-palette-color-5);
}

.xo-menu__tab {
	padding: 0 0 12px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: var(--xo-text);
	font-size: 20px;
	color: var(--theme-palette-color-3);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;

	&:hover {
		color: var(--theme-palette-color-4);
	}

	&[aria-selected="true"] {
		color: var(--theme-palette-color-4);
		border-bottom-color: var(--theme-palette-color-1);
	}
}

.xo-menu__paneel {
	margin-top: 64px;

	&:focus-visible {
		outline: 2px solid var(--theme-palette-color-1);
		outline-offset: 8px;
	}
}

.xo-menu:not(.is-tabs) .xo-menu__paneeltitel {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	margin-bottom: 24px;
}

.xo-menu__paneel--menu {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 96px;
	align-items: flex-start;
}

.xo-menu__paneel[hidden] {
	display: none !important;
}

.xo-gangen {
	flex: 1 1 620px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--xo-lijn-sterk);
}

.xo-gangen__regel {
	display: flex;
	gap: 28px;
	align-items: center;
	padding: 26px 0;
	border-bottom: 1px solid var(--theme-palette-color-5);
	transition: padding-left .3s ease;

	&:hover {
		padding-left: 10px;
	}
}

.xo-gangen__icoon {
	display: block;
	width: 44px;
	height: 44px;
	flex: none;
}

.xo-gangen__naam {
	margin: 0;
	font-size: 26px;
}

.xo-gangen__omschrijving {
	margin: 4px 0 0;
	font-size: 17px;
}

.xo-prijsblok {
	flex: 1 1 320px;
	min-width: 0;
	margin-top: 72px;
	padding: 40px;
	border-radius: var(--xo-radius);
	background: var(--theme-palette-color-4);
	color: #fff;
}

.xo-prijsblok__label {
	margin: 0;
	font-family: var(--xo-text);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}

.xo-prijsblok__prijs {
	margin: 14px 0 0;
	font-family: var(--xo-display);
	font-size: 56px;
	line-height: 1;
	color: #fff;
}

.xo-prijsblok__pp {
	margin: 6px 0 0;
	font-size: 16px;
	color: var(--theme-palette-color-5);
}

.xo-prijsblok__punten {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 28px 0 32px;
	padding: 0;
	list-style: none;
	font-size: 17px;
}

.xo-menukaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

.xo-menukaart {
	display: flex;
	flex-direction: column;
	padding: 32px;
	border: 1px solid var(--xo-lijn-sterk);
	border-radius: var(--xo-radius);
	background: var(--theme-palette-color-6);
	color: var(--theme-palette-color-3);
	text-decoration: none;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;

	&:nth-child(3n+2) {
		margin-top: 40px;
	}

	&:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px -24px rgba(18, 20, 19, .35);
	}
}

.xo-menukaart__titel {
	margin: 0;
	font-size: 24px;
}

.xo-menukaart__prijs {
	margin: 6px 0 0;
	font-family: var(--xo-text);
	font-size: 16px;
	color: var(--theme-palette-color-2);
}

.xo-menukaart__tekst,
.xo-menukaart__noot {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.5;
}

.xo-menukaart__noot {
	margin-top: 8px;
	font-style: italic;
}

.xo-menukolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 48px;
}

.xo-menukolom {
	padding-top: 24px;
	border-top: 1px solid var(--xo-lijn-sterk);

	&:nth-child(2) {
		margin-top: 48px;
	}
}

.xo-menukolom__titel {
	margin: 0 0 16px;
	font-size: 26px;
}

.xo-menukolom__regel {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--theme-palette-color-5);
	font-size: 17px;
}

.xo-menukolom__prijs {
	color: var(--theme-palette-color-2);
	white-space: nowrap;
}

.xo-menu__meer {
	margin: 48px 0 0;
	font-family: var(--xo-text);
	font-size: 17px;
}

@media (max-width: 999.98px) {
	.xo-menukaart:nth-child(3n+2),
	.xo-menukolom:nth-child(2) {
		margin-top: 0;
	}

	.xo-prijsblok {
		margin-top: 0;
	}
}

/* After a successful booking only the message remains: hide the step indicator. */
.xo-reserveer:has(.rtb-message) .xo-reserveer__stappen {
	display: none;
}

/* =========================================================
   6. Sections of the one-pager (Greenshift sections carry spacing and colour; here only what blocks cannot:
      decor shapes, overlaps, staggered offsets). Offsets switch off below 1000 px.
   ========================================================= */
.xo-label {
	font-family: var(--xo-text);
}

.xo-quote {
	font-family: var(--xo-display);
}

/* Hero: large, almost transparent O behind the top right (decor-o.svg, 6%). */
.xo-hero {
	position: relative;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		top: -60px;
		right: -180px;
		width: 620px;
		aspect-ratio: 146 / 138;
		background: url("assets/icons/decor-o.svg") no-repeat center / contain;
		opacity: .06;
		pointer-events: none;
	}

	> * {
		position: relative;
	}
}

.xo-hero__onder {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	align-items: center;
	font-family: var(--xo-text);
}

.xo-hero__score {
	font-family: var(--xo-text);
	color: var(--theme-palette-color-3);
}

.xo-ster {
	color: var(--theme-palette-color-9);
}

/* Day parts: three columns, staggered 0 / +32 / -16 px (design). */
.xo-dagdelen > .gspb_row__content > [id^="gspb_col-id"] {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

@media (min-width: 1000px) {
	.xo-dagdelen > .gspb_row__content > [id^="gspb_col-id"]:nth-child(2) {
		margin-top: 32px;
	}

	.xo-dagdelen > .gspb_row__content > [id^="gspb_col-id"]:nth-child(3) {
		margin-top: -16px;
	}
}

/* XO motifs (block xo/icoon) with gentle movement: sun pulses, moon sways. */
.xo-icoon {
	display: flex;
	gap: 14px;
	align-items: center;
	flex: none;
}

.xo-icoon__svg {
	display: block;
	width: var(--xo-icoon, 56px);
	height: var(--xo-icoon, 56px);
}

.xo-icoon--beweging {
	.xo-icoon__svg--zon-lunch {
		animation: xo-pulse 6s ease-in-out 1.2s infinite;
	}

	.xo-icoon__svg--maan-diner {
		animation: xo-sway 7s ease-in-out 1.4s infinite;
		transform-origin: center;
	}
}

@keyframes xo-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

@keyframes xo-sway {
	0%, 100% { transform: rotate(-7deg); }
	50% { transform: rotate(7deg); }
}

/* About XO: square façade photo sticks 180 px out of the section, carafe photo overlaps bottom right. */
.xo-over__fotos {
	position: relative;
}

.xo-over__gevel img,
.xo-over__karaf img,
.xo-sfeer img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

/* Ratios on the img itself: a percentage height inside the Greenshift image wrapper resolves to 0. */
.xo-over__gevel img {
	aspect-ratio: 1;
}

.xo-over__karaf img,
.xo-sfeer img {
	aspect-ratio: 4 / 5;
}

.xo-over__gevel,
.xo-over__karaf,
.xo-sfeer .gspb_image {
	overflow: hidden;
	border-radius: var(--xo-radius);

	&:hover img {
		transform: scale(1.05);
	}
}

.xo-over__gevel {
	max-width: 600px;
}

.xo-over__karaf {
	position: absolute !important;
	right: -48px;
	bottom: -72px;
	width: 44%;
	max-width: 260px;
	border: 10px solid var(--theme-palette-color-6);
}

@media (min-width: 1000px) {
	.xo-over__fotos {
		margin-top: -180px;
	}

	/* Room between photo and text: the carafe sticks out on the right of the photo column. */
	.xo-over > .gspb_row__content > [id^="gspb_col-id"]:last-child {
		padding-left: 80px;
	}
}

@media (max-width: 1199.98px) {
	.xo-over__karaf {
		right: 0;
		bottom: -48px;
	}
}

.xo-accent {
	color: var(--theme-palette-color-1);
}

/* Atmosphere: three 4:5 photos staggered 0 / +88 / +24 px and the quote lower. */
@media (min-width: 1000px) {
	.xo-sfeer > .gspb_row__content > [id^="gspb_col-id"]:nth-child(2) {
		margin-top: 88px;
	}

	.xo-sfeer > .gspb_row__content > [id^="gspb_col-id"]:nth-child(3) {
		margin-top: 24px;
	}

	.xo-sfeer > .gspb_row__content > [id^="gspb_col-id"]:nth-child(4) {
		margin-top: 136px;
	}
}

/* CTA band: large green moon top right. */
.xo-cta {
	position: relative;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		top: -80px;
		right: -60px;
		width: 360px;
		aspect-ratio: 1;
		background: url("assets/icons/maan-diner.svg") no-repeat center / contain;
		opacity: .9;
		pointer-events: none;
	}

	> * {
		position: relative;
	}
}

.xo-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.xo-knop--lijn {
	border: 1px solid #fff;
	color: #fff;

	&:hover,
	&:focus-visible {
		background: #fff;
		color: var(--theme-palette-color-4);
	}
}

.xo-cta .xo-knop {
	min-height: 52px;
	padding: 0 28px;
	font-size: 17px;
}

.xo-cta .xo-knop--groen:hover {
	background: #fff;
}

/* Trust bar (block xo/trustbar). */
.xo-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;

	> li {
		display: flex;
	}
}

.xo-trust__kaart {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	border: 1px solid var(--xo-lijn);
	border-radius: var(--xo-radius);
	background: var(--theme-palette-color-6);
	color: inherit;
	text-decoration: none;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;

	&:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px -24px rgba(18, 20, 19, .35);
		color: inherit;
	}
}

.xo-trust__score {
	font-family: var(--xo-display);
	font-size: 40px;
	line-height: 1;
	color: var(--theme-palette-color-4);
}

.xo-trust__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.xo-trust__naam {
	font-family: var(--xo-text);
	font-size: 17px;
	color: var(--theme-palette-color-4);
}

.xo-trust__aantal {
	font-size: 14px;
	color: var(--theme-palette-color-3);
}

.xo-trust__sterren {
	color: var(--theme-palette-color-9);
}

/* Route (block xo/route-kaart): full width, 520 px, white address card top left. */
.xo-route {
	position: relative;
	height: 520px;
	overflow: hidden;
	background: var(--theme-palette-color-5);
	scroll-margin-top: 72px;
}

.xo-route__kaart {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(0deg, transparent 0 63px, rgba(18, 20, 19, .05) 63px 64px),
		repeating-linear-gradient(90deg, transparent 0 63px, rgba(18, 20, 19, .05) 63px 64px),
		var(--theme-palette-color-5);
}

.xo-route__pin {
	position: absolute;
	top: 50%;
	left: 62%;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -100%);
}

.xo-route__laden {
	position: absolute;
	right: 24px;
	bottom: 24px;
	padding: 10px 18px;
	border: 1px solid var(--theme-palette-color-4);
	border-radius: 999px;
	background: #fff;
	font-family: var(--xo-text);
	font-size: 15px;
	color: var(--theme-palette-color-4);
	cursor: pointer;

	&:hover,
	&:focus-visible {
		background: var(--theme-palette-color-4);
		color: #fff;
	}
}

.xo-route__noot {
	font-family: var(--xo-text);
	font-size: 13px;
}

.xo-route__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(1.05);
}

.xo-route__kaart.is-geladen .xo-route__pin {
	display: none;
}

.xo-route__adres {
	position: absolute;
	top: 64px;
	left: max(32px, calc((100% - 1320px) / 2 + 32px));
	width: 360px;
	max-width: calc(100% - 64px);
	padding: 32px;
	border-radius: var(--xo-radius);
	background: #fff;
	box-shadow: 0 24px 60px -30px rgba(18, 20, 19, .4);
}

.xo-route__label {
	margin: 0;
	font-family: var(--xo-text);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--theme-palette-color-2);
}

.xo-route__titel {
	margin: 10px 0 0;
	font-size: 30px;
}

.xo-route__plaats,
.xo-route__tekst {
	margin: 6px 0 0;
	font-size: 17px;
	line-height: 1.5;
}

.xo-route__tekst {
	margin-top: 16px;
}

.xo-route__link {
	display: inline-block;
	margin-top: 20px;
	font-family: var(--xo-text);
	font-size: 16px;
}

@media (max-width: 689.98px) {
	.xo-route {
		height: auto;
		display: flex;
		flex-direction: column-reverse;
	}

	.xo-route__kaart {
		position: relative;
		height: 320px;
	}

	.xo-route__adres {
		position: static;
		width: auto;
		max-width: none;
		box-shadow: none;
	}
}

/* Full menu (page /menu/). */
.xo-volledig {
	max-width: 760px;
	margin-inline: auto;
}

.xo-volledig__inhoud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-bottom: 48px;
	font-family: var(--xo-text);
	font-size: 18px;
}

.xo-volledig__kaart {
	margin-bottom: 72px;
	scroll-margin-top: 96px;
}

.xo-volledig__titel {
	margin: 0 0 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--xo-lijn-sterk);
}

.xo-volledig__prijs {
	font-size: .6em;
	color: var(--theme-palette-color-2);
}

.xo-volledig__toelichting {
	margin: 0 0 24px;
	color: var(--theme-palette-color-3);
}

.xo-volledig__allergenen {
	padding: 24px;
	border-radius: var(--xo-radius);
	background: var(--theme-palette-color-6);
}

/* =========================================================
   7. Motion: fade-up on load (hero) and on scroll (assets/js/reveal.js). All off with reduced motion.
   ========================================================= */
@keyframes xo-up {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

/* Only with JavaScript (html.xo-js, set early by reveal.js): without it the hero is simply visible. */
.xo-js .xo-hero .xo-up {
	animation: xo-up .9s cubic-bezier(.2, .7, .2, 1) both;
}

.xo-js .xo-hero .xo-d1 { animation-delay: .15s; }
.xo-js .xo-hero .xo-d2 { animation-delay: .3s; }
.xo-js .xo-hero .xo-d3 { animation-delay: .45s; }
.xo-js .xo-hero .xo-d4 { animation-delay: .6s; }

.xo-js .xo-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);

	&.is-zichtbaar {
		opacity: 1;
		transform: none;
	}
}

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

	.xo-js .xo-reveal {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   8. Feedback round 1 (MR10, 2026-11-06): clickable field boxes, lunch cards as links
   ========================================================= */
.xo-reserveer__vak {
	position: relative;
	cursor: pointer;

	input,
	select {
		cursor: pointer;
	}

	input,
	select {
		padding-right: 22px;
		text-overflow: ellipsis;
	}

	input::placeholder {
		color: var(--theme-palette-color-3);
		opacity: .75;
	}

	/* Chevron: the box is a choice, not a text field. */
	&::after {
		content: "";
		position: absolute;
		right: 14px;
		bottom: 18px;
		width: 8px;
		height: 8px;
		border-right: 1.5px solid var(--theme-palette-color-3);
		border-bottom: 1.5px solid var(--theme-palette-color-3);
		transform: rotate(45deg);
		pointer-events: none;
	}

	select {
		appearance: none;
	}
}

/* Messages of the plugin are moved to the line below the fields by reserveren.js; never show them in a field. */
.xo-reserveer .reservation .rtb-error {
	display: none;
}

.xo-reserveer__melding {
	padding: 10px 14px;
	border-radius: var(--xo-radius);
	background: #FBEDEA;
	color: #8C1D12;
}

.xo-menukaart:hover,
.xo-menukaart:focus-visible {
	color: var(--theme-palette-color-3);
	border-color: var(--theme-palette-color-1);
}

.xo-menukaart__meer {
	margin-top: auto;
	padding-top: 20px;
	font-size: 16px;
	color: var(--theme-palette-color-2);

	.xo-knop__pijl {
		transition: transform .25s ease;
	}
}

.xo-menukaart:hover .xo-menukaart__meer .xo-knop__pijl {
	transform: translateX(5px);
}

.xo-extern {
	font-size: .85em;
}

/* Page /menu/ heading. */
.xo-volledig {
	padding-block: 96px 120px;
}

.xo-volledig__label {
	margin: 0 0 16px;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--theme-palette-color-2);
}

.xo-volledig__h1 {
	margin: 0;
}

.xo-volledig__intro {
	margin: 20px 0 40px;
	font-size: 19px;
}

.xo-volledig .xo-menusectie {
	scroll-margin-top: 96px;
}

/* =========================================================
   9. Footer (synced pattern "Footer: Hoofdfooter" in a full-width Blocksy footer row)
   ========================================================= */
.xo-footer a {
	color: var(--theme-palette-color-5);
	text-decoration: underline;
	text-decoration-color: rgba(230, 227, 221, .4);
	text-underline-offset: 3px;

	&:hover,
	&:focus-visible {
		color: #fff;
		text-decoration-color: var(--theme-palette-color-1);
	}

	&:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
}

.xo-footer__social {
	display: flex;
	gap: 16px;

	a {
		color: #fff;
	}
}

.xo-footer__onder {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;

	a {
		color: var(--theme-palette-color-8);
	}
}

.xo-footer__rechts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0; /* the badge brings its own separator (mr10-toolkit/credit.php) */
}

/* The badge inherits colour from the line; footer links are underlined, the badge is not (spec). */
.xo-footer .mr10-badge {
	color: inherit;
	text-decoration: none;
}

/* Blocksy footer row around the pattern: no own spacing, one full-width column; the section sets the inner width. */
.ct-footer [data-row="middle"] {
	.ct-container-fluid {
		padding-inline: 0;
	}

	.ct-container-fluid > div {
		display: block;
		padding: 0;
	}

	.ct-widget {
		width: 100%;
		margin: 0;
	}
}

.xo-footer > .gspb_row__content {
	padding-inline: 32px;
}

/* Mobile hero: the header already carries the mark, so the large logo stays small and the heading and
   reservation module come into view sooner (kennisbank 06 "Mobiel"). */
@media (max-width: 689.98px) {
	/* Logo width itself is a Greenshift attribute on the image block (150 px mobile). */
	.xo-hero::before {
		width: 360px;
		top: -20px;
		right: -140px;
	}
}

/* Text pages (privacy): reading column, spacing above and below. */
.xo-tekstpagina {
	padding: 96px 24px 120px;

	h1 {
		margin-bottom: 32px;
	}

	h2 {
		margin-top: 48px;
		font-size: 32px;
	}

	h3 {
		margin-top: 32px;
		font-size: 22px;
	}

	p,
	li {
		font-size: 18px;
		line-height: 1.6;
	}
}

/* =========================================================
   10. Feedback round 2 (MR10, 2026-11-07)
   ========================================================= */
:root {
	--xo-zand: #EFE7DA; /* sand: badges and inactive tabs */
}

/* Main menu: green underline grows on hover/focus, like the text links (.xo-link). */
[data-id="menu"] .ct-menu-link {
	background-image: linear-gradient(var(--theme-palette-color-1), var(--theme-palette-color-1));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 calc(50% + .8em);
	transition: background-size .3s ease, color .2s ease;

	&:hover,
	&:focus-visible {
		background-size: 100% 2px;
	}
}

/* Bold buttons where asked (only Calluna Regular is licensed: the bold is synthesised, see 07). */
.xo-knop,
.xo-cta .xo-knop,
.xo-reserveer .rtb-form-submit button,
.xo-reserveer__volgende {
	font-weight: 700;
}

/* Hero: text column no wider than the reservation module, so the logo gets more room. */
.xo-hero__tekst > [id^="gspb_"],
.xo-hero__tekst > .wp-block-xo-reserveren {
	max-width: 560px;
}

/* Opening days: centred sand badge. */
.xo-open-badge {
	width: fit-content;
	margin: 40px auto 0 !important;
	padding: 8px 20px;
	border-radius: 999px;
	background: var(--xo-zand);
	text-align: center;
	color: var(--theme-palette-color-4);
}

/* Inlay photo: rounded image inside the rounded passe-partout. */
.xo-over__karaf img {
	border-radius: calc(var(--xo-radius) - 2px);
}

/* Menu tabs as pills: the 5-course menu is the main attraction, so the choice is more present. */
.xo-menu__tabs {
	gap: 10px;
	border-bottom: 0;
}

.xo-menu__tab {
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--xo-zand);
	font-size: 19px;
	font-weight: 700;
	color: var(--theme-palette-color-4);
	transition: background-color .2s ease, color .2s ease;

	&:hover {
		background: #E4D9C6;
	}

	&[aria-selected="true"] {
		background: var(--theme-palette-color-4);
		color: #fff;
	}

	&:focus-visible {
		outline: 2px solid var(--theme-palette-color-1);
		outline-offset: 3px;
	}
}

/* Price block: larger title, white text, icons for the selling points, white bold button. */
.xo-prijsblok__label {
	font-size: 26px;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.xo-prijsblok__punten li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.xo-prijsblok__icoon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--theme-palette-color-1);
}

.xo-knop.xo-knop--groen {
	background: var(--theme-palette-color-2);
	color: #fff;

	&:hover,
	&:focus-visible {
		background: #fff;
		color: var(--theme-palette-color-4);
	}
}

/* Hero logo as tall as the text block on the right (label + heading + intro, not the reservation module):
   on desktop the logo/text row becomes a grid; the text column dissolves (display: contents) so its first three
   blocks form rows 1–3, and the logo column spans exactly those rows (feedback MR10 2026-11-07). */
@media (min-width: 1000px) {
	.xo-hero .gspb_row__content:has(> .xo-hero__logo) {
		display: grid !important; /* Greenshift sets flex with an ID selector */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 80px;
		align-items: start;
	}

	.xo-hero .gspb_row__content > .xo-hero__logo {
		position: relative;
		grid-column: 1;
		grid-row: 1 / 4;
		align-self: stretch;
		width: auto !important;
		min-height: 200px;
	}

	/* The image fills the cell (definite height), scaled to fit: as tall as label + heading + intro. */
	.xo-hero__logo .gspb_image {
		position: absolute !important;
		inset: 0 var(--gs-row-column-padding, 15px);
	}

	.xo-hero__logo .gspb_image img {
		width: 100% !important; /* overrides the Greenshift width: the text block's height leads here */
		height: 100% !important;
		max-width: none;
		object-fit: contain;
		object-position: left center;
	}

	.xo-hero .gspb_row__content > .xo-hero__tekst {
		display: contents;
	}

	.xo-hero__tekst > * {
		grid-column: 2;
		padding-inline: var(--gs-row-column-padding, 15px);
	}

	/* The intro's bottom margin would make the logo cell taller than the text: move that space to the module. */
	.xo-hero__tekst > :nth-child(3) {
		margin-bottom: 0 !important;
	}

	.xo-hero__tekst > .wp-block-xo-reserveren {
		margin-top: 40px;
	}
}

/* Footer on mobile: Blocksy's row and the Greenshift columns already give side space; no extra inline padding,
   so the footer lines up with the sections above (feedback MR10 2026-11-07). */
@media (max-width: 689.98px) {
	.xo-footer > .gspb_row__content {
		padding-inline: 0;
	}
}