/* ============================================================
   Paddenstoelen voor Honden, ontwerplaag: basis voor alle drie.
   Laadt alleen als er een ontwerp actief is. Draait op de --mh-*
   tokens van style.css; de ontwerpbestanden zetten tokens en hun
   eigen handtekening.
   ============================================================ */

:root {
  --mh-font-kop: var(--mh-font);
  --mh-font-num: var(--mh-font);
  --mh-lees: #3a423b;
  --mh-kop-gewicht: 700;
  --mh-body: 1.1rem;
}

body.pvh-design { font-size: var(--mh-body); -webkit-font-smoothing: antialiased; }
body.pvh-design h1, body.pvh-design h2, body.pvh-design h3 { font-family: var(--mh-font-kop); font-weight: var(--mh-kop-gewicht); color: var(--mh-inkt); }
body.pvh-design .pvh-voet .pvh-voet-merk { color: #fff; }
body.pvh-design .pvh-lijf p, body.pvh-design .pvh-lijf li { color: var(--mh-lees); }

/* ---------- uitlijning: koppen en losse regels op dezelfde lijn als de lijsten ---------- */
body.pvh-design .pvh-archiefkop .pvh-lees,
body.pvh-design .pvh-home-zwam .pvh-lees { width: min(1120px, calc(100% - 40px)); }
body.pvh-design .pvh-archiefkop .pvh-lees > *,
body.pvh-design .pvh-home-zwam .pvh-lees > * { max-width: 62ch; }
body.pvh-design .pvh-home-leesregel { display: none; }
body.pvh-design .pvh-archiefkop { padding-bottom: 8px; }
body.pvh-design .pvh-archieflijst .pvh-rijen { margin-top: 18px; }

/* ---------- voorpagina: gidsen per onderwerp ---------- */
.pvh-onderwerp { margin-top: clamp(28px, 4vw, 44px); }
.pvh-onderwerp__titel {
  display: flex; align-items: baseline; gap: 10px; margin: 0;
  font-size: 1.05rem; padding-bottom: 10px; border-bottom: 1.5px solid var(--mh-inkt);
}
.pvh-onderwerp__titel a { text-decoration: none; color: inherit; }
.pvh-onderwerp__titel a:hover { color: var(--mh-okerdonker); }
.pvh-onderwerp__aantal { font-family: var(--mh-font-num); font-weight: 500; font-size: .85rem; color: var(--mh-gedempt); }
.pvh-onderwerp .pvh-rijen { margin-top: 4px; }
.pvh-onderwerp .pvh-rij:first-child { padding-top: 18px; border-top: 0; }

/* ---------- artikel: inhoudsopgave naast de tekst op brede schermen ---------- */
@media (min-width: 1100px) {
  body.pvh-design.single .pvh-artikelkop .pvh-lees,
  body.pvh-design.single .pvh-artikel > .pvh-lees {
    width: min(1120px, calc(100% - 40px));
    display: grid; grid-template-columns: 230px minmax(0, 68ch); column-gap: clamp(40px, 5vw, 72px); justify-content: center;
  }
  body.pvh-design.single .pvh-artikelkop .pvh-lees > *,
  body.pvh-design .pvh-artikel > .pvh-lees > * { grid-column: 2; min-width: 0; }
  body.pvh-design .pvh-artikel > .pvh-lees > .pvh-toc {
    grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: 96px;
    margin-top: clamp(24px, 4vw, 34px); border-bottom: 0; padding-top: 14px; max-height: calc(100vh - 120px); overflow: auto;
  }
  body.pvh-design .pvh-toc summary { pointer-events: none; list-style: none; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mh-gedempt); }
  body.pvh-design .pvh-toc summary::-webkit-details-marker { display: none; }
  body.pvh-design .pvh-toc ol { padding-left: 26px; font-size: .92rem; }
  body.pvh-design .pvh-lijf .wp-block-table { --pvh-breek: 100%; width: 100%; margin-inline: 0; }
}

/* In 30 seconden en tabellen */
body.pvh-design .pvh-kort__regel dd { color: var(--mh-lees); }
body.pvh-design .pvh-lijf table { background: transparent; }
body.pvh-design .pvh-lijf th { background: transparent; border-bottom: 1.5px solid var(--mh-inkt); }
body.pvh-design .pvh-lijf td:first-child { font-weight: 600; color: var(--mh-inkt); }

/* ---------- symptomenchecker: vragen naast de uitleg ---------- */
@media (min-width: 900px) {
  body.pvh-design .pvh-checker { max-width: none; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 96px); }
  body.pvh-design .pvh-checker > * { grid-column: 2; }
  body.pvh-design .pvh-checker > .pvh-checker__eyebrow,
  body.pvh-design .pvh-checker > .pvh-checker__intro { grid-column: 1; }
  body.pvh-design .pvh-checker > .pvh-checker__eyebrow { grid-row: 1; align-self: start; }
  body.pvh-design .pvh-checker > .pvh-checker__intro { grid-row: 1; align-self: start; margin-top: 2.2rem; font-size: 1.2rem; color: var(--mh-inkt); }
}

/* ---------- mobiel ---------- */
@media (max-width: 560px) {
  body.pvh-design { font-size: calc(var(--mh-body) - .05rem); }
}
@media (prefers-reduced-motion: reduce) {
  body.pvh-design * { transition: none !important; }
}

/* footerlinks altijd licht op donker (ontwerpen die a{} kleuren winnen anders) */
body.pvh-design .pvh-voet a { color: rgba(255, 255, 255, .92); }
@media (min-width: 900px) { body.pvh-design .pvh-checker > fieldset:first-of-type { margin-top: 0; } }