/**
 * Theme chrome styles (header / footer) — the parts theme.json can't express
 * (sticky + backdrop blur, nav hover underline, language pill, CTA arrow).
 * Ported from docs/design/styles.css.
 */

/*
 * Responsive breakpoints — Bootstrap's conventional scale (a CSS @media query
 * can't read a custom property, so the px values are written out; keep them on
 * this set instead of inventing new ones). Mirrored in the block stylesheets
 * (src/hero, src/projects):
 *   sm  576px  -> "down" queries use  max-width: 575.98px
 *   md  768px  ->  max-width: 767.98px  /  min-width: 768px   (complementary)
 *   lg  992px  ->  max-width: 991.98px
 * The .98 offset (Bootstrap's convention) keeps a max/min pair from both
 * matching at the exact boundary px.
 */

/* ============================================================
   Layout — drop the default top-level block gap before the main content and
   the footer so the hero sits flush under the sticky header and the footer
   sits flush after the content (the design has no strip between them). Scoped
   to these structural blocks so in-page block spacing is unaffected.
   ============================================================ */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* The single-page sections stack flush: each is full-bleed (alignfull) or
   provides its own `padding-block`, matching the design. Without this, the
   constrained layout's default block-gap leaves a strip of the paper page
   background between sections — most visibly as a light bar between the dark
   hero and the green ticker. (front-page.html + index.html both render
   post-content as `is-layout-constrained`.) */
.wp-block-post-content.is-layout-constrained > * {
	margin-block-start: 0;
}

/* ============================================================
   Anchor navigation — smooth scroll + sticky-header offset
   Clicking a nav link (#sec-services …) eases to the section, and
   each anchored section comes to rest with its top edge FLUSH with
   the bottom of the sticky header (no gap). The offset therefore
   equals the exact header height — .cm-header__inner min-height
   (88px desktop / 64px mobile) + the 1px .cm-header border — kept
   in the --cm-header-h variable so it can't drift from the header.
   ============================================================ */
html {
	scroll-behavior: smooth;
	--cm-header-h: 89px;

	/* Inline arrow glyph shared by the header CTA and the contact submit button.
	   Masked over `currentcolor` so it inherits each button's text colour. */
	--cm-icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" viewBox="0 0 16 10"><path d="M1 5h13M10 1l4 4-4 4" stroke="black" stroke-width="1.6" fill="none"/></svg>');
}

.cm-section[id] {
	scroll-margin-top: var(--cm-header-h);
}

@media (max-width: 767.98px) {

	html {
		--cm-header-h: 65px;
	}
}

/* WCAG 2.3.3 — respect users who prefer reduced motion: jump, don't ease. */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

/* ============================================================
   Header
   ============================================================ */

/* The template-part wrapper is the sticky element (it has the tall scroll
   context); the inner .cm-header paints the full-width blurred bar. */
.cm-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.cm-header {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--custom--line);

	/* Gutter on the full-width bar so the content edge lines up with the hero
	   and section content. Putting it inside .cm-header__inner double-insets
	   the header. */
	padding-inline: var(--wp--preset--spacing--gutter);
}

.cm-header__inner {
	max-width: var(--wp--custom--maxw);
	margin-inline: auto;
	min-height: 88px;
	gap: 24px;
}

.cm-header .custom-logo {
	display: block;
	height: auto;
}

/* Navigation — centered, body font, animated underline on hover */
.cm-header__nav {
	flex: 1 1 auto;
}

.cm-header__nav .wp-block-navigation__container {
	gap: 28px;
}

.cm-header__nav .wp-block-navigation-item__content {
	position: relative;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-block: 6px;

	/* Suppress the browser's default (blue) tap highlight so only our own
	   press wash shows on the mobile menu rows — matches .cm-menu-btn. */
	-webkit-tap-highlight-color: transparent;
}

.cm-header__nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--green);
	transition: right 0.25s ease;
}

