/**
 * Globale stijlen van het thema (frontend + editor via add_editor_style).
 * Alle kleuren, fonts en maten komen uit theme.json.
 */

/* ───────────── Basis ───────────── */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	overflow-x: clip;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

input[type="range"] {
	accent-color: var(--wp--preset--color--primary);
}

.screen-reader-text:focus {
	z-index: 100000;
}

/* Container: max 1360px + zijpadding (= wideSize + root padding). */
.pms-container {
	box-sizing: content-box;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
}

/* ───────────── Header ───────────── */

.pms-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 97%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--custom--line--default);
}

/* De megamenu- en mobiele panelen positioneren t.o.v. de volle breedte van de header. */
.pms-header {
	position: relative;
}

.pms-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	box-sizing: content-box;
	max-width: var(--wp--custom--container--max);
	height: var(--wp--custom--header--height-mobile);
	margin: 0 auto;
	padding: 0 var(--wp--custom--container--gutter);
}

.pms-header__inner > * {
	margin-block: 0;
}

.pms-header__inner > .pms-brand {
	justify-self: start;
}

.pms-header__actions {
	justify-self: end;
	gap: 12px;
}

.pms-header__cta {
	display: none;
}

.pms-header__cta .wp-block-button__link {
	padding: 11px 18px;
	font-size: var(--wp--preset--font-size--x-small);
	white-space: nowrap;
}

@media (min-width: 640px) {
	.pms-header__cta {
		display: flex;
	}
}

@media (min-width: 1100px) {
	.pms-header__inner {
		grid-template-columns: 1fr auto 1fr;
		height: var(--wp--custom--header--height);
	}
}

/* ───────────── Footer ───────────── */

.pms-site-footer {
	background: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--footer-text);
}

.pms-footer {
	box-sizing: content-box;
	max-width: var(--wp--custom--container--max);
	margin: 0 auto;
	padding: clamp(80px, 9vw, 120px) var(--wp--custom--container--gutter) 32px;
}

.pms-footer > * {
	margin-block: 0;
}

.pms-footer h2 {
	color: var(--wp--preset--color--base);
}

.pms-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

.pms-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent);
}

.pms-footer__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 32px 48px;
	padding-bottom: clamp(56px, 6vw, 80px);
	border-bottom: 1px solid var(--wp--custom--line--inverse);
}

.pms-footer__cta-text {
	max-width: 560px;
}

.pms-footer__cta-text > * {
	margin-block: 0;
}

.pms-footer__cta-text h2 {
	margin-bottom: 10px;
	line-height: 1.15;
	letter-spacing: -.025em;
}

.pms-footer__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.pms-footer__kicker::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.pms-footer__buttons {
	gap: 10px;
}

.pms-footer__buttons .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
}

.pms-footer__buttons .is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--footer);
	font-weight: 700;
}

.pms-footer__buttons .is-style-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--footer);
}

.pms-footer__buttons .is-style-outline .wp-block-button__link {
	border-color: var(--wp--custom--line--inverse-strong);
	color: var(--wp--preset--color--base);
}

.pms-footer__buttons .is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.pms-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 44px;
	padding: clamp(56px, 6vw, 80px) 0 48px;
}

.pms-footer__columns > * {
	margin-block: 0;
}

.pms-footer__company {
	min-width: 260px;
}

.pms-footer__company .pms-brand {
	margin-bottom: 24px;
}

.pms-footer__address {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.pms-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 28px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--custom--line--inverse);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--footer-meta);
}

.pms-footer__bottom > * {
	margin-block: 0;
}

.pms-footer__bottom a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--footer-meta);
}

.pms-footer__bottom .pms-menu--footer-column .pms-menu__list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 22px;
	font-size: inherit;
}

.pms-footer__bottom .pms-menu--footer-column .pms-menu__link {
	color: var(--wp--preset--color--footer-meta);
}

.pms-footer__bottom .pms-menu--footer-column .pms-menu__link:hover {
	color: var(--wp--preset--color--base);
}

