/* =========================================================
   Global UI Config – laad dit bestand als laatste CSS.
   ========================================================= */

/* ---------- Variabelen ---------- */
:root{
  /* Corporate blauw */
  --brand:#024573;
  --brand-600:#01324f;
  --ring:rgba(2,69,115,.18);

  /* Buttons */
  --btn-bg: var(--brand);
  --btn-bg-hover: var(--brand-600);
  --btn-text:#fff;

  /* Navbar (wit bij load, translucent bij scroll) */
  --navbar-bg:#ffffff;
  --navbar-bg-scrolled:rgba(255,255,255,.72);
  --navbar-blur-scrolled:12px;

  /* Hero-afbeelding en uniforme overlay */
  --hero-bg-img: url('../../images/bg.jpg');
  --hero-overlay-gradient: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));

  /* Universele radius */
  --radius-base:8px;
}

/* =========================================================
   RADIUS: overal 8px, m.u.v. sticker chips (die blijven pill)
   ========================================================= */
:where(
  .btn, .btn-2, .badge, .card, .modal, .modal-content,
  .dropdown-menu, .alert,
  .list-group-item, .form-control, .input-group, .table,
  .pagination .page-link, .progress, .toast,
  .hero-btn, .hero-btn--ghost, .career-btn, .contact-btn,
  .custom-navbar .demo-btn, .solution-card, .solution-card i,
  .blog-post-lux, .about-image, .discover-image, .career-card,
  .stats-container, .stat-item, .tagline,
  .stickers-section .sticker-card, .contact-card,
  .sticker-accordeon .card, .flow-step
){
  border-radius: var(--radius-base) !important;
}

/* Icon-blokken (waren rond) nu 8px */
.icon-badge, .flow-icon, .stat-icon{
  border-radius: var(--radius-base) !important;
}

/* Sticker formaat-chips blijven rond */
.spec-chips .spec-chip,
.spec-chips .spec-chip-outline{
  border-radius:999px !important;
}

/* Afbeeldingen ook 8px */
img, .img-fluid{ border-radius: var(--radius-base) !important; }

/* =========================================================
   BUTTONS: overal corporate blauw
   ========================================================= */
:where(
  button, .btn, .btn-2, .hero-btn, .hero-btn--ghost,
  .career-btn, .contact-btn, .custom-navbar .demo-btn,
  .info-buttons .info-btn
){
  background: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  box-shadow:none;
}
:where(
  button, .btn, .btn-2, .hero-btn, .hero-btn--ghost,
  .career-btn, .contact-btn, .custom-navbar .demo-btn,
  .info-buttons .info-btn
):hover{
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
  color: var(--btn-text) !important;
}
.hero-btn--ghost{ border:1px solid var(--btn-bg) !important; }

/* DEMO-knop expliciet forceren (specifiekere selector in Navbar.css) */
.custom-navbar .navbar-nav .demo-btn,
.custom-navbar .navbar-nav .demo-btn:focus,
.custom-navbar .navbar-nav .demo-btn:active{
  background-color: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  box-shadow: none !important;
}
.custom-navbar .navbar-nav .demo-btn:hover{
  background-color: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
  color: var(--btn-text) !important;
}

/* =========================================================
   NAVBAR: wit bij binnenkomst, translucent bij scroll
   ========================================================= */
.custom-navbar{
  background: var(--navbar-bg) !important;
  backdrop-filter:none !important;
}
.custom-navbar.scrolled{
  background: var(--navbar-bg-scrolled) !important;
  backdrop-filter: blur(var(--navbar-blur-scrolled)) !important;
}
.custom-navbar .navbar-nav .nav-link{ color:#333 !important; }
.custom-navbar .navbar-nav .nav-link:hover{
  color: var(--brand) !important;
  border-bottom:2px solid var(--brand) !important;
}
.custom-navbar .navbar-nav .dropdown-item:hover{
  background-color: rgba(2,69,115,.05) !important;
  color: var(--brand) !important;
}

/* =========================================================
   SECTIE-/ACCENTKLEUREN -> #024573
   ========================================================= */
.dot{ color: var(--brand) !important; }

/* Stats accenten */
.stat-icon{
  background:linear-gradient(180deg, rgba(2,69,115,.08), rgba(2,69,115,.02)) !important;
  border:1px solid var(--ring) !important;
}
.stat-icon i{ color: var(--brand) !important; }

/* Solutions-kaarten */
.solution-card i{
  background: rgba(2,69,115,.10) !important;
  color: var(--brand) !important;
}
.solution-card p::after{ background: var(--brand) !important; }

/* Blog */
.blog-post-link-lux{ color: var(--brand) !important; }
.blog-post-lux{ border-color: rgba(2,69,115,.10) !important; }

/* Partners */
.partners-section{ --brand: var(--brand) !important;
  border-top:1px solid rgba(2,69,115,.06) !important;
  border-bottom:1px solid rgba(2,69,115,.06) !important;
}

/* Stickers */
.stickers-lead{ color: var(--brand) !important; }
.sticker-card{ border-color: rgba(2,69,115,.10) !important; }
.icon-badge, .flow-icon{
  background: rgba(2,69,115,.08) !important;
  color: var(--brand) !important;
}
.spec-chip{
  border:1px solid rgba(2,69,115,.18) !important;
  color:#333 !important;
}
.spec-chip-outline{
  border:1px dashed rgba(2,69,115,.55) !important;
  color: var(--brand) !important;
}

/* =========================================================
   UNIFORME LAYERED BACKGROUND (Hero / Info / Footer)
   ========================================================= */

/* Hero: afdwingen zelfde combinatie (image + overlay) */
.hero-section{
  background: var(--hero-bg-img) center/cover no-repeat !important;
}
.hero-section .overlay{
  background: var(--hero-overlay-gradient) !important;
}

/* Meer informatie (info-section) */
.info-section{
  position: relative;
  color:#fff;
  /* fallback kleur als image niet laadt */
  background-color: #0b0b0b !important;
}
.info-section::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hero-overlay-gradient), var(--hero-bg-img) center/cover no-repeat;
  z-index:0;
}
.info-section > *{ position: relative; z-index:1; }

/* Footer */
.footer-section{
  position: relative;
  color:#fff;
  background: transparent !important; /* image via ::before */
}
.footer-section::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hero-overlay-gradient), var(--hero-bg-img) center/cover no-repeat;
  z-index:0;
}
.footer-section > *{ position: relative; z-index:1; }

/* Footer links leesbaar houden */
.footer-section a,
.footer-section a:hover{
  color:#fff !important;
  text-decoration: underline;
}

/* =========================================================
   Kleine tweaks
   ========================================================= */

/* Navbar-logo iets kleiner (als gevraagd) */
.custom-navbar .logo{
  height: 36px !important;
  width: auto !important;
  object-fit: contain;
}
@media (max-width: 992px){ .custom-navbar .logo{ height: 32px !important; } }
@media (max-width: 576px){ .custom-navbar .logo{ height: 28px !important; } }

/* “Ring” randen algemeen */
*{ --ring: rgba(2,69,115,.18); }