/* vacature-2026.css: nieuwe stijl van de losse vacaturepagina (/vacatures/<naam>-<nummer>/), stijl C, november 2026.
   Wordt na stijl-2026.css geladen, als laatste stijlbestand in vacature.php. De oude bestanden (vacatures.css,
   vacature.css, solliciteren.css) blijven geladen; dit bestand zet er de nieuwe vorm overheen.
   Nieuwe onderdelen: #rcKern (kerngegevens in het bovenste vak), #btnApplyZij (Solliciteer in de zijkaart),
   #rcRecruiter (jouw recruiter) en .v26-verwant (vergelijkbare vacatures); ze komen uit vacature.php en vacature.js.
   Let op: global.css zet de tekstkleur van p, li, label, b, i en koppen met !important; waar dat botst staat hier ook !important. */

body.rc-body{background:var(--s26-wit);color:var(--s26-grijs)}
.rc-body .rc-muted{color:var(--s26-zacht)}

/* ---------- Bovenste vak: beige, afgerond ---------- */
.rc-vacpage-head{margin:0 24px;padding:36px 0 44px;border:0;border-radius:var(--s26-r-groot);background:var(--s26-beige)}
.rc-vacpage-head .rc-container,.rc-vacpage-main .rc-container{width:min(1280px,calc(100% - 40px));max-width:none;padding:0} /* zelfde breedte als de kop van de site */
.rc-vacpage-head .rc-bc{gap:8px;margin-bottom:22px;font-size:13px;color:var(--s26-zacht)}
.rc-vacpage-head .rc-bc a{display:inline-block;padding:14px 0;margin:-10px 0}
.rc-vacpage-top{align-items:flex-end;gap:32px}
/* Linkerdeel van het bovenste vak, onder elkaar: opdrachtgever, titel, labels, (salarisvakje), kerngegevens.
   Elk onderdeel heeft een eigen regel; de volgorde staat hier, los van de volgorde in de pagina. */
.rc-vacpage-top > div:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.rc-vacpage-head .rc-vacpage-meta{order:1;margin:0 0 10px;gap:8px;font-size:15px;font-weight:500;color:var(--s26-grijs)}
.rc-vacpage-head .rc-vacpage-title{order:2}
.rc-vacpage-head .rc-labels{order:3}
.rc-vacpage-top > div:first-child > div[style*="margin-top"]{order:4}
.rc-vacpage-head .rc-kern{order:5}
/* Labels "Hybride" en "ZZP ook mogelijk": een eigen regel onder de titel, omlijnd en rustig. Zonder label is het
   vak leeg en neemt het geen ruimte in. */
