/* =============================================
   Frontend stijlen — seraparte CMS
   ============================================= */

/* --- Navigatie --- */
.site-nav {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: .75rem 0;
  z-index: 1030;
}

.site-logo {
  height: 36px;
  width: auto;
}

.site-nav-link {
  display: inline-block;
  color: #374151;
  font-weight: 500;
  font-size: .9rem;
  padding: .375rem .75rem;
  border-radius: .375rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.site-nav-link:hover {
  background: #f1f5f9;
  color: #111827;
  text-decoration: none;
}

.site-nav-link.active {
  background: #e0e7ff;
  color: #3730a3;
}

/* --- Hero --- */
.hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: #fff;
  padding: 100px 0 80px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
}

.hero p {
  font-size: 1.15rem;
  opacity: .85;
  max-width: 560px;
}

/* --- Nieuws sectie op homepage --- */
.nieuws-sectie {
  background: #f8f9fa;
}