/* DrukDuivels base layer: focus ring, selection, reduced motion, scroll offsets.
   Token variables only (raw values: 0, 1px hairlines). Loaded on the front end and in the editor. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus);
	outline-offset: var(--wp--custom--border--focus-offset);
}

::selection {
	background: var(--wp--preset--color--signature-2);
	color: var(--wp--preset--color--contrast);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:target,
[id^="comment-"],
#reviews {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--header-height-mobile) + var(--wp--preset--spacing--40));
}

@media (min-width: 1024px) {
	:target,
	[id^="comment-"],
	#reviews {
		scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--40));
	}
}

@media (max-width: 600px) {
	:target,
	[id^="comment-"],
	#reviews {
		scroll-margin-top: calc(var(--wp--custom--layout--header-height-mobile) + var(--wp--preset--spacing--40));
	}
}

/* Dark and photo grounds use the inverse focus ring. */
:where(.is-style-section-deep, .is-style-section-accent, .wp-block-cover) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--focus-inverse);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* ---------- contact form (inc/contact-form.php, 2026-10-22): PHP-printed markup, the same field look as the shop ---------- */
.dd-contact__form { display: grid; gap: var(--wp--preset--spacing--40); max-width: var(--wp--custom--layout--content); }
.dd-contact__field { display: grid; gap: var(--wp--preset--spacing--20); margin: 0; }
.dd-contact__field label { font-weight: var(--wp--custom--font-weight--semibold); }
.dd-contact__field :is(input, textarea) { box-sizing: border-box; width: 100%; min-height: var(--wp--custom--control--height); padding: var(--wp--preset--spacing--30) var(--wp--custom--control--input-padding-x); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--input); background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--contrast); font: inherit; font-size: var(--wp--preset--font-size--medium); }
.dd-contact__field textarea { min-height: calc(var(--wp--custom--control--height) * 3); resize: vertical; }
.dd-contact__field :is(input, textarea):focus { border-color: var(--wp--preset--color--contrast); outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }
.dd-contact__privacy { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-4); }
.dd-contact__notice { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--input); font-weight: var(--wp--custom--font-weight--semibold); }
.dd-contact__notice--success { background: var(--wp--preset--color--success-surface); color: var(--wp--preset--color--success); }
.dd-contact__notice--error { background: var(--wp--preset--color--error-surface); color: var(--wp--preset--color--error); }
/* the honeypot stays out of sight and out of the tab order */
.dd-contact__hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

/* ---------- section style Light (styles/section-light.json, 2026-10-22) ----------
   The muted text styles (lead, meta, the excl. btw line) are light greys made for the navy page; on the light band they
   take the dark navy tones instead. A nested variation colour in the section style did not reach them. */
.is-style-section-light p.is-style-lead { color: var(--wp--preset--color--base); }
.is-style-section-light :is(p.is-style-meta, .dd-price-excl) { color: var(--wp--preset--color--accent-6); }