/*
 * Mooijer 2026 — Theme CSS
 *
 * This file supplements theme.json with styles that cannot be expressed as
 * design tokens: focus rings, skip link, high-contrast mode, reduced-motion,
 * and component-level fixes requiring pseudo-class or media-query logic.
 *
 * Organisation:
 *  1. Custom properties (bridging theme.json tokens into regular CSS)
 *  2. Skip link
 *  3. Focus styles (WCAG 2.1 SC 1.4.11, 2.4.7; WCAG 2.2 SC 2.4.11)
 *  4. Layout: header / footer
 *  5. Navigation block
 *  6. Post cards
 *  7. Team archive
 *  8. Forms
 *  9. Pagination
 * 10. Utility: screen-reader-text
 * 11. Reduced-motion
 * 12. View transitions
 * 13. High-contrast mode
 * 14. Print
 * 15. Product archive
 * 16. Block style variations
 * 17. Icons
 * 18. Pre-footer
 *
 * Responsive breakpoints — used consistently here and in each
 * block's own style.css under blocks/. Mobile-first: rules are
 * min-width unless noted, so a viewport matches the highest tier
 * whose min-width it meets.
 *   600px  — tablet / landscape phone
 *   900px  — small desktop / large tablet
 *   1280px — desktop wide (matches --wp--style--global--wide-size)
 * A bare `max-width: 599px` block is the one accepted exception: it
 * overrides a desktop-default that WordPress itself renders
 * unconditionally (e.g. a block's own flex/grid layout support),
 * which can't be reproduced via min-width without duplicating core's
 * CSS. 599px is deliberately one below the 600px tier, not a
 * separate breakpoint.
 */

/* =========================================================================
   1. Custom properties — re-export theme.json tokens for use here.
   Changing these values must mirror a matching change in theme.json.
   ========================================================================= */

:root {
	--mooijer-blue:            var(--wp--preset--color--blue);
	--mooijer-blue-accessible: var(--wp--preset--color--blue-accessible);
	--mooijer-marine:          var(--wp--preset--color--marine);
	--mooijer-red:             var(--wp--preset--color--red);
	--mooijer-light-grey:      var(--wp--preset--color--light-grey);
	--mooijer-medium-grey:     var(--wp--preset--color--medium-grey);
	--mooijer-dark-grey:       var(--wp--preset--color--dark-grey);
	--mooijer-white:           var(--wp--preset--color--white);

	--mooijer-radius-sm:  var(--wp--custom--border-radius--sm);
	--mooijer-radius-md:  var(--wp--custom--border-radius--md);
	--mooijer-radius-lg:  var(--wp--custom--border-radius--lg);
	--mooijer-radius-xl:  1.5rem;
	--mooijer-radius-xxl: 2rem;
	--mooijer-radius-circle:  999rem;

	--mooijer-transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--easing);

	/* Half the rendered height of .site-header-nav — the sticky dark bar.
	   Used to tuck a leading hero block under the nav (see section 5c).
	   Remeasure this if the nav's font-size, padding or wrapping changes. */
	--mooijer-hero-nav-overlap: 3.75rem;

	/* Focus ring — visible against any background (WCAG 2.2 SC 2.4.11). */
	--mooijer-focus-color:  #006da0;   /* blue-accessible — 4.96:1 on white */
	--mooijer-focus-offset: 2px;
	--mooijer-focus-width:  3px;
}

/* =========================================================================
   2. Skip link
   Visually hidden until focused. Always readable by screen readers.
   WCAG 2.1 SC 2.4.1 — Bypass Blocks.
   ========================================================================= */

.skip-link {
	clip:      rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height:    1px;
	width:     1px;
	margin:    -1px;
	overflow:  hidden;
	padding:   0;
	position:  absolute;
	word-wrap: normal !important;
}

.skip-link:focus {
	background: var(--mooijer-marine);
	clip:        auto !important;
	clip-path:   none;
	color:       var(--mooijer-white);
	display:     block;
	font-size:   var(--wp--preset--font-size--medium);
	font-weight: 600;
	height:      auto;
	left:        0;
	line-height: normal;
	outline:     var(--mooijer-focus-width) solid var(--mooijer-blue);
	overflow:    visible;
	padding:     0.75rem 1.5rem;
	position:    fixed;
	text-decoration: none;
	top:         0;
	width:       auto;
	z-index:     99999;
}

/* =========================================================================
   3. Focus styles
   Uses :focus-visible to show rings only for keyboard users, not mouse.
   Minimum 3px solid outline with 2px offset to meet WCAG 2.2 SC 2.4.11.
   Never removes focus outlines — even from "unstyled" resets below.
   ========================================================================= */

/* Global reset — ensure nothing removes focus outlines. */
*:focus {
	outline-offset: var(--mooijer-focus-offset);
}

