/* ============================================================
   De Hoeverij – style.css
   Huisstijl: donkergroen, crème, goud en terracotta
   Fonts: Oswald (koppen), Karla (tekst), Dancing Script (accent)
   ============================================================ */

:root {
  --groen: #24381F;
  --groen-licht: #33502C;
  --creme: #F6F0E3;
  --creme-donker: #EDE4D0;
  --goud: #C9A24B;
  --goud-donker: #B08A35;
  --terra: #B4552D;
  --terra-donker: #97401C;
  --tekst: #2B2B26;
  --wit: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Karla', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--creme);
}

h1, h2, h3, h4, h5 {
  font-family: 'Oswald', sans-serif;
  line-height: 1.2;
  color: inherit;
  margin: 0 0 .6em;
  text-transform: uppercase;
  letter-spacing: .03em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.35rem; }

img { max-width: 100%; display: block; }
a { color: var(--terra); }

.script {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: var(--goud);
  display: block;
}

/* ---------- Topbalk ---------- */
.topbalk {
  background: var(--groen);
  color: var(--creme);
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding: .45rem 1rem;
  font-size: .88rem;
}
.topbalk a { color: var(--goud); }
.sterren { color: var(--goud); letter-spacing: .15em; }

/* ---------- Header & navigatie ---------- */
.site-header {
  background: var(--creme);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(36,56,31,.12);
  transition: box-shadow .3s ease;
}
.site-header.gescrold { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.nav-binnen {
  max-width: 1200px;
  margin: 0 auto;
  padding: .6rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.merk {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--groen);
}
.merk img { width: 62px; height: 62px; }
.merk .naam {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 1.1;
}
.merk .naam small {
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: .72rem;
  text-transform: none;
  letter-spacing: .12em;
  color: var(--terra);
}
nav.hoofd {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
nav.hoofd > a, .dropdown > a {
  text-decoration: none;
  color: var(--groen);
  font-weight: 700;
  font-size: .98rem;
}
nav.hoofd > a.actief { color: var(--terra); }

/* Dropdown */
.dropdown { position: relative; }
.dropdown .caret { font-size: .7em; }
.dropdown > a { padding: .8rem 0; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wit);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  padding: 1.4rem 1.8rem;
  display: none;
  gap: 2.2rem;
  min-width: 560px;
  z-index: 60;
}
/* Onzichtbare brug zodat de muis van link naar menu kan zonder dat het sluit */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown-menu.open { display: flex; }
.dropdown-menu h5 {
  margin: 0 0 .5rem;
  color: var(--terra);
  font-size: .85rem;
  letter-spacing: .08em;
}
.dropdown-menu a {
  display: block;
  padding: .18rem 0;
  color: var(--tekst);
  text-decoration: none;
  font-weight: 400;
  font-size: .95rem;
  white-space: nowrap;
}
.dropdown-menu a:hover { color: var(--terra); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-block;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .02em;
  border: 2px solid transparent;
  cursor: pointer;
}
.knop-goud { background: var(--goud); color: var(--groen); }
.knop-goud:hover { background: var(--goud-donker); }
.knop-terra { background: var(--terra); color: var(--wit); }
.knop-terra:hover { background: var(--terra-donker); }
.knop-omlijnd { border-color: var(--creme); color: var(--creme); }
.knop-omlijnd:hover { background: rgba(255,255,255,.14); }
.knop-omlijnd-groen { border-color: var(--groen); color: var(--groen); }
.knop-omlijnd-groen:hover { background: var(--groen); color: var(--creme); }
.knoppen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero {
  min-height: 78vh;
  background-position: center;
  background-size: cover;
  background-color: var(--groen);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20,30,16,.45), rgba(20,30,16,.62));
}
.hero-inhoud {
  position: relative;
  z-index: 1;
  padding: 4rem 1.2rem;
  color: var(--creme);
}
.hero-inhoud h1 { color: var(--wit); margin-bottom: .1em; }
.hero-inhoud .script { font-size: 2.4rem; margin-bottom: 1.2rem; }

/* ---------- USP-balk ---------- */
.usp-balk {
  background: var(--terra);
  color: var(--wit);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  text-align: center;
}
.usp {
  padding: 1.2rem 1rem;
  background: var(--terra);
}
.usp strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.usp span { font-size: .9rem; opacity: .92; }

/* ---------- Secties ---------- */
section { padding: 4.5rem 0; }
.binnen { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem; }
.sectie-groen { background: var(--groen); color: var(--creme); }
.sectie-groen h2, .sectie-groen h3, .sectie-groen summary { color: var(--wit); }
.sectie-groen a:not(.knop) { color: var(--goud); }
.sectie-creme-donker { background: var(--creme-donker); }
.uitgelijnd-midden { text-align: center; }
.tussenruimte { height: 1.2rem; }

