/* ==========================================================================
   Werk en Mantelzorg Tour: basis
   Reset en elementstijlen, plus de basisopmaak van knoppen. Geen Automatic.css.
   Opzet uit het Coach Amigo-thema (base.css). Waarden uit tokens.css.
   ========================================================================== */

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

/* hidden wint altijd, ook van klassen met display. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-margin);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html body {
  margin: 0;
  background-color: var(--bg-body);
  color: var(--text-color);
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-size: var(--text-m);
  line-height: var(--text-line-height);
  letter-spacing: var(--text-letter-spacing);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
  text-wrap: balance;
}
h1 { font-size: var(--h1); font-weight: var(--h1-font-weight); line-height: var(--h1-line-height); }
h2 { font-size: var(--h2); font-weight: var(--h2-font-weight); }
h3 { font-size: var(--h3); font-weight: var(--h3-font-weight); letter-spacing: var(--h3-letter-spacing); }
h4 { font-size: var(--h4); font-weight: var(--h4-font-weight); letter-spacing: var(--h3-letter-spacing); }
h5 { font-size: var(--h5); font-weight: var(--h5-font-weight); letter-spacing: var(--h3-letter-spacing); }
h6 { font-size: var(--h6); font-weight: var(--h6-font-weight); letter-spacing: var(--h3-letter-spacing); }

p, ul, ol, dl, blockquote, figure, pre, table { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding-inline-start: var(--list-indent-spacing); }
/* Alleen in de inhoud: anders krijgen menu's en footerlijsten ook ruimte tussen de items (menu stond scheef). */
:where(.starter-content, .entry-content, .wp-block-post-content) li + li { margin-block-start: var(--list-item-spacing); }

/* Lopende tekst in de inhoud: ruimte tussen alinea's, lijsten en koppen. */
.entry-content > * + *, .wp-block-post-content > * + * { margin-block-start: var(--paragraph-spacing); }
.entry-content > * + :is(h2, h3, h4), .wp-block-post-content > * + :is(h2, h3, h4) { margin-block-start: var(--heading-spacing); }

strong, b { font-weight: 700; }
small { font-size: var(--text-s); }

a { color: var(--link-color); text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: var(--transition); }
a:hover { color: var(--link-color-hover); }

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
svg { flex-shrink: 0; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

hr { border: 0; border-block-start: 1px solid var(--base-light); margin-block: var(--space-m); }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

::selection { background: var(--primary-light); color: var(--text-dark); }

[id] { scroll-margin-top: var(--scroll-margin); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs);
  width: auto; height: auto; clip: auto; z-index: 100000;
  padding: var(--space-xs) var(--space-s); background: var(--white); color: var(--text-dark);
}

/* --------------------------------------------------------------------------
   Knoppen: basisopmaak voor alle knoppen uit de blok-editor (ook zonder blokstijl).
   Kleuren per blokstijl in blocks.css; standaard groen met donkere tekst (tokens.css).
   -------------------------------------------------------------------------- */
.wp-block-button > .wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-inline-size: var(--btn-min-width);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  background: var(--btn-background);
  color: var(--btn-text-color);
  font-family: var(--text-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  transition: var(--btn-transition);
}
.wp-block-button > .wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--btn-background-hover);
  border-color: var(--btn-border-color-hover);
  color: var(--btn-text-color-hover);
}