/* =====================================================================
   Standaard tekstpagina — Qlimatix
   Self-contained (like overons.css / adv.css): own @font-face + :root
   tokens + base, so the page ships only tekstpagina.css + chrome + Onest.
   Markup mirrors the prototype "Standaard Tekstpagina.html" (.kp-* classes);
   the body itself is the_content() so any heading/paragraph/list a WordPress
   editor produces lands inside .kp-article and inherits this styling.
   ===================================================================== */

/* ===== Self-hosted Onest (shared; woff2 in assets/fonts/) ===== */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:local('Onest'),url('fonts/Onest-Regular.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:local('Onest Medium'),url('fonts/Onest-Medium.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:local('Onest SemiBold'),url('fonts/Onest-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:local('Onest Bold'),url('fonts/Onest-Bold.woff2') format('woff2');}

:root{
  --c-navy:#10293d;
  --c-ink:#16242f;
  --c-muted:#6f7a83;
  --c-blue:#1c9bd7;
  --c-line:#e2e0dc;
  --c-gray:#e9e7e3;
}

/* ===== Page shell ===== */
.kp-main{ background:#fff; }
.kp-hero, .kp-section{ font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.kp-wrap{ max-width:var(--container,1280px); margin:0 auto; padding:0 40px; box-sizing:border-box; }

/* hero — brand gray band with the signature 42px rounded bottom corners */
.kp-hero{
  position:relative;
  background:var(--c-gray);
  border-bottom-left-radius:42px; border-bottom-right-radius:42px;
  padding:38px 0 66px;
}
.kp-crumb{
  display:flex; align-items:center; gap:10px;
  font-size:15px; color:var(--c-muted); margin-bottom:28px; flex-wrap:wrap;
}
.kp-crumb a{ color:var(--c-muted); text-decoration:none; transition:color .15s; }
.kp-crumb a:hover{ color:var(--c-navy); }
.kp-crumb .sep{ color:#b6bcc0; }
.kp-crumb .cur{ color:var(--c-navy); font-weight:500; }

.kp-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--c-navy); background:#fff; border:1px solid #dad7d1;
  padding:8px 16px 8px 13px; border-radius:999px; margin-bottom:26px;
}
.kp-eyebrow::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--c-blue);
  box-shadow:0 0 0 4px rgba(28,155,215,.18);
}

.kp-title{
  font-size:68px; line-height:1.03; font-weight:600; color:var(--c-navy);
  letter-spacing:-.028em; margin:0 0 22px;
}
.kp-lead{
  max-width:760px; color:var(--c-muted); font-size:18px; line-height:1.65;
  font-weight:400; margin:0;
}

/* body — left edge aligns with the H1 (no indent) */
/* extra bottom padding reserves room for the footer news-band that pulls up 150px */
.kp-section{ padding:72px 0 210px; }
.kp-article{ max-width:820px; margin-left:0; }

.kp-article h2{
  font-size:32px; font-weight:600; color:var(--c-navy);
  letter-spacing:-.02em; margin:54px 0 26px; scroll-margin-top:120px;
}
.kp-article > h2:first-child{ margin-top:0; }
.kp-article h2::before{
  content:""; display:block; width:46px; height:4px; border-radius:2px;
  background:var(--c-blue); margin-bottom:22px;
}
.kp-article h3{
  font-size:21px; font-weight:600; color:var(--c-navy);
  letter-spacing:-.015em; margin:48px 0 14px; scroll-margin-top:120px;
}
.kp-article h4{
  font-size:17.5px; font-weight:600; color:var(--c-navy);
  margin:32px 0 12px; scroll-margin-top:120px;
}
.kp-article p{
  font-size:17px; line-height:1.8; color:var(--c-muted);
  font-weight:400; margin:0 0 22px;
}
.kp-article a{ color:var(--c-blue); font-weight:500; text-decoration:none; }
.kp-article a:hover{ text-decoration:underline; }
.kp-article strong{ color:var(--c-navy); font-weight:600; }

/* lists — legal copy leans on them heavily */
.kp-article ul, .kp-article ol{
  margin:0 0 22px; padding-left:24px;
  color:var(--c-muted); font-size:17px; line-height:1.8;
}
.kp-article li{ margin:0 0 10px; }
.kp-article li::marker{ color:var(--c-blue); }
.kp-article ul ul, .kp-article ol ol, .kp-article ul ol, .kp-article ol ul{
  margin:10px 0 0;
}

/* table of contents (anchor list) — a quieter list with no blue markers */
.kp-toc{
  background:var(--c-gray); border:1px solid var(--c-line); border-radius:22px;
  padding:26px 30px; margin:0 0 8px;
}
.kp-toc .kp-toc-title{
  font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-navy); margin:0 0 16px;
}
.kp-toc ul{
  list-style:none; margin:0; padding:0; columns:2; column-gap:40px;
  font-size:15.5px; line-height:1.5;
}
.kp-toc li{ margin:0 0 10px; break-inside:avoid; }
.kp-toc li::marker{ content:none; }
.kp-toc a{ color:var(--c-muted); font-weight:400; }
.kp-toc a:hover{ color:var(--c-navy); text-decoration:none; }

