/* =========================================================
   HEADER ALGEMEEN (≥ 981px)
   ========================================================= */
#main-header {
  transition: background 0.35s ease, padding 0.35s ease;
  padding-top: 50px;
}
#main-header.et-fixed-header {
  padding-top: 0;
}

/* Homepagina */
body.home #main-header.et-fixed-header {
  background: linear-gradient(90deg, #01012c 20%, #4c1c68 100%
  ) !important;
}

/* Specifieke pagina’s */
body.page-id-62 #main-header.et-fixed-header,
body.page-id-78 #main-header.et-fixed-header,
body.page-id-117 #main-header.et-fixed-header,
body.page-id-134 #main-header.et-fixed-header {
  background: linear-gradient(90deg, #01012c 20%, #4c1c68 100%
  ) !important;
}

/* ===============================
   VERBERG HEADERS BIJ PAGINALADEN
   =============================== */
#main-header:not(.et-fixed-header),
#top-header:not(.et-fixed-header) {
  display: none !important;
}

/* Verwijder de ruimte bovenaan */
#page-container {
  padding-top: 0 !important;
}

/* Alleen op een specifieke pagina (bijv. ID 63) */
body.page-id-62 #main-header:not(.et-fixed-header),
body.page-id-78 #main-header:not(.et-fixed-header),
body.page-id-62 #top-header:not(.et-fixed-header),
body.page-id-78 #top-header:not(.et-fixed-header) {
  display: none !important;
}

/* Verwijder de bovenruimte */
body.page-id-62 #page-container,
body.page-id-78 #page-container {
  padding-top: 0 !important;
}
/* =========================================================
   HEADER – MOBIEL (≤ 980px)
   ========================================================= */
@media (max-width: 980px) {

  /* Sticky header gedrag */
  #main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent !important;
    padding-top: 20px;
  }

  #main-header.et-fixed-header {
    padding-top: 0;
  }

  #page-container {
    padding-top: 80px; /* pas aan aan je headerhoogte */
  }

  /* Homepagina kleurverloop bij scroll */
  body.home #main-header.et-fixed-header {
    background: linear-gradient(90deg, #01012c 20%, #4c1c68 100%
    ) !important;
  }

  /* Specifieke pagina’s kleurverloop bij scroll */
  body.page-id-62 #main-header.et-fixed-header,
  body.page-id-78 #main-header.et-fixed-header,
  body.page-id-117 #main-header.et-fixed-header,
  body.page-id-134 #main-header.et-fixed-header {
    background: linear-gradient(90deg, #01012c 20%, #4c1c68 100%
    ) !important;
  }

  /* Mobiel menu (hamburger) */
  #main-header .et_mobile_menu {
    background: inherit !important;
  }
  #main-header .et_mobile_menu a {
    color: #fff !important;
    transition: color 0.25s ease;
  }
  #main-header .et_mobile_menu a:hover {
    color: #d6c5ff !important;
  }
}

/* =========================================================
   Browserbalkkleur per pagina (iOS/Android Safari effect)
   ========================================================= */

/* Homepagina */
html.home, body.home {
  background-color: #01012c;
}

/* Specifieke pagina’s */
html.page-id-62, body.page-id-62,
html.page-id-78, body.page-id-78,
html.page-id-117, body.page-id-117,
html.page-id-134, body.page-id-134 {
  background-color: #01012c;
}