/* henhverduurzaming.nl - kleuren afgeleid van hakfortenhuigenbos.nl */
:root {
  --rood: #660000;        /* achtergrond oude site */
  --rood-donker: #4a0000;
  --oranje: #fa8e2e;      /* knoppen en koppen oude site */
  --oranje-tekst: #b85a00; /* oranje dat goed leesbaar is op wit */
  --blauw: #4c6ba0;       /* kopjes zijbalk oude site */
  --blauw-licht: #eef2f8;
  --tekst: #1f1f1f;
  --grijs: #5a5a5a;
  --lijn: #e3ded8;
  --achtergrond: #f7f4f0;
  --wit: #ffffff;
  --breedte: 960px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--achtergrond);
}

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

img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 16px;
}

/* Concept-balk: weghalen als de teksten zijn vastgesteld */
.concept {
  background: #fff3cd;
  color: #5c4500;
  font-size: 15px;
  text-align: center;
  padding: 6px 16px;
  border-bottom: 1px solid #e8d48a;
}

/* Kop */
.kop {
  background: var(--rood);
  color: var(--wit);
  border-bottom: 4px solid var(--oranje);
}
.kop .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.logo {
  color: var(--wit);
  text-decoration: none;
  line-height: 1.2;
}
.logo:hover { color: var(--wit); }
.logo strong { display: block; font-size: 20px; white-space: nowrap; }
.logo span { font-size: 14px; opacity: .85; }

.menu-knop {
  display: none;
  background: var(--oranje);
  color: var(--wit);
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  padding: 8px 14px;
  cursor: pointer;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
nav a {
  display: block;
  color: var(--wit);
  text-decoration: none;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 4px;
}
nav a:hover { background: var(--rood-donker); color: var(--wit); }
nav a[aria-current="page"] { background: var(--oranje); }

/* Openingsblok */
.intro {
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
  padding: 40px 0 32px;
}
.intro h1 {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.2;
  color: var(--rood);
}
.intro p { margin: 0 0 12px; font-size: 20px; max-width: 46em; }

main { padding: 32px 0 48px; }

h1, h2, h3 { line-height: 1.25; }
h2 { color: var(--oranje-tekst); font-size: 26px; margin: 40px 0 12px; }
h3 { font-size: 20px; margin: 24px 0 8px; }
main > .wrap > h2:first-child { margin-top: 0; }

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--blauw);
  border-radius: 6px;
  padding: 18px 20px;
}
.kaart h3 { margin-top: 0; }
.kaart p { margin: 0 0 8px; }
.kaart a.meer { font-weight: bold; }

.blok {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  padding: 20px 24px;
  margin: 16px 0;
}
.blok > :first-child { margin-top: 0; }
.blok > :last-child { margin-bottom: 0; }

.let-op {
  background: var(--blauw-licht);
  border-left: 5px solid var(--blauw);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 20px 0;
}
.let-op > :first-child { margin-top: 0; }
.let-op > :last-child { margin-bottom: 0; }

.datum-groot {
  display: inline-block;
  background: var(--oranje);
  color: var(--wit);
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 10px;
}

.knop {
  display: inline-block;
  background: var(--oranje);
  color: var(--wit);
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  padding: 10px 18px;
  margin: 4px 8px 4px 0;
}
.knop:hover { background: var(--oranje-tekst); color: var(--wit); }
.knop.stil { background: var(--blauw); }
.knop.stil:hover { background: #3a5584; }

/* Bezwaren */
.bezwaar {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-left: 6px solid var(--oranje);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 16px 0;
}
.bezwaar h3 { margin-top: 0; }
.bron { font-size: 15px; color: var(--grijs); white-space: nowrap; }
.bezwaar dl { margin: 8px 0 0; }
.bezwaar dt { font-weight: bold; margin-top: 8px; }
.bezwaar dd { margin: 0; }

/* Punten waar we het over eens zijn */
.eens {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-left: 6px solid #3d8b4f;
  border-radius: 6px;
  padding: 14px 22px;
  margin: 12px 0 20px;
}
.eens ul { margin: 0; padding-left: 0; list-style: none; }
.eens li { position: relative; padding-left: 28px; margin: 8px 0; }
.eens li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #3d8b4f;
  font-weight: bold;
}

/* Tabel */
.tabel-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--wit); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }
th { background: var(--blauw); color: var(--wit); font-weight: bold; }

/* Tijdlijn */
.tijdlijn { list-style: none; margin: 24px 0; padding: 0; position: relative; }
.tijdlijn::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--lijn);
}
.tijdlijn li { position: relative; padding: 0 0 24px 40px; }
.tijdlijn li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--wit);
  border: 3px solid var(--blauw);
}
.tijdlijn li.gedaan::before { background: var(--blauw); }
.tijdlijn li.nu::before { background: var(--oranje); border-color: var(--oranje); }
.tijdlijn li.mijlpaal::before { border-color: var(--rood); background: var(--rood); }
.tijdlijn .wanneer { font-weight: bold; color: var(--rood); display: block; }
.tijdlijn .wie { font-size: 15px; color: var(--grijs); }

/* Vragen */
details {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  margin: 10px 0;
}
summary {
  cursor: pointer;
  font-weight: bold;
  padding: 14px 18px;
  list-style-position: inside;
}
summary:hover { color: var(--rood); }
details[open] summary { border-bottom: 1px solid var(--lijn); }
details .antwoord { padding: 4px 18px 14px; }

/* Voet */
.voet {
  background: var(--rood);
  color: var(--wit);
  padding: 28px 0;
  font-size: 16px;
}
.voet a { color: var(--wit); }
.voet .kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.voet h2 { color: var(--oranje); font-size: 18px; margin: 0 0 6px; }
.voet p { margin: 0 0 6px; }
.voet .klein { margin-top: 20px; font-size: 14px; opacity: .8; }

/* Telefoon */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .menu-knop { display: block; }
  .logo strong { white-space: normal; font-size: 18px; }
  nav { display: none; width: 100%; padding-bottom: 12px; }
  nav.open { display: block; }
  nav ul { flex-direction: column; }
  .kop .wrap { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .intro { padding: 28px 0 22px; }
  .intro h1 { font-size: 27px; }
  .intro p { font-size: 18px; }
  h2 { font-size: 23px; }
}

/* Afdrukken: alleen de inhoud */
@media print {
  .concept, .kop nav, .menu-knop, .voet { display: none; }
  .kop { background: none; color: #000; border: 0; }
  .logo { color: #000; }
  body { background: #fff; font-size: 12pt; }
  details { border: 0; }
  details .antwoord { display: block; }
}