/* =========================================================================
   Charlotte Denise, Cosy Herfst
   Design system, geinspireerd op de rust en het ritme van apieceofnien.nl
   ========================================================================= */

/* ---------- Tokens ---------------------------------------------------- */
:root {
  /* Kleuren, overgenomen uit de referentie */
  --cd-brown:        #603C22;
  --cd-brown-deep:   #4A2D19;
  --cd-brown-soft:   #7A5238;
  --cd-cream:        #F5EEE9;
  --cd-cream-warm:   #FAF5F1;
  --cd-blush:        #EFD8D0;
  --cd-blush-soft:   #F6E7E1;
  --cd-rust:         #D4834B;   /* alleen groot/decoratief, te licht voor kleine tekst */
  --cd-rust-deep:    #794012;   /* knoppen en links, voldoende contrast */
  --cd-white:        #FFFFFF;

  --cd-text:         #4A2D19;
  --cd-text-soft:    #6B4A32;
  --cd-on-dark:      #F5EEE9;
  --cd-on-dark-soft: #EFD8D0;
  --cd-line:         #E0CBC1;
  --cd-line-dark:    rgba(245, 238, 233, .28);

  /* Typografie */
  --cd-display: 'Cinzel', 'Times New Roman', serif;
  --cd-script:  'Sacramento', 'Segoe Script', cursive;
  --cd-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cd-ls-caps:  .2em;
  --cd-ls-wide:  .34em;
  --cd-ls-body:  .01em;

  /* Ritme */
  --cd-container: 1200px;
  --cd-narrow:    720px;
  --cd-wide:      1440px;
  --cd-gutter:    clamp(20px, 5vw, 48px);
  --cd-section-y: clamp(64px, 9vw, 128px);
  --cd-radius:    2px;      /* de referentie is strak, nauwelijks ronding */
  --cd-radius-pill: 999px;

  --cd-shadow-soft: 0 18px 48px rgba(74, 45, 25, .10);
  --cd-shadow-card: 0 10px 30px rgba(74, 45, 25, .08);
  --cd-ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--cd-cream);
  color: var(--cd-text);
  font-family: var(--cd-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  letter-spacing: var(--cd-ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg, iframe { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--cd-rust-deep); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--cd-brown); }

:focus-visible {
  outline: 2px solid var(--cd-rust-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.cd-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cd-brown); color: var(--cd-on-dark);
  padding: 14px 22px; font-family: var(--cd-display);
  text-transform: uppercase; letter-spacing: var(--cd-ls-caps); font-size: .8rem;
}
.cd-skip-link:focus { left: 12px; top: 12px; }

.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;
}

/* ---------- Typografie ------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cd-display);
  font-weight: 400;
  color: var(--cd-brown);
  margin: 0 0 .6em;
  line-height: 1.24;
  text-transform: uppercase;
  letter-spacing: var(--cd-ls-caps);
}

h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: var(--cd-ls-wide); }
h2 { font-size: clamp(1.45rem, 2.9vw, 2.25rem); letter-spacing: var(--cd-ls-wide); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: clamp(1rem, 1.5vw, 1.15rem); }
h5, h6 { font-size: .95rem; }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--cd-brown); }
em, i { font-style: italic; }

blockquote {
  margin: 2.4em 0;
  padding: 0 0 0 clamp(18px, 3vw, 32px);
  border-left: 2px solid var(--cd-rust);
  font-family: var(--cd-display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  text-transform: none;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--cd-brown);
}
blockquote cite { display: block; margin-top: .8em; font-family: var(--cd-body); font-size: .85rem; font-style: normal; letter-spacing: var(--cd-ls-caps); text-transform: uppercase; color: var(--cd-text-soft); }

hr, .wp-block-separator {
  border: 0; height: 1px; background: var(--cd-line);
  margin: clamp(40px, 6vw, 72px) auto; max-width: 180px;
}

/* Sier-typografie */
.cd-script {
  font-family: var(--cd-script);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--cd-brown);
}
.cd-eyebrow {
  font-family: var(--cd-display);
  font-size: clamp(.74rem, 1.1vw, .84rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--cd-rust-deep);
  margin: 0 0 1.1em;
  display: block;
}
.cd-lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.9;
  color: var(--cd-text-soft);
}

