/* Eetbaar Dorp Dieren — stijl */
@font-face {
  font-family: "Yes Free";
  src: url("../fonts/yes-free.woff") format("woff");
  font-display: swap;
}

:root {
  --groen: #9ac447;      /* lichtgroen */
  --donker: #1b3937;     /* donkergroen uit de tekeningen */
  --wit: #ffffff;
  --display: "Yes Free", "Comic Sans MS", "Chalkboard SE", cursive;
  --tekst: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--tekst);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--donker);
  background: var(--wit);
}
img { display: block; max-width: 100%; height: auto; }
section { scroll-margin-top: 70px; }

.container { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 20px; }

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0 0 .8em;
}
h1.display, h2.display { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.light { color: var(--groen); }

/* Menu */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--wit);
}
.nav { display: flex; flex-wrap: wrap; gap: 8px 44px; padding-top: 30px; padding-bottom: 30px; }
.nav a { color: var(--donker); text-decoration: none; font-size: 1.25rem; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

/* Home */
.hero { background: var(--groen); }
.hero-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 40px;
  align-items: end;
  padding-top: 50px;
}
.hero-text { align-self: start; padding-top: calc(5.46% - 3px); } /* titel op dezelfde hoogte als de nok van het dak */
.hero h1 { color: var(--donker); }
.hero p { color: var(--wit); font-size: 1.3rem; margin: 0 0 2em; max-width: 22em; }
.hero-img { margin-bottom: -1.8868%; } /* donkere grondstrook in de tekening valt precies over het donkere vlak */

/* Waarom */
.waarom { background: var(--donker); color: var(--wit); padding: 70px 0 90px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.waarom p { font-size: 1.25rem; margin: 0 0 1.4em; }
.waarom p:last-child { margin-bottom: 0; }
.foto-wrap { position: relative; min-height: 280px; }
.foto-wrap .foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 42% 50%; }
.label { color: var(--groen); }
.foto { width: 100%; aspect-ratio: 10 / 9; object-fit: cover; background: #f4f6ee; }

/* Projecten */
.projecten { padding: 55px 0 50px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; }
.card { display: flex; flex-direction: column; }
.card img { width: 100%; }
.card-body {
  flex: 1;
  background: var(--groen);
  margin-top: -1px;
  padding: 26px 28px 40px;
}
.card h3 { color: var(--wit); font-size: 1.45rem; margin-bottom: .7em; }
.card p { margin: 0; font-size: 1.25rem; }

/* Doe mee */
.doe-mee { background: var(--groen); padding: 60px 0 90px; }
.doe-mee-box { display: grid; grid-template-columns: 1fr 1fr; padding: 0; max-width: 1020px; }
.doe-mee-box .foto { height: 100%; aspect-ratio: auto; min-height: 320px; object-position: 50% 58%; }
.doe-mee-text { background: var(--donker); color: var(--wit); padding: 40px 44px 30px; }
.arrows { list-style: none; margin: 0; padding: 0; }
.arrows li { position: relative; padding-left: 34px; margin-bottom: 1.4em; font-size: 1.25rem; }
.arrows li::before { content: "–>"; position: absolute; left: 0; color: var(--groen); }
.arrows a { color: var(--wit); text-underline-offset: 3px; }
.arrows a:hover { color: var(--groen); }

/* Contact / footer */
.site-footer { padding: 30px 0 40px; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1020px; padding: 0; }
.footer-inner img { justify-self: end; margin-right: 36px; }
.footer-inner p { padding-left: 4px; }
.footer-inner img { width: 170px; }
.footer-inner p { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.footer-inner a { color: inherit; text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }

/* Contactformulier (contact.php) */
.contact { max-width: 620px; padding-top: 50px; padding-bottom: 60px; }
.contact .terug { color: var(--donker); text-decoration: none; font-size: 1rem; }
.contact .terug:hover { text-decoration: underline; }
.contact h1 { margin-top: 28px; }
.contact .intro { margin: 0 0 28px; }
.formulier { display: flex; flex-direction: column; }
.formulier label { font-weight: bold; margin: 0 0 6px; }
.formulier .optioneel { font-weight: normal; }
.formulier input, .formulier textarea {
  font: inherit;
  color: var(--donker);
  background: var(--wit);
  border: 2px solid var(--donker);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 20px;
  width: 100%;
}
.formulier textarea { resize: vertical; }
.formulier input:focus, .formulier textarea:focus { outline: 3px solid var(--groen); outline-offset: 1px; }
.formulier button {
  align-self: flex-start;
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--donker);
  background: var(--groen);
  border: 0;
  border-radius: 4px;
  padding: 12px 28px;
  cursor: pointer;
}
.formulier button:hover { background: var(--donker); color: var(--wit); }
.spamval { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { border-left: 6px solid var(--groen); background: #f2f7e6; padding: 14px 18px; margin-bottom: 24px; }
.melding p { margin: 0 0 4px; }
.melding.fout { border-left-color: #c8452f; background: #fbeeeb; }

/* Tablet */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .two-col { gap: 40px; }
}

/* Mobiel */
@media (max-width: 700px) {
  body { font-size: 1.05rem; }
  .nav { gap: 6px 22px; padding-top: 16px; padding-bottom: 16px; }
  .nav a { font-size: 1.05rem; }
  .hero-inner, .two-col, .cards, .doe-mee-box { grid-template-columns: 1fr; }
  .hero-inner { gap: 10px; padding-top: 34px; }
  .hero-text { padding-top: 0; }
  .hero p { margin-bottom: .5em; }
  .waarom { padding: 50px 0 60px; }
  .foto-wrap { min-height: 0; aspect-ratio: 4 / 3; }
  .projecten { padding: 30px 0 30px; }
  .cards { gap: 36px; }
  .doe-mee { padding: 40px 0 50px; }
  .doe-mee-box { padding: 0 20px; }
  .doe-mee-box .foto { min-height: 0; aspect-ratio: 4 / 3; }
  .doe-mee-text { padding: 32px 24px 16px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; padding: 0 20px; }
  .footer-inner img { justify-self: center; margin-right: 0; }
  .footer-inner p { padding-left: 0; }
  .footer-inner img { width: 140px; }
}