/* =====================================================================
   Alliance Safety - Mega Menu styling
   Ported from the approved concept (alliance-menu.pages.dev) onto the
   nopCommerce Nop-Templates Mega Menu markup:
     ul.mega-menu.mainMenu > li.has-sublist > a
        > div.sublist-wrap > ul.sublist            (the panel = columns row)
             > li.has-sublist > a                  (a column title)
                > div.sublist-wrap > ul.sublist    (that column's links)
                     > li > a                       (a link row)
   Self-hosted; injected into the store via one <link>. Production-only
   (preview chrome lives in the preview page, not here).
   ===================================================================== */

:root{
  --as-blue:#00549f; --as-blue-dark:#004d80;
  --as-yellow:#ffcf19; --as-yellow-alt:#fdc82f;
  --as-white:#fff; --as-black:#000;
  --as-text-dark:#333; --as-text-grey:#666; --as-text-body:#808080; --as-text-muted:#999;
  --as-grey-light:#f5f5f5; --as-border:rgba(102,102,102,.14);
  --as-font:'Open Sans',Arial,Helvetica,sans-serif;
  --as-radius:4px; --as-transition:all .2s ease; --as-container:1440px; --as-nav-h:44px;
}

/* ---- top-level bar ------------------------------------------------- */
ul.mega-menu.mainMenu{
  display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center;
  position:relative;                 /* positioning context for full-width panels */
  list-style:none; margin:0 auto; padding:0; max-width:var(--as-container);
  font-family:var(--as-font);
}
ul.mega-menu.mainMenu > li{ display:flex; position:static; }   /* static => panel spans the bar */
ul.mega-menu.mainMenu > li > a{
  display:inline-flex; align-items:center; gap:7px;
  height:var(--as-nav-h); padding:0 clamp(6px,0.6vw,16px);
  color:var(--as-white); font-size:clamp(13px,1.02vw,15px); font-weight:700; line-height:1;
  white-space:nowrap; text-decoration:none; transition:var(--as-transition);
}
ul.mega-menu.mainMenu > li > a > span{ color:inherit; }
ul.mega-menu.mainMenu > li > a:hover,
ul.mega-menu.mainMenu > li > a:focus-visible{ background:rgba(255,255,255,.10); color:var(--as-white); }
/* caret on items that open a panel; hide the plugin's default arrow.
   CSS-only chevron (no icon font dependency) - a rotated open corner. */
ul.mega-menu.mainMenu > li.has-sublist::after{ display:none !important; }
ul.mega-menu.mainMenu > li.has-sublist > a::after{
  content:""; width:6px; height:6px; margin-top:-3px; flex-shrink:0;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); opacity:.65; transition:var(--as-transition);
}
ul.mega-menu.mainMenu > li.has-sublist:hover > a::after{ transform:rotate(-135deg); margin-top:3px; opacity:1; }
ul.mega-menu.mainMenu > li.has-sublist:hover > a{ background:rgba(255,255,255,.15); }
ul.mega-menu.mainMenu > li.has-sublist:hover > a::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--as-yellow-alt);
}
ul.mega-menu.mainMenu > li.has-sublist > a{ position:relative; }
/* utility links (no panel) sit lighter */
ul.mega-menu.mainMenu > li:not(.has-sublist) > a{ font-weight:600; color:rgba(255,255,255,.82); }

/* ---- the panel (a top-level item's sublist-wrap) ------------------- */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:1022;
  background:var(--as-white);
  border-top:3px solid var(--as-yellow-alt); border-bottom:1px solid var(--as-border);
  box-shadow:0 20px 44px rgba(6,18,33,.26);
  margin:0; min-width:0; transform:none;
}
ul.mega-menu.mainMenu > li.has-sublist:hover > .sublist-wrap,
ul.mega-menu.mainMenu > li.has-sublist:focus-within > .sublist-wrap,
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap.active{ display:block; }

/* the columns row */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 30px;
  max-width:var(--as-container); margin:0 auto; padding:20px 22px 18px; list-style:none;
}
/* each column (has-sublist only, so the featured promo card is excluded) */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist{
  position:static; flex:0 1 auto; min-width:165px; max-width:225px;
}
/* column title = the depth-1 item's link */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > a{
  display:block; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  color:var(--as-blue); margin:0 0 8px; padding-bottom:6px;
  border-bottom:1px solid var(--as-border); text-decoration:none;
}
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > a:hover{ color:var(--as-blue-dark); }

