/**
 * ZONE content — hoofdinhoud plus de kolommen links en rechts.
 * Template: templates/layout/regions/_content.html.twig
 * De kolommen zelf: sidebar-first.css en sidebar-second.css
 *
 *   telefoon (< 600px)         één kolom, in dezelfde volgorde als het oude
 *                              thema: links (Nieuws), inhoud, rechts
 *   tablet (≥ 600px)           links | inhoud naast elkaar, rechts eronder
 *                              over de volle breedte
 *   liggende tablet (≥ 900px)  links | inhoud | rechts
 *                              - met twee zijkolommen: drie gelijke kolommen
 *                              - met één zijkolom: inhoud 2/3, zijkolom 1/3
 */

/* ── Grid ─────────────────────────────────────────────── */
.zone-content {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "links"
    "inhoud"
    "rechts";
  align-items: start;
}

.zone-content__inhoud { grid-area: inhoud; }
.zone-sidebar-first   { grid-area: links; }
.zone-sidebar-second  { grid-area: rechts; }

@media (min-width: 37.5em) {
  .zone-content.zone-content--met-links.zone-content--met-rechts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "links  inhoud"
      "rechts rechts";
  }
}

@media (min-width: 56.25em) {
  .zone-content.zone-content--met-links.zone-content--met-rechts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "links inhoud rechts";
  }

  .zone-content.zone-content--met-links:not(.zone-content--met-rechts) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "links inhoud";
  }

  .zone-content.zone-content--met-rechts:not(.zone-content--met-links) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "inhoud rechts";
  }
}

/* Blokken onder elkaar binnen de inhoud, met ruimte ertussen. */
.zone-content__inhoud {
  min-width: 0;
  overflow-wrap: break-word; /* lange URL's en woorden breken af i.p.v. buiten beeld te steken */
}

/* Knoppen die redacteuren in de editor maken (oude Bootstrap-classes),
   bijv. "Informatieboekje" op /scouting. Oranje zoals het origineel, met
   donkere tekst voor voldoende contrast. */
.zone-content__inhoud .btn,
.zone-content__inhoud .btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: var(--klik);
  padding: 0.5rem 0.8125rem;
  font-size: var(--fs-klein);
  color: var(--c-inkt);
  background: var(--c-groen);
  text-decoration: none;
}

.zone-content__inhoud .btn:hover,
.zone-content__inhoud .btn:focus-visible {
  color: var(--c-inkt);
  background: var(--c-groen-licht);
  text-decoration: none;
}

/* Verzendknop van formulieren (contact, aanmelden) over de volle breedte,
   zoals het origineel. */
.zone-content__inhoud form .form-actions input[type="submit"],
.zone-content__inhoud form .form-actions button[type="submit"] {
  width: 100%;
  color: var(--c-inkt);
  background: var(--c-groen);
}

.zone-content__inhoud form .form-actions input[type="submit"]:hover,
.zone-content__inhoud form .form-actions button[type="submit"]:hover {
  background: var(--c-groen-licht);
}

/* Tabelbijschrift links, zoals het origineel. */
.zone-content__inhoud caption {
  padding-block: 0.5rem;
  text-align: start;
  font-weight: 700;
}

.zone-content__inhoud > .region {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ── Inhoud van gewone pagina's (donker paneel) ───────── */
.zone-content__inhoud.paneel {
  padding-bottom: var(--s-4);
}

.zone-content__inhoud.paneel > .region {
  gap: 0;
}

/* Paginatitel groen; tussenkoppen wit (zoals het origineel). */
.zone-content__inhoud.paneel h1 {
  color: var(--c-groen);
}

/* RSS-link ("Abonneer op …") onder views op de voorpagina verbergen,
   zoals het oude thema deed. */
.is-voorpagina .zone-content .feed-icon {
  display: none;
}

/* Tekst in de inhoud niet bredere regels dan prettig leesbaar is. */
.zone-content__inhoud .node__content,
.zone-content__inhoud .text-formatted {
  max-width: var(--tekst-breedte);
}

/* Redacteuren gebruiken in de editor soms een vaste tekstkleur, zoals bruin
   (#a0762c) of oranje (#f7793d, uit www gekopieerd). Op het donkere paneel is
   dat te weinig contrast (2,5:1 en 3,7:1); daarom tonen we die tekst hier
   groen (5,2:1). */
.zone-content__inhoud.paneel [style*="#a0762c" i],
.zone-content__inhoud.paneel [style*="rgb(160, 118, 44)"],
.zone-content__inhoud.paneel [style*="#f7793d" i],
.zone-content__inhoud.paneel [style*="rgb(247, 121, 61)"] {
  color: var(--c-groen) !important;
}

/* Afbeeldingen die met de editor links of rechts zijn uitgelijnd. */
.zone-content__inhoud .align-left {
  float: left;
  margin: 0 var(--s-4) var(--s-3) 0;
  max-width: 50%;
}

.zone-content__inhoud .align-right {
  float: right;
  margin: 0 0 var(--s-3) var(--s-4);
  max-width: 50%;
}

.zone-content__inhoud .align-center {
  margin-inline: auto;
}

/* ── Inhoudsitems (templates/content/node.html.twig) ─────────────────────
 * Overzicht op /nieuws: groene titel in Big John, "Geschreven door …",
 * samenvatting en een "Lees meer"-knop met groene rand. Groene lijn tussen
 * de berichten. Zoals het origineel.
 */
.zone-content__inhoud .views-row {
  display: flow-root;
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--c-groen);
}

