/*
Theme Name: Paddenstoelen voor Honden
Theme URI: https://paddenstoelenvoorhonden.nl/
Author: 1704Media
Description: Rustige kennisbank over tumoren, vetbulten, weerstand en paddenstoelen bij honden. Lange leesbare gidsen met inhoudsopgave, crème papier, inkt en bosgroen. Geen productgrid: de winkel ligt bewust bij mycohond.nl.
Version: 1.0.0
Requires at least: 6.0
License: GNU General Public License v2 or later
Text Domain: paddenstoelenvoorhonden
*/

/* ---------- tokens (zelfde familie als het mycohond-thema) ---------- */

:root {
  --mh-inkt: #14211a;
  --mh-bos: #1f3d2b;
  --mh-creme: #f6f2ea;
  --mh-papier: #fffdf8;
  --mh-lijn: #e3dccf;
  --mh-mos: #5b7d5a;
  --mh-moslicht: #eaeee3;
  --mh-gedempt: #6a6f66;
  --mh-oker: #b8742a;
  --mh-okerdonker: #9a5e1f;
  --mh-fout: #9c3a2a;
  --mh-radius: 10px;
  --mh-schaduw: 0 18px 50px rgba(20, 33, 26, 0.10);
  --mh-font: "Instrument Sans", "Manrope", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- basis ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mh-creme);
  color: var(--mh-inkt);
  font-family: var(--mh-font);
  font-size: 1.1rem;
  line-height: 1.65;
}
a {
  color: var(--mh-inkt);
  text-decoration: underline;
  text-decoration-color: var(--mh-oker);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--mh-okerdonker); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--mh-moslicht); }
:focus-visible { outline: 2px solid var(--mh-bos); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

.pvh-shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.pvh-lees { width: min(68ch, calc(100% - 40px)); margin-inline: auto; }

.pvh-skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 200;
  background: var(--mh-papier);
  color: var(--mh-inkt);
  border: 1px solid var(--mh-lijn);
  border-radius: 8px;
  padding: 10px 16px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.pvh-skip:focus { top: 12px; }

/* ---------- header ---------- */

.pvh-top-wrap {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--mh-papier);
  border-bottom: 1px solid var(--mh-lijn);
}
.pvh-top {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.pvh-merk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mh-inkt);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pvh-merk svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--mh-bos);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pvh-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.pvh-nav a {
  color: var(--mh-gedempt);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 8px;
}
.pvh-nav a:hover, .pvh-nav a[aria-current="page"] { color: var(--mh-inkt); }
.pvh-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--mh-oker);
  text-underline-offset: 6px;
}
.pvh-nav .pvh-nav__winkel {
  margin-left: 10px;
  border: 1px solid var(--mh-lijn);
  background: var(--mh-papier);
  color: var(--mh-inkt);
  padding: 9px 16px;
}
.pvh-nav .pvh-nav__winkel:hover { color: var(--mh-okerdonker); border-color: var(--mh-oker); }
.pvh-menu-knop {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--mh-lijn);
  border-radius: 8px;
  background: transparent;
  color: var(--mh-inkt);
  cursor: pointer;
  place-items: center;
}
.pvh-menu-knop svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------- gidsen: hero, kop, inhoudsopgave ---------- */

.pvh-hero {
  width: min(1400px, calc(100% - 40px));
  margin: 26px auto 0;
  border-radius: var(--mh-radius);
  overflow: hidden;
}
.pvh-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.pvh-artikelkop { padding: clamp(30px, 5vw, 48px) 0 0; }
.pvh-meta {
  margin: 0;
  color: var(--mh-gedempt);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pvh-meta a { color: var(--mh-okerdonker); text-decoration: none; }
.pvh-meta a:hover { text-decoration: underline; text-decoration-color: var(--mh-oker); text-underline-offset: 2px; }
.pvh-artikelkop h1 { margin: 12px 0 0; max-width: 24ch; }

.pvh-toc {
  margin: 30px 0 0;
  border-top: 1px solid var(--mh-lijn);
  border-bottom: 1px solid var(--mh-lijn);
  padding: 16px 0 18px;
}
.pvh-toc summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  color: var(--mh-inkt);
}
.pvh-toc summary::marker { color: var(--mh-bos); }
.pvh-toc ol { margin: 12px 0 0; padding-left: 22px; font-size: 0.98rem; }
.pvh-toc li { margin: 5px 0; }
.pvh-toc a { color: var(--mh-gedempt); text-decoration: none; }
.pvh-toc a:hover {
  color: var(--mh-okerdonker);
  text-decoration: underline;
  text-decoration-color: var(--mh-oker);
  text-underline-offset: 2px;
}
.pvh-toc a[aria-current] { color: var(--mh-okerdonker); font-weight: 700; }