.cm-header__nav .wp-block-navigation-item__content:hover::after,
.cm-header__nav .wp-block-navigation-item__content:focus-visible::after {
	right: 0;
}

/* Right cluster: language pill + CTA */
.cm-header__right {
	gap: 16px;
}

/* Language switcher rendered as an NL/EN pill */
.cm-langswitch {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 999px;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
}

.cm-langswitch li {
	margin: 0;
}

.cm-langswitch a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-2);
}

.cm-langswitch .current-lang a,
.cm-langswitch .current-menu-item a {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark);
}

/* CTA button (matches the design's solid accent button + arrow) */
.cm-header__cta {
	margin: 0;
}

.cm-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 14px;
	border-radius: var(--wp--custom--button-radius);
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--accent-on);
}

.cm-header__cta .wp-block-button__link:hover,
.cm-header__cta .wp-block-button__link:focus {
	background: var(--wp--preset--color--green-deep);
}

.cm-header__cta .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 10px;
	flex: none;
	background: currentcolor;
	-webkit-mask: var(--cm-icon-arrow) no-repeat center / contain;
	mask: var(--cm-icon-arrow) no-repeat center / contain;
	transition: transform 0.2s ease;
}

.cm-header__cta .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Mobile menu button (hamburger): a borderless icon, shown below `lg`. The
   desktop inline nav is hidden below `lg` and re-shown as a dropdown when
   `.cm-header.nav-open` is toggled via the Interactivity store. */
.cm-menu-btn {
	display: none;
	appearance: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--ink);
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	/* Fade-out is the "flash": the wash appears instantly on press (below) then
	   eases away on release — it never persists. */
	transition: background 0.4s ease;
}

.cm-menu-btn:active {
	background: rgba(0, 0, 0, 0.08);
	transition: background 0s;
}

.cm-menu-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}

@media (max-width: 991.98px) {

	.cm-menu-btn {
		display: inline-grid;
		place-items: center;
	}

	/* The nav becomes a full-width dropdown below the sticky header bar (the
	   sticky `.cm-site-header` is its positioning context). It is kept in the
	   DOM and shown immediately when opened. */

	/* Target the <nav> ELEMENT, not `.cm-header__nav` — core copies the block's
	   className onto the inner <ul> too, so a bare `.cm-header__nav` would also
	   make the list position:absolute (top:100% → pushed below the nav, the gap).
	   `nav.cm-header__nav` also out-specifies core's `.wp-container-…-is-layout-flex`
	   so the column display wins. */
	.cm-header nav.cm-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex: none;

		/* Flex COLUMN (overriding core's flex row + align-items:center, which
		   vertically centered the stacked list): top-aligns + stretches it. */
		display: flex;
		flex-direction: column;
		align-items: stretch;

		/* No panel padding: the first and last item rows sit flush against the
		   panel edges, with inner spacing owned by each link row. */
		padding-block: 0;
		background: var(--wp--preset--color--paper);
		border-bottom: 1px solid var(--wp--custom--line);
		opacity: 0;
		transform: none;
		visibility: hidden;
		transition: none;
	}

	.cm-header.nav-open nav.cm-header__nav {
		opacity: 1;
		transform: none;
		visibility: visible;
	}

	.cm-header__nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* The list item is a flex row by default, which shrink-wraps its link; make
	   it a block so the link fills the panel width. */
	.cm-header__nav .wp-block-navigation-item {
		display: block;
	}

	/* Each link is a full-width row: the gutter lives on the item (not the list)
	   so its press wash spans the whole panel while the text stays gutter-inset.
	   The wash matches the hamburger — a flash on :active that eases away. */
	.cm-header__nav .wp-block-navigation-item__content {
		display: block;
		padding: 12px var(--wp--preset--spacing--gutter);
		transition: background 0.4s ease;
	}

	.cm-header__nav .wp-block-navigation-item__content:active {
		background: rgba(0, 0, 0, 0.08);
		transition: background 0s;
	}
}

