/**
 * Hand-written, zero-build CSS for the handful of things theme.json / block
 * supports can't express: the kenteken shortcode markup, the reviews
 * plugin's shortcode output, two button style variations, the nav CTA pill,
 * and native <details> tidy-up. Everything else is theme.json + core blocks.
 */

/* WP applies the theme's global blockGap (24px) as margin-block-start
   between every top-level child of .wp-site-blocks (header/main/footer),
   which shows up as a visible gap under the sticky header. Every section in
   this theme already carries its own explicit padding, so nothing relies on
   that inherited gap — neutralize it only at this outer level; blockGap
   inside individual patterns/groups (set explicitly per-block) is untouched. */
.wp-site-blocks > * {
	margin-block-start: 0;
}
/* Same issue one level deeper: every top-level section directly inside
   <main> (hero, stat strip, reviews, etc.) also gets that same 24px gap
   applied between it and the next section — visible as a sliver of the
   page's base background color wedged between differently-colored
   full-width sections (most noticeable right after the hero). These
   sections all carry their own top/bottom padding already, so the gap is
   never wanted here either. */
main.wp-block-group > * {
	margin-block-start: 0;
}
/* Same issue another level deeper still: on page.html, the page's sections
   render inside wp:post-content (.entry-content) rather than as direct
   children of <main> itself, so the rule above never reaches them — the
   same unwanted gap shows up between the hero and the next full-width
   section on any plain Page (werkwijze, werkgebied, over ons, ...). */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}
/* ---- Grid: force auto-fit instead of WP's default auto-fill ------------- */
/* WP's native grid layout (minimumColumnWidth) always generates
   `repeat(auto-fill, minmax(...))`. auto-fill reserves empty invisible
   tracks whenever the container is wide enough for more columns than there
   are actual items, leaving real content squished to one side instead of
   spanning the full width. All other grids get an inline style override
   (wins by specificity automatically); wp:post-template is a dynamic core
   block with no static markup to attach an inline style to, so it's forced
   here instead — this is the only post-template grid in the theme
   (blog index, minimumColumnWidth 260px). */
.wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
}

/* ---- Heading font-size fallback (WP core bug workaround) ----------------- */
/* WordPress silently fails to generate the --wp--preset--font-size--kop1/2/3
   CSS custom properties from theme.json (confirmed via direct testing:
   renaming the slugs, reordering the array, and changing the values all had
   no effect — the bug is inside wp_get_typography_font_size_value()'s call
   site in class-wp-theme-json.php, not anything specific to this theme's
   data, since the same function returns correct values when called directly
   in isolation with identical arguments). Without the variable, `font-size:
   var(--undefined)` with no fallback is invalid at computed-value time, so
   h1/h2/h3 silently inherit their parent's font-size instead of using the
   sizes defined in theme.json. These rules restore the intended sizes
   directly — the exact same clamp() values WP should have generated. */
h3 {
	font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.682), 1.25rem);
}
h2 {
	font-size: clamp(1.625rem, 1.625rem + ((1vw - 0.2rem) * 0.909), 2.125rem);
}
h1 {
	font-size: clamp(2rem, 2rem + ((1vw - 0.2rem) * 1.136), 2.625rem);
}

/* ---- Active nav item underline (header only) ---------------------------- */
header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal-700);
	position: relative;
}
header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	background: var(--wp--preset--color--teal-700);
}
header .wp-block-navigation-item.sav-nav-cta.current-menu-item > .wp-block-navigation-item__content::after {
	display: none;
}
header .wp-block-navigation-item.sav-nav-cta.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--surface);
}

/* ---- Nav CTA pill ------------------------------------------------------ */
header .wp-block-navigation .sav-nav-cta > .wp-block-navigation-item__content.wp-block-navigation-item__content,
header .wp-block-navigation .sav-nav-cta.current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	background: var(--wp--preset--color--red-600);
	color: var(--wp--preset--color--surface);
	border-radius: 6px;
	padding: 10px 18px !important;
	font-weight: 700;
}
header .wp-block-navigation .sav-nav-cta > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--red-700);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* ---- Button style variations ------------------------------------------- */
.wp-block-button.is-style-sav-outline .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--teal-700);
	border: 1px solid var(--wp--preset--color--line-2);
}
.wp-block-button.is-style-sav-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--teal-700);
	background: var(--wp--preset--color--teal-100);
}
.wp-block-button.is-style-sav-cta .wp-block-button__link {
	background: var(--wp--preset--color--red-600);
	color: var(--wp--preset--color--surface);
}
.wp-block-button.is-style-sav-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--red-700);
}