.rc-vacpage-head .rc-labels{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.rc-vacpage-head .rc-labels:empty{display:none}
.rc-vacpage-head .rc-labels span{border:1px solid rgba(58,57,58,.32);border-radius:8px;padding:3px 10px;font-size:12px;font-weight:500;line-height:1.5;color:var(--s26-grijs);white-space:nowrap}
.rc-vacpage-head .rc-vacpage-meta .rc-meta-org{color:var(--s26-grijs);font-weight:500}
.rc-vacpage-head .rc-vacpage-title{max-width:22em;font-weight:300;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em;color:var(--s26-grijs)!important;overflow-wrap:anywhere}
.rc-vacpage-head .rc-chip{height:auto;padding:5px 12px;border:0;border-radius:8px;background:var(--s26-wit);font-size:13px;font-weight:500;color:var(--s26-grijs)}
.rc-vacpage-head .rc-chip:hover{color:var(--s26-grijs)}

/* Kerngegevens: regio, uren, salaris, einde inschrijfdatum */
.rc-kern{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:26px}
.rc-kern:empty{display:none}
.rc-kern strong{display:block;font-size:18px;font-weight:600;line-height:1.35;color:var(--s26-grijs)}
.rc-kern span{display:block;font-size:14px;line-height:1.4;color:var(--s26-zacht)}
/* Staan de kerngegevens er, dan zijn de provincie achter de opdrachtgever en het losse salarisvakje dubbel */
.rc-vacpage-head:has(#rcKern:not(:empty)) .rc-vacpage-meta > span:not(.rc-meta-org){display:none}
.rc-vacpage-head:has(#rcKern:not(:empty)) #salaryChip{display:none!important}
.rc-vacpage-head:has(#rcKern:not(:empty)) .rc-vacpage-top > div:first-child > div[style*="margin-top"]{margin-top:0!important}

/* Knoppen in het bovenste vak: rustig; de oranje knop staat op de computer in de zijkaart */
.rc-vacpage-actions{flex:0 0 auto;gap:10px}
.rc-vacpage-actions .rc-btn{height:48px;padding:0 18px;border:0;border-radius:var(--s26-r);background:var(--s26-wit);color:var(--s26-grijs);font-size:14px;font-weight:600;box-shadow:none}
.rc-vacpage-actions .rc-btn:hover{color:var(--s26-oranje)}
.rc-vacpage-actions .rc-btn-primary,.rc-vacpage-actions .rc-btn-primary:hover{padding:0 26px;background:var(--s26-oranje);color:var(--s26-wit);font-size:15px}
.rc-vacpage-actions .rc-btn-primary:hover{background:var(--s26-oranje-donker);box-shadow:none}
.rc-vacpage-actions .rc-btn-save.is-saved{color:var(--s26-oranje)}
.rc-vacpage-actions .rc-btn-save.is-saved svg{fill:var(--s26-oranje)}
.rc-vacpage-actions #btnPrint{width:auto;font-size:0}
.rc-vacpage-actions #btnPrint::before{content:"Print";font-size:14px}
.rc-body .rc-btn:focus-visible,.rc-body .v26-verwant:focus-visible,.rc-body .v26-rec-tel:focus-visible{outline:2px solid var(--s26-grijs);outline-offset:3px}
.rc-actions-meta{margin-top:10px;gap:8px;font-size:13px;color:var(--s26-zacht)}
.rc-actions-meta .rc-views-meta{font-size:13px;color:var(--s26-zacht)}
.rc-actions-meta .rc-views-icon{display:none}
.rc-actions-meta .rc-views-meta::after{content:"keer bekeken"}
.rc-actions-meta .rc-live-viewers{color:var(--s26-grijs)}
.rc-actions-meta .rc-live-dot{background:var(--s26-oranje)}
.rc-actions-meta .rc-badge{height:auto;padding:3px 10px;border:0;border-radius:8px;background:var(--s26-wit);color:var(--s26-grijs);font-size:12px;font-weight:600}
.rc-actions-meta .rc-badge-status--verlopen,.rc-actions-meta .rc-badge-status--offline,.rc-actions-meta .rc-badge-status--concept{background:var(--s26-grijs);color:var(--s26-wit)}

/* ---------- Band met de vacaturetekst en de zijkaart ---------- */
.rc-vacpage-main{margin-top:28px;padding:44px 0 88px;background:var(--s26-beige-licht)}
.rc-vacpage-grid{grid-template-columns:minmax(0,1fr) 380px;gap:32px}
.rc-vacpage-grid > section{grid-column:1;grid-row:1;min-width:0}
.rc-vacpage-grid > aside{grid-column:2;grid-row:1;min-width:0}
/* .rc-zij-plak met daarin .rc-zij-kaartvak (de zijkaart) en het recruiterblok; vacature.js maakt ze aan (zie zijPlak) */
.rc-vacpage-grid > aside{display:flex;flex-direction:column}
.rc-zij-plak{flex:1 1 auto;display:flex;flex-direction:column;gap:20px;min-width:0}
.rc-zij-kaartvak{min-width:0}
.rc-vacpage-grid > aside > .v26-recruiter{margin-top:20px}
.rc-vacpage-grid > .rc-related-mobile-spacer{display:none}
.rc-vacpage-grid > section > div:not(.rc-card){height:20px!important}

.rc-vacpage-main .rc-card{border:0;border-radius:var(--s26-r-groot);background:var(--s26-wit);box-shadow:var(--s26-schaduw)}
.rc-vacpage-main section .rc-card-pad{padding:38px 44px 40px}
.rc-vacpage-main aside .rc-card-pad{padding:20px 26px}
.rc-vacpage-main h3.rc-card-title{margin:0 0 14px;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--s26-grijs)!important}
.rc-vacpage-main aside h3.rc-card-title{font-size:16px;margin:0 0 6px!important}

/* Vacaturetekst: rustige kopjes in grijs (het ATS zet er zelf oranje op), ruime regels */
#vacatureTekst{font-size:16px;line-height:1.75;color:var(--s26-grijs)}
#vacatureTekst p,#vacatureTekst li{color:var(--s26-grijs)!important;line-height:1.75}
#vacatureTekst p{margin:0 0 14px}
#vacatureTekst h1,#vacatureTekst h2,#vacatureTekst h3,#vacatureTekst h4{margin:26px 0 6px;font-size:19px;font-weight:600;color:var(--s26-grijs)!important}
#vacatureTekst span[style*="color"]{color:var(--s26-grijs)!important;font-weight:600!important}
#vacatureTekst strong > span[style*="color"]{display:inline-block;margin-top:10px;font-size:19px!important;line-height:1.3}
#vacatureTekst strong,#vacatureTekst b{font-weight:600;color:var(--s26-grijs)!important}
#vacatureTekst li::marker,#compList li::marker{color:var(--s26-oranje)}
#vacatureTekst a{text-decoration:underline;text-decoration-color:var(--s26-oranje);text-underline-offset:4px}
.rc-vacpage-main .rc-list{margin-top:0;font-size:16px;line-height:1.6;color:var(--s26-grijs)}
.rc-vacpage-main .rc-list li{color:var(--s26-grijs)!important}
.rc-vacpage-main .rc-list li.rc-muted,.rc-vacpage-main .rc-list .rc-muted{color:var(--s26-zacht)!important}
.rc-vacpage-main .rc-list-ordered > li{margin:10px 0}
.rc-vacpage-main .rc-list-ordered > li::marker{color:var(--s26-zacht)}
.rc-vacpage-main #awardList ul{color:var(--s26-zacht)!important;font-size:14px!important}
.rc-vacpage-main #awardList ul li{color:var(--s26-zacht)!important}
.rc-vacpage-main section .rc-card-pad > div[style*="height:12px"]{height:26px!important}

/* Zijkaart: Solliciteer bovenaan, daaronder het logo en de gegevens */
.rc-zij-solliciteer{display:flex;width:100%;height:auto;min-height:52px;margin:0 0 16px;padding:14px 20px;border:0;border-radius:var(--s26-r);background:var(--s26-oranje);color:var(--s26-wit);font-size:15px;font-weight:600}
.rc-zij-solliciteer:hover{background:var(--s26-oranje-donker);box-shadow:none}
.rc-vacpage-main .rc-left-brand{margin-bottom:12px}
.rc-vacpage-main .rc-left-logo{height:72px;padding:6px 0;border:0;border-radius:0;justify-content:flex-start}
.rc-vacpage-main .rc-left-logo img{width:auto;max-width:100%;object-position:left center}
.rc-vacpage-main .rc-left-logo #orgLogoFallback{width:72px;height:72px;border-radius:50%;background:var(--s26-beige);font-size:30px;font-weight:600;opacity:1;color:var(--s26-grijs)}
.rc-vacpage-main .rc-kv-row{grid-template-columns:148px minmax(0,1fr);gap:12px;padding:5px 0;border-top:1px solid var(--s26-lijn);font-size:14px;line-height:1.45}
.rc-vacpage-main .rc-kv-row:first-child{border-top:0}
.rc-vacpage-main .rc-kv-k{font-weight:400;color:var(--s26-zacht)}
.rc-vacpage-main .rc-kv-v{font-weight:500;color:var(--s26-grijs);overflow-wrap:anywhere}

/* Jouw recruiter voor deze vacature */
.v26-recruiter .v26-rec-kop{margin:0 0 10px;font-size:13px;color:var(--s26-zacht)!important}
.v26-recruiter .v26-rec-wie{display:flex;align-items:center;gap:14px}
.v26-recruiter .v26-rec-rond{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:var(--s26-beige);object-fit:cover;object-position:50% 16%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--s26-grijs)}
.v26-recruiter .v26-rec-naam{margin:0;font-size:19px;font-weight:600;line-height:1.3;color:var(--s26-grijs)!important}
.v26-recruiter .v26-rec-rol{margin:0;font-size:15px;color:var(--s26-zacht)!important}
.v26-recruiter .v26-rec-tekst{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--s26-zacht)!important}
.v26-recruiter .v26-rec-tel{display:inline-block;margin-top:0;padding:13px 0;font-size:16px;font-weight:600;color:var(--s26-grijs);text-decoration:none}
.v26-recruiter .v26-rec-tel:hover{color:var(--s26-oranje)}

/* Vergelijkbare vacatures: over de volle breedte onder de tekst */
.rc-vacpage-grid > .rc-related-card{grid-column:1 / -1;grid-row:2;margin-top:36px;overflow:visible;border-radius:0;background:none;box-shadow:none}
.rc-vacpage-main .rc-related-card .rc-card-pad{padding:0}
.rc-vacpage-main .rc-related-card h3.rc-card-title{margin:0 0 26px;font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.025em}
#related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
#related > p{grid-column:1 / -1;margin:0;color:var(--s26-zacht)!important;font-size:15px!important}
.v26-verwant{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:var(--s26-r-groot);background:var(--s26-wit);box-shadow:var(--s26-schaduw);color:var(--s26-grijs);text-decoration:none;transition:box-shadow .15s ease}
.v26-verwant:hover{box-shadow:var(--s26-schaduw-zweef)}
.v26-verwant-wie{font-size:13px;font-weight:500;line-height:1.4;color:var(--s26-zacht)}
.v26-verwant-titel{font-size:17px;font-weight:600;line-height:1.3;color:var(--s26-grijs);overflow-wrap:anywhere}
.v26-verwant-regio{margin-top:auto;padding-top:8px;font-size:14px;color:var(--s26-zacht)}

/* ---------- Vensters (solliciteren, cv): zelfde velden en knoppen, nieuwe vorm ---------- */
.rc-body .rc-modal__panel{border:0;border-radius:var(--s26-r-groot);box-shadow:0 20px 60px rgba(58,57,58,.25);color:var(--s26-grijs)}
.rc-body .rc-modal__head{padding:16px 22px;border-bottom:1px solid var(--s26-lijn)}
.rc-body .rc-modal__head strong,.rc-body .rc-modal__title{font-size:20px;font-weight:600;color:var(--s26-grijs)!important}
.rc-body .rc-modal__body{padding:18px 22px 22px}
.rc-body .rc-modal .rc-btn{height:auto;min-height:48px;padding:13px 22px;border:1px solid var(--s26-lijn);border-radius:var(--s26-r);background:var(--s26-wit);color:var(--s26-grijs);font-size:15px;font-weight:600}
.rc-body .rc-modal .rc-btn-icon{width:44px;min-height:44px;padding:0;border:0;background:var(--s26-warmwit)}
.rc-body .rc-modal .rc-btn-primary{border:0;background:var(--s26-oranje);color:var(--s26-wit)}
.rc-body .rc-modal .rc-btn-primary:hover{background:var(--s26-oranje-donker);box-shadow:none}
.rc-body .rc-modal .rc-input,.rc-body .rc-modal .rc-input2,.rc-body .rc-modal .rc-textarea2,.rc-body .rc-modal .rc-file{border:1px solid var(--s26-lijn);border-radius:var(--s26-r);background-color:var(--s26-warmwit);color:var(--s26-grijs);font-size:15px;font-weight:400}
.rc-body .rc-modal .rc-input:focus,.rc-body .rc-modal .rc-input2:focus,.rc-body .rc-modal .rc-textarea2:focus{border-color:var(--s26-grijs);box-shadow:none;outline:2px solid var(--s26-grijs);outline-offset:1px}
.rc-body .rc-modal .rc-label{font-size:14px;font-weight:600;color:var(--s26-grijs)!important}
.rc-body .rc-modal .rc-help{color:var(--s26-zacht)}

/* ---------- Computer: een oranje knop, in de zijkaart ---------- */
@media (min-width:981px){
  /* De zijkolom blijft bij het lezen in beeld. vacatures.css zet overflow-x:hidden op html en op body; daardoor
     werkt "sticky" nergens op de pagina. Op de computer is body alleen genoeg om zijwaarts schuiven te voorkomen.
     De kop van de site schuift op deze pagina mee uit beeld, dus de kolom mag tot bijna bovenaan komen.
     <aside> is even hoog als het artikel ernaast en het vak .rc-zij-plak schuift alleen binnen <aside>: het stopt
     dus aan het eind van het artikel en komt nooit over "Vergelijkbare vacatures" of de voet. (Eerst stond sticky
     op <aside> zelf; dan rekent de browser met het hele raster, waar ook de vergelijkbare vacatures in staan.)
     Wat in beeld blijft bepaalt vacature.js aan de hand van de hoogte van het venster, zodat er nooit iets onder
     de rand van het venster verdwijnt:
       is-vast        zijkaart en recruiterblok passen samen: ze blijven samen in beeld;
       is-kaart-vast  alleen de zijkaart past: die blijft in beeld binnen .rc-zij-kaartvak; het recruiterblok staat
                      onderaan de kolom, naast het einde van het artikel, en de zijkaart stopt erboven;
       geen van beide alles blijft gewoon staan. */
  html{overflow-x:visible}
  .rc-vacpage-grid > aside{align-self:stretch}
  .rc-zij-plak.is-vast{flex:0 0 auto;position:sticky;top:20px}
  .rc-zij-plak.is-kaart-vast .rc-zij-kaartvak{flex:1 1 auto}
  .rc-zij-plak.is-kaart-vast .rc-zij-kaartvak > .rc-card{position:sticky;top:20px}
  body:has(#btnApplyZij) .rc-vacpage-actions #btnApply{display:none}
  .rc-vacpage-actions{justify-content:flex-end;max-width:420px}
}

/* ---------- Tablet en telefoon: alles onder elkaar ---------- */
@media (max-width:1180px){
  .rc-vacpage-grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px}
  .rc-vacpage-main section .rc-card-pad{padding:30px 32px 32px}
  #related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .rc-vacpage-head{margin:0 12px;padding:24px 0 28px}
  .rc-vacpage-top{flex-direction:column;align-items:stretch;gap:22px}
  .rc-vacpage-actions{width:100%;justify-content:flex-start}
  .rc-actions-meta{justify-content:flex-start;flex-wrap:wrap;white-space:normal}
  .rc-vacpage-main{margin-top:16px;padding:20px 0 56px}
  .rc-vacpage-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .rc-vacpage-grid > section{grid-column:1;grid-row:auto;order:1}
  .rc-vacpage-grid > aside{grid-column:1;grid-row:auto;order:2}
  .rc-vacpage-grid > .rc-related-card{grid-column:1;grid-row:auto;order:3;margin-top:24px}
}
@media (max-width:640px){
  .rc-vacpage-head .rc-container,.rc-vacpage-main .rc-container{width:calc(100% - 32px);overflow-x:visible}
  .rc-vacpage-head .rc-vacpage-title{font-size:30px}
  .rc-vacpage-head .rc-labels{margin-top:14px}
  .rc-kern{gap:14px 28px;margin-top:20px}
  .rc-kern > div{flex:1 1 40%}
  .rc-kern strong{font-size:17px}
  .rc-vacpage-actions .rc-btn{height:48px;padding:0 16px;font-size:14px}
  .rc-vacpage-actions .rc-btn-primary{flex:1 1 100%;height:52px;font-size:15px}
  .rc-vacpage-actions .rc-btn-save,.rc-vacpage-actions #btnPrint{flex:1 1 0}
  .rc-vacpage-main section .rc-card-pad{padding:24px 20px 26px}
  .rc-vacpage-main aside .rc-card-pad{padding:22px 20px}
  .rc-vacpage-main h3.rc-card-title{font-size:20px}
  .rc-vacpage-main .rc-kv-row{grid-template-columns:128px minmax(0,1fr);gap:10px;padding:8px 0;font-size:14px}
  #related{grid-template-columns:minmax(0,1fr);gap:14px}
  .v26-verwant{padding:20px}
  .rc-body .rc-modal__head{padding:14px 16px}
  .rc-body .rc-modal__body{padding:16px}
}
@media (max-width:359px){
  .rc-vacpage-head{margin:0 8px}
  .rc-vacpage-main .rc-kv-row{grid-template-columns:112px minmax(0,1fr)}
}

/* ---------- Afdrukken: geen knoppen en geen recruiterblok (de bestaande afdrukregels blijven gelden) ---------- */
@media print{
  .rc-vacpage-head{margin:0;padding:0;background:none}
  .rc-vacpage-main{margin:0;padding:0;background:none}
  .rc-vacpage-main .rc-card{box-shadow:none}
  .rc-vacpage-grid > .rc-related-card{display:none}
}

/* Meldingen onderaan (bewaard, verwijderd, eerst inloggen): een rustige grijze balk in plaats van groen en blauw */
.rc-toast,.rc-toast.rc-toast--saved,.rc-toast.rc-toast--removed,.rc-toast.rc-toast--login{background:var(--s26-grijs);color:var(--s26-wit);border-radius:var(--s26-r);padding:12px 20px;font-weight:500;max-width:calc(100vw - 32px);white-space:normal;text-align:center}

@media (prefers-reduced-motion:reduce){
  .v26-verwant{transition:none}
}