/* Don't animate the dropdown for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

	.cm-header__nav {
		transition: none;
	}
}

@media (max-width: 767.98px) {

	.cm-header {
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	.cm-header__inner {
		min-height: 64px;
		gap: 14px;
	}

	.cm-header .custom-logo {
		width: 108px;
	}

	.cm-header__right {
		gap: 10px;
	}
}

@media (max-width: 575.98px) {

	.cm-header__right .cm-header__cta {
		display: none !important;
	}
}

/* ============================================================
   Ticker — decorative scrolling marquee of the trades
   Ported from docs/design/styles.css (.ticker / .ticker__track),
   folding in the production [data-fonts="serif"] variant. Token-based.
   Two identical .cm-ticker__track copies sit side by side in the flex
   .cm-ticker; each is translated by -100% (exactly its own width), so as one
   scrolls off the left the other has already filled the viewport = seamless
   loop. min-width:100% (+ flex-shrink:0) keeps every copy at least as wide as
   the viewport, so there is never a trailing blank gap regardless of screen
   size; space-around spreads the trades to fill when they don't overflow, and
   the 40px gaps stay tight when they do.
   ============================================================ */
.cm-ticker {
	display: flex;
	gap: 40px;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--accent-on);
	overflow: hidden;
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
}

.cm-ticker__track {
	flex: 0 0 auto;
	min-width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 40px;
	padding: 12px 0;
	white-space: nowrap;
	animation: cm-ticker 46s linear infinite;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.01em;
}

.cm-ticker__track span {
	display: inline-flex;
	align-items: center;
	gap: 48px;
}

.cm-ticker__track span::after {
	content: "·";
	opacity: 0.6;
	font-size: 16px;
}

@keyframes cm-ticker {

	from {
		transform: translateX(0);
	}

	/* Travel one full TILE PERIOD, not just one track width: the two tracks are
	   separated by the .cm-ticker `gap`, so the second track's start sits at
	   (track width + gap). Translating only -100% (one track width) lands 40px
	   short, snapping that 40px at the loop. The -40px MUST equal the .cm-ticker
	   gap above so the second copy lands exactly where the first began. */
	to {
		transform: translateX(calc(-100% - 40px));
	}
}

/* WCAG 2.2.2 — stop the marquee for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

	.cm-ticker__track {
		animation: none;
	}
}

/* ============================================================
   Section base + shared section-header motif
   (owned by the Diensten/services slice; reused by projects/about/contact)
   Ported from docs/design/styles.css (.section / .section__head / .section__num),
   using the serif font variant that theme.json ships (Instrument Serif + Manrope).
   ============================================================ */
.cm-section {
	padding-block: var(--wp--preset--spacing--section);
}

.is-style-section-paper {
	background: var(--wp--preset--color--paper-2);
}

.is-style-section-dark {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--on-dark);
}

.cm-section--contact {
	padding-block: clamp(44px, 4.4vw, 76px) clamp(20px, 2.4vw, 32px);
}

/* Eyebrow number ("Diensten", "Projecten", …) */
.cm-section__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow, 11px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.55;
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cm-section__num::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentcolor;
	opacity: 0.5;
}

/* Title + lead row (two columns on desktop, stacked on mobile) */
.cm-section__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 5.2vw, 80px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	-webkit-text-stroke: 0.4px currentcolor;
}

.cm-section__title .accent {
	color: var(--wp--preset--color--green);
}

.cm-section__lead {
	font-size: var(--wp--preset--font-size--lead, clamp(15px, 1.15vw, 17px));
	line-height: 1.55;
	max-width: 46ch;
	opacity: 0.8;
	margin: 0;
}

/* Section header (.cm-section__head): the eyebrow leads, then a title | lead
   row. On desktop the head is a two-column grid (the mockup's .section__head),
   reproducing the layout the floats used to fake — the title fills the left
   column; the lead sits left-aligned in the right column, capped at its own
   46ch. On mobile the head is normal flow, so title and lead stack. The head
   owns the gap down to the section content (these explicit margins override the
   group block-gap), so no clear/!important fixups are needed. */
