/* ════════════════════════════════════════
   COPET NAV — Shared mobile hamburger + drawer
   ════════════════════════════════════════
   Gebruikt door: partners.html, copetparent-help-centre.html.
   Index.html, hoe-het-werkt en over-ons hebben (nog) inline versie.
   Bij wijzigingen aan mobile-nav: pas dit bestand aan, NIET inline
   per pagina. Memory: reference_mobile_nav_shared.
   ════════════════════════════════════════ */

/* Default vars (worden overschreven door :root op pages die ze al definiëren) */
:root{
  --copet-nav-h: 60px;
  --copet-nav-bg: #fff;
  --copet-nav-line: #e2d9d5;
  --copet-nav-dark: #001738;
  --copet-nav-mid: #4a5568;
  --copet-nav-soft: #718096;
  --copet-nav-g: #86b558;
  --copet-nav-gd: #6fa043;
  --copet-nav-gl: #eef4e6;
  --copet-nav-bg-tint: #f8f4f2;
}

/* ── Hamburger button ─────────────────────────────── */
.nav-ham{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;cursor:pointer;padding:8px;
  border-radius:8px;transition:background .2s;
  flex-shrink:0;
}
.nav-ham:hover{background:var(--copet-nav-bg-tint)}
.nav-ham span{
  display:block;width:100%;height:2px;
  background:var(--copet-nav-dark);
  border-radius:2px;transition:all .3s;
}

/* ── Mobile drawer ─────────────────────────────── */
.nav-drawer{
  display:none;
  position:fixed;top:var(--copet-nav-h,60px);left:0;right:0;bottom:0;
  background:#fff;z-index:299;
  flex-direction:column;overflow-y:auto;
  border-top:1px solid var(--copet-nav-line);
}
.nav-drawer.open{display:flex}
.nav-drawer-link{
  display:block;
  padding:17px 24px;
  font-size:15px;font-weight:500;
  color:var(--copet-nav-dark);
  border-bottom:1px solid var(--copet-nav-line);
  transition:background .15s;cursor:pointer;
  text-decoration:none;
  font-family:inherit;
}
.nav-drawer-link:active{background:var(--copet-nav-bg-tint)}
.nav-drawer-divider{
  height:8px;background:var(--copet-nav-bg-tint);
  flex-shrink:0;
}
.drawer-auth-wrap{
  padding:28px 24px 20px;
  display:flex;flex-direction:column;gap:10px;
}
.drawer-btn-in,.drawer-btn-up{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:14px;border-radius:10px;
  font-size:14px;cursor:pointer;
  font-family:inherit;text-decoration:none;
  box-sizing:border-box;
}
.drawer-btn-in{
  font-weight:600;
  border:1.5px solid var(--copet-nav-line);
  color:var(--copet-nav-dark);
  background:#fff;
}
.drawer-btn-up{
  font-weight:700;
  background:var(--copet-nav-g);
  color:#fff;border:none;
  box-shadow:0 4px 14px rgba(134,181,88,.3);
}

/* ── Responsive: hamburger op <1100px, desktop nav-r op >=1100px ── */
@media(max-width:1099px){
  .copet-nav-r-desktop{display:none !important}
  .nav-ham{display:flex}
}
@media(min-width:1100px){
  .copet-nav-r-desktop{display:flex}
  .nav-ham{display:none}
  .nav-drawer{display:none !important}
}