/* Eigen CSS-regels: worden ná site.css geladen, dus hiermee kun je alles overschrijven. Geen bouwstap nodig. */

/* Mobiel: lange woorden in koppen (bv. "Loodgieterswerk", "duurzaamheidssubsidies") mogen afbreken,
   zodat een pagina op een smal scherm nooit breder wordt dan het scherm zelf. */
@media (max-width: 640px) {
  h1, h2, h3, h4 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  /* Lange knopteksten (bv. "Vraag offerte aan voor 's-Hertogenbosch") mogen naar een tweede regel. */
  a.rounded-full.whitespace-nowrap, button.rounded-full.whitespace-nowrap { white-space: normal; height: auto; text-align: center; }
  a.rounded-full.whitespace-nowrap.py-6, button.rounded-full.whitespace-nowrap.py-6 { padding-top: .875rem; padding-bottom: .875rem; }
}

/* Heel smalle schermen (320-360 px): lange woorden en e-mailadressen in kolommen ook laten afbreken. */
@media (max-width: 360px) {
  .flex > * { min-width: 0; }
  p, li, a, span { overflow-wrap: anywhere; }
}