.cm-section__head {
	margin: 0 0 clamp(28px, 3.5vw, 48px);
}

.cm-section__head + * {
	margin-block-start: 0;
}

@media (min-width: 768px) {

	.cm-section__head {
		display: grid;
		grid-template-columns: repeat(2, min(calc(50% - 24px), 640px));
		column-gap: 48px;
		align-items: start;
	}
}

/* ============================================================
   Services grid (Diensten) — six .cm-service cards
   Ported from docs/design/styles.css (.services-grid / .service).
   ============================================================ */
.cm-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--wp--custom--line);
	border-left: 1px solid var(--wp--custom--line);
}

/* The grid group is a `default` (flow) block, so WordPress adds its 24px
   block-gap as `margin-block-start` to every card but the first. With the
   container as a CSS grid that stray margin doesn't space rows — it offsets the
   non-first cards down inside their cells, misaligning the card tops. Zero it so
   all cards align to their cell top and stretch to equal height. */
.cm-services-grid > .cm-service {
	margin-block-start: 0;
}

.cm-service {
	position: relative;
	padding: 32px 28px 36px;
	border-right: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
	background: var(--wp--preset--color--paper);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 200px;
}

/* Thin accent rule above each card title (core/separator). Override the
   default core separator margins/border so it reads as the mockup's bar. */
.cm-service__rule.wp-block-separator {
	width: 28px;
	max-width: 28px;
	height: 2px;
	margin: 0 0 6px;
	border: 0;
	background: var(--wp--preset--color--ink);
	opacity: 1;
}

.cm-service h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	-webkit-text-stroke: 0.3px currentcolor;
}

.cm-service p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	opacity: 0.75;
}

@media (max-width: 991.98px) {

	.cm-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {

	.cm-services-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Projecten — dark section wrapper (#sec-projects)
   The carousel block (construction-maastricht/projects) stays transparent and
   inherits this dark treatment; all carousel/slide CSS lives in
   src/projects/style.scss. Only the dark-variant overrides are added here —
   the .is-style-section-dark base background/color is declared with the
   section variations above (Services delta), so it is not repeated.
   Ported from docs/design/styles.css (.section--dark, line 505).
   ============================================================ */

/* On a dark section the eyebrow rule + header text inherit currentColor, so the
   only adjustment needed is keeping the lead/eyebrow legible on dark. */
.is-style-section-dark .cm-section__num,
.is-style-section-dark .cm-section__lead {
	color: var(--wp--preset--color--on-dark);
}

/* ============================================================
   About (Over)
   The paper section background (.is-style-section-paper) is declared with the
   section variations above (Services delta), so it is not repeated here.
   Ported from docs/design/styles.css `.about__*` (data-fonts="serif").
   ============================================================ */
.cm-about__grid.wp-block-columns {
	gap: clamp(32px, 5vw, 88px);
	align-items: start;
}

.cm-about__body {
	padding-top: 0;
}

/* Mirror the mockup's 0.85fr / 1.15fr split (photo narrower, body wider) — core
   columns default to 50/50, which shifts the body text too far right. */
@media (min-width: 768px) {

	.cm-about__grid > .wp-block-column:first-child {
		flex-basis: 42.5%;
		flex-grow: 0.85;
	}

	.cm-about__grid > .wp-block-column:last-child {
		flex-basis: 57.5%;
		flex-grow: 1.15;
	}
}

/* Portrait — 4:5, cover-cropped. Core wraps the image in <figure>. */
.cm-about__photo {
	margin: 0;
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--paper-2);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.cm-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}

.cm-about__body p {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
	margin: 0 0 18px;
	text-wrap: pretty;
}

/* Display-serif pull quote (italic, sentence case under the serif theme).
   Selectors below are qualified with `.cm-about__body p` so they outrank the
   generic body-paragraph rule above — these are all <p> inside .cm-about__body,
   so a bare class (0,1,0) loses to `.cm-about__body p` (0,1,1) and collapses to
   the 18px body size. */
.cm-about__body p.cm-about__quote {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	margin: 0 0 28px;
}

/* Sign-off — name stacked above the role, matching the design. */
.cm-about__signoff {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--custom--line);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.cm-about__signoff p {
	margin: 0;
}

/* The sign-off is a constrained-layout group; core gives its children
   `margin-left/right: auto !important`, which (in this flex column) centers the
   name/role instead of stacking them flush-left. Override it. */
.cm-about__signoff > * {
	margin-inline: 0 !important;
	max-width: none;
}

.cm-about__body p.cm-about__name {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}

.cm-about__body p.cm-about__title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
	line-height: 1.3;
}

@media (max-width: 767.98px) {

	.cm-about__grid.wp-block-columns {
		align-items: stretch;
	}
}

/* ============================================================
   Legal / long-form prose (Privacyverklaring — patterns/privacy.php)
   A standalone legal page rendered inside a .cm-section paper band. The body
   copy needs a NARROW measure (~68ch) for readability — the section's own
   ~1328px content width is far too wide for running text. .cm-legal is the
   prose wrapper: it caps the measure, left-aligns it under the section head,
   and sets a comfortable heading / paragraph / list rhythm on theme.json tokens
   (Manrope body, Instrument Serif sub-headings).
   ============================================================ */
.cm-legal {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
}

/* .cm-legal itself fills the section's constrained ~1328px container (core
   constrained-layout centers it, so it lines up with .cm-section__head — the
   SAME container the other sections use, not the full-bleed section padding
   edge). The running legal text is then capped to a readable measure and
   left-aligned WITHIN that container, so the body starts at the same left edge
   as the heading. */
.cm-legal > * {
	max-width: 68ch;
	margin-block: 0;
}

.cm-legal > * + * {
	margin-block-start: 1.1em;
}

.cm-legal h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.005em;
	margin-block-start: 1.6em;
}

