/* ===========================
   /css/site.css  (HOOFD / MAIN)
   - bevat: :root + reset/base + container + sections/cards/buttons + stack timing fix
   - laadt de 5 sectie css files in
   =========================== */

/* ===================== SECTIE CSS LADEN (MOET BOVENAAN) ===================== */
@import url("/css/sectie1-header-hero.css");
@import url("/css/sectie2-overons.css");
@import url("/css/sectie3-vacatures.css");
@import url("/css/sectie4-opdrachtgevers.css");
@import url("/css/sectie5-footer.css");

/* ===== Main vars (blijven in hoofd css) ===== */
:root{
  --brand-orange:#E1552C;
  --brand-dark:#3C2C2D;
  --brand-cream:#EDE4DD;
  --brand-light:#F7F7F7;

  --text:#1F2937;
  --muted:#6B7280;

  --radius:18px;
  --shadow: 0 18px 50px rgba(17,24,39,.12);
  --shadow-soft: 0 10px 30px rgba(17,24,39,.10);
  --ring: 0 0 0 4px rgba(225,85,44,.20);

  --hero-image: url("/assets/hero/hero.jpg");
}

/* ===== Base ===== */
*{box-sizing:border-box}
/* NIET: html,body{height:100%} — breekt position:sticky door body als scroll container te forceren */
body{
  margin:0;
  min-height:100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:#fff;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{
  width:min(1280px, calc(100% - 40px));
  margin-inline:auto;
}

/* Horizontale overflow voorkomen zonder sticky te breken */
html{
  width:100%;
  /* GEEN overflow op html — breekt position:sticky */
}
body{
  width:100%;
  /* GEEN overflow-x:hidden op body — computes overflow-y:auto per CSS spec → breekt sticky */
  /* Horizontale overflow wordt voorkomen per element via max-width */
}
img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

/* Verwijder 300ms tap-delay op alle interactieve elementen */
a, button, input, select, textarea,
[role="button"], label, summary {
  touch-action: manipulation;
}

