/**
 * lcs.css — gedeelde stylesheet voor het ingebouwde "lcs"-dienstenblok
 * (hero → facts → proces → tip → cards → FAQ) op de diensten-landingspagina's.
 *
 * Canoniek geëxtraheerd uit /energielabel-aanvragen/ (2026-07-02). Vervangt de
 * per-pagina inline <style>-kopieën die onderling waren gedrift (tip-kleur,
 * maten, tabellen). Wijzig het lcs-uiterlijk voortaan ALLEEN hier.
 *
 * Wordt alleen geladen op pagina's waarvan post_content 'class="lcs' bevat
 * (conditie in functions.php, zelfde blok als lcs-mobile.css).
 *
 * NB: .lcs-faq (accordeon van [labelcert_faq]) is globaal gestyled in
 * style.css (~regel 3441) en staat hier bewust NIET nogmaals.
 */

.lcs{--g:#0a3f17;--g2:#0E3D22;--or:#8E5C00;--orange:#e39f2f;--cream:#FAF5EC;--bd:#E8E2D2;--mut:#4a5550;}
.lcs *{box-sizing:border-box;}

/* ── Hero ─────────────────────────────────────────────────────────── */
.lcs-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a3f17,#14532a);border-radius:24px;padding:40px;color:#fff;margin:6px 0 26px;}
.lcs-hero__glow{position:absolute;right:-70px;top:-70px;width:280px;height:280px;background:radial-gradient(circle,rgba(227,159,47,.30),transparent 70%);pointer-events:none;}
/* Eyebrow = sitebrede canon: 19px/700/normal-case (géén uppercase/letter-spacing);
   alleen de kleur wijkt af (goud op de donkere hero i.p.v. oranje op licht). */
.lcs-eyebrow{display:inline-block;font-size:19px;font-weight:700;letter-spacing:0;text-transform:none;color:#f4c779;margin-bottom:12px;position:relative;}
/* Hero-kop = site-brede h2-canon (clamp 26-42/800), gelijk aan Gutenberg-h2. */
.lcs-hero h2{color:#fff;font-size:clamp(26px,3.2vw,42px);line-height:1.15;margin:0 0 12px;font-weight:800;position:relative;}
.lcs-hero h2 .accent{color:var(--orange);}
.lcs-hero>p{color:rgba(255,255,255,.85);font-size:17px;line-height:1.6;margin:0;max-width:640px;position:relative;}
.lcs-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px;position:relative;}
.lcs-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;}
.lcs-btn--or{background:var(--orange);color:#0a3f17!important;}
.lcs-chip{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13.5px;font-weight:700;}

/* ── Feiten-balk ──────────────────────────────────────────────────── */
.lcs-facts{background:var(--cream);border:1px solid var(--bd);border-left:4px solid var(--orange);border-radius:14px;padding:20px 24px;margin:0 0 6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 28px;}
.lcs-facts dt{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--or);margin-bottom:3px;}
.lcs-facts dd{margin:0;font-size:14.5px;color:var(--g);font-weight:600;line-height:1.4;}

/* ── Koppen + lopende tekst ───────────────────────────────────────── */
.lcs h2.lcs-h{font-size:clamp(26px,3.2vw,42px);font-weight:800;color:var(--g);margin:36px 0 6px;}
.lcs p.lcs-lead{font-size:17px;color:var(--mut);line-height:1.7;margin:0 0 8px;max-width:760px;}
.lcs p.lcs-p{font-size:17px;color:var(--mut);line-height:1.7;margin:10px 0;max-width:780px;}
.lcs ul.lcs-ul{margin:10px 0 14px;padding-left:0;list-style:none;max-width:780px;}
.lcs ul.lcs-ul li{position:relative;padding:5px 0 5px 30px;font-size:17px;color:var(--mut);line-height:1.6;}
.lcs ul.lcs-ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--orange);}
.lcs ul.lcs-ul li strong{color:var(--g);}
.lcs a.inline{color:#2d6a4f;font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* ── Proces-stappen ───────────────────────────────────────────────── */
.lcs-proc{display:flex;flex-direction:column;margin:20px 0 8px;}
.lcs-proc__s{position:relative;padding:0 0 26px 64px;}
.lcs-proc__s::before{content:"";position:absolute;left:21px;top:8px;bottom:-8px;width:2px;background:#cfe0d3;}
.lcs-proc__s:last-child::before{display:none;}
.lcs-proc__n{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--cream);border:2px solid var(--g2);color:var(--g2);font-weight:800;font-size:17px;display:grid;place-items:center;z-index:1;box-shadow:0 4px 12px -6px rgba(14,61,34,.4);}
.lcs-proc__s h3{font-size:17px;font-weight:800;color:var(--g);margin:8px 0 4px;}
.lcs-proc__s p{font-size:14px;color:var(--mut);line-height:1.6;margin:0;}

/* ── Tip-callout ──────────────────────────────────────────────────── */
.lcs-tip{display:flex;gap:14px;background:#fff6e6;border:1px solid #e3b964;border-radius:14px;padding:18px 20px;margin:16px 0 8px;}
.lcs-tip svg{flex:0 0 auto;color:#8E5C00;margin-top:2px;}
.lcs-tip h3{font-size:15.5px;font-weight:800;color:#8E5C00;margin:0 0 5px;}
.lcs-tip p{font-size:13.5px;color:#6a5a2a;line-height:1.6;margin:0;}

/* ── Anker-callout (o.a. /energielabel-kosten/) ───────────────────── */
.lcs-anchor{background:var(--cream);border:1px solid var(--bd);border-left:4px solid var(--orange);border-radius:14px;padding:20px 24px;margin:18px 0 8px;display:flex;gap:16px;align-items:flex-start;}
.lcs-anchor svg{flex:0 0 auto;color:#2d6a4f;margin-top:2px;}
.lcs-anchor h3{font-size:16px;font-weight:800;color:var(--g);margin:0 0 5px;}
.lcs-anchor p{font-size:14px;color:var(--mut);line-height:1.6;margin:0;}
.lcs-anchor strong{color:var(--g);}

/* ── Kaarten ──────────────────────────────────────────────────────── */
.lcs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 6px;}
.lcs-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:22px;box-shadow:0 0 14px rgba(14,61,34,.06),0 2px 8px rgba(14,61,34,.05);}
.lcs-card__ic{width:46px;height:46px;border-radius:12px;background:rgba(80,137,94,.12);color:#2d6a4f;display:grid;place-items:center;margin-bottom:12px;}
.lcs-card h3{font-size:16.5px;font-weight:800;color:var(--g);margin:0 0 6px;}
.lcs-card p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0;}

/* ── Tabellen (in-content <table class="lcs-tbl">) ────────────────── */
.lcs-tbl{width:100%;border-collapse:collapse;margin:14px 0 8px;font-size:14.5px;}
.lcs-tbl caption{caption-side:bottom;font-size:12.5px;color:#6a756c;text-align:left;padding-top:8px;}
.lcs-tbl th{background:var(--g);color:#fff;text-align:left;padding:10px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.lcs-tbl td{padding:9px 14px;border-bottom:1px solid var(--bd);color:var(--g);}
.lcs-tbl tr:nth-child(even) td{background:#faf5ec;}
.lcs-tbl td:first-child{font-weight:800;}
.lcs-tbl th.n,.lcs-tbl td.n{text-align:right;}
.lcs-pos{color:#1c7a33;font-weight:700;}
.lcs-neg{color:#b4451f;font-weight:700;}

/* ── Mobiel ───────────────────────────────────────────────────────── */
@media(max-width:820px){
	.lcs-cards{grid-template-columns:1fr;}
	.lcs-cta{grid-template-columns:1fr;}
	.lcs-hero,.lcs-cta{padding:28px 24px;}
}