/**
 * Motorsport — Rocket Advanced Menu overrides.
 * Base styles: module `views/css/menu.css` (+ menu-drawer.css).
 * Edit only this file in the child theme.
 */
@import url('../../../../../../modules/rocketadvancedmenu/views/css/menu.css');

/* ==========================================================================
   Base styles
   ========================================================================== */

.c-mm__list {
  padding: 0;
}

.c-mm__link {
  font-weight: var(--rckt-font-weight-bold);
  text-transform: none;
  padding-block: .125rem;
}

.c-mm__link:hover {
  text-decoration: none;
}

.c-mm__list>.c-mm__link:first-child,
.c-mm__link.heading {
  font-family: var(--rckt-font-family-heading);
  font-weight: var(--rckt-heading-font-weight);
  font-size: var(--rckt-font-size-sm);
  font-style: var(--rckt-heading-font-style);
  text-transform: var(--rckt-heading-text-transform);
  color: var(--rckt-primary);
  margin-bottom: var(--spacing-1);
}

.c-mainmenu__link {
  gap: var(--spacing-1);
}

.c-mm__img {
  width: 100%;
  height: 100%;
  max-height: 350px;
}

.c-mainmenu__label {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.c-mm__submenu {
  max-height: inherit;
  padding: 2rem;
}

/* ==========================================================================
   Header slot (.c-mainmenu__slot)
   ========================================================================== */

.c-mm__items {
  gap: 0;
}

/* ==========================================================================
   Desktop (min-width: 992px)
   ========================================================================== */

@media (min-width: 992px) {
  .c-mainmenu__link {
    max-width: 150px;
  }

  .c-mm__submenu .c-mm__cols {
    padding: 0;
    background: none;
    gap: var(--spacing-2);
  }

  .c-mm__items {
    column-gap: var(--menu-nav-gap);
  }

  .c-mainmenu__slot .c-mm__items {
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    list-style: none;
  }

  /* Let labels wrap; collapse inherited nowrap so the UL row stays compact */
  .c-mainmenu__slot .c-mm__nav-item {
    position: static;
    flex-shrink: 1;
    min-width: 0;
    white-space: normal;
  }

  .c-mainmenu__slot .c-mainmenu__label {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .c-mainmenu__slot .c-mainmenu__link {
    min-width: 0;
    text-align: center;
    font-size: var(--rckt-font-size-sm);
    padding-block: var(--spacing-3);
    color: var(--rckt-body-color);
    text-decoration: none;
    transition: .2s ease;
  }

  .c-mainmenu__slot .c-mainmenu__link:hover,
  .c-mainmenu__slot .c-mainmenu__link:focus-visible {
    color: var(--rckt-primary);
    text-decoration: none;
    font-weight: var(--rckt-font-weight-bold);
  }

  .c-mainmenu__slot .c-mainmenu__link:focus-visible {
    border-radius: var(--rckt-border-radius);
    outline: .125rem solid var(--rckt-link-color);
    outline-offset: .125rem;
  }

  .c-mainmenu__slot .c-mainmenu__link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    pointer-events: none;
    content: "";
    background: var(--rckt-primary);
    border-radius: 9999px 9999px 0 0;
    opacity: 0;
    transition: opacity .18s ease;
  }

  .c-mainmenu__slot .c-mainmenu__item:hover .c-mainmenu__link::after,
  .c-mainmenu__slot .c-mainmenu__item:focus-within .c-mainmenu__link::after,
  .c-mainmenu__slot .c-mainmenu__item.is-item-active .c-mainmenu__link::after {
    opacity: 1;
  }

  /* Megamenu panel: same width as .o-grid--content */
  .c-header-bottom .o-grid--content {
    position: relative;
  }

  .c-header-bottom .o-grid--content,
  .c-header-bottom__row,
  #_desktop_mainmenu,
  #_desktop_mainmenu .c-mainmenu {
    overflow: visible;
  }

  #_desktop_mainmenu .c-mm__submenu {
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(-0.5rem);
    border-radius: 0 0 var(--rckt-border-radius) var(--rckt-border-radius);
  }

  #_desktop_mainmenu .c-mm__submenu>.c-mm__cols.--layout-1-3 {
    grid-template-columns: 1fr 5fr;
    gap: var(--spacing-4);
  }

  /* Invisible bridge so the pointer can cross the gap between nav item and panel */
  #_desktop_mainmenu .c-mm__submenu::before {
    position: absolute;
    top: -.5rem;
    right: 0;
    left: 0;
    height: .5rem;
    content: "";
  }

  #_desktop_mainmenu .js-has-submenu:focus-within>.c-mm__submenu,
  #_desktop_mainmenu .c-mm__submenu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .c-mm__trigger-chevron {
    display: none;
  }
}

