/*
  Basis: reset en typografie.

  Overgenomen uit de eerste regels van TGP_website_v52.html. Alles wat hier
  staat geldt voor de hele site. Sectie-specifieke opmaak komt in de losse
  bestanden per template (home.css, archive.css, product.css, ...).

  Mobiele regels horen altijd binnen @media(max-width:600px), ook hier.
*/

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

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--noir);
  background: var(--cream);
  line-height: 1.6;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Zichtbare focus voor toetsenbordgebruik. Stond niet in v52, maar zonder
   dit is de site met tab niet te bedienen zodra de browserstijl wegvalt. */
:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}

/* Alleen voor schermlezers. WordPress en WooCommerce gebruiken deze class,
   onder meer voor de skip link en formulierlabels. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
}