/*
 * Two-pane sidemenu — desktop only (>= 850px). Mobile untouched.
 *
 * Cascade notes (Customizer "Additional CSS" prints AFTER this file):
 *  - `section.sidemenu { width: 350px }`               -> beaten via !important
 *  - `... > li:not(...):not(...) { display:flex !important }` -> beaten via higher
 *    specificity (body prefix) + !important
 *  - `.sidemenu_open .sidemenu { left: 0 }` (plugin inline, Position=Left)
 *    -> must keep winning, so `left` is deliberately NOT !important here.
 */
/* Global Sidebar Layout & Reordering (Mobile + Desktop) - Grid Layout */

/* Mobile only: flex-wrap for active season sub-menu items + sub-menu toggle via ntc-open */
@media screen and (max-width: 849px) {
  .sub-menu .season-show.active {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Hide inactive season menu items on mobile */
  body .sidemenu li.season-hide,
  body .sidemenu-navigation li.season-hide {
    display: none !important;
  }

  /* Hide sub-menus by default on mobile */
  body .sidemenu li > .sub-menu,
  body .sidemenu-navigation li > .sub-menu {
    display: none;
  }

  /* Show sub-menu when parent li has ntc-open */
  body .sidemenu li.ntc-open > .sub-menu,
  body .sidemenu-navigation li.ntc-open > .sub-menu {
    display: block !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Allow open list items to wrap the sub-menu beneath the parent link */
  body .sidemenu li.ntc-open,
  body .sidemenu-navigation li.ntc-open {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Rotate chevron when open on mobile */
  body .sidemenu li.ntc-open > button.toggle,
  body .sidemenu-navigation li.ntc-open > button.toggle {
    transform: rotate(180deg) !important;
  }
}


section.sidemenu {
    display: grid;
    grid-template-columns: 3fr 7fr; /* GTranslate ~30%, My Account ~70% */
    grid-template-areas: 
        "menu menu"
        "gtranslate account"
        "search search";
    align-content: start;
}
section.sidemenu > .close_sidemenu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}
section.sidemenu > .sidemenu-navigation {
    grid-area: menu;
    margin-top: 50px; /* Space for close button on mobile */
}
section.sidemenu > #gtranslate-3 {
    grid-area: gtranslate;
    padding: 0 !important;
    margin: 0 0 0 32px !important;
    align-self: center;
    justify-self: start;
}
section.sidemenu > #custom_html-2 {
    grid-area: account;
    padding: 0 !important;
    margin: 0 !important;
    align-self: start;
    justify-self: start;
}
section.sidemenu > #search-2 {
    grid-area: search;
    padding: 0 !important;
    margin: 10px 32px !important;
    z-index: -1;
}
section.sidemenu > #search-2 .search-field,
section.sidemenu > #search-2 input[type="search"] {
    border-radius: 0 !important;
}

/* Autocomplete suggestion styling */
section.sidemenu .autocomplete-suggestion .search-name {
    color: #000 !important;
}