/* ---------- gidsen: de tekst zelf ---------- */

.pvh-lijf { padding-top: 8px; }
.pvh-lijf p { margin: 0 0 1.15em; color: #3a423b; }
.pvh-lijf h2 {
  font-size: 1.5rem;
  margin: 3rem 0 0.5rem;
  scroll-margin-top: 88px;
}
.pvh-lijf h3 {
  font-size: 1.2rem;
  margin: 2rem 0 0.4rem;
  scroll-margin-top: 88px;
}
.pvh-lijf li { color: #3a423b; }
.pvh-lijf ul, .pvh-lijf ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.pvh-lijf li { margin: 0.35em 0; }
.pvh-lijf strong { color: var(--mh-inkt); }
.pvh-lijf blockquote {
  margin: 1.6em 0;
  border-left: 3px solid var(--mh-mos);
  padding: 2px 0 2px 18px;
  color: var(--mh-gedempt);
}
.pvh-lijf figure { margin: 1.8em 0; }
.pvh-lijf .wp-block-image img { border-radius: var(--mh-radius); }
.pvh-lijf figcaption {
  color: var(--mh-gedempt);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 8px;
}
.pvh-lijf code {
  background: var(--mh-moslicht);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.88em;
}

.pvh-lijf table {
  width: 100%;
  border-collapse: collapse;
  background: var(--mh-papier);
  font-size: 0.98rem;
}
.pvh-lijf th, .pvh-lijf td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--mh-lijn);
  vertical-align: top;
}
.pvh-lijf th { background: var(--mh-moslicht); color: var(--mh-inkt); font-weight: 700; }
.pvh-lijf .wp-block-table { margin: 1.9em 0; overflow-x: auto; }

/* Tabellen mogen buiten de leesbreedte breken op brede schermen. */
@media (min-width: 900px) {
  .pvh-lijf .wp-block-table {
    --pvh-breek: min(940px, calc(100vw - 120px));
    width: var(--pvh-breek);
    margin-inline: calc((100% - var(--pvh-breek)) / 2);
  }
  .pvh-lijf .wp-block-table table { width: 100%; }
}

.pvh-disclaimer {
  margin: 44px 0 0;
  border-top: 1px solid var(--mh-lijn);
  padding-top: 16px;
  color: var(--mh-gedempt);
  font-size: 0.95rem;
}

/* ---------- verder lezen onder een gids ---------- */

.pvh-verder {
  margin-top: clamp(48px, 7vw, 84px);
  padding: clamp(36px, 5vw, 56px) 0 clamp(52px, 7vw, 84px);
  background: var(--mh-papier);
  border-top: 1px solid var(--mh-lijn);
}
.pvh-verder ul { list-style: none; margin: 20px 0 0; padding: 0; }
.pvh-verder li { border-top: 1px solid var(--mh-lijn); }
.pvh-verder li:first-child { border-top: 0; }
.pvh-verder a { display: block; padding: 16px 0; text-decoration: none; color: inherit; }
.pvh-verder__titel { display: block; font-weight: 700; color: var(--mh-inkt); }
.pvh-verder__zin { display: block; color: var(--mh-gedempt); font-size: 0.98rem; margin-top: 4px; }
.pvh-verder a:hover .pvh-verder__titel { color: var(--mh-okerdonker); }

/* ---------- redactionele gidsenlijst (voorpagina, archieven) ---------- */

.pvh-lijsttitel { font-size: 1.5rem; }
.pvh-rijen { margin-top: 26px; }
.pvh-rij {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--mh-lijn);
  text-decoration: none;
  color: inherit;
}
.pvh-rij:first-child { border-top: 0; padding-top: 6px; }
.pvh-rij__beeld img {
  width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.pvh-rij__titel {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mh-inkt);
}
.pvh-rij__uittreksel { display: block; margin-top: 6px; color: var(--mh-gedempt); font-size: 1rem; }
.pvh-rij:hover .pvh-rij__titel { color: var(--mh-okerdonker); }
.pvh-leeg { color: var(--mh-gedempt); }