/* ===================== SECTIONS (algemeen) ===================== */
.section{ padding:56px 0; }
.section.alt{ background: linear-gradient(180deg, #fff, var(--brand-light)); }
.section.cream{ background: linear-gradient(180deg, #fff, var(--brand-cream)); }

.section h2{
  margin:0 0 10px;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing:-.4px;
  font-weight:950;
}
.section p.lead{
  margin:0 0 26px;
  color: var(--muted);
  font-weight:650;
  line-height:1.55;
  max-width:75ch;
}

/* Cards */
.grid{ display:grid; gap:16px; }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }

@media (max-width:1100px){
  .grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:720px){
  .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--radius);
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 28px rgba(15,23,42,.07);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(225,85,44,.22);
}
.card-media{
  height:160px;
  background:
    radial-gradient(400px 220px at 30% 30%, rgba(225,85,44,.35), rgba(225,85,44,0) 60%),
    radial-gradient(360px 200px at 75% 35%, rgba(60,44,45,.22), rgba(60,44,45,0) 60%),
    linear-gradient(135deg, #fff, var(--brand-light));
}
.card-body{ padding:18px 18px 16px; }
.card-kicker{
  display:inline-flex;
  gap:8px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: rgba(17,24,39,.60);
}
.card-title{
  margin:10px 0 8px;
  font-size:20px;
  font-weight:950;
  letter-spacing:-.3px;
}
.card-text{
  margin:0 0 14px;
  color: var(--muted);
  line-height:1.55;
  font-weight:650;
}
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn.primary{
  background: linear-gradient(135deg, var(--brand-orange), #ff6b3a);
  color:#fff;
  box-shadow: 0 14px 26px rgba(225,85,44,.22);
  position:relative;
  overflow:hidden;
}
.btn.primary:hover{
  box-shadow: 0 18px 34px rgba(225,85,44,.28);
  filter: brightness(1.02);
}
.btn.ghost{
  background:#fff;
  color:#111827;
  border:1px solid rgba(15,23,42,.14);
}
.btn.ghost:hover{
  border-color: rgba(225,85,44,.35);
  color: var(--brand-orange);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
.btn:active{ transform: translateY(1px); }

/* =========================================================
   RC Button — Arrow pill (COMPACT + huisstijl, niet dik)
========================================================= */
:root{
  --rc-btn-bg: var(--brand-orange);
  --rc-btn-text: #ffffff;
  --rc-btn-bg-hover: color-mix(in srgb, var(--brand-orange) 86%, #000 14%);
  --rc-btn-ring: rgba(225,85,44,.26);
}

.rc-btn-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding: 7px 10px;
  border-radius:999px;

  background: var(--rc-btn-bg);
  color: var(--rc-btn-text);

  font-family: var(--font-sans);
  font-weight: 600;     /* ✅ normaler dan 650/800 */
  font-size: 12px;
  line-height: 1;

  text-decoration:none;
  border:1px solid var(--rc-btn-ring);
  box-shadow:0 8px 18px rgba(0,0,0,.10);

  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.rc-btn-arrow .rc-btn-text{
  white-space:nowrap;
  letter-spacing:0;
}

.rc-btn-arrow .rc-btn-ico{
  width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  flex:0 0 auto;

  color:currentColor;
  transition:transform .18s ease;
}

.rc-btn-arrow .rc-btn-ico svg{ width:20px; height:20px; display:block; }

@media (hover:hover){
  .rc-btn-arrow:hover{
    background: var(--rc-btn-bg-hover);
    box-shadow:0 10px 22px rgba(0,0,0,.14);
    transform:translateY(-1px);
  }
  .rc-btn-arrow:hover .rc-btn-ico{ transform:translateX(3px); }
}

@supports not (background: color-mix(in srgb, #fff, #000)){
  @media (hover:hover){ .rc-btn-arrow:hover{ filter:brightness(.95); } }
}

.rc-btn-arrow:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(225,85,44,.22), 0 10px 22px rgba(0,0,0,.14);
}


/* ===================== HERO TYPO (homepage) ===================== */
/* ✅ groot + responsive, zonder layout break op mobiel */
.hero-title{
  font-size: clamp(38px, 5.2vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* ✅ Forceer exact 2 regels in hero title */
.hero-title .hero-line1,
.hero-title .hero-line2{
  display: inline-block;
  white-space: nowrap;
}

/* ✅ Safety: op ultra-smal mag het wél breken om overflow te voorkomen */
@media (max-width: 380px){
  .hero-title .hero-line1,
  .hero-title .hero-line2{
    white-space: normal;
  }
}

.hero-title-inline{ font-size: inherit; }

.hero-sub{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.35;
}
.hero-sub strong{ font-weight: 700; }

/* ===================== STACK TIMING FIX (desktop) ===================== */
@media (min-width: 900px){
  :root{
    --stackTop: var(--hdrH);
    --stackOverlap: 300px;
    --stackPad: 16px;
    --stackSeam: 36px;

    /* ✅ NIEUW: release-space zodat #opdrachtgevers loslaat vóór de footer.
       Dit voorkomt:
       - stats achter footer verdwijnen
       - “kandidaat-sectie springt terug” bij volledig scrollen footer */
    --stackReleaseExtra: 360px; /* <-- mag je later tweaken (700-1000) */
  }

  #overons,
  #vacatures,
  #opdrachtgevers{
    position: sticky;
    top: var(--stackTop);
    min-height: calc(100svh - var(--stackTop));
    padding-top: var(--stackPad);
    padding-bottom: var(--stackPad);
    box-shadow: 0 -4px 16px rgba(17,24,39,.06);
  }

  /* Overlap (met seam) */
  #vacatures{
    margin-top: calc(-1 * var(--stackOverlap) + var(--stackSeam));
    z-index: 2;
  }

  #opdrachtgevers{
    margin-top: calc(-1 * var(--stackOverlap) + var(--stackSeam));
    z-index: 3;
  }

  /* Achtergrond per sectie */
  #overons{ background: linear-gradient(180deg, #fff, var(--brand-light)); z-index:1; }
  #vacatures{ background: var(--brand-cream); }
  #opdrachtgevers{ background: linear-gradient(180deg, #fff, var(--brand-light)); }

  /* ✅ Scroll-ruimte per sectie */
  #overons::after,
  #vacatures::after,
  #opdrachtgevers::after{
    content:"";
    display:block;
    pointer-events:none;
  }

  /* ✅ Overons + Vacatures houden “normale” extra ruimte */
  #overons::after,
  #vacatures::after{
    height: calc(var(--stackOverlap) + var(--stackSeam) + 240px);
  }

  /* ✅ Opdrachtgevers krijgt EXTRA release zodat footer nooit over de sticky heen schuift */
  #opdrachtgevers::after{
    height: calc(var(--stackOverlap) + var(--stackSeam) + var(--stackReleaseExtra));
  }

  /* Footer altijd bovenop, maar komt pas als sticky is losgelaten */
  footer{ position: relative; z-index: 10; }
}

/* Newsletter modal */
.nlModal { position: fixed; inset: 0; z-index: 999999; display: none; }
.nlModal[aria-hidden="false"] { display: block; }
.nlModalOverlay { position:absolute; inset:0; background: rgba(0,0,0,.55); }
.nlModalCard{
  position: relative;
  width: min(520px, calc(100vw - 28px));
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.25);
}
.nlModalClose{
  position:absolute; top:10px; right:10px;
  border:0; background:transparent; cursor:pointer;
  font-size: 18px; line-height: 1;
  opacity:.7;
}
.nlModalClose:hover{ opacity: 1; }
.nlModalIcon{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 999px;
  margin-bottom: 10px;
  background: rgba(18, 152, 82, .10);
  color: #129852;
  font-weight: 900;
}
.nlModalTitle{ margin: 0 0 6px; font-size: 18px; font-weight: 900; color:#1a1a1a; }
.nlModalText{ margin: 0 0 14px; opacity: .85; color:#333; }
.nlModalBtn{
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background:#f05a28;
  color:#fff;
  font-weight:700;
  font-size:14px;
}

/* ===================== Mijn Recrewters user dropdown ===================== */
.rcUserWrap{ position:relative; display:inline-flex; align-items:center; }
.rcUserCaret{ margin-left:6px; font-size:12px; opacity:.7; }

.rcUserMenu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(17,24,39,.12);
  padding: 8px;
  display:none;
  z-index: 9999;
}

.rcUserMenu[aria-hidden="false"]{ display:block; }

/* ── dropdown item tekst: ID-selector voor maximale specificiteit ── */
.rcUserItem,
#mijnRecrewtersMenu a,
#mijnRecrewtersMenu button,
#mijnRecrewtersMenu .rcUserItem {
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a !important;
  cursor:pointer;
  user-select:none;
  text-decoration:none !important;
  background: none;
  border: none;
  text-align: left;
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}

#mijnRecrewtersMenu a:hover,
#mijnRecrewtersMenu button:hover,
#mijnRecrewtersMenu .rcUserItem:hover {
  background: rgba(225,85,44,.10) !important;
  color: #f05a28 !important;
}

