/* =========================================================
   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,
    rgba(134, 36, 225, 0.97) 25%,  /* paars #8624e1 bij 25% */
    rgba(54, 7, 166, 0.97) 100%    /* donkerpaars #3607a6 bij 100% */
  ) !important;
}

/* Specifieke pagina’s */
body.page-id-63 #main-header.et-fixed-header,
body.page-id-103 #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,
    rgba(53, 37, 151, 0.97) 0%,     /* #352597 links */
    rgba(134, 134, 255, 0.97) 100%  /* #8686ff rechts */
  ) !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,
      rgba(134, 36, 225, 0.97) 25%,
      rgba(54, 7, 166, 0.97) 100%
    ) !important;
  }

  /* Specifieke pagina’s kleurverloop bij scroll */
  body.page-id-63 #main-header.et-fixed-header,
  body.page-id-103 #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,
      rgba(53, 37, 151, 0.97) 0%,
      rgba(134, 134, 255, 0.97) 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: #8624e1;
}

/* Specifieke pagina’s */
html.page-id-63, body.page-id-63,
html.page-id-103, body.page-id-103,
html.page-id-117, body.page-id-117,
html.page-id-134, body.page-id-134 {
  background-color: #352597;
}