.pms-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
}

.pms-footer__legal > * {
	margin-block: 0;
}

/* ───────────── Tap targets ───────────── */

@media (pointer: coarse) {
	.pms-footer .pms-menu__link,
	.pms-footer__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ───────────── Blokstijlen ───────────── */

/* Paragraaf "Lead" */
.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}

/* Knop "Tekstlink": vette link met salie onderlijn. */
.wp-block-button.is-style-link .wp-block-button__link {
	padding: 0 0 4px;
	border-radius: 0;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	background: none;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
	background: none;
	color: var(--wp--preset--color--primary);
}

/* Inline kleur (H1-accenten) zonder achtergrond. */
mark.has-inline-color {
	background: none;
}

/* Tekstlink met salie onderlijn (in blokken; zelfde look als knopstijl "Tekstlink"). */
.pms-link {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--wp--custom--transition--color);
}

.pms-link:hover {
	color: var(--wp--preset--color--primary);
}

.pms-link--primary {
	padding-bottom: 3px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

/* ───────────── Realisatiekaart + swatch (gedeeld) ───────────── */

.pms-swatch {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: var(--wp--custom--radius--swatch);
	background: var(--pms-swatch, var(--wp--preset--color--accent));
}

.pms-card {
	display: block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.pms-card:hover {
	color: var(--wp--preset--color--contrast);
}

.pms-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--image);
}

.pms-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--image);
	background: var(--wp--preset--color--surface);
}

.pms-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s ease;
}

.pms-card:hover .pms-card__img {
	transform: scale(1.04);
}

.pms-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--custom--card--tag);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.pms-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-top: 16px;
}

.pms-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--card--title);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	color: inherit;
}

.pms-card__cat {
	flex: none;
	font-size: var(--wp--custom--card--meta);
	color: var(--wp--preset--color--label);
}

@media (prefers-reduced-motion: reduce) {
	.pms-card:hover .pms-card__img {
		transform: none;
	}
}

/* ───────────── Secties (patterns) ───────────── */

/* Sectie: core/group alignfull, layout constrained met contentSize = wideSize. */
.pms-section {
	padding-bottom: var(--wp--preset--spacing--70);
}

.pms-section--bordered > .pms-section__body.pms-section__body {
	padding-top: clamp(64px, 8vw, 110px);
	border-top: 1px solid var(--wp--custom--line--medium);
}

/* Kop van een sectie: H2 links, intro rechts (onderaan uitgelijnd). */
.pms-section-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	align-items: end;
	gap: 24px 80px;
	margin-bottom: clamp(48px, 5vw, 80px) !important;
}

.pms-section-head.pms-section-head > *,
.pms-section-head > .wp-block-group > * {
	margin-block: 0;
}

.pms-section-head > p {
	max-width: 440px;
	color: var(--wp--preset--color--muted);
}

/* Variant: kop links, link rechts. */
.pms-section-head--split {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 28px;
	margin-bottom: clamp(36px, 4vw, 56px) !important;
}

.pms-section-head--split > :first-child {
	max-width: 560px;
}

.pms-section-head--split.pms-section-head--split p {
	margin: 14px 0 0;
	color: var(--wp--preset--color--muted);
}

/* Twee kolommen (tekst + visual). */
.pms-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	align-items: center;
	gap: clamp(48px, 7vw, 120px);
}

.pms-split.pms-split > * {
	min-width: 0;
	margin-block: 0;
}

.pms-split__text {
	max-width: 520px;
}

.pms-split .pms-split__text > * {
	margin-block: 0;
}

.pms-split .pms-split__text > h2 {
	margin-bottom: 26px;
}

.pms-split .pms-split__text > p {
	margin-bottom: 18px;
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}

.pms-split .pms-split__text > p:last-of-type {
	margin-bottom: 34px;
}

.pms-split__text .wp-block-buttons {
	gap: 28px;
	align-items: center;
}

.pms-split__text .wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link {
	padding: 13px 22px;
}

.pms-split .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}