/* Nav tree hover.
   Rollback: delete the rf_enqueue_nav_tree_hover() call in functions.php.
   The plain rise lives in site-chrome.css and comes back as soon as this file
   is not loaded. */

.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none;
  background-color: transparent;
  transition: color 1200ms ease;
}

.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"])::before,
.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 709 / 807;
  background: var(--rf-panel);
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 1200ms ease;
}

/* The tree. The fill is the same height and uses the same translate. It starts
   10px higher so it overlaps the drawing, and the shadow gives those 10px
   back so the color still ends at the bottom of the link. */
.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"])::before {
  bottom: 0;
  -webkit-mask-image: url("https://rootsandfruit.com/wp-content/themes/rf/assets/illustrations/nav-tree.png");
  mask-image: url("https://rootsandfruit.com/wp-content/themes/rf/assets/illustrations/nav-tree.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"])::after {
  top: calc(100% - 10px);
  box-shadow: 0 10px 0 0 var(--rf-panel);
}

.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):hover,
.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):focus-visible {
  background-size: auto;
  color: var(--rf-green-deep);
}

.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):hover::before,
.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):focus-visible::before,
.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):hover::after,
.site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):focus-visible::after {
  transform: translateY(-100%);
}

.site-header .rf-nav .is-menu-open a.wp-block-navigation-item__content::before,
.site-header .rf-nav .is-menu-open a.wp-block-navigation-item__content::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"])::before,
  .site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"])::after {
    transition: none;
  }

  .site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):hover::before,
  .site-header .rf-nav a.wp-block-navigation-item__content:not([aria-current="page"]):focus-visible::before {
    opacity: 0;
  }
}