/*
	De Kraamkeuken — modern layer
	=============================
	Loaded after main.css (the compiled Big Picture base). This file holds
	everything that is specific to this standalone theme:

	  1. Design tokens
	  2. Accessibility (skip link, focus rings, reduced motion, anchors)
	  3. Typography and readability
	  4. Sections and backgrounds
	  5. Header and mobile navigation
	  6. Forms
	  7. FAQ accordion
	  8. Gallery lightbox
	  9. Print

	Only widely-supported CSS is used (custom properties, clamp(), logical
	properties, :focus-visible, :where(), aspect-ratio, dialog) — all available
	in every current browser. Newer niceties sit behind @supports so older
	engines keep the working baseline.
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand */
	--dkk-green: #98c593;
	--dkk-green-dark: #457a3d;   /* 5.1:1 on white — safe for text/buttons */
	--dkk-green-darker: #3f7038; /* 5.9:1 on white — link + hover state     */
	--dkk-blue: #9ac8e9;
	--dkk-blue-dark: #356f93;

	/* Neutrals */
	--dkk-ink: #39454b;
	--dkk-ink-muted: #5b6a71;
	--dkk-surface: #ffffff;
	--dkk-surface-alt: #f5f6f7;
	--dkk-border: #d8dcde;

	/* State */
	--dkk-error: #b3261e;
	--dkk-success: #1b5e20;

	/* Layout */
	--dkk-header-height: 3em;
	/* Controls: fields, buttons, nav items, toasts. */
	--dkk-radius: 0.4rem;
	/* Surfaces: the content panels (.box, including the intro panel, and the
	   nav sheet). Deliberately much softer than the control radius. */
	--dkk-radius-lg: 1.25rem;
	--dkk-radius-pill: 3.5em;
	--dkk-focus-width: 3px;
	--dkk-focus-offset: 2px;

	/* Motion — set to 0s by the reduced-motion block further down */
	--dkk-duration-fast: 0.2s;
	--dkk-duration: 0.6s;
	--dkk-duration-slow: 1s;
	--dkk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media screen and (max-width: 736px) {
	:root {
		--dkk-header-height: 2.5em;
	}
}

/* ==========================================================================
   2. Accessibility
   ========================================================================== */

/* Skip link: hidden until focused, then pinned to the top-left. */
.skip-link {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 100002;
	padding: 0.75em 1.25em;
	background: var(--dkk-ink);
	color: #fff;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	border-end-end-radius: var(--dkk-radius);
	transform: translateY(-120%);
	transition: transform var(--dkk-duration-fast) var(--dkk-ease);
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
	outline: var(--dkk-focus-width) solid var(--dkk-green);
	outline-offset: calc(var(--dkk-focus-offset) * -1);
}

/* Available to assistive tech, invisible on screen. */
.visually-hidden:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
	main.css sets `outline: 0` in several places, which removes the only
	keyboard affordance there is. Restore a visible ring for keyboard users
	while leaving mouse clicks clean.
*/
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--dkk-focus-width) solid var(--dkk-green-darker);
	outline-offset: var(--dkk-focus-offset);
	border-radius: 2px;
}

/* On dark sections the dark green ring would disappear. */
.main.dark :where(a, button, summary, [tabindex]):focus-visible,
#header :where(a, button):focus-visible {
	outline-color: #fff;
}

/* Never remove focus styling for keyboard users, whatever main.css says. */
a:focus-visible,
.button:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-style: solid !important;
	outline-width: var(--dkk-focus-width) !important;
}

/*
	Anchor scrolling used to be animated by jQuery Scrolly with a manual
	pixel offset. CSS does both jobs natively and respects user preferences.
*/
html {
	scroll-behavior: smooth;
	scroll-padding-block-start: var(--dkk-header-height);
}

:target,
.main[id],
.anchor-alias {
	scroll-margin-block-start: var(--dkk-header-height);
}

