/* Scuba Academie – megamenu onder "Winkel" (mega-menu.php). Kleuren en letter uit design.css.
   Alleen op desktop (Divi-breekpunt 981px) en alleen in de header; op mobiel (en in Divi's mobiele menu) geen paneel. */
.sad-mega__panel { display: none; }

@media (min-width: 981px) {
  /* Het paneel hangt aan de menumodule, over de volle breedte van de menubalk (niet onder het menu-item). */
  .et-l--header .et_pb_menu .et_pb_menu_inner_container { position: relative; }
  .et-l--header .et_pb_menu .et-menu > li.sad-mega,
  .et-l--header .et_pb_menu .et-menu-nav,
  .et-l--header .et_pb_menu .et_pb_menu__menu,
  .et-l--header .et_pb_menu .et-menu { position: static !important; }   /* Divi zet li op relative (met #et-boc) */

  .et-l--header .sad-mega__panel {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 10000;
    padding-top: 10px;   /* onzichtbare brug: de muis kan van "Winkel" naar het paneel zonder dat het sluit */
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }
  .et-l--header .sad-mega:hover > .sad-mega__panel,
  .et-l--header .sad-mega:focus-within > .sad-mega__panel {
    visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
  }
  :is(#et-boc, body) .et-l--header .et_pb_menu .et-menu-nav ul.et-menu li.sad-mega:hover > a,
  :is(#et-boc, body) .et-l--header .et_pb_menu .et-menu-nav ul.et-menu li.sad-mega:focus-within > a { color: var(--sad-primary) !important; }

  .sad-mega__inner {
    padding: 30px 36px 22px; text-align: left; background: var(--sad-white);
    border: 1px solid var(--sad-line); border-radius: var(--sad-radius); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.4);
    font-family: var(--sad-font);
  }
  .sad-mega__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 32px; }
  .sad-mega__col { min-width: 0; }

  /* Divi stijlt alle links en li's in het menu (inline-block, 200px brede dropdown-links, padding); hier neutraal. */
  .et-l--header .sad-mega__panel,
  .et-l--header .sad-mega__panel li { text-align: left !important; }   /* Divi centreert de menutekst */
  .et-l--header .sad-mega__panel li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; }
  .et-l--header .sad-mega__panel a {
    display: inline-block; width: auto !important; padding: 0 !important; opacity: 1 !important;
    text-transform: none; letter-spacing: 0; transition: color 0.15s;
  }
  /* Divi kleurt alle menulinks via ".et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu ul li a" (zwart, 700,
     !important). Met :is(#et-boc, body) en de extra klassen hieronder weegt het paneel zwaarder, ook zonder #et-boc. */
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner a.sad-mega__head {
    margin-bottom: 10px; font: 600 12px/1.4 var(--sad-font) !important; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sad-heading) !important; overflow-wrap: break-word;
  }
  /* Divi behandelt elke geneste ul in het menu als uitklapmenu (absoluut, verborgen, 240px, gecentreerd); onze lijst niet. */
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner ul.sad-mega__list {
    position: static !important; display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important;
    gap: 7px; width: auto !important; margin: 0 !important; padding: 0 !important;
    visibility: inherit !important; opacity: 1 !important; transform: none !important; list-style: none !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
  }
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner ul.sad-mega__list li a { font: 400 14px/1.4 var(--sad-font) !important; color: var(--sad-text) !important; }
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner a:hover,
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner ul.sad-mega__list li a:hover,
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner a:focus-visible { color: var(--sad-primary) !important; }
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner a:focus-visible { outline: 2px solid var(--sad-primary); outline-offset: 2px; }

  .sad-mega__foot { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sad-line); }
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner .sad-mega__foot a { font: 500 13px/1.4 var(--sad-font) !important; color: var(--sad-heading) !important; }
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner .sad-mega__foot a.sad-mega__all { font-weight: 600 !important; color: var(--sad-primary) !important; }
  :is(#et-boc, body) .et-l--header .et_pb_menu li.sad-mega .sad-mega__panel .sad-mega__inner .sad-mega__foot a:hover { color: var(--sad-primary) !important; text-decoration: underline; }
  .sad-mega__foot .sad-mega__all::after { content: ' →'; }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .sad-mega__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .et-l--header .sad-mega__panel { transition: none; transform: none; }
}

/* ---------- Gewone uitklapmenu's (Bootduiken, Duikschool, Service & Onderhoud) in dezelfde stijl als het megamenu ----
   Divi's standaard: blauwe lijn bovenaan, Open Sans vet. Nu: witte kaart met ronde hoeken en schaduw, Poppins, grijs → blauw. */
@media (min-width: 981px) {
  :is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li:not(.sad-mega) > ul.sub-menu {
    padding: 14px 0 !important; border: 1px solid var(--sad-line) !important; border-top: 1px solid var(--sad-line) !important;
    border-radius: var(--sad-radius); background: var(--sad-white) !important; box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.4) !important;
    text-align: left !important;
  }
  :is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li:not(.sad-mega) > ul.sub-menu { display: block !important; width: 240px !important; }
  :is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li:not(.sad-mega) > ul.sub-menu li { display: block !important; width: 100% !important; padding: 0 !important; text-align: left !important; }
  :is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li:not(.sad-mega) > ul.sub-menu li a {
    width: 100% !important; padding: 8px 26px !important; font: 400 14px/1.4 var(--sad-font) !important; letter-spacing: 0 !important;
    text-transform: none !important; color: var(--sad-text) !important; background: none !important; opacity: 1 !important;
  }
  :is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li:not(.sad-mega) > ul.sub-menu li a:hover,
  :is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li:not(.sad-mega) > ul.sub-menu li.current-menu-item > a { color: var(--sad-primary) !important; }
}

/* Menubalk in de letter van de winkel; het actieve item en hover in de primaire kleur (niet Divi's lichtblauw). */
:is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li > a { font-family: var(--sad-font) !important; font-weight: 600 !important; }
:is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li:is(.current-menu-item, .current-menu-ancestor, .current_page_ancestor) > a,
:is(#et-boc, body) .et-l--header .et_pb_menu ul.et-menu > li > a:hover { color: var(--sad-primary) !important; opacity: 1 !important; }