/* ===========================
   /css/sectie1-header-hero.css
   HEADER + HERO (alles wat daar bij hoort)
   =========================== */

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}

/* Mijn Recrewters: groen icoon bij ingelogd */
#mijnRecrewtersBtn.is-logged-in .rcUserIcon{
  color:#129852;
}

/* dropdown items niet extra dik */
.rcUserMenu .rcUserItem,
.rcUserMenu .rcUserItemBtn{
  font-weight:100;
}


/* Logo iets kleiner */
.brand{ margin-left:-6px; display:flex; align-items:center; }
.brand img{
  height:52px;
  width:auto;
  max-width:none;
}

.nav{
  margin-left:28px;
  gap:20px;
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* ===================== HOOFDMENU LINKS (alleen top-level) ===================== */
.nav > a,
.nav > .dd > a{
  padding:12px 8px;
  position:relative;
  display:inline-flex;
  align-items:center;

  font-family:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:600;
  font-size:17px;
  line-height:1.1;

  color: var(--brand-dark);
}

/* underline hover (alleen hoofdmenu, niet dropdown) */
.nav > a::after,
.nav > .dd > a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  height:3px;                 /* ✅ gelijk aan dropdown underline */
  width:0;
  background: var(--brand-orange);
  transform: translateX(-50%);
  transition: width .18s ease;
}
.nav > a:hover::after,
.nav > .dd > a:hover::after{
  width: calc(100% - 16px);
}
.nav > a:hover,
.nav > .dd > a:hover{
  color:var(--brand-orange);
}

.header-actions{
  display:flex; align-items:center; gap:14px;
  font-family:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:600;
  flex-wrap:nowrap;
}
.header-actions a{
  position:relative;
  display:flex; align-items:center; gap:8px;
  padding:10px 8px;

  color: var(--brand-dark);
  white-space:nowrap;
  font-size:17px;
  line-height:1.1;
}

.header-actions a::after{ display:none !important; }
.header-actions a:hover{ color:var(--brand-orange); }

.icon{
  width:18px; height:18px; display:inline-block;
  color: var(--brand-dark);
}
.header-actions a:hover .icon{ color: var(--brand-orange); }

/* Dropdown base */
.dd{ position:relative; }

.dd-panel{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%);

  width:max-content;
  min-width:260px;
  max-width:min(92vw, 420px);
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:18px;
  display:none;
}

.dd-panel::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #fff;
  filter: drop-shadow(0 -1px 0 rgba(15,23,42,.10));
}
.dd.open .dd-panel{ display:block; }

/* ===================== DROPDOWN LINKS ===================== */

/* Submenus basis */
.dd-menu a{
  display:block;
  padding:6px 10px;        /* 🔽 was 10px 10px → strakker */
  border-radius:0;

  font-family:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:500;
  font-size:14.5px;

  color: var(--brand-dark);
  background:transparent;
  text-decoration:none;
  white-space:nowrap;
}

/* underline alleen op tekst */
.dd-menu a span{
  display:inline-block;
  border-bottom:3px solid transparent;
  padding-bottom:3px;     /* 🔽 was 6px → strakker maar nog netjes */
}


/* hover */
.dd-menu a:hover{
  color:var(--brand-orange);
  background:transparent;
}
.dd-menu a:hover span{
  border-bottom-color: var(--brand-orange);
}

/* SEARCH DROPDOWN */
.search-panel{
  width:max-content;
  min-width:300px;
  max-width:min(92vw, 420px);
  border-radius:12px;
  padding:26px 26px 22px;
}
.search-panel h4{
  margin:0 0 12px;
  font-weight:900;
  font-size:20px;
  color: var(--brand-dark);
}
.search-panel p{
  margin:0 0 18px;
  color: var(--brand-dark);
  opacity:.75;
  font-weight:500;
  font-size:14.5px;
  line-height:1.45;
}

.search-panel .field{ position:relative; margin-bottom:14px; }
.search-panel .field input{
  width:100%;
  border:1px solid rgba(17,24,39,.35);
  border-radius:0;
  padding:14px 16px;
  outline:none;
  font-weight:500;
  font-size:14.5px;
  background:#fff;
  color:#111827;
}
.search-panel .field input::placeholder{ color: rgba(17,24,39,.45); }
.search-panel .field input:focus{
  border-color: rgba(225,85,44,.55);
  box-shadow: 0 0 0 4px rgba(225,85,44,.14);
}

