/* =========================================================================
   De Gouden Druppel — basisstijl (op elke pagina geladen)
   Kleurvariabelen, reset, navigatie, footer, knoppen, scroll-reveal.

   NB over kleuren: in de oorspronkelijke 6 losse HTML-bestanden had elke
   pagina een eigen, licht afwijkende set kleurvariabelen. Dat was een
   bijproduct van onafhankelijk gegenereerde bestanden, geen bewuste
   ontwerpkeuze. Er is hier gekozen voor ÉÉN kleurenpalet dat overal wordt
   gebruikt — bijgewerkt zodat het exact overeenkomt met de kleuren van de
   huidige live referentiesite (degoudendruppel.nl-preview).
   ========================================================================= */

:root {
  --gold: #A8821A;
  --gold-light: #C4A035;
  --gold-pale: #EDE8D5;
  --green: #4F6E2E;
  --green-mid: #5E7F3A;
  --green-light: #E8EDDD;
  --white: #F7F4EA;
  --dark: #2C3A1E;
  --gray: #4A4F3E;
  --border: rgba(79,110,46,0.18);

  /* Voor-wie-pagina's gebruiken elk een eigen accentkleur ter herkenning */
  --accent-horeca: #C8410A;
  --accent-catering: #1A5F8A;
  --accent-retail: #6B3FA0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* ── NAV ── */
nav#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  height: 72px;
  background: rgba(247,244,234,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
nav#navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.08); }

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  overflow: hidden;
}
.nav-logo-icon--image { background: none; }
.nav-logo-icon--image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nav-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700; color: var(--dark); line-height: 1;
}
.nav-logo-text span { color: var(--gold); }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--gray); transition: color 0.2s; }
.nav-links a:hover { color: var(--green); }
.nav-links a.active { color: var(--green); font-weight: 600; }
/* Alleen een ECHTE WordPress-pagina die de huidige pagina is krijgt de
   actieve stijl. Aangepaste ankerlinks naar de voorpagina (#diensten,
   #offerte e.d.) krijgen van WordPress zelf ook de classes
   "current-menu-item"/"menu-item-home" zodra je op de homepage bent — dat
   zou anders meerdere menu-items tegelijk (onterecht) laten oplichten. */
.nav-links li.menu-item-object-page.current-menu-item > a { color: var(--green); font-weight: 600; }

.nav-cta {
  background: var(--green) !important;
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600 !important;
  transition: background 0.2s, transform 0.15s !important;
}
.nav-cta:hover { background: var(--green-mid) !important; transform: translateY(-1px); }

/* Mobiel navigatiemenu (hamburger).
   NB: het oorspronkelijke ontwerp verborg .nav-links op mobiel volledig
   (display:none) zonder alternatief — bezoekers op een telefoon konden het
   menu dan helemaal niet meer openen. Dat is hier gerepareerd met een
   hamburger-knop die dezelfde menu-items toont, met behoud van dezelfde
   opmaak/kleuren/knoppen. Dit is een functionele correctie (onderdeel van
   de gevraagde responsive-controle), geen visuele redesign. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-links.is-open { max-height: 70vh; overflow-y: auto; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 16px 5%; border-bottom: 1px solid var(--border); }
  .nav-cta { display: inline-flex; margin: 12px 5%; }
}

/* ── GEDEELDE SECTIELABELS ── */
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.section-sub {
  font-size: 1rem;
  color: var(--gray);
  max-width: 520px;
  line-height: 1.7;
}
.section { padding: 100px 5%; }

/* ── GENERIEKE PAGE-HERO (fallback voor page.php / 404.php) ── */
.page-hero {
  padding: 120px 5% 80px;
  background: var(--white);
}
.page-hero-inner { max-width: 640px; }
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--dark);
  margin-bottom: 1rem;
}
.page-hero p { font-size: 1rem; color: var(--gray); line-height: 1.7; max-width: 560px; }

/* ── BREADCRUMB ── */
.breadcrumb { padding: 90px 5% 0; font-size: 0.78rem; color: var(--gray); }
.breadcrumb a { color: var(--gray); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { margin: 0 6px; }

/* ── KNOPPEN ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(30,77,43,0.25);
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(30,77,43,0.3);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 2px solid var(--gold);
  transition: color 0.2s, border-color 0.2s;
}
.btn-secondary:hover { color: var(--gold); }

/* ── FOOTER ── */
footer {
  background: #2C3A1E;
  padding: 60px 5% 30px;
  color: rgba(255,255,255,0.80);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand .nav-logo { margin-bottom: 1rem; }
.footer-brand .nav-logo-text { color: white; }
.footer-brand .nav-logo-text span { color: var(--gold); }
.footer-brand p { font-size: 0.85rem; line-height: 1.7; max-width: 280px; }
.footer-partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 1.2rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.80);
}
.footer-partner strong { color: white; display: block; font-size: 0.8rem; }
.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: white;
  margin-bottom: 1.2rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col ul li a {
  text-decoration: none;
  color: rgba(255,255,255,0.80);
  font-size: 0.88rem;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Als JS uitstaat, blijft content gewoon zichtbaar (progressive enhancement). */
.no-js .reveal { opacity: 1; transform: none; }

/* ── TOEGANKELIJKHEID: skip-link ── */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: 10px; left: 10px;
  width: auto; height: auto;
  clip: auto;
  z-index: 100000;
  background: var(--dark);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* ── ZWEVENDE WHATSAPP-KNOP ── */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 48px; height: 48px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  z-index: 1000;
  transition: transform 0.2s, background 0.2s;
}
.whatsapp-float:hover { transform: scale(1.08); background: #1ebe5d; }
.whatsapp-float svg { width: 22px; height: 22px; fill: white; }

@media (max-width: 900px) {
  .whatsapp-float { bottom: 1rem; right: 1rem; width: 44px; height: 44px; }
  .whatsapp-float svg { width: 20px; height: 20px; }
}

/* ── ADMIN-MELDING (bv. ontbrekende plugin) ── */
.gd-admin-notice {
  background: #FDECEC;
  border: 1px solid #E4A9A9;
  color: #7A1F1F;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── MOBIEL: gedeelde aanpassingen ── */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; }
  .section { padding: 70px 5%; }
}