.node__title {
  font-family: var(--f-kop);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-kop);
  margin: var(--s-2) 0 var(--s-1);
}

.zone-content__inhoud .node__title a,
.zone-content__inhoud .views-row h2 a {
  display: inline-block;
  min-height: var(--klik);
  color: var(--c-groen);
}

.zone-content__inhoud .node__title a:hover {
  color: var(--c-wit);
}

.node__submitted {
  font-size: var(--fs-klein);
  margin-bottom: var(--s-1);
}

/* "Lees meer" */
.zone-content__inhoud ul.links.inline {
  display: flow-root;
  margin: var(--s-2) 0;
  padding: 0;
  list-style: none;
}

.zone-content__inhoud .node-readmore a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klik);
  padding: 0.3125rem;
  color: var(--c-wit);
  border: 1px solid var(--c-groen);
  text-decoration: none;
}

.zone-content__inhoud .node-readmore a:hover,
.zone-content__inhoud .node-readmore a:focus-visible {
  color: var(--c-inkt);
  background: var(--c-groen);
}

/* Tabellen in de inhoud (agenda): compact en zonder lijnen, zoals het origineel. */
.zone-content__inhoud th,
.zone-content__inhoud td {
  padding: 0 0.75rem 0.1875rem 0;
  border: 0;
}

.zone-content__inhoud th {
  font-weight: 700;
}

.zone-content__inhoud td.views-field-field-datum-sd-value {
  white-space: nowrap;
}

/* Agenda (/agenda) op de telefoon: elke regel als kaartje in plaats van een
   tabel van 5 kolommen die niet past.
     14-11-2026   10:00
     Tenten masterclass
     Scouts       De Hei
   De kolommen worden herkend aan de veldnamen van de view "agenda". */
@media (max-width: 37.49em) {
  .zone-content__inhoud table:has(td.views-field-field-speltak) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }

  .zone-content__inhoud table:has(td.views-field-field-speltak) tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  }

  .zone-content__inhoud table:has(td.views-field-field-speltak) td {
    display: block;
    padding: 0;
  }

  .zone-content__inhoud table:has(td.views-field-field-speltak) td.views-field-title {
    grid-column: 1 / -1;
    font-weight: 700;
  }
}

/* Accordeon (module ckeditor_accordion) */
.zone-content__inhoud .ckeditor-accordion-container > dl {
  border: 1px solid var(--c-groen);
}

.zone-content__inhoud .ckeditor-accordion-container > dl dt > a {
  display: block;
  min-height: var(--touch);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-7);
  color: var(--c-wit);
  background: var(--c-antraciet);
  border-bottom: 1px solid var(--c-groen);
  text-decoration: none;
}

.zone-content__inhoud .ckeditor-accordion-container > dl dt > a:hover,
.zone-content__inhoud .ckeditor-accordion-container > dl dt.active > a {
  color: var(--c-inkt);
  background: var(--c-groen);
}

.zone-content__inhoud .ckeditor-accordion-container > dl dd {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--c-groen);
}

/* Webform-tabellen */
.zone-content__inhoud .webform-table td {
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  padding: var(--s-2);
}

.zone-content__inhoud .webform-table .form-item {
  margin: 0;
}