/* ============================================================
   MOBIELE OVERRIDES voor Ampliar / Sociaal Ondernemen
   Laad dit bestand NÁ stijl.css zodat de overrides werken.
   ============================================================ */

/* Voorkom horizontaal scrollen op alle pagina's */
html, body { overflow-x: hidden; max-width: 100%; }
img, iframe, video, svg { max-width: 100%; height: auto; }

/* ----- HAMBURGER KNOP (wordt via JS toegevoegd) ----- */
.nav-burger{
  display:none;
  background:none;border:none;cursor:pointer;
  width:44px;height:44px;padding:10px;
  flex-direction:column;justify-content:space-between;
  align-items:stretch;
  margin-left:auto;
  position:relative;z-index:1001;
}
.nav-burger span{
  display:block;height:2px;background:#fff;border-radius:2px;
  transition:transform 0.25s,opacity 0.2s,background 0.2s;
  transform-origin:center;
}
body.menu-open .nav-burger span{background:#fff !important}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ----- MOBIEL MENU OVERLAY ----- */
.mobile-menu{
  position:fixed;inset:0;
  background:rgba(15,32,64,0.97);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.25s;
  padding:80px 24px 32px;
}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.mobile-menu ul{
  list-style:none;display:flex;flex-direction:column;gap:2px;
  width:100%;max-width:420px;padding:0;margin:0;
}
.mobile-menu ul li{margin:0}
.mobile-menu ul a{
  display:block;
  font-family:'Fraunces','Syne',serif;
  font-size:22px;font-weight:300;
  color:rgba(255,255,255,0.85);text-decoration:none;
  padding:14px 8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  letter-spacing:-0.3px;
  transition:color 0.15s;
}
.mobile-menu ul a.actief{color:var(--oker, #D4A017)}
.mobile-menu ul a:hover{color:var(--oker-mid, #E8C05A)}
.mobile-menu-cta{margin-top:20px}
.mobile-menu-cta a{
  background:var(--oker, #D4A017);
  color:var(--navy, #0F2040) !important;
  text-align:center;border-radius:40px;
  border-bottom:none !important;
  padding:16px 24px !important;
  font-size:16px !important;
  font-weight:600 !important;
  font-family:inherit !important;
}

/* ============================================================
   TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px){
  nav { padding: 14px 24px !important; }
  .sw, .vac-content, .filters-bar, .cta-band, .page-hero, .vac-hero { 
    padding-left: 32px !important; 
    padding-right: 32px !important; 
  }
  .nav-links { gap: 18px !important; }
  .nav-links a { font-size: 12px !important; }
}

/* ============================================================
   MOBIEL (max 768px) — kernbreakpoint
   ============================================================ */
@media (max-width: 768px){

  /* ----- NAVIGATIE ----- */
  nav { 
    padding: 12px 16px !important; 
    display: flex !important; 
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  nav .logo img,
  nav a.logo img { height: 28px !important; }
  nav .nav-links { display: none !important; }
  nav .nav-cta { display: none !important; }
  .nav-burger { display: flex !important; }

  /* ----- PAGE HERO (standaard subpagina header) ----- */
  .page-hero { padding: 80px 20px 40px !important; }
  .page-hero-inner { padding: 0 !important; max-width: 100% !important; }
  .page-hero .ttl,
  .page-hero h1,
  .page-hero h1.ttl { 
    font-size: clamp(28px, 8vw, 36px) !important; 
    line-height: 1.15 !important; 
    letter-spacing: -0.5px !important;
  }
  .page-hero .sub { font-size: 15px !important; line-height: 1.65 !important; }
  .page-hero .lbl { font-size: 11px !important; }

  /* ----- SECTIE WRAPS ----- */
  .sw { padding: 48px 20px !important; }
  .inner { padding: 0 !important; max-width: 100% !important; }
  .sw .ttl,
  section .ttl,
  h2.ttl { 
    font-size: clamp(24px, 6vw, 30px) !important; 
    line-height: 1.2 !important; 
    letter-spacing: -0.3px !important;
  }
  .sw .sub { font-size: 15px !important; }

  /* ----- GRIDS: 2/3-koloms naar 1-koloms ----- */
  .g2w, .g3w, .g2, .g3, .g4 { 
    grid-template-columns: 1fr !important; 
    gap: 20px !important;
  }

  /* ----- INLINE GRIDS via style="grid-template-columns:..." ----- */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* ----- INLINE FLEX MET GROTE GAP — stack op mobiel ----- */
  [style*="display:flex"][style*="gap:40px"],
  [style*="display: flex"][style*="gap: 40px"],
  [style*="display:flex"][style*="gap:48px"],
  [style*="display: flex"][style*="gap: 48px"],
  [style*="display:flex"][style*="gap:64px"],
  [style*="display: flex"][style*="gap: 64px"] {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }

  /* Portretfoto's in contactblokken kleiner */
  img[style*="width:160px"],
  img[style*="width: 160px"],
  img[style*="width:180px"],
  img[style*="width: 180px"] {
    width: 120px !important;
    height: 120px !important;
  }

  /* ----- FOOTER ----- */
  footer { padding: 48px 20px 24px !important; }
  footer .fi { 
    grid-template-columns: 1fr !important; 
    gap: 32px !important; 
    padding-bottom: 24px !important;
  }
  footer .fb { 
    flex-direction: column !important; 
    gap: 8px !important; 
    text-align: left !important; 
    align-items: flex-start !important;
  }

  /* ----- KNOPPEN: stack en full-width waar nodig ----- */
  .vac-hero-btns,
  .hero-btns,
  div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:16px"] { 
    flex-direction: column !important; 
    width: 100% !important;
  }
  .vac-hero-btns a,
  .hero-btns a,
  .vac-hero-btns .btn-primary,
  .vac-hero-btns .btn-outline,
  .vac-hero-btns .btn-navy { 
    width: 100% !important; 
    text-align: center !important; 
    box-sizing: border-box !important;
  }

  /* ----- VACATURES PAGINA ----- */
  .vac-hero { padding: 72px 20px 40px !important; }
  .vac-hero-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .vac-hero h1 { font-size: 30px !important; line-height: 1.15 !important; }
  .vac-hero .hero-stats { 
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .vac-hero .hero-stat { padding: 14px !important; }
  .vac-hero .hero-stat .num { font-size: 24px !important; }
  .vac-grid { 
    grid-template-columns: 1fr !important; 
    grid-auto-rows: auto !important; 
  }
  .vac-content { padding: 32px 20px !important; }
  
  /* Filters: scrollbaar wrappen */
  .filters-bar { 
    padding: 12px 16px !important; 
    position: static !important;
  }
  .filters-inner { 
    flex-wrap: wrap !important; 
    gap: 6px !important; 
  }
  .filter-btn { 
    padding: 6px 14px !important; 
    font-size: 12px !important; 
  }
  .filter-label { width: 100%; margin: 8px 0 4px !important; }

  /* ----- CTA BAND ----- */
  .cta-band { padding: 48px 20px !important; }
  .cta-band h3 { font-size: 24px !important; line-height: 1.2 !important; }
  .cta-band p { font-size: 14px !important; }

  /* ----- FORMULIEREN ----- */
  form .form-groep input,
  form .form-groep textarea,
  form .form-groep select { font-size: 16px !important; }  /* iOS zoom voorkomen */

  /* ----- VACATURE DETAIL ----- */
  .vacature-hero { padding: 80px 20px 40px !important; }
  .vacature-hero h1 { font-size: 28px !important; }

  /* ----- TABELLEN ----- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ----- ALGEMENE FALLBACK voor inline padding van 36px/48px ----- */
  div[style*="padding:36px"][style*="border-radius"],
  div[style*="padding: 36px"][style*="border-radius"] { 
    padding: 24px !important; 
  }
  div[style*="padding:48px"][style*="border-radius"],
  div[style*="padding: 48px"][style*="border-radius"] { 
    padding: 28px !important; 
  }
}

/* ============================================================
   KLEINE TELEFOONS (max 380px)
   ============================================================ */
@media (max-width: 380px){
  nav, .sw, .page-hero, .vac-hero, .cta-band, .vac-content, footer { 
    padding-left: 16px !important; 
    padding-right: 16px !important;
  }
  .page-hero .ttl, .page-hero h1 { font-size: 26px !important; }
  .vac-hero h1 { font-size: 26px !important; }
  .sw .ttl, h2.ttl { font-size: 22px !important; }
  .vac-hero .hero-stat .num { font-size: 20px !important; }
  .mobile-menu ul a { font-size: 20px !important; padding: 12px 8px !important; }
}