/* "Display as button" nav items (e.g. Rewards, Locations) now render with
 * the real is-style-secondary button classes (see assets/css/blocks/button.css)
 * so no bespoke color/hover overrides are needed here. */

.main-navigation .menu {
  column-gap: 0;
}


/* Top-level nav items are Semibold on the desktop bar (mobile is Regular, with
 * Semibold reserved for the tapped/open state - see the mobile section below).
 * Buttons already get 600 from the button system, so this is scoped off them
 * just to avoid specifying it twice. */
@media screen and (min-width: 1200px) {
  .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item {
    font-weight: 600;
  }
}

/* Desktop nav items (Snacks, About, Careers, Giveaway) get a translucent
 * white pill on hover, matching Figma - text stays white, no underline. */
@media screen and (min-width: 1200px) {

  .main-navigation .menu > li.nav-item {margin-left:1.6rem;}

  .main-navigation .menu > li.nav-item:not(.nav-item--button) {
    border-radius: var(--wp--custom--border-radius--pill);
    padding: 0.8rem 1.6rem;  
    margin-left:0.8rem;
  }

  .main-navigation .menu > li.nav-item:not(.nav-item--button):hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item:hover {
    color: var(--wp--preset--color--white);
    text-decoration: none;
  }

  /* Top-level items with a submenu get a caret after the label (Figma:
     node 2:1430). The base plugin's own chevron is mobile-only (hidden at
     this width), so this is a separate icon just for desktop. Overriding
     justify-content/gap here (instead of space-between) keeps it snug next
     to the text instead of pushed to the pill's far edge. */
  .main-navigation .menu > li.nav-item--parent > .menu-item {
    gap: 0.4rem;
    justify-content: flex-start;
  }

  .main-navigation .menu > li.nav-item--parent > .menu-item::after {
    background-color: currentColor;
    content: "";
    display: inline-block;
    flex-shrink: 0;
    height: 7px;
    mask-image: url("../../images/caret-down.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 12px;
  }
}

/* The "open" (dropdown expanded) state matches hover exactly - same
 * translucent pill, no separate indicator bar or color swap. The
 * .site-header prefix only exists to out-specificity the base plugin's
 * .open rules (colored background + indicator bar), which Cenex doesn't use. */
.site-header .main-navigation .menu > li.nav-item.open,
.site-header .main-navigation .menu > li.nav-item.show {
  background-color: rgba(255, 255, 255, 0.2);
}

.site-header .main-navigation .menu > li.nav-item.open::before {
  content: none;
}

.site-header .main-navigation .menu > li.nav-item.open > .menu-item {
  color: var(--wp--preset--color--white);
  font-weight: 600;
}

/* Submenu panel (Figma: node 2:1888) - black text at desktop instead of the
 * base plugin's cenex-red, no divider after the last item, and semibold on
 * hover. The .site-header prefix out-specificities the base's own desktop
 * color override. */
@media screen and (min-width: 1200px) {
  .site-header .main-navigation .sub-menu .menu-item {
    color: var(--wp--preset--color--black);
  }

  .site-header .main-navigation .nav-item--parent .sub-menu {
    top: calc(100% + 1.4rem);
  }
}

.site-header .main-navigation .sub-menu .menu-item {
  padding: 0.8rem 0;
}

.main-navigation .sub-menu .menu-item:hover {
  font-weight: 600;
}

.main-navigation .sub-menu > li.nav-item:last-child > .menu-item {
  border-block-end: none;
}

/* ======================== MOBILE (WHITE PANEL) ======================== */

/* The mobile nav sits on a white panel (see components/header.css), so the
 * base plugin's white-on-red mobile colors flip to black text. Items are
 * Regular at rest and Semibold when hovered, tapped, or open - the same
 * weight swap the desktop dropdown uses. Scoped below desktop because the
 * plugin's top-level colors aren't re-set at desktop, where the red bar
 * still needs white text. */
@media screen and (max-width: 1199px) {
  .site-header .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item,
  .site-header .main-navigation .sub-menu .menu-item {
    /* The plugin's border token (--wp--custom--color--haze) isn't defined in
       this theme, so its dividers fell back to currentColor. */
    border-block-end-color: var(--wp--preset--color--haze);
    color: var(--wp--preset--color--black);
  }

  .site-header .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item:hover,
  .site-header .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item:focus-visible,
  .site-header .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item:active,
  .site-header .main-navigation .sub-menu .menu-item:hover,
  .site-header .main-navigation .sub-menu .menu-item:focus-visible,
  .site-header .main-navigation .sub-menu .menu-item:active {
    color: var(--wp--preset--color--black);
    font-weight: 600;
    text-decoration: none;
  }

  /* Open parents are marked by weight and the back chevron alone - no
     translucent pill (that's for the red desktop bar). */
  .site-header .main-navigation .menu > li.nav-item.open,
  .site-header .main-navigation .menu li.nav-item.show {
    background-color: transparent;
  }

  .site-header .main-navigation .menu > li.nav-item.open > .menu-item,
  .site-header .main-navigation .menu li.nav-item.show > .menu-item {
    color: var(--wp--preset--color--black);
    font-weight: 600;
  }

  /* Rewards / Locations: the Secondary white pill would vanish on the white
     panel, so these take the Default filled Cenex Blue look (and its hover)
     here instead. */
  .site-header .main-navigation .menu > li.nav-item--button {
    margin-block-start: var(--wp--preset--spacing--30);
    padding-inline: 0;
  }

  .site-header .main-navigation .menu > li.nav-item--button .wp-block-button__link {
    background-color: var(--wp--preset--color--cenex-blue);
    border-color: var(--wp--preset--color--cenex-blue);
    color: var(--wp--preset--color--white);
  }

  .site-header .main-navigation .menu > li.nav-item--button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--dark-blue);
    color: var(--wp--preset--color--dark-blue);
  }
}