:root {
  --text-color: #363636;
  --text-hover-color: #5f5f5f;

  --main-blue: #2563EB;
  --main-blue-darker: #1D4ED8;
}

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

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;

  display: flex;
  flex-direction: column;

  overflow-x: hidden;
  font-family: "DM Sans", sans-serif;
  color: var(--text-color);
}

/* Blokuje scroll gdy menu otwarte */
body.menu-open {
  overflow: hidden;
}

/* Ważne: tylko .site-main ma flex: 1 (nie wszystkie <main>) */
.site-main {
  flex: 1;
  min-height: 0;
}

/* Jeśli gdzieś masz zwykłe <main> bez klasy, niech nie psuje layoutu */
main:not(.site-main) {
  min-height: 0;
}

/* Dodatkowa ochrona przed poziomym scrollowaniem od elementów 100vw */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Typowy problem na mobile: elementy z transform/box-shadow potrafią robić overflow */
.site-main, .site-footer, nav {
  max-width: 100%;
}