/* vacatures-2026.css: nieuwe stijl van het vacature-overzicht (/vacatures/), stijl C, november 2026.
   Wordt na stijl-2026.css geladen, als laatste stijlbestand. De oude bestanden (vacatures.css, vacature.css,
   open-sollicitatie.css) blijven geladen; dit bestand zet er de nieuwe vorm overheen.
   Nieuwe klassen in de kaartjes beginnen met v26- (ze komen uit vacatures.js). Kleuren uit het huisstijlboek.
   Let op: global.css zet de tekstkleur van p, li, label, b, i en koppen met !important; waar dat botst staat hier ook !important. */

/* ---------- Bovenste vak: beige, afgerond, op de computer loopt de foto er van rechts in over ---------- */
.vac-hero{position:relative;overflow:hidden;margin:0 24px;padding:52px 0 50px;border:0;border-radius:var(--s26-r-groot);background:var(--s26-beige) url("/assets/hero/hero.webp") right 12%/cover no-repeat}
.vac-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#E9DFD6 0%,#E9DFD6 34%,rgba(233,223,214,.9) 46%,rgba(233,223,214,.4) 58%,rgba(233,223,214,0) 70%);pointer-events:none}
.vac-hero .vac-hero-inner{position:relative;display:block}
.vac-hero .vac-hero-title{color:var(--s26-grijs)!important}
.vac-hero .vac-hero-sub{font-weight:300;font-size:20px;line-height:1.5;margin:16px 0 0;max-width:none;color:var(--s26-grijs)!important}
.vac-hero .vac-hero-form{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:0;align-items:center;max-width:720px;margin:30px 0 0;padding:7px;background:var(--s26-wit);border-radius:16px;box-shadow:0 8px 28px rgba(58,57,58,.10)}
.vac-hero .vac-icon{display:none}
.vac-hero .vac-field input{width:100%;min-width:0;border:0;border-radius:10px;background:transparent;padding:13px 18px;font-size:15px;font-weight:400;color:var(--s26-grijs);box-shadow:none;outline:none}
.vac-hero .vac-field input::placeholder{color:rgba(58,57,58,.6)}
.vac-hero .vac-field + .vac-field input{border-left:1px solid var(--s26-lijn);border-radius:0 10px 10px 0}
.vac-hero .vac-field input:focus-visible{outline:2px solid var(--s26-grijs);outline-offset:-2px;border-radius:10px}
.vac-hero .vac-hero-btn{height:auto;min-height:50px;padding:15px 26px;border:0;border-radius:var(--s26-r);background:var(--s26-oranje);color:var(--s26-wit);font-size:15px;font-weight:600;letter-spacing:0;white-space:nowrap}
.vac-hero .vac-hero-btn:hover{background:var(--s26-oranje-donker);box-shadow:none}
.vac-hero .vac-hero-btn:focus-visible{outline:2px solid var(--s26-grijs);outline-offset:3px}

/* ---------- Band met filters en kaartjes ---------- */
main.rc-main{background:var(--s26-beige-licht);margin-top:28px;padding:44px 0 88px;color:var(--s26-grijs)}
.rc-main .rc-layout{grid-template-columns:296px minmax(0,1fr);gap:32px;margin:0;align-items:start}
.rc-main .rc-muted{color:var(--s26-zacht)}