/* ---------- Layout ------------------------------------------------------ */
.cd-container { width: 100%; max-width: var(--cd-container); margin-inline: auto; padding-inline: var(--cd-gutter); }
.cd-container--narrow { max-width: var(--cd-narrow); }
.cd-container--wide { max-width: var(--cd-wide); }

.cd-section { padding-block: var(--cd-section-y); position: relative; }
.cd-section--tight { padding-block: clamp(44px, 6vw, 80px); }

.cd-section--cream { background: var(--cd-cream); }
.cd-section--warm  { background: var(--cd-cream-warm); }
.cd-section--blush { background: var(--cd-blush); }
.cd-section--blush-soft { background: var(--cd-blush-soft); }

.cd-section--brown { background: var(--cd-brown); color: var(--cd-on-dark); }
.cd-section--brown h1, .cd-section--brown h2, .cd-section--brown h3,
.cd-section--brown h4, .cd-section--brown .cd-script { color: var(--cd-on-dark); }
.cd-section--brown .cd-eyebrow { color: var(--cd-on-dark-soft); }
.cd-section--brown p, .cd-section--brown .cd-lead { color: var(--cd-on-dark-soft); }
.cd-section--brown a { color: var(--cd-on-dark); }

.cd-center { text-align: center; }
.cd-center .cd-lead, .cd-center p { margin-inline: auto; }
.cd-measure { max-width: 54ch; }
.cd-center .cd-measure { margin-inline: auto; }

/* Een kolom binnen een split, als er geen beeld is */
.cd-split--solo { grid-template-columns: 1fr; max-width: var(--cd-narrow); margin-inline: auto; }

/* Kleine hulpteksten */
.cd-hint { margin-top: 1.6em; font-size: .85rem; opacity: .75; }
.cd-note { margin-top: 1.4em; font-size: .82rem; opacity: .8; font-style: italic; }

/* Twee kolommen, rustig en ruim */
.cd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}
.cd-split--media-right > .cd-split__media { order: 2; }
@media (max-width: 860px) {
  .cd-split { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 48px); }
  .cd-split--media-right > .cd-split__media { order: 0; }
}

/* ---------- Knoppen ----------------------------------------------------- */
.cd-btn,
.wp-block-button__link,
button, input[type="submit"], .mailpoet_submit {
  display: inline-block;
  font-family: var(--cd-display);
  font-size: clamp(.74rem, 1vw, .84rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1;
  padding: 1.1em 2.3em;
  border-radius: var(--cd-radius-pill);
  border: 1px solid var(--cd-rust-deep);
  background: var(--cd-rust-deep);
  color: var(--cd-cream);
  text-decoration: none;
  cursor: pointer;
  transition: background .35s var(--cd-ease), color .35s var(--cd-ease), border-color .35s var(--cd-ease), transform .35s var(--cd-ease);
}
.cd-btn:hover,
.wp-block-button__link:hover,
button:hover, input[type="submit"]:hover, .mailpoet_submit:hover {
  background: var(--cd-brown-deep);
  border-color: var(--cd-brown-deep);
  color: var(--cd-cream);
  transform: translateY(-2px);
}

.cd-btn--outline {
  background: transparent;
  color: var(--cd-rust-deep);
  border-color: var(--cd-rust-deep);
}
.cd-btn--outline:hover { background: var(--cd-rust-deep); color: var(--cd-cream); }

.cd-btn--light {
  background: var(--cd-blush);
  border-color: var(--cd-blush);
  color: var(--cd-brown-deep);
}
.cd-btn--light:hover { background: var(--cd-cream); border-color: var(--cd-cream); color: var(--cd-brown-deep); }

.cd-btn--ghost-light {
  background: transparent;
  border-color: var(--cd-on-dark-soft);
  color: var(--cd-on-dark);
}
.cd-btn--ghost-light:hover { background: var(--cd-on-dark); color: var(--cd-brown-deep); border-color: var(--cd-on-dark); }

.cd-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.cd-center .cd-btns { justify-content: center; }

/* Tekstlink met pijl */
.cd-arrow-link {
  font-family: var(--cd-display);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cd-rust-deep);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .6em;
}
.cd-arrow-link span { transition: transform .35s var(--cd-ease); display: inline-block; }
.cd-arrow-link:hover span { transform: translateX(5px); }