/* Keyboard-only focus ring. */
*:focus-visible {
	outline:        var(--mooijer-focus-width) solid var(--mooijer-focus-color);
	outline-offset: var(--mooijer-focus-offset);
	border-radius:  var(--mooijer-radius-sm);
}

/* Remove the default :focus ring only when :focus-visible is supported
   and the user is not using a keyboard — avoids double rings on click. */
*:focus:not(:focus-visible) {
	outline: none;
}

/* Buttons need their own treatment to account for padding. */
.wp-block-button__link:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	outline:        var(--mooijer-focus-width) solid var(--mooijer-focus-color);
	outline-offset: var(--mooijer-focus-offset);
}

/* Navigation links in dark nav bar — white focus ring against dark background. */
.site-header-nav .wp-block-navigation a:focus-visible {
	outline:        var(--mooijer-focus-width) solid var(--mooijer-white);
	outline-offset: var(--mooijer-focus-offset);
}

/* Dark footer links — ensure focus ring is visible against dark background. */
.site-footer a:focus-visible {
	outline:        var(--mooijer-focus-width) solid var(--mooijer-blue);
	outline-offset: var(--mooijer-focus-offset);
}

/* =========================================================================
   4. Layout: header
   ========================================================================= */

/* Top bar — light grey strip with contact info and secondary nav */
.site-header {
	color: #8d8f94;
}

.site-header-topbar-inner {
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--50);
}

.site-header-contact {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--40);
	color: #8d8f94;
}

.site-header-contact__label {
	color: #8d8f94;
}

.site-header-contact__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: #8d8f94;
	text-decoration: none;
	transition: color var(--mooijer-transition);
}

.site-header-contact__link:hover {
	color: var(--mooijer-marine);
}

.site-header-contact__link .link-label {
	text-decoration: underline dotted 1px;
	text-underline-offset: 3px;
}

.site-header-topbar-right .wp-block-navigation a {
	color: #8d8f94;
	font-weight: 400;
	text-decoration: none;
	text-underline-offset: 3px;
}

.site-header-topbar-right .wp-block-navigation a:hover {
	color: var(--mooijer-marine);
	text-decoration: underline;
	text-underline-offset: 5px;
	transition: text-underline-offset var(--mooijer-transition);
}

/* Language switcher — native <details>/<summary> disclosure (WPML) */
.language-switcher {
	display: flex;
	align-items: center;
	position: relative;
}

/* Vertical divider between secondary nav and language switcher */
.site-header-topbar-right .wp-block-navigation + .language-switcher {
	border-inline-start: 1px solid var(--mooijer-medium-grey);
	padding-inline-start: var(--wp--preset--spacing--30);
}

.language-switcher__toggle {
	align-items: center;
	color: #8d8f94;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.25rem;
	line-height: 1.6;
	list-style: none;
	transition: color var(--mooijer-transition);
	user-select: none;
}

/* Chromium/Safari draw their own marker even with list-style: none on <summary> */
.language-switcher__toggle::-webkit-details-marker {
	display: none;
}

.language-switcher__toggle:hover {
	color: var(--mooijer-marine);
}

.language-switcher__current {
	align-items: center;
	display: inline-flex;
	gap: 0.375rem;
}

.language-switcher__flag {
	border-radius: 2px;
	display: block;
	height: 0.9375rem;
	object-fit: cover;
	width: 1.25rem;
}

.language-switcher__code {
	letter-spacing: 0.02em;
}

.language-switcher__chevron {
	transition: transform var(--mooijer-transition);
}

.language-switcher[open] .language-switcher__chevron {
	transform: rotate(180deg);
}

.language-switcher__list {
	background: var(--mooijer-white);
	border: 1px solid var(--mooijer-medium-grey);
	border-radius: var(--mooijer-radius-md);
	box-shadow: var(--wp--preset--shadow--lg);
	list-style: none;
	margin: 0;
	min-width: 10rem;
	padding: var(--wp--preset--spacing--20) 0;
	position: absolute;
	right: 0;
	top: calc(100% + var(--wp--preset--spacing--20));
	z-index: 200;
}

.language-switcher__link {
	align-items: center;
	color: var(--mooijer-dark-grey);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	text-decoration: none;
}

a.language-switcher__link:hover {
	background: var(--mooijer-light-grey);
	color: var(--mooijer-marine);
}

.language-switcher__link.is-current {
	color: var(--mooijer-marine);
	font-weight: 600;
}

/* Main bar — white strip with logo, search and CTA buttons */
.site-header-main {
	background: var(--mooijer-white);
}

.site-header-main-inner {
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--50);
}

/* 600–899px: logo and search share the first line, the CTA buttons
   wrap onto their own line below. At 900px this is undone and the
   block's own nowrap row (logo, search, buttons all on one line)
   takes over again — see the mobile-first note in the file header. */
@media (min-width: 600px) {
	.site-header-main-inner {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}

	.site-header-main-inner > .wp-block-buttons {
		flex-basis: 100%;
	}
}

