/* =========================================================
   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 */
  #main-header .et_mobile_menu {
    background: linear-gradient(
      140deg,
      rgba(0,98,173, 0.99) 1%,  /* Blauw #0062ad bij 1% */
      rgba(41,17,96, 0.99) 100%    /* donkerblauw #291160 bij 100% */
    ) !important;     /* paars */
  }
  #main-header .et_mobile_menu a:hover {
    background: #291160 !important;     /* donkerpaars hover */
  }

  /
}