/* =========================================
   Astra Child – Menu Hover Image (Final)
   ========================================= */

:root {
  --hover-img: url("/assets/images/active-menu.png");
  --top-icon-size: 30px;
  --sub-icon-size: 50px;
  --top-reserved-space: 1.3em;
  --sub-reserved-space: 0.4em;
  --y-shift-top: 5px;
  --y-shift-sub: 2px;
  --appear: .25s;
}

/* White text for both classic anchors and Header Builder links */
.main-header-menu li a,
.main-header-menu li > .menu-link,
.main-header-menu .sub-menu li a,
.main-header-menu .sub-menu li > .menu-link {
  color: white;
}

/* ===========================
   Hover-enabled devices only
   =========================== */
@media (hover: hover) {

  .main-header-menu > li > a,
  .main-header-menu > li > .menu-link,
  .main-header-menu .sub-menu li > a,
  .main-header-menu .sub-menu li > .menu-link {
    position: relative;
    display: inline-block;
    text-align: left;
    align-items: center;
    font-size: 18px;
    transition: transform var(--appear) ease;
  }

  .main-header-menu > li > a,
  .main-header-menu > li > .menu-link { padding-top: var(--top-reserved-space); padding-bottom: var(--top-reserved-space); }
  .main-header-menu .sub-menu li > a,
  .main-header-menu .sub-menu li > .menu-link { padding-bottom: var(--sub-reserved-space); }

  /* Base pseudo-icon (hidden by default) */
  .main-header-menu > li > a::after,
  .main-header-menu > li > .menu-link::after,
  .main-header-menu .sub-menu li > a::after,
  .main-header-menu .sub-menu li > .menu-link::after {
    content: "";
    position: absolute;
    left: 50%;
    background-image: var(--hover-img);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--appear) ease, transform var(--appear) ease;
    pointer-events: none;
  }

  /* --- Top-level placement --- */
  .main-header-menu > li > a::after,
  .main-header-menu > li > .menu-link::after {
    bottom: 0;
    transform: translateX(-50%) translateY(0);
    width: var(--top-icon-size);
    height: var(--top-icon-size);
  }

  /* Reveal — top level */
  .main-header-menu > li > a:is(:hover, :focus-visible)::after,
  .main-header-menu > li > .menu-link:is(:hover, :focus-visible)::after,
  .main-header-menu > li.current-menu-item > a::after,
  .main-header-menu > li.current-menu-item > .menu-link::after {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--y-shift-top));
    /* height: 20px; */
    width: 70px;
    
  }

  /* --- Submenu placement (below the text) --- */
  .main-header-menu .sub-menu li > a,
  .main-header-menu .sub-menu li > .menu-link {
    overflow: visible;
    line-height: 1.8  ;
  }

  .main-header-menu .sub-menu li > a::after,
  .main-header-menu .sub-menu li > .menu-link::after {
    bottom: auto;
    top: 70%;
    transform: translateX(-50%) translateY(0);
    width: var(--sub-icon-size);
    height: var(--sub-icon-size);
  }

  /* Reveal — submenu */
  .main-header-menu .sub-menu li > a:is(:hover, :focus-visible)::after,
  .main-header-menu .sub-menu li.current-menu-item > a::after,
  .main-header-menu .sub-menu li > .menu-link:is(:hover, :focus-visible)::after,
  .main-header-menu .sub-menu li.current-menu-item > .menu-link::after {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--y-shift-sub));
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .main-header-menu a,
  .main-header-menu .menu-link,
  .main-header-menu a::after,
  .main-header-menu .menu-link::after {
    transition: none !important;
  }
}

/* Mobile / touch devices: hide hover icon */
.ast-header-break-point .main-header-menu a::after,
.ast-header-break-point .main-header-menu .menu-link::after {
  display: none;
}

/* Neutralize Astra's default hover visuals */
.main-header-menu a,
.main-header-menu .menu-link,
.main-header-menu a:hover,
.main-header-menu .menu-link:hover {
  background: none;
  text-decoration: none;
  box-shadow: none;
  border: 0;
}

/* Optional: Submenu width & centering */
/*
.main-header-menu .sub-menu {
  width: 220px;
  text-align: center;
  padding: 10px 0;
}
*/