/**
 * @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);
    color: white;
    font-family: var(--font-sans);
    ul.menu {
      display: flex;
      flex-wrap: wrap;
      gap: var(--size-3);
      margin: 0;
      padding: 0;
      font-size: 12px;
    }
    a {
      color: white;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    a.is-active {
      color: var(--upei-yellow);
    }
    ul.menu a {
      color: white;
    }
    ul.menu a.is-active {
      color: var(--upei-yellow);
    }
  }
}