/* ==================================================================
   NR Agri — opmaak van de teksten die de beheerder zelf schrijft

   WAAR HET OVER GAAT
   ==================
   Vier plekken, twee modules:

     .nr-cat-text    categorietekst boven/onder het productoverzicht (Seo)
     .nr-cat-block   vrij blok over de volle breedte (Content)
     .nr-prod-text   tekst boven/onder de productpagina (Seo)

   De typografie zelf — koppen, opsommingstekens, witruimte tussen alinea's —
   komt van de klasse `prose` van het thema. Die staat in de sjablonen. Zonder
   die klasse haalt Tailwind's preflight álles weg: `h1..h6` krijgen
   `font-size:inherit`, `ul` krijgt `list-style:none` en alinea's verliezen hun
   marge. De tekst wordt dan één grijs blok — precies wat er gemeld werd.

   Dit bestand doet alleen wat `prose` niet doet: de tekst op een leesbare
   breedte houden, ruimte eromheen, en de onderste tekst visueel losmaken van
   het productoverzicht.

   WAAROM EEN LEESBARE BREEDTE
   ===========================
   Een regel van 1200 pixels breed leest niemand prettig; het oog raakt het
   begin van de volgende regel kwijt. 68 tekens is de gangbare bovengrens.
   ================================================================== */


/* ------------------------------------------------------------------
   1. Gedeelde uitgangspunten
   ------------------------------------------------------------------ */

.nr-cat-text,
.nr-cat-block,
.nr-prod-text {
    color: var(--color-fg, #1f2937);
    font-size: .95rem;
    line-height: 1.65;
}

/* Koppen in beheerderstekst mogen nooit met de H1 van de pagina wedijveren.
   `prose` maakt een h1 drie keer zo groot als de tekst; binnen een tekstblok
   is dat te veel, en het is bovendien slecht voor de vindbaarheid als er twee
   koppen van hetzelfde gewicht op één pagina staan. */
.nr-cat-text,
.nr-cat-block,
.nr-prod-text {
    --h1-size: 1.5em;
    --h2-size: 1.3em;
    --h3-size: 1.12em;
}

/* Afbeeldingen in beheerderstekst nooit breder dan het blok. */
.nr-cat-text img,
.nr-cat-block img,
.nr-prod-text img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}

/* Een brede tabel scrollt in zichzelf en niet de hele pagina. */
.nr-cat-text table,
.nr-cat-block table,
.nr-prod-text table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}


/* ------------------------------------------------------------------
   2. Categorietekst — smal, in de productkolom
   ------------------------------------------------------------------ */

.nr-cat-text { max-width: 68ch; }

.nr-cat-text--top { margin: 0 0 1.5rem; }

/*
   De tekst onderaan staat direct onder de producten. Zonder scheiding leest
   hij als bijschrift bij het laatste product. Een dunne lijn en ruimte erboven
   maken duidelijk dat er iets nieuws begint.
*/
.nr-cat-text--bottom {
    margin: 2.5rem 0 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}


/* ------------------------------------------------------------------
   3. Vrij blok — volle breedte, maar de tekst blijft leesbaar

   Het blok mag de volle breedte pakken (voor een foto of een tabel), maar
   lopende tekst erin wordt begrensd. Zo kan de beheerder een brede banner
   plaatsen zonder dat een alinea meteen 1200 pixels breed wordt.
   ------------------------------------------------------------------ */

.nr-cat-block--top { margin: .5rem auto 1.5rem; }

.nr-cat-block--bottom {
    margin: 2.5rem auto .5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.nr-cat-block > p,
.nr-cat-block > ul,
.nr-cat-block > ol,
.nr-cat-block > h2,
.nr-cat-block > h3,
.nr-cat-block > h4 {
    max-width: 68ch;
}


/* ------------------------------------------------------------------
   4. Producttekst
   ------------------------------------------------------------------ */

.nr-prod-text { max-width: 68ch; }

.nr-prod-text--top { margin: 0 0 1.25rem; }

.nr-prod-text--bottom {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}


/* ------------------------------------------------------------------
   5. Op een telefoon iets rustiger
   ------------------------------------------------------------------ */

@media (max-width: 640px) {
    .nr-cat-text,
    .nr-cat-block,
    .nr-prod-text { font-size: .92rem; }

    .nr-cat-text--bottom,
    .nr-cat-block--bottom,
    .nr-prod-text--bottom { margin-top: 1.75rem; padding-top: 1.25rem; }
}