/* =======================================================================================
 * File: /assets/css/hover-dropdown.css
 * Purpose: Dropdown + mega panel styles (classic .sub-menu + mega .sub-menu--mega)
 * Supports:
 *  - Desktop: open via :hover / :focus-within (hover-capable devices only)
 *  - Touch: open via .is-open (JS toggles on iPad/tablet)
 *  - Flip: .align-right (JS sets when near viewport edge)
 *
 * IMPORTANT (new valid mega markup):
 *  - Panel element is:  li.menu-item-has-children > ul.sub-menu.sub-menu--mega
 *  - Inner grid wrapper is: ul.sub-menu--mega > li.nf-mega
 * ======================================================================================= */ :root {
  --dd-open-dur: .32s;
  --dd-ease-in: cubic-bezier(.2, .7, .2, 1);
  --dd-ease-out: cubic-bezier(.2, 0, 0, 1);
  --dd-offset-x: -3rem;
  --dd-offset-y: 2rem;
}
#site-primary-nav {
  position: relative;
}
#site-primary-nav .menu-item-has-children {
  position: relative;
}
#site-primary-nav {
  overflow: visible;
}
/* Clamp classic submenu width like mega */
#site-primary-nav .menu-item-has-children > .sub-menu {
  max-width: 90vw;
}
/* ---------------- Panel base (classic + mega UL) ---------------- */
#site-primary-nav .menu-item-has-children > .sub-menu, #site-primary-nav .menu-item-has-children > .sub-menu--mega {
  position: absolute;
  top: calc(100% + var(--dd-offset-y)); /* ✅ keep it “attached” to the parent */
  left: var(--dd-offset-x);
  z-index: 9999;
  margin: 0;
  padding: calc(3rem - 0.25rem) calc(4rem - 0.25rem);
  text-align: left;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
  /* closed */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity var(--dd-open-dur) var(--dd-ease-out), transform var(--dd-open-dur) var(--dd-ease-out), visibility 0s linear var(--dd-open-dur);
}
#site-primary-nav .menu-item-has-children > .sub-menu--mega {
  padding: calc(3rem - 0.25rem) calc(2rem - 0.25rem);
}
/* hover bridge */
#site-primary-nav .menu-item-has-children > .sub-menu::before, #site-primary-nav .menu-item-has-children > .sub-menu--mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* extend hit area upward into the gap */
  top: calc(-1 * var(--dd-offset-y));
  height: var(--dd-offset-y);
  background: transparent; /* invisible */
}
/* ---------------- OPEN state: JS-driven for touch ---------------- */
#site-primary-nav .menu-item-has-children.is-open > .sub-menu, #site-primary-nav .menu-item-has-children.is-open > .sub-menu--mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--dd-open-dur) var(--dd-ease-out), transform var(--dd-open-dur) var(--dd-ease-out), visibility 0s;
}
/* ---------------- OPEN state: hover/focus (hover-capable only) ---- */
@media (hover: hover) and (pointer: fine) {
  #site-primary-nav .menu-item-has-children:hover > .sub-menu, #site-primary-nav .menu-item-has-children:hover > .sub-menu--mega, #site-primary-nav .menu-item-has-children:focus-within > .sub-menu, #site-primary-nav .menu-item-has-children:focus-within > .sub-menu--mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity var(--dd-open-dur) var(--dd-ease-out), transform var(--dd-open-dur) var(--dd-ease-out), visibility 0s;
  }
}
/* ---------------- Mega panel sizing (UL) + inner grid (LI) -------- */
#site-primary-nav .menu-item-has-children > .sub-menu--mega {
  list-style: none;
  box-sizing: border-box;
  min-width: 24rem;
  width: max-content;
  max-width: 90vw;
}
/* The LI wrapper that holds the 2 columns */
#site-primary-nav .menu-item-has-children > .sub-menu--mega > .nf-mega {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0rem;
}
/* Columns */
#site-primary-nav .nf-mega__col {
  min-height: 25rem;
}
#site-primary-nav .nf-mega__col.nf-mega__col--left {
  padding-right: 3.5rem;
}
#site-primary-nav .nf-mega__col.nf-mega__col--right {
  position: relative;
  padding-left: 3.5rem;
  padding-right: 2rem;
}
/* Divider */
#site-primary-nav .nf-mega__col--right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  pointer-events: none;
  background-image: url("/wp-content/uploads/2025/12/Line-510.png");
  background-repeat: repeat-y;
  background-position: left top;
  background-size: 100% auto;
}
/* Lists inside mega */
#site-primary-nav .nf-mega__col--left .sub-menu, #site-primary-nav .nf-mega__col--right .sub-menu {
  list-style: none;
  margin: 0 0 1.5rem calc(0.625rem + 1.5rem);
}
#site-primary-nav .nf-mega__col--right .sub-menu {
  margin-left: 0.625rem;
}
#site-primary-nav .nf-mega__col--right .sub-menu.sub-menu--two {
  margin-bottom: 0;
}
/* Mega headings */
#site-primary-nav .nf-mega__heading {
  margin: 0 0 .5rem;
  color: var(--Primary-Golden-Hour, #D1BA79);
  font-feature-settings: 'liga'off;
  /* Desktop/Megamenu Header */
  font: var(--Desktop-Megamenu-Header);
  letter-spacing: .0875rem;
  text-transform: uppercase;
}
#site-primary-nav .nf-mega__block {
  margin-bottom: 1rem;
}
#site-primary-nav .nf-mega__block.nf-mega__block--two {
  margin-bottom: 0;
}
/* ---------------- Classic submenu list look ---------------- */
#site-primary-nav .sub-menu, #site-primary-nav .sub-menu li {
  margin: 0 0 0.625rem;
  list-style: none;
}
#site-primary-nav .sub-menu li:last-child {
  margin-bottom: 0;
}
#site-primary-nav .sub-menu a {
  display: flex;
  align-items: center;
  color: var(--Primary-Director-Black, #252525);
	/* Desktop/Megamenu Link */
	font: var(--Desktop-Megamenu-Link);
  white-space: nowrap;
  padding: 0.25rem;
  text-transform: none;
}
/* Icons inside submenu */
#site-primary-nav .sub-menu .menu-item-icon, #site-mobile-menu .sub-menu .menu-item-icon, #site-mobile-menu ul#mobile-menu > li.menu-item > a > .menu-item-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  margin-left: 0.5rem;
  --menu-icon-color: var(--Secondary-Working-Title, #979797);
  position: static;
}
/* Example: special color for a specific item */
#site-primary-nav .menu-item-208 .menu-item-icon, #site-mobile-menu .menu-item-208 .menu-item-icon, #site-mobile-menu ul#mobile-menu > li.menu-item > a > .menu-item-icon {
  --menu-icon-color: var(--Primary-Golden-Hour, #d1ba79);
  width: auto;
  height: auto;
  transition:
    opacity var(--dd-open-dur) var(--dd-ease-in), transform var(--dd-open-dur) var(--dd-ease-in), visibility 0s;
  margin-right: .475rem;
}
#site-mobile-menu .menu-item-208 .menu-item-icon, #site-mobile-menu ul#mobile-menu > li.menu-item > a > .menu-item-icon {
  --menu-icon-color: var(--Primary-Open-Frame, #FFF);
}
/* Service/Work submenu icons: gray → per-item hover color */
/* on hover/focus, swap to the per-item hover var (injected inline) */
#site-primary-nav .sub-menu .menu-item-object-service > a:hover .menu-item-icon, #site-primary-nav .sub-menu .menu-item-object-service > a:focus-visible .menu-item-icon, #site-primary-nav .sub-menu .menu-item-object-work > a:hover .menu-item-icon, #site-primary-nav .sub-menu .menu-item-object-work > a:focus-visible .menu-item-icon {
  --menu-icon-color: var(--menu-icon-hover, currentColor);
}
/* smooth transition */
#site-primary-nav .sub-menu .menu-item-object-service .menu-item-icon svg path, #site-primary-nav .sub-menu .menu-item-object-work .menu-item-icon svg path {
  transition: fill 200ms cubic-bezier(.2, .7, .2, 1);
  fill: var(--menu-icon-color, currentColor) !important;
}
/* Guard against legacy full-width rules */
#site-primary-nav .menu-item-has-children > .sub-menu, #site-primary-nav .menu-item-has-children > .sub-menu--mega {
  width: auto;
  margin: 0;
}
/* Flip to right edge when JS adds .align-right */
#site-primary-nav .menu-item-has-children.align-right > .sub-menu, #site-primary-nav .menu-item-has-children.align-right > .sub-menu--mega {
  left: auto;
  right: 0;
}
/* Nested flyouts (classic nested only) */
#site-primary-nav .sub-menu .menu-item-has-children {
  position: relative;
}
#site-primary-nav .sub-menu .menu-item-has-children > .sub-menu {
  top: 0;
  left: 100%;
}
#site-primary-nav .sub-menu .menu-item-has-children.align-right > .sub-menu {
  left: auto;
  right: 100%;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #site-primary-nav .menu-item-has-children > .sub-menu, #site-primary-nav .menu-item-has-children > .sub-menu--mega {
    transition: none;
    transform: none;
  }
}
/* Responsive: stack mega columns */
@media (max-width: 900px) {
  #site-primary-nav .menu-item-has-children > .sub-menu--mega {
    width: 100%;
    max-width: none;
  }
  #site-primary-nav .menu-item-has-children > .sub-menu--mega > .nf-mega {
    grid-template-columns: 1fr;
    width: 100%;
  }
}
/* If SVG is normalized to fill="currentColor", make it follow --menu-icon-color */
#site-primary-nav .sub-menu .menu-item-icon {
  color: var(--menu-icon-color, currentColor);
}