/* =========================================================
   MOBIEL MENU (≤ 980px) – HTR Clean Style
   ========================================================= */
@media (max-width:980px){

  /* ---------------------------------------------------------
     1. Header reset & menu container
     --------------------------------------------------------- */
  #main-header {
    background: transparent !important;
    border: none !important;
  }

  #main-header .et_mobile_menu {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
  }

  /* ---------------------------------------------------------
     2. Menu-items (links)
     --------------------------------------------------------- */
  #main-header .et_mobile_menu a {
    display: block;
    text-align: center;
    font-weight: 600;
    color: #ffffff !important;     /* witte tekst */
    padding: 14px 0;
    transition: all .25s ease;
  }

  /* Hover (algemeen, wordt per pagina overschreven) */
  #main-header .et_mobile_menu a:hover {
    color: #ffffff !important;
  }

  /* ---------------------------------------------------------
     3. Submenu’s (standaard verborgen)
     --------------------------------------------------------- */
  #main-header .et_mobile_menu ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    padding-left: 10px;            /* inspringing child items */
  }

  #main-header .et_mobile_menu li.submenu-open > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
  }

  /* ---------------------------------------------------------
     4. Caret (pijltje rechts)
     --------------------------------------------------------- */
  #main-header .et_mobile_menu .menu-item-has-children > a {
    position: relative;
    padding-right: 44px;
  }

  #main-header .et_mobile_menu .menu-item-has-children > a::after {
    content: "\33";
    font-family: "ETmodules";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 16px;
    color: #ffffff;                /* witte caret */
    transition: transform .25s ease;
  }

  #main-header .et_mobile_menu li.submenu-open > a::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* ---------------------------------------------------------
     5. Pagina-specifieke kleuren
     --------------------------------------------------------- */

  /* Homepagina */
  body.home #main-header .et_mobile_menu {
    background: #8624e1 !important;     /* paars */
  }
  body.home #main-header .et_mobile_menu a:hover {
    background: #3607a6 !important;     /* donkerpaars hover */
  }

  /* Overige pagina’s (blauw/paarse stijl) */
  body.page-id-63 #main-header .et_mobile_menu,
  body.page-id-103 #main-header .et_mobile_menu,
  body.page-id-117 #main-header .et_mobile_menu,
  body.page-id-134 #main-header .et_mobile_menu {
    background: #8686ff !important;     /* lichtblauw-paars */
  }

  body.page-id-63 #main-header .et_mobile_menu a:hover,
  body.page-id-103 #main-header .et_mobile_menu a:hover,
  body.page-id-117 #main-header .et_mobile_menu a:hover,
  body.page-id-134 #main-header .et_mobile_menu a:hover {
    background: #352597 !important;     /* donkerblauw hover */
  }
}