/* Filters: een wit vak, geen vakjes in vakjes */
.rc-main .rc-filters{background:var(--s26-wit);border:0;border-radius:var(--s26-r-groot);padding:26px 26px 22px;box-shadow:var(--s26-schaduw)}
.rc-main .rc-filters-head{margin:0 0 6px}
.rc-main .rc-filters-title{font-weight:600;font-size:18px;color:var(--s26-grijs)}
.rc-main .v26-filter-uitleg{display:none}
.rc-main .rc-filters-panel{display:flex;flex-direction:column}
.rc-main .rc-filter-group{background:none;border:0;border-top:1px solid var(--s26-lijn);border-radius:0;padding:18px 0;margin:0}
.rc-main .rc-filter-group[data-filter="sort"]{display:none} /* zelfde keuze staat boven de kaartjes (#sortTop) */
.rc-main .rc-filter-group[data-filter="functie"]{border-top:0;padding-top:12px}
.rc-main .rc-filter-group[data-filter="reset"]{order:9;padding-bottom:0}
.rc-main .rc-filter-title{font-weight:600;font-size:14px;color:var(--s26-grijs)}
.rc-main .rc-filter-content{margin-top:8px}
.rc-main .rc-filter-content label.rc-muted{color:var(--s26-zacht)!important;font-size:13px}
.rc-main .rc-input,.rc-main .rc-select{min-height:44px;border:1px solid var(--s26-lijn);border-radius:var(--s26-r);padding:10px 14px;font-size:14px;font-weight:400;color:var(--s26-grijs);background-color:var(--s26-warmwit)}
.rc-main .rc-select{padding-right:38px}
.rc-main .rc-input::placeholder{color:rgba(58,57,58,.6)}
.rc-main .rc-input:focus,.rc-main .rc-select:focus{border-color:var(--s26-grijs);box-shadow:none;outline:2px solid var(--s26-grijs);outline-offset:1px}
.rc-main .rc-check{min-height:30px;font-size:14px;color:var(--s26-grijs)!important}
/* de twee vinkjes "Hybride" en "ZZP ook mogelijk": een groep zonder kopje */
.rc-main .rc-filter-group[data-filter="werkvorm"] .rc-filter-content{gap:2px!important;margin-top:0}
.rc-main .rc-check input{width:18px;height:18px;margin:0;accent-color:var(--s26-grijs)}
.rc-main .rc-check:has(input:disabled){opacity:.45;cursor:default!important}
.rc-main #filtersResetBtn{width:auto!important;height:auto;min-height:44px;padding:0;border:0;border-radius:0;background:none;color:var(--s26-grijs);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-color:var(--s26-oranje);text-decoration-thickness:1.5px;text-underline-offset:6px}
.rc-main #filtersResetBtn:hover{background:none;color:var(--s26-oranje)}

/* Regel boven de kaartjes: weergave, sorteren en twee rustige knoppen; geen vak eromheen */
.rc-main .rc-results-headbox{background:none;border:0;border-radius:0;padding:0;margin-bottom:18px;gap:16px}
.rc-main .rc-view-toggle{gap:4px;padding:4px;background:var(--s26-wit);border-radius:var(--s26-r)}
.rc-main .rc-toggle-btn{width:40px;height:40px;border-radius:9px;color:var(--s26-zacht)}
.rc-main .rc-toggle-btn.is-active{background:var(--s26-grijs);color:var(--s26-wit);box-shadow:none}
.rc-main .rc-toggle-ico{font-size:16px;font-weight:400}
.rc-main .rc-sortwrap .rc-select{min-width:200px;height:48px;border:0;border-radius:var(--s26-r);background-color:var(--s26-wit);font-weight:500}
.rc-main .rc-head-right{gap:22px}
.rc-main .rc-head-right .rc-btn{height:auto;min-height:44px;font-size:14px;font-weight:600;color:var(--s26-grijs);box-shadow:none}
.rc-main .rc-head-right .rc-btn__icon{display:none}
/* "Plan een gesprek" is voor opdrachtgevers: rustig, niet oranje */
.rc-main #jobAlertBtn{padding:0 18px;background:var(--s26-wit);border:0;border-radius:var(--s26-r)}
.rc-main #jobAlertBtn:hover{color:var(--s26-oranje);box-shadow:none}
.rc-main #openSollicitatieBtn{padding:0;border:0;border-radius:0;background:none;text-decoration:underline;text-decoration-color:var(--s26-oranje);text-decoration-thickness:1.5px;text-underline-offset:6px}
.rc-main #openSollicitatieBtn:hover{background:none;color:var(--s26-oranje)}
.rc-main .rc-btn:focus{box-shadow:none;border-color:transparent}
.rc-main .rc-btn:focus-visible,.rc-main .rc-toggle-btn:focus-visible,.rc-main .rc-pag-btn:focus-visible,.rc-main .rc-save-btn:focus-visible,.rc-main .rc-vac-card:focus-visible,.rc-main #filtersToggle:focus-visible{outline:2px solid var(--s26-grijs);outline-offset:3px}

.rc-main .rc-results-meta{margin-bottom:20px;font-size:15px;color:var(--s26-grijs)}
.rc-main .rc-results-meta strong{font-weight:600}
.rc-main .rc-results-meta .rc-muted{font-size:14px;color:var(--s26-zacht)}

