/* =========================================================
   TONC Mega Menu Elementor v2
   - Desktop mega menu: sidebar + grid actieve selectie
   - Mobiel Elementor menu: actieve pagina/open item + open/dicht pijltjes
========================================================= */

/* ================================
   Desktop mega menu selectie
================================ */

.tonc-megamenu-elementor .tonc-sidebar-item,
.tonc-megamenu-elementor .tonc-company-card {
  cursor: pointer;
  transition: border-color 0.2s ease;
  outline: none;
}

.tonc-megamenu-elementor .tonc-sidebar-item:focus-visible,
.tonc-megamenu-elementor .tonc-company-card:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(227, 6, 19, 0.35);
}

.tonc-megamenu-elementor .tonc-megamenu-sidebar,
.tonc-megamenu-elementor .e-con.tonc-megamenu-sidebar {
  border-right: none !important;
  border-width: 0 !important;
}

.tonc-megamenu-elementor .tonc-sidebar-item {
  border-left: 4px solid transparent !important;
  border-right: none !important;
}

.tonc-megamenu-elementor .tonc-sidebar-item .elementor-heading-title {
  color: #6b7280 !important;
  transition: color 0.2s ease;
}

.tonc-megamenu-elementor .tonc-sidebar-item .elementor-icon i,
.tonc-megamenu-elementor .tonc-sidebar-item .elementor-icon svg {
  color: #9ca3af !important;
  fill: #9ca3af !important;
  transition: color 0.2s ease, fill 0.2s ease;
}

.tonc-megamenu-elementor .tonc-sidebar-item.is-active {
  border-left-color: #e30613 !important;
}

.tonc-megamenu-elementor .tonc-sidebar-item.is-active .elementor-heading-title {
  color: #003b78 !important;
  font-weight: 700 !important;
}

.tonc-megamenu-elementor .tonc-sidebar-item.is-active .elementor-icon i,
.tonc-megamenu-elementor .tonc-sidebar-item.is-active .elementor-icon svg {
  color: #e30613 !important;
  fill: #e30613 !important;
}

.tonc-megamenu-elementor .tonc-company-card,
.tonc-megamenu-elementor .e-con.tonc-company-card {
  border-style: solid !important;
  border-width: 0 0 0 5px !important;
  border-color: transparent transparent transparent #d7d7d7 !important;
}

.tonc-megamenu-elementor .tonc-company-card:hover,
.tonc-megamenu-elementor .tonc-sidebar-item:hover,
.tonc-megamenu-elementor .e-con.tonc-company-card:hover,
.tonc-megamenu-elementor .e-con.tonc-sidebar-item:hover {
  --e-con-background-color: #ffffff !important;
  background-color: #ffffff !important;
}

.tonc-megamenu-elementor .tonc-company-card.is-active,
.tonc-megamenu-elementor .e-con.tonc-company-card.is-active {
  border-width: 0 0 0 5px !important;
  border-color: transparent transparent transparent #e30613 !important;
  background-color: #ffffff !important;
}

.tonc-megamenu-elementor .tonc-company-card.is-active .elementor-heading-title,
.tonc-megamenu-elementor .e-con.tonc-company-card.is-active .elementor-heading-title {
  color: #003b78 !important;
  font-weight: 700 !important;
}

.tonc-megamenu-elementor .tonc-company-card .elementor-widget-image img {
  margin-left: 0;
  margin-right: auto;
}

.tonc-megamenu-elementor .tonc-company-card .elementor-heading-title,
.tonc-megamenu-elementor .tonc-company-card .elementor-text-editor {
  text-align: left !important;
}

/* ================================
   Mobiel/tablet Elementor menu
================================ */

@media (max-width: 1024px) {

  /* Basispositie menu-items */
  .top-menu .e-n-menu-item {
    position: relative !important;
  }

  .top-menu .e-n-menu-title {
    position: relative !important;
    padding-right: 55px !important;
  }

  /* Actieve pagina op basis van instelling in plugin */
  .top-menu .e-n-menu-item.tonc-mobile-active > .e-n-menu-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 32px;
    background: #e6332a;
  }

  .top-menu .e-n-menu-item.tonc-mobile-active > .e-n-menu-title .e-n-menu-title-text {
    color: #003b78 !important;
    font-weight: 700 !important;
  }

  /* Open menu-item ook dik/blauw maken */
  .top-menu .e-n-menu-item.tonc-mobile-open > .e-n-menu-title .e-n-menu-title-text {
    color: #003b78 !important;
    font-weight: 700 !important;
  }

  /* Pijltjecontainer: alle pijltjes exact gelijk uitlijnen */
  .top-menu .e-n-menu-dropdown-icon {
    position: absolute !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
  }

  .top-menu .e-n-menu-dropdown-icon-opened,
  .top-menu .e-n-menu-dropdown-icon-closed {
    width: 14px !important;
    height: 14px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Elementor open/closed iconen afdwingen */
  .top-menu .e-n-menu-dropdown-icon[aria-expanded="false"] .e-n-menu-dropdown-icon-opened,
  .top-menu .e-n-menu-item:not(.tonc-mobile-open) > .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-opened {
    display: none !important;
  }

  .top-menu .e-n-menu-dropdown-icon[aria-expanded="false"] .e-n-menu-dropdown-icon-closed,
  .top-menu .e-n-menu-item:not(.tonc-mobile-open) > .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-closed {
    display: flex !important;
  }

  .top-menu .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-opened,
  .top-menu .e-n-menu-item.tonc-mobile-open > .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-opened {
    display: flex !important;
  }

  .top-menu .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed,
  .top-menu .e-n-menu-item.tonc-mobile-open > .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-closed {
    display: none !important;
  }

  /* Reset bestaande triangle styling */
  .top-menu .menu-arrow,
  .top-menu .menu-arrow.active {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    transform: none !important;
    color: transparent !important;
  }

  /* Gesloten: grijs pijltje naar rechts */
  .top-menu .e-n-menu-dropdown-icon-closed .menu-arrow,
  .top-menu .e-n-menu-item:not(.tonc-mobile-open) > .e-n-menu-dropdown-icon .menu-arrow {
    border-left: 6px solid #8a8a8a !important;
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    border-right: 0 !important;
  }

  /* Geopend: rood pijltje naar beneden */
  .top-menu .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-opened .menu-arrow,
  .top-menu .e-n-menu-item.tonc-mobile-open > .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-opened .menu-arrow {
    border-top: 6px solid #e6332a !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-bottom: 0 !important;
  }
}