:root{
  --brand:#5a624b;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.navbar{background:var(--brand);}
.navbar .nav-link, .navbar-brand{color:#fff !important;}
.btn-brand{background:var(--brand);color:#fff;border-color:var(--brand);}
.btn-brand:hover{filter:brightness(0.95);}
.text-brand{color:var(--brand);}
footer{
  background:#f7f8f6;
  border-top:4px solid var(--brand);
  margin-top:3rem;
  padding:2rem 0;
}
footer .logo{max-height:50px;}
.card-title{font-size:1.05rem;}
/* ensure 4 per row on md and up */
.project-grid .col{display:flex;}
.project-card{width:100%;}
/* Homepage section image placement helpers */
.section-img{border-radius:.5rem;object-fit:cover;width:100%;height:100%;}
.lead li{margin:.25rem 0;}
/* Lightbox fix for hidden anchors container */
.hidden{display:none;}

/* --- Lightbox caption in Dovonez-stijl --- */
.glightbox-container .gdesc-inner{
  background: #5a624b !important;   /* Dovonez groen */
  color: #fff !important;
  padding: .85rem 1rem;
  border-radius: 0 0 .5rem .5rem;    /* afgeronde hoeken onder */
    text-align: center;              /* centreren hele caption-blok */
}

/* Tekst in wit houden, ook links */
.glightbox-container .gslide-title,
.glightbox-container .gslide-desc,
.glightbox-container .gdesc-inner a,
.glightbox-container .gdesc-inner *{
  color: #fff !important;
    text-align: center;              /* centreren hele caption-blok */
}

/* Eventueel: iets compacter op mobiel */
@media (max-width: 576px){
  .glightbox-container .gdesc-inner{ padding: .65rem .75rem; }
}

/* Smooth scroll overal */
html { scroll-behavior: smooth; }

/* Houd rekening met de hoogte van de sticky navbar */
:root { --nav-h: 64px; } /* pas aan als je navbar hoger/lager is */

/* Zorg dat ankersecties onder de vaste navbar zichtbaar starten */
#contact, #info { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* optioneel: kleine schaduw zodra navbar plakt (cosmetisch) */
.navbar.sticky-top { box-shadow: 0 2px 10px rgba(0,0,0,.05); }

/* Back to top button (met Bootstrap Icon) */
#backToTop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  display: none;                 /* JS toont/verbergt */
  border-radius: 999px;
  width: 52px; 
  height: 52px;
  padding: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  display: inline-flex;          /* center icon */
  align-items: center;
  justify-content: center;
}
#backToTop i{
  font-size: 1.6rem;             /* groter icoon */
  line-height: 1;
}
#backToTop:focus { outline: 2px solid #fff; outline-offset: 2px; }
#backToTop:hover { filter: brightness(0.95); }

/* Dovonez-stijl voor e-mail en telefoonlinks */
:root { --brand: #5a624b; --brand-dark: #4f5642; } /* brand + ~12% donkerder */

a[href^="mailto:"],
a[href^="tel:"]{
  color: var(--brand);
  text-decoration: none;          /* pas aan naar wens */
  transition: color .15s ease, opacity .15s ease;
}

a[href^="mailto:"]:hover,
a[href^="tel:"]:hover{
  color: var(--brand-dark);
  text-decoration: underline;     /* visuele feedback; mag weg als je strak wilt */
}

a[href^="mailto:"]:focus,
a[href^="tel:"]:focus{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}