/* locatie prikker oranje */
.search-panel .loc-pin{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color: var(--brand-orange);
  pointer-events:none;
}

.search-panel .btn-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin-top:8px;
}

.search-panel .search-btn{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:999px;
  background:#fff;
  border:2px solid var(--brand-orange);
  color: var(--brand-orange);

  font-weight:900;
  letter-spacing:.06em;
  padding:13px 26px;
  cursor:pointer;

  box-shadow:none;
  transition: transform .15s ease, filter .15s ease;
}
.search-panel .search-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Bekijk alle vacatures: oranje, hover #3C2C2D */
.search-panel .all-link{
  align-self:flex-end;
  display:block;
  text-align:right;
  margin-top:6px;
  padding:0;
  font-weight:500;
  font-size:14.5px;
  color: var(--brand-orange);
  text-decoration:none;
}
.search-panel .all-link:hover{
  color: var(--brand-dark);
}

/* ===================== MOBILE (hamburger) ===================== */
.mobile-toggle{
  display:none;
  border:none;
  background:transparent;
  padding:10px 8px;
  cursor:pointer;
  color: var(--brand-dark);
}
.mobile-toggle:hover{ color: var(--brand-orange); }

.mobile-drawer{ display:none; }

@media (max-width: 980px){
  .nav{ display:none !important; }
  .header-actions{ display:none !important; }
  .mobile-toggle{ display:grid !important; place-items:center; }
}

/* Drawer */
.mobile-drawer{
  border-top:1px solid rgba(15,23,42,.08);
  padding:10px 0 16px;
}
.mobile-drawer.open{ display:block; }

/* ✅ HOOFDMENU (minder dik): alle directe items in drawer */
.mobile-drawer > a,
.mobile-drawer > .m-acc-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px 0;
  font-family:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:17px;
  font-weight:700;
  line-height:1.1;

  color: var(--brand-dark);
  border-bottom:1px dashed rgba(15,23,42,.10);

  background:transparent;
  border-left:0;
  border-right:0;
  border-top:0;
  border-bottom:1px dashed rgba(15,23,42,.10);
  width:100%;
  text-align:left;
  cursor:pointer;
}

.mobile-drawer > a:hover,
.mobile-drawer > .m-acc-btn:hover{
  color: var(--brand-orange);
}

/* ✅ ICON hoofdmenu items (zelfde als hoofdmenu, maar links uitlijnen) */
.mobile-drawer > a.m-ico{
  justify-content:flex-start;
}
.mobile-drawer > a.m-ico .icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

/* ✅ SUBMENU (niet dik) */
.mobile-drawer .m-acc-panel{
  display:none;
  padding:6px 0 10px 14px;
}
.mobile-drawer .m-acc-panel a{
  display:block;
  padding:10px 0;

  font-family:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:14.5px;
  font-weight:500;
  line-height:1.25;

  color: var(--brand-dark);
  border-bottom:1px dashed rgba(15,23,42,.08);
}
.mobile-drawer .m-acc-panel a:hover{ color: var(--brand-orange); }
.mobile-drawer .m-acc-panel a:last-child{ border-bottom:none; }

/* laatste hoofd item geen streep */
.mobile-drawer > a:last-child{ border-bottom:none; }

/* Mijn Recrewters icoon altijd oranje (mobiel) */
.mobile-drawer > a.m-ico[href="#mijnrecrewters"] .icon{
  color: var(--brand-orange);
}

/* laatste border weg */
.mobile-drawer a:last-child{ border-bottom:none; }

.site-header,
.header-row{
  max-width:100%;
}
.header-row > *{
  min-width:0;
}
.dd-panel{
  max-width: min(92vw, 420px);
  overflow-x:hidden;
}
@media (max-width: 980px){
  .dd-panel{
    right: 10px;
    left: auto;
    transform:none;
  }
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  overflow:clip;  /* was: hidden — overflow:hidden blokkeert touch/focus op iOS Safari */
  width:100%;
  background:#0c3034;
  border-bottom:1px solid rgba(15,23,42,.08);
  min-height: 520px;
}

/* FOTO LAAG */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-image);
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  z-index:0;
}

/* OVERLAY LAAG */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 25%, rgba(255,255,255,.72), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, rgba(12,48,52,.78) 0%, rgba(12,48,52,.42) 46%, rgba(12,48,52,.12) 100%);
  z-index:1;
  pointer-events:none;
}

/* CONTENT */
.hero-inner{
  position:relative;
  z-index:2;
  padding: 96px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns: 520px 1fr;
  gap:40px;
  align-items:center;
}