/* Zero-size marker that keeps old numbered deep links working. */
.anchor-alias {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

/*
	Reduced motion: keep the layout and the flow, drop the movement.
	Reveal animations are turned into instant state changes rather than
	removed, so nothing stays invisible.
*/
@media (prefers-reduced-motion: reduce) {
	:root {
		--dkk-duration-fast: 0.01ms;
		--dkk-duration: 0.01ms;
		--dkk-duration-slow: 0.01ms;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Parallax backgrounds can trigger motion sickness. */
	.main {
		background-attachment: scroll !important;
	}

	/* Anything the reveal script would animate in is simply shown. */
	.main.style1 > .content,
	.main.style2 > .content,
	.gallery article,
	.contact .box {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Respect the OS "increase contrast" setting. */
@media (prefers-contrast: more) {
	:root {
		--dkk-green-dark: #2f5a2a;
		--dkk-green-darker: #2f5a2a;
		--dkk-ink-muted: var(--dkk-ink);
		--dkk-border: var(--dkk-ink);
	}

	.box.style2 {
		background-color: #fff !important;
		opacity: 1 !important;
	}
}

/* ==========================================================================
   3. Typography and readability
   ========================================================================== */

/*
	main.css steps the root font size down through six fixed breakpoints in
	`pt`. Replace that with one fluid `clamp()` in `rem` so text scales
	smoothly, respects the user's browser font size, and stays zoomable.
*/
body,
input,
textarea,
select,
button {
	font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	/* Matches the original fixed-pt scale: 12pt@360, 15pt@1280, 18pt@1920. */
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
	line-height: 1.7;
	color: var(--dkk-ink);
	letter-spacing: 0.02em;
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Oswald', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
}

/*
	The intro heading is now an <h1> (it used to be an <h2>, which left the
	page without a top-level heading). Keep the original display size.
*/
.main.style1 h1,
.main.style1 h2 {
	/* Original was 4.25em at 1440px (≈ 85 px). */
	font-size: clamp(2.25em, 1.95em + 3.05vw, 4.25em);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.main.style2 h1,
.main.style2 h2,
.main.style3 h1,
.main.style3 h2 {
	/* Original was 2.25em at 1440px (≈ 45 px). */
	font-size: clamp(1.75em, 1.2em + 1.4vw, 2.25em);
}

h3 {
	/* Original was 1.25em at 1440px (≈ 25 px). */
	font-size: clamp(1.15em, 0.95em + 0.4vw, 1.25em);
}

/*
	Comfortable measure for body copy; 45em of prose is hard to read.
	The heading is included here too so its left edge lines up with the
	paragraph text below it — without this, the heading spans the full box
	width while the centered paragraph sits inset, and the two look
	misaligned.
*/
.main.style3 .content > header,
.main.style3 .content > p,
.main.style3 .content > ul,
.main.style3 .content > ol,
.box.style2 header,
.box.style2 p,
.box.style2 ul,
.box.style2 ol,
.faq__answer {
	max-inline-size: 68ch;
	margin-inline: auto;
	hyphens: auto;
}

/* Links: contrast-safe and underlined so colour is not the only cue. */
a {
	color: var(--dkk-green-darker);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--dkk-ink);
}

/* Headings and buttons keep their own styling. */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.button,
.icons a,
.site-nav a,
.site-header__logo a,
.gallery a {
	text-decoration: none;
}

/* Dark sections already invert the palette. */
.main.dark a {
	color: #fff;
}

.main.dark a:hover {
	color: var(--dkk-green);
}

/* Buttons: white on a dark enough green to pass AA. */
input[type='button'],
input[type='submit'],
input[type='reset'],
.button,
button:not(.nav-toggle):not(.lightbox__control) {
	background-color: var(--dkk-green-dark);
	color: #fff;
	font-family: 'Oswald', system-ui, sans-serif;
	letter-spacing: 0.02em;
	transition: background-color var(--dkk-duration-fast) var(--dkk-ease),
		transform var(--dkk-duration-fast) var(--dkk-ease);
}

input[type='button']:hover,
input[type='submit']:hover,
.button:hover,
button:not(.nav-toggle):not(.lightbox__control):hover {
	background-color: var(--dkk-green-darker);
}

input[type='submit']:active,
.button:active,
button:not(.nav-toggle):not(.lightbox__control):active {
	transform: translateY(1px);
}

/* Minimum 44x44 CSS px target, per WCAG 2.5.8. */
.button,
button,
input[type='submit'],
.site-nav a,
.icons a {
	min-height: 44px;
}

/* The "next section" arrow button on dark backgrounds. */
.main.dark .button.style2 {
	background-color: rgba(0, 0, 0, 0.25);
	border: 2px solid #fff;
	color: #fff;
}

.main.dark .button.style2:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   4. Sections and backgrounds
   ========================================================================== */

/*
	Section background images now arrive as a single `--section-bg` custom
	property on the element instead of a full inline `background-image`
	declaration. That keeps the overlay in the stylesheet where it belongs
	and means a missing image degrades to a flat colour rather than a
	broken shorthand.
*/
.intro,
.info,
.main.fullscreen[style*='--section-bg'] {
	background-color: var(--dkk-ink);
	background-image: url('images/overlay.png'), var(--section-bg, none);
	background-repeat: repeat, no-repeat;
	background-size: 256px 256px, cover;
	background-position: top left, center center;
}

/*
	Intro contrast. White display type over a photo only passes AA where the
	photo happens to be dark, so a scrim layer sits between the photo and the
	texture overlay. It is darkest top and bottom, where the heading and the
	"next section" button sit.

	The scrim's strength comes from the module's "Background Overlay" field
	(0-100, default 74) via --overlay-top/-mid/-bottom, set inline per page
	by the overlay_vars() macro. The var() fallbacks below only apply to
	pages rendered before that field existed.

	Layer order (top to bottom): texture, scrim, photo.
*/
.intro {
	background-image: url('images/overlay.png'),
		linear-gradient(
			to bottom,
			rgba(10, 16, 12, var(--overlay-top, 0.74)),
			rgba(10, 16, 12, var(--overlay-mid, 0.72)) 45%,
			rgba(10, 16, 12, var(--overlay-bottom, 0.78))
		),
		var(--section-bg, none);
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 256px 256px, cover, cover;
	background-position: top left, center center, center center;
}

/*
	Info sections keep their text in an opaque side panel rather than over
	the photo, so no darkening is needed by default (the field defaults to
	0%, i.e. fully transparent -- same look as before this existed).
	Authors can still dial one in for a moodier background.
*/
.info {
	background-image: url('images/overlay.png'),
		linear-gradient(
			to bottom,
			rgba(10, 16, 12, var(--overlay-top, 0)),
			rgba(10, 16, 12, var(--overlay-mid, 0)) 45%,
			rgba(10, 16, 12, var(--overlay-bottom, 0))
		),
		var(--section-bg, none);
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 256px 256px, cover, cover;
	background-position: top left, center center, center center;
}

/*
	Keeps the "next section" label and anything else that sits directly on
	the photo readable where the scrim alone is not enough. The panel below
	turns it back off for its own contents.
*/
.intro > .content {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/*
	The intro used to draw its panel on each <p> individually: the heading sat
	outside it, every paragraph got its own rounded rectangle, and the seam
	between them had to be patched with :has() rules — one of which nested
	:has() inside :has(), which is invalid CSS and was silently dropped, so
	the seam showed anyway.

	The panel is now one `.box.style2`, the exact element the info sections
	use, wrapped around the heading and the body copy in the template. All
	the padding, translucency, blur, mobile sizing and prefers-contrast
	handling come from the shared `.box` rules, so the intro and the sections
	below it cannot drift apart.

	Why a panel at all: text-shadow alone is not enough over a photograph.
	Contrast held up over the dark plate and broke down over brighter detail
	(spinach, cutlery), and worse on mobile where the section height — and so
	the image crop — changes.
*/
/*
	`.main.style1` pads itself 3em top and bottom, which made sense when the
	content was loose text on the photo. The panel brings its own generous
	padding, so the section's top padding is now doubled space that pushed the
	"next section" arrow off a 900px-tall screen.

*/
.main.style1.intro {
	padding-block: 1em;
}

/*
	The "next section" arrow was a 5em circle — 104px on a desktop screen,
	larger than any other control on the page for something that is a hint,
	not a destination. Halved. Still 40px at the smallest breakpoint, well
	clear of WCAG 2.5.8's 24px minimum target size, and the glyph is scaled
	with it so it does not end up marooned in the middle of the circle.
*/
.button.down,
button.down {
	width: 2.5em;
	height: 2.5em;
	/*
		The global 44px touch-target floor applies to min-height only, so at
		the smallest breakpoint (where 2.5em is 40px) the circle was stretched
		into an oval. Match it on the other axis.
	*/
	min-width: 44px;
	line-height: 2.25em;
	background-size: 1.25em auto;
}

/* Keep the half-circle variant centred and proportional at the new size. */
.button.down.anchored,
button.down.anchored {
	height: 2.25em;
	margin-left: -1.25em;
	border-radius: 1.5em 1.5em 0 0;
}

.intro > .content > .section-nav {
	margin-block-start: 0.75em;
}

.intro > .content > .box.style2 {
	/*
		`.main.style1` centres its content and gives it no width, so without
		this the panel would span the whole viewport on wide screens. The
		gutter comes from `.content`, which is already inset to the same
		width the info sections' box uses.
	*/
	max-width: min(52em, 100%);
	margin-inline: auto;
	text-align: start;
	text-shadow: none;
}

/*
	The heading sits on the photograph, above the panel, so it needs the
	same breathing room the panel's own top padding used to give it.
*/
.intro > .content > header {
	margin-block-end: 1em;
}

/*
	The brand logo, split out of the body by the template so it stays on the
	photograph instead of on the panel — it is a solid white PNG and would be
	invisible inside the box.
*/
.intro__logo {
	margin-block-start: 1.25em;
}

.intro__logo p {
	margin: 0;
}

.intro__logo img {
	display: block;
	/*
		Capped in em rather than left at the authored pixel size, so the logo
		scales with the type and does not push the "next section" arrow below
		the fold on a short screen.
	*/
	width: min(7em, 40%);
	height: auto;
	margin-inline: auto;
}

/* The arrow button was 25% black on an already dark photo: too faint. */
.intro .button.style2 {
	background-color: rgba(10, 16, 12, 0.55);
	text-shadow: none;
}

.intro .button.style2:hover {
	background-color: rgba(255, 255, 255, 0.25);
}

@media (prefers-contrast: more) {
	.intro {
		background-image: url('images/overlay.png'),
			linear-gradient(rgba(10, 16, 12, 0.82), rgba(10, 16, 12, 0.82)),
			var(--section-bg, none);
	}

}

/*
	Full-viewport intro on desktop. The header is fixed and body carries a
	matching padding-top, so subtract the header height to avoid a scrollbar
	caused by the first section being taller than the space below the header.
	Below 737px main.css forces `height: auto` on .fullscreen, so this stays
	desktop-only.
*/
@media (min-width: 737px) {
	.main.fullscreen.intro {
		min-height: calc(100vh - var(--dkk-header-height));
		min-height: calc(100dvh - var(--dkk-header-height));
	}
}

/* Parallax only where it is cheap and safe. */
@media (min-width: 737px) and (prefers-reduced-motion: no-preference) {
	.intro,
	.info {
		background-attachment: fixed, fixed;
	}
}

.main.style3.primary {
	background-color: var(--dkk-surface);
}

.main.style3.secondary {
	background-color: var(--dkk-surface-alt);
}

/* Sections are landmarks; give them an accessible name and sane padding. */
.main.style3 {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

/* ==========================================================================
   5. Header and mobile navigation
   ========================================================================== */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	height: var(--dkk-header-height);
	padding-inline: 1em;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(6px);
	box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
}

/* The logo used to be an <h1> on every page; it is a <p> now. */
.site-header__logo {
	position: static;
	margin: 0;
	font-family: 'Oswald', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.25em;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.site-header__logo a {
	color: var(--dkk-ink);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-nav {
	position: static;
	height: auto;
	line-height: normal;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list li {
	display: block;
	margin: 0;
	font-size: 0.9em;
}

.site-nav a {
	display: flex;
	align-items: center;
	height: var(--dkk-header-height);
	padding-inline: 0.6em;
	color: var(--dkk-ink);
	border-radius: var(--dkk-radius);
}

.site-nav a:hover {
	background: var(--dkk-surface-alt);
	color: var(--dkk-green-darker);
}

/* Set by theme.js while a section is in view. */
.site-nav a[aria-current='true'] {
	color: var(--dkk-green-darker);
	box-shadow: inset 0 -3px 0 0 var(--dkk-green-dark);
}

/* --- Mobile navigation ---------------------------------------------------
	The original theme simply did `nav { display: none }` below 736px, so
	small screens had no navigation at all. Replaced with a disclosure
	button and a slide-down panel.
   ----------------------------------------------------------------------- */

/*
	The button is a pill rather than a hairline-bordered rectangle: at this
	size a 1px grey outline reads as a disabled input, and it was the only
	bordered element in the header. The tinted fill also gives the open state
	something to change, so the menu's state is visible without reading the
	icon.
*/
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 44px;
	padding-inline: 1em;
	background: var(--dkk-surface-alt);
	border: 1px solid transparent;
	border-radius: var(--dkk-radius-pill);
	color: var(--dkk-ink);
	font-family: 'Oswald', system-ui, sans-serif;
	font-size: 0.9em;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dkk-duration-fast) var(--dkk-ease),
		color var(--dkk-duration-fast) var(--dkk-ease);
}

.nav-toggle:hover {
	background: var(--dkk-green);
	color: var(--dkk-ink);
}

.nav-toggle[aria-expanded='true'] {
	background: var(--dkk-green-dark);
	color: #fff;
}

/*
	The icon: a 20px middle bar with the other two as pseudo-elements. Bars
	are sized in px, not em, so they stay crisp and identically thick at any
	root font size.
*/
.nav-toggle__bars {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: background-color var(--dkk-duration-fast) var(--dkk-ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--dkk-duration-fast) var(--dkk-ease);
}

.nav-toggle__bars::before {
	top: -6px;
}

.nav-toggle__bars::after {
	top: 6px;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.nav-toggle,
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		transition: none;
	}
}

@media screen and (max-width: 860px) {
	.site-header {
		padding-inline: 0.75em;
	}

	.nav-toggle {
		display: inline-flex;
	}

	/*
		Panel is closed by default once JavaScript has taken over. It hangs
		off the bottom of the fixed header as a rounded sheet rather than a
		square full-bleed slab, matching the content boxes.
	*/
	.js .site-nav {
		position: absolute;
		inset-inline: 0;
		inset-block-start: var(--dkk-header-height);
		max-height: min(70vh, 30em);
		overflow-y: auto;
		padding-block: 0.5em;
		background: rgba(255, 255, 255, 0.98);
		border-end-start-radius: var(--dkk-radius-lg);
		border-end-end-radius: var(--dkk-radius-lg);
		box-shadow: 0 0.75em 1.5em rgba(0, 0, 0, 0.14);
	}

	.js .site-nav[hidden] {
		display: none;
	}

	@media (prefers-reduced-motion: no-preference) {
		.js .site-nav:not([hidden]) {
			animation: dkk-nav-open var(--dkk-duration-fast) var(--dkk-ease);
		}
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list li {
		font-size: 1em;
	}

	/*
		Separators are drawn by a pseudo-element inset from both edges, not
		by a border on the <li>. A border spans the whole list item, so the
		line ran wall to wall across the panel and cut the header off from
		the page behind it; insetting it aligns the rule with the link text
		and keeps the full-width row available for the hover/active fill.
	*/
	.site-nav__list li + li::before {
		content: '';
		display: block;
		height: 1px;
		margin-inline: 1.25em;
		background: var(--dkk-border);
	}

	.site-nav a {
		height: auto;
		min-height: 48px;
		padding: 0.75em 1.25em;
		border-radius: 0;
	}

	/*
		A bottom underline is a tab-bar idiom; in a vertical list it reads as
		another separator. Mark the current section with a leading bar and a
		tinted row instead.
	*/
	.site-nav a[aria-current='true'] {
		background: var(--dkk-surface-alt);
		box-shadow: inset 4px 0 0 0 var(--dkk-green-dark);
	}

	/* Without JavaScript the list is always visible — never a dead end. */
	.no-js .nav-toggle {
		display: none;
	}

	.no-js .site-nav {
		position: static;
	}
}

@keyframes dkk-nav-open {
	from {
		opacity: 0;
		transform: translateY(-0.5em);
	}
}

@media screen and (min-width: 861px) {
	/* The toggle is irrelevant on wide screens; hide it from everyone. */
	.nav-toggle {
		display: none !important;
	}

	.site-nav[hidden] {
		display: block;
	}
}

/* main.css adds `padding-top` to body for the fixed header. */
body {
	padding-top: var(--dkk-header-height);
}

/* ==========================================================================
   6. Forms
   ========================================================================== */

.form-wrapper .fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
}

/* Override main.css flex widths and gutters: grid controls field placement. */
.form-wrapper form > .fields > .field,
.form-wrapper form > .fields > .field.half {
	width: auto;
	max-width: none;
	padding: 0;
	grid-column: 1 / -1;
	min-inline-size: 0;
}

/*
	Naam+E-mailadres and the two "extra" quantity dropdowns each share one
	row at wider screen sizes -- a lone small select filling a full-width
	row looked disproportionate next to the text fields around it.
*/
.form-wrapper form > .fields > .field:has(input[name='data[name]']),
.form-wrapper form > .fields > .field:has(input[name='data[email]']),
.form-wrapper form > .fields > .field:has(select[name='data[extra_eters]']),
.form-wrapper form > .fields > .field:has(select[name='data[extra_kinderen]']) {
	grid-column: span 1;
}

/* On small screens every field becomes a comfortable full-width row. */
@media screen and (max-width: 736px) {
	.form-wrapper form > .fields {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		margin: 0 0 2em;
		padding-inline: 0.75em;
	}

	.form-wrapper form > .fields > .field:has(input[name='data[name]']),
	.form-wrapper form > .fields > .field:has(input[name='data[email]']) {
		grid-column: 1 / -1;
	}
}

/*
	Visible labels. The previous build commented the label markup out and
	relied on placeholders, which vanish as soon as you start typing and are
	invisible to some screen readers.
*/
.form-wrapper label,
.form-wrapper .form-label {
	display: block;
	margin-block-end: 0.35em;
	font-family: 'Oswald', system-ui, sans-serif;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dkk-ink-muted);
}

.form-wrapper .form-label.inline {
	/* Plugin adds .inline; keep it block so it sits above the input. */
	display: block;
}

.form-wrapper .required {
	color: var(--dkk-error);
	margin-inline-start: 0.15em;
}

.form-wrapper input[type='text'],
.form-wrapper input[type='email'],
.form-wrapper input[type='tel'],
.form-wrapper input[type='url'],
.form-wrapper input[type='number'],
.form-wrapper select,
.form-wrapper textarea {
	inline-size: 100%;
	padding: 0.7em 0.85em;
	background: var(--dkk-surface);
	border: 1px solid var(--dkk-border);
	border-radius: var(--dkk-radius);
	color: var(--dkk-ink);
	transition: border-color var(--dkk-duration-fast) var(--dkk-ease),
		box-shadow var(--dkk-duration-fast) var(--dkk-ease);
}

.form-wrapper textarea {
	min-height: 8em;
	resize: vertical;
	field-sizing: content; /* progressive: auto-grow where supported */
	max-height: 20em;
}

/*
	main.css strips the native <select> arrow (appearance: none) but never
	drew a replacement, so a select rendered as a flat box indistinguishable
	from a text input -- nothing told visitors it was a dropdown.
*/
.form-wrapper select {
	padding-inline-end: 2.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6a71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 0.9em;
	cursor: pointer;
}

.form-wrapper :is(input, select, textarea):hover {
	border-color: var(--dkk-green-dark);
}

.form-wrapper :is(input, select, textarea):focus-visible {
	border-color: var(--dkk-green-darker);
	box-shadow: 0 0 0 3px rgba(69, 122, 61, 0.2);
}

/* Only flag an invalid field once the visitor has interacted with it. */
.form-wrapper :is(input, textarea, select):user-invalid {
	border-color: var(--dkk-error);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}

.form-wrapper .form-message,
.form-wrapper .form-errors,
.form-wrapper .form-inline-errors {
	margin-block-start: 0.4em;
	font-size: 0.85em;
	color: var(--dkk-error);
}

.form-wrapper .form-description {
	display: block;
	margin-block-start: 0.35em;
	font-size: 0.85em;
	color: var(--dkk-ink-muted);
}

/*
	Form plugin overrides.
	The plugin always loads form-styles.css, even when built_in_css is off.
	We override the parts we need with higher specificity.
*/

/* Reset the plugin's field wrapper margins and padding. */
.form-wrapper .field {
	margin: 0;
	padding: 0;
}

/* Reset the plugin's form-field wrapper. */
.form-wrapper .form-field {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Reset the plugin's label styling. */
.form-wrapper .form-label,
.form-wrapper label {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	white-space: normal;
	line-height: inherit;
	display: block;
	margin-block-end: 0.35em;
}

.form-wrapper .form-label.inline {
	/* Plugin adds .inline; keep it block so it sits above the input. */
	display: block;
}

/* Reset the plugin's input wrapper. */
.form-wrapper .form-data,
.form-wrapper .form-input,
.form-wrapper .form-input-wrapper,
.form-wrapper .form-input-inner {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	width: auto;
	max-width: none;
	display: block;
}

/* Now apply our own form styling. */
.form-wrapper .field > .form-field > .form-label {
	margin: 0;
}

.form-wrapper .field > .form-field > .form-input {
	margin: 0;
}

/* The plugin nests each input in wrappers; they must fill their grid cell. */
.form-wrapper .field > .form-field,
.form-wrapper .field > .form-field > .form-data,
.form-wrapper .field > .form-field > .form-data > .form-input-wrapper {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
}

/*
	Make name, email, and telefoon fields take equal grid column width on wider screens.
*/
.form-wrapper .field.half {
	width: auto;
	flex: none;
	max-width: none;
}

/* Add padding below each field for breathing room. */
.form-wrapper .field {
	padding-block-end: 0.75em;
}

/*
	Turnstile container: the plugin emits its own wrapper; keep it
	centered and spaced correctly.
*/
.form-wrapper .turnstile-container {
	margin-block: 1em;
	display: flex;
	justify-content: center;
}

/* Status region: empty until there is something to announce. */
.form-messages:empty {
	display: none;
}

.form-messages .toast,
.form-wrapper .toast {
	margin-block-end: 1em;
	padding: 0.85em 1em;
	border-radius: var(--dkk-radius);
	border-inline-start: 4px solid currentColor;
	text-align: start;
	font-size: 0.95em;
}

.toast-success,
.toast.green {
	background: #eaf4ea;
	color: var(--dkk-success);
}

.toast-error,
.toast.red {
	background: #fdecea;
	color: var(--dkk-error);
}

.toast-warning,
.toast.yellow {
	background: #fff6e5;
	color: #7a4b00;
}

/*
	The "message sent" panel that replaces the whole form (see
	templates/forms/form.html.twig). It had no styling at all, so after a
	successful submit the box collapsed to two lines of unstyled body text
	with no visual confirmation that anything had happened.
*/
.form-success {
	padding: 1.5em 1.25em;
	background: #eaf4ea;
	border-inline-start: 4px solid var(--dkk-success);
	border-radius: var(--dkk-radius-lg);
	text-align: start;
}

.form-success:focus-visible {
	outline: var(--dkk-focus-width) solid var(--dkk-green-dark);
	outline-offset: var(--dkk-focus-offset);
}

.form-success > :last-child {
	margin-block-end: 0;
}

.form-success__title {
	font-weight: 700;
	color: var(--dkk-success);
}

.form-wrapper .buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: center;
	margin-block-start: 1.25em;
}

/* Submit button feedback while the request is in flight. */
.form-wrapper[aria-busy='true'] input[type='submit'],
form[aria-busy='true'] input[type='submit'] {
	opacity: 0.6;
	cursor: progress;
}

/*
	Honeypot. Kept out of the accessibility tree and off screen rather than
	`display: none`, because some bots skip hidden inputs but not positioned
	ones. Real users never reach it: it is aria-hidden and not tabbable.
*/
.spam-guard {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Turnstile widget spacing. */
.turnstile-container {
	display: flex;
	justify-content: center;
	margin-block: 1em 0;
}

/* ==========================================================================
   7. FAQ accordion
   ========================================================================== */

.faq__list {
	max-inline-size: 45em;
	margin-inline: auto;
	text-align: start;
}

.faq__item {
	border-block-end: 1px solid var(--dkk-border);
}

.faq__item:first-child {
	border-block-start: 1px solid var(--dkk-border);
}

.faq__question {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.9em 0.25em;
	cursor: pointer;
	list-style: none;
}

/* Hide the default triangle in every engine. */
.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::marker {
	content: '';
}

.faq__question h3 {
	margin: 0;
	flex: 1 1 auto;
	color: var(--dkk-ink);
}

.faq__question::after {
	content: '';
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid var(--dkk-green-dark);
	border-bottom: 2px solid var(--dkk-green-dark);
	transform: rotate(45deg);
	transition: transform var(--dkk-duration-fast) var(--dkk-ease);
}

.faq__item[open] > .faq__question::after {
	transform: rotate(-135deg);
}

.faq__question:hover h3 {
	color: var(--dkk-green-darker);
}

.faq__answer {
	padding: 0 0.25em 1.25em;
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

/* Smooth open/close where the browser supports animating to auto height. */
@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		:root {
			interpolate-size: allow-keywords;
		}

		.faq__item::details-content {
			block-size: 0;
			overflow: hidden;
			transition: block-size var(--dkk-duration) var(--dkk-ease),
				content-visibility var(--dkk-duration) allow-discrete;
		}

		.faq__item[open]::details-content {
			block-size: auto;
		}
	}
}

/* ==========================================================================
   8. Gallery lightbox
   ========================================================================== */

.gallery article {
	overflow: hidden;
}

.gallery a.image {
	position: relative;
	display: block;
}

.gallery a.image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.gallery a.image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(57, 69, 75, 0);
	transition: background-color var(--dkk-duration-fast) var(--dkk-ease);
}

.gallery a.image:hover::after,
.gallery a.image:focus-visible::after {
	background: rgba(57, 69, 75, 0.25);
}

/* Native <dialog> lightbox, built by theme.js. */
.lightbox {
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	overscroll-behavior: contain;
}

.lightbox::backdrop {
	background: rgba(31, 35, 40, 0.88);
}

.lightbox__inner {
	display: grid;
	grid-template-rows: 1fr auto;
	place-items: center;
	gap: 1rem;
	width: 100%;
	height: 100%;
	padding: clamp(0.5rem, 3vw, 3rem);
	box-sizing: border-box;
}

.lightbox__figure {
	display: grid;
	place-items: center;
	gap: 0.75rem;
	margin: 0;
	min-height: 0;
}

.lightbox__image {
	max-width: 100%;
	max-height: 75vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--dkk-radius);
	background: rgba(255, 255, 255, 0.05);
}

.lightbox__caption {
	color: #fff;
	font-size: 0.95rem;
	text-align: center;
	text-wrap: pretty;
}

.lightbox__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.lightbox__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 1em;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--dkk-radius-pill);
	color: #fff;
	font-family: 'Oswald', system-ui, sans-serif;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color var(--dkk-duration-fast) var(--dkk-ease);
}