@media (min-width: 900px) {
	.site-header-main-inner {
		flex-wrap: nowrap;
	}

	.site-header-main-inner > .wp-block-buttons {
		flex-basis: auto;
	}
}

/* Fixed logo box (264 x 60) — keeps the header's height/vertical rhythm
   stable even if a differently-proportioned logo is later uploaded via
   Site Identity; object-fit prevents distortion. */
.site-header-main .wp-block-site-logo img {
	height: 60px;
	object-fit: contain;
	width: 264px;
}

/* Search — rounded pill shape */
.site-header-search.wp-block-search {
	flex: 1;
	max-width: 460px;
}

.site-header-search .wp-block-search__inside-wrapper {
	background: var(--mooijer-white);
	border: 1px solid var(--mooijer-medium-grey);
	border-radius: var(--mooijer-radius-circle);
	display: flex;
	overflow: hidden;
}

.site-header-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--mooijer-blue-accessible);
	/* 3px offset ring satisfies WCAG 2.2 SC 2.4.11 — wrapper is the focus container */
	box-shadow: 0 0 0 3px rgba(0, 109, 160, 0.35);
}

.site-header-search .wp-block-search__input {
	background: transparent;
	border: none;
	border-radius: 0;
	flex: 1;
	padding: 0.5rem 1.25rem;
	width: auto;
}

/* Suppress the individual input outline — the wrapper :focus-within is the indicator */
.site-header-search .wp-block-search__input:focus,
.site-header-search .wp-block-search__input:focus-visible {
	border-color: transparent;
	outline: none;
}

.site-header-search .wp-block-search__button {
	background: var(--mooijer-blue);
	border: none;
	border-radius: 0;
	color: var(--mooijer-white);
	flex-shrink: 0;
	min-width: 2.5rem;
	padding: 0.5rem 1rem;
}

.site-header-search .wp-block-search__button:hover,
.site-header-search .wp-block-search__button:focus {
	background: var(--mooijer-blue-accessible);
	border-color: transparent;
	color: var(--mooijer-white);
}

/* CTA buttons — icons align with text */
.site-header-btn-primary .wp-block-button__link,
.site-header-btn-secondary .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

/* Outline style for secondary button */
.site-header-btn-primary .wp-block-button__link {
	border: 2px solid var(--mooijer-blue);
}

/* Outline style for secondary button */
.site-header-btn-secondary .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--mooijer-blue);
	color: var(--mooijer-blue);
}

.site-header-btn-secondary .wp-block-button__link:hover,
.site-header-btn-secondary .wp-block-button__link:focus {
	background: var(--mooijer-blue);
	color: var(--mooijer-white);
}

/* Nav bar — sticky dark strip with primary navigation */
.site-header-nav {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header-nav-inner {
	padding-inline: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--dark-grey);
	border-radius: var(--mooijer-radius-lg);
}

@media (max-width: 1280px) {
	.site-header-nav {
		margin-inline: var(--wp--preset--spacing--20);
		padding-inline: var(--wp--preset--spacing--20);
	}
}

@media (max-width: 599px) {
	.site-header-nav-inner {
		padding-block: var(--wp--preset--spacing--30);
	}
}

/* Navigation items — uppercase, spaced */
@media (max-width: 599px) {
	.site-header-nav .wp-block-navigation .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30) !important;
	}

	.site-header-nav .wp-block-navigation .wp-block-navigation__submenu-container {
		padding-top: 1rem !important;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.site-header-nav .wp-block-navigation .wp-block-navigation-item__content {
	letter-spacing: 0.05em;
	margin-inline: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--20);
	font-weight: 500;
	text-transform: uppercase;
	text-underline-offset: 3px;
}

.site-header-nav .wp-block-navigation .wp-block-navigation-item__content:hover {
	background-color: var(--mooijer-marine);
}

.site-header-nav .wp-block-navigation__container > .wp-block-navigation-submenu > a,
.site-header-nav .wp-block-navigation__container > .wp-block-navigation-link > a {
	transition: text-underline-offset var(--mooijer-transition);
}

.site-header-nav .wp-block-navigation__container > .wp-block-navigation-submenu > a:hover,
.site-header-nav .wp-block-navigation__container > .wp-block-navigation-link > a:hover {
	text-underline-offset: 5px;
}

.site-header-nav .wp-block-navigation .wp-block-navigation__submenu-icon {
	margin-left: -.25rem;
}

/* Push the last item of the primary menu to the far right on desktop
   (e.g. a standalone "Klant worden" style link). Left off on mobile,
   where the overlay menu stacks items full-width. */
@media (min-width: 600px) {
	.site-header-nav .wp-block-navigation__container > .send-to-the-right {
		margin-left: auto;
	}
}

/* Sticky nav: offset anchor link scroll target */
#main-content {
	scroll-margin-top: 56px;
}

