/* Marjon Daanen-Kollen – aanvullende stijlen bovenop theme.json */

:root {
	--mdk-mint: var(--wp--preset--color--mint, #CFE8DE);
	--mdk-ink: var(--wp--preset--color--contrast, #1F2523);
	--mdk-groen: var(--wp--preset--color--accent, #7FBFA6);
	--mdk-groen-donker: var(--wp--preset--color--groen-donker, #2E6652);
	--mdk-grijs: var(--wp--preset--color--grijs, #5C6360);
	--mdk-lijn: var(--wp--preset--color--lijn, #E1E8E5);
	--mdk-gutter: clamp(20px, 5vw, 80px);
}

/* Geen witruimte tussen header, mint banden en inhoud */
.wp-site-blocks > * + *,
.mdk-main > * + * { margin-block-start: 0; }
.mdk-main .wp-block-post-content > .alignfull:first-child { margin-block-start: 0; }
.wp-block-post-content > .mdk-band:first-child { margin-top: 0; }

/* ---------- Header ---------- */
.mdk-header {
	background: var(--mdk-mint);
	padding: 22px var(--mdk-gutter);
}
.mdk-header__inner { max-width: 1200px; margin: 0 auto; gap: 16px; }
.mdk-logo-link { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.mdk-logo-link a { color: var(--mdk-ink); text-decoration: none; }
.mdk-header .wp-block-navigation { gap: 8px 28px; }
.mdk-header .wp-block-navigation-item__content { padding: 10px 0; }
.mdk-header .wp-block-navigation .current-menu-item > a,
.mdk-header .wp-block-navigation a[aria-current="page"] { border-bottom: 2px solid var(--mdk-ink); }
.mdk-header .mdk-nav-contact a { background: var(--mdk-ink); color: #fff !important; padding: 10px 20px !important; border-radius: 999px; }
.mdk-header .mdk-nav-contact a:hover { background: var(--mdk-groen-donker); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--mdk-mint) !important; }

/* ---------- Mint banden (hero's) ---------- */
.mdk-band {
	background: var(--mdk-mint);
	padding: clamp(8px, 2vw, 24px) var(--mdk-gutter) clamp(40px, 5vw, 64px);
}
.mdk-band--rond { border-bottom-right-radius: clamp(100px, 16vw, 240px); }
.mdk-band--groot { padding-bottom: clamp(56px, 7vw, 100px); border-bottom-right-radius: clamp(120px, 22vw, 340px); }
.mdk-band--kop { padding-bottom: 8px; }
.mdk-band--intro { padding-top: 0; }
.mdk-band, .mdk-sectie, .mdk-contact, .mdk-footer, .mdk-header {
	padding-left: max(var(--mdk-gutter), calc((100vw - 1200px) / 2)) !important;
	padding-right: max(var(--mdk-gutter), calc((100vw - 1200px) / 2)) !important;
}
.mdk-band > *, .mdk-sectie > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }

.mdk-eyebrow {
	margin: 0;
	font-size: 0.82rem !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mdk-groen-donker);
}
.mdk-eyebrow a { color: inherit; text-decoration: none; }
.mdk-lead { font-size: 1.2rem; line-height: 1.6; max-width: 680px; color: #2B3230; }
.mdk-terug { margin: 0; font-size: 0.95rem; font-weight: 700; }
.mdk-terug a { color: var(--mdk-ink); }

/* Ronde portretfoto */
.mdk-portret img {
	width: min(320px, 75vw) !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50% !important;
	border: 14px solid #fff;
	box-sizing: border-box;
}
.mdk-portret { display: flex; justify-content: center; }

/* ---------- Secties ---------- */
.mdk-sectie { padding: clamp(48px, 6vw, 72px) var(--mdk-gutter) 0; }
.mdk-sectiekop {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mdk-groen);
	margin-bottom: 24px !important;
}
.mdk-sectiekop-rij { border-bottom: 2px solid var(--mdk-groen); padding-bottom: 10px; margin-bottom: 24px; }
.mdk-sectiekop-rij .mdk-sectiekop { border: 0; padding: 0; margin: 0 !important; }
.mdk-sectiekop-rij p { margin: 0; font-weight: 700; }

/* Feiten (Klant / Mijn rol / Tools) */
.mdk-feiten > p { margin: 0; }
.mdk-feiten .mdk-label {
	padding-top: 14px;
	border-top: 1px solid var(--mdk-lijn);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mdk-grijs);
}
.mdk-feiten .mdk-label:first-child { border-top: 2px solid var(--mdk-groen); }
.mdk-feiten .mdk-label + p { margin: 4px 0 14px; font-size: 1.1rem; }
.mdk-feiten { border-bottom: 1px solid var(--mdk-lijn); }

/* ---------- Beelden ---------- */
.mdk-hero-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px !important; }
.mdk-grid-43 .wp-block-image img { aspect-ratio: 4 / 3; }
.mdk-grid-11 .wp-block-image img { aspect-ratio: 1; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 16px; }

/* Vrijstaande product- en verpakkingsfoto's: eigen verhouding, niet te hoog */
.wp-block-gallery.mdk-rij { justify-content: flex-start; }
.wp-block-gallery.has-nested-images.mdk-rij figure.wp-block-image:not(#individual-image) {
	width: auto !important;
	flex: 0 1 auto;
	max-width: 100%;
}
.wp-block-gallery.mdk-rij figure.wp-block-image img {
	width: auto !important;
	height: auto;
	max-height: 460px;
	max-width: 100%;
	border: 1px solid var(--mdk-lijn);
	box-sizing: border-box;
}
.mdk-logo img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; border: 1px solid var(--mdk-lijn); border-radius: 24px !important; background: #fff; }

/* ---------- Kaarten ---------- */
.is-style-kaart,
.mdk-kaart { background: var(--wp--preset--color--mint-zacht, #F3F9F6); border-radius: 24px; padding: 32px; }
.mdk-kaart h3, .is-style-kaart h3 { font-size: 1.6rem; }
.mdk-kaart p, .is-style-kaart p { color: #4A514E; margin: 0; }

/* Labels / chips */
.wp-block-list.is-style-chips,
ul.is-style-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.is-style-chips li { background: var(--wp--preset--color--mint-zacht, #F3F9F6); border: 1px solid var(--mdk-lijn); border-radius: 999px; padding: 6px 14px; font-size: 0.95rem; }

/* Werkervaring */
.mdk-baan { padding: 24px 0; border-top: 1px solid var(--mdk-lijn); }
.mdk-baan:first-of-type { border-top: 0; }
.mdk-baan h3 { font-size: 1.6rem; margin: 0; }
.mdk-baan .mdk-org { margin: 2px 0 8px; color: var(--mdk-grijs); font-weight: 600; }
.mdk-baan ul { margin: 0; padding-left: 1.2em; }
.mdk-datum { margin: 0; font-weight: 600; color: var(--mdk-groen-donker); }
.mdk-regel { padding: 10px 0; border-bottom: 1px solid var(--mdk-lijn); }
.mdk-regel p { margin: 0; }
.mdk-regel p:last-child { color: var(--mdk-grijs); }

/* Kort-lijst (Over mij) */
.mdk-kort > .wp-block-group { padding: 18px 0; border-bottom: 1px solid var(--mdk-lijn); }
.mdk-kort .mdk-label { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mdk-grijs); }
.mdk-kort .mdk-label + p { margin: 6px 0 0; font-size: 1.15rem; }

/* ---------- Contactblok ---------- */
.mdk-contact { padding: clamp(56px, 7vw, 96px) var(--mdk-gutter) 0; }
.mdk-contact__box {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--mdk-mint);
	border-radius: clamp(64px, 10vw, 160px) 28px 28px 28px;
	padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px);
}
.mdk-contact__box h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin: 0; }

/* ---------- Footer ---------- */
.mdk-footer { padding: 36px var(--mdk-gutter) 44px; font-size: 0.95rem; color: var(--mdk-grijs); }
.mdk-footer > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.mdk-footer p { margin: 0; }
.mdk-footer a { color: var(--mdk-grijs); }
.mdk-footer .wp-block-navigation { text-transform: none; letter-spacing: 0; font-weight: 400; gap: 8px 24px; }
.mdk-footer .wp-block-navigation a { color: var(--mdk-grijs); text-decoration: underline; }

/* ---------- Portfolio ---------- */
.mdk-filters { gap: 10px; margin-bottom: 32px; }
.mdk-filters .wp-block-button__link {
	background: #fff;
	color: var(--mdk-ink);
	border: 1.5px solid var(--mdk-ink);
	padding: 9px 20px;
	min-height: 44px;
	box-sizing: border-box;
}
.mdk-filters .wp-block-button__link[aria-pressed="true"],
.mdk-filters .wp-block-button__link:hover { background: var(--mdk-ink); color: #fff; }
.mdk-kaarten .wp-block-post { display: flex; flex-direction: column; gap: 10px; }
.mdk-kaarten .wp-block-post[hidden] { display: none; }
.mdk-kaarten .wp-block-post-featured-image { margin: 0; }
.mdk-kaarten .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; }
.mdk-kaarten .wp-block-post-title { font-size: 1.5rem; margin: 4px 0 0; }
.mdk-kaarten .wp-block-post-title a { text-decoration: none; color: var(--mdk-ink); }
.mdk-kaarten .wp-block-post-excerpt { margin: 0; }
.mdk-kaarten .wp-block-post-excerpt__excerpt { margin: 0; color: var(--mdk-grijs); font-size: 0.98rem; }
.mdk-kaarten .wp-block-post-terms { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mdk-groen-donker); margin: 0; }
.mdk-kaarten .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* Projectnavigatie */
.mdk-projectnav { border-top: 2px solid var(--mdk-groen); border-bottom: 1px solid var(--mdk-lijn); padding: 20px 0; gap: 16px; }
.mdk-projectnav .post-navigation-link-previous,
.mdk-projectnav .post-navigation-link-next { font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; }
.mdk-projectnav a { color: var(--mdk-ink); text-decoration: none; }
.mdk-projectnav a:hover { text-decoration: underline; }

/* ---------- Browservenster (website-screenshots) ---------- */
.mdk-browser-set { background: var(--wp--preset--color--thee, #2B3A30); border-radius: 24px; padding: clamp(20px, 4vw, 48px); }
.mdk-browser-set figcaption, .mdk-browser-set p { color: #fff; }
.mdk-browser { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.35); gap: 0 !important; }
.mdk-browser > * { margin: 0 !important; }
.mdk-browser__balk {
	position: relative;
	padding: 8px 14px 8px 70px !important;
	background: #EEF1EF;
	border-bottom: 1px solid #DDE3E0;
	font-size: 0.8rem !important;
	color: var(--mdk-grijs) !important;
}
.mdk-browser__balk::before {
	content: "";
	position: absolute; left: 14px; top: 50%;
	width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
	background: #E0645C;
	box-shadow: 16px 0 0 #E5B94E, 32px 0 0 #67B865;
}
.mdk-browser .wp-block-image { height: clamp(420px, 56vw, 680px); overflow-y: auto; margin: 0; }
.mdk-browser .wp-block-image img { border-radius: 0 !important; width: 100%; display: block; }

/* ---------- Voor/na-vergelijker ---------- */
.mdk-vergelijker { position: relative; }
.mdk-vergelijker.is-actief > .wp-block-image,
.mdk-vergelijker.is-actief > .mdk-vergelijker__label { display: none; }
.mdk-cmp {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: #F3F3F1;
	user-select: none;
	touch-action: pan-y;
}
.mdk-cmp img { display: block; width: 100%; height: auto; border-radius: 0 !important; }
.mdk-cmp__na { position: absolute; inset: 0; }
.mdk-cmp__na img { width: 100%; height: 100%; object-fit: cover; }
.mdk-cmp__lijn { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.mdk-cmp__knop {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 48px; height: 48px; border-radius: 50%; background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	display: flex; align-items: center; justify-content: center;
}
.mdk-cmp__badge {
	position: absolute; top: 16px; padding: 7px 12px; border-radius: 999px;
	font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none;
}
.mdk-cmp__badge--links { left: 16px; background: var(--mdk-ink); color: #fff; }
.mdk-cmp__badge--rechts { right: 16px; background: #fff; color: var(--mdk-ink); }
.mdk-cmp__range {
	-webkit-appearance: none; appearance: none;
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
	background: transparent; cursor: ew-resize; opacity: 0;
}
.mdk-cmp__range:focus-visible { opacity: 1; outline: 3px solid var(--mdk-ink); outline-offset: 4px; }
.mdk-cmp-hint { margin: 12px 0 0; text-align: center; font-size: 0.95rem; color: var(--mdk-grijs); }
.mdk-cmp-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mdk-cmp-tabs button {
	font: inherit; font-size: 0.95rem; font-weight: 600;
	padding: 9px 20px; min-height: 44px; border-radius: 999px; cursor: pointer;
	border: 1.5px solid var(--mdk-ink); background: #fff; color: var(--mdk-ink);
}
.mdk-cmp-tabs button[aria-pressed="true"] { background: var(--mdk-ink); color: #fff; }

/* In de editor de twee beelden naast elkaar tonen */
.editor-styles-wrapper .mdk-vergelijker { border: 2px dashed var(--mdk-groen); border-radius: 16px; padding: 12px; }

@media (max-width: 781px) {
	.mdk-header .mdk-nav-contact a { display: inline-block; }
	.mdk-band--rond, .mdk-band--groot { border-bottom-right-radius: 90px; }
}

.mdk-h-klein { font-size: clamp(1.6rem, 2.4vw, 1.9rem) !important; }
.mdk-kaart h3 { font-size: 1.5rem !important; }
.mdk-sectie .wp-block-columns { gap: 40px 80px; }

/* Bijschriften onder de foto's in galerijen (niet eroverheen) */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: none;
	color: var(--mdk-grijs);
	text-shadow: none;
	padding: 8px 2px 0;
	max-height: none;
	overflow: visible;
	text-align: left;
	font-size: 0.95rem;
	margin: 0;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption strong { color: var(--mdk-ink); font-weight: 600; }
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-direction: column; justify-content: flex-start; }
.mdk-figuren.wp-block-gallery { align-items: flex-start; }
.wp-block-image figcaption strong { color: var(--mdk-ink); font-weight: 600; }
.mdk-browser-set a { color: var(--mdk-mint); }
.mdk-browser-set > * + * { margin-top: 14px; }
h3.mdk-h-klein { font-size: 1.5rem !important; }
.mdk-sectie > .wp-block-image + .wp-block-image,
.mdk-sectie > * + .mdk-browser-set,
.mdk-sectie > .mdk-browser-set + * { margin-top: clamp(32px, 4vw, 56px) !important; }
.wp-block-group.mdk-grid-fit.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }