/* Componenten uit het design system.
   In de React-versie hadden Button, Card, Badge en de formuliervelden hun opmaak
   inline in de JS. Voor WordPress zijn dezelfde waarden hier als CSS-klassen
   vastgelegd, zodat het ontwerp identiek blijft zonder JavaScript. */

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-heading);
  border:1px solid transparent;border-radius:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:var(--transition-control);font-size:var(--text-base);padding:12px 22px;min-height:46px}
.btn--sm{font-size:var(--text-sm);padding:8px 14px;min-height:36px}
.btn--lg{font-size:var(--text-lg);padding:15px 30px;min-height:56px}
.btn--vol{width:100%}
.btn--primary{background:var(--capabi-orange);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--orange-600);color:var(--text-on-accent)}
.btn--secondary{background:var(--capabi-navy);color:var(--text-inverse)}
.btn--secondary:hover{background:var(--navy-700)}
.btn--outline{background:transparent;color:var(--capabi-navy);border-color:var(--capabi-navy)}
.btn--outline:hover{background:var(--capabi-navy);color:var(--gray-000)}
.btn--outline:hover .chev{background:var(--gray-000)!important}
.btn--ghost{background:transparent;color:var(--capabi-navy)}
.btn--ghost:hover{background:var(--navy-050)}
.btn--inverse{background:var(--gray-000);color:var(--capabi-navy)}
.btn--inverse:hover{background:var(--gray-050)}
.btn--inverse-outline{background:transparent;color:var(--gray-000);border-color:rgba(255,255,255,.45)}
.btn--inverse-outline:hover{background:rgba(255,255,255,.12)}
.btn:focus-visible{outline:2px solid var(--capabi-orange);outline-offset:2px}

/* ---------- kaarten ---------- */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-body);
  padding:var(--space-6);border-radius:0;box-shadow:var(--shadow-xs);transition:var(--transition-control)}
.card--ruim{padding:var(--space-10)}
.card--subtle{background:var(--surface-subtle);border-color:transparent}
.card--inverse{background:var(--capabi-navy);border-color:transparent;color:var(--text-inverse)}
.card--plat{padding:0}
.card--interactive{cursor:pointer}
.joblink{display:block;color:inherit;text-decoration:none;height:100%}
.joblink:hover .card--interactive{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* ---------- labels ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;font-family:var(--font-display);
  font-weight:var(--weight-bold);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;border-radius:0;white-space:nowrap}
.badge--neutral{background:var(--navy-100);color:var(--capabi-navy)}
.badge--solid{background:var(--capabi-orange);color:#fff}
.badge--accent{background:var(--orange-100);color:var(--orange-700)}
.badge--inverse{background:rgba(255,255,255,.14);color:#fff}
.tag{display:inline-flex;padding:6px 14px;border:1px solid var(--border-strong);
  font-size:var(--text-sm);color:var(--capabi-navy)}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ---------- sectiekoppen ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:var(--weight-bold);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--capabi-orange)}
.sectiekop{display:flex;flex-direction:column;gap:var(--space-4);max-width:640px}
.sectiekop h2{font-size:clamp(var(--text-2xl),2.6vw,var(--text-4xl));line-height:var(--leading-snug)}
.navy .sectiekop h2,.navy h2,.navy h3{color:#fff}
.navy .sectiekop p,.navy p{color:var(--navy-200)}

/* ---------- lijst met vinkjes ---------- */
.benefitlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.benefitlist li{display:flex;gap:var(--space-4);align-items:flex-start}
.benefitlist li .chev{margin-top:7px;flex:0 0 auto}
.navy .benefitlist li span{color:var(--navy-200)}

/* ---------- cijfers ---------- */
.stat{display:flex;flex-direction:column;gap:4px}
.stat-waarde{font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:clamp(var(--text-2xl),2.4vw,var(--text-4xl));color:var(--capabi-navy);line-height:1.05}
.navy .stat-waarde{color:#fff}
.stat-label{font-size:var(--text-sm);color:var(--text-muted);max-width:280px}
.navy .stat-label{color:var(--navy-200)}

/* ---------- formuliervelden ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--capabi-navy)}
.field .req{color:var(--capabi-orange)}
.field input[type=text],.field input[type=email],.field input[type=url],.field select,.field textarea{
  width:100%;padding:11px 14px;border:1px solid var(--border-strong);background:#fff;
  font-family:var(--font-body);font-size:var(--text-base);color:var(--text-body);border-radius:0;
  transition:var(--transition-control)}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23002743'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px;padding-right:38px}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--capabi-navy);box-shadow:0 0 0 3px rgba(0,39,67,.12)}
.field .is-fout{border-color:#C0392B}
.field .hint,.hint{font-size:var(--text-sm);color:var(--text-muted)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.field--breed{grid-column:1 / -1}
.formvoet{margin-top:var(--space-8);display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.keuze{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-base);cursor:pointer}
.keuze input{width:18px;height:18px;accent-color:var(--capabi-orange)}

/* ---------- meldingen ---------- */
.melding{display:flex;flex-direction:column;gap:2px;padding:var(--space-5) var(--space-6);
  margin-bottom:var(--space-6);border-left:4px solid}
.melding strong{font-family:var(--font-display)}
.melding--ok{background:#E8F4EE;border-color:#1F6B4B;color:#14503810}
.melding--ok strong{color:#1F6B4B}
.melding--ok span{color:var(--text-body)}
.melding--fout{background:#FDECEA;border-color:#C0392B}
.melding--fout strong{color:#C0392B}
.melding--fout span{color:var(--text-body)}

/* ---------- kruimelpad ---------- */
.kruimels{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--navy-300);flex-wrap:wrap}
.kruimels a{color:var(--navy-200)}
.kruimels a:hover{color:#fff}
.kruimels span{color:#fff;font-family:var(--font-display);font-weight:var(--weight-bold)}

/* ---------- beeld ---------- */
.beeld{position:relative;overflow:hidden;background:var(--surface-subtle);display:block}
.beeld>img{width:100%;height:100%;object-fit:cover;display:block}
.beeld-leeg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-5);font-size:var(--text-sm);color:var(--text-muted);
  border:1px dashed var(--border-strong)}

/* ---------- pagina-inhoud ---------- */
.prose h1{font-size:clamp(var(--text-3xl),3.4vw,var(--text-5xl));margin-bottom:var(--space-6)}
.prose p{margin-bottom:var(--space-5);max-width:70ch}
.prose h2{font-size:var(--text-2xl);margin:var(--space-10) 0 var(--space-4)}
.prose ul,.prose ol{margin:0 0 var(--space-5) var(--space-6);max-width:70ch}
.kop-marge{margin-top:var(--space-10)}
.kaart-marge{margin-top:var(--space-6)}
.chev{display:inline-block;flex:0 0 auto;clip-path:polygon(0 0,100% 50%,0 100%)}
.chev--down{margin-left:6px}

/* ---------- opmaak die in de React-versie inline stond ---------- */
.plakkop{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle)}
.hero-intro{color:var(--navy-200);font-size:var(--text-lg);max-width:520px}
.heroknoppen,.knoppenrij,.routeknoppen,.cvknoppen,.logoknoppen{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.heroknoppen{margin-top:var(--space-10)}
.heroplate-kop{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange);margin-bottom:8px}
.heroplate p{color:var(--capabi-navy);font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-lg);line-height:var(--leading-snug)}
.pagehero-tekst{margin-top:var(--space-8);max-width:720px;display:flex;flex-direction:column;gap:var(--space-5)}
.pagehero-tekst h1{color:#fff;font-size:clamp(var(--text-4xl),4vw,var(--text-6xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-display)}
.pagehero-tekst p{color:var(--navy-200);font-size:var(--text-lg);max-width:620px}
.routekaart{display:flex;flex-direction:column;gap:var(--space-4)}
.routekaart h3{font-size:var(--text-2xl)}
.routevoet{margin-top:auto;padding-top:var(--space-6);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-5)}
.vakkaart{display:flex;flex-direction:column;height:100%}
.vakkaart-tekst,.vormkaart-tekst,.nieuwskaart-tekst{padding:var(--space-6);display:flex;flex-direction:column;gap:10px;flex:1}
.vakkaart-tekst h3,.vormkaart-tekst h3{font-size:var(--text-xl)}
.vormkaart{display:flex;flex-direction:column;height:100%}
.leesverder{margin-top:auto;padding-top:var(--space-5);display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--capabi-orange)}
.jobkaart{display:flex;flex-direction:column;gap:12px;height:100%}
.jobkaart-tags{display:flex;gap:8px;flex-wrap:wrap}
.jobkaart h3{font-size:var(--text-xl);line-height:var(--leading-snug)}
.jobkaart-meta{font-size:var(--text-sm);color:var(--text-muted)}
.jobkaart-voet{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border-subtle);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-size:var(--text-sm)}
.jobkaart-tarief{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--capabi-navy)}
.jobrow-wrap{padding:var(--space-6)}
.jobrow-titel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.jobrow-titel h3{font-size:var(--text-lg)}
.jobrow-meta{font-size:var(--text-sm);color:var(--text-muted)}
.joblijst{display:flex;flex-direction:column;gap:var(--space-3)}
.lijstkop{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6);flex-wrap:wrap}
.lijstteller{font-size:var(--text-sm);color:var(--text-muted)}
.vacature-kop{padding:var(--space-8) var(--gutter) var(--space-16)}
.vacature-kop h1{color:#fff;font-size:clamp(var(--text-4xl),4vw,var(--text-6xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-display);max-width:840px}
.vacature-tags{display:flex;gap:8px;flex-wrap:wrap;margin:var(--space-8) 0 var(--space-5)}
.vacature-sub{color:var(--navy-200);font-size:var(--text-lg);margin-top:var(--space-5)}
.vacature-tekst{margin-top:var(--space-5);font-size:var(--text-lg);line-height:var(--leading-relaxed)}
.metalabel{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange);margin-bottom:4px}
.metagrid .metawaarde{color:#fff;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-xl)}
.metagrid{margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--border-inverse)}
.zijmeta{display:flex;flex-direction:column;gap:var(--space-5)}
.zijnoot{font-size:var(--text-sm);color:var(--text-muted)}
.reactie{margin-top:var(--space-12)}
.reactie-sub{color:var(--text-muted);font-size:var(--text-sm);margin:var(--space-2) 0 var(--space-8)}
.propositie{display:flex;flex-direction:column;gap:var(--space-4);height:100%}
.propnr{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-4xl);color:var(--capabi-orange);line-height:1}
.propvoet{margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--border-subtle);font-size:var(--text-sm);color:var(--text-muted)}
.opgavenlijst{display:flex;flex-direction:column;gap:var(--space-5)}
.opgavenlijst>div{display:flex;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle)}
.opgavenlijst h3{font-size:var(--text-lg);margin-bottom:4px}
.opgavenlijst p{font-size:var(--text-sm)}
.tekstblok{display:flex;flex-direction:column;gap:var(--space-4);max-width:640px}
.werkwijzestappen{display:flex;flex-direction:column}
.werkwijzestap{display:flex;gap:var(--space-6);padding:var(--space-6) 0;border-top:1px solid var(--border-inverse)}
.stapnummer{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);color:var(--capabi-orange);min-width:48px}
.werkwijzestap h3{color:#fff;font-size:var(--text-xl);margin-bottom:6px}
.werkwijzeslot{color:var(--navy-200);margin-top:var(--space-10)}
.profielzij{display:flex;flex-direction:column;gap:var(--space-6)}
.contactkaart{display:flex;flex-direction:column;gap:var(--space-5)}
.contactkaart h3,.contactkaart span:not(.metalabel){color:#fff}
.nieuwsmeta{display:flex;gap:var(--space-4);align-items:center;font-family:var(--font-display);
  font-weight:var(--weight-bold);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--capabi-orange)}
.nieuwsdatum{color:var(--text-muted)}
.nieuwsmeta--inv .nieuwsdatum{color:var(--navy-300)}
.nieuwskaart{display:flex;flex-direction:column;height:100%}
.nieuwskaart-tekst h3{font-size:var(--text-xl);line-height:var(--leading-snug)}
.nieuwskaart-tekst p{font-size:var(--text-sm)}
.paginering{display:flex;gap:var(--space-2);flex-wrap:wrap}
.paginering .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 12px;border:1px solid var(--border-strong);color:var(--capabi-navy);font-family:var(--font-display);font-weight:var(--weight-bold)}
.paginering .current{background:var(--capabi-navy);color:#fff;border-color:var(--capabi-navy)}
.footermerk{display:flex;flex-direction:column;gap:16px;max-width:320px}
.footermerk p{color:var(--navy-200);font-size:var(--text-sm)}
.footercontact{color:#fff;font-size:var(--text-sm)}
.footerkolom{display:flex;flex-direction:column;gap:10px}
.footerkolom a{color:var(--navy-200);font-size:var(--text-sm)}
.footerkolom a:hover{color:#fff}
.footerkop{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange)}
.payoff{letter-spacing:var(--tracking-payoff)}
.logowall-kop{display:flex;flex-direction:column;gap:10px}
.logowall-kop--compact{flex-direction:row;align-items:baseline;gap:var(--space-5);flex-wrap:wrap}
.logowall-kop p{font-size:var(--text-sm);color:var(--text-muted);max-width:520px}
.hero-zoek{margin-top:var(--space-4)}
.g2-stretch{align-items:stretch}
@media (max-width:640px){.fields{grid-template-columns:1fr}}

/* ---------- correcties na de eerste installatie ---------- */

/* Het uitklapmenu is in PHP altijd aanwezig en wordt met het hidden-attribuut
   verborgen. site.css zet er display:flex op, wat hidden overrulet; vandaar dat
   het menu op desktop onder de header verscheen. */
.navdrawer[hidden]{display:none}

/* Koppen op een donkere ondergrond. h2 en h3 stonden al goed, h1 en h4 niet,
   waardoor de titel in de hero donkerblauw op donkerblauw stond. */
.navy h1,.navy h4,.hero-video h1{color:#fff}
.navy .eyebrow,.hero-video .eyebrow{color:var(--capabi-orange)}

/* De velden in het zoekblok van de hero staan niet in een .field-wikkel en
   kregen daardoor geen opmaak. */
.searchpanel input[type=text],.searchpanel select{
  width:100%;padding:11px 14px;border:1px solid var(--border-strong);background:#fff;
  font-family:var(--font-body);font-size:var(--text-base);color:var(--text-body);border-radius:0}
.searchpanel select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23002743'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px;padding-right:38px}
.searchpanel :is(input,select):focus{outline:none;border-color:var(--capabi-navy);box-shadow:0 0 0 3px rgba(0,39,67,.12)}
.searchpanel .btn{margin-top:2px}

/* Zolang er nog geen menu is gekoppeld, tonen we de pagina's zelf. */
.navlinks .page_item{display:inline-flex;list-style:none}
.navlinks ul{display:flex;gap:var(--space-5);align-items:center;margin:0;padding:0;list-style:none}
.navlinks .page_item a{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-muted)}
.navlinks .page_item a:hover{color:var(--capabi-navy)}

/* De kop in de oranje slotbanner stond in React op wit via een inline stijl.
   De banner is niet .navy, dus die valt buiten de regel hierboven. */
.ctaband h2{color:#fff;font-size:clamp(var(--text-2xl),3vw,var(--text-4xl));line-height:var(--leading-snug);max-width:660px}
.ctaband--persoon .ctatekst h2{max-width:none}

/* De koppen hadden in React hun grootte inline. Base.css zet alleen het lettertype,
   dus zonder deze regels vallen ze terug op de standaardgrootte van de browser. */
.herokolom h1{color:#fff;font-size:clamp(var(--text-3xl),min(4.2vw,6.2vh),var(--text-6xl));
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);max-width:680px}
.prose h1{font-size:clamp(var(--text-3xl),3.6vw,var(--text-5xl))}
h2{font-size:clamp(var(--text-2xl),2.6vw,var(--text-4xl))}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-base)}

/* Veelgezochte trefwoorden onder het zoekblok in de hero. */
.veelgezocht{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  margin-top:var(--space-5);color:var(--navy-300);font-size:var(--text-sm)}
.veelgezocht a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}
.veelgezocht a:hover{border-bottom-color:#fff}

/* .beeld-leeg is absoluut gepositioneerd; zonder een gepositioneerde ouder landt
   hij ergens anders op de pagina. .beeld heeft dat wel, de logocel niet. */
.logocell{position:relative}

/* Footer-logo: hoogte vast, breedte naar rato, en links uitlijnen. Zonder
   align-self rekt hij op tot de volle kolombreedte (320px in plaats van 173px). */
.footerlogo{height:64px;width:auto;align-self:flex-start}

/* Het filterpaneel in de hero staat in het origineel 40px onder de tekst. */
.filterpanel--hero{margin-top:var(--space-10)}