/* ==========================================================================
   Mobile and tablet (max-width: 991.98px)
   ========================================================================== */

@media (max-width: 991.98px) {
  .c-mainmenu {
    padding-block: var(--spacing-2);
  }

  .c-mainmenu .c-mainmenu__list {
    flex-direction: column;
    align-items: stretch;
    list-style: none;
  }

  .c-mainmenu__link {
    padding: var(--spacing-1) 20px;
    font-size: var(--rckt-font-size-base);
    text-decoration: none;
    width: 100%;
  }

  .c-mainmenu__label {
    max-width: inherit;
  }

  .c-mainmenu__offcanvas .offcanvas-header {
    width: 100%;
    height: 60px;
    min-height: 60px;
    border-bottom: var(--rckt-offcanvas-border-width, var(--rckt-border-width)) solid var(--rckt-offcanvas-border-color, var(--rckt-border-color));
  }

  .c-mainmenu__offcanvas-logo {
    flex-shrink: 0;
  }

  .c-mainmenu__offcanvas-logo img {
    width: auto;
    height: 32px;
    max-height: 40px;
  }

  .c-mainmenu__offcanvas {
    display: flex;
    flex-direction: column;
  }

  .c-mainmenu__offcanvas-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .c-mainmenu__offcanvas .c-mainmenu__slot {
    flex: 1 1 auto;
    min-height: 0;
  }

  .c-mainmenu__offcanvas-footer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-top: var(--rckt-offcanvas-border-width, var(--rckt-border-width)) solid var(--rckt-offcanvas-border-color, var(--rckt-border-color));
    padding-block: var(--spacing-2);
  }

  .c-mainmenu__offcanvas-footer-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 1rem);
    width: 100%;
    padding: var(--spacing-1) 20px;
    font-size: var(--rckt-font-size-base);
    color: var(--rckt-black);
    text-decoration: none;
  }

  .c-mainmenu__offcanvas-footer-link:hover,
  .c-mainmenu__offcanvas-footer-link:focus-visible {
    color: var(--rckt-primary);
    text-decoration: none;
  }

  .c-mainmenu__offcanvas-footer-link .c-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  .c-mainmenu__offcanvas-footer-link .c-icon svg {
    width: 32px;
    height: 32px;
  }

  .c-mainmenu__offcanvas-footer-link .c-icon svg path {
    fill: var(--rckt-primary);
  }

  .c-mainmenu__offcanvas .c-mm__submenu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    right: auto;
    width: 100%;
    min-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--rckt-body-bg, #fff);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: left .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 10;
  }

  .c-mainmenu__offcanvas .c-mm__submenu.is-active {
    left: 0;
    height: inherit;
    overflow: auto;
  }

  .c-mainmenu__offcanvas .js-mm-trigger {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .c-mainmenu__offcanvas .c-mm__trigger-chevron {
    flex-shrink: 0;
  }

  .c-mm__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .c-mm__submenu .c-mm__cols {
    padding: 0;
    gap: 0;
  }

  .c-mm__link {
    padding-inline: var(--spacing-2);
  }
}

/* ==========================================================================
   Small mobile (max-width: 767.98px)
   ========================================================================== */

@media (max-width: 767.98px) {
  .c-mainmenu__label {
    max-width: inherit;
  }

  .c-mm__nav-item:first-child .c-mainmenu__label {
    color: var(--rckt-primary);
  }
}