/* Slingerland Tegelvloeren — site-brede correcties op de Simply Static-export.
 *
 * Enige bron van waarheid: reapply.py injecteert dit bestand in elke pagina met een
 * cache-buster (CSS_VERSIE). Bewust GEEN overrides van een vorige klant: de export
 * draagt de volledige Elementor(-Pro)-CSS en -JS, dus alles wat hier staat is een
 * gemeten fout, geen voorzorg.
 */

/* ------------------------------------------------------------------ *
 * 1. Mobiel menu: hamburger op de donkere kop was zwart-op-zwart.
 * ------------------------------------------------------------------ */
.elementor-menu-toggle,
.elementor-menu-toggle svg,
.elementor-menu-toggle i,
.elementor-menu-toggle__icon--open,
.elementor-menu-toggle__icon--close {
  color: #fff !important;
  fill: #fff !important;
}

/* ------------------------------------------------------------------ *
 * 2. Horizontale overloop afknippen zonder het verticaal scrollen te slopen.
 *
 *    `overflow-x: hidden` op html/body dwingt de ANDERE as naar `auto`: beide
 *    elementen worden dan een scrollcontainer en op sommige machines scrolt de
 *    pagina daarna helemaal niet meer. `clip` laat overflow-y met rust.
 * ------------------------------------------------------------------ */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Zelfde val één niveau lager: een blok met `overflow:hidden` waarvan de inhoud
 * niet past, slokt het muiswiel op — er beweegt niets en de pagina lijkt vast te
 * zitten. Alleen bestaande `hidden` opwaarderen naar `clip` (dat maakt geen
 * scrollgebied); NIET blanket op elke sectie, want dan knip je ook de dropdowns
 * van het hoofdmenu en de sticky-header af. */
.elementor-element-populated[style*="overflow:hidden"],
.elementor-element-populated[style*="overflow: hidden"] {
  overflow: clip !important;
}

/* ------------------------------------------------------------------ *
 * 3. Projectenraster (live uit het CMS).
 *
 *    De statisch geëxporteerde Elementor-loop is bevroren: een project dat de
 *    klant in de admin toevoegt verscheen daar nooit. multistep-fix.js vervangt
 *    die loop daarom door de live lijst uit /api/projects — en dat heeft eigen
 *    opmaak nodig, want de Elementor-kaartstijl hoort bij de weggehaalde markup.
 *    Zelfde vormentaal als de webshop, zodat projecten en tegels bij elkaar passen.
 * ------------------------------------------------------------------ */
.slt-projgrid {
  --slt-accent: var(--e-global-color-accent, #F8981D);
  --slt-ink: var(--e-global-color-accentbackground, #405A67);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}
@media (max-width: 640px) { .slt-projgrid { grid-template-columns: 1fr; gap: 18px; } }

.slt-projkaart {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e8ec;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.slt-projkaart:hover {
  box-shadow: 0 14px 32px rgba(64, 90, 103, .15);
  border-color: #d3dae0;
  transform: translateY(-3px);
}
.slt-projfoto { aspect-ratio: 4 / 3; overflow: hidden; background: #f6f8f9; }
.slt-projfoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.slt-projkaart:hover .slt-projfoto img { transform: scale(1.05); }

.slt-projbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.slt-projmeta {
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slt-accent);
}
.slt-projbody h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.3; margin: 0; color: var(--slt-ink); }
.slt-projbody p {
  margin: 0; font-size: .89rem; line-height: 1.6; color: #5b7383;
  /* Drie regels: kaarten in één rij houden zo dezelfde hoogte, ook bij een
     lange projectomschrijving. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.slt-projlink {
  margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  font-size: .87rem; font-weight: 600; color: var(--slt-accent);
}
.slt-projlink svg { transition: transform .2s; }
.slt-projkaart:hover .slt-projlink svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .slt-projkaart, .slt-projfoto img, .slt-projlink svg { transition: none; }
  .slt-projkaart:hover { transform: none; }
  .slt-projkaart:hover .slt-projfoto img { transform: none; }
  .slt-projkaart:hover .slt-projlink svg { transform: none; }
}