/* ---- Werkgebied city-links grid: compact chip sizing -------------------- */
/* steden-raster.php renders all 24 SEO/city pages as buttons — a dense grid
   reads better as small tags than as full-size CTA buttons, so this trims
   below the site-wide button default. */
.wp-block-button.sav-city-card {
	height: 100%;
	box-sizing: border-box;
}
.wp-block-button.sav-city-card .wp-block-button__link {
	display: flex;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-button.sav-city-card .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--teal-700);
	background: var(--wp--preset--color--teal-100);
}

/* ---- Footer city chips -------------------------------------------------- */
/* Colour is intentionally not set here — the chip inherits text color from
   whichever section wraps it (teal-300 in the dark footer, default link
   color when reused on a light "steden in de buurt" section). */
.sav-chip {
	margin: 0 !important;
}
.sav-chip a {
	font-size: 14px;
	color: inherit;
	text-decoration: none;
}
.sav-chip a:hover {
	text-decoration: underline;
}

/* ---- Kenteken teaser form (inc/kenteken-shortcode.php) ------------------ */
.sav-kenteken {
	display: grid;
	gap: var(--wp--preset--spacing--40, 16px);
}
.sav-kenteken__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-2);
}
/* Styled as an actual NL plate, matching the kenteken field in the full
   multistep-carform webform (.mc-form-group-kenteken input#kenteken) —
   same EU/NL band asset, yellow plate background, bold centered text. The
   separate "NL" span is kept in the markup for accessibility/semantics but
   hidden here since the band image already shows it. */
.sav-kenteken__bar {
	display: flex;
	overflow: hidden;
	min-height: 60px;
	border-radius: 6px;
	background: #f7b918 url('../images/kenteken-nl-band.png') no-repeat left center;
	background-size: auto 100%;
}
.sav-kenteken__bar:focus-within {
	box-shadow: 0 0 0 3px var(--wp--preset--color--teal-100);
}
.sav-kenteken__nl {
	display: none;
}
.sav-kenteken__input {
	flex: 1;
	border: 0;
	margin-left: 38px;
	padding: 0 14px 0 0;
	min-width: 0;
	font-weight: 700;
	font-size: 24px;
	text-align: center;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.65);
	background: transparent;
}
.sav-kenteken__input::placeholder {
	color: rgba(0, 0, 0, 0.35);
}
.sav-kenteken__input:focus {
	outline: none;
}
.sav-kenteken__submit {
	min-height: 54px;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	background: var(--wp--preset--color--teal-700);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	width: 100%;
}
.sav-kenteken__submit:hover {
	background: var(--wp--preset--color--teal-900);
}
.sav-kenteken__note {
	margin: 0;
	text-align: center;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

/* ---- Reviews (sloopauto-reviews plugin shortcode output) ---------------- */
/* Background/border color now come from the native backgroundColor/
   borderColor block attributes (has-surface-background-color,
   has-line-border-color) instead of this custom class, matching the
   step-card technique that's confirmed to render correctly in the editor
   (var(--wp--preset--color--*) in a hand-written stylesheet is not
   reliably available inside the editor's iframe). Border-width is
   intentionally left unset, same as the step cards, relying on the
   browser's default width once has-border-color sets border-style. */
.sav-review-card {
	border-radius: 14px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
}
.sav-review-stars {
	display: flex;
	gap: 2px;
}
.sav-review-body {
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-2);
	margin: 0;
	flex: 1;
}
.sav-review-name {
	font-size: 14px;
	font-weight: 600;
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 12px;
	margin-top: 4px;
}
.sav-review-date {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}
.sav-rating-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--teal-700);
}
.sav-rating-stars {
	flex: 0 0 auto;
	white-space: nowrap;
	line-height: 1.6;
	padding-top: 3px;
}
.sav-rating-text {
	font-size: 15px;
	color: var(--wp--preset--color--teal-300);
	line-height: 1.6;
	max-width: 420px;
}
.sav-rating-text strong {
	color: var(--wp--preset--color--surface);
	font-weight: 700;
}
.sav-rating-text a {
	color: inherit;
	text-decoration: underline;
}
.sav-star {
	display: inline-block;
	vertical-align: text-bottom;
}