.sectiekop { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.sectiekop .script { font-size: 1.7rem; }
.sectiekop .intro { font-size: 1.08rem; opacity: .9; }

.twee-kolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.twee-kolom img { border-radius: 14px; width: 100%; object-fit: cover; }
@media (max-width: 860px) { .twee-kolom { grid-template-columns: 1fr; } }

.checklijst { list-style: none; padding: 0; }
.checklijst li { padding-left: 1.7rem; position: relative; margin-bottom: .5rem; }
.checklijst li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--goud);
  font-weight: 700;
}

/* ---------- Kaarten ---------- */
.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2rem;
}
.kaart {
  background: var(--wit);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
}
.kaart img { height: 230px; width: 100%; object-fit: cover; background: var(--creme-donker); }
.kaart-tekst { padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.kaart-tekst h3 { color: var(--groen); margin: 0; }
.kaart-tekst p { margin: 0; flex: 1; }
.kaart-tekst .knop { align-self: flex-start; margin-top: .4rem; }

/* ---------- Galerij ---------- */
.galerij-sfeer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}
.galerij-sfeer img {
  border-radius: 12px;
  height: 240px;
  width: 100%;
  object-fit: cover;
  background: var(--creme);
}

/* ---------- Reviews ---------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.review {
  background: var(--wit);
  border-radius: 14px;
  padding: 1.8rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
}
.review .sterren { font-size: 1.1rem; }
.review p { font-style: italic; margin: .8rem 0; }
.review .wie { font-weight: 700; color: var(--terra); font-size: .92rem; }

/* ---------- SEO-tekst ---------- */
.seo-tekst { max-width: 820px; }
.seo-tekst h2 { color: var(--groen); }
.seo-tekst h3 { color: var(--terra); margin-top: 1.6em; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(246,240,227,.25);
  border-radius: 10px;
  padding: 1rem 1.3rem;
  margin-bottom: .8rem;
}
.faq summary {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .03em;
}
.faq p { margin: .8rem 0 .2rem; opacity: .92; }

/* ---------- Footer ---------- */
footer {
  background: var(--groen);
  color: var(--creme);
  padding: 3.5rem 1.2rem 0;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.5rem;
}
.footer-logo { width: 70px; margin-bottom: .6rem; }
footer h4 { color: var(--goud); font-size: 1.05rem; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: .45rem; font-size: .95rem; }
footer a { color: var(--creme); text-decoration: none; }
footer a:hover { color: var(--goud); }
.footer-onder {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(246,240,227,.2);
  font-size: .85rem;
  text-align: center;
  opacity: .85;
}
.footer-onder a { color: var(--goud); }

/* ---------- Aanvraagformulier ---------- */
.formulier {
  background: var(--wit);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.09);
  padding: 2.2rem;
  max-width: 760px;
  margin: 0 auto;
}
.formulier .veld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.formulier label {
  display: block;
  font-weight: 700;
  font-size: .92rem;
  margin: 1.1rem 0 .3rem;
  color: var(--groen);
}
.formulier label .verplicht { color: var(--terra); }
.formulier input,
.formulier select,
.formulier textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid rgba(36,56,31,.25);
  border-radius: 10px;
  font-family: 'Karla', sans-serif;
  font-size: 16px; /* voorkomt inzoomen op iPhone */
  background: var(--creme);
  color: var(--tekst);
}
.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
  outline: none;
  border-color: var(--goud);
  box-shadow: 0 0 0 3px rgba(201,162,75,.25);
}
.formulier textarea { min-height: 120px; resize: vertical; }
.formulier .verstuur {
  margin-top: 1.6rem;
  width: 100%;
  border: none;
  font-family: 'Karla', sans-serif;
  font-size: 1.05rem;
}
.formulier .verstuur[disabled] { opacity: .6; cursor: wait; }
.form-melding {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 16px;
  padding: 2.2rem;
  text-align: center;
  display: none;
}
.form-melding.succes {
  background: var(--groen);
  color: var(--creme);
  display: block;
}
.form-melding.fout {
  background: #FBEDE7;
  border: 2px solid var(--terra);
  color: var(--tekst);
  display: block;
}
.form-melding .vinkje {
  font-size: 2.6rem;
  display: block;
  margin-bottom: .6rem;
  color: var(--goud);
}
@media (max-width: 640px) {
  .formulier { padding: 1.4rem; }
  .formulier .veld-rij { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 760px) {
  .topbalk { gap: 1rem; font-size: .8rem; }
  .nav-binnen { justify-content: center; }
  nav.hoofd { justify-content: center; gap: 1rem; }
  /* Dropdown opent op mobiel netjes ONDER de menubalk, binnen het scherm */
  .dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: none;
    border: 1px solid rgba(36,56,31,.18);
    margin-top: .4rem;
  }
  .dropdown { width: 100%; text-align: center; }
  .dropdown-menu::before { display: none; }
  /* Op touch geen hover-open; alleen via tik (klasse .open) */
  .dropdown:hover .dropdown-menu:not(.open),
  .dropdown:focus-within .dropdown-menu:not(.open) { display: none; }
  .dropdown-menu.open { display: flex; }
  .hero { min-height: 64vh; }
  section { padding: 3rem 0; }
}