/* Kaartjes: twee naast elkaar, wit, geen rand, zachte schaduw; het hele kaartje is de link */
.rc-main .rc-results-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rc-main .rc-results-list{gap:16px}
.rc-main .rc-vac-card-wrap{display:flex;min-width:0}
.rc-main .rc-vac-card{flex:1 1 auto;height:auto;min-height:0;overflow:visible;padding:26px 28px 22px;border:0;border-radius:var(--s26-r-groot);background:var(--s26-wit);box-shadow:var(--s26-schaduw);color:var(--s26-grijs);transition:box-shadow .15s ease}
.rc-main .rc-vac-card:hover{transform:none;box-shadow:var(--s26-schaduw-zweef)}
.rc-main .rc-vac-lines{gap:0;flex:1 1 auto}
.rc-main .v26-wie{font-size:13px;font-weight:500;line-height:1.4;color:var(--s26-zacht);margin-bottom:8px;padding-right:44px}
.rc-main .v26-titel{margin:0;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--s26-grijs)!important;overflow-wrap:anywhere}
.rc-main .v26-wie + .v26-titel{padding-right:0}
.rc-main .rc-vac-lines > .v26-titel:first-child{padding-right:44px}
.rc-main .v26-feiten{margin:18px 0 0;display:grid;grid-template-columns:62px minmax(0,1fr);gap:5px 18px;font-size:14px;line-height:1.5}
.rc-main .v26-feiten dt{color:var(--s26-zacht)}
.rc-main .v26-feiten dd{margin:0;font-weight:500;color:var(--s26-grijs);overflow-wrap:anywhere}
.rc-main .v26-labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
/* labels "Hybride" en "ZZP ook mogelijk": een rustige, omlijnde vorm (zelfde als op de vacaturepagina) */
.rc-main .v26-labels span{background:none;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-main .v26-onder{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--s26-lijn)}
.rc-main .v26-sluit{display:flex;flex-direction:column;font-size:13px;line-height:1.45;color:var(--s26-zacht)}
.rc-main .v26-sluit strong{font-size:14px;font-weight:600;color:var(--s26-grijs)}
.rc-main .v26-bekijk{font-size:14px;font-weight:600;color:var(--s26-grijs);white-space:nowrap}
.rc-main .v26-bekijk span{color:var(--s26-oranje);margin-left:4px}
.rc-main .rc-vac-card:hover .v26-bekijk{color:var(--s26-oranje)}

/* Hartje (vacature bewaren): rustig, rechtsboven */
.rc-main .rc-save-btn{top:12px;right:14px;width:44px;height:44px;background:none;box-shadow:none;color:rgba(58,57,58,.38)}
.rc-main .rc-save-btn:hover{background:none;transform:none;color:var(--s26-oranje)}
.rc-main .rc-save-btn.is-saved{background:none;color:var(--s26-oranje)}
.rc-main .rc-save-btn svg{fill:none;stroke:currentColor;stroke-width:1.7}
.rc-main .rc-save-btn.is-saved svg{fill:currentColor}

/* Raster op de computer: ruimte voor twee regels titel, zodat de rijen in twee kaartjes naast elkaar gelijk beginnen */
@media (min-width:981px){
  .rc-main .rc-results-grid .v26-titel{min-height:2.6em}
}

/* Lijstweergave: een kaartje per rij, gegevens naast de titel */
.rc-main .rc-vac-card.rc-vac-card--row{flex-direction:row;gap:28px;padding:24px 28px}
.rc-main .rc-vac-card--row .rc-vac-lines{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:28px;align-content:start}
.rc-main .rc-vac-card--row .v26-wie,.rc-main .rc-vac-card--row .v26-titel,.rc-main .rc-vac-card--row .v26-labels{grid-column:1}
.rc-main .rc-vac-card--row .v26-wie{padding-right:0}
.rc-main .rc-vac-card--row .v26-feiten{grid-column:2;grid-row:1 / span 3;margin:0}
.rc-main .rc-vac-card--row .v26-onder{flex:0 0 190px;flex-direction:column;align-items:flex-start;justify-content:space-between;margin:0;padding:0 44px 0 28px;border-top:0;border-left:1px solid var(--s26-lijn)}

