/*
Theme Name: Next Montage
Theme URI: https://nextmontage.nl
Author: Next Montage
Description: Licht blokthema voor Next Montage – warmtepompen, airco, vloerverwarming en onderhoud in regio Arnhem–Nijmegen.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: next-montage
*/

/* ---------- Basis ---------- */
:root {
	--nm-ink: #0E1C2B;
	--nm-ink-2: #1B2E42;
	--nm-ground: #F4F3EE;
	--nm-line: #E2E0D8;
	--nm-body: #3C4A59;
	--nm-muted: #51606F;
	--nm-mint: #4FD98A;
	--nm-mint-deep: #177A49;
	--nm-mint-tint: #E6F8EE;
	--nm-blue: #1D6FD1;
	--nm-sky: #EAF2FC;
	--nm-radius-card: 22px;
	--nm-radius-section: 32px;
}

body {
	-webkit-font-smoothing: antialiased;
}

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

:where(.wp-site-blocks) :focus-visible {
	outline: 3px solid var(--nm-blue);
	outline-offset: 2px;
}

/* ---------- Achtergronden ---------- */
.nm-bg-ink {
	background: var(--nm-ink);
	color: #fff;
}

.nm-bg-white {
	background: #fff;
}

.nm-bg-blue {
	background: var(--nm-blue);
	color: #fff;
}

.nm-bg-ink {
	color: #D5DDE5;
}

.nm-bg-blue {
	color: #E3EEFB;
}

.nm-bg-ink .nm-card:not(.nm-card--dark),
.nm-bg-blue .nm-card:not(.nm-card--dark) {
	color: var(--nm-ink);
}

.nm-bg-ink h1,
.nm-bg-ink h2,
.nm-bg-ink h3,
.nm-bg-blue h2 {
	color: #fff;
}

.nm-bg-blue a:not(.wp-block-button__link) {
	color: #fff;
	font-weight: 700;
}

.wp-site-blocks > footer {
	margin-top: clamp(64px, 9vw, 120px);
}

/* ---------- Secties ---------- */
.nm-section {
	padding-top: clamp(64px, 9vw, 120px);
	padding-bottom: 0;
}

.nm-section--last {
	padding-bottom: clamp(64px, 9vw, 120px);
}

.nm-section--hero {
	padding-top: clamp(32px, 5vw, 64px);
}

.nm-cols-wide {
	gap: clamp(32px, 5vw, 64px) !important;
}

.nm-center {
	text-align: center;
}

.nm-breadcrumb {
	font-size: 14px;
	color: var(--nm-muted);
	margin: 0 0 clamp(20px, 3vw, 36px);
}

.nm-breadcrumb a {
	color: var(--nm-muted);
}

.nm-panel {
	border-radius: var(--nm-radius-section);
	padding: clamp(28px, 5vw, 72px) !important;
}

/* ---------- Typografie-hulpjes ---------- */
.nm-eyebrow {
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nm-mint-deep);
	margin: 0;
}

.nm-eyebrow--light {
	color: var(--nm-mint);
}

.nm-lead {
	font-size: var(--wp--preset--font-size--large);
	color: var(--nm-body);
	line-height: 1.55;
	max-width: 34em;
}

.nm-muted {
	color: var(--nm-muted);
}

.nm-small {
	font-size: 13px;
	color: var(--nm-muted);
}

.nm-card-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.nm-more a {
	font-weight: 700;
}

.nm-more a::after {
	content: " →";
}

/* ---------- Kaarten ---------- */
.nm-card {
	background: #fff;
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-radius-card);
	padding: clamp(22px, 3vw, 32px);
}

.nm-card--flat {
	background: var(--nm-ground);
	border: 0;
}

.nm-card--dark {
	background: var(--nm-ink);
	border: 0;
}

.nm-card--dark {
	color: #D5DDE5;
}

.nm-card--dark h2,
.nm-card--dark h3 {
	color: #fff;
}

.nm-card > *:first-child {
	margin-top: 0;
}

.nm-card > *:last-child {
	margin-bottom: 0;
}

.nm-tag {
	display: inline-block;
	align-self: flex-start;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1.2;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--nm-mint-tint);
	color: var(--nm-mint-deep);
	margin: 0;
}

.nm-card--dark .nm-tag {
	background: var(--nm-ink-2);
	color: var(--nm-mint);
}

