/* Homepage specifieke stijlen – bouwt voort op base.css */

/* Header elevatie bij scroll */
.header.elevated { box-shadow: var(--shadow-sm); }

/* Desktop nav – mobiel verbergen via media query */
.nav--desktop { display: none; }
@media (min-width: 768px) {
  .nav--desktop { display: flex; }
  #nav-toggle { display: none; }
}

/* Mobiele navigatie panel */
#site-nav.open { display: block; }
#site-nav { 
  position: absolute; 
  top: var(--header-height); 
  right: var(--container-pad); 
  background: #fff; 
  border: 1px solid var(--gray-200); 
  border-radius: var(--radius-md); 
  box-shadow: var(--shadow-md); 
  padding: 8px; 
  min-width: 220px; 
}
#site-nav a { display: block; }
@media (min-width: 768px) {
  #site-nav { position: static; border: 0; box-shadow: none; padding: 0; min-width: auto; background: transparent; }
  #site-nav a { display: inline-flex; }
}
.gap-12 {
  list-style: none;
  padding-left: 0;
}
/* Hero visuals */
.hero { background: linear-gradient(180deg, rgb(14 165 233 / 0.06), transparent 60%); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Cookie banner */
.cookie-banner { position: sticky; bottom: 0; left: 0; width: 100%; background: #ffffff; border-top: 1px solid var(--gray-200); box-shadow: 0 -6px 16px rgb(0 0 0 / 0.06); padding-block: 12px; }
.cookie-banner.hidden { display: none; }

/* Chat widget */
.chat-widget { position: fixed; right: 16px; bottom: 72px; width: min(360px, 92vw); }

/* Utility tweaks */
.pt-16 { padding-top: var(--space-16); }
.pb-16 { padding-bottom: var(--space-16); }

/* Minor card heading size helpers */
.h5 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.h6 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }