/*
Theme Name: Beekman Consulting
Theme URI: https://www.beekmanconsulting.nl
Author: Beekman Consulting
Description: Maatthema voor Beekman Consulting — interim management, programmamanagement en strategisch advies voor de publieke sector. Huisstijl: oranje #EF792F en donkergrijs #2E3640.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beekman
*/

/* =========================================================================
   Alle opmaak staat in dit bestand. De kleuren staan bovenaan in :root —
   pas die aan als de huisstijl wijzigt, dan volgt de hele site vanzelf.
   ========================================================================= */
:root{
  --ink:#2E3640; --ink-2:#57626E; --ink-3:#7D8894;
  --paper:#F4F7F8; --surface:#FFFFFF; --surface-2:#E9EEF1;
  --line:#D6DEE3; --line-soft:#E5EBEE;
  --accent:#EF792F; --accent-ink:#BF5714; --accent-soft:#FBE7D8;
  --deep:#242C34; --deep-2:#2E3640; --on-deep:#EAEEF1; --on-deep-2:#A6B2BC; --deep-line:#3C464F;
  --shadow:0 1px 2px rgba(46,54,64,.06), 0 8px 24px -12px rgba(46,54,64,.18);
  --maxw:1120px;
  --f-display:"Spectral", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E5EAED; --ink-2:#AAB5BF; --ink-3:#87939E;
    --paper:#13181D; --surface:#1A2026; --surface-2:#222A31;
    --line:#333C45; --line-soft:#283037;
    --accent:#F58C4A; --accent-ink:#F79A5E; --accent-soft:#31241B;
    --deep:#1A2026; --deep-2:#222A31; --on-deep:#E5EAED; --on-deep-2:#A0ACB6; --deep-line:#333C45;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#E5EAED; --ink-2:#AAB5BF; --ink-3:#87939E;
  --paper:#13181D; --surface:#1A2026; --surface-2:#222A31;
  --line:#333C45; --line-soft:#283037;
  --accent:#F58C4A; --accent-ink:#F79A5E; --accent-soft:#31241B;
  --deep:#1A2026; --deep-2:#222A31; --on-deep:#E5EAED; --on-deep-2:#A0ACB6; --deep-line:#333C45;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; line-height:1.16; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0;
}
.eyebrow--quiet{color:var(--ink-3)}
.lede{font-size:1.16rem; line-height:1.6; color:var(--ink-2)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex; align-items:center; gap:28px; min-height:76px; flex-wrap:wrap}
.brand{display:flex; flex-direction:column; gap:1px; text-decoration:none; padding:10px 0}
.brand__name{font-family:var(--f-display); font-size:1.24rem; font-weight:600; letter-spacing:-.01em}
.brand__name span{color:var(--accent)}
.brand__tag{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
.nav a{
  text-decoration:none; font-size:.93rem; font-weight:500; color:var(--ink-2);
  padding:8px 12px; border-radius:3px; position:relative;
}
.nav a:hover{color:var(--ink); background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:1px; height:2px; background:var(--accent);
}
.topbar__cta{
  margin-left:8px; text-decoration:none; font-size:.9rem; font-weight:600;
  padding:10px 16px; background:var(--ink); color:var(--surface); border-radius:3px;
}
.topbar__cta:hover{background:var(--accent); color:#fff}

/* ---------- generic sections ---------- */
.page{display:none}
.page.is-active{display:block}
.section{padding:clamp(52px,7vw,84px) 0; border-top:1px solid var(--line-soft)}
.section--flush{border-top:none}
.section--tint{background:var(--surface-2); border-top:1px solid var(--line-soft)}
.dossier{display:grid; grid-template-columns:186px 1fr; gap:clamp(24px,4vw,56px); align-items:start}
.dossier__label{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  padding-top:6px; border-top:2px solid var(--accent); display:block;
}
.dossier__body{display:flex; flex-direction:column; gap:22px; min-width:0}
@media (max-width:820px){ .dossier{grid-template-columns:1fr; gap:18px} }

.h2{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.05rem); letter-spacing:-.012em}
.h3{font-size:1.18rem; font-weight:600; letter-spacing:-.005em}
.prose{max-width:63ch; display:flex; flex-direction:column; gap:16px; color:var(--ink-2)}
.prose strong{color:var(--ink); font-weight:600}

/* ---------- hero ---------- */
.hero{background:var(--deep); color:var(--on-deep); padding:clamp(56px,8vw,96px) 0 clamp(44px,6vw,68px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr); gap:clamp(30px,5vw,68px); align-items:center}
.hero__portrait{margin:0; position:relative}
.hero__portrait img{width:100%; height:auto; border-radius:2px}
.hero__portrait::after{
  content:""; position:absolute; right:-14px; bottom:-14px; width:52%; height:52%;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); pointer-events:none;
}
@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr; gap:34px}
  .hero__portrait{max-width:250px}
  .hero__portrait::after{right:-10px; bottom:-10px}
}
.hero__eyebrow{color:var(--accent); font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase}
.hero h1{
  font-size:clamp(2.05rem,1.15rem + 3.3vw,3.5rem); font-weight:400; letter-spacing:-.02em;
  margin-top:20px; max-width:19ch; color:#fff;
}
:root[data-theme="dark"] .hero h1{color:var(--on-deep)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hero h1{color:var(--on-deep)} }
.hero h1 em{font-style:italic; color:var(--accent)}
.hero__sub{margin-top:24px; max-width:56ch; color:var(--on-deep-2); font-size:1.1rem; line-height:1.6}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  display:inline-block; text-decoration:none; font-size:.95rem; font-weight:600;
  padding:13px 22px; border-radius:3px; border:1px solid transparent; cursor:pointer; font-family:var(--f-body);
}
.btn--primary{background:var(--accent); color:#20262c; border-color:var(--accent)}
.btn--primary:hover{background:#fff; border-color:#fff; color:#20262c}
.btn--ghost{border-color:var(--deep-line); color:var(--on-deep)}
.btn--ghost:hover{border-color:var(--on-deep-2)}
.btn--dark{background:var(--ink); color:var(--paper)}
.btn--dark:hover{background:var(--accent); color:#20262c}
.btn--outline{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn--outline:hover{border-color:var(--accent); color:var(--accent-ink)}
.hero__meta{
  margin-top:clamp(38px,5vw,56px); padding-top:22px; border-top:1px solid var(--deep-line);
  display:flex; flex-wrap:wrap; gap:8px 40px;
}
.hero__meta div{display:flex; flex-direction:column; gap:2px}
.hero__meta dt{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-deep-2); font-weight:600}
.hero__meta dd{margin:0; font-size:.98rem; color:var(--on-deep); font-weight:500}

/* ---------- pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.pillar{background:var(--surface); padding:30px 26px 32px; display:flex; flex-direction:column; gap:12px}
.pillar__role{font-family:var(--f-display); font-size:1.24rem; font-weight:600; letter-spacing:-.01em}
.pillar p{color:var(--ink-2); font-size:.98rem}
.pillar__tags{margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; gap:6px}
.tag{
  font-size:.72rem; font-weight:600; letter-spacing:.03em; color:var(--ink-2);
  border:1px solid var(--line); padding:3px 9px; border-radius:99px; background:var(--paper);
}
@media (max-width:820px){ .pillars{grid-template-columns:1fr} }

/* ---------- vraag-lijst ---------- */
.asks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.asks li{
  padding:15px 0 15px 22px; border-bottom:1px solid var(--line-soft); position:relative;
  color:var(--ink-2); font-size:.99rem;
}
.asks li::before{
  content:""; position:absolute; left:0; top:24px; width:9px; height:2px; background:var(--accent);
}
@media (max-width:820px){ .asks{grid-template-columns:1fr} }

/* ---------- werkwijze ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px)}
.step{display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:2px solid var(--ink)}
.step__num{font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--accent-ink)}
.step h3{font-family:var(--f-display); font-size:1.16rem; font-weight:600}
.step p{color:var(--ink-2); font-size:.97rem}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

/* ---------- opdrachten ---------- */
.jobs{display:flex; flex-direction:column}
.job{
  display:grid; grid-template-columns:190px 1fr; gap:clamp(16px,3vw,40px);
  padding:26px 0; border-top:1px solid var(--line);
}
.job:last-child{border-bottom:1px solid var(--line)}
.job__period{
  font-size:.85rem; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;
  letter-spacing:.01em; padding-top:4px;
}
.job__period .now{color:var(--accent-ink)}
.job__client{font-family:var(--f-display); font-size:1.2rem; font-weight:600; letter-spacing:-.01em}
.job__role{font-size:.93rem; font-weight:600; color:var(--accent-ink); margin-top:3px; letter-spacing:.005em}
.job ul{margin:14px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:7px}
.job li{color:var(--ink-2); font-size:.97rem}
.job li::marker{color:var(--accent)}
@media (max-width:820px){ .job{grid-template-columns:1fr; gap:6px} }

/* ---------- compacte tabel (loopbaan, eerdere opdrachten) ---------- */
.rows{display:flex; flex-direction:column}
.row{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(14px,3vw,32px);
  padding:16px 0; border-top:1px solid var(--line-soft);
}
.row:first-child{border-top:1px solid var(--line)}
.row__k{font-size:.85rem; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:2px}
.row__v{color:var(--ink-2); font-size:.97rem}
.row__v b{color:var(--ink); font-weight:600}
@media (max-width:820px){ .row{grid-template-columns:1fr; gap:2px} }

/* ---------- kaarten ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:24px 22px;
  display:flex; flex-direction:column; gap:9px;
}
.card__meta{font-size:.74rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.card h3{font-family:var(--f-display); font-size:1.13rem; font-weight:600}
.card p{font-size:.95rem; color:var(--ink-2)}
.card__link{margin-top:auto; padding-top:14px; font-size:.88rem; font-weight:600; color:var(--accent-ink); text-decoration:none}
.card__link:hover{text-decoration:underline}
@media (max-width:820px){ .cards{grid-template-columns:1fr} }

/* ---------- dienst-blok ---------- */
.service{
  display:grid; grid-template-columns:1fr 300px; gap:clamp(24px,4vw,56px);
  padding:36px 0; border-top:1px solid var(--line); align-items:start;
}
.service__aside{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px;
}
.service__aside .eyebrow{margin-bottom:4px}
.service__aside li{font-size:.92rem; color:var(--ink-2)}
.service__aside ul{margin:0; padding-left:17px; display:flex; flex-direction:column; gap:6px}
@media (max-width:900px){ .service{grid-template-columns:1fr} }

/* ---------- bio ---------- */
.bio{display:grid; grid-template-columns:264px minmax(0,1fr); gap:clamp(24px,4vw,46px); align-items:start}
.bio__portrait{margin:0}
.bio__portrait img{width:100%; height:auto; border:1px solid var(--line); border-radius:2px}
.bio__portrait figcaption{
  margin-top:11px; padding-top:9px; border-top:2px solid var(--accent);
  font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:760px){ .bio{grid-template-columns:1fr} .bio__portrait{max-width:250px} }

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--f-display); font-size:clamp(1.3rem,1rem + 1.2vw,1.75rem); font-style:italic;
  font-weight:300; line-height:1.42; color:var(--ink); max-width:26ch;
  border-left:2px solid var(--accent); padding-left:24px;
}

/* ---------- CTA-strip ---------- */
.cta{background:var(--deep-2); color:var(--on-deep); padding:clamp(44px,6vw,64px) 0}
.cta__inner{display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cta h2{font-size:clamp(1.45rem,1.1rem + 1.2vw,1.95rem); font-weight:400; color:#fff; max-width:22ch}
:root[data-theme="dark"] .cta h2{color:var(--on-deep)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cta h2{color:var(--on-deep)} }
.cta p{color:var(--on-deep-2); margin-top:10px; max-width:46ch}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.contact-list{display:flex; flex-direction:column}
.contact-list div{padding:14px 0; border-top:1px solid var(--line-soft); display:flex; gap:20px; align-items:baseline}
.contact-list div:first-child{border-top:1px solid var(--line)}
.contact-list dt{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--ink-3); width:112px; flex:none}
.contact-list dd{margin:0; color:var(--ink); font-weight:500}
.contact-list a{color:var(--accent-ink); text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.form{display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--line); padding:26px 24px 28px; border-radius:4px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:3px; padding:11px 12px; width:100%;
}
.field input:focus,.field textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.form__note{font-size:.82rem; color:var(--ink-3)}

/* ---------- footer ---------- */
.foot{background:var(--deep); color:var(--on-deep-2); padding:44px 0 28px; font-size:.92rem}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
@media (max-width:820px){ .foot__grid{grid-template-columns:1fr} }
.foot h4{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-deep); font-family:var(--f-body); font-weight:700; margin-bottom:12px}
.foot a{color:var(--on-deep-2); text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot__links{display:flex; flex-direction:column; gap:8px}
.foot__bottom{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--deep-line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.84rem;
}
.foot__brand{font-family:var(--f-display); font-size:1.2rem; color:var(--on-deep); font-weight:600}

/* ---------- preview chrome ---------- */
.previewbar{
  background:var(--accent-soft); border-bottom:1px solid var(--line); color:var(--ink-2);
  font-size:.82rem; padding:9px 0;
}
.previewbar .wrap{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.previewbar b{color:var(--ink); font-weight:700}
.dl{display:inline-flex; align-items:center; gap:9px}
.dl::before{content:"↓"; font-weight:700; color:var(--accent-ink)}

/* ================= WordPress-specifiek ================= */
.page{display:block}
.previewbar{display:none}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; word-wrap:normal;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; z-index:100; width:auto; height:auto; clip:auto;
  background:var(--accent); color:#20262c; padding:10px 16px; font-weight:700; border-radius:3px;
}
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:3px;
  padding:9px 13px; font:inherit; font-size:.9rem; font-weight:600; color:var(--ink); cursor:pointer;
}
.nav-toggle:hover{border-color:var(--accent); color:var(--accent-ink)}
@media (max-width:900px){
  .topbar__inner{gap:10px; padding:14px 0}
  .brand{width:100%; padding:0}
  .nav-toggle{display:block; order:1; margin-left:0}
  .topbar__cta{order:2; margin-left:auto}
  .nav{display:none; width:100%; flex-direction:column; gap:0; margin:2px 0 4px; order:3}
  .nav.is-open{display:flex}
  .nav li{list-style:none}
  .nav a{display:block; padding:12px 4px; border-bottom:1px solid var(--line-soft); border-radius:0}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--accent-ink)}
}
.nav ul{display:flex; gap:4px; margin:0; padding:0; list-style:none; flex-wrap:wrap}
@media (max-width:900px){ .nav ul{flex-direction:column; width:100%} }

/* Meldingen bij het contactformulier */
.notice{
  padding:13px 16px; border-radius:3px; font-size:.95rem; border:1px solid var(--line);
  background:var(--surface); color:var(--ink);
}
.notice--ok{border-left:3px solid var(--accent); }
.notice--err{border-left:3px solid #C0392B}

/* Losse WordPress-pagina's (page.php) en blogberichten */
.entry-content{max-width:66ch; display:flex; flex-direction:column; gap:16px; color:var(--ink-2)}
.entry-content h2{font-family:var(--f-display); font-size:1.5rem; color:var(--ink); margin-top:14px}
.entry-content h3{font-family:var(--f-display); font-size:1.2rem; color:var(--ink); margin-top:10px}
.entry-content a{color:var(--accent-ink)}
.entry-content ul,.entry-content ol{padding-left:20px; display:flex; flex-direction:column; gap:7px}
.entry-content img,.entry-content figure{max-width:100%; height:auto; border-radius:3px}
.entry-content blockquote{
  border-left:2px solid var(--accent); padding-left:20px; font-family:var(--f-display);
  font-style:italic; color:var(--ink);
}