/* Dienstkaarten met foto */
.nm-service {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.nm-service .wp-block-image {
	margin: 0;
}

.nm-service .wp-block-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.nm-service__body {
	padding: 24px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.nm-service__body .nm-more {
	margin-top: auto;
	padding-top: 8px;
}

.nm-card--dark .nm-more a,
.nm-card--dark a {
	color: var(--nm-mint);
}

/* ---------- Knoppen ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--nm-ink);
	border: 1.5px solid currentColor;
	padding: 14.5px 22px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--nm-ink);
	color: #fff;
}

.nm-btn-dark > .wp-block-button__link {
	background: var(--nm-ink);
	color: #fff;
}

.nm-btn-dark > .wp-block-button__link:hover {
	background: var(--nm-ink-2);
	color: #fff;
}

.nm-btn-white > .wp-block-button__link {
	background: #fff;
	color: var(--nm-ink);
}

.nm-on-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
}

.nm-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #fff;
	color: var(--nm-ink);
}

.nm-chips .wp-block-button__link {
	border-radius: 999px;
	background: #fff;
	color: var(--nm-ink);
	border: 1.5px solid #D5D2C8;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 14px;
	min-height: 44px;
	box-sizing: border-box;
}

.nm-chips .wp-block-button__link:hover {
	background: var(--nm-mint-tint);
	border-color: var(--nm-mint-deep);
}

/* ---------- Lijsten ---------- */
.nm-checks {
	list-style: none;
	padding: 0 !important;
	margin-bottom: 0;
	display: grid;
	gap: 10px;
}

.nm-checks li {
	padding-left: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23177A49' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat left 0.2em / 18px 18px;
}

.nm-checks--light li {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD98A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

.nm-checks--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
	color: var(--nm-muted);
}

.nm-pills {
	list-style: none;
	padding: 0 !important;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nm-pills li {
	background: var(--nm-ground);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
}

/* ---------- Hero ---------- */
.nm-hero-media {
	position: relative;
}

.nm-hero-media .wp-block-image {
	margin: 0;
}

.nm-hero-media .wp-block-image img {
	width: 100%;
	height: clamp(300px, 40vw, 580px);
	object-fit: cover;
	object-position: 70% 40%;
	border-radius: 28px;
	display: block;
}

.nm-float-card {
	position: relative;
	margin: -96px 20px 0 !important;
	box-shadow: 0 18px 40px -24px rgba(14, 28, 43, 0.35);
}

.nm-quickstart {
	box-shadow: 0 18px 40px -24px rgba(14, 28, 43, 0.35);
}

/* ---------- Iconen ---------- */
.nm-icon {
	line-height: 0;
	margin: 0;
}

.nm-icon svg {
	width: 28px;
	height: 28px;
}

.nm-icon-tile {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--nm-ink);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

/* ---------- Vertrouwensbalk ---------- */
.nm-trust {
	background: #fff;
	border: 1px solid var(--nm-line);
	border-radius: 20px;
	overflow: hidden;
}

.nm-trust > .wp-block-group {
	padding: 24px 26px;
	border-right: 1px solid #ECEAE3;
}

.nm-trust > .wp-block-group:last-child {
	border-right: 0;
}

.nm-trust p {
	margin: 0;
}

.nm-trust strong {
	display: block;
	color: var(--nm-ink);
}

/* ---------- Merken ---------- */
.nm-brands {
	border-top: 1px solid var(--nm-line);
	border-bottom: 1px solid var(--nm-line);
	padding: 24px 0;
}

.nm-brand {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
	color: #6B7785;
	margin: 0;
}

/* ---------- Stappen ---------- */
.nm-step-num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--nm-ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 22px;
	display: grid;
	place-items: center;
	margin: 0;
}

.nm-step-num--mint {
	background: var(--nm-mint);
	color: var(--nm-ink);
}

.nm-step-num--sm {
	width: 36px;
	height: 36px;
	font-size: 15px;
	background: var(--nm-ink-2);
	color: var(--nm-mint);
	flex-shrink: 0;
}

/* ---------- Foto-placeholder ---------- */
.nm-photo-placeholder {
	background: #E5E3DC;
	border-radius: 28px;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #6B7785;
	font-weight: 600;
	padding: 24px;
}

/* ---------- Subsidie ---------- */
.nm-calc-row {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ECEAE3;
	padding-bottom: 10px;
	margin: 10px 0 0 !important;
}

.nm-calc-total {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 32px;
	color: var(--nm-mint-deep);
	margin: 0;
}

/* ---------- FAQ ---------- */
.nm-faq {
	background: #fff;
	border: 1px solid var(--nm-line);
	border-radius: 16px;
	overflow: hidden;
}

.nm-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-weight: 700;
	font-size: 17px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 28px;
}

.nm-faq summary::-webkit-details-marker {
	display: none;
}

.nm-faq summary::after {
	content: "+";
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--nm-ground);
	display: grid;
	place-items: center;
	font-size: 20px;
	font-weight: 500;
}

