/* seo.css — SEO- en semantieklaag voor Tuinwerken Wim Simons
   Aanvulling op zStyle.min.css; bewust klein en zonder bestaande regels te overschrijven. */

/* Visueel verborgen, maar leesbaar voor screenreaders en zoekmachines (standaard clip-pattern) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* h2-variant van span.h2title uit zStyle.min.css.
   Zelfde eigenschappen als:
     span.h2title { text-transform:uppercase }
     span.h2title { display:inline-block }
     span.h2title { font-weight:700; color:#3f310d; width:100%; background-color:#eaf4a3; padding:6px; margin-left:-16px }
   plus margin:0 en font-weight:bold (h2-defaults geneutraliseerd),
   plus font-size:1em zodat de h2 er exact zo uitziet als de oude span. */
h2.h2title {
  text-transform: uppercase;
  display: inline-block;
  font-weight: 700;
  color: #3f310d;
  width: 100%;
  background-color: #eaf4a3;
  padding: 6px;
  margin: 0;
  margin-left: -16px;
  font-weight: bold;
  font-size: 1em;
}

/* Lees-meer-link onderaan elke dienstsectie, in de huisstijl (bruin op bleek groengeel) */
.leesmeer {
  margin: 18px 0 6px;
}
.leesmeer a {
  display: inline-block;
  font-weight: 700;
  color: #3f310d;
  background-color: #eaf4a3;
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 3px;
}
.leesmeer a:hover,
.leesmeer a:focus {
  background-color: #3f310d;
  color: #eaf4a3;
}

/* Adresblok in de footer: geen schuine standaardstijl */
#footer address {
  font-style: normal;
}

/* --- Beeldverhoudingen hersteld ---
   De width/height-attributen (voor SEO/CLS) werken als presentational hints.
   zStyle.min.css legt in onderstaande contexten slechts één dimensie vast,
   waardoor het attribuut de andere dimensie ongewenst vastzette (verwrongen
   beeld). Met minstens één dimensie expliciet op `auto` blijft de
   hoogte-breedteverhouding altijd correct. */
.h2box img {
  width: auto;   /* zStyle legt height:100px vast -> breedte weer proportioneel */
}
.mainblockintro img {
  height: auto;  /* zStyle legt width:85% vast -> hoogte weer proportioneel */
}
#zBoxContent img {
  width: auto;   /* lightbox: max-width/max-height bepalen samen het kader, */
  height: auto;  /* de verhouding blijft zo altijd behouden */
}

/* --- Footer direct correct positioneren ---
   zStyle zet #footer standaard op position:absolute;bottom:-220px (t.o.v. de
   viewport). Dat klopte toen de pagina bij het laden kort was, maar met de
   standaard zichtbare sectie (mtb0) verscheen de footer midden op de pagina.
   Pas na een menu-klik zette het JS .footer_activeitem (position:relative).
   Nu vanaf het begin in de normale flow, zoals na een klik ook gebeurt. */
#footer {
  position: relative;
  bottom: auto;
}

/* --- Header-animatie zonder vertraging ---
   De titelbalk (.logotxt1) wachtte 1,5s voordat de fade-in (showtxt)
   startte; nu begint hij direct bij het laden van de pagina. */
.logotxt1 {
  animation-delay: 0s;
}