/* ---- flatten the inner flyout into a static link list ------------- */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap{
  display:block !important; position:static !important;
  background:transparent; box-shadow:none; border:0; margin:0; padding:0;
  min-width:0; width:auto; transform:none;
}
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist{
  display:block; margin:0; padding:0; list-style:none;
}
/* link rows */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li{
  position:static;
}
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li > a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:4px 0; font-size:15px; line-height:1.5; color:var(--as-text-grey);
  text-decoration:none; transition:var(--as-transition); background:none;
}
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li > a > span{ color:inherit; }
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li > a::after{
  content:"\2192";                 /* rightwards arrow - renders in any font, no FA dependency */
  font-size:14px; line-height:1; opacity:0; flex-shrink:0; transition:var(--as-transition);
}
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li > a:hover{
  color:var(--as-blue); transform:translateX(3px); background:none;
}
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li > a:hover::after{ opacity:.45; }

/* ---- featured promo card (appears at the end of a panel's row) -----
   margin-left:auto right-aligns it; margin-right insets it clear of the
   panel frame; flex-start keeps it a compact card, not a full-height slab. */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.feat-card{
  flex:0 0 236px; max-width:236px; min-width:236px;
  margin-left:auto; margin-right:12px; align-self:flex-start;
}
ul.mega-menu.mainMenu li.feat-card .feat-link{
  display:flex; flex-direction:column; gap:8px; height:100%;
  background:var(--as-grey-light); border:1px solid var(--as-border); border-radius:var(--as-radius);
  padding:14px; text-decoration:none; transition:var(--as-transition);
}
ul.mega-menu.mainMenu li.feat-card .feat-link:hover{ border-color:var(--as-yellow-alt); box-shadow:0 6px 18px rgba(6,18,33,.12); }
ul.mega-menu.mainMenu li.feat-card .feat-img{
  display:flex; align-items:center; justify-content:center; height:118px;
  background:var(--as-white); border:1px solid var(--as-border); border-radius:var(--as-radius);
}
ul.mega-menu.mainMenu li.feat-card .feat-img img{ max-width:100%; max-height:104px; width:auto; height:auto; object-fit:contain; }
ul.mega-menu.mainMenu li.feat-card .feat-title{ font-size:14px; font-weight:800; color:var(--as-blue); line-height:1.25; }
ul.mega-menu.mainMenu li.feat-card .feat-text{ font-size:13px; line-height:1.45; color:var(--as-text-grey); }
ul.mega-menu.mainMenu li.feat-card .feat-cta{
  margin-top:auto; align-self:flex-start;
  background:var(--as-yellow-alt); color:var(--as-blue);
  font-size:13px; font-weight:800; line-height:1; padding:8px 14px; border-radius:var(--as-radius);
}
ul.mega-menu.mainMenu li.feat-card .feat-link:hover .feat-cta{ background:var(--as-yellow); }

/* ---- "Shop by brand" strip (Shop panel only, full-width under columns) - */
ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > .mega-brands{
  background:var(--as-grey-light); border-top:1px solid var(--as-border); padding:14px 22px;
}
.mega-brands-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  max-width:var(--as-container); margin:0 auto;
}
.mega-brands-label{
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  color:var(--as-blue); margin-right:4px;
}
.mega-brands a{
  font-size:14px; font-weight:600; color:var(--as-text-grey); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent; transition:var(--as-transition);
}
.mega-brands a:hover, .mega-brands a:focus-visible{ color:var(--as-blue); border-bottom-color:var(--as-yellow-alt); }
.mega-brands-all{ margin-left:auto; color:var(--as-blue) !important; font-weight:700 !important; }

/* ---- plugin helpers + theme collisions (all widths) ----------------
   The plugin emits a div.plus-button after each parent link and a
   li.back-button at the top of every sublist for the theme's slide-in
   mobile menu; our accordion replaces both. The Voyage theme also adds an
   icon-font arrow to nested parent links (.sublist .with-subcategories:after)
   which would land on our column titles. */
ul.mega-menu.mainMenu .plus-button,
ul.mega-menu.mainMenu li.back-button{ display:none !important; }
ul.mega-menu.mainMenu .sublist a.with-subcategories::after{ content:none; }

/* ---- store integration (desktop) ------------------------------------
   Span the panel across the full header bar, not just the menu's width.
   Voyage's .header-menu is position:static, so make it the positioning
   context - except in the theme's sticky mode (.stickyDesktop), where it
   is already position:fixed and must stay that way. */
@media (min-width:1261px){
  .header-menu.nav-panel:not(.stickyDesktop){ position:relative; }
  .header-menu.nav-panel ul.mega-menu.mainMenu{ position:static; }
}

