/* Responsive laag voor Layer by Layer 3D Printing.
   De pagina's gebruiken inline styles, dus deze regels zijn !important.
   Selectors staan dubbel: de browser normaliseert inline styles met een spatie
   na de dubbele punt, afhankelijk van hoe de pagina is gerenderd.
   Desktop (901px en breder) blijft volledig ongewijzigd. */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, image-slot { max-width: 100%; }

/* ---------- TABLET: 900px en lager ---------- */
@media (max-width: 900px) {
  section, footer {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  header > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 14px !important;
  }

  /* Tabellen horizontaal scrollbaar in plaats van de pagina oprekken */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tijdlijn Over ons: onder elkaar, pijltjes weg */
  div[style*="align-items:flex-start"][style*="gap:4px"],
  div[style*="align-items: flex-start"][style*="gap: 4px"] {
    flex-wrap: wrap !important;
    gap: 28px !important;
    justify-content: center !important;
  }
  div[style*="align-items:flex-start"][style*="gap:4px"] > div[style*="flex-shrink:0"],
  div[style*="align-items: flex-start"][style*="gap: 4px"] > div[style*="flex-shrink: 0"] {
    display: none !important;
  }
  div[style*="align-items:flex-start"][style*="gap:4px"] > div[style*="flex:1"],
  div[style*="align-items: flex-start"][style*="gap: 4px"] > div[style*="flex: 1"] {
    flex: 1 1 220px !important;
    max-width: 320px !important;
  }

  /* Decoratieve, absoluut gepositioneerde illustraties verbergen */
  div[style*="position:absolute"][style*="pointer-events:none"],
  div[style*="position: absolute"][style*="pointer-events: none"],
  div[style*="flex:0 0 260px"],
  div[style*="flex: 0 0 260px"] {
    display: none !important;
  }

  /* Kolommen naast elkaar worden kolommen onder elkaar */
  div[style*="min-width:320px"],
  div[style*="min-width: 320px"],
  div[style*="min-width:300px"],
  div[style*="min-width: 300px"],
  div[style*="min-width:280px"],
  div[style*="min-width: 280px"],
  div[style*="min-width:260px"],
  div[style*="min-width: 260px"],
  div[style*="min-width:240px"],
  div[style*="min-width: 240px"],
  ul[style*="min-width:240px"],
  ul[style*="min-width: 240px"] {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
  div[style*="margin-right:160px"],
  div[style*="margin-right: 160px"] {
    margin-right: 0 !important;
  }

  /* Blokken met een vaste hoogte voor illustraties */
  div[style*="height:340px"][style*="justify-content:center"],
  div[style*="height: 340px"][style*="justify-content: center"],
  div[style*="height:220px"][style*="justify-content:center"],
  div[style*="height: 220px"][style*="justify-content: center"],
  div[style*="height:200px"][style*="justify-content:center"],
  div[style*="height: 200px"][style*="justify-content: center"] {
    height: auto !important;
  }

  /* Afbeeldingsvakken met vaste pixelbreedte */
  image-slot[style*="px"] { width: 100% !important; }

  /* Footer: 4 kolommen -> 2 */
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  div[style*="display:grid"] > *,
  div[style*="display: grid"] > * { min-width: 0 !important; }
}

/* ---------- MOBIEL: 640px en lager ---------- */
@media (max-width: 640px) {
  section, footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  h1 { font-size: 30px !important; line-height: 1.2 !important; }
  h2 { font-size: 23px !important; line-height: 1.25 !important; }
  h3 { font-size: 18px !important; }

  /* Header: logo compacter, menu als scrollbare rij */
  header > div {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  header > div > div:first-child {
    font-size: 16px !important;
    gap: 10px !important;
  }
  header > div > div:first-child img {
    width: 40px !important;
    height: 40px !important;
  }
  header nav {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 18px !important;
    font-size: 14px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { white-space: nowrap !important; }
  header > div > a {
    text-align: center !important;
    padding: 13px 18px !important;
  }

  /* Header niet sticky op mobiel: kost te veel schermhoogte */
  header { position: static !important; }

  /* Footer: 1 kolom */
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }
  footer p[style*="max-width:260px"],
  footer p[style*="max-width: 260px"] {
    max-width: 100% !important;
  }

  /* Formulieren: 16px voorkomt inzoomen op iOS */
  input, select, textarea, button { font-size: 16px !important; }
  input, select, textarea { width: 100% !important; box-sizing: border-box !important; }

  /* Grids naar 1 kolom */
  div[style*="grid-template-columns:repeat(auto-fit"],
  div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Illustraties naast elkaar mogen wrappen */
  div[style*="justify-content:center"][style*="gap:22px"],
  div[style*="justify-content: center"][style*="gap: 22px"],
  div[style*="justify-content:center"][style*="gap:24px"],
  div[style*="justify-content: center"][style*="gap: 24px"],
  div[style*="justify-content:center"][style*="gap:28px"],
  div[style*="justify-content: center"][style*="gap: 28px"] {
    flex-wrap: wrap !important;
  }
}