/* Solutions dropdown in the top menu, with a Bookkeeping > By industry sub-menu.
   Shared by every page. Uses the page's own CSS variables (--navy, --slate, etc). */

.nav-dd{position:relative;display:flex;align-items:center;}
.nav-dd-row{display:flex;align-items:center;gap:.15rem;}
.nav-dd-btn{
  background:none;border:none;cursor:pointer;color:var(--slate);
  font-size:.7rem;line-height:1;padding:.35rem .3rem;border-radius:6px;
  transition:transform .15s ease,color .15s ease;
}
.nav-dd-btn:hover{color:var(--navy);}
.nav-dd-btn svg{width:10px;height:10px;display:block;}

.nav-dd-menu{
  position:absolute;top:100%;left:-1rem;min-width:250px;
  padding:.7rem 0 .6rem;margin-top:.6rem;
  background:var(--white);border:1px solid var(--page-wash);border-radius:14px;
  box-shadow:0 18px 40px -20px rgba(31,52,120,.45);
  display:none;flex-direction:column;z-index:60;
}
/* invisible bridge so the menu doesn't close while the mouse travels down to it */
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-.8rem;height:.8rem;}

.nav-links .nav-dd-menu a{
  display:block;padding:.5rem 1.25rem;font-size:.9rem;font-weight:500;color:var(--slate);white-space:nowrap;
}
.nav-links .nav-dd-menu a:hover,.nav-links .nav-dd-menu a:focus-visible{color:var(--navy);background:var(--lavender-light);}
.nav-dd-menu .nav-dd-all{border-top:1px solid var(--page-wash);margin-top:.35rem;padding-top:.7rem;font-weight:600;color:var(--navy);}

/* Bookkeeping item with its own fly-out */
.nav-dd-sub{position:relative;display:flex;align-items:center;justify-content:space-between;}
.nav-dd-sub > a{flex:1;}
@media(min-width:861px){
  .nav-dd-sub:hover,.nav-dd-sub:focus-within{background:var(--lavender-light);}
  .nav-links .nav-dd-sub > a:hover{background:none;}
}
.nav-dd-sub > .nav-dd-btn{margin-right:.75rem;}
.nav-dd-sub > .nav-dd-btn svg{transform:rotate(-90deg);}
.nav-dd-submenu{
  position:absolute;top:-.7rem;left:100%;min-width:230px;margin-left:.35rem;
  padding:.7rem 0 .6rem;background:var(--white);border:1px solid var(--page-wash);border-radius:14px;
  box-shadow:0 18px 40px -20px rgba(31,52,120,.45);display:none;flex-direction:column;
}
.nav-dd-submenu::before{content:"";position:absolute;top:0;bottom:0;left:-.6rem;width:.6rem;}
.nav-dd-label{
  padding:.15rem 1.25rem .45rem;font-size:.65rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);opacity:.8;
}

/* Desktop: open on hover or keyboard focus, or when toggled */
@media(min-width:861px){
  .nav-dd:hover > .nav-dd-menu,
  .nav-dd:focus-within > .nav-dd-menu,
  .nav-dd.open > .nav-dd-menu{display:flex;}
  .nav-dd-sub:hover > .nav-dd-submenu,
  .nav-dd-sub:focus-within > .nav-dd-submenu,
  .nav-dd-sub.open > .nav-dd-submenu{display:flex;}
  .nav-dd:hover > .nav-dd-row .nav-dd-btn svg,
  .nav-dd.open > .nav-dd-row .nav-dd-btn svg{transform:rotate(180deg);}
}

/* Mobile: inside the slide-down menu, sections expand in place */
@media(max-width:860px){
  .nav-dd{flex-direction:column;align-items:stretch;border-bottom:1px solid var(--page-wash);}
  .nav-dd-row{justify-content:space-between;}
  .nav-links .nav-dd-row > a{border-bottom:none;flex:1;}
  .nav-dd-btn{font-size:1rem;padding:.6rem .5rem;}
  .nav-dd-btn svg{width:13px;height:13px;}
  .nav-dd-menu,.nav-dd-submenu{
    position:static;box-shadow:none;border:none;border-radius:0;margin:0;min-width:0;
    padding:0 0 .5rem .9rem;background:transparent;
  }
  .nav-dd-menu::before,.nav-dd-submenu::before{display:none;}
  .nav-dd.open > .nav-dd-menu{display:flex;}
  .nav-dd-sub{flex-wrap:wrap;}
  .nav-dd-sub > .nav-dd-btn{margin-right:0;}
  .nav-dd-sub > .nav-dd-btn svg{transform:none;}
  .nav-dd-sub.open > .nav-dd-submenu{display:flex;width:100%;}
  .nav-dd.open > .nav-dd-row .nav-dd-btn svg,
  .nav-dd-sub.open > .nav-dd-btn svg{transform:rotate(180deg);}
  .nav-links .nav-dd-menu a{padding:.6rem 0;font-size:.95rem;border-bottom:none;white-space:normal;}
  .nav-links .nav-dd-menu a:hover{background:none;}
  .nav-dd-label{padding:.4rem 0 .2rem;}
  .nav-dd-menu .nav-dd-all{border-top:none;margin-top:0;padding-top:.6rem;}
}

@media(prefers-reduced-motion:reduce){.nav-dd-btn{transition:none;}}
