/* Kamerjager — theme extras: header, footer, homepage (getypt hero), editorial. */

:root{
  --kj-cream:#FBF7F0; --kj-ink:#22201C; --kj-ink-soft:#6B6459; --kj-line:#E7DFD1;
  --kj-green:#2F6D57; --kj-green-deep:#255544; --kj-gold:#D19A2E; --kj-gold-soft:#F4E9CF; --kj-sage:#E9EFE9;
  --kj-sans:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --kj-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --kj-maxw:1120px;
  --kj-r:6px; --kj-r2:10px; /* bewust subtiele hoeken */
}
@media (prefers-color-scheme:dark){
  :root{ --kj-cream:#16140F; --kj-ink:#F0EADF; --kj-ink-soft:#ABA192; --kj-line:#2C271F; --kj-gold-soft:#221D14; --kj-sage:#181D18; --kj-green:#5FA083; }
}
:root[data-theme="dark"]{ --kj-cream:#16140F; --kj-ink:#F0EADF; --kj-ink-soft:#ABA192; --kj-line:#2C271F; --kj-gold-soft:#221D14; --kj-sage:#181D18; --kj-green:#5FA083; }
:root[data-theme="light"]{ --kj-cream:#FBF7F0; --kj-ink:#22201C; --kj-ink-soft:#6B6459; --kj-line:#E7DFD1; --kj-gold-soft:#F4E9CF; --kj-sage:#E9EFE9; --kj-green:#2F6D57; }

html{scroll-behavior:smooth}
.wp-site-blocks{overflow-x:clip}
body{background:var(--kj-cream);color:var(--kj-ink);font-family:var(--kj-sans);line-height:1.6;-webkit-font-smoothing:antialiased}
.kj-wrap{max-width:var(--kj-maxw);margin:0 auto;padding:0 clamp(16px,4vw,24px)}
.kj-eyebrow{font-family:var(--kj-mono);font-size:.75rem;font-weight:600;color:var(--kj-green);letter-spacing:.04em}
.kj-eyebrow-gold{color:var(--kj-gold)}

/* safe side padding for core-block templates */
main.wp-block-group,section.wp-block-group{padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}

/* shared cta */
.kj-cta{display:inline-flex;align-items:center;gap:8px;background:var(--kj-green);color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:var(--kj-r2);font-weight:700;font-size:.95rem;border:none;cursor:pointer;
  transition:transform .16s ease,background .16s ease}
.kj-cta:hover{transform:translateY(-2px);background:var(--kj-green-deep);color:#fff}

/* ---------- header ---------- */
.kj-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--kj-cream) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--kj-line)}
.kj-bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.kj-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none;color:var(--kj-ink)}
.kj-mark{width:26px;height:26px;border-radius:var(--kj-r);background:var(--kj-green);flex:none;position:relative}
.kj-mark::after{content:"";position:absolute;left:6px;bottom:6px;width:8px;height:8px;background:var(--kj-gold);border-radius:2px}
.kj-brand-name{font-weight:800;letter-spacing:-.02em}
.kj-nav{display:flex;gap:22px;font-size:.95rem}
.kj-nav a{text-decoration:none;color:var(--kj-ink-soft)}
.kj-nav a:hover{color:var(--kj-ink)}

/* ---------- hero ---------- */
.kj-home{display:block}
.kj-hero{padding:82px 0 56px;text-align:center}
.kj-h1{font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance;font-size:clamp(2.5rem,6vw,4.6rem)}
.kj-typed-wrap{display:block;margin-top:.1em}
.kj-typed{font-family:var(--kj-mono);color:var(--kj-gold);font-weight:700;letter-spacing:-.01em;
  background:var(--kj-gold-soft);padding:.02em .18em;border-radius:var(--kj-r)}
.kj-caret{display:inline-block;width:.06em;height:1em;background:var(--kj-green);margin-left:.04em;vertical-align:-.08em;animation:kj-blink 1s steps(1) infinite}
@keyframes kj-blink{50%{opacity:0}}
.kj-lede{font-size:1.18rem;color:var(--kj-ink-soft);max-width:48ch;margin:26px auto 30px}
.kj-searchbar{display:flex;gap:8px;background:var(--kj-cream);border:1.5px solid var(--kj-line);border-radius:var(--kj-r2);
  padding:8px 8px 8px 18px;max-width:460px;margin:0 auto;box-shadow:0 16px 36px -24px rgba(34,32,28,.5)}
.kj-searchbar input{border:none;background:transparent;flex:1;font-size:1rem;color:var(--kj-ink);outline:none;font-family:var(--kj-sans)}
.kj-searchbar input::placeholder{color:var(--kj-ink-soft)}
.kj-reassure{margin-top:20px;font-size:.92rem;color:var(--kj-ink-soft);display:inline-flex;gap:8px;align-items:center}
.kj-reassure .kj-dot{width:7px;height:7px;border-radius:2px;background:var(--kj-gold)}