/* ---- responsive: the SAME menu becomes a mobile tap-accordion drawer -
   1260px = the Voyage theme's own mobile breakpoint (it swaps to its
   off-canvas .header-menu.nav-panel there). Desktop (>1260px) is the mega
   bar above. At 1260px and below the bar collapses to
   a drawer: hamburger [data-menu-toggle] sets .is-open (menu.js); tapping a
   top-level parent expands its panel (.is-open on the <li>, one at a time).
   Featured cards + brand strip are desktop-only (matches the approved comp). */
@media (max-width:1260px){
  ul.mega-menu.mainMenu{
    display:block; max-width:none; margin:0; background:var(--as-white);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  ul.mega-menu.mainMenu.is-open{ max-height:85vh; overflow-y:auto; }

  ul.mega-menu.mainMenu > li{ display:block; position:static; border-top:1px solid var(--as-border); }
  ul.mega-menu.mainMenu > li:first-child{ border-top:0; }

  /* top-level row */
  ul.mega-menu.mainMenu > li > a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    height:auto; padding:14px 20px; white-space:normal; background:none;
    color:var(--as-text-dark); font-size:15px; font-weight:700;
  }
  ul.mega-menu.mainMenu > li:not(.has-sublist) > a{ color:var(--as-text-dark); font-weight:700; }
  ul.mega-menu.mainMenu > li > a:active{ background:var(--as-grey-light); }
  ul.mega-menu.mainMenu > li.has-sublist:hover > a{ background:none; }
  ul.mega-menu.mainMenu > li.has-sublist:hover > a::before{ content:none; }  /* kill desktop hover underline */

  /* caret: blue, points down; rotates up when open */
  ul.mega-menu.mainMenu > li.has-sublist > a::after{
    width:8px; height:8px; margin:0; border-color:var(--as-blue); opacity:1;
  }
  ul.mega-menu.mainMenu > li.has-sublist.is-open > a{ color:var(--as-blue); background:var(--as-grey-light); }
  ul.mega-menu.mainMenu > li.has-sublist.is-open > a::after{ transform:rotate(-135deg); margin-top:4px; }

  /* panel: force display:block (desktop base sets display:none) then gate
     visibility with max-height, so it collapses/expands smoothly */
  ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap{
    display:block; position:static; box-shadow:none; border:0; background:var(--as-grey-light);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  ul.mega-menu.mainMenu > li.has-sublist.is-open > .sublist-wrap{ max-height:1600px; }

  /* columns stack vertically */
  ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist{ display:block; padding:2px 20px 14px; }
  ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist{
    max-width:none; min-width:0; margin-bottom:2px;
  }
  /* column title = group header (13px = the never-below-13px floor) */
  ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > a{
    margin:12px 0 4px; padding-bottom:4px; font-size:13px;
  }
  /* link rows: comfortable tap targets, no hover arrow */
  ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li > a{
    padding:9px 0; font-size:15px;
  }
  ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > ul.sublist > li.has-sublist > .sublist-wrap > ul.sublist > li > a::after{ display:none; }

  /* desktop-only promos hidden on mobile */
  ul.mega-menu.mainMenu .feat-card,
  ul.mega-menu.mainMenu > li.has-sublist > .sublist-wrap > .mega-brands{ display:none !important; }

  /* On the store the theme's off-canvas panel (.header-menu.nav-panel,
     opened by its own Menu button) IS the drawer: show this menu fully
     expanded inside it and hide the theme's separate mobile menus.
     .header-menu.nav-panel specificity beats the theme's
     `ul.mega-menu.mainMenu{display:none}` at this breakpoint. */
  .header-menu.nav-panel ul.mega-menu.mainMenu{ display:block; max-height:none; overflow:visible; }
  .header-menu.nav-panel ul.mega-menu-responsive.mainMenu,
  .header-menu.nav-panel ul.mega-menu.MobMenu,
  .header-menu.nav-panel ul.mega-menu-responsive.MobMenu,
  .header-menu.nav-panel .menu-title{ display:none !important; }
  /* undo the theme's panel list styling (every li a padded flex row,
     parent links narrowed to make room for the hidden plus-button) */
  .header-menu.nav-panel ul.mega-menu.mainMenu li{ display:block; padding:0; }
  .header-menu.nav-panel ul.mega-menu.mainMenu li > a{ width:auto; }
  .header-menu.nav-panel{ overflow-y:auto; }
}
@media (prefers-reduced-motion:reduce){ ul.mega-menu.mainMenu, ul.mega-menu.mainMenu *{ transition-duration:.01ms !important; } }