/* -------------------------------------------
   TYPO / BASIS
------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Dosis');

body{
  font-family: Dosis, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  line-height: 1.6em;
  letter-spacing: 0.2px;
}

#topMain > li a{
  font-family: Dosis, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#topNav ul.dropdown-menu li a{
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
}

h1,
section.page-header h1{
  font-family: Dosis, sans-serif;
  font-weight: 600;
  font-size: 28px;
}

h2{
  font-family: Dosis, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 24px;
}

h3{
  font-family: Dosis, sans-serif;
  font-weight: 600;
  font-size: 22px;
}

h4{
  font-family: Dosis, sans-serif;
  font-weight: 600;
  font-size: 20px;
}

h5{
  font-family: Dosis, sans-serif;
  font-weight: 300;
  font-size: 18px;
}

h6{
  font-family: Dosis, sans-serif;
  font-weight: 300;
  font-size: 16px;
}

.info-bar h3{
  font-family: Dosis, sans-serif;
  font-weight: 800;
  font-size: 15px;
}

.info-bar p{
  font-family: Dosis, sans-serif;
  font-weight: 200;
  font-size: 16px;
}

.ctreigen .row,
section.page-header{
  border: 1px solid transparent;
}

.item-box{
  border-radius: 10px;
  background: #fff;
}

.item-box .overlay{
  border-radius: 15px 15px 0 0;
}

.lightbox-ajax{
  max-width: 1200px;
}

.btn{
  font-weight: 600;
  font-size: 18px;
  border-radius: 35px;
  padding: 6px 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.media img{
  border-radius: 20px;
}

.markeer{
  background-color: #77be23 !important;
}

/* -------------------------------------------
   VACATURE OVERZICHT (cards)
------------------------------------------- */
.vacature-card{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vacature-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

/* VACATURE OVERZICHT – FOTO 3:2 + TOP ALIGN */
.vacature-media{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;      /* 3:2 verhouding */
  background: #f4f4f4;
  overflow: hidden;          /* nodig voor hoverfoto */
}

/* Basisfoto + hoverfoto */
.vacature-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* vult de container */
  object-position: top;      /* foto bovenaan */
  display: block;
}

/* Hoverfoto fade-in */
.vacature-media .img-over{
  opacity: 0;
  transition: opacity .25s ease;
}

.vacature-card:hover .vacature-media .img-over{
  opacity: 1;
}

/* Verberg het hele panel als de omschrijving leeg is (detail) */
.panel-card:has(.panel-body:empty){
  display: none !important;
  height: 0;
  margin: 0;
  padding: 0;
}

.vacature-content{
  display: flex;
  flex-direction: column;
  padding: 16px;
  flex: 1 1 auto;
}

.vacature-titel{
  font-size: 20px;
  margin: 0 0 8px;
}

.vacature-intro{
  color: #555;
  margin: 0 0 12px;
}