.cm-legal h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.2;
	letter-spacing: -0.005em;
	margin-block-start: 1.3em;
}

.cm-legal h2:first-child,
.cm-legal h3:first-child {
	margin-block-start: 0;
}

.cm-legal p {
	text-wrap: pretty;
}

.cm-legal ul {
	margin-block: 0.4em 0;
	padding-inline-start: 1.4em;
	list-style: disc;
}

.cm-legal li {
	margin-block-start: 0.4em;
}

.cm-legal li::marker {
	color: var(--wp--preset--color--green);
}

.cm-legal a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cm-legal .cm-legal__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-2);
	opacity: 0.7;
	margin-block-start: 2em;
	padding-block-start: 1.2em;
	border-top: 1px solid var(--wp--custom--line);
}

/* ============================================================
   Contact (patterns/contact.php) — info column + Fluent Forms overrides
   Ported from docs/design/styles.css (.contact__grid / .contact__info /
   .socials / .form), mapped onto theme.json tokens. All Fluent Forms rules
   are scoped strictly under .cm-contact__form so plugin selector/markup
   drift is contained.
   ============================================================ */
.cm-contact__grid {
	gap: clamp(32px, 5vw, 80px);
	margin-top: clamp(20px, 2.4vw, 34px);
}

/* Mirror the mockup's 0.9fr / 1.1fr split on the two columns at desktop. */
@media (min-width: 768px) {

	.cm-contact__grid > .wp-block-column:first-child {
		flex-basis: 45%;
		flex-grow: 0.9;
	}

	.cm-contact__grid > .wp-block-column:last-child {
		flex-basis: 55%;
		flex-grow: 1.1;
	}
}