.lightbox__control:hover {
	background: rgba(255, 255, 255, 0.28);
}

.lightbox__control:focus-visible {
	outline: var(--dkk-focus-width) solid #fff;
	outline-offset: var(--dkk-focus-offset);
}

.lightbox__control[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.lightbox__status {
	color: #fff;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   9. Footer, misc, print
   ========================================================================== */

.site-footer {
	padding-block: 2em;
	background: var(--dkk-surface-alt);
	color: var(--dkk-ink);
}

.site-footer a {
	color: inherit;
}

.site-footer a:hover {
	color: var(--dkk-green-darker);
}

.site-footer .icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
}

.site-footer__text {
	margin: 0;
	font-size: 0.85em;
	color: var(--dkk-ink-muted);
}

/*
	The content boxes on the photo sections used `opacity: 0.85` on the whole
	box, which dimmed the text along with the background and pushed the
	contrast below AA. A translucent background gets the same look while the
	text stays fully opaque.
*/
.box {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.88);
	border-radius: var(--dkk-radius-lg);
}

.box.style2 {
	background-color: rgba(255, 255, 255, 0.85);
}

@supports (backdrop-filter: blur(4px)) {
	.box.style2 {
		background-color: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(4px);
	}
}

/*
	Wider box for the "Over ons" section.
	main.css sets `.main.style2 > .content { width: 35% }` directly on the
	content element, which beats a plain `.box.wide { max-width }` rule on
	specificity. Match that selector shape to win, and set `width` itself
	since `max-width` alone can't grow a box that already has a fixed `width`.
*/
.main.style2 > .content.wide {
	width: 70%;
	max-width: 70%;
}

