/* DG Voor Elkaar — huisstijl De Gelderlander.
   Ontworpen voor een breed en deels ouder lezerspubliek: grote letters, hoog contrast,
   ruime aanraakvlakken, en alles blijft werken zonder JavaScript. */

:root {
  /* Merk */
  --rood: #d10a10;
  --rood-donker: #a80809;

  /* Tekst en vlakken */
  --zwart: #000000;
  --tekst: #32302c;
  --grijs: #6E757C;
  --rand: #E1DEE0;
  --vlak: #EDEAEC;
  --vlak-licht: #f7f7f7;
  --wit: #ffffff;

  /* Signaalkleur voor "wacht op controle" en "gemarkeerd" in het beheerpaneel */
  --signaal: #ECC85B;
  --signaal-zacht: #F7E9BD;

  --straal: 10px;
  --schaduw: 0 1px 3px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .05);
  --breedte: 68rem;
}

/* Categoriekleuren. Het accent is voor randen en iconen, nooit voor tekst:
   alleen --rood haalt op wit genoeg contrast voor normale tekstgrootte.
   Labels krijgen daarom de pastel als achtergrond met donkere tekst erop. */
.cat-wandelen { --accent: #3A9D5D; --pastel: #B0D8BE; }
.cat-koffie   { --accent: #EC5A29; --pastel: #F7E9BD; }
.cat-hobby    { --accent: #7C4D9E; --pastel: #CBB8D8; }
.cat-cultuur  { --accent: #E0528D; --pastel: #F3BAD1; }
.cat-overig   { --accent: #6E757C; --pastel: #E1DEE0; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--vlak-licht);
}

h1, h2, h3, .schreefloos {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--zwart);
  line-height: 1.25;
}

h1 { font-size: 1.9rem; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0 0 .35rem; }

a { color: var(--rood-donker); }
a:hover { color: var(--rood); }

/* Focus moet altijd goed zichtbaar zijn — dit is voor toetsenbordgebruikers
   het enige houvast op de pagina. */
:focus-visible {
  outline: 3px solid var(--rood);
  outline-offset: 2px;
  border-radius: 3px;
}

.omhulsel { max-width: var(--breedte); margin: 0 auto; padding: 0 1rem; }

/* Direct-naar-inhoud-link voor schermlezers en toetsenbord */
.overslaan {
  position: absolute; left: -9999px;
  background: var(--wit); padding: .75rem 1rem; z-index: 100;
}
.overslaan:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- kop */

.kop {
  background: var(--wit);
  border-bottom: 4px solid var(--rood);
}

.kop__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.kop__merk { display: flex; align-items: center; gap: .6rem; text-decoration: none; }

.kop__logo {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 2px;
}

/* Terugval als het logobestand er (nog) niet is. */
.kop__krant {
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rood);
  letter-spacing: -.02em;
}

.kop__titel {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tekst);
  letter-spacing: -.01em;
}

.kop nav { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;              /* ruim genoeg om met een vinger te raken */
  padding: .6rem 1.15rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--straal);
  cursor: pointer;
  text-decoration: none;
  background: var(--vlak);
  color: var(--tekst);
}

.knop:hover { background: var(--rand); color: var(--zwart); }

.knop--primair { background: var(--rood); color: var(--wit); }
.knop--primair:hover { background: var(--rood-donker); color: var(--wit); }

.knop--rand { background: var(--wit); border-color: var(--rand); }
.knop--rand:hover { border-color: var(--grijs); background: var(--wit); }

.knop--klein { min-height: 40px; padding: .35rem .8rem; font-size: .92rem; }

.knop--gevaar { background: var(--wit); border-color: var(--rood); color: var(--rood-donker); }
.knop--gevaar:hover { background: var(--rood); color: var(--wit); }

/* ---------------------------------------------------------------- intro */

.intro {
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
  padding: 2rem 0 1.5rem;
}
.intro p { max-width: 44rem; font-size: 1.12rem; margin: .5rem 0 1.25rem; }

/* ---------------------------------------------------------------- zoeken */

.zoekbalk {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--straal);
  padding: 1rem;
  margin: 1.5rem 0;
  box-shadow: var(--schaduw);
}

.veldenrij { display: grid; gap: .85rem; }
@media (min-width: 44rem) {
  .veldenrij { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; }
}

label {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: .3rem;
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: .6rem .75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tekst);
  background: var(--wit);
  border: 2px solid var(--rand);
  border-radius: var(--straal);
}

input:hover, select:hover, textarea:hover { border-color: var(--grijs); }
textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }

.hulp { font-size: .9rem; color: var(--grijs); margin: .3rem 0 0; }

/* ---------------------------------------------------------------- oproepen */

.aantal { font-size: 1rem; color: var(--grijs); margin: 1.25rem 0 .75rem; }

.kaarten { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
@media (min-width: 46rem) { .kaarten { grid-template-columns: 1fr 1fr; } }

.kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-left: 6px solid var(--accent, var(--grijs));
  border-radius: var(--straal);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--schaduw);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.kaart__titel { margin: 0; font-size: 1.2rem; }
