/* =====================================================================
   menu.css — WE Megamenu (desktop) + sidr (mobile off-canvas)

   Everything the desktop menu needs now lives here, including the
   structural rules that used to come from the theme's we-megamenu.css.
   Once this file is live you can delete we-megamenu.css and the SCSS
   partial that compiles to it.

   Sections
   1. Variables
   2. Block wrapper
   3. Structure (was we-megamenu.css)
   4. Top-level items (type, colours, states, arrow)
   5. Submenu (position, size, open/close)
   6. Submenu items (colours, states)
   7. Misc
   8. Responsive
   9. Sidebar (sidr)
===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIABLES
--------------------------------------------------------------------- */
:root {
  --menu-anim-duration: .3s;
  --menu-anim-ease: cubic-bezier(.4, 0, .2, 1);
  --menu-close-delay: .15s;   /* grace period before a submenu closes */
  --menu-item-h: 40px;        /* top-level button height */
}


/* ---------------------------------------------------------------------
   2. BLOCK WRAPPER
--------------------------------------------------------------------- */
.block--we-megamenu-block\:marketplace-menu {
  position: relative;
  display: block;
  width: 90%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-content: center;
}

.block--we-megamenu-block\:marketplace-menu .navbar {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.navbar-we-mega-menu.navbar .container,
.navbar-we-mega-menu.navbar .container-fluid {
  padding: 0;
  position: static;
  width: auto;
}


/* ---------------------------------------------------------------------
   3. STRUCTURE
--------------------------------------------------------------------- */
.we-mega-menu-ul {
  display: flex;
  align-items: flex-start;   /* li height == button height, so the submenu sits flush underneath */
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 0;
}

/* Every li (all levels). Also neutralises Bootstrap's .dropdown-menu look,
   because WE Megamenu puts that class on the li itself. */
.we-mega-menu-ul .we-mega-menu-li {
  display: block;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.we-mega-menu-ul .dropdown-menu {
  --bs-dropdown-min-width: auto;
  margin-top: 0;
}

.we-mega-menu-ul .we-mega-menu-li > a i,
.we-mega-menu-ul .we-mega-menu-li > span i {
  margin-right: 4px;
}


/* ---------------------------------------------------------------------
   4. TOP-LEVEL ITEMS
--------------------------------------------------------------------- */

/* Typography + base colours, shared by every level.
   (!important kept for now: try removing it once we-megamenu.css is gone.) */
.we-mega-menu-ul .we-mega-menu-li > a,
.we-mega-menu-ul .we-mega-menu-li > span {
  font-family: var(--font-family-sans-serif) !important;
  font-size: .9rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--pass-blue) !important;
  background-color: transparent;
  border-color: transparent;
}

/* Top-level button: block-level flex, so the li is exactly as tall as the
   button (no inline baseline gap underneath). */
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li > a,
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;                       /* text <-> arrow */
  height: var(--menu-item-h);
  padding: 0 10px;
  background-color: transparent !important;
  transition: color var(--menu-anim-duration) ease-in-out,
              background-color var(--menu-anim-duration) ease-in-out;
}

/* Hover — also stays lit while the pointer is inside its submenu */
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li:hover > a,
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li:hover > span,
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li > a:focus-visible {
  background-color: var(--pass-blue-light) !important;
  border-color: var(--pass-blue-light) !important;
  color: var(--white) !important;
}

/* Active page / pressed (placed after hover so it wins when both apply) */
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li.active > a,
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li.active-trail > a,
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li > a.is-active,
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li > a:active {
  background-color: var(--pass-blue) !important;
  border-color: var(--pass-blue) !important;
  color: var(--white) !important;
}

/* Dropdown arrow: follows the text colour, so hover/active/stuck all just work */
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li[data-submenu="1"] > a::after,
.navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li[data-submenu="1"] > span::after {
  content: "";
  width: 0;
  height: 0;
  margin: 0;
  border-top: 4px solid currentColor !important;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}


/* ---------------------------------------------------------------------
   5. SUBMENU — position, size, open/close
--------------------------------------------------------------------- */

