/* styles.css – B-Cubed kleurenstijl met scroll-effect, witte achtergrond */

/* ----------------------------------
   Basis kleuren
---------------------------------- */
:root {
  --bc-primary: #005b4f;
  --bc-accent: #00a699;
  --bc-light-bg: #ffffff; /* wit voor consistente achtergrond */
  --bc-dark-text: #333333;
  --bc-light-text: #ffffff;

  --bc-navbar-bg: var(--bc-primary);
  --bc-navbar-text: var(--bc-light-text);
}

/* ----------------------------------
   Navbar styling
---------------------------------- */
.navbar {
  background-color: var(--bc-navbar-bg) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
  background-color: rgba(0, 91, 79, 0.9) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.navbar a,
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--bc-navbar-text) !important;
}

.navbar a:hover,
.navbar .nav-link.active {
  color: var(--bc-accent) !important;
}

/* Dropdown menu */
.navbar .dropdown-menu {
  background-color: var(--bc-navbar-bg) !important;
  border: none;
}

.navbar .dropdown-item {
  color: var(--bc-navbar-text) !important;
}

.navbar .dropdown-item:hover {
  background-color: var(--bc-accent) !important;
  color: var(--bc-light-text) !important;
}

/* ----------------------------------
   Buttons
---------------------------------- */
.btn-primary {
  background-color: var(--bc-accent);
  border: none;
  color: var(--bc-light-text);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #008777;
}

/* Toggle button (dark/light mode verwijderd) */
#theme-toggle {
  display: none; /* verborgen, omdat dark/light mode is verwijderd */
}

/* ----------------------------------
   Footer
---------------------------------- */
footer {
  background-color: var(--bc-primary);
  color: var(--bc-light-text);
  padding: 1rem 0;
  text-align: center;
}

/* ----------------------------------
   Body & tekst
---------------------------------- */
body {
  color: var(--bc-dark-text);
  background-color: var(--bc-light-bg);
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Links */
a {
  color: var(--bc-accent);
  transition: color 0.3s ease;
}

a:hover {
  color: #008777;
}