/* Bladeren: onder de kaartjes */
.rc-main .rc-pagination{justify-content:center;margin-top:40px}
.rc-main .rc-pag-inner{gap:6px;justify-content:center}
.rc-main .rc-pag-btn{min-width:44px;height:44px;padding:0 10px;border:0;border-radius:var(--s26-r);background:var(--s26-wit);color:var(--s26-grijs);font-size:14px;font-weight:500}
.rc-main .rc-pag-btn:hover:not([disabled]){background:var(--s26-warmwit);border:0;color:var(--s26-oranje)}
.rc-main .rc-pag-btn.is-active{background:var(--s26-grijs);color:var(--s26-wit)}
.rc-main .rc-pag-ellipsis{padding:0 6px;color:var(--s26-zacht)}

/* Geen resultaat */
.rc-main .rc-empty{padding:48px 24px;border:0;border-radius:var(--s26-r-groot);background:var(--s26-wit);box-shadow:var(--s26-schaduw)}
.rc-main .rc-empty h3{font-size:22px;font-weight:600;color:var(--s26-grijs)!important;margin:0 0 8px}
.rc-main .rc-empty p{color:var(--s26-zacht)!important;margin:0 0 20px}
.rc-main .rc-empty .rc-btn-primary{height:auto;min-height:50px;padding:15px 26px;border:0;border-radius:var(--s26-r);background:var(--s26-oranje);font-size:15px;font-weight:600}
.rc-main .rc-empty .rc-btn-primary:hover{background:var(--s26-oranje-donker);box-shadow:none}

/* ---------- Venster "Open sollicitatie": zelfde velden en knoppen, nieuwe vorm ---------- */
#openSolModal .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)}
#openSolModal .rc-modal__head{padding:18px 24px;border-bottom:1px solid var(--s26-lijn)}
#openSolModal .rc-modal__title{font-size:22px;font-weight:600;color:var(--s26-grijs)!important}
#openSolModal .rc-modal__close{border:0;border-radius:var(--s26-r);background:var(--s26-warmwit);color:var(--s26-grijs);width:44px;height:44px}
#openSolModal .rc-modal__body{padding:20px 24px 24px}
#openSolModal .rc-modal__sub{color:var(--s26-zacht)!important}
#openSolModal .rc-label{font-size:14px;font-weight:600;color:var(--s26-grijs)!important}
#openSolModal .rc-input2,#openSolModal .rc-textarea2,#openSolModal .rc-file{border:1px solid var(--s26-lijn);border-radius:var(--s26-r);background:var(--s26-warmwit);color:var(--s26-grijs);font-weight:400;font-size:15px}
#openSolModal .rc-input2:focus,#openSolModal .rc-textarea2:focus{border-color:var(--s26-grijs);box-shadow:none;outline:2px solid var(--s26-grijs);outline-offset:1px}
#openSolModal .rc-help{color:var(--s26-zacht)}
#openSolModal .rc-consent{border-top:1px solid var(--s26-lijn)}
#openSolModal .rc-consent__check span{color:var(--s26-grijs)}
#openSolModal .rc-consent__check input{accent-color:var(--s26-grijs)}
#openSolModal .rc-modal__foot{border-top:1px solid var(--s26-lijn)}
#openSolModal .rc-modal__foot .rc-btn{height:auto;min-height:48px;padding:14px 24px;border-radius:var(--s26-r);font-size:15px;font-weight:600}
#openSolModal .rc-modal__foot .rc-btn-soft{background:var(--s26-wit);border:1px solid var(--s26-lijn);color:var(--s26-grijs)}
#openSolModal .rc-modal__foot .rc-btn-primary{background:var(--s26-oranje);border:0;color:var(--s26-wit)}
#openSolModal .rc-modal__foot .rc-btn-primary:hover{background:var(--s26-oranje-donker);box-shadow:none}