.kaart__titel a { color: var(--zwart); text-decoration: none; }
.kaart__titel a:hover { color: var(--rood-donker); text-decoration: underline; }

.kaart__tekst { margin: 0; color: var(--tekst); }

.kaart__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .92rem;
  color: var(--grijs);
  margin-top: auto;
  padding-top: .35rem;
}

.persoon { font-weight: 600; color: var(--tekst); }

/* Labels: pastel als achtergrond met donkere tekst — dat haalt ruim AA-contrast,
   terwijl het verzadigde accent dat als tekstkleur niet zou halen. */
.label {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tekst);
  background: var(--pastel, var(--vlak));
  white-space: nowrap;
}

.label--type {
  background: var(--wit);
  border: 2px solid var(--accent, var(--grijs));
}

.leeg {
  background: var(--wit);
  border: 2px dashed var(--rand);
  border-radius: var(--straal);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--grijs);
}

/* ---------------------------------------------------------------- detailpagina */

.paneel {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--straal);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--schaduw);
}

.paneel--oproep { border-top: 6px solid var(--accent, var(--rood)); }

.oproeptekst { font-size: 1.1rem; white-space: pre-wrap; }

.reacties { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.reactie {
  background: var(--vlak-licht);
  border-left: 4px solid var(--rand);
  border-radius: 0 var(--straal) var(--straal) 0;
  padding: .75rem 1rem;
}
.reactie__meta { font-size: .88rem; color: var(--grijs); }

.terug { display: inline-block; margin: 1.25rem 0 0; }

/* ---------------------------------------------------------------- formulieren */

.formulier { display: grid; gap: 1.25rem; }
.veld { display: grid; }

.keuzes { display: grid; gap: .6rem; }
@media (min-width: 34rem) { .keuzes--twee { grid-template-columns: 1fr 1fr; } }

.keuze {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--wit);
  border: 2px solid var(--rand);
  border-radius: var(--straal);
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}
.keuze:hover { border-color: var(--grijs); }
.keuze input { width: 22px; height: 22px; min-height: 0; margin: .2rem 0 0; flex: none; }
.keuze:has(input:checked) { border-color: var(--rood); background: #fff5f5; }
.keuze strong { display: block; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; }
.keuze span { font-size: .92rem; color: var(--grijs); }

/* Honeypot: onzichtbaar voor mensen, ingevuld door bots. */
.val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.melding {
  padding: 1rem 1.25rem;
  border-radius: var(--straal);
  border-left: 6px solid var(--grijs);
  background: var(--vlak);
  margin: 1.25rem 0;
}
.melding--fout { border-left-color: var(--rood); background: #fdf2f2; }
.melding--goed { border-left-color: #3A9D5D; background: #f1f8f3; }
.melding--let-op { border-left-color: var(--signaal); background: #fdf9ec; }
.melding ul { margin: .5rem 0 0; padding-left: 1.25rem; }

/* ---------------------------------------------------------------- voet */

.voet {
  background: var(--wit);
  border-top: 1px solid var(--rand);
  margin-top: 3rem;
  padding: 1.75rem 0;
  font-size: .95rem;
  color: var(--grijs);
}
.voet a { color: var(--grijs); }
.voet nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .5rem; }

/* ---------------------------------------------------------------- beheer */

.beheerkop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: 1.25rem 0 .5rem;
}
.beheerkop h1 { margin: 0; }
.beheerkop nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.beheerkop form { margin: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.tab {
  padding: .55rem 1rem;
  border: 2px solid var(--rand);
  border-radius: 999px;
  background: var(--wit);
  text-decoration: none;
  color: var(--tekst);
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .95rem;
}
.tab--actief { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.tab__aantal {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: var(--signaal-zacht);
  color: var(--tekst);
  font-size: .85rem;
}
.tab--actief .tab__aantal { background: rgba(255, 255, 255, .3); color: var(--wit); }

.status {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 4px;
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .82rem;
  font-weight: 600;
}
.status--pending { background: var(--signaal-zacht); }
.status--live    { background: #B0D8BE; }
.status--flagged { background: var(--signaal); }
.status--hidden, .status--removed { background: var(--rand); color: var(--grijs); }
.status--failed  { background: #fbd5d5; }
.status--sent    { background: #B0D8BE; }

.acties { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.acties form { display: inline; }

.tabel { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--wit); }
.tabel th, .tabel td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--rand); }
.tabel th { font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: .9rem; }
.tabel--rol { display: block; overflow-x: auto; }

.guard {
  font-size: .9rem;
  background: var(--signaal-zacht);
  border-radius: 6px;
  padding: .5rem .75rem;
  margin: .6rem 0 0;
}

/* Kleine hulpklassen. Inline style-attributen kunnen niet: de Content-Security-Policy
   staat alleen stylesheets van de site zelf toe. */
.marge-nul { margin: 0; }
.marge-boven-nul { margin-top: 0; }
.tekstvak--klein { min-height: 5rem; }

.kopieerveld {
  width: 100%;
  min-height: 22rem;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .95rem;
  line-height: 1.5;
}