/* Main nav in the Avada Global Header: Title Case links with a sage underline on
   hover and on the current page, and Contact (menu class pine-nav-cta) as a sage button.
   Desktop only; below 1024px Avada's collapsed mobile menu is unchanged.
   Avada sets link color (with !important) and padding from its own variables
   (--awb-color, --awb-active-color, --awb-items-padding-*), so those are set here. */

@media (min-width: 1025px) {
  .fusion-tb-header .awb-menu {
    --pine-nav-sage: #b0cd8a;
    --pine-nav-forest: #004d23;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .fusion-tb-header .awb-menu__main-ul {
    align-items: center;
  }

  .fusion-tb-header .awb-menu__main-li > .awb-menu__main-a {
    position: relative;
    --awb-items-padding-top: 6px;
    --awb-items-padding-bottom: 6px;
    --awb-items-padding-left: 0px;
    --awb-items-padding-right: 0px;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    text-transform: none;
    letter-spacing: 0;
    --awb-color: #fff;
    --awb-active-color: var(--pine-nav-sage);
    transition: color .2s;
  }

  .fusion-tb-header .awb-menu__main-li > .awb-menu__main-a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--pine-nav-sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }

  .fusion-tb-header .awb-menu__main-li > .awb-menu__main-a:hover,
  .fusion-tb-header .awb-menu__main-li > .awb-menu__main-a:focus-visible,
  .fusion-tb-header .awb-menu__main-li.current-menu-item > .awb-menu__main-a,
  .fusion-tb-header .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a {
    --awb-color: var(--pine-nav-sage);
  }

  .fusion-tb-header .awb-menu__main-li > .awb-menu__main-a:hover::after,
  .fusion-tb-header .awb-menu__main-li > .awb-menu__main-a:focus-visible::after,
  .fusion-tb-header .awb-menu__main-li.current-menu-item > .awb-menu__main-a::after,
  .fusion-tb-header .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a::after {
    transform: scaleX(1);
  }

  /* Contact button */
  .fusion-tb-header .awb-menu__main-li.pine-nav-cta > .awb-menu__main-a {
    --awb-items-padding-top: 10px;
    --awb-items-padding-bottom: 10px;
    --awb-items-padding-left: 20px;
    --awb-items-padding-right: 20px;
    border-radius: 4px;
    background: var(--pine-nav-sage);
    --awb-color: var(--pine-nav-forest);
    --awb-active-color: var(--pine-nav-forest);
    font-weight: 600;
    transition: background .2s, color .2s;
  }

  .fusion-tb-header .awb-menu__main-li.pine-nav-cta > .awb-menu__main-a::after {
    display: none;
  }

  .fusion-tb-header .awb-menu__main-li.pine-nav-cta > .awb-menu__main-a:hover,
  .fusion-tb-header .awb-menu__main-li.pine-nav-cta > .awb-menu__main-a:focus-visible,
  .fusion-tb-header .awb-menu__main-li.pine-nav-cta.current-menu-item > .awb-menu__main-a {
    background: #fff;
    --awb-color: var(--pine-nav-forest);
  }

  /* Avada's own hover and active backgrounds stay off. */
  .fusion-tb-header .awb-menu__main-background-default,
  .fusion-tb-header .awb-menu__main-background-active {
    display: none;
  }
}

/* Mobile menu button: the two Font Awesome "grip lines" bars redrawn at 3px instead of
   about 5px, in the same 40px box and positions. The close (X) icon is unchanged. */
.fusion-tb-header .awb-menu__m-collapse-icon-open_no-text::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: top;
  background:
    linear-gradient(currentColor, currentColor) 0 13.5px / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) 0 23.5px / 100% 3px no-repeat;
}

/* Close (X) icon redrawn as two 3px bars to match. Avada positions this span
   absolutely in the 40px button and fades it in when the menu opens. */
.fusion-tb-header .awb-menu__m-collapse-icon-close_no-text {
  height: 40px;
}

.fusion-tb-header .awb-menu__m-collapse-icon-close_no-text::before,
.fusion-tb-header .awb-menu__m-collapse-icon-close_no-text::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 18.5px;
  width: 36px;
  height: 3px;
  background: currentColor;
  transform: rotate(45deg);
}

.fusion-tb-header .awb-menu__m-collapse-icon-close_no-text::after {
  transform: rotate(-45deg);
}