.nm-faq[open] summary::after {
	content: "−";
	background: var(--nm-mint);
}

.nm-faq > :not(summary) {
	padding: 0 22px;
	margin: 0 !important;
	color: var(--nm-body);
}

.nm-faq[open] {
	padding-bottom: 20px;
}

/* ---------- Werkgebied-kaart ---------- */
.nm-map {
	background: var(--nm-sky);
	border-radius: 22px;
	overflow: hidden;
	line-height: 0;
}

.nm-map svg {
	width: 100%;
	height: auto;
}

/* ---------- Header ---------- */
.nm-topbar {
	font-size: 13px;
	color: #C9D3DD;
}

.nm-topbar a {
	color: #fff;
	font-weight: 600;
}

.nm-topbar p {
	margin: 0;
}

.nm-header {
	border-bottom: 1px solid var(--nm-line);
}

.nm-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--nm-ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.nm-logo:hover {
	color: var(--nm-ink);
}

.nm-nav {
	font-size: 15px;
	font-weight: 600;
}

.nm-nav a {
	color: var(--nm-ink);
}

.nm-nav .current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--nm-mint);
}

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

body.admin-bar header.wp-block-template-part {
	top: 32px;
}

/* ---------- Footer ---------- */
.nm-footer {
	padding-top: clamp(48px, 6vw, 72px);
	padding-bottom: 40px;
}

.nm-footer-list {
	list-style: none;
	padding: 0 !important;
	margin-bottom: 0;
	display: grid;
	gap: 10px;
}

.nm-topbar {
	padding-top: 9px;
	padding-bottom: 9px;
}

.nm-header {
	padding-top: 16px;
	padding-bottom: 16px;
}
.nm-footer {
	color: #C9D3DD;
	font-size: 15px;
}

.nm-footer a {
	color: #C9D3DD;
}

.nm-footer a:hover {
	color: #fff;
}

.nm-footer h3,
.nm-footer strong {
	color: #fff;
}

.nm-footer-bottom {
	border-top: 1px solid #22374D;
	padding-top: 24px;
	font-size: 13px;
	color: #9AA8B6;
}

/* ---------- Mobiele actiebalk ---------- */
.nm-mobilebar {
	display: none;
}

/* ---------- Responsief ---------- */
@media (max-width: 781px) {
	.nm-topbar .nm-topbar__region {
		display: none;
	}

	.nm-header-cta {
		display: none !important;
	}

	.nm-trust > .wp-block-group {
		border-right: 0;
		border-bottom: 1px solid #ECEAE3;
	}

	.nm-trust > .wp-block-group:last-child {
		border-bottom: 0;
	}

	.nm-float-card {
		margin: -48px 12px 0 !important;
	}

	.nm-brands {
		justify-content: flex-start !important;
		gap: 12px 24px !important;
	}

	.nm-mobilebar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		background: #fff;
		border-top: 1px solid var(--nm-line);
		box-shadow: 0 -8px 24px -12px rgba(14, 28, 43, 0.25);
		padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
	}

	.nm-mobilebar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 52px;
		border-radius: 12px;
		background: var(--nm-ground);
		color: var(--nm-ink);
		font-size: 13px;
		font-weight: 700;
	}

	.nm-mobilebar a.nm-mobilebar__main {
		background: var(--nm-ink);
		color: #fff;
	}

	body {
		padding-bottom: 84px;
	}
}

@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* ---------- Genummerde stappen (lijst) ---------- */
.nm-steps-list {
	list-style: none;
	counter-reset: nm-step;
	padding: 0 !important;
	margin-bottom: 0;
	display: grid;
	gap: 14px;
}

.nm-steps-list li {
	counter-increment: nm-step;
	position: relative;
	padding-left: 44px;
	min-height: 28px;
}

.nm-steps-list li::before {
	content: counter(nm-step);
	position: absolute;
	left: 0;
	top: -1px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--nm-ink-2);
	color: var(--nm-mint);
	font-weight: 700;
	font-size: 14px;
	display: grid;
	place-items: center;
}

.nm-calc-row strong {
	color: var(--nm-ink);
}

.nm-stars {
	color: #C98A0B;
	letter-spacing: 2px;
	margin: 0;
}

.wp-block-column > .nm-faq + .nm-faq,
.nm-faq-list > .nm-faq + .nm-faq {
	margin-top: 12px;
}

.nm-center .nm-tag {
	align-self: center;
}

.nm-hero-media--dienst .wp-block-image img {
	height: clamp(260px, 32vw, 460px);
	object-position: center;
}

.nm-float-card p {
	margin: 0;
}