/* ---------- section / how we help ---------- */
.kj-section{padding:72px 0}
.kj-center{text-align:center;max-width:640px;margin:0 auto 40px}
.kj-h2{font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance;font-size:clamp(1.9rem,4vw,2.7rem)}
.kj-center p{color:var(--kj-ink-soft);margin-top:12px;font-size:1.05rem}
.kj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kj-cardh{background:var(--kj-sage);border:1px solid var(--kj-line);border-radius:var(--kj-r2);padding:24px;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
.kj-cardh:nth-child(3n+2){background:var(--kj-gold-soft)}
.kj-cardh:hover{transform:translateY(-5px);border-color:var(--kj-green)}
.kj-cardh .kj-ic{width:44px;height:44px;border-radius:var(--kj-r);background:var(--kj-cream);display:grid;place-items:center;margin-bottom:14px;border:1px solid var(--kj-line)}
.kj-cardh .kj-ic svg{width:23px;height:23px;stroke:var(--kj-green);fill:none;stroke-width:1.9}
.kj-cardh h3{font-size:1.18rem;margin:0 0 6px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.kj-cardh p{margin:0;color:var(--kj-ink-soft);font-size:.94rem}
.kj-cardh .kj-step{font-family:var(--kj-mono);font-size:.72rem;color:var(--kj-gold);font-weight:600;float:right}

/* ---------- reassurance band ---------- */
.kj-band{background:var(--kj-green);color:#fff;border-radius:var(--kj-r2);padding:42px;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.kj-band h2,.kj-band .kj-h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.4rem)}
.kj-band p{color:rgba(255,255,255,.85);margin:14px 0 0;font-size:1.05rem}
.kj-quote{background:rgba(255,255,255,.12);border-radius:var(--kj-r);padding:22px 24px}
.kj-quote p{color:#fff;font-size:1.05rem;margin:0 0 14px;font-weight:600;line-height:1.5}
.kj-who{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.85);font-size:.9rem}
.kj-who .kj-av{width:38px;height:38px;border-radius:var(--kj-r);background:linear-gradient(135deg,var(--kj-gold),#fff);flex:none}

/* ---------- guide (Joris) ---------- */
.kj-guide{display:flex;align-items:center;gap:18px;margin-top:40px;background:var(--kj-gold-soft);border:1px solid var(--kj-line);border-radius:var(--kj-r2);padding:22px 26px}
.kj-guide .kj-av-guide{width:60px;height:60px;border-radius:var(--kj-r);flex:none;background:linear-gradient(135deg,var(--kj-green),var(--kj-gold))}
.kj-guide b{color:var(--kj-ink)}
.kj-guide p{margin:0;color:var(--kj-ink-soft);font-size:.96rem}

/* ---------- footer ---------- */
.kj-footer{border-top:1px solid var(--kj-line);background:var(--kj-sage);margin-top:40px;padding:56px 0 26px;color:var(--kj-ink-soft);font-size:.86rem}
.kj-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.kj-footer-brand .kj-brand{margin-bottom:.6rem}
.kj-footer-brand p{color:var(--kj-ink-soft);margin:.4rem 0 0;max-width:36ch}
.kj-footer-nav{display:flex;flex-direction:column;gap:.5rem;font-size:.94rem}
.kj-footer-nav a{color:var(--kj-ink-soft);text-decoration:none}
.kj-footer-nav a:hover{color:var(--kj-ink)}
.kj-foot-h{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kj-ink);font-weight:700;margin-bottom:.3rem}
.kj-footer-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--kj-line);margin-top:34px;padding-top:20px;color:var(--kj-ink-soft);font-size:.84rem}

/* ---------- editorial content ---------- */
.kj-authorbox{align-items:center}
.kj-authorbox img{flex:none}
.wp-block-post-content img,.wp-block-post-featured-image img{border-radius:var(--kj-r2)}
.wp-block-post-content blockquote{border-left:3px solid var(--kj-green);padding-left:1.1rem;margin-left:0;font-size:1.2rem;color:var(--kj-ink)}
figcaption{color:var(--kj-ink-soft);font-size:.85rem}

/* ---------- reveal (optioneel) ---------- */
.kj-rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.kj-rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .kj-nav,.kj-header-cta{display:none}
  .kj-grid{grid-template-columns:1fr}
  .kj-band{grid-template-columns:1fr;padding:26px}
  .kj-guide{flex-direction:column;text-align:center}
  .kj-footer-grid{grid-template-columns:1fr 1fr}
  .kj-footer-brand{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kj-caret{animation:none}
  .kj-rv{opacity:1;transform:none}
}