/* =========================================================================
   MENU.CSS — Μοντέρνο mobile menu για το Divi
   Δεν πειράζουμε τη λειτουργία open/close του Divi (το κουμπί hamburger
   συνεχίζει να δουλεύει όπως πάντα) — απλά ξαναστυλάρουμε το πάνελ που
   ήδη ανοίγει (.et_mobile_menu) ώστε να είναι off-canvas panel από δεξιά,
   αντί για dropdown λίστα κάτω από το header, και προσθέτουμε toggle
   (accordion) στα υπομενού αντί να εμφανίζονται όλα σαν "κατεβατό".

   Το accordion toggle behavior (ποιο υπομενού ανοίγει/κλείνει) γίνεται
   από το assets/js/menu.js
   ========================================================================= */

@media (max-width: 980px){

  /* Το ίδιο το mobile menu panel γίνεται off-canvas από δεξιά */
  .et_mobile_menu{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(360px, 88vw) !important;
    max-width: 88vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: var(--shop-bg) !important;
    box-shadow: var(--shop-shadow-lg);
    z-index: var(--shop-z-drawer);
    margin: 0 !important;
    padding: 88px 22px 100px 22px !important;
    border-radius: 0 !important;
    transform: translateX(100%);
    transition: transform .3s ease;
  }

  /* Το JS προσθέτει αυτό το class μόλις εντοπίσει ότι το Divi άνοιξε το μενού */
  .et_mobile_menu.d5shop-menu-visible{
    transform: translateX(0);
  }

  body.d5shop-mobile-menu-open{
    overflow: hidden;
  }

  /* Σκούρο overlay πίσω από το panel (δημιουργείται από το menu.js) */
  .d5shop-menu-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: calc(var(--shop-z-drawer) - 1);
  }
  body.d5shop-mobile-menu-open .d5shop-menu-overlay{
    opacity: 1;
    visibility: visible;
  }

  /* Γενικό στυλ γραμμών μενού — πιο "λίστα εφαρμογής" παρά cascade links */
  .et_mobile_menu li{
    border-bottom: 1px solid var(--shop-border-light);
  }
  .et_mobile_menu > li:last-child{ border-bottom: none; }

  .et_mobile_menu li a{
    display: block;
    padding: 14px 0 !important;
    font-size: 15px !important;
    font-weight: 500;
    color: var(--shop-text) !important;
    text-decoration: none;
  }

  /* Items με submenu: κάνουμε χώρο δεξιά για το toggle κουμπάκι */
  .et_mobile_menu li.menu-item-has-children,
  .et_mobile_menu li.page_item_has_children{
    position: relative;
  }
  .et_mobile_menu li.menu-item-has-children > a,
  .et_mobile_menu li.page_item_has_children > a{
    padding-right: 44px !important;
  }

  /* Toggle κουμπάκι (chevron) — injected από το menu.js */
  .d5shop-submenu-toggle{
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .d5shop-submenu-toggle svg{
    width: 12px;
    height: 12px;
    transition: transform .2s ease;
    color: var(--shop-text-muted);
  }
  li.d5shop-submenu-open > .d5shop-submenu-toggle svg{
    transform: rotate(180deg);
    color: var(--shop-text);
  }

  /* Accordion behaviour: το υπομενού κρυμμένο by default, ανοίγει με max-height */
  .et_mobile_menu li.menu-item-has-children ul.sub-menu,
  .et_mobile_menu li.page_item_has_children ul.children{
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    padding-left: 14px !important;
    margin: 0 !important;
    background: var(--shop-bg-alt);
    border-radius: var(--shop-radius-sm);
  }
  .et_mobile_menu li.d5shop-submenu-open > ul.sub-menu,
  .et_mobile_menu li.d5shop-submenu-open > ul.children{
    max-height: 1000px; /* αρκετά μεγάλο ώστε να χωράει οποιοδήποτε submenu */
  }
  .et_mobile_menu ul.sub-menu li a,
  .et_mobile_menu ul.children li a{
    font-size: 14px !important;
    color: var(--shop-text-muted) !important;
    padding: 12px 8px !important;
  }

  /* Κλείσιμο κουμπί πάνω-πάνω στο panel (injected από menu.js) */
  .d5shop-menu-close{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--shop-bg-alt);
    border: 1px solid var(--shop-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
  }

  /* Το κουμπί hamburger λίγο πιο "χοντρό" tap target */
  .mobile_nav .mobile_menu_bar{
    font-size: 24px !important;
  }
}

/* ---------- Desktop: μικρές πινελιές στο κεντρικό μενού ---------- */
@media (min-width: 981px){
  #top-menu > li > a,
  .et-menu-nav .nav > li > a{
    position: relative;
    transition: var(--shop-transition);
  }
  #top-menu > li > a::after,
  .et-menu-nav .nav > li > a::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--shop-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
  }
  #top-menu > li > a:hover::after,
  .et-menu-nav .nav > li > a:hover::after,
  #top-menu > li.current-menu-item > a::after{
    transform: scaleX(1);
  }
}