/* ---------- Header / navigatie ------------------------------------------ */
.cd-header {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  padding-block: clamp(14px, 2vw, 22px);
  color: var(--cd-on-dark);
}
.cd-header--solid {
  position: sticky; top: 0;
  background: var(--cd-brown);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.cd-header.is-stuck {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--cd-brown);
  animation: cdSlideDown .45s var(--cd-ease);
  box-shadow: 0 6px 24px rgba(74,45,25,.18);
}
@keyframes cdSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.cd-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.cd-nav__brand {
  font-family: var(--cd-display);
  font-size: clamp(.95rem, 1.6vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: var(--cd-ls-wide);
  color: var(--cd-on-dark);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.cd-nav__brand img { max-height: 48px; width: auto; max-width: min(280px, 34vw); margin-inline: auto; object-fit: contain; }

.cd-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); }
.cd-nav__menu--left  { justify-content: flex-start; }
.cd-nav__menu--right { justify-content: flex-end; }
.cd-nav__menu a {
  font-family: var(--cd-display);
  font-size: clamp(.74rem, .95vw, .84rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--cd-on-dark);
  text-decoration: none;
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
}
.cd-nav__menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--cd-ease);
}
.cd-nav__menu a:hover::after,
.cd-nav__menu .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

/* submenu */
.cd-nav__menu .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--cd-brown); list-style: none; margin: 0; padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .3s var(--cd-ease); z-index: 60;
}
.cd-nav__menu li { position: relative; }
.cd-nav__menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cd-nav__menu .sub-menu a { display: block; padding: 8px 20px; }

/* mobiel */
.cd-nav__toggle {
  display: none;
  background: transparent; border: 0; padding: 8px;
  color: var(--cd-on-dark); cursor: pointer;
  width: 44px; height: 44px;
}
.cd-nav__toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; margin: 5px auto; transition: transform .35s var(--cd-ease), opacity .25s; }
.cd-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cd-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cd-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .cd-nav { grid-template-columns: 44px 1fr 44px; }
  .cd-nav__toggle { display: block; }
  .cd-nav__menu--right { display: none; }
  .cd-nav__menu--left {
    position: fixed; inset: 0; z-index: 55;
    background: var(--cd-brown);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 26px; padding: 80px 24px;
    transform: translateX(-100%); transition: transform .45s var(--cd-ease);
    overflow-y: auto;
  }
  .cd-nav__menu--left.is-open { transform: translateX(0); }
  .cd-nav__menu--left a { font-size: 1rem; }
  .cd-nav__menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; text-align: center; }
}