/* callout — white card with the brand blue left accent */
.kp-note{
  background:#fff; border:1px solid var(--c-line); border-radius:22px;
  padding:28px 32px; margin:6px 0 22px; box-shadow:0 1px 2px rgba(16,41,61,.04);
}
.kp-note .kp-note-inner{ border-left:3px solid var(--c-blue); padding-left:24px; }
.kp-note p{ margin:0; }
.kp-note p + p{ margin-top:14px; }

/* business / contact details — brand card */
.kp-biz{
  border:1px solid var(--c-line); border-radius:22px; padding:30px 32px;
  background:var(--c-gray); margin:14px 0 22px;
}
.kp-biz dl{
  margin:0; display:grid; grid-template-columns:max-content 1fr; gap:14px 34px;
}
.kp-biz dt{ color:var(--c-muted); font-size:15.5px; line-height:1.5; }
.kp-biz dd{ color:var(--c-navy); font-weight:600; font-size:15.5px; line-height:1.5; margin:0; }

@media (max-width:900px){
  .kp-hero{ border-bottom-left-radius:28px; border-bottom-right-radius:28px; padding:30px 0 52px; }
  .kp-title{ font-size:46px; }
  .kp-lead{ font-size:17px; }
  .kp-section{ padding:52px 0 200px; }
  .kp-wrap{ padding:0 28px; }
  .kp-article h2{ font-size:28px; }
  .kp-article h3{ font-size:20px; margin:42px 0 12px; }
  .kp-note{ padding:24px 26px; }
  .kp-biz{ padding:26px 28px; }
  .kp-toc ul{ columns:1; }
}
@media (max-width:560px){
  .kp-hero{ padding:24px 0 42px; }
  .kp-crumb{ margin-bottom:20px; }
  .kp-title{ font-size:34px; }
  .kp-lead{ font-size:16px; }
  .kp-section{ padding:40px 0 190px; }
  .kp-wrap{ padding:0 20px; }
  .kp-article p, .kp-article ul, .kp-article ol{ font-size:16px; line-height:1.7; }
  .kp-article h2{ font-size:25px; margin-bottom:20px; }
  .kp-article h3{ font-size:19px; margin:36px 0 10px; }
  .kp-note{ padding:20px 22px; border-radius:18px; }
  .kp-note .kp-note-inner{ padding-left:18px; }
  .kp-biz{ padding:22px 22px; border-radius:18px; }
  .kp-biz dl{ grid-template-columns:1fr; gap:4px 0; }
  .kp-biz dt{ margin-top:12px; }
  .kp-biz dd{ margin-bottom:0; }
}