/* All levels */
.we-mega-menu-submenu {
  position: absolute;
  z-index: 99;
  box-sizing: border-box;
  width: max-content !important;   /* fit longest item; beats inline widths from the module */
  min-width: 0 !important;
  max-width: none !important;
  margin: 0;
  padding: 0 !important;
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
}

.we-mega-menu-submenu ul {
  margin: 0 !important;
  padding: 0;
  list-style: none;
  border-top: 0 !important;
}

.we-mega-menu-submenu ul {
/* margin: 20px 0 0 0; */
/* border-top: 3px solid var(--lp-orange); */
}

.we-mega-menu-ul .we-mega-menu-li.dropdown-menu:hover > .we-mega-menu-submenu,
.we-mega-menu-ul .we-mega-menu-li.dropdown-menu:focus-within > .we-mega-menu-submenu {
  opacity: 1;
  visibility: visible;
}

/* Alignment set by WE Megamenu on the li */
.navbar-we-mega-menu.navbar .left > .we-mega-menu-submenu   { left: 0; }
.navbar-we-mega-menu.navbar .center > .we-mega-menu-submenu { left: 50%; transform: translateX(-50%); }
.navbar-we-mega-menu.navbar .right > .we-mega-menu-submenu  { right: 0; }

/* Nested (flyout) submenus */
.we-mega-menu-submenu li.we-mega-menu-li .we-mega-menu-submenu {
  top: 0;
  left: 100%;
  margin: 0;
}

/* First-level submenu: flush under the button (no margin = no dead zone for the
   pointer), animated open/close. `translate` is used instead of `transform`
   so it can't clash with the centring transform above. */
.we-mega-menu-ul > li.we-mega-menu-li > .we-mega-menu-submenu {
  top: 100%;
  display: block !important;       /* override WE Megamenu inline logic */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition:
    max-height var(--menu-anim-duration) var(--menu-anim-ease) var(--menu-close-delay),
    opacity    var(--menu-anim-duration) var(--menu-anim-ease) var(--menu-close-delay),
    translate  var(--menu-anim-duration) var(--menu-anim-ease) var(--menu-close-delay),
    visibility 0s linear calc(var(--menu-anim-duration) + var(--menu-close-delay));
}

.we-mega-menu-ul > li.we-mega-menu-li.dropdown-menu:hover > .we-mega-menu-submenu,
.we-mega-menu-ul > li.we-mega-menu-li.dropdown-menu:focus-within > .we-mega-menu-submenu {
  max-height: 500px;               /* larger than any submenu */
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;            /* open immediately, close after the grace period */
}


/* ---------------------------------------------------------------------
   6. SUBMENU ITEMS
--------------------------------------------------------------------- */
.we-mega-menu-submenu li.we-mega-menu-li > a,
.we-mega-menu-submenu li.we-mega-menu-li > span {
  display: block;
  padding: .5rem 1rem;
  white-space: nowrap;
}

.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li > a,
.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li > span {
  color: var(--white) !important;
  background-color: var(--pass-blue-light) !important;
  transition: color var(--menu-anim-duration) ease-in-out,
              background-color var(--menu-anim-duration) ease-in-out;
}

.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li > a:hover,
.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li > span:hover,
.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li > a:focus-visible {
  background-color: var(--pass-blue) !important;
  color: var(--white) !important;
}

.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li > a:active,
.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li.active > a,
.we-mega-menu-ul .we-mega-menu-submenu .we-mega-menu-li.active-trail > a {
  background-color: var(--pass-blue) !important;
  color: var(--white) !important;
}

/* Flyout arrow on items that have their own submenu */
.we-mega-menu-submenu li.we-mega-menu-li[data-submenu="1"] > a,
.we-mega-menu-submenu li.we-mega-menu-li[data-submenu="1"] > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.we-mega-menu-submenu li.we-mega-menu-li[data-submenu="1"] > a::after,
.we-mega-menu-submenu li.we-mega-menu-li[data-submenu="1"] > span::after {
  content: "";
  margin-left: 8px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
}