@media screen and (max-width: 1000px) {
	.main.style2 > .content.wide {
		width: 85%;
		max-width: 85%;
	}
}

@media screen and (max-width: 736px) {
	.main.style2 > .content.wide {
		width: 95%;
		max-width: 95%;
	}
}

/*
	Info sections: the content column is 35-40% wide by default, which makes
	longer blocks (the menu list, prices) taller than the viewport. theme.js
	measures each box and widens it in steps by setting `--info-width` until
	it fits the space below the fixed header. Without JavaScript the default
	below applies, which is the old behaviour plus a little breathing room.
	Mobile is untouched: main.css already gives the box the full width there.
*/
@media screen and (min-width: 737px) {
	.main.style2.info > .content {
		width: var(--info-width, 40%);
		/*
			The text inside is already capped at 68ch, so a box much wider
			than that is just empty panel around a narrow column — which is
			what made the Menu section look oversized.
		*/
		max-width: min(46em, calc(100% - 6em));
		/* No width transition: theme.js measures height right after
		   setting the width, and an in-flight animation reports the old
		   width. */
	}
}

/* Reusable secondary text for supporting information. */
.supporting-note {
	display: block;
	margin-block-start: 1em;
	font-size: 0.7em;
	line-height: 1.5;
	color: var(--dkk-ink-muted);
}

/* Images should never overflow their container. */
img {
	max-width: 100%;
	height: auto;
}

/* Tables stay readable on narrow screens. */
.main table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

@media print {
	.site-header,
	.nav-toggle,
	.site-nav,
	.skip-link,
	.button.down,
	.lightbox {
		display: none !important;
	}

	body {
		padding-top: 0;
		background: #fff;
		color: #000;
	}

	.main {
		background: none !important;
		color: #000 !important;
		min-height: 0 !important;
		padding-block: 1em !important;
		page-break-inside: avoid;
	}

	.faq__item > .faq__answer {
		display: block !important;
	}

	a::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		word-break: break-all;
	}

	a[href^='#']::after,
	a[href^='javascript']::after {
		content: '';
	}
}