@charset "utf-8";
/* CSS Document */
/* public/assets/css/responsive-fixes.css
   Globale, niet-invasieve responsive fixes (front-end only) */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;         /* weg met horizontale scroll */
}

*, *::before, *::after { box-sizing: border-box; }

/* media schaalt altijd binnen de container */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* laat elementen niet “bloeden” buiten het viewport door box-shadows/margins */
.container, .container-fluid {
  overflow-x: clip;
}

/* veilige baseline voor rows (houdt gutters consequent) */
.row {
  margin-right: calc(-.5 * var(--bs-gutter-x, .75rem));
  margin-left:  calc(-.5 * var(--bs-gutter-x, .75rem));
}

/* zorg dat heldere “breedte = schermbreedte” elementen nooit breder dan viewport worden */
.site-header,
.hero,
.hero-slider,
section,
main {
  width: 100%;
  max-width: 100vw;
}

/* navbar & brand image netjes schalend */
.navbar { min-height: 56px; }
.navbar .navbar-brand img {
  max-height: 44px;
  height: auto;
  width: auto;
}

/* dropdowns mogen nooit breder dan viewport */
.dropdown-menu { max-width: min(90vw, 320px); }

/* lange content (URLs, productnamen,…) breken i.p.v. overlopen */
.main-content, .content, .product-description {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* iOS/Android offcanvas/modals netjes isoleren (kleine perf winst & geen overflow-bugs) */
.card, .modal, .offcanvas { contain: layout paint; }

/* compacte collapses in mobile navbar */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    padding-top: .5rem;
    padding-bottom: .75rem;
  }
}

/* Tabellen: mobiel horizontaal scrollbaar binnen hun blok, i.p.v. de pagina */
@media (max-width: 575.98px) {
  table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Heel af en toe sluipt 100vw in inline styles/classes binnen; vang dat veilig op */
[class*="vw-100"] { width: 100% !important; max-width: 100vw !important; }