/* Opmaak van de SEO-pagina's van de Recycle-check (export-paginas.js). Bouwt op checker.css: de
   @font-face-regels en de kleuren daar gelden ook hier. Kleur is nergens de enige drager: ja en nee
   dragen een vinkje of kruisje EN het woord. */
:root { --pg-inkt: #14100e; --pg-grijs: #5b524b; --pg-petrol: #007887; --pg-donker: #00343b; --pg-rood: #c4432e;
  --pg-zalm: #faebe1; --pg-wit: #fffaf6; --pg-oranje: #ff6e41; --pg-lijn: rgba(20, 16, 14, .14); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--pg-wit); color: var(--pg-inkt);
  font-family: "Hankengrotesk Variablefont Wght", "Hanken Grotesk", "HK Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; }
.pg-kop, .pg, .pg-voet { max-width: 1180px; margin: 0 auto; padding: 0 28px; box-sizing: border-box; }
.pg-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 8px; }
.pg-logo img { display: block; width: 160px; height: auto; }
.pg-taal { font-size: 14px; color: var(--pg-inkt); background: #fff; border: 1.5px solid var(--pg-lijn); border-radius: 100px; padding: 7px 16px; text-decoration: none; }
.pg-taal:hover { border-color: var(--pg-oranje); background: var(--pg-oranje); }
.pg-kruimels ol { list-style: none; margin: 8px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 14px; color: var(--pg-grijs); }
.pg-kruimels li + li::before { content: "\203A"; margin-right: 6px; color: var(--pg-grijs); }
.pg-kruimels a { color: var(--pg-inkt); }
.pg-h1, .pg-h2 { font-family: Jtgilboys, "Jt Gilboys", "Hankengrotesk Variablefont Wght", ui-sans-serif, system-ui, sans-serif; font-weight: 400; color: var(--pg-inkt); text-wrap: balance; }
.pg-h1 { font-size: 40px; line-height: 1.1; margin: 0 0 14px; }
.pg-h2 { font-size: 24px; line-height: 1.2; margin: 34px 0 10px; }
.pg-h3 { font-size: 18px; font-weight: 600; margin: 22px 0 6px; }
.pg-intro { font-size: 19px; line-height: 1.55; color: var(--pg-inkt); max-width: 70ch; text-wrap: pretty; }
.pg p { max-width: 70ch; text-wrap: pretty; }
.pg-namen { color: var(--pg-grijs); }
.pg-lijst, .pg-winkels { list-style: none; margin: 0; padding: 0; }
.pg-lijst li { margin: 0 0 6px; }
.pg-winkels li { margin: 0 0 8px; padding: 12px 16px; background: var(--pg-zalm); border-radius: 16px; }
.pg-teken { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; margin-right: 10px; font-weight: 700; color: #fff; vertical-align: -3px; }
.pg-w-ja .pg-teken { background: var(--pg-petrol); }
.pg-w-nee .pg-teken { background: var(--pg-rood); }
.pg-w a { color: var(--pg-inkt); font-weight: 600; }
.pg-adres, .pg-adresblok { color: var(--pg-grijs); }
.pg-adresblok { font-size: 16px; }
.pg-meer { margin-top: 16px; }
.pg a { color: var(--pg-donker); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--pg-oranje); text-underline-offset: 3px; }
.pg a:hover { background: var(--pg-oranje); text-decoration-color: var(--pg-inkt); }
.pg-vragen h3 { margin-top: 18px; }
/* De widget staat onderaan over de volle breedte van de pagina, net als op godroppie.com. */
.pg-check { margin: 40px -28px 0; }
.pg-check .pg-h2 { padding: 0 28px; }
.pg-voet { padding-top: 26px; padding-bottom: 40px; font-size: 14px; color: var(--pg-grijs); }
.pg-voet a { color: var(--pg-inkt); }
.pg-beta { background: #fff; border: 1.5px solid var(--pg-petrol); border-radius: 16px; padding: 12px 16px; display: inline-block; }
@media (max-width: 640px) {
  .pg-kop, .pg, .pg-voet { padding-left: 18px; padding-right: 18px; }
  .pg-h1 { font-size: 30px; }
  .pg-h2 { font-size: 21px; }
  .pg-intro { font-size: 17px; }
  .pg-logo img { width: 124px; }
  .pg-check { margin-left: -18px; margin-right: -18px; }
  .pg-check .pg-h2 { padding: 0 18px; }
}