@media screen and (min-width: 850px) {

  /* Hide specific mobile-only widgets on desktop */
  section.sidemenu > #gtranslate-3,
  section.sidemenu > #search-2,
  section.sidemenu > #custom_html-2 {
      display: none !important;
  }
  /* left drawer panel. pointer-events:none guarantees the closed (opacity:0)
     overlay can never intercept page clicks regardless of position. */
  section.sidemenu {
    left: -100%;
    right: auto;
    width: 900px !important;
    max-width: 90vw;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    pointer-events: none;
  }
  body.sidemenu_open section.sidemenu {
    pointer-events: auto;
  }

  body section.sidemenu section.sidemenu-navigation {
    margin: 2.5rem 4rem 0;
    border-bottom: none;
    min-height: 60vh;
  }

  /* LEFT column — also the positioning anchor for the right pane, so the
     pane's first item top-aligns with the first left-column item */
  /* The menu ul is the positioning anchor for ALL panes */
  body section.sidemenu ul.menu {
    position: relative;
    width: 220px;
    border-right: 1px solid #e0e0e0;
    min-height: 55vh;
  }

  /* level-1 row: label left, chevron right, submenu wraps below full-width */
  body section.sidemenu ul.menu > li:not(.season-hide),
  body section.sidemenu ul.menu > li.season-show,
  body section.sidemenu ul.menu > li:not(.winter-menu):not(.sommer-menu) {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  body section.sidemenu ul.menu > li.season-hide {
    display: none !important;
  }

  body section.sidemenu ul.menu > li > a {
    flex: 0 1 auto;
    display: block;
    padding: 7px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #000;
  }

  /* Flatsome's chevron button, restyled as the accordion control:
     black like the label, small, sitting right next to the text */
  body section.sidemenu ul.menu > li > button.toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;   /* push to right edge */
    width: 26px;
    height: 26px;
    padding: 0;
    background: none !important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    color: #000 !important;
    font-size: 23px;
    line-height: 1;
    transform: rotate(270deg);   /* always points right → */
    transition: color .15s ease;
  }
  body section.sidemenu ul.menu > li > button.toggle > i {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: inherit;
    font-weight: 800 !important;
  }
  /* hovering the label colors the chevron, hovering the chevron colors the label */
  body section.sidemenu ul.menu > li > button.toggle:hover,
  body section.sidemenu ul.menu > li > a:hover + button.toggle,
  body section.sidemenu ul.menu > li:has(> button.toggle:hover) > a {
    color: #EB6103 !important;
  }

  /* no chevron buttons on deeper levels (level-2 uses the › arrow + hover) */
  body section.sidemenu ul.menu ul button.toggle {
    display: none !important;
  }

  /* level-2 list: absolutely positioned in COLUMN 2 (next to column 1) */
  body section.sidemenu ul.menu > li > ul.sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 220px;   /* sits right next to column 1 */
    width: 200px;
    height: 100%;
    margin: 0;
    padding: 0 0 0 24px;
    border-left: 1px solid #e0e0e0;
    background: #fff;
    overflow: visible !important;
  }
  section.sidemenu ul.menu > li {
    padding-right: 16px;
    overflow: visible !important;
  }
  /* Open level-2 menu via JS-managed class */
  body section.sidemenu ul.menu > li.ntc-open > ul.sub-menu {
    display: block;
  }
  /* Toggle stays at 270deg always — active state does NOT rotate */
  body section.sidemenu ul.menu > li.ntc-open > button.toggle {
    transform: rotate(270deg);
  }
  body section.sidemenu ul.menu > li > ul.sub-menu > li > a {
    display: block;
    padding: 6px 0;
    font-weight: 400;
    text-transform: none;
    color: #000;
  }

  /* clear, larger arrow on level-2 items that have children,
     vertically centered against the text */
  body section.sidemenu ul.menu > li > ul.sub-menu > li.menu-item-has-children > a::after {
    content: "\203A";
    display: inline-block;
    margin: 0 0 2px 5px;
    font-size: 1.7em;
    line-height: 0;
    vertical-align: middle;
    position: relative;
    top: -3px;   /* the › glyph sits low in its em-box; lift it to optical center */
    color: #EB6103;
    transition: transform .15s ease;
  }
  body section.sidemenu ul.menu > li > ul.sub-menu > li.ntc-active > a::after {
    transform: translateX(4px);
  }

  /* consistent hover/active color for every link in the drawer */
  body section.sidemenu ul.menu a:hover,
  body section.sidemenu ul.menu li.ntc-active > a {
    color: #EB6103 !important;
  }

  /* Prevent level-2 list items from positioning their children,
     so that level-3 aligns relative to column 2 container */
  body section.sidemenu ul.menu > li > ul.sub-menu > li {
    position: static !important;
  }

  /* level 3 = COLUMN 3, positioned relative to column 2's sub-menu */
  body section.sidemenu ul.menu ul.sub-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 200px;   /* sits exactly at the right of column 2 (200px width) */
    width: 200px;
    height: 100%;
    margin: 0;
    padding: 0 0 0 24px;
    border-left: 1px solid #e0e0e0;
    background: #fff;
    overflow: visible !important;
  }
  body section.sidemenu ul.menu > li > ul.sub-menu > li.ntc-active > ul.sub-menu {
    display: block !important;
  }
  body section.sidemenu ul.menu ul.sub-menu ul.sub-menu > li > a {
    display: block;
    padding: 7px 0;
    font-weight: 400;
    text-transform: none;
    color: #000;
  }
}

/* Prevent flash of "SideMenu" text on load before JS replaces it with the dashicon */
.open_sidemenu a {
    font-size: 0 !important;
}
.open_sidemenu a .dashicons {
    font-size: 30px !important; /* Force visibility of the dashicon */
}