/* HERO */
/* De .rozen-* aliassen blijven staan: pagina's die vóór de generieke rename
   zijn gepubliceerd hebben die classnames nog in hun HTML. Weglaten breekt
   hun hero, en die pagina's kunnen we niet meer aanpassen zonder ze stuk
   voor stuk te openen. */
.cat-hero,
.rozen-hero {
  margin-bottom: 20px;
}

.cat-title,
.rozen-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.cat-subtitle,
.rozen-subtitle {
  font-size: 14px;
  color: #555;
  max-width: 600px;
}

/* KEUZEBLOK */
.cat-keuze,
.rozen-keuze {
  margin-top: 15px;
}

/* CARD BASIS */
.keuze-card {
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.2s ease;
  margin-bottom: 10px;
}

/* TITELS */
.keuze-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 3px;
}

.keuze-sub {
  font-size: 12px;
  color: #666;
}

/* KWEKER */
.keuze-kweker {
  background-color: #E6F4EA;
}

/* BLOEMIST */
.keuze-bloemist {
  background-color: #F6E7E7;
}

/* MOBILE OPTIMALISATIE */
@media (max-width: 768px) {
  .cat-title,
  .rozen-title {
    font-size: 22px;
  }

  .cat-subtitle,
  .rozen-subtitle {
    font-size: 13px;
  }

  .keuze-card {
    padding: 10px;
  }
}

/* ─── Artikelopmaak ─── */
.article-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 15px 40px;
}

.article-wrap .intro {
  font-size: 22px;
  line-height: 1.55;
  font-weight: 400;
  margin: 0 0 28px;
  color: #111;
}

.article-wrap p {
  font-size: 21px;
  line-height: 1.7;
  margin: 0 0 24px;
  color: #111;
}

.article-wrap h2 {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  margin: 42px 0 18px;
  color: #111;
}

.article-wrap h3 {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  margin: 34px 0 16px;
  color: #111;
}

.article-wrap ul,
.article-wrap ol {
  margin: 0 0 28px 28px;
  padding: 0;
}

.article-wrap li {
  font-size: 21px;
  line-height: 1.7;
  margin-bottom: 10px;
}

.article-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0 34px;
}

.article-wrap a {
  color: #7F1439;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-wrap a:hover {
  color: #5C0E28;
}

.article-wrap strong {
  font-weight: 700;
}

/* ─── FAQ ───
   Zonder deze regels vielen dt/dd terug op de browser-default: 16px in een pagina
   die verder 21px body draait, plus de 40px inspring op dd die op mobiel de
   regelbreedte opvreet.

   Let op: de AI levert de FAQ in twee vormen aan — <dl><dt>/<dd> (homepage) of
   <h3> + <p> (categorieën, zie lib/prompts/category.ts). Alleen de dl-variant is
   hier te stylen. De h3-variant is met CSS niet te onderscheiden van een gewone
   artikel-h3, dus die blijft er anders uitzien tot de FAQ een eigen class krijgt
   in de prompts. */
.article-wrap dl {
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid #E6E1E3;
}

.article-wrap dt {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;
  color: #111;
  margin: 0;
  padding: 22px 0 0;
}

.article-wrap dd {
  font-size: 21px;
  line-height: 1.7;
  color: #111;
  /* reset de browser-default margin-inline-start van 40px */
  margin: 8px 0 0;
  padding: 0 0 22px;
  border-bottom: 1px solid #E6E1E3;
}

.article-wrap dd :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* H1 */
.page-header h1,
h1 {
  margin-left: auto;
  margin-right: auto;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
}

/* ─── Variant card ─── */
.variant-card {
  background: #fdf9f7;
  border-left: 3px solid #d4537e;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.variant-card h3,
.bezorg-card h3 {
  margin-top: 4px;
  margin-bottom: 6px;
}

/* ─── Bezorg card ─── */
.bezorg-card {
  background: #fdf9f7;
  border: 1px solid #ece8e4;
  padding: 20px 24px;
  margin-bottom: 20px;
}

/* ─── Tags ─── */
.tag-kweker {
  display: inline-block;
  padding: 2px 10px;
  background: #fbeaf0;
  color: #993556;
  border-radius: 20px;
  margin-bottom: 8px;
}

.tag-bloemist {
  display: inline-block;
  padding: 2px 10px;
  background: #eaf3de;
  color: #3b6d11;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ─── Kwaliteit block ─── */
.kwaliteit-block {
  background: #fdf9f7;
  border: 1px solid #ece8e4;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.kwaliteit-block h2,
.cta-block h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.kwaliteit-block p,
.cta-block p {
  margin-bottom: 8px;
}

/* ─── CTA block ─── */
.cta-block {
  background: #7F1439;
  color: #fff;
  border-radius: 12px;
  padding: 32px 36px;
  margin-top: 32px;
  text-align: center;
}

.cta-block h2 {
  color: #fff;
  font-size: 26px;
  margin-bottom: 12px;
}

.cta-block p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  line-height: 1.6;
}

/* Links in CTA: normale inline links, geen buttons */
.cta-block a {
  color: #F6BE32;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.cta-block a:hover {
  color: #fff;
}

/* Optionele primaire CTA link */
.cta-block a.cta-primary {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 28px;
  background: #F6BE32;
  color: #7F1439;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 18px;
  transition: background 0.2s;
}

.cta-block a.cta-primary:hover {
  background: #F9D06A;
}

/* ─── Aantallen tabel ─── */
.aantal-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.aantal-tabel td {
  border-bottom: 1px solid #ece8e4;
  padding: 10px 12px;
  vertical-align: top;
}

.aantal-tabel td:first-child {
  white-space: nowrap;
  font-weight: bold;
  width: 90px;
}

.aantal-tabel tr:last-child td {
  border-bottom: none;
}

/* ─── Tablet ─── */
@media (max-width: 991px) {
  .article-wrap {
    max-width: 640px;
  }

  .article-wrap .intro,
  .article-wrap p,
  .article-wrap li,
  .article-wrap dt,
  .article-wrap dd {
    font-size: 18px;
  }

  .article-wrap h2 {
    font-size: 28px;
  }

  .article-wrap h3 {
    font-size: 23px;
  }

  .page-header h1,
  h1 {
    font-size: 36px;
  }

  .cta-block {
    padding: 24px 20px;
  }

  .cta-block h2 {
    font-size: 23px;
  }
}

/* ─── Mobiel ─── */
@media (max-width: 767px) {
  .article-wrap {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .article-wrap .intro,
  .article-wrap p,
  .article-wrap li,
  .article-wrap dd {
    font-size: 17px;
    line-height: 1.65;
  }

  /* Vraag 1px groter dan het antwoord: op 17px is bold alleen te weinig
     contrast om de scanlijn vast te houden. */
  .article-wrap dt {
    font-size: 18px;
    padding-top: 18px;
  }

  .article-wrap dd {
    padding-bottom: 18px;
  }

  .article-wrap h2 {
    font-size: 25px;
    margin-top: 32px;
  }

  .article-wrap h3 {
    font-size: 21px;
  }

  .page-header h1,
  h1 {
    font-size: 29px;
    line-height: 1.2;
  }

  .cta-block {
    padding: 20px 16px;
    border-radius: 8px;
  }

  .cta-block h2 {
    font-size: 21px;
  }

  .cta-block p {
    font-size: 16px;
  }
}