/*
Theme Name: NexusLeadsDigital
Theme URI: https://nexusleadsdigital.com
Author: NexusLeadsDigital
Description: Blokthema voor NexusLeadsDigital. Huisstijl navy #0b2756, groen #34b234 en lichtgrijs #f4f4f4. Lettertypes zelf gehost, geen externe diensten die in China geblokkeerd zijn.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary
Text Domain: nexusleads
*/

/* ---------- Basis ---------- */
html[lang^="zh"] body {
	font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", "Nunito Sans", sans-serif;
	line-height: 1.75;
}
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 {
	font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
	letter-spacing: 0;
}
img { max-width: 100%; height: auto; }

/* ---------- Secties ---------- */
.wp-site-blocks > *, .wp-block-post-content > *, main.wp-block-group { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.nl-section { padding-top: 96px; padding-bottom: 96px; }
.nl-section-sm { padding-top: 64px; padding-bottom: 64px; }
.nl-bg-navy { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.nl-bg-light { background: var(--wp--preset--color--light); }
.nl-bg-deep { background: var(--wp--preset--color--navy-deep); color: #b9c4d6; }
.nl-bg-navy h1, .nl-bg-navy h2, .nl-bg-navy h3 { color: var(--wp--preset--color--white); }
.nl-bg-navy a:not(.wp-element-button) { color: var(--wp--preset--color--white); }

.nl-kicker {
	font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--green-dark); margin-bottom: 8px !important;
}
html[lang^="zh"] .nl-kicker { letter-spacing: 0.04em; text-transform: none; }
.nl-bg-navy .nl-kicker { color: var(--wp--preset--color--green); }
.nl-lead { font-size: 18px; color: var(--wp--preset--color--ink-soft); }
.is-layout-constrained > .nl-lead { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; padding-right: clamp(0px, calc(100% - 720px), calc(var(--wp--style--global--content-size) - 720px)); }
.nl-bg-navy .nl-lead, .nl-on-dark { color: #dfe5ee; }
.nl-muted { color: var(--wp--preset--color--ink-soft); }
.nl-small { font-size: 14px; color: #b9c4d6; }

/* ---------- Header ---------- */
.nl-header { background: var(--wp--preset--color--navy); padding-top: 16px; padding-bottom: 16px; }
.nl-header .nl-logo img { height: 48px; width: auto; display: block; }
.nl-header .wp-block-navigation { color: #fff; font-size: 15px; font-weight: 600; gap: 28px; }
.nl-header .wp-block-navigation a { color: #fff; text-decoration: none; }
.nl-header .wp-block-navigation a:hover { color: var(--wp--preset--color--green); }
.nl-lang a { border: 1px solid rgba(255,255,255,0.5); border-radius: 6px; padding: 4px 10px; font-size: 14px; }
.nl-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy); color: #fff; }

/* ---------- Knoppen ---------- */
.wp-block-button.nl-btn-primary .wp-block-button__link {
	background: var(--wp--preset--color--green); color: var(--wp--preset--color--navy);
	font-weight: 700; border-radius: 8px; padding: 16px 28px; min-height: 44px;
}
.wp-block-button.nl-btn-primary .wp-block-button__link:hover { background: #2c9a2c; }
.wp-block-button.nl-btn-outline .wp-block-button__link {
	background: transparent; color: #fff; border: 1.5px solid #fff;
	font-weight: 700; border-radius: 8px; padding: 15px 26px; min-height: 44px;
}
.wp-block-button.nl-btn-navy .wp-block-button__link {
	background: var(--wp--preset--color--navy); color: #fff; font-weight: 700; border-radius: 8px; padding: 14px 22px;
}
.nl-header .wp-block-button.nl-btn-primary .wp-block-button__link { padding: 12px 20px; font-size: 15px; }

/* ---------- Hero ---------- */
.nl-hero { position: relative; overflow: hidden; padding-top: 96px; padding-bottom: 104px; }
.nl-hero > * { position: relative; z-index: 1; }
.nl-hero > .wp-block-html { position: absolute; inset: 0; margin: 0 !important; max-width: none !important; z-index: 0; pointer-events: none; }
.nl-hero .nl-hero-art { position: absolute; right: -70px; top: 40px; width: 470px; opacity: 0.9; }
.nl-hero > .nl-hero-text { max-width: var(--wp--style--global--content-size) !important; }
.nl-hero-text > * { max-width: 640px; }
.nl-hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.12; }
html[lang^="zh"] .nl-hero h1 { line-height: 1.3; font-size: clamp(32px, 4.4vw, 52px); }
.nl-hero .nl-lead { font-size: 20px; }
@media (max-width: 1280px) { .nl-hero .nl-hero-art { display: none; } }

/* ---------- Bewijsbalk ---------- */
.nl-stat-num { font-family: var(--wp--preset--font-family--heading); font-size: 40px; font-weight: 800; line-height: 1.1; margin: 0 !important; }
.nl-stat-label { font-size: 15px; color: var(--wp--preset--color--ink-soft); margin: 4px 0 0 !important; }

/* ---------- Kaarten ---------- */
.nl-card { background: #fff; border-radius: 12px; padding: 28px; }
.nl-card-border { border: 1px solid #dde2ea; border-radius: 12px; padding: 32px; }
.nl-card h3, .nl-card-border h3 { font-size: 20px; margin: 12px 0 8px; }
.nl-card p, .nl-card-border p { margin: 0; }
.nl-card .nl-more, .nl-more { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--green-dark); text-decoration: none; }
.nl-icon svg { display: block; }
.nl-grid { gap: 20px; }

/* ---------- Stappen ---------- */
.nl-step { border-top: 4px solid var(--wp--preset--color--navy); padding-top: 20px; }
.nl-step.is-first { border-top-color: var(--wp--preset--color--green); }
.nl-step-num { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 15px; margin: 0 !important; }
.nl-step.is-first .nl-step-num { color: var(--wp--preset--color--green-dark); }
.nl-step h3 { font-size: 21px; margin: 8px 0; }

/* ---------- Cases ---------- */
.nl-case { background: #fff; color: var(--wp--preset--color--navy); border-radius: 12px; padding: 32px; }
.nl-case-meta { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--green-dark); margin: 0 !important; }
.nl-case-num { font-family: var(--wp--preset--font-family--heading); font-size: 44px; font-weight: 800; line-height: 1.1; margin: 8px 0 !important; color: var(--wp--preset--color--navy); }
.nl-bg-navy .nl-case a { color: var(--wp--preset--color--green-dark); }

/* ---------- Over ons ---------- */
.nl-photo { background: var(--wp--preset--color--light); border-radius: 16px; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--ink-soft); }
.nl-chip { display: inline-block; border: 1px solid #dde2ea; border-radius: 999px; padding: 6px 14px; font-size: 14px; margin: 0 8px 8px 0; }

/* ---------- FAQ ---------- */
.nl-faq .wp-block-details { border-top: 1px solid #dde2ea; padding: 20px 0; margin: 0; }
.nl-faq .wp-block-details:last-child { border-bottom: 1px solid #dde2ea; }
.nl-faq summary { font-size: 18px; font-weight: 700; cursor: pointer; }
.nl-faq .wp-block-details p { margin-top: 12px; color: var(--wp--preset--color--ink-soft); }

/* ---------- Marktscan en contact ---------- */
.nl-form-box { background: #fff; color: var(--wp--preset--color--navy); border-radius: 16px; padding: 32px; }
.nl-form-box input, .nl-form-box select, .nl-form-box textarea { font: inherit; border: 1px solid #b9c4d6; border-radius: 8px; padding: 12px 14px; }
.nl-contact { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 32px; }
.nl-contact p { margin: 4px 0; }
.nl-qr img { width: 160px; height: 160px; border-radius: 12px; background: #fff; }
.nl-qr-placeholder { width: 160px; height: 160px; border-radius: 12px; background: #fff; color: var(--wp--preset--color--ink-soft); display: flex; align-items: center; justify-content: center; font-size: 13px; text-align: center; }

/* ---------- Footer ---------- */
.nl-footer { padding-top: 56px; padding-bottom: 32px; font-size: 14px; }
.nl-footer a { color: #b9c4d6; text-decoration: none; }
.nl-footer a:hover { color: #fff; }
.nl-footer .nl-foot-title { color: #fff; font-weight: 700; margin-bottom: 8px; }
.nl-footer p { margin: 0 0 8px; }
.nl-footer .nl-logo img { height: 52px; width: auto; }
.nl-slogan { font-style: italic; color: #fff; }

@media (max-width: 760px) {
	.nl-section { padding-top: 64px; padding-bottom: 64px; }
	.nl-hero { padding-top: 64px; padding-bottom: 72px; }
}

/* ---------- Lijsten op dienstpagina's ---------- */
.nl-checks { list-style: none; padding: 0; margin: 0; }
.nl-checks li { position: relative; padding-left: 32px; margin: 0 0 12px; color: #fff; }
.nl-checks li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334b234' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nl-steps { list-style: none; counter-reset: nl-step; padding: 0; margin: 24px 0 0; }
.nl-steps li { counter-increment: nl-step; position: relative; padding-left: 64px; margin: 0 0 24px; min-height: 44px; color: var(--wp--preset--color--ink-soft); }
.nl-steps li strong { color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--heading); font-size: 20px; }
.nl-steps li::before {
	content: counter(nl-step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
	background: var(--wp--preset--color--navy); color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 18px;
	display: flex; align-items: center; justify-content: center;
}
.nl-steps li:first-child::before { background: var(--wp--preset--color--green); color: var(--wp--preset--color--navy); }
.nl-plain { padding-left: 20px; color: var(--wp--preset--color--ink-soft); }
.nl-plain li { margin-bottom: 6px; }
.nl-case-dark { background: var(--wp--preset--color--navy); margin-top: 24px; }
.nl-case-dark .nl-case-num { color: #fff; }
.nl-case-dark .nl-case-meta { color: var(--wp--preset--color--green); }
.nl-case-dark .nl-muted { color: #dfe5ee; }
.nl-bg-navy .nl-contact .nl-kicker { margin-bottom: 16px !important; }

/* ---------- Formulieren ---------- */
.nl-form { display: flex; flex-direction: column; gap: 4px; }
.nl-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 16px; }
.nl-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.nl-field label { font-size: 14px; font-weight: 700; }
.nl-form input, .nl-form select, .nl-form textarea {
	font: inherit; font-size: 16px; color: var(--wp--preset--color--navy); background: #fff;
	border: 1px solid #b9c4d6; border-radius: 8px; padding: 12px 14px; width: 100%; box-sizing: border-box;
}
.nl-form input:focus, .nl-form select:focus, .nl-form textarea:focus { outline: 2px solid var(--wp--preset--color--green); outline-offset: 1px; border-color: var(--wp--preset--color--navy); }
.nl-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.nl-form-legal { font-size: 13px; color: var(--wp--preset--color--ink-soft); }
.nl-submit {
	font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; border: 0; border-radius: 8px;
	padding: 14px 28px; min-height: 44px; background: var(--wp--preset--color--green); color: var(--wp--preset--color--navy);
}
.nl-submit:hover { background: #2c9a2c; }
.nl-submit-navy { background: var(--wp--preset--color--navy); color: #fff; font-size: 16px; padding: 14px 22px; }
.nl-submit-navy:hover { background: #12387a; }
.nl-form-inline { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.nl-form-inline input[type="email"] { flex: 1 1 200px; width: auto; }
.nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.nl-notice { background: #e8f6e8; color: var(--wp--preset--color--navy); border-left: 0; border-radius: 8px; padding: 12px 16px; font-weight: 600; }
.nl-notice-error { background: #fdecec; }
.nl-bg-navy .nl-form-box a, .nl-bg-navy .nl-card a { color: var(--wp--preset--color--navy); text-decoration: underline; }

/* ---------- Atelier (kunstpagina Froukje Offringa) ---------- */
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
.nl-atelier {
	--at-paper: #f6f4ef; --at-paper2: #efece5; --at-ink: #1e1d22; --at-grey: #6b6870; --at-grey2: #4a4850;
	--at-line: #d9d6cf; --at-coral: #e8837e; --at-night: #1f3a5f;
	--at-serif: "Instrument Serif", "Songti SC", "STSong", "SimSun", "Noto Serif SC", Georgia, serif;
	background: var(--at-paper); color: var(--at-ink); margin-block-start: 0 !important;
}
.nl-atelier-page .wp-site-blocks > main, .nl-atelier-page main { margin-block-start: 0 !important; padding-top: 0 !important; }
.nl-atelier > * { margin-block-start: 0 !important; }
.nl-atelier .at-hero, .nl-atelier .at-section { padding: clamp(56px, 8vw, 104px) max(16px, 5vw); }
.nl-atelier .at-hero > *, .nl-atelier .at-section > * { max-width: 1240px; margin-inline: auto !important; }
.nl-atelier .at-paper2 { background: var(--at-paper2); }
.nl-atelier .at-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--at-grey); margin: 0 0 14px; }
.nl-atelier .at-display { font-family: var(--at-serif); font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -.01em; margin: 0 0 18px; color: var(--at-ink); }
.nl-atelier .at-display em, .nl-atelier .at-h2 em, .nl-atelier figcaption em { font-style: italic; }
.nl-atelier .at-h2 { font-family: var(--at-serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; margin: 0 0 16px; color: inherit; }
.nl-atelier .at-zh { font-family: var(--at-serif); font-size: 22px; color: var(--at-coral); margin: 0 0 22px; letter-spacing: .06em; }
.nl-atelier .at-lead { font-size: 18px; line-height: 1.65; color: var(--at-grey2); max-width: 60ch; }
.nl-atelier .at-muted { color: var(--at-grey); font-size: 16px; line-height: 1.6; }
.nl-atelier .at-muted a { color: var(--at-ink); }
.nl-atelier .at-head { margin-bottom: 40px; gap: 32px; }
.nl-atelier .wp-block-buttons { gap: 12px; margin-top: 28px; }
.nl-atelier .at-btn .wp-block-button__link { background: var(--at-ink); color: var(--at-paper); border-radius: 999px; padding: 14px 26px; font-weight: 700; }
.nl-atelier .at-btn .wp-block-button__link:hover { background: var(--at-night); }
.nl-atelier .at-btn-outline .wp-block-button__link { background: transparent; color: var(--at-ink); border: 1.5px solid var(--at-ink); border-radius: 999px; padding: 13px 25px; font-weight: 700; }
/* Plaatshouders voor kunstwerken */
.nl-atelier .at-art { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 13px; color: var(--at-grey2); border: 1px solid var(--at-line); border-radius: 4px; width: 100%; box-sizing: border-box; }
.nl-atelier .at-hatch { background: repeating-linear-gradient(135deg, #ebe8e1 0 2px, #f6f4ef 2px 9px); }
.nl-atelier .at-coral { background: repeating-linear-gradient(135deg, #f3c9c5 0 2px, #fbeeec 2px 9px); }
.nl-atelier .at-night { background: repeating-linear-gradient(135deg, #2c4c75 0 2px, #1f3a5f 2px 9px); color: #dfe5ee; border-color: #1f3a5f; }
.nl-atelier .at-round { aspect-ratio: 1; border-radius: 50%; }
.nl-atelier .at-arch { border-radius: 999px 999px 4px 4px; }
.nl-atelier .at-figure { margin: 0; }
.nl-atelier figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--at-grey); }
.nl-atelier figcaption em { font-family: var(--at-serif); font-size: 20px; color: var(--at-ink); }
/* Belofteband */
.nl-atelier .at-promises { background: var(--at-ink); color: var(--at-paper); padding: 36px max(16px, 5vw); margin: 0; }
.nl-atelier .at-wrap { max-width: 1240px; margin: 0 auto; }
.nl-atelier .at-promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 40px; }
.nl-atelier .at-promise { display: flex; gap: 14px; align-items: flex-start; }
.nl-atelier .at-promise svg { flex: none; }
.nl-atelier .at-promise strong { display: block; font-size: 16px; margin-bottom: 4px; }
.nl-atelier .at-promise span { font-size: 14px; color: #c9c6be; line-height: 1.5; }
/* Galerij */
.nl-atelier .at-gallery { columns: 3 300px; column-gap: 28px; }
.nl-atelier .at-gallery .at-figure { break-inside: avoid; margin-bottom: 28px; }
/* Werkwijze */
.nl-atelier .at-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.nl-atelier .at-steps li { border-top: 1px solid var(--at-ink); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.nl-atelier .at-num { font-family: var(--at-serif); font-size: 44px; line-height: 1; color: var(--at-coral); }
.nl-atelier .at-steps strong { font-size: 18px; }
.nl-atelier .at-steps li > span:last-child { color: var(--at-grey); line-height: 1.55; }
/* Winkel */
.nl-atelier .at-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.nl-atelier .at-product h3 { font-family: var(--at-serif); font-weight: 400; color: var(--at-ink); font-size: 26px; margin: 16px 0 6px; }
.nl-atelier .at-product p { color: var(--at-grey); font-size: 14px; margin: 0 0 14px; }
.nl-atelier .at-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; }
.nl-atelier .at-pill { background: var(--at-ink); color: var(--at-paper); text-decoration: none; border-radius: 999px; padding: 10px 18px; font-size: 14px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.nl-atelier .at-pill-outline { background: transparent; color: var(--at-ink); border: 1.5px solid var(--at-ink); }
.nl-atelier .at-note { margin-top: 28px; font-size: 13px; color: var(--at-grey); }
/* Voor merken (huisstijl NexusLeadsDigital) */
.nl-atelier .at-brands { background: #0b2756; color: #fff; }
.nl-atelier .at-brands .at-lead { color: #dfe5ee; }
.nl-atelier .at-green { color: #34b234; }
.nl-atelier .at-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 600px; gap: 10px 24px; }
.nl-atelier .at-list li { padding-left: 22px; position: relative; color: #fff; }
.nl-atelier .at-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: #34b234; }
.nl-atelier .at-brands .at-art { color: var(--at-grey2); }
@media (max-width: 781px) {
	.nl-atelier .at-head { margin-bottom: 24px; }
	.nl-atelier .at-hero .wp-block-column:last-child { max-width: 420px; }
}