/* ZorgMania visual lock - 17-09-2026
   Static CSS on purpose: the correct hero must be present on FIRST paint,
   never swapped in later by JavaScript. */
:root{
  --zm-anthracite:#292b30;
  --zm-anthracite-hover:#1f2125;
  --zm-rainbow:linear-gradient(90deg,#ff6a00 0%,#ffc000 18%,#21ae8b 38%,#00b4d8 58%,#1678e8 75%,#8a35df 88%,#eb008c 100%);
}

/* Exact user-approved homepage banner. No alternate hero, no fallback photo. */
.hero{
  min-height:0!important;
  aspect-ratio:1536/728!important;
  background-color:#090a0d!important;
  background-image:url('/assets/zorgmania-header.jpg?v=20260922-clean2')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.hero:before,
.hero-copy,
.hero-people,
.hero-geometry{
  display:none!important;
}

/* Existing approved care image further down the homepage. */
.care-photo{
  background-color:#17181d!important;
  background-image:url('/assets/zorgmania-care-restored.jpg?v=20260922-restored1')!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}

/* Buttons: anthracite body, rainbow only as a restrained accent. */
.gradient-btn,
.ghost-btn,
.dark-outline,
button[type='submit'],
.filter-reset{
  position:relative!important;
  overflow:hidden!important;
  background:var(--zm-anthracite)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 10px 22px rgba(17,18,24,.15)!important;
  filter:none!important;
}
.gradient-btn:after,
.ghost-btn:after,
.dark-outline:after,
button[type='submit']:after,
.filter-reset:after{
  content:'';
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:var(--zm-rainbow);
  pointer-events:none;
}
.gradient-btn:hover,
.ghost-btn:hover,
.dark-outline:hover,
button[type='submit']:hover,
.filter-reset:hover{
  background:var(--zm-anthracite-hover)!important;
  transform:translateY(-2px);
  box-shadow:0 15px 30px rgba(17,18,24,.2)!important;
}

/* Vacancy search bar */
.vacancy-filter-bar{margin-top:28px!important;margin-bottom:34px!important}
.vacancy-filter-bar .filters{
  display:grid!important;
  grid-template-columns:minmax(260px,2fr) minmax(190px,1fr) auto!important;
  align-items:stretch!important;
  gap:12px!important;
  margin:0!important;
  padding:16px!important;
  border:1px solid #e2e4e8!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(17,18,24,.08)!important;
}
.vacancy-filter-bar .filters input,
.vacancy-filter-bar .filters select{
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  margin:0!important;
  padding:0 16px!important;
  border:1px solid #d7d9de!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#17181d!important;
  font:inherit!important;
  font-size:15px!important;
  outline:none!important;
}
.vacancy-filter-bar .filters input:focus,
.vacancy-filter-bar .filters select:focus{
  border-color:#7c7f87!important;
  box-shadow:0 0 0 4px rgba(41,43,48,.08)!important;
}
.vacancy-filter-bar .filters input::placeholder{color:#858891}
.filter-reset{
  min-width:132px;
  min-height:52px!important;
  border-radius:12px!important;
  padding:0 18px!important;
  font-weight:800!important;
  cursor:pointer;
}

@media(max-width:900px){
  .hero{aspect-ratio:1536/728!important}
  .vacancy-filter-bar .filters{grid-template-columns:1fr 1fr!important}
  .filter-reset{grid-column:1/-1}
}
@media(max-width:650px){
  .hero{
    min-height:0!important;
    aspect-ratio:1536/728!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  .vacancy-filter-bar .filters{grid-template-columns:1fr!important;padding:12px!important}
  .filter-reset{grid-column:auto;width:100%}
}


/* Hard-render the approved hero as a real image element on all devices. */
.hero{
  aspect-ratio:auto!important;
  background-image:none!important;
  background:#090a0d!important;
}
.hero-hard-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
  position:relative!important;
  z-index:0!important;
}
@media(max-width:900px){
  .hero{aspect-ratio:auto!important}
  .hero-hard-image{width:100%!important;height:auto!important}
}
@media(max-width:650px){
  .hero{aspect-ratio:auto!important}
  .hero-hard-image{width:100%!important;height:auto!important;object-fit:cover!important}
}


/* Definitieve homepage hero: exacte aangeleverde ZorgMania-banner. */
.hero{
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:1536/728!important;
  background-color:#090a0d!important;
  background-image:url('/assets/zorgmania-header.jpg?v=20260922-clean2')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  overflow:visible!important;
  margin-bottom:98px!important;
}
.hero:before{display:none!important;content:none!important;}
.hero-copy,.hero-people,.hero-hard-image{display:none!important;}
.hero .audience-switch{z-index:5!important;}
@media(max-width:900px){
  .hero{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1536/728!important;
    background-size:cover!important;
    background-position:center center!important;
  }
}
@media(max-width:650px){
  .hero{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1536/728!important;
    background-size:cover!important;
    background-position:center center!important;
  }
}

/* Slogan terug op de rustige linkerhelft, los van beeld en personen. */
.hero-slogan{
  position:absolute!important;
  z-index:4!important;
  left:clamp(28px,7vw,110px)!important;
  top:57%!important;
  transform:translateY(-50%)!important;
  max-width:38%!important;
  color:#fff!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-style:italic!important;
  font-weight:700!important;
  font-size:clamp(30px,3.4vw,58px)!important;
  line-height:1.05!important;
  letter-spacing:-1px!important;
  text-shadow:0 3px 18px rgba(0,0,0,.55)!important;
  pointer-events:none!important;
}
@media(max-width:900px){
  .hero-slogan{
    left:24px!important;
    top:58%!important;
    max-width:42%!important;
    font-size:clamp(24px,5vw,38px)!important;
  }
}
@media(max-width:650px){
  .hero-slogan{
    left:28px!important;
    top:18%!important;
    transform:none!important;
    max-width:48%!important;
    font-size:clamp(18px,5.7vw,26px)!important;
    line-height:.98!important;
  }
}

@media(min-width:901px){
  .hero-slogan{
    left:clamp(90px,10vw,180px)!important;
    top:44%!important;
    transform:translateY(-50%)!important;
    max-width:34%!important;
    font-size:clamp(34px,3vw,54px)!important;
    line-height:1.02!important;
  }
}