/* Payback overrides for the CHS Mega Menu block (acf/mega-menu), matching
 * paybacknutrition.com: brown links on the white header, a solid brown
 * block for the open item, and a brown dropdown with white links. Loads
 * after the plugin's own block CSS (see functions.php).
 *
 * The .site-header prefix out-specificities the plugin's state rules
 * (.open, desktop sub-menu color) without needing !important. */

/* ======================== TOP LEVEL ITEMS ======================== */

.site-header .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item {
  border-block-end: none;
  border-block-start: 1px solid var(--wp--custom--color--haze);
  color: var(--wp--custom--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  padding: var(--wp--preset--spacing--40);

  @media screen and (min-width: 1200px) {
    border-block-start: none;
    font-weight: 700;
    padding: 0;
  }
}

/* Live site: hover is an underline only, no color change. */
.site-header .main-navigation .menu > li.nav-item:not(.nav-item--button) > .menu-item:hover {
  color: var(--wp--custom--color--primary);
  text-decoration: underline;
}

@media screen and (min-width: 1200px) {
  /* Left-aligned next to the logo, rather than the parent's right alignment. */
  .site-header .main-navigation .menu {
    column-gap: 0;
    justify-content: flex-start;
  }

  .site-header .main-navigation .menu > li.nav-item:not(.nav-item--button) {
    padding: var(--wp--preset--spacing--30);
  }

  /* Never wrap the menu row under the logo. */
  .site-header .main-navigation .menu {
    flex-wrap: nowrap;
  }

  /* Desktop caret after parent labels. The plugin's chevron is mobile-only
     by default; reuse it here instead of adding a separate icon. */
  .site-header .main-navigation .menu > li.nav-item--parent > .menu-item {
    gap: var(--wp--preset--spacing--20);
    justify-content: flex-start;
  }

  .site-header .main-navigation .menu > li.nav-item > .menu-item > .menu-item-chevron {
    display: block;
    height: 7px;
    transform: none;
    transition: transform 0.3s;
    width: 10px;
  }

  .site-header .main-navigation .menu > li.nav-item.open > .menu-item > .menu-item-chevron {
    transform: rotate(180deg);
  }
}

/* ======================== OPEN STATE ======================== */

/* Solid brown block with white text, on mobile and desktop. No accent bar. */
.site-header .main-navigation .menu > li.nav-item.open {
  background-color: var(--wp--custom--color--primary);
}

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

.site-header .main-navigation .menu > li.nav-item.open > .menu-item,
.site-header .main-navigation .menu > li.nav-item.open > .menu-item:hover {
  color: var(--wp--preset--color--white);
  font-weight: 700;
  text-decoration: none;
}

/* ======================== SUB MENU ======================== */

/* Brown panel on desktop; Rose on mobile, as on the live site. */
.site-header .main-navigation .nav-item--parent .sub-menu {
  background-color: var(--wp--custom--color--accent-1);

  @media screen and (min-width: 1200px) {
    background-color: var(--wp--custom--color--primary);
    padding: var(--wp--preset--spacing--30) 0;
    top: 100%;
  }
}

.site-header .main-navigation .sub-menu .menu-item {
  border-block-end: none;
  color: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);

  @media screen and (min-width: 1200px) {
    color: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  }
}

.site-header .main-navigation .sub-menu .menu-item:hover {
  color: var(--wp--preset--color--white);
  text-decoration: underline;
}

/* ======================== BUTTON ITEMS ======================== */

/* "Display as button" items get is-style-secondary from the menu walker,
 * which is white in this theme and would disappear against the white header. Use the
 * Primary button instead: brown, Dark Brown on hover. Shape and type come
 * from theme.json's button element and assets/css/blocks/button.css. */
.site-header .main-navigation li.nav-item--button .wp-block-button__link {
  background-color: var(--wp--custom--color--primary);
  color: var(--wp--preset--color--white);
}

.site-header .main-navigation li.nav-item--button .wp-block-button__link:hover {
  background-color: var(--wp--custom--color--secondary);
  color: var(--wp--preset--color--white);
  text-decoration: none;
}