/* Hero benefit checklist (teal-900 background) */
/* No margin override here: the block-gap margin WP applies between this
   list and the paragraph above it (via .is-layout-flow > *) needs to stay,
   otherwise the list sits flush against the preceding text. */
.sav-hero-checks {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 12px;
}
.sav-hero-checks li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.sav-hero-checks__icon {
	flex: 0 0 auto;
}

/* ---- FAQ (native <details>, no JS) --------------------------------------- */
.sav-faq details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 20px 24px;
}
.sav-faq summary {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	list-style: none;
}
.sav-faq summary::-webkit-details-marker {
	display: none;
}

.sav-faq details + details {
	margin-top: 12px;
}

/* ---- Sticky sidebar (city page, article page) ---------------------------- */
/* Native grid layout stretches row items to equal height by default, which
   leaves the sidebar no room to actually stick while scrolling. Scoped to
   grids with a sticky child so other grids (equal-height cards, etc.) keep
   the default stretch behavior. */
.is-layout-grid:has( > .sav-sticky ) {
	align-items: start;
}
.sav-sticky {
	position: sticky;
	top: 98px;
}

/* ---- Wijk / district cards (plaats term meta) ---------------------------- */
.sav-wijk-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 20px;
}

/* ---- Blog cards ---------------------------------------------------------- */
.sav-post-card { height: 100%; }
.sav-post-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.sav-post-card .wp-block-post-terms { font-size: 0; }
.sav-post-card .wp-block-post-terms a:first-of-type { font-size: 11px; }
.sav-post-card .wp-block-post-terms a:not(:first-of-type) { display: none; }
.sav-post-card .wp-block-post-featured-image { margin: 0; }
.sav-post-card .wp-block-post-featured-image img { width: 100%; }
.sav-post-card__excerpt { display: none; }
.sav-reading-time { margin: 0; font-size: 14px; color: var(--wp--preset--color--muted); }

/* Latest post on page 1 spans the grid as a wide horizontal card. */
body:not(.paged) .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	background-color: var(--wp--preset--color--bg) !important;
	padding: 28px;
	gap: 40px;
}
body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card .wp-block-post-featured-image { border-radius: 10px; overflow: hidden; }
body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card__body { padding: 0 !important; }
body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card__body::before {
	content: 'Uitgelicht';
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-700);
}
body:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-terms { display: none; }
body:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-title { font-size: 32px !important; margin: 12px 0 !important; }
body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card__excerpt { display: block; margin: 0 0 14px; color: var(--wp--preset--color--ink-2); }
@media (max-width: 720px) {
	body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card { grid-template-columns: 1fr; }
}

/* ---- Single post layout --------------------------------------------------- */
/* align-items:start lets the sidebar stay sticky instead of stretching to the row height. */
.sav-article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
@media (max-width: 800px) {
	.sav-article-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sav-sticky { position: static; }
}
.sav-article-grid .wp-block-post-title { font-size: clamp(28px, 4vw, 42px); }
.sav-first-term { font-size: 0; }
.sav-first-term a:first-of-type { font-size: 12px; }
.sav-first-term a:not(:first-of-type) { display: none; }
.sav-more-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sav-more-posts li { margin: 0; }
.sav-more-posts a { font-size: 15px; line-height: 1.4; }
.sav-article-grid .wp-block-post-featured-image { margin-top: 0; }
.sav-article-grid > * { margin-block-start: 0; }

.sav-first-term .wp-block-post-terms__separator,
.sav-post-card .wp-block-post-terms__separator { display: none; }