.cm-contact__info {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cm-contact__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Both the info column and each row are constrained-layout groups, so core's
   layout support hands every child `margin: auto !important` (centering via the
   contentSize) plus a block-gap `margin-block-start`. With these flex columns the
   auto inline margins shrink + center the children, and the block-gap margin
   stacks on top of the flex `gap`, doubling the vertical rhythm. Zero every
   core-applied margin so the children sit flush-left and the flex `gap` is the
   single source of vertical spacing — 22px between items, 6px label→value, per
   the mockup. The selector must out-specify core's `.is-layout-constrained > *`
   rule in the editor too, where `add_editor_style` prefixes our selectors with
   `.editor-styles-wrapper` and core's layout CSS loads after ours (a single
   class only ties and loses on source order); the doubled class wins regardless
   of load order. */
.cm-contact__info.cm-contact__info > *,
.cm-contact__row.cm-contact__row > * {
	margin: 0 !important;
	max-width: none;
}

.cm-contact__lbl {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
}

.cm-contact__val {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.35;
}

.cm-contact__val a {
	color: inherit;
	text-decoration: none;
}

.cm-contact__val a:hover {
	color: var(--wp--preset--color--green-deep);
}

/* Socials — circular icon buttons that fill with the accent on hover. */
.cm-contact__socials {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cm-contact__socials a {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 50%;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cm-contact__socials a:hover {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--accent-on);
	border-color: var(--wp--preset--color--green);
}

/* ------------------------------------------------------------
   Fluent Forms overrides — scoped strictly under .cm-contact__form.
   Targets the plugin's stable wrapper/field classes; if the plugin
   changes its markup these rules simply stop matching (contained drift).
   ------------------------------------------------------------ */
.cm-contact__form {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius);
	padding: clamp(28px, 4vw, 48px);
}

/* Lay the fields out as the mockup's 2-up grid (Naam | E-mail, Telefoon |
   Onderwerp), with the message + submit spanning the full width. The grid lives
   on the plugin's <fieldset> (the direct parent of the field groups); the
   per-field span comes from the container_class set in the fixture
   (cm-ff-half / cm-ff-full). The screen-reader <legend> spans a zero-height row
   so it doesn't offset the 2-up pairing. */
.cm-contact__form fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 16px;
	align-items: start;
}

.cm-contact__form fieldset > legend,
.cm-contact__form .cm-ff-full {
	grid-column: 1 / -1;
}

.cm-contact__form .ff-el-group,
.cm-contact__form .ff_form_group {
	margin: 0;
}

/* Name field — its two visible sub-fields (Voornaam | Achternaam) sit side by
   side inside the full-width wrapper. */
.cm-contact__form .ff-t-container {
	display: flex;
	gap: 16px;
}

.cm-contact__form .ff-t-cell {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 575.98px) {

	.cm-contact__form fieldset {
		grid-template-columns: 1fr;
	}

	.cm-contact__form .ff-t-container {
		flex-direction: column;
	}
}

/* Labels — mono uppercase eyebrow, matching the mockup .field label. */
.cm-contact__form .ff-el-input--label label,
.cm-contact__form .ff-el-group label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-bottom: 6px;
}

/* Inputs — underline-only fields on a transparent background. Targeting the
   plugin's own .ff-el-form-control class (not just the bare element) so these
   reliably outrank Fluent Forms' default field border on equal element
   specificity (its select keeps a full box otherwise). */
.cm-contact__form .ff-el-form-control,
.cm-contact__form input[type="text"],
.cm-contact__form input[type="email"],
.cm-contact__form input[type="tel"],
.cm-contact__form input[type="number"],
.cm-contact__form textarea,
.cm-contact__form select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-bottom: 1px solid var(--wp--custom--line-strong);
	background: transparent;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	box-shadow: none;
	width: 100%;
}

/* Native select chevron (the plugin strips it with appearance:none). */
.cm-contact__form select {
	padding-right: 24px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5 6 6.5l5-5" stroke="%23121212" stroke-width="1.4"/></svg>');
	background-repeat: no-repeat;
	background-position: right 2px center;
	cursor: pointer;
}

.cm-contact__form .ff-el-form-control:focus,
.cm-contact__form input:focus,
.cm-contact__form textarea:focus,
.cm-contact__form select:focus {
	outline: 0;
	border-bottom-color: var(--wp--preset--color--green);
	box-shadow: none;
}

