/* =====================================================
   Boomrooierij Jelte — Global stylesheet
   Path: /assets/css/styles.css
   ===================================================== */

/* ---------------- Brand variables ------------------ */
:root{
  --brand:#14532d;        /* donker groen */
  --brand-2:#166534;      /* medium groen */
  --accent:#f59e0b;       /* amber accent */
  --slate-900:#0f172a;    /* Tailwind slate-900 approx */
}

/* --------------- Base / Normalization -------------- */
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{ font-feature-settings:"kern"; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }

/* --------------- Reusable utilities ---------------- */
.brand-gradient{ background:linear-gradient(135deg,var(--brand),#0b3c1f); }
.section{ scroll-margin-top:6rem; }
.shadow-soft{ box-shadow:0 10px 30px rgba(0,0,0,.08); }
.card{ background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:1rem; }
.footer a:hover{ text-decoration:underline; }

/* --------------- Header (sticky) -------------------- */
header{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding-top:env(safe-area-inset-top);
}

/* --------------- Hero ------------------------------ */
.hero-img{ object-position:center; }
.hero-pad{ padding-top:5rem; padding-bottom:4rem; }
@media (min-width:768px){ .hero-pad{ padding-top:9rem; padding-bottom:9rem; } }

/* Typografie tweaks op mobiel */
@media (max-width:640px){
  .h1-mobile{ font-size:1.875rem; line-height:1.2; } /* ~text-3xl */
  .lead-mobile{ font-size:1rem; }                    /* ~text-base */
}

/* CTA's: beter stapelen op mobiel */
.btn-block-mobile{ text-align:center; width:100%; }
@media (min-width:640px){ .btn-block-mobile{ width:auto; } }

/* Badges rij: grid op mobiel, flex op groter */
.badges{ display:grid; gap:.75rem; }
@media (min-width:640px){ .badges{ display:flex; gap:1.5rem; } }

/* --------------- Forms ----------------------------- */
input, textarea{ outline:none; }
input:focus, textarea:focus{
  box-shadow:0 0 0 3px rgba(16,185,129,.35); /* emerald-500/35 */
  border-color:rgba(16,185,129,.6);
}
/* Honeypot volledig verbergen als fallback */
input[name="company"]{ display:none !important; }

/* --------------- Mobile menu lock (optional) ------- */
body.menu-open{ height:100vh; overflow:hidden; }

/* --------------- Helpers --------------------------- */
/* Voorkom rare artefacts bij fixed/blur op Android */
@supports not (backdrop-filter: blur(1px)){
  header{ background:#ffffffcc; }
}

/* --------------- Sections / Spacing ---------------- */
/* Compactere spacing voor secties op kleine schermen */
@media (max-width:640px){
  .section-sm-pad{ padding-top:2.5rem !important; padding-bottom:2.5rem !important; }
}

/* --------------- Footer ---------------------------- */
.footer-note{ color:rgba(148,163,184,1); font-size:.75rem; }

/* --------------- Project gallery ------------------- */
.gallery-img{ border-radius:.75rem; object-fit:cover; height:16rem; width:100%; }

/* --------------- Accessibility --------------------- */
:focus-visible{ outline:2px solid rgba(16,185,129,.85); outline-offset:2px; }

/* --------------- Print tweaks ---------------------- */
@media print{
  header, .no-print{ display:none !important; }
  a{ text-decoration:underline; color:inherit; }
}

/* --- Always-on (fixed) header --- */
:root { --header-h: 64px; }        /* fallback, JS maakt 'm exact */
body { padding-top: var(--header-h); }

/* Mobile menu pane onder de header + scrollbaar */
.mobile-menu-fixed {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,.12);
  z-index: 50;
}