@media (max-width: 980px){
  .hero::before{
    background-size: cover;
    background-position: 70% center;
  }
  .hero::after{
    /* lichte laag bovenaan voor leesbare donkere tekst,
       transparanter onderaan zodat de persoon zichtbaar blijft */
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.50) 0%,
        rgba(255,255,255,.35) 40%,
        rgba(255,255,255,.12) 75%,
        rgba(255,255,255,.04) 100%);
  }
  .hero-inner{padding:64px 0 54px}
  .hero-grid{grid-template-columns: 1fr}

}

@media (max-width: 600px){
  .hero::before{
    background-position: 75% center;
  }
}

.hero-title{
  font-family:"Sora", "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--brand-dark);
  font-weight:400;
  font-size: clamp(32px, 3.2vw, 52px);
  line-height:1.02;
  letter-spacing:-0.6px;
  text-transform:uppercase;
  margin:0 0 22px;
  text-shadow:none;

  width:100%;
  max-width:none;

  white-space:normal;
}

/* Alleen BAAN! op nieuwe regel */
.hero-title-inline{
  display:block;
  white-space:normal;
}

.hero-sub{
  color: var(--brand-dark);
  font-size: 18px;
  line-height:1.6;
  margin:0 0 26px;
  max-width: 56ch;
  font-weight:650;
}

.hero-form{
  width:100%;
  max-width:none;
  margin-top: 6px;
  position: relative;
  z-index: 5;  /* boven ::after (z-index:1) en ::before (z-index:0) */
}

.hero-form .field{
  position:relative;
  margin-bottom: 12px;
}

.hero-form input{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding:14px 14px;
  outline:none;
  font-weight:650;
  background: rgba(255,255,255,.95);
  color:#111827;
}

.hero-form input:focus{
  box-shadow: 0 0 0 4px rgba(225,85,44,.25);
  border-color: rgba(225,85,44,.55);
}

.hero-form .loc-pin{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color: var(--brand-orange);
  pointer-events:none;
}

.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  border-radius:999px;
  padding:12px 18px;
  font-weight:950;
  cursor:pointer;
  background:#fff;
  color:#111827;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease, color .18s ease;
}

.hero-cta svg{ color: var(--brand-orange); }

.hero-cta:hover{
  transform: translateY(-1px);
  color: var(--brand-orange);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* Bekijk alle vacatures */
.hero-all{
  display:block;
  width:fit-content;
  margin-top: 32px;
  margin-bottom: 32px;
  font-weight:950;
  color: var(--brand-orange);
  text-decoration:none;
}
.hero-all:hover{
  color:#fff;
}

/* chips */
.hero-tag{
  margin-top:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px 12px;
  width:100%;
  max-width:520px;
}

.hero-tag .chip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;

  white-space:normal;
  overflow:visible;
  text-overflow:clip;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;

  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  font-size:12px;
  line-height:1.15;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

@media (max-width: 720px){
  .hero-tag{ grid-template-columns: 1fr; }
  /* Chips donker op alle kleine schermen */
  .hero-tag .chip {
    background: rgba(0,0,0,.50) !important;
    border-color: rgba(255,255,255,.25) !important;
    color: #fff !important;
  }
}

/* ── Mobile hero fixes ─────────────────────────────── */
@media (max-width: 600px) {
  .hero-title {
    font-size: clamp(22px, 7.5vw, 32px) !important;
    word-break: break-word;
    overflow-wrap: break-word;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  .hero-sub {
    font-size: 15px;
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
  }
  .hero-form input {
    font-size: 15px;
    padding: 12px 12px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .hero-form {
    max-width: 100%;
    box-sizing: border-box;
  }
  .hero-cta {
    width: 100%;
    justify-content: center;
  }
  .rc-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .rc-hero-match-btn {
    width: 100%;
    justify-content: center;
  }
  .hero-tag {
    margin-top: 16px;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  /* Chips leesbaar op foto-achtergrond */
  .hero-tag .chip {
    background: rgba(0,0,0,.52) !important;
    border-color: rgba(255,255,255,.28) !important;
    color: #fff !important;
    font-size: 11px;
    text-shadow: none;
  }
  /* "Bekijk alle vacatures" link zichtbaar maken */
  .hero-all {
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
  }
  .hero-all:hover { color: #ff6a00 !important; }
  .hero-inner { padding: 40px 0 36px; }
}