/**
 * @file
 * Top navigation bar — visual styling.
 *
 * Geometry (flex arrangement of left/right regions) lives in css/layout.css.
 * This file handles the bar's skin only: background, text color, font.
 */
@layer components {
  .top-nav {
    text-transform: uppercase;
    background-color: var(--upei-red);
    padding: var(--size-2) 0;
    ul.menu {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: white;
      font-family: var(--font-sans);
      li {
        border-right: 1px solid black;
        padding: 0 var(--size-2);
        &:last-child {
          border-right: 0;
        }
      }
      a {
        color: white;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a.is-active {
        color: var(--upei-yellow);
      }
    }
  }
}