/* ---------- Tablet ---------- */
@media (max-width:1180px){
  .rc-main .rc-layout{grid-template-columns:264px minmax(0,1fr);gap:24px}
  .rc-main .rc-vac-card{padding:24px 22px 20px}
  .rc-main .rc-vac-card--row .v26-onder{flex-basis:170px;padding-right:0}
}
@media (max-width:980px){
  .vac-hero{margin:0 12px;padding:32px 0 30px;background-image:none}
  .vac-hero::before{display:none}
  .vac-hero .vac-hero-sub{font-size:17px}
  .vac-hero .vac-hero-form{max-width:none}
  main.rc-main{margin-top:16px;padding:28px 0 56px}
  .rc-main .rc-layout{display:flex;flex-direction:column;gap:20px;margin:0}
  .rc-main .rc-filter-col,.rc-main .rc-results-col{width:100%;min-width:0}
  .rc-main .rc-vac-card.rc-vac-card--row{flex-direction:column;gap:0}
  .rc-main .rc-vac-card--row .rc-vac-lines{display:flex}
  .rc-main .rc-vac-card--row .v26-wie{padding-right:44px}
  .rc-main .rc-vac-card--row .v26-feiten{margin-top:18px}
  .rc-main .rc-vac-card--row .v26-onder{flex:0 0 auto;flex-direction:row;align-items:center;margin-top:18px;padding:16px 0 0;border-left:0;border-top:1px solid var(--s26-lijn)}
}
@media (min-width:768px) and (max-width:980px){
  .rc-main .rc-filters-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .rc-main .rc-filter-group{border-top:0;padding:12px 0}
  .rc-main .rc-filter-group[data-filter="reset"]{grid-column:1 / -1}
}

/* ---------- Telefoon ---------- */
@media (max-width:767px){
  .rc-main .container{width:calc(100% - 32px)}
  .vac-hero .container{width:calc(100% - 40px)}
  .vac-hero .vac-hero-form{grid-template-columns:1fr}
  .vac-hero .vac-field + .vac-field input{border-left:0;border-top:1px solid var(--s26-lijn);border-radius:0}
  .vac-hero .vac-hero-btn{width:100%;margin-top:6px}

  /* Filters: dichtgeklapt als een balk, het bestaande script klapt hem open */
  .rc-main .rc-filters{padding:0;border-radius:var(--s26-r)}
  .rc-main #filtersToggle{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:54px;margin:0;padding:8px 18px;background:none;border:0;border-radius:var(--s26-r)}
  .rc-main .rc-filters-title{font-size:15px;flex:0 0 auto}
  .rc-main .v26-filter-uitleg{display:block;flex:1 1 auto;min-width:0;font-size:14px;font-weight:500;color:var(--s26-zacht);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rc-main #filtersToggle::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:1.5px solid var(--s26-grijs);border-bottom:1.5px solid var(--s26-grijs);transform:rotate(45deg);margin:-4px 2px 0 0}
  .rc-main #filtersToggle[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:4px}
  .rc-main #filtersPanel{display:none}
  .rc-main #filtersPanel.is-open{display:flex;padding:0 18px 18px}
  .rc-main .rc-filter-group[data-filter="functie"]{border-top:1px solid var(--s26-lijn);padding-top:18px}
  .rc-main .rc-check{min-height:44px}

  /* Op de telefoon zien raster en lijst er hetzelfde uit: de wisselknop is daar niet nodig */
  .rc-main .rc-view-toggle{display:none}
  .rc-main .rc-results-headbox{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px}
  .rc-main .rc-head-left{display:block}
  .rc-main .rc-sortwrap .rc-select{width:100%;min-width:0}
  .rc-main .rc-head-right{justify-content:space-between;gap:12px}
  .rc-main .rc-results-meta{flex-wrap:wrap;gap:4px 16px;margin-bottom:14px}
  .rc-main .rc-results-grid{gap:16px}
  .rc-main .rc-vac-card,.rc-main .rc-vac-card.rc-vac-card--row{padding:22px 20px 18px;min-height:0}
  .rc-main .v26-titel{font-size:18px}
  .rc-main .v26-feiten{grid-template-columns:58px minmax(0,1fr);gap:5px 14px}
  .rc-main .v26-bekijk{padding:12px 0}
  .rc-main .rc-save-btn{top:8px;right:8px}
  .rc-main .rc-pagination{margin-top:28px}
  #openSolModal .rc-modal__head{padding:14px 16px}
  #openSolModal .rc-modal__body{padding:16px}
  #openSolModal .rc-modal__foot .rc-btn{flex:1 1 0;padding:14px 12px}
}
@media (max-width:359px){
  .vac-hero{margin:0 8px}
  .rc-main .rc-head-right{flex-direction:column;align-items:flex-start;gap:4px}
  .rc-main .v26-onder{flex-wrap:wrap}
}

/* 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){
  .rc-main .rc-vac-card{transition:none}
}