/* ---------- Hero -------------------------------------------------------- */
.cd-hero {
  position: relative;
  min-height: clamp(520px, 82vh, 820px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--cd-brown);
}
.cd-hero__media { position: absolute; inset: 0; }
.cd-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cd-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(74,45,25,.42) 0%, rgba(74,45,25,.10) 34%, rgba(74,45,25,.55) 100%);
}
.cd-hero__inner { position: relative; z-index: 2; padding-block: clamp(48px, 9vw, 110px); width: 100%; }
.cd-hero__script { color: var(--cd-cream); text-shadow: 0 2px 24px rgba(74,45,25,.5); margin: 0 0 .35em; }
.cd-hero__sub {
  color: var(--cd-cream);
  font-family: var(--cd-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: clamp(.76rem, 1.1vw, .88rem);
  margin: 0 0 1.8em;
  text-shadow: 0 2px 18px rgba(74,45,25,.55);
}
.cd-hero__text { max-width: 30ch; color: var(--cd-cream); margin-bottom: 2em; text-shadow: 0 1px 14px rgba(74,45,25,.5); }
.cd-hero--center .cd-hero__inner { text-align: center; }
.cd-hero--center .cd-hero__text { margin-inline: auto; }
.cd-hero--center .cd-btns { justify-content: center; }

/* Compacte pagina-hero */
.cd-pagehead {
  background: var(--cd-brown);
  color: var(--cd-on-dark);
  padding-block: clamp(96px, 13vw, 172px) clamp(48px, 7vw, 84px);
  text-align: center;
}
.cd-pagehead h1, .cd-pagehead .cd-script { color: var(--cd-on-dark); margin-bottom: .3em; }
.cd-pagehead .cd-eyebrow { color: var(--cd-on-dark-soft); }
.cd-pagehead p { color: var(--cd-on-dark-soft); max-width: 56ch; margin-inline: auto; }

/* ---------- Polaroid collage (motief uit de referentie) ------------------
   Een grote ankerfoto met kleinere polaroids die er schuin overheen vallen,
   net als op apieceofnien.nl. Werkt met 1, 2 of 3 foto's.
   ----------------------------------------------------------------------- */
.cd-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
}

.cd-polaroid {
  background: var(--cd-white);
  padding: 10px 10px 34px;
  box-shadow: 0 14px 38px rgba(74, 45, 25, .16);
  transition: transform .55s var(--cd-ease), box-shadow .55s var(--cd-ease);
}
.cd-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.cd-collage .cd-polaroid { position: absolute; }

/* De grote ankerfoto, linksonder */
.cd-collage .cd-polaroid:nth-child(1) {
  width: 62%;
  left: 0;
  bottom: 0;
  transform: rotate(-2.5deg);
  z-index: 1;
}

/* Kleinere polaroid, rechtsboven eroverheen */
.cd-collage .cd-polaroid:nth-child(2) {
  width: 40%;
  right: 6%;
  top: 0;
  transform: rotate(5deg);
  z-index: 3;
}

/* Derde polaroid, rechtsonder ertussen */
.cd-collage .cd-polaroid:nth-child(3) {
  width: 37%;
  right: 0;
  bottom: 12%;
  transform: rotate(-4deg);
  z-index: 2;
}

/* Staat er maar een foto, zet die dan netjes gecentreerd en groter */
.cd-collage .cd-polaroid:first-child:last-child {
  width: 78%;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%) rotate(-2deg);
}

.cd-collage .cd-polaroid:hover {
  transform: rotate(0) scale(1.035);
  box-shadow: 0 22px 54px rgba(74, 45, 25, .22);
  z-index: 4;
}
.cd-collage .cd-polaroid:first-child:last-child:hover {
  transform: translate(-50%, 50%) scale(1.035);
}

@media (max-width: 640px) {
  .cd-collage { max-width: 400px; }
  .cd-polaroid { padding: 8px 8px 26px; }
}

/* Kaart-overlay op een foto (zoals "your creative bestie") */
.cd-overlay-section { position: relative; display: grid; place-items: center; min-height: clamp(420px, 56vw, 620px); overflow: hidden; }
.cd-overlay-section__media { position: absolute; inset: 0; }
.cd-overlay-section__media img { width: 100%; height: 100%; object-fit: cover; }
.cd-overlay-section__media::after { content: ''; position: absolute; inset: 0; background: rgba(74,45,25,.28); }
.cd-overlay-card {
  position: relative; z-index: 2;
  background: rgba(96, 60, 34, .92);
  color: var(--cd-on-dark);
  padding: clamp(32px, 5vw, 64px);
  max-width: min(560px, 88vw);
  text-align: center;
}
.cd-overlay-card h2, .cd-overlay-card .cd-script { color: var(--cd-on-dark); }
.cd-overlay-card p { color: var(--cd-on-dark-soft); margin-bottom: 0; }