.vacature-meta{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.vacature-meta .veld{
  display: flex;
  align-items: center;
  margin: 6px 0;
  line-height: 1.3;
  color: #555;
}

/* let op: geen whitespace binnen lege <li> */
.vacature-meta .veld:empty{
  display: none;
}

.vacature-meta .veld::before{
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  margin-right: 8px;
  speak: none;
  display: inline-block;
}

.vacature-meta .locatie::before{  content: "\f041"; color: #2D7EF7; }  /* map-marker */
.vacature-meta .salaris::before{  content: "\f153"; color: #28a745; }  /* eur */
.vacature-meta .uren::before{     content: "\f017"; color: #FF8A00; }  /* clock-o */
.vacature-meta .taal::before{     content: "\f1ab"; color: #8A63D2; }  /* language */

.vacature-btn{
  margin-top: auto;
  border-radius: 8px;
}

/* Foto klikbaar wrapper */
.vacature-media-link{
  display: block;
  text-decoration: none;
  color: inherit;
  line-height: 0;
}

.vacature-media-link:hover,
.vacature-media-link:focus{
  text-decoration: none;
  outline: none;
}

/* -------------------------------------------
   VACATURE DETAIL (linker panels + rechter details)
------------------------------------------- */
.panel-card{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: 20px;
  margin-bottom: 24px;
}

.panel-title{
  margin: 0 0 14px;
  font-size: 22px;
}

.details-list{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.details-list .veld{
  margin: 14px 0;
}

/* label + icoon */
.details-list .label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #222;
  padding: 0;
  background: none;
}

.details-list .value{
  margin: 6px 0 0 26px;
  color: #4a4a4a;
  line-height: 1.5;
}

.details-list .value:empty{
  display: none;
}

.details-list .label::before{
  font-family: "FontAwesome";
  font-weight: normal;
  display: inline-block;
  width: 18px;
  text-align: center;
}

.details-list .locatie .label::before{      content: "\f041"; color: #2D7EF7; }
.details-list .salaris .label::before{      content: "\f153"; color: #28a745; }
.details-list .dienstverband .label::before{content: "\f017"; color: #FF8A00; }
.details-list .rijbewijs .label::before{    content: "\f1b9"; color: #E67E22; }
.details-list .taal .label::before{         content: "\f1ab"; color: #8A63D2; }
/* icoon voor huisvesting */
.details-list .huisvesting .label::before{  content: "\f015"; color: #2D7EF7; } /* home */

.details-list .veld + .veld{
  border-top: 1px dashed #eee;
  padding-top: 12px;
}

.btn.btn-success.btn-lg{
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 18px;
}

.btn-outline{
  border: 2px solid #97bb3a;
  border-radius: 10px;
  color: #97bb3a;
  background: #fff;
}

.btn-outline:hover{
  background: #97bb3a;
  color: #fff;
}

.details-card hr{
  margin: 16px 0;
}

.contact-mini i{
  width: 18px;
  text-align: center;
  margin-right: 6px;
  color: #666;
}

/* Salaris: 'bruto (xx u p/w)' */
.details-list .salaris .amount{
  font-weight: 600;
}

.details-list .salaris .amount:not(:empty)::after{
  content: " bruto";
}

.details-list .salaris .amount:not(:empty)[data-uren]:not([data-uren=""])::after{
  content: " bruto (" attr(data-uren) " u p/w)";
}

/* verberg hele salaris-rij als bedrag leeg is (moderne browsers) */
.details-list .salaris:has(.amount:empty){
  display: none;
}

/* -------------------------------------------
   STICKY SIDEBAR (definitief)
------------------------------------------- */

/* wrapper mag sticky niet breken – alleen op detailpagina's */
#wrapper:has(.vacature-detail){
  overflow: visible !important;
  transform: none !important;
}

/* deze specifieke rij terug naar block (sommige thema's maken .row flex) */
.vacature-detail .vacature-layout{
  display: block !important;
}

/* sticky op de RECHTER KOLOM (BS3 floats) */
@media (min-width: 992px){
  .vacature-detail .col-md-4{
    position: -webkit-sticky;
    position: sticky;
    top: 80px;   /* offset t.o.v. header */
    z-index: 2;
  }
}

/* mobiel: geen sticky */
@media (max-width: 991px){
  .vacature-detail .col-md-4{
    position: static;
    top: auto;
  }
}

/* -------------------------------------------
   FOTO-PANEL BOVENAAN DETAIL
------------------------------------------- */

/* Container van beide foto's */
.panel-fotos{
  margin-bottom: 24px;
}

/* Foto wrapper met ronde hoeken + schaduw + vaste verhouding */
.foto-wrap{
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  aspect-ratio: 3 / 2;        /* 3:2 verhouding */
  width: 100%;
  background: #f4f4f4;        /* fallback kleur */
}

/* Foto zelf */
.foto-wrap img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* vult vlak */
  object-position: top;       /* boven uitlijnen */
}