/* ---------- Menu Navigation Modernization ---------- */

#headernav {
   list-style-type: none;
   float: right;
   margin: 20px 10px 0 0;
   display: flex;
   align-items: center;
   gap: var(--space-xs);
   clear: right;
}

#headernav li {
   display: block;
   float: left;
   margin: 0;
   padding: 0;
   list-style: none;
}

#headernav a {
   text-decoration: none;
   height: 36px;
   display: inline-flex;
   align-items: center;
   line-height: 36px;
   color: var(--color-text-secondary);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   margin: 0;
   padding: 0 var(--space-md);
   float: left;
   border-radius: var(--radius-md);
   transition: all var(--transition-fast);
}

#headernav a:hover {
   text-decoration: none;
   color: var(--color-primary-hover);
   background: var(--color-primary-glow);
}

#headernav span {
   display: block;
   margin: 0;
   padding: 0;
   float: left;
}

/* Clear legacy background positions */
#headernav li.current,
#headernav li.current span,
#headernav li.current span a,
#headernav li:hover,
#headernav li:hover a,
#headernav li:hover span {
   background: none;
}

/* Active current tab styling */
#headernav li.current a {
   color: var(--color-primary);
   background: var(--color-primary-glow);
   box-shadow: inset 0 -2px 0 var(--color-primary);
   border-radius: var(--radius-md);
}

#headernav li.current a:hover {
   color: var(--color-primary-hover);
}

#header {
   height: 85px;
   position: relative;
}