/**
 * @file
 * CC Soccer desktop navigation enhancements.
 *
 * On desktop (≥75rem / 1200px), enhances the navigation styling
 * to complement the dark branded header. Top-level nav links get
 * brand-colored hover/active states.
 *
 * On mobile, Olivero's hamburger menu is used unchanged.
 */

/* ============================================
   DESKTOP NAV — TOP-LEVEL LINKS
   ============================================ */

@media (min-width: 75rem) {
  /*
   * Top-level menu links: use brand-colored text and underline.
   * Olivero defaults to var(--color-text-neutral-loud) which is fine,
   * but we strengthen the hover/active states with the brand color.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1 {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9375rem;
  }

  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1:hover {
    color: var(--color-primary);
  }

  /*
   * Hover underline: use brand color for the animated underline.
   * Olivero already animates ::after with scaleX; we just ensure
   * the border-top color uses our brand.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after {
    border-top-color: var(--color-primary);
  }

  /*
   * Active menu item: subtle background highlight.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1.is-active {
    color: var(--color-primary);
  }

  /*
   * Focus ring: use brand color for keyboard navigation.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before {
    border-color: var(--color-primary);
  }

  /* ============================================
     DESKTOP NAV — DROPDOWN SUBMENUS
     ============================================ */

  /*
   * Dropdown top border: brand color accent.
   * Olivero uses --color--primary-50 which should already be updated
   * by the base_primary_color setting, but we reinforce here.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
    border-top-color: var(--color-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  /*
   * Dropdown links: clean styling with brand hover color.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
    color: var(--color-text);
    font-size: 0.875rem;
  }

  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:hover {
    color: var(--color-primary);
  }

  /*
   * Plus/minus toggle buttons: brand color.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
    border-top-color: var(--color-primary);
  }

  /*
   * Chevron arrow on dropdown: brand color.
   */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
    border-right-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }
}

/* ============================================
   MOBILE NAV — BRAND ACCENTS
   ============================================ */

/*
 * On mobile, the Olivero hamburger menu handles layout.
 * We just add brand color accents to the expand/collapse toggles
 * and the submenu left border.
 */
@media (max-width: 74.9375rem) {
  .primary-nav__menu--level-2 {
    border-inline-start-color: var(--color-primary);
  }

  .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
  .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
    border-top-color: var(--color-primary);
  }

  .primary-nav__menu-link:focus {
    outline-color: var(--color-primary);
  }
}