/* Article body typography */
.single .wp-block-post-content > * + * { margin-block-start: 1.25em; }
.single .wp-block-post-content h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.25; margin-block-start: 2em; margin-block-end: 0.5em; }
.single .wp-block-post-content h3 { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.3; margin-block-start: 1.6em; margin-block-end: 0.4em; }
.single .wp-block-post-content h2 + *, .single .wp-block-post-content h3 + * { margin-block-start: 0; }
.single .wp-block-post-content p { margin-block-end: 0; }
.single .wp-block-post-content ul, .single .wp-block-post-content ol { padding-left: 1.4em; }
.single .wp-block-post-content img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---- Footer ---------------------------------------------------------------- */
.sav-footer h4 { margin: 0 0 14px; }
.sav-footer .wp-block-navigation,
.sav-footer .wp-block-navigation .wp-block-navigation__container { gap: 8px; }
.sav-footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.sav-footer .wp-block-latest-posts a,
.sav-footer .sav-chip a { color: var(--wp--preset--color--teal-100); }
.sav-footer .wp-block-latest-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sav-footer .wp-block-latest-posts li { margin: 0; font-size: 15px; line-height: 1.5; }
.sav-footer .sav-steden-chips { column-gap: 14px; row-gap: 8px; }
.sav-footer .sav-chip a { font-size: 15px; }
.sav-footer .sav-footer-legal a,
.sav-footer .sav-footer-legal + *,
.sav-footer > .alignwide:last-child > p,
.sav-footer > .alignwide:last-child > p a { color: var(--wp--preset--color--line-2); }
.sav-footer > .alignwide:last-child p { margin: 0; }

.sav-post-card { display: flex; flex-direction: column; }
.sav-post-card:not(:has(.wp-block-post-featured-image))::before {
	content: '';
	display: block;
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: repeating-linear-gradient(135deg, #f4f4f5 0 10px, #ebebed 10px 20px);
}
body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card { display: grid; }
body:not(.paged) .wp-block-post-template > li:first-child .sav-post-card:not(:has(.wp-block-post-featured-image))::before { border: 0; border-radius: 10px; }
body:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-title { max-width: 20ch; }

/* Blog card hover: teal border instead of an underlined title. */
.sav-post-card { transition: border-color 0.15s ease; }
.sav-post-card:hover { border-color: var(--wp--preset--color--teal-700) !important; }
.sav-post-card a,
.sav-post-card a:hover { text-decoration: none; }

/* multistep-carform: its progress bar uses negative z-indexes, which disappear behind the page background unless the form gets its own stacking context. */
#multistep-carform-container { isolation: isolate; }

/* Check-mark list (city page "dit halen wij op") */
.sav-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sav-check-list li { position: relative; margin: 0; padding-left: 34px; line-height: 1.5; }
.sav-check-list li::before {
	content: '\2713';
	position: absolute; left: 0; top: -1px;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--wp--preset--color--teal-100);
	color: var(--wp--preset--color--teal-700);
	font-size: 12px; font-weight: 700;
	display: grid; place-items: center;
}

.sav-step-num { flex: 0 0 52px; }

.sav-faq--tint details { background: var(--wp--preset--color--bg); }

/* Nearby-place pills (city page) */
/* .sav-pills normally gets its flex-wrap layout for free from the block
   editor's generated layout styles; this explicit rule just codifies that
   for clarity, with no behavior change for the one existing usage. */
.sav-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sav-pill { margin: 0 !important; }
.sav-pill a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}
.sav-pill a:hover { border-color: var(--wp--preset--color--teal-700); background: var(--wp--preset--color--surface); text-decoration: none; }

/* [getlinks] bookmarks list (/links page) — plain vertical bullet list */
.sav-links-list {
	margin: 0;
	padding-left: 20px;
	display: grid;
	gap: 8px;
}
.sav-links-list a {
	color: var(--wp--preset--color--teal-700);
}

/* Cropped/clipped image wrapper (validation-safe: overflow/aspect-ratio live
   here via a plain className, never as inline styles on a block whose
   "supports" doesn't declare them — that mismatch is what triggers
   WordPress's "unexpected or invalid content" warning on stored pages). */
.sav-crop { overflow: hidden; }
.sav-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sav-crop--tall { aspect-ratio: 4 / 5; }
.sav-crop--wide { aspect-ratio: 16 / 11; }
.sav-crop--photo {
	margin-top: 28px;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
}