/* ---------- Post cards --------------------------------------------------- */
.cd-grid { display: grid; gap: clamp(28px, 3.4vw, 48px); }
.cd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cd-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cd-grid--3, .cd-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cd-grid--2, .cd-grid--3, .cd-grid--4 { grid-template-columns: 1fr; } }

.cd-card { display: flex; flex-direction: column; }
.cd-card__media { overflow: hidden; margin-bottom: 20px; background: var(--cd-blush-soft); }
.cd-card__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--cd-ease); }
.cd-card__media--leeg {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--cd-blush-soft);
  border: 1px solid var(--cd-line);
}
.cd-card__mark { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--cd-rust); line-height: 1; }
.cd-card:hover .cd-card__media img { transform: scale(1.045); }
.cd-card__meta {
  font-family: var(--cd-display);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cd-rust-deep);
  margin-bottom: .9em;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7em;
}
.cd-card__meta .cd-dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; display: inline-block; }
.cd-card__title {
  font-family: var(--cd-display);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.45;
  margin: 0 0 .7em;
}
.cd-card__title a { color: var(--cd-brown); text-decoration: none; }
.cd-card__title a:hover { color: var(--cd-rust-deep); }
.cd-card__excerpt { font-size: .95rem; line-height: 1.8; color: var(--cd-text-soft); margin-bottom: 1.2em; }
.cd-card__footer { margin-top: auto; }

/* Uitgelicht, groot */
.cd-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .cd-feature { grid-template-columns: 1fr; } }
.cd-feature__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Categorie-band ---------------------------------------------- */
.cd-catband {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
  list-style: none; margin: 0; padding: 0;
}
.cd-catband li { margin: 0; }
.cd-catband a {
  font-family: var(--cd-display);
  font-size: clamp(.74rem, 1vw, .84rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--cd-brown-deep);
  text-decoration: none;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-pill);
  padding: .85em 1.7em;
  background: transparent;
  transition: background .35s var(--cd-ease), color .35s var(--cd-ease), border-color .35s var(--cd-ease);
}
.cd-catband a:hover { background: var(--cd-brown); border-color: var(--cd-brown); color: var(--cd-cream); }
.cd-section--brown .cd-catband a { color: var(--cd-on-dark); border-color: var(--cd-line-dark); }
.cd-section--brown .cd-catband a:hover { background: var(--cd-on-dark); color: var(--cd-brown-deep); border-color: var(--cd-on-dark); }

/* ---------- Boekrecensie: meta-paneel ------------------------------------ */
.cd-bookmeta {
  background: var(--cd-blush-soft);
  border: 1px solid var(--cd-line);
  padding: clamp(22px, 3.4vw, 34px);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.cd-bookmeta__title {
  font-family: var(--cd-display);
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em;
  color: var(--cd-rust-deep); margin: 0 0 1.2em;
}
.cd-bookmeta dl { display: grid; grid-template-columns: auto 1fr; gap: .55em 1.4em; margin: 0; }
.cd-bookmeta dt {
  font-family: var(--cd-display); font-size: .76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cd-text); padding-top: .28em;
}
.cd-bookmeta dd { margin: 0; font-size: .96rem; color: var(--cd-brown); }
@media (max-width: 520px) { .cd-bookmeta dl { grid-template-columns: 1fr; gap: .15em; } .cd-bookmeta dd { margin-bottom: .7em; } }

