/*
  Formaspace Rep Portal — grouped header nav (Direction A).
  Scoped to #fs-rep-nav so it cannot leak into the rest of the theme.
*/
#fs-rep-nav{
  --fs-navy:#19344E;
  --fs-blue:#0081C3;
  --fs-orange:#FF5B00;
  --fs-gray-bg:#F4F6F8;
  --fs-border:#E4E7EA;
  --fs-text-gray:#5F5E5A;

  position:relative;
  background:#FFFFFF;
  font-family:'Montserrat',Arial,Helvetica,sans-serif;
}
#fs-rep-nav *{box-sizing:border-box;}

/*
  The theme now wraps the menu in .container (theme mod main_menu_content_width),
  so the container itself handles width and centering — no width rules needed here.

  .nav-trigger carries 12px of its own padding, which would push the first label
  12px past .container's content edge. The negative margin cancels exactly that,
  landing the label on the content edge while the trigger keeps its click target.
*/
#fs-rep-nav .nav-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width: 721px){
  #fs-rep-nav .nav-row{margin-left:-12px;}
}
#fs-rep-nav .nav-group{position:relative;}

#fs-rep-nav .nav-trigger{
  display:flex;
  align-items:center;
  gap:7px;
  background:none;
  border:none;
  cursor:pointer;
  padding:16px 12px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:var(--fs-text-gray);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.04em;
}
#fs-rep-nav a.nav-trigger:hover{color:var(--fs-navy);}
#fs-rep-nav .nav-trigger:focus-visible,
#fs-rep-nav .dropdown-item:focus-visible{
  outline:2px solid var(--fs-blue);
  outline-offset:-2px;
}
#fs-rep-nav .nav-trigger svg.item-icon{color:var(--fs-text-gray);flex-shrink:0;}
#fs-rep-nav .nav-trigger svg.chev{color:#B4B2A9;flex-shrink:0;transition:transform .15s ease;}
#fs-rep-nav .nav-group.open .nav-trigger{color:var(--fs-navy);}
#fs-rep-nav .nav-group.open .nav-trigger svg.item-icon{color:var(--fs-navy);}
#fs-rep-nav .nav-group.open .nav-trigger svg.chev{transform:rotate(180deg);}

#fs-rep-nav .nav-underline{
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:2px;
  background:var(--fs-orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .15s ease;
}
#fs-rep-nav .nav-group.open .nav-underline{transform:scaleX(1);}

#fs-rep-nav .nav-dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:260px;
  background:#FFFFFF;
  border:1px solid var(--fs-border);
  box-shadow:0 8px 24px rgba(25,52,78,0.12);
  padding:8px;
  z-index:1000;
}
#fs-rep-nav .nav-group.open .nav-dropdown{display:block;}

/*
  Hover-open on pointer devices. The JS also toggles .open on mouseenter so
  aria-expanded stays truthful; these rules make the visual state work even if
  the script is slow or blocked. Touch/coarse pointers keep click-to-open only.
*/
@media (min-width: 721px) and (hover: hover) and (pointer: fine){
  #fs-rep-nav .nav-group:hover > .nav-dropdown{display:block;}
  #fs-rep-nav .nav-group:hover > .nav-trigger{color:var(--fs-navy);}
  #fs-rep-nav .nav-group:hover > .nav-trigger svg.item-icon{color:var(--fs-navy);}
  #fs-rep-nav .nav-group:hover > .nav-trigger svg.chev{transform:rotate(180deg);}
  #fs-rep-nav .nav-group:hover > .nav-underline{transform:scaleX(1);}
}

#fs-rep-nav .dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  color:var(--fs-navy);
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  border-radius:4px;
  white-space:nowrap;
}
#fs-rep-nav .dropdown-item:hover{background:var(--fs-gray-bg);color:var(--fs-navy);}
#fs-rep-nav .dropdown-item svg{color:var(--fs-blue);flex-shrink:0;}

@media (prefers-reduced-motion: reduce){
  #fs-rep-nav .nav-trigger svg.chev,
  #fs-rep-nav .nav-underline{transition:none;}
}

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  #fs-rep-nav .nav-row{flex-direction:column;align-items:stretch;padding:0;}
  #fs-rep-nav .nav-group{border-top:1px solid var(--fs-border);}
  #fs-rep-nav .nav-group:first-child{border-top:none;}
  #fs-rep-nav .nav-trigger{width:100%;justify-content:space-between;padding:14px 16px;}
  #fs-rep-nav .nav-trigger > span{flex:1;text-align:left;}
  #fs-rep-nav .nav-dropdown{
    position:static;
    border:none;
    box-shadow:none;
    padding:0 16px 10px;
    min-width:0;
  }
  #fs-rep-nav .dropdown-item{white-space:normal;}
}