/* ===== GEDEELDE FIXES (alle pagina's van stitch4all.nl) =====
   Dit bestand werd door elke pagina al ingeladen (<link href="css/fixes.css">)
   maar bestond feitelijk nog niet - onbedoeld "dode" link. Nu gevuld met
   concrete correcties. */

/* ---------------------------------------------------------------
   MOBIEL/RESPONSIVE: de "wall"-carousels (S/W/K/S-blokken, "Our Work"-
   galerij, "Onze Diensten"-carousel) kregen bij het opslaan van de
   pagina een vaste, op dat moment berekende breedte in pixels
   ingevroren (bijv. 960px), bedoeld voor de kolommen-indeling op een
   desktop-scherm. Normaal herberekent een script (wallFX.js) deze
   breedte dynamisch op basis van het beschikbare schermoppervlak, maar
   die berekening liep niet meer na het opslaan. Op mobiel zorgde dit
   ervoor dat de HELE pagina breder werd dan het scherm (met een lege
   grijze strook rechts en horizontaal moeten scrollen tot gevolg).
   Op smalle schermen laten we deze carousel-onderdelen daarom gewoon
   hun volle, natuurlijke breedte aannemen in plaats van de
   ingevroren desktop-maat. */
@media (max-width: 979px) {
  .wallslider,
  .wallsliderrow,
  .wallslidercell,
  .wallpage,
  .row-fluid.singlerow,
  .row-fluid.oddrow,
  .row-fluid.evenrow {
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------
   Algemeen vangnet: voorkomt dat een enkele te brede afbeelding of
   element de hele pagina breder maakt dan het scherm (horizontaal
   scrollen). Dit is een gebruikelijke, veilige basisregel voor
   responsive sites en tast de layout op desktop niet aan. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}

/* Lange woorden in grote koppen (bijv. "Stitch4All") mogen op smalle
   schermen zo nodig afbreken, zodat ze niet over de schermrand heen
   steken. */
@media (max-width: 767px) {
  h1, h2, h3, .first_word, .rest {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* BESTAANDE THEMAFOUT: op mobiel werd de logo-doos verkleind naar 52px
   breed, maar de achtergrondafbeelding zelf (289px breed) bleef op
   ware grootte - waardoor alleen een klein stukje links van het logo
   zichtbaar bleef (afgesneden i.p.v. verkleind). Met background-size
   wordt het hele logo nu proportioneel verkleind in de kleinere doos. */
@media (max-width: 768px) {
  #logo a {
    background-size: contain !important;
    width: 160px !important;
    height: 40px !important;
  }
}