/* ---------- voorpagina ---------- */

.pvh-homekop { padding: clamp(56px, 9vw, 104px) 0 0; }
.pvh-homekop h1 { max-width: 22ch; }
.pvh-homeintro {
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--mh-gedempt);
  font-size: 1.15rem;
}
.pvh-homesectie { padding-top: clamp(40px, 6vw, 64px); }
.pvh-home-zwam { margin-top: clamp(48px, 7vw, 80px); }
.pvh-home-zwam p { margin: 10px 0 0; max-width: 62ch; color: #3a423b; }
.pvh-home-winkel {
  margin-top: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--mh-lijn);
  padding: 20px 0 clamp(56px, 8vw, 96px);
}
.pvh-home-winkel p { margin: 0; max-width: 62ch; color: var(--mh-gedempt); font-size: 0.98rem; }

/* ---------- archieven, 404, paginering ---------- */

.pvh-archiefkop { padding: clamp(44px, 7vw, 80px) 0 0; }
.pvh-archiefkop h1 { margin: 10px 0 0; max-width: 24ch; }
.pvh-omschrijving { margin: 14px 0 0; max-width: 62ch; color: var(--mh-gedempt); }
.pvh-archieflijst { padding-bottom: clamp(56px, 8vw, 96px); }
.pvh-nietgevonden { padding: clamp(64px, 10vw, 120px) 0 clamp(64px, 9vw, 110px); }
.pvh-nietgevonden p { color: #3a423b; max-width: 56ch; }

.pvh-paginering { margin: 34px 0 0; }
.pvh-paginering .nav-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pvh-paginering a, .pvh-paginering span {
  border: 1px solid var(--mh-lijn);
  border-radius: 8px;
  background: var(--mh-papier);
  padding: 8px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--mh-inkt);
}
.pvh-paginering .current { background: var(--mh-moslicht); border-color: transparent; }
.pvh-paginering a:hover { border-color: var(--mh-oker); color: var(--mh-okerdonker); }

/* ---------- footer ---------- */

.pvh-voet { background: var(--mh-bos); color: var(--mh-creme); padding: 52px 0 26px; }
.pvh-voet a { color: var(--mh-creme); }
.pvh-voet :focus-visible { outline-color: var(--mh-creme); }
.pvh-voet-merk { margin: 0; font-weight: 800; font-size: 1.05rem; }
.pvh-voet-intro {
  margin: 10px 0 0;
  max-width: 54ch;
  color: rgba(246, 242, 234, 0.82);
  font-size: 0.95rem;
}
.pvh-voet-links {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.95rem;
}
.pvh-voet-links a { text-decoration: none; }
.pvh-voet-links a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pvh-voet-dierenarts {
  margin: 32px 0 0;
  border-top: 1px solid rgba(246, 242, 234, 0.22);
  padding-top: 18px;
  max-width: 60ch;
  font-weight: 600;
  color: rgba(246, 242, 234, 0.94);
}
.pvh-voet-onder {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.85rem;
  color: rgba(246, 242, 234, 0.72);
}
.pvh-voet-onder a { color: rgba(246, 242, 234, 0.88); }

/* ---------- uitlijningen uit de blokeditor ---------- */

.alignleft { float: left; margin: 0.4em 1.4em 0.8em 0; }
.alignright { float: right; margin: 0.4em 0 0.8em 1.4em; }
.aligncenter { margin-inline: auto; }

/* ---------- responsief ---------- */

@media (max-width: 860px) {
  .pvh-menu-knop { display: grid; }
  .pvh-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: var(--mh-papier);
    border: 1px solid var(--mh-lijn);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-schaduw);
    padding: 8px;
    flex-direction: column;
    align-items: stretch;
  }
  .pvh-nav.is-open { display: flex; }
  .pvh-nav a { padding: 12px; }
  .pvh-nav .pvh-nav__winkel { margin-left: 0; margin-top: 6px; text-align: center; }
}

@media (max-width: 700px) {
  .pvh-hero { width: 100%; margin-top: 0; border-radius: 0; }
}

@media (max-width: 560px) {
  body { font-size: 1.05rem; }
  .pvh-merk { font-size: 0.95rem; }
  .pvh-merk svg { width: 22px; height: 22px; flex-basis: 22px; }
  .pvh-rij { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .pvh-rij__beeld img { width: 110px; }
  .pvh-rij__titel { font-size: 1.1rem; }
  .pvh-voet-onder { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}