/* Mobile: stack logo, search and CTAs instead of squeezing them into one
   nowrap row (that's what was collapsing the logo to 0 width), and let the
   logo scale by height instead of keeping its fixed desktop box. */
@media (max-width: 599px) {
	.site-header-main-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-header-main .wp-block-site-logo img {
		height: auto;
		max-height: 64px;
		width: 100%;
	}

	.site-header-intro {
		display: none;
	}
}

/* =========================================================================
   5. Navigation block
   ========================================================================= */

/* Mobile overlay menu background: core only lets `background-color: inherit`
   win once the block has a backgroundColor set (see the `.has-background`
   guard on core's own white-background rule) — the nav block in
   parts/header.html carries "backgroundColor":"dark-grey" for that reason. */

/* Mobile menu close/open button — visible focus required. */
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline:        var(--mooijer-focus-width) solid var(--mooijer-white);
	outline-offset: var(--mooijer-focus-offset);
}

/* Submenu dropdown — ensure it is visible against both light/dark surfaces. */
.wp-block-navigation__submenu-container {
	background: var(--mooijer-dark-grey) !important;
	border-radius: 0 0 var(--mooijer-radius-md) var(--mooijer-radius-md);
	box-shadow: var(--wp--preset--shadow--md);
	overflow: hidden !important;
}

.wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
}

/* =========================================================================
   5b. Layout spacing
   All spacing that was previously in block comment style attributes is moved
   here so that core/group and core/columns save functions generate clean HTML
   with no inline style — eliminating block validation mismatches.
   The --wp--style--block-gap custom property is the token WordPress uses
   internally for flex/grid gap; setting it on a parent class overrides the
   block's own gap without adding an inline style to the element.
   ========================================================================= */

/* All content templates */
body.wp-singular .site-main {
	padding-block: var(--wp--preset--spacing--20);
}

body:not(.wp-singular) .site-main {
	padding-block: var(--wp--preset--spacing--70);
}

/* =========================================================================
   5c. Hero overlap — tuck a leading hero block under the sticky nav
   Two separate concerns, kept separate on purpose:
    1. Drop .site-main's own top padding for pages that start with a hero,
       so it never has to be cancelled out by the hero's negative margin.
    2. Give the hero itself a fixed, intentional negative margin equal to
       half the nav's height (--mooijer-hero-nav-overlap) to create the
       overlap. No block-level margin is needed in the editor for this.
   ========================================================================= */

.site-main:has(> .entry-content > .wp-block-mooijer-hero-cards:first-child),
.site-main:has(> .entry-content > .wp-block-mooijer-hero-video:first-child) {
	padding-block-start: 0;
}

/* Neutralise any default top margin WordPress adds to entry-content itself. */
.entry-content:has(> .wp-block-mooijer-hero-cards:first-child),
.entry-content:has(> .wp-block-mooijer-hero-video:first-child) {
	margin-block-start: 0;
}

.entry-content > .wp-block-mooijer-hero-cards:first-child,
.entry-content > .wp-block-mooijer-hero-video:first-child {
	margin-block-start: calc(-1 * var(--mooijer-hero-nav-overlap));
}

/* Footer */
.site-footer-wide {
	padding-block:  var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--50);
}

.footer-cols.wp-block-columns {
	align-items: flex-start;
	--wp--style--block-gap: var(--wp--preset--spacing--50);
}

/* Branding column */
.footer-col-branding {
	--wp--style--block-gap: var(--wp--preset--spacing--40);
}

.footer-contact a {
	color: var(--mooijer-medium-grey);
	text-decoration: none;
}

.footer-contact a:hover {
	color: var(--mooijer-white);
}

/* Address paragraph — route link */
.footer-col-branding > .wp-block-paragraph a {
	color: var(--mooijer-medium-grey);
	text-decoration: underline dotted 1px;
	text-underline-offset: 3px;
}

.footer-col-branding > .wp-block-paragraph a:hover {
	color: var(--mooijer-white);
	text-decoration: underline;
}

/* Social media icons — circular outlined buttons */
.footer-social.wp-block-social-links .wp-social-link {
	background: white;
	transition:  background var(--mooijer-transition), transform var(--mooijer-transition);
}

.footer-social.wp-block-social-links .wp-social-link:hover {
	background:   rgba(255, 255, 255, 0.98);
}

