/* ==========================================================================
   NEW MENU (cleaned + consolidated)
   - hides legacy mega menus
   - boxed dropdown + flyouts
   - top nav active styling (white box, blue text, underline) while open
   - first submenu: icon + red dividers + hover/hold blue
   - second submenu: always blue, bold on hover
   ========================================================================== */

:root{
  --brand-blue:#0077FF;
  --brand-red:#b01b1b;
  --submenu-radius:16px;
  --submenu-minw:280px;

  /* feed your PNG path here */
  --first-sub-icon:url("assets/Screenshot 2026-02-12 140446.png");
}

/* Hide legacy mega menu DOM */
.wrapMenu .megamenuArea{display:none !important;}

/* Base nav reset/safety */
.wrapMenu .resMenu,
.wrapMenu .resMenu ul{margin:0;padding:0;list-style:none;}
.wrapMenu .resMenu > li{position:relative;}
.wrapMenu .resMenu a{text-decoration:none;}

/* ==========================================================================
   Dropdown boxes
   ========================================================================== */
.wrapMenu .resMenu .submenu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:var(--submenu-minw);
  background:#fff;
  border:1px solid var(--brand-blue) !important; /* all boxes */
  border-radius:var(--submenu-radius);
  padding:10px 0;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  z-index:99999;
  text-align:left !important; /* defeat legacy centering */
}

/* First dropdown box (directly under top nav item): square top corners */
.wrapMenu .resMenu > li.has-submenu > .submenu{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}

/* Flyout (2nd level) */
.wrapMenu .resMenu .submenu .submenu{
  top:-10px;
  left:calc(100% + 10px);
  border-radius:var(--submenu-radius) !important;
}

/* Open state from JS */
.wrapMenu .resMenu li.has-submenu.is-open > .submenu{display:block;}

/* Desktop hover fallback */
@media (hover:hover) and (pointer:fine){
  .wrapMenu .resMenu li.has-submenu:hover > .submenu{display:block;}
}

/* ==========================================================================
   Submenu links (shared)
   ========================================================================== */
.wrapMenu .resMenu .submenu li{position:relative;text-align:left !important;}
.wrapMenu .resMenu .submenu a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px;
  width:100% !important;
  margin:0 !important;
  padding:10px 14px;
  font-weight:700;
  white-space:nowrap;
  text-align:left !important;
}

/* ==========================================================================
   Top nav row: hover/active styling (NO radius)
   White box, blue text, underline; holds while dropdown is open
   ========================================================================== */
.wrapMenu .mainMenu .resMenu > li > a{
  position:relative;
  padding:10px 14px;
  border-radius:0 !important; /* requested: no radius on top menu row */
}

@media (hover:hover) and (pointer:fine){
  .wrapMenu .mainMenu .resMenu > li:hover > a,
  .wrapMenu .mainMenu .resMenu > li.has-submenu.is-open > a{
    background:#fff !important;
    color:var(--brand-blue) !important;
  }

  @media (hover:hover) and (pointer:fine){
  .wrapMenu .mainMenu .resMenu > li:hover > a,
  .wrapMenu .mainMenu .resMenu > li.has-submenu.is-open > a{
    background:#fff !important;
    color:var(--brand-blue) !important;
  }

  /* underline on ::before so ::after can remain the arrow */
  .wrapMenu .mainMenu .resMenu > li:hover > a::before,
  .wrapMenu .mainMenu .resMenu > li.has-submenu.is-open > a::before{
    content:"";
    position:absolute;
    left:12px; right:12px;
    bottom:6px;
    height:2px;
    background:var(--brand-blue);
  }
}

}

/* ==========================================================================
   First submenu (the items inside the FIRST box)
   - add icon in front of each link
   - red divider under each row (90% width, centered)
   - hover/hold blue (when its flyout is open)
   ========================================================================== */

