/* Website V187 — featured ALIEHS Running navigation on mobile and desktop. */

:root {
  --rm-aliehs-nav-graphite: #1d2024;
  --rm-aliehs-nav-graphite-raised: #282c31;
  --rm-aliehs-nav-line: rgba(245, 245, 242, 0.22);
  --rm-aliehs-nav-copy: #f5f5f2;
  --rm-aliehs-nav-muted: #b9bec3;
  --rm-aliehs-nav-volt: #d7ff3f;
  --rm-aliehs-nav-holographic: linear-gradient(
    122deg,
    #f3a7b7 0%,
    #f0c994 22%,
    #a9d8d4 44%,
    #aebfdf 66%,
    #e8b4d3 84%,
    #d7ff3f 100%
  );
}

/* Mobile: a proper featured brand destination, separate from the utility links. */
#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card {
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(72px, 94px) minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  margin: 10px 0 18px;
  padding: 14px 14px 14px 16px;
  overflow: hidden;
  border: 1px solid var(--rm-aliehs-nav-line) !important;
  border-radius: 10px;
  background: var(--rm-aliehs-nav-graphite) !important;
  box-shadow: 0 12px 28px rgba(9, 10, 12, 0.2);
  color: var(--rm-aliehs-nav-copy) !important;
  text-decoration: none;
}

#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rm-aliehs-nav-holographic);
}

#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 16px 0;
  height: 1px;
  background: var(--rm-aliehs-nav-holographic);
  opacity: 0.72;
}

.rm-aliehs-nav-logo {
  display: grid;
  min-width: 0;
  place-items: center;
}

.rm-aliehs-nav-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.rm-aliehs-nav-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: var(--rm-aliehs-nav-copy);
  font-family: var(--rm-brand-body-font, var(--font-brand));
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.rm-aliehs-nav-copy strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.rm-aliehs-nav-copy > span {
  color: var(--rm-aliehs-nav-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.rm-aliehs-nav-chevron {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--rm-aliehs-nav-copy);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease, color 180ms ease;
}

#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card:hover,
#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card:focus-visible,
#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card.is-aliehs-context {
  border-color: rgba(215, 255, 63, 0.52) !important;
  background: var(--rm-aliehs-nav-graphite-raised) !important;
  color: var(--rm-aliehs-nav-volt) !important;
}

#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card:hover .rm-aliehs-nav-chevron,
#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card:focus-visible .rm-aliehs-nav-chevron {
  color: var(--rm-aliehs-nav-volt);
  transform: translateX(3px);
}

#menu .rm-menu-pages > a.menu-link.rm-aliehs-brand-card:focus-visible {
  outline: 3px solid var(--rm-aliehs-nav-volt);
  outline-offset: 3px;
}

/* Desktop: the existing Our Brands slot becomes the direct ALIEHS destination. */
@media (min-width: 1024px) {
  :root .top .rm-desktop-page-tabs > a.rm-aliehs-desktop-tab {
    display: grid;
    grid-template-columns: minmax(42px, 58px) auto;
    place-content: center;
    align-items: center;
    gap: clamp(6px, 0.75vw, 12px);
    padding: 6px clamp(8px, 1vw, 16px);
    border-right-color: rgba(245, 245, 242, 0.2) !important;
    background: var(--rm-aliehs-nav-graphite) !important;
    color: var(--rm-aliehs-nav-copy) !important;
  }

  :root .top .rm-desktop-page-tabs > a.rm-aliehs-desktop-tab::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--rm-aliehs-nav-holographic);
    opacity: 0.78;
  }

  :root .top .rm-desktop-page-tabs > a.rm-aliehs-desktop-tab::after {
    height: 3px;
    background: var(--rm-aliehs-nav-holographic) !important;
  }

  .rm-aliehs-desktop-tab .rm-aliehs-nav-logo img {
    max-height: 19px;
  }

  .rm-aliehs-desktop-tab .rm-aliehs-nav-copy {
    gap: 1px;
  }

  .rm-aliehs-desktop-tab .rm-aliehs-nav-copy strong {
    font-size: clamp(9px, 0.72vw, 11px);
    letter-spacing: 0.02em;
  }

  .rm-aliehs-desktop-tab .rm-aliehs-nav-copy > span {
    font-size: clamp(7px, 0.58vw, 9px);
    letter-spacing: 0.2em;
  }

  :root .top .rm-desktop-page-tabs > a.rm-aliehs-desktop-tab:hover,
  :root .top .rm-desktop-page-tabs > a.rm-aliehs-desktop-tab:focus-visible,
  :root .top .rm-desktop-page-tabs > a.rm-aliehs-desktop-tab.is-aliehs-context {
    background: var(--rm-aliehs-nav-graphite-raised) !important;
    color: var(--rm-aliehs-nav-volt) !important;
    letter-spacing: 0.055em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rm-aliehs-nav-chevron {
    transition: none;
  }
}