/* icoontjes donker (niet grijs) */
#mijnRecrewtersMenu .rcUmIc { color: #444 !important; }
#mijnRecrewtersMenu .rcUserItem:hover .rcUmIc { color: #f05a28 !important; }

.rcUserItemBtn{
  border:0;
  background:transparent;
  text-align:left;
}

:root{
  --brand-dark:#3C2C2D;
  --brand-accent:#E1552C;
  --brand-sand:#EDE4DD;
  --brand-light:#F7F7F7;

  /* ✅ 1 centrale font-variabele */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* ✅ Forceer Montserrat overal */
html, body{
  font-family: var(--font-sans) !important;
}

/* ✅ Ook op alle elementen (incl. popups/modals die later worden ingeladen) */
*,
*::before,
*::after{
  font-family: var(--font-sans) !important;
}

/* ✅ Form controls (sommige browsers geven eigen font) */
button, input, select, textarea, optgroup{
  font-family: var(--font-sans) !important;
}

/* =========================================================
   Breadcrumbs — STANDARD (globaal)
   Gebruik op alle pagina's: .rc-crumbs + .rc-crumb-dot
   Responsive: mobiel/tablet/desktop
========================================================= */

.rc-crumbs{
  display:flex;
  align-items:center;
  gap:10px;

  /* zelfde tint/vibe als over-ons */
  font-size: 13px;
  color: rgba(16,16,20,.62);

  /* boven de hero/kaart */
  margin: 8px 0 14px;

  /* altijd links */
  justify-content: flex-start;
}

.rc-crumbs a{
  color: inherit;
  text-decoration: none;
}

.rc-crumbs a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rc-crumb-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background: rgba(0,0,0,.28);
  display:inline-block;
}

/* Mobiel compacter */
@media (max-width: 560px){
  .rc-crumbs{
    margin: 6px 0 12px;
    font-size: 12px;
    gap: 8px;
  }
}