.cd-rating { display: inline-flex; align-items: center; gap: .25em; letter-spacing: .1em; }
.cd-rating__stars { color: var(--cd-rust); font-size: 1rem; letter-spacing: .08em; }
.cd-rating__value { font-size: .82rem; color: var(--cd-text-soft); margin-left: .5em; }

/* Handtekening onder een post */
.cd-signoff { margin-top: clamp(32px, 5vw, 52px); text-align: left; }
.cd-signoff__label { font-size: .95rem; color: var(--cd-text-soft); margin: 0 0 .1em; }
.cd-signoff__name { font-family: var(--cd-script); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--cd-brown); line-height: 1; }

/* ---------- Artikel-inhoud (Gutenberg) ----------------------------------- */
.cd-content { font-size: 1.0625rem; line-height: 1.9; }
.cd-content > * { margin-bottom: 1.45em; }
.cd-content > *:last-child { margin-bottom: 0; }
.cd-content h2 { margin-top: 1.8em; font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
.cd-content h3 { margin-top: 1.6em; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.cd-content ul, .cd-content ol { padding-left: 1.3em; }
.cd-content li { margin-bottom: .5em; }
.cd-content li::marker { color: var(--cd-rust); }
.cd-content img, .cd-content figure { margin-block: clamp(28px, 4vw, 44px); }
.cd-content figcaption {
  font-size: .82rem; color: var(--cd-text-soft); text-align: center;
  margin-top: .9em; letter-spacing: .04em;
}
.cd-content a { color: var(--cd-rust-deep); }

/* Block-uitlijning */
.alignwide { width: min(var(--cd-wide), 100vw - 2 * var(--cd-gutter)); margin-inline: auto; max-width: none; }
.alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.alignleft { float: left; margin: .4em 2em 1.4em 0; }
.alignright { float: right; margin: .4em 0 1.4em 2em; }
.aligncenter { margin-inline: auto; }
.wp-block-image img { width: 100%; }
.wp-block-gallery { gap: 14px; }
.wp-block-pullquote { border-top: 1px solid var(--cd-line); border-bottom: 1px solid var(--cd-line); padding: 2em 0; text-align: center; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--cd-line); padding: .8em 1em; text-align: left; }
.wp-block-table th { font-family: var(--cd-display); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; background: var(--cd-blush-soft); }
.wp-block-quote { border-left: 2px solid var(--cd-rust); padding-left: clamp(18px, 3vw, 32px); }
.wp-block-code, pre { background: var(--cd-brown); color: var(--cd-cream); padding: 1.2em 1.4em; overflow-x: auto; font-size: .88rem; }
code { background: var(--cd-blush-soft); padding: .15em .45em; font-size: .9em; }
/* Kolommen, groepen en media-tekst, de blokken die Charlotte het meest gebruikt */
.cd-content .wp-block-columns { gap: clamp(20px, 3vw, 40px); align-items: flex-start; }
.cd-content .wp-block-column { min-width: 0; }
@media (max-width: 780px) {
  .cd-content .wp-block-columns { flex-wrap: wrap; }
  .cd-content .wp-block-column { flex-basis: 100% !important; }
}

.cd-content .wp-block-group.has-background {
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--cd-radius);
}
.cd-content .wp-block-group + .wp-block-group { margin-top: clamp(20px, 3vw, 32px); }

.cd-content .wp-block-media-text { gap: clamp(20px, 3vw, 44px); align-items: center; }
.cd-content .wp-block-media-text__content { padding: 0; }
@media (max-width: 780px) {
  .cd-content .wp-block-media-text { display: block; }
  .cd-content .wp-block-media-text__media { margin-bottom: 20px; }
}

.cd-content .wp-block-buttons { gap: 12px; margin-block: 1.6em; }
.cd-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--cd-rust-deep); border-color: var(--cd-rust-deep);
}
.cd-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--cd-rust-deep); color: var(--cd-cream);
}

/* Afbeeldingen binnen kolommen niet laten uitrekken */
.cd-content .wp-block-column .wp-block-image { margin-block: 0 1.2em; }