/* ---------------------------------------------------------------------
   7. MISC
--------------------------------------------------------------------- */
a.we-mega-menu-nolink {
  cursor: s-resize !important;
}

.type-of-block {
  padding: 1rem;
}

.col- {
  width: 100%;
}


/* ---------------------------------------------------------------------
   8. RESPONSIVE
--------------------------------------------------------------------- */

/* NOTE: this widens the buttons on narrower desktops (10px -> 1.2rem).
   Kept as it was; delete the block if that wasn't intended. */
/*@media (max-width: 1200px) {
  .navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li > a,
  .navbar-we-mega-menu.navbar .we-mega-menu-ul > li.we-mega-menu-li > span {
    padding: 0 10px;
  }

  .we-mega-menu-submenu li.we-mega-menu-li > a,
  .we-mega-menu-submenu li.we-mega-menu-li > span {
    padding: 0 10px;
  }
}*/

@media (prefers-reduced-motion: reduce) {
  .we-mega-menu-ul > li.we-mega-menu-li > .we-mega-menu-submenu,
  .we-mega-menu-ul .we-mega-menu-li > a,
  .we-mega-menu-ul .we-mega-menu-li > span {
    transition: none;
  }
}


/* ---------------------------------------------------------------------
   9. SIDEBAR (sidr) — unchanged
--------------------------------------------------------------------- */
.sidr {
  --sidr-border: rgba(144, 164, 174, 0.4);
  --sidr-ease: .3s ease-in-out;

  font-family: var(--font-family-sans-serif);
  background: var(--off-white);
  color: var(--pass-blue);
  box-shadow: none;
}

.sidr ul.menu {
  background: var(--off-white);
}

.sidr ul li,
.sidr ol li {
  color: var(--pass-blue) !important;
}

.sidr .logo img {
  max-width: 50%;
  background: transparent;
  display: block;
  margin: 1rem auto;
}

/* Menu items (top level and submenu) */
.sidr ul.menu a,
.sidr ul.menu .nolink,
.sidr ul.menu span {
  display: block;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sidr-border);
  font-family: var(--font-family-headers-medium);
  color: var(--pass-blue);
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  transition: color var(--sidr-ease), background-color var(--sidr-ease);
}

/* Expandable rows: label + caret button side by side */
.sidr .menu-item--expanded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.sidr .menu-item--expanded > a,
.sidr .menu-item--expanded > .nolink {
  flex: 1 1 0;
}

.sidr .menu-item--expanded > ul.menu {
  flex: 0 0 100%;
}

.sidr ul.menu li.menu-item--expanded ul a,
.sidr ul.menu li.menu-item--expanded ul .nolink {
  padding: 8px 20px 8px 40px;
  border-bottom: 1px solid var(--sidr-border);
  font-family: var(--font-family-headers-medium);
  color: var(--pass-blue);
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  transition: color var(--sidr-ease), background-color var(--sidr-ease);
}

/* Caret button */
.sidr .submenu-toggle {
  flex: 0 0 3rem;
  align-self: stretch;
  min-height: 3rem;
  background-color: transparent;
  border: 0;
  border-left: 1px solid var(--sidr-border);
  border-bottom: 1px solid var(--sidr-border);
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: color var(--sidr-ease), background-color var(--sidr-ease);
}

.sidr .submenu-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--sidr-ease);
}

.sidr .menu-item--expanded.active > .submenu-toggle::before {
  transform: translateY(25%) rotate(-135deg);
}

/* Shared hover / active state: links, nolink labels, submenu items, caret */
.sidr ul.menu li a:hover,
.sidr ul.menu li a.is-active,
.sidr ul.menu li a.active,
.sidr ul.menu li a.active-trail,
.sidr ul.menu li .nolink:hover,
.sidr .submenu-toggle:hover,
.sidr .menu-item--expanded.active > .submenu-toggle,
.sidr .menu-item--active-trail > .submenu-toggle {
  color: var(--pass-blue-dark) !important;
  background-color: var(--white);
}

/* hide system caret */
.sidr ul.menu li.menu-item--expanded > a:before,
.sidr ul.menu li.menu-item--expanded > .nolink:before {
  display: none;
}