@charset "utf-8";
/* =========================
   GENERAL
========================= */
 body {
  margin-top: 60px; 
  font-family: 'IBM Plex Sans', Georgia;
  font-weight: 400;
  color: #000;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  line-height: 1.4;
  text-rendering: optimizeLegibility;
}
 
h5,
p,
button,
.col-left,
.col-right,
.inner-box {
 font-family: 'IBM Plex Sans', Georgia;
}
 
 
/* =========================
   TYPOGRAPHY
========================= */

.font-appart {
  font-size: 11px;
  font-family: Tahoma, Geneva, sans-serif,  Palatino, serif;
  color: #000;
  line-height: 1.4;
  display: block;
  text-align: justify;

  /* boekstijl */
  text-indent: 1em;

  /* 🚫 BELANGRIJK: geen witte regels meer */
  margin: 0;
}

/* eerste alinea geen indent */
.font-appart:first-of-type {
  text-indent: 0;
}





/* =========================
   NAVBAR
========================= */

.navbar.bg-success {
  background-color: #198754 !important;
  border: none;
}

/* Links in hoofdnavbar */
.navbar a,
.navbar .nav-link {
  color: #e8f5e9 !important;
  font-weight: 500;
}

.navbar a:hover,
.navbar .nav-link:hover {
  color: #ffffff !important;
  opacity: 0.55;
}

/* =========================
   SUBMENU / DROPDOWN FIX
========================= */

/* De achtergrond van de dropdowns donker maken zodat oranje tekst opvalt */
.navbar .dropdown-menu,
.mega-menu .dropdown-menu,
.mega-menu .submenu {
  background: #1a1a1a !important; /* Donkere achtergrond voor contrast */
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  padding: 10px !important;
}

/* Submenu links specifiek ORANJE maken */
.navbar .dropdown-menu a,
.mega-menu .dropdown-menu a,
.mega-menu .submenu a {
  color: #FFA500 !important; /* Jouw oranje tekst */
  background: transparent !important;
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* Hover in donker submenu */
.navbar .dropdown-menu a:hover,
.mega-menu .dropdown-menu a:hover,
.mega-menu .submenu a:hover {
  background: rgba(255, 255, 255, 0.1) !important; /* Subtiele lichte hover */
  color: #FFB533 !important; /* Iets feller oranje bij hover */
  padding-left: 16px !important;
}

/* =========================
   MEGA MENU BASE
========================= */

.mega-menu {
  display: none;
  background: #FFA500; /* Jouw oranje */
  width: 100%;
  padding: 0;
  margin: 0;
  color: #1a1a1a;
  border-radius: 0;
  border: none;
  transform: translateY(-2px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  animation: megaFade 0.2s ease-out; /* Gecombineerd */
}

.mega-menu.active {
  display: block;
}

/* =========================
   CONTAINER & GRID
========================= */

.mega-menu .container,
.mega-menu .container-fluid {
  padding: 18px;
  margin: 0 auto;
}

.mega-menu .row {
  margin: 0;
}

.mega-menu .col-md-6 {
  padding: 12px 22px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.mega-menu .col-md-6:last-child {
  border-right: none;
}

/* =========================
   LINKS (Algemeen Mega Menu)
========================= */

.mega-menu a {
  display: block;
  color: #1f1f1f;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: 'IBM Plex Sans', Georgia, sans-serif;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* Hover voor normale mega menu links */
.mega-menu a:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
  padding-left: 14px;
}

/* Active link */
.mega-menu a.active {
  background: rgba(255, 255, 255, 0.25);
  font-weight: 600;
  color: #000;
}

/* =========================
   TITLES (OPTIONAL HEADERS)
========================= */

.mega-menu h6 {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

/* =========================
   ANIMATIE
========================= */

@keyframes megaFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(-2px);
  }
}







/* =========================
   COLUMNS
========================= */

.col-left,
.col-right {
  background-color: #fff;
  position: relative;
  margin-top: 25px;
  margin-bottom: 35px;
}

/* =========================
   INNER BOX
========================= */

.inner-box {
  position: relative;
  background-color: #fff;
  border-radius: 6px;
  margin-top: 12px;
  margin-bottom: 40px;
  border: 1px solid #FBC8BB;
  padding: 20px;
  text-align: left;
  top: -10px;
}

.inner-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}

/* =========================
   FLOATING BUTTON
========================= */

.floating-btn {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  width: 310px;

  background-color: #FCEBE7;
  color: #000;

  border: 1px solid #FBC8BB;

  pointer-events: none;
}

.floating-btn:hover {
  background-color: #FBC8BB;
  color: #000;
}


/* =========================
   DESKTOP OVERLAY
========================= */

@media (min-width: 992px) {

  .nav-item.position-static {
    position: relative;
  }

  .mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
  }

}
 
/* =========================
   MOBILE
========================= */

@media (max-width: 991.98px) {

  .mega-menu {
    position: static;
  }

}

 
/* tabel */
@media (max-width: 768px) {

  .table td,
  .table th {
    font-size: 11px;
    padding: 0.25rem;
    vertical-align: middle;
  }

  .table img {
    width: 18px;
  }
/* buttons boven tabel */
@media (max-width: 768px) {

  .lang-switch-btn {
    font-size: 9px;
    padding: 0.25rem 0.45rem;
    min-height: 34px;
  }

}  

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------- COOKIE -------*/    

/* BOOK CARDS */
.book-card {
  height: 650px !important;
  position: relative;
  background-color: #fff;
  border-radius: 6px;
  margin-top: 12px;
  margin-bottom: 40px;
  border: 1px solid #FBC8BB;
  padding: 20px;
  text-align: left;
  top: -10px;	
}

@media (max-width: 767.98px) {
    .book-card {
        height: auto !important;
    }
}