.wp-block-embed__wrapper { position: relative; }
.wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* ---------- Nieuwsbrief / MailPoet --------------------------------------- */
.cd-newsletter { text-align: center; }
.cd-newsletter .cd-lead { max-width: 52ch; margin-inline: auto; }

.mailpoet_form,
.cd-form { max-width: 520px; margin: 2em auto 0; }
.mailpoet_paragraph { margin-bottom: 14px; }
.mailpoet_text, .mailpoet_email,
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], textarea, select {
  width: 100%;
  font-family: var(--cd-body);
  font-size: .98rem;
  color: var(--cd-text);
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-pill);
  padding: 1em 1.5em;
  transition: border-color .3s var(--cd-ease), box-shadow .3s var(--cd-ease);
}
textarea { border-radius: 18px; min-height: 150px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #A98C79; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--cd-rust-deep);
  box-shadow: 0 0 0 3px rgba(121, 64, 18, .12);
}
.cd-section--brown input, .cd-section--brown textarea, .cd-section--brown select { border-color: transparent; }
.cd-section--brown .mailpoet_submit, .cd-section--brown input[type="submit"] {
  background: var(--cd-blush); border-color: var(--cd-blush); color: var(--cd-brown-deep);
}
.cd-section--brown .mailpoet_submit:hover, .cd-section--brown input[type="submit"]:hover {
  background: var(--cd-cream); border-color: var(--cd-cream);
}
.mailpoet_validate_success { color: var(--cd-brown); font-weight: 600; }
.cd-section--brown .mailpoet_validate_success { color: var(--cd-on-dark); }
.mailpoet_validate_error { color: #A3341F; }

/* ---------- Footer ------------------------------------------------------- */
.cd-footer { background: var(--cd-blush); color: var(--cd-brown-deep); padding-block: clamp(48px, 7vw, 84px) clamp(28px, 4vw, 40px); }
.cd-footer a { color: var(--cd-brown-deep); text-decoration: none; }
.cd-footer a:hover { color: var(--cd-rust-deep); }
.cd-footer__cols {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 340px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.cd-footer__col--mid { text-align: center; }
.cd-footer__col--right { text-align: right; }
.cd-footer__heading {
  font-family: var(--cd-display); font-size: .82rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .24em; color: var(--cd-rust-deep); margin: 0 0 1.3em;
}
.cd-footer__brand {
  font-family: var(--cd-display); font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  text-transform: uppercase; letter-spacing: var(--cd-ls-wide); color: var(--cd-brown-deep);
  text-decoration: none; display: inline-block; margin-bottom: .9em;
  max-width: 100%;
}
/* Logo in de footer netjes begrenzen, anders duwt het de kolommen scheef */
.cd-footer__brand img {
  max-height: 62px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.cd-footer p { font-size: .92rem; line-height: 1.8; }
.cd-footer__menu { list-style: none; margin: 0; padding: 0; }
.cd-footer__menu li { margin-bottom: .55em; }
.cd-footer__menu a {
  font-family: var(--cd-display); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}
.cd-socials { display: flex; gap: 16px; justify-content: center; margin-top: .4em; }
.cd-footer__col--right .cd-socials { justify-content: flex-end; }
.cd-socials a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(74,45,25,.25); border-radius: 50%; transition: background .3s var(--cd-ease), color .3s var(--cd-ease), border-color .3s var(--cd-ease); }
.cd-socials a:hover { background: var(--cd-brown-deep); color: var(--cd-blush); border-color: var(--cd-brown-deep); }
.cd-socials svg { width: 15px; height: 15px; fill: currentColor; }
.cd-footer__bottom {
  margin-top: clamp(32px, 5vw, 52px); padding-top: 22px;
  border-top: 1px solid rgba(74,45,25,.16);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .78rem; letter-spacing: .06em; color: var(--cd-brown-soft);
}
@media (max-width: 820px) {
  .cd-footer__cols { grid-template-columns: 1fr; text-align: center; }
  .cd-footer__col--right { text-align: center; }
  .cd-footer__col--right .cd-socials { justify-content: center; }
  .cd-footer__bottom { justify-content: center; text-align: center; }
}

/* Instagram-band */
.cd-instaband { background: var(--cd-brown); color: var(--cd-on-dark); padding-block: clamp(22px, 3vw, 34px); text-align: center; }
.cd-instaband a {
  font-family: var(--cd-display); font-size: clamp(.76rem, 1.3vw, .95rem);
  text-transform: uppercase; letter-spacing: var(--cd-ls-wide);
  color: var(--cd-on-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: .8em;
}
.cd-instaband svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Paginering, reacties, misc ----------------------------------- */
.cd-pagination { display: flex; justify-content: center; gap: 10px; margin-top: clamp(40px, 6vw, 72px); flex-wrap: wrap; }
.cd-pagination .page-numbers {
  font-family: var(--cd-display); font-size: .74rem; letter-spacing: .1em;
  min-width: 42px; height: 42px; display: inline-grid; place-items: center;
  border: 1px solid var(--cd-line); color: var(--cd-brown); text-decoration: none;
  border-radius: 50%; padding-inline: .6em;
  transition: background .3s var(--cd-ease), color .3s var(--cd-ease), border-color .3s var(--cd-ease);
}
.cd-pagination .page-numbers:hover,
.cd-pagination .page-numbers.current { background: var(--cd-brown); color: var(--cd-cream); border-color: var(--cd-brown); }

.cd-comments { margin-top: clamp(48px, 7vw, 84px); }
.cd-comments__title { font-size: clamp(1rem, 1.6vw, 1.3rem); margin-bottom: 1.6em; }
.cd-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.cd-comments .comment-list li { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--cd-line); }
.cd-comments .comment-list .children { list-style: none; margin: 24px 0 0 clamp(16px, 4vw, 44px); padding: 0; }
.cd-comments .comment-author { font-family: var(--cd-display); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cd-brown); }
.cd-comments .comment-metadata { font-size: .76rem; color: var(--cd-text-soft); margin-bottom: .8em; }
.cd-comments .avatar { border-radius: 50%; margin-right: 12px; float: left; }

.cd-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(40px, 6vw, 64px); padding-top: 32px; border-top: 1px solid var(--cd-line); }
.cd-postnav__item a { font-family: var(--cd-display); font-size: .74rem; text-transform: uppercase; letter-spacing: var(--cd-ls-caps); text-decoration: none; color: var(--cd-brown); }
.cd-postnav__item--next { text-align: right; }
.cd-postnav__label { display: block; font-size: .66rem; color: var(--cd-rust-deep); margin-bottom: .5em; letter-spacing: var(--cd-ls-caps); }
@media (max-width: 560px) { .cd-postnav { grid-template-columns: 1fr; } .cd-postnav__item--next { text-align: left; } }

/* Zoekformulier */
.cd-searchform { display: flex; gap: 10px; max-width: 480px; }
.cd-searchform input[type="search"] { flex: 1; }

/* Lege staat */
.cd-empty { text-align: center; padding-block: clamp(40px, 7vw, 90px); }
.cd-empty .cd-script { margin-bottom: .3em; }

/* Zachte inkomst-animatie.
   Alleen verbergen als JavaScript actief is, zodat content nooit onzichtbaar
   blijft wanneer het script faalt, traag laadt of geblokkeerd wordt. */
.cd-js .cd-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--cd-ease), transform .8s var(--cd-ease);
}
.cd-js .cd-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cd-js .cd-reveal { opacity: 1; transform: none; transition: none; }
}

/* WordPress admin bar correctie */
.admin-bar .cd-header.is-stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .cd-header.is-stuck { top: 46px; } }