/* Gids (kennisbank) prose. Erft de design-tokens uit styles.css,
   dus past automatisch mee met licht/donker. */
.gids-wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

.gids-body { margin-top: 8px; }
.gids-body h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.015em;
  font-size: clamp(21px, 3.2vw, 29px); line-height: 1.16;
  color: var(--text); margin: 2.3em 0 .55em;
}
.gids-body h3 {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 700;
  font-size: 18.5px; color: var(--text); margin: 1.7em 0 .4em;
}
.gids-body p { font-size: 17px; line-height: 1.72; color: var(--dim); margin: 0 0 1.05em; }
.gids-body strong { color: var(--text); font-weight: 650; }
.gids-body a { color: var(--amber-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.gids-body ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.gids-body li { position: relative; padding-left: 1.5em; font-size: 17px; line-height: 1.62; color: var(--dim); margin: .45em 0; }
.gids-body li::before { content: ""; position: absolute; left: .2em; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

/* Waarschuwing / disclaimer-callout (optioneel gebruik) */
.gids-let {
  border: 1px solid var(--edge); border-left: 3px solid var(--amber);
  background: var(--tile); border-radius: 12px; padding: 16px 18px; margin: 2em 0;
  font-size: 15px; line-height: 1.6; color: var(--dim);
}

/* FAQ */
.gids-faq { margin-top: 3.2rem; }
.gids-faq > .eyebrow { margin-bottom: 6px; }
.gids-faq details { border-top: 1px solid var(--edge); padding: 16px 0; }
.gids-faq details:last-child { border-bottom: 1px solid var(--edge); }
.gids-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.2em;
  font-family: "Archivo", system-ui, sans-serif; font-weight: 650; font-size: 17px; color: var(--text);
}
.gids-faq summary::-webkit-details-marker { display: none; }
.gids-faq summary::after { content: "+"; color: var(--amber); font-family: "IBM Plex Mono", monospace; transition: transform .2s ease; }
.gids-faq details[open] summary::after { transform: rotate(45deg); }
.gids-faq details p { font-size: 16px; line-height: 1.7; color: var(--dim); margin: .8em 0 0; }

/* Bronnen */
.gids-bron { margin-top: 3.2rem; border: 1px solid var(--edge); border-radius: 14px; background: var(--tile); padding: 20px 22px; }
.gids-bron .eyebrow { margin-bottom: 10px; }
.gids-bron ul { list-style: none; margin: 0; padding: 0; }
.gids-bron li { margin: .5em 0; font-size: 14.5px; line-height: 1.5; }
.gids-bron a { color: var(--amber-text); text-decoration: none; }
.gids-bron a:hover { text-decoration: underline; }

/* Gids-index (hub) */
.gids-grid { max-width: 1000px; margin: 8px auto 0; padding: 0 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gids-kaart { display: block; border: 1px solid var(--edge); border-radius: 16px; background: var(--tile); padding: 22px; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.gids-kaart:hover { border-color: var(--hover-edge); transform: translateY(-2px); }
.gids-kaart h3 { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; font-size: 19px; color: var(--text); margin: 0 0 8px; }
.gids-kaart p { font-size: 14.5px; line-height: 1.55; color: var(--dim); margin: 0; }
.gids-kaart .g-pijl { display: inline-block; margin-top: 14px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-text); }

/* Sjabloon-download-CTA binnen een gids */
.gids-sjabloon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 2.8em auto; border: 1px solid var(--edge); border-left: 3px solid var(--amber); background: var(--tile); border-radius: 14px; padding: 20px 22px; }
.gids-sjabloon .gs-tekst { min-width: 240px; flex: 1; }
.gids-sjabloon .gs-tekst .eyebrow { margin: 0 0 7px; }
.gids-sjabloon h3 { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; font-size: 18px; color: var(--text); margin: 0 0 5px; }
.gids-sjabloon p { font-size: 14.5px; line-height: 1.55; color: var(--dim); margin: 0; }
.gids-sjabloon .cta { flex: none; }