/* Column headings — uppercase, tight, white */
.footer-col-heading.wp-block-heading {
	font-size:      var(--wp--preset--font-size--small) !important;
	font-weight:    700;
	letter-spacing: 0.08em;
	margin-block-end: var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

/* Footer nav lists — vertical with "›" arrow per item */
.footer-nav-list .wp-block-navigation-item__content {
	align-items: center;
	color:       var(--mooijer-medium-grey);
	display:     flex;
	gap:         0.5rem;
	padding:     0;
	text-decoration: none;
	text-underline-offset: 3px;
	transition:  color var(--mooijer-transition);
}

.footer-nav-list .wp-block-navigation-item__content > span {
	text-decoration: none;
	transition: text-underline-offset var(--mooijer-transition);
}

.footer-nav-list .wp-block-navigation-item__content::before {
	color:      var(--mooijer-blue);
	content:    "›";
	flex-shrink: 0;
	font-size:  1rem;
	line-height: 1;
}

.footer-nav-list .wp-block-navigation-item__content:hover {
	color: var(--mooijer-white);
}

.footer-nav-list .wp-block-navigation-item__content:hover > span {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Bottom bar */
.footer-bottom {
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

/* Legal nav — bullet separators between items */
.footer-legal-nav{
	column-gap: .75rem;
}

.footer-legal-nav .wp-block-navigation-item__content {
	color:       var(--mooijer-medium-grey);
	padding:     0;
	text-decoration: none;
	transition:  color var(--mooijer-transition), text-underline-offset var(--mooijer-transition);
	text-underline-offset: 3px;
}

.footer-legal-nav .wp-block-navigation-item__content:hover {
	color: var(--mooijer-white);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.footer-legal-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	color:             var(--mooijer-medium-grey);
	content:           "•";
	flex-shrink:       0;
	margin-inline-end: .75rem;
}

.footer-divider {
	background-color: rgba(255, 255, 255, 0.15);
	border: none;
	height: 1px;
}

/* Archive header */
.archive-header {
	margin-block-end: var(--wp--preset--spacing--60);
	--wp--style--block-gap: var(--wp--preset--spacing--20);
}

/* Search */
.search-header {
	margin-block-end: var(--wp--preset--spacing--60);
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

.search-result {
	padding-block-end:    var(--wp--preset--spacing--50);
	border-block-end:     1px solid var(--mooijer-medium-grey);
}

.search-result-meta {
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

/* Single post */
.entry-header {
	margin-block-end: var(--wp--preset--spacing--60);
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

.author-meta {
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

.author-info {
	--wp--style--block-gap: 0.125rem;
}

.entry-footer {
	margin-block-start: var(--wp--preset--spacing--60);
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

.post-navigation {
	margin-block-start:  var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start:  1px solid var(--mooijer-medium-grey);
	display:             flex;
	flex-wrap:           wrap;
	justify-content:     space-between;
	gap:                 var(--wp--preset--spacing--30);
}

.comment-meta {
	--wp--style--block-gap: var(--wp--preset--spacing--20);
}

/* 404 */
.error-404-content {
	--wp--style--block-gap: var(--wp--preset--spacing--40);
}

/* =========================================================================
   6. Post cards
   ========================================================================= */

.post-card {
	border:        1px solid var(--mooijer-medium-grey);
	border-radius: var(--mooijer-radius-lg);
	box-shadow:    var(--wp--preset--shadow--sm);
	overflow:      hidden;
	transition:    box-shadow var(--mooijer-transition),
	               transform  var(--mooijer-transition);
}

.post-card:hover {
	box-shadow: var(--wp--preset--shadow--md);
}

.post-card-body {
	padding:                var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	--wp--style--block-gap: var(--wp--preset--spacing--20);
}

/* Linked post title — entire card is clickable via stretched-link pattern. */
.post-card .wp-block-post-title a {
	color: var(--mooijer-marine);
	text-decoration: none;
}

.post-card .wp-block-post-title a:hover {
	color: var(--mooijer-blue-accessible);
	text-decoration: underline;
}

/* =========================================================================
   7. Team archive
   ========================================================================= */

.team-archive {
	display:        flex;
	flex-direction: column;
	gap:            var(--wp--preset--spacing--70);
}

.team-department__title {
	font-size:        var(--wp--preset--font-size--x-large);
	margin-block-end: var(--wp--preset--spacing--50);
}

/* Responsive grid: 1 → 2 → 3 → 4 columns */
.team-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   var(--wp--preset--spacing--50);
	list-style:            none;
	padding:               0;
	margin:                0;
}

@media (min-width: 600px) {
	.team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
	.team-grid { grid-template-columns: repeat(4, 1fr); }
}

.team-card {
	display:        flex;
	flex-direction: column;
	gap:            var(--wp--preset--spacing--30);
}

.team-card__image-wrap {
	aspect-ratio:     1 / 1;
	border-radius:    50%;
	overflow:         hidden;
	background-color: var(--mooijer-light-grey);
	width:            100%;
}

.team-card__image {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	max-width: 100%;
	max-height: auto;
}

.team-card__body {
	display:        flex;
	flex-direction: column;
	gap:            var(--wp--preset--spacing--10);
}

.team-card__name {
	font-weight: 700;
	font-size:   var(--wp--preset--font-size--large);
	margin:      0;
	color:       var(--mooijer-marine);
}

.team-card__job-title {
	font-style: italic;
	margin:     0;
	color:      var(--mooijer-dark-grey);
}

.team-card__languages {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--wp--preset--spacing--10);
	list-style:  none;
	padding:     0;
	margin:      0;
}

.team-card__languages [role="img"] {
	font-size:   1.75rem;
	line-height: 1;
	display:     block;
}

@media (forced-colors: active) {
	.team-card__image-wrap {
		border: 1px solid ButtonText;
	}
}

/* =========================================================================
   8. Forms
   WCAG 2.1 SC 1.4.11 — Non-text Contrast (minimum 3:1 for form borders).
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border:         1px solid var(--mooijer-medium-grey);
	border-radius:  var(--mooijer-radius-sm);
	box-sizing:		border-box;
	color:          var(--mooijer-marine);
	font-family:    var(--wp--preset--font-family--barlow);
	font-size:      var(--wp--preset--font-size--medium);
	line-height:    var(--wp--custom--line-height--normal);
	padding:        0.5rem 0.75rem;
	width:          100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--mooijer-blue-accessible);
	outline:      var(--mooijer-focus-width) solid var(--mooijer-blue-accessible);
	outline-offset: 0;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23353941' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-position: right .75rem center;
	background-repeat: no-repeat;
	background-size: 16px 12px;
}

select:-moz-focusring {
	color: transparent;
}

select[multiple],
select[size]:not([size="1"]) {
	background-image: none;
}

label {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-weight: 600;
}

/* Search block — ensure button meets non-text contrast. */
.wp-block-search__button {
	background: var(--mooijer-blue);
	border:     2px solid var(--mooijer-blue-accessible);
	color:      var(--mooijer-marine);
	font-weight: 600;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus {
	background: var(--mooijer-marine);
	border-color: var(--mooijer-marine);
	color: var(--mooijer-white);
}

/* Error states. */
.wp-block-post-comments-form input.error,
.wp-block-post-comments-form textarea.error {
	border-color: var(--mooijer-red);
}

.form-error-message {
	color: var(--mooijer-red);
	font-size: var(--wp--preset--font-size--small);
}

/* =========================================================================
   9. Pagination
   ========================================================================= */

.wp-block-query-pagination-numbers .page-numbers {
	border:        1px solid var(--mooijer-marine);
	border-radius: var(--mooijer-radius-circle);
	color: 		   var(--mooijer-marine);
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	min-width:     2rem;
	min-height:    2rem;
	padding:       0.25rem 0.25rem;
	text-decoration: none;
	transition:    background var(--mooijer-transition), color var(--mooijer-transition);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background:  var(--mooijer-marine);
	border-color: var(--mooijer-marine);
	color:        var(--mooijer-white);
	font-weight:  700;
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	background:   var(--mooijer-light-grey);
	border-color: var(--mooijer-marine);
}

/* =========================================================================
   10. Utility: screen-reader-text
   Makes content available to assistive technology without visual display.
   Compatible with WordPress core conventions.
   ========================================================================= */

.screen-reader-text {
	clip:       rect(1px, 1px, 1px, 1px);
	clip-path:  inset(50%);
	height:     1px;
	margin:     -1px;
	overflow:   hidden;
	padding:    0;
	position:   absolute;
	width:      1px;
	word-wrap:  normal !important;
}

.screen-reader-text:focus {
	background:  var(--mooijer-marine);
	clip:        auto !important;
	clip-path:   none;
	color:       var(--mooijer-white);
	display:     block;
	font-weight: 600;
	height:      auto;
	left:        0;
	line-height: normal;
	overflow:    visible;
	padding:     0.75rem 1.5rem;
	position:    fixed;
	text-decoration: none;
	top:         0;
	width:       auto;
	z-index:     99999;
}

/* =========================================================================
   11. Reduced-motion
   WCAG 2.1 SC 2.3.3 (AAA) — respected here as a quality signal.
   Transitions/animations are still present but instant below.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration:   0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:  0.01ms !important;
		scroll-behavior:      auto !important;
	}
}

/* =========================================================================
   12. View transitions
   Cross-document fade on .site-main during same-origin page navigation.
   @view-transition enables MPA transitions; no JavaScript required.
   Progressive enhancement — ignored by browsers without support.
   Animation only runs when prefers-reduced-motion: no-preference;
   the section-11 rule (animation-duration: 0.01ms) neutralises it otherwise.
   ========================================================================= */

@view-transition {
	navigation: auto;
}

@keyframes vt-fade-out {
	to { opacity: 0; }
}

@keyframes vt-fade-in {
	from { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.site-main {
		view-transition-name: main;
	}

	::view-transition-old(main) {
		animation: 100ms ease-out both vt-fade-out;
	}

	::view-transition-new(main) {
		animation: 100ms ease-in  both vt-fade-in;
	}
}

/* =========================================================================
   13. High-contrast mode (Windows Forced Colors / WHCM)
   Buttons and links rely on system colours; borders become visible.
   ========================================================================= */

@media (forced-colors: active) {
	.skip-link:focus,
	.screen-reader-text:focus {
		forced-color-adjust: none;
		background:  ButtonFace;
		color:       ButtonText;
		outline:     2px solid ButtonText;
	}

	.wp-block-button__link {
		border: 2px solid ButtonText;
	}

	.post-card {
		border: 1px solid ButtonText;
	}

	.product-archive__card {
		border: 1px solid ButtonText;
	}

	.product-archive__rail-btn {
		border: 2px solid ButtonText;
	}

	.language-switcher__list {
		border: 1px solid ButtonText;
	}

	*:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* =========================================================================
   14. Print
   Remove decorative elements; ensure content is readable in print.
   ========================================================================= */

@media print {
	.site-header,
	.site-footer,
	.wp-block-query-pagination {
		display: none;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
	}

	/* Skip printing anchor-only links (e.g. #main-content). */
	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}
}

/* =========================================================================
   15. Product archive
   Filter rail + grouped product category cards. Every group renders visible
   by default (see blocks/product-archive/render.php); view.js progressively
   enhances this into a single-group filter view.
   ========================================================================= */

.product-archive__rail-list {
	display:          flex;
	flex-wrap:        wrap;
	gap:              var(--wp--preset--spacing--30);
	list-style:       none;
	padding:          0;
	margin-block-end: var(--wp--preset--spacing--60);
}

.product-archive__rail-btn {
	display:         inline-flex;
	align-items:     center;
	padding-block:   var(--wp--preset--spacing--20);
	padding-inline:  var(--wp--preset--spacing--40);
	border:          1px solid var(--mooijer-medium-grey);
	border-radius:   var(--mooijer-radius-circle);
	color:           var(--mooijer-marine);
	text-decoration: none;
	transition:      background-color var(--mooijer-transition),
	                 color             var(--mooijer-transition),
	                 border-color      var(--mooijer-transition);
}

.product-archive__rail-btn:hover {
	border-color: var(--mooijer-blue-accessible);
	color:        var(--mooijer-blue-accessible);
}

/* Not colour alone: the active filter also gets a solid fill + bold weight. */
.product-archive__rail-btn.is-active,
.product-archive__rail-btn[aria-current="true"] {
	background:   var(--mooijer-marine);
	border-color: var(--mooijer-marine);
	color:        var(--mooijer-white);
	font-weight:  700;
}

.product-archive__groups {
	display:        flex;
	flex-direction: column;
	gap:            var(--wp--preset--spacing--70);
}

.product-archive__group {
	opacity:    1;
	transform:  translateY(0);
	transition: opacity var(--mooijer-transition), transform var(--mooijer-transition);
}

.product-archive__group.is-leaving {
	opacity:   0;
	transform: translateY(-8px);
}

.product-archive__group.is-entering {
	opacity:    0;
	transform:  translateY(8px);
	transition: none;
}

.product-archive__group-title {
	font-size:        var(--wp--preset--font-size--x-large);
	margin-block-end: var(--wp--preset--spacing--50);
}

/* Responsive grid: 1 → 2 → 3 → 4 columns */
.product-archive__grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   var(--wp--preset--spacing--50);
	list-style:            none;
	padding:               0;
	margin:                0;
}

@media (min-width: 600px) {
	.product-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 782px) {
	.product-archive__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.product-archive__grid { grid-template-columns: repeat(4, 1fr); }
}

.product-archive__card {
	border:        1px solid var(--mooijer-medium-grey);
	border-radius: var(--mooijer-radius-lg);
	box-shadow:    var(--wp--preset--shadow--sm);
	overflow:      hidden;
	transition:    box-shadow var(--mooijer-transition);
}

/* Hover only lifts the card when it's actually a link — the unlinked
   .product-archive__card-link--static variant shouldn't look interactive. */
.product-archive__card:has(> a:hover),
.product-archive__card:focus-within {
	box-shadow: var(--wp--preset--shadow--md);
}

.product-archive__card-link {
	display:         flex;
	flex-direction:  column;
	color:           inherit;
	text-decoration: none;
}

.product-archive__card-image {
	width:        100%;
	/* WordPress renders width/height attributes on the <img> itself for CLS
	   prevention; without an explicit height here, that attribute wins as a
	   definite size and aspect-ratio is ignored. */
	height:       auto;
	aspect-ratio: 1 / 1;
	object-fit:   cover;
	display:      block;
}

.product-archive__card-title {
	padding:     var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-weight: 700;
	color:       var(--mooijer-marine);
}

/* =========================================================================
   16. Block style variations
   ========================================================================= */

/*
 * Columns: intermediate 2-across tier for tablet / landscape mobile.
 *
 * Core only ships one responsive breakpoint for this block — it jumps
 * straight from N-across (782px+) to 1-per-row (781px-) via a
 * `flex-basis: 100% !important` rule. Specificity can't win against that,
 * so instead of adding our own !important (prohibited by this file's
 * conventions outside accessibility overrides), this switches the block to
 * CSS Grid at the intermediate breakpoint: flex-basis has no effect on grid
 * items, which makes core's rule inert without needing to out-rank it.
 *
 * The 781px upper bound is deliberately NOT the theme's 900px tier —
 * it mirrors core's own hardcoded 782px breakpoint above and must
 * stay in sync with it, not with this theme's scale.
 */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns.is-style-tablet-two-up {
		display:               grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   17. Icons
   ========================================================================= */

.wp-font-awesome-icon {
	--fa-width: auto;
	margin-right: .25rem;
}

/* =========================================================================
   18. Pre-footer
   Contact CTA rendered via parts/pre-footer.html on every template, directly
   above the footer. Only the photo (blocks/pre-footer-photo) varies per
   Page — everything else is edited centrally in the template part.
   ========================================================================= */

.pre-footer-inner {
	padding-block: var(--wp--preset--spacing--70);
}

/* Core's root block-gap ("wp-site-blocks > * + *") adds a
   margin-block-start of the theme's blockGap between every pair of root
   blocks — including pre-footer and footer. Zero it out here so the two
   sit flush against each other. */
.site-footer {
	margin-block-start: 0;
}

.pre-footer-cols.wp-block-columns {
	align-items:   center;
	padding:       var(--wp--preset--spacing--50);
	background:    var(--mooijer-white);
	border-radius: var(--mooijer-radius-xxl);
	box-shadow:    var(--wp--preset--shadow--lg);
}

.pre-footer-certifications-note {
	color:       var(--mooijer-dark-grey);
	font-style:  italic;
}

.pre-footer-card {
	background:    var(--mooijer-white);
	border:        1px solid var(--mooijer-blue);
	border-radius: var(--mooijer-radius-lg);
	box-shadow:    var(--wp--preset--shadow--sm);
	overflow:      hidden;
	padding:       var(--wp--preset--spacing--50);
}

.pre-footer-card__body {
	flex: 1;
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

/* Brand blue background — decorative UI element, not text-as-color-only. */
.pre-footer-chat-btn .wp-block-button__link {
	background:    var(--mooijer-blue);
	border-radius: var(--mooijer-radius-circle);
	color:         var(--mooijer-marine);
}

.pre-footer-chat-btn .wp-block-button__link:hover,
.pre-footer-chat-btn .wp-block-button__link:focus {
	background: var(--mooijer-blue-accessible);
	color:      var(--mooijer-white);
}

.pre-footer-photo-wrap {
	flex-shrink: 0;
	width:       11rem;
}

.pre-footer-photo {
	width:         100%;
	height:        auto;
	aspect-ratio:  3 / 4;
	object-fit:    cover;
	display:       block;
	border-radius: var(--mooijer-radius-md);
}

.pre-footer-logo {
	margin-right: var(--wp--preset--spacing--40);
}

/* Stack the card's text and photo below the tablet-two-up breakpoint. */
@media (max-width: 599px) {
	.pre-footer-card {
		flex-wrap: wrap;
	}

	.pre-footer-photo-wrap {
		width: 100%;
	}
}

@media (forced-colors: active) {
	.pre-footer-card {
		border: 1px solid ButtonText;
	}
}


.animation-zoom-card {
	transition: transform var(--mooijer-transition);
}

.animation-zoom-card:hover {
	transform: scale(1.025);
}

.animation-zoom-card-rotate-image,
.animation-zoom-card-rotate-image img {
	transition: transform var(--mooijer-transition);
}

.animation-zoom-card-rotate-image img {
	transition-duration: 2s;
}

.animation-zoom-card-rotate-image figure {
	overflow: hidden;
}

.animation-zoom-card-rotate-image:hover {
	transform: scale(1.02);
}

.animation-zoom-card-rotate-image:hover img {
	transform: scale(1.02) rotate(-1deg);
}

.animation-zoom-image,
.animation-zoom-image figure {
	overflow: hidden;
}

.animation-zoom-image img {
	transition: transform var(--mooijer-transition);
	transition-duration: 1s;
}

.animation-zoom-image:hover img {
	transform: scale(1.02);
}

.wp-block-mooijer-icon-card:hover .icon-card__icon-wrap .wp-font-awesome-icon {
		-webkit-animation: heartbeat 2s ease-in-out both;
		animation: heartbeat 2s ease-in-out both;
}


@-webkit-keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	10% {
		-webkit-transform: scale(0.92);
		transform: scale(0.92);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	33% {
		-webkit-transform: scale(0.88);
		transform: scale(0.88);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

@keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	10% {
		-webkit-transform: scale(0.92);
		transform: scale(0.92);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	33% {
		-webkit-transform: scale(0.88);
		transform: scale(0.88);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}