/*----------------------------------------------------------------
  BuitenSneupen.nl — Blog Post Styles
  Geoptimaliseerd conform Stijlgids v2 (augustus 2026)
----------------------------------------------------------------*/
:root {
  /* Link Colors — brand palette */
  --color-link: #B6594C;
  --color-link-hover: #DD8E75;
  --color-link-underline: rgba(221, 142, 117, 0.35);

  /* Blockquote — warm palette i.p.v. koud teal */
  --color-quote-border: #90AEB2;
  --width-quote-border: 3px;
  --bg-quote: #F7F3EE;

  /* Code — Midnight als basis */
  --color-code-text: #A8C4A0;
  --bg-code: #37514D;

  /* Spacing (afgestemd op stijlgids-tokens) */
  --space-s: 0.25rem;
  --space-m: 0.75rem;
  --space-l: 1.25rem;
  --space-xl: 2.25rem;
  --space-xxl: 2.5rem;

  /* Border Radius — stijlgids radius-lg voor afbeeldingen */
  --radius-m: 16px;

  /* Transition */
  --transition-default: 0.2s ease;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font sizes — desktop (stijlgids-waarden) */
  --font-size-xs: 0.8125rem;   /* 13px — captions, cite */
  --font-size-p: 1.0625rem;    /* 17px — body */
  --font-size-h6: 0.8125rem;   /* 13px — overline */
  --font-size-h5: 0.9375rem;   /* 15px — label */
  --font-size-h4: 1.25rem;     /* 20px — kaart */
  --font-size-h3: 1.5rem;      /* 24px — subsectie */
  --font-size-h2: 2.625rem;    /* 42px — sectie (Neucha) */

  /* Font sizes — mobile (stijlgids-waarden ≤767px) */
  --mobile-font-size-p: 0.9375rem;  /* 15px */
  --mobile-font-size-h6: 0.6875rem; /* 11px */
  --mobile-font-size-h5: 0.8125rem; /* 13px */
  --mobile-font-size-h4: 1rem;      /* 16px */
  --mobile-font-size-h3: 1.125rem;  /* 18px */
  --mobile-font-size-h2: 1.625rem;  /* 26px */

  /* Line heights — unitless ter voorkoming van compounding */
  --line-height-body: 1.7;
  --line-height-heading-h2: 1.25;
  --line-height-heading-h3: 1.3;
  --line-height-heading-h4: 1.35;
  --line-height-heading-h5: 1.4;
  --line-height-heading-h6: 1.5;
  --line-height-list: 1.55;
}

/*----------------------------------------------------------------
  Headings
----------------------------------------------------------------*/
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  padding-left: var(--space-l);
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-s);
}

/* H2 — Neucha display, nooit bold */
.post-content h2 {
  font-family: 'Neucha', 'Segoe Print', cursive;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading-h2);
  letter-spacing: 0.01em;
}

/* H3 — Montserrat bold */
.post-content h3 {
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-h3);
  letter-spacing: -0.01em;
}

/* H4 — Montserrat semibold */
.post-content h4 {
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading-h4);
  letter-spacing: -0.005em;
}

/* H5 — Montserrat semibold, compact */
.post-content h5 {
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading-h5);
  letter-spacing: 0.02em;
}

/* H6 — Overline: uppercase, wide tracking */
.post-content h6 {
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading-h6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*----------------------------------------------------------------
  Paragraphs
----------------------------------------------------------------*/
.post-content p {
  padding-left: var(--space-l);
  padding-bottom: var(--space-l);
  margin-bottom: 0;
  font-size: var(--font-size-p);
  line-height: var(--line-height-body);
}

/*----------------------------------------------------------------
  Links
----------------------------------------------------------------*/
.post-content p a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: var(--color-link-underline);
  text-decoration-skip-ink: none;
  text-underline-offset: -0.15em;
  transition: color var(--transition-default);
}

.post-content p a:hover {
  color: var(--color-link-hover);
}

/*----------------------------------------------------------------
  Lists
----------------------------------------------------------------*/
.post-content ul,
.post-content ol {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-medium);
  padding-bottom: var(--space-xl);
}

.post-content ul li {
  line-height: var(--line-height-list);
  margin-bottom: var(--space-l);
}

.c-post-meta ul li:nth-child(2) {
  font-weight: var(--font-weight-regular) !important;
}

/*----------------------------------------------------------------
  Images
----------------------------------------------------------------*/
.post-content .wp-block-image img {
  margin: var(--space-xxl) 0;
  border-radius: var(--radius-m);
}

/*----------------------------------------------------------------
  Blockquotes
----------------------------------------------------------------*/
.post-content blockquote {
  border-left: var(--width-quote-border) solid var(--color-quote-border);
  margin: 0;
  padding: var(--space-m) var(--space-l);
  background: var(--bg-quote);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-regular);
  border-radius: 0 4px 4px 0;
}

.post-content blockquote cite {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
}

.post-content blockquote p {
  padding-bottom: 0;
}

/*----------------------------------------------------------------
  Code Blocks
----------------------------------------------------------------*/
.post-content .wp-block-code {
  background: var(--bg-code);
  padding: var(--space-xl);
  border-radius: var(--radius-m);
}

.post-content code {
  color: var(--color-code-text);
}

/*----------------------------------------------------------------
  Mobile (≤767px)
----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .post-content h5,
  .post-content h6,
  .post-content p {
    padding-left: 0;
  }

  .post-content ul,
  .post-content ol {
    padding-left: var(--space-l);
  }

  .post-content .wp-block-image img {
    width: 100%;
    height: auto;
  }
}