/* MotorHub primary nav — distinct strip (not body text) */

.nav-below-header .main-navigation {
  background: color-mix(in srgb, var(--mh-surface, #f3f4f6) 88%, transparent);
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.main-navigation .main-nav > ul {
  gap: 0.1rem;
}

/* Top-level links: caps + tracking so they read as chrome, not prose */
.main-navigation .main-nav > ul > li > a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.88;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.main-navigation .main-nav > ul > .mh-nav-more > a {
  text-transform: uppercase !important;
}

.main-navigation .main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  width: 0;
  height: 2px;
  background: var(--mh-accent, var(--accent, #0b57d0));
  transform: translateX(-50%);
  transition: width 0.22s ease;
  pointer-events: none;
}

.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li:focus-within > a,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
  color: var(--mh-link, var(--accent, #0b57d0));
  opacity: 1;
}

.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li:focus-within > a::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
  width: 42%;
}

/* Submenus stay sentence case for readability */
.main-navigation .main-nav ul ul a {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 1;
}

.main-navigation .main-nav ul ul a::after {
  display: none;
}

.main-navigation .main-nav ul ul a:hover,
.main-navigation .main-nav ul ul a:focus-visible {
  color: var(--mh-link, var(--accent, #0b57d0));
}

.main-navigation .main-nav ul ul li.mh-nav-comparisons > a {
  font-weight: 650;
}

@media (min-width: 769px) {
  .main-navigation .main-nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  .main-navigation .main-nav > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }

  .main-navigation .main-nav > ul > .mh-nav-more > ul {
    width: max-content;
    min-width: 14rem;
    white-space: nowrap;
  }

  .main-navigation .main-nav > ul > .mh-nav-cat--maintenance-diy > ul {
    min-width: 12rem;
  }
}

@media (max-width: 768px) {
  .main-navigation .main-nav > ul > li > a {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }

  .main-navigation .main-nav > ul > li > a::after {
    display: none;
  }

  .main-navigation .main-nav ul li.mh-nav-comparisons > a {
    color: var(--mh-link, var(--accent, #0b57d0));
    opacity: 1;
  }

  .main-navigation .main-nav > ul > .menu-item-push-right,
  .main-navigation .main-nav > ul > .mh-nav-comparisons,
  .main-navigation .main-nav > ul > .mh-nav-more {
    margin-left: 0 !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a .dropdown-menu-toggle {
    margin-left: auto;
    padding-left: 0.75rem;
  }
}

html[data-mh-theme="dark"] .nav-below-header .main-navigation {
  background: color-mix(in srgb, var(--mh-surface, #1e1e1e) 92%, #000);
  border-top-color: color-mix(in srgb, #fff 10%, transparent);
  border-bottom-color: color-mix(in srgb, #fff 10%, transparent);
}

html[data-mh-theme="light"] .nav-below-header .main-navigation {
  background: #f4f6f8;
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation .main-nav > ul > li > a,
  .main-navigation .main-nav > ul > li > a::after {
    transition: none;
  }
}