.cm-contact__form textarea {
	resize: vertical;
	min-height: 110px;
}

.cm-contact__form ::placeholder {
	color: var(--wp--preset--color--ink-2);
	opacity: 0.5;
}

/* Submit — match the theme's solid accent button. */
.cm-contact__form .ff-btn-submit,
.cm-contact__form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	border: 0;
	border-radius: var(--wp--custom--button-radius);
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--accent-on);
	cursor: pointer;
	transition: background 0.2s ease;
}

.cm-contact__form .ff-btn-submit:hover,
.cm-contact__form .ff-btn-submit:focus,
.cm-contact__form button[type="submit"]:hover,
.cm-contact__form button[type="submit"]:focus {
	background: var(--wp--preset--color--green-deep);
}

/* Arrow on the submit button (matches the header CTA + the mockup). */
.cm-contact__form .ff-btn-submit::after,
.cm-contact__form button[type="submit"]::after {
	content: "";
	width: 16px;
	height: 10px;
	flex: none;
	background: currentcolor;
	-webkit-mask: var(--cm-icon-arrow) no-repeat center / contain;
	mask: var(--cm-icon-arrow) no-repeat center / contain;
	transition: transform 0.2s ease;
}

.cm-contact__form .ff-btn-submit:hover::after,
.cm-contact__form button[type="submit"]:hover::after {
	transform: translateX(4px);
}

/* Reassurance note above the submit (mockup .form__note). */
.cm-contact__form .cm-form-note {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
	opacity: 0.65;
}

/* Success / error messaging — keep within the theme's mono voice. */
.cm-contact__form .ff-message-success {
	padding: 12px 16px;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--accent-on);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
}

.cm-contact__form .error,
.cm-contact__form .text-danger,
.cm-contact__form .ff-el-is-error .text-danger {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--green-deep);
}

/* ============================================================
   Footer (parts/footer.html → patterns/footer.php)
   Ported from docs/design/styles.css (.footer__grid / .footer__logo /
   .footer h4 / ul / a / .footer__bottom), mapped onto theme.json tokens. The
   dark background + on-dark text come from the footer group's theme.json colors;
   on-dark hairlines use the --wp--custom--line-on-dark token.
   ============================================================ */
.cm-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--wp--custom--line-on-dark);
}

.cm-footer__logo {
	height: 88px;
	width: auto;
	display: block;
}

.cm-footer__tag {
	opacity: 0.7;
	max-width: 38ch;
	margin: 24px 0 0;
	font-size: 14px;
	line-height: 1.55;
}

.cm-footer__col h4 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.55;
	margin: 0 0 14px;
	font-weight: 500;
}

.cm-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}

.cm-footer__col a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.cm-footer__col a:hover {
	color: var(--wp--preset--color--green);
	opacity: 1;
}

.cm-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.55;
	flex-wrap: wrap;
	gap: 12px;
}

/* The Privacy link in the legal bar — inherits the muted mono treatment, with a
   green accent on hover (the link URL is resolved per-language in footer.php). */
.cm-footer__bottom a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cm-footer__bottom a:hover {
	color: var(--wp--preset--color--green);
}

@media (max-width: 767.98px) {

	.cm-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 575.98px) {

	.cm-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Accessible focus — a visible :focus-visible ring on every
   custom/styled interactive control (carousel dots/arrows,
   language pill, nav links) per WCAG 2.4.7. :focus-visible so
   the ring shows for keyboard users without flashing on click.
   ============================================================ */
.cm-hero__dots button:focus-visible,
.cm-projects__dots button:focus-visible,
.cm-hero__arrows button:focus-visible,
.cm-projects__arrows button:focus-visible {
	outline: 2px solid var(--wp--preset--color--on-dark);
	outline-offset: 3px;
}

.cm-langswitch a:focus-visible,
.cm-header__nav a:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 3px;
	border-radius: 2px;
}