/* Icon before each first-sub item link */
.wrapMenu .resMenu > li.has-submenu > .submenu > li > a::before{
  content:"";
  width:18px;height:18px;
  flex:0 0 18px;
  margin-right:10px;
  background-image:var(--first-sub-icon);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Red divider line under each first-sub row (on LI to avoid pseudo conflicts) */
.wrapMenu .resMenu > li.has-submenu > .submenu > li::after{
  content:"";
  position:absolute;
  left:5%; right:5%;
  bottom:0;
  height:1px;
  background:var(--brand-red);
}
.wrapMenu .resMenu > li.has-submenu > .submenu > li:last-child::after{display:none;}

/* First submenu default text color (tweak if needed) */
.wrapMenu .resMenu > li.has-submenu > .submenu > li > a{
  color:#7a1e1e;
}

/* Hover -> blue; keep blue while flyout is open */
@media (hover:hover) and (pointer:fine){
  .wrapMenu .resMenu > li.has-submenu > .submenu > li:hover > a,
  .wrapMenu .resMenu > li.has-submenu > .submenu > li.has-submenu:hover > a,
  .wrapMenu .resMenu > li.has-submenu > .submenu > li.has-submenu.is-open > a{
    color:var(--brand-blue) !important;
  }
}

/* Keep flyout chevron on right for first-sub items that have children */
.wrapMenu .resMenu .submenu > li.has-submenu > a::after{
  content:"›";
  margin-left:auto;
  opacity:.7;
}

/* ==========================================================================
   Second submenu (flyout)
   - always blue
   - bold on hover
   ========================================================================== */
.wrapMenu .resMenu .submenu .submenu a{
  color:var(--brand-blue) !important;
  font-weight:700; /* baseline */
}

@media (hover:hover) and (pointer:fine){
  .wrapMenu .resMenu .submenu .submenu a:hover{
    font-weight:800 !important;
    color:var(--brand-blue) !important;
  }
}

/* ==========================================================================
   Mobile/touch behavior
   - keep your tap-to-open JS state (.is-open)
   - render submenus in-flow and indented
   ========================================================================== */
@media (hover:none), (pointer:coarse){
  .wrapMenu .resMenu .submenu{
    position:static;
    box-shadow:none;
    border-radius:12px;
    margin-top:8px;
  }

  .wrapMenu .resMenu li.has-submenu > .submenu{display:none;}
  .wrapMenu .resMenu li.has-submenu.is-open > .submenu{display:block;}

  .wrapMenu .resMenu .submenu .submenu{
    margin-left:14px;
    border-left:2px solid rgba(0,0,0,.08);
    padding-left:10px;
    left:0; top:0;
  }
}

.wrapMenu .mainMenu .resMenu > li.has-submenu > a::after{
  content:"▾" !important;
  font-size:.8em;
  opacity:.7;
  margin-left:6px;
}

/* First dropdown box sits 10px higher */
.wrapMenu .resMenu > li.has-submenu > .submenu{
  top: calc(100% + 0px) !important; /* was +10px */
}

/* --- Prevent top-nav shifting: keep arrow always, underline uses ::before --- */

/* Always reserve space for the arrow (even if legacy CSS messes with it) */
.wrapMenu .mainMenu .resMenu > li.has-submenu > a{
  padding-right: 26px !important; /* reserves room so nothing shifts */
}

/* Top-level down arrow ALWAYS (normal/hover/open) */
.wrapMenu .mainMenu .resMenu > li.has-submenu > a::after{
  content: "▾" !important;
  font-size: .8em;
  opacity: .7;
  margin-left: 6px;
}

/* Underline moved to ::before so it doesn't replace the arrow */
@media (hover:hover) and (pointer:fine){
  .wrapMenu .mainMenu .resMenu > li:hover > a::before,
  .wrapMenu .mainMenu .resMenu > li.has-submenu.is-open > a::before{
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    background: var(--brand-blue);
  }
}