/* ═══════════════════════════════════════════════════════════════
   Wisdom Three — vyom-nav.css  v2.3
   Nav dropdown fix + sticky header + scroll reveal
   Loaded by functions.php after style.css
═══════════════════════════════════════════════════════════════ */


/* ── 1. NAV DROPDOWN ──────────────────────────────────────────
   Uses display:none/block (safer than visibility/opacity when
   theme CSS may already set display:none on .sub-menu).
   High-specificity selectors override WordPress defaults.
────────────────────────────────────────────────────────────── */

/* Parent item: relative so the panel can position against it */
ul.primary-menu > li,
ul.primary-menu > li.menu-item-has-children {
  position: relative !important;
}

/* Strip the ○ bullet — target every possible source */
ul.primary-menu .sub-menu,
ul.primary-menu ul.sub-menu,
ul.primary-menu .sub-menu li {
  list-style:      none !important;
  list-style-type: none !important;
  margin:          0    !important;
  padding:         0    !important;
}
ul.primary-menu .sub-menu li::marker,
ul.primary-menu .sub-menu li::before {
  content: none !important;
  display: none !important;
}

/* Panel — hidden by default */
ul.primary-menu li.menu-item-has-children > ul.sub-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%);
  background:    #ffffff;
  border-radius: 10px;
  border:        1px solid #D4E4EE;
  box-shadow:    0 8px 32px rgba(27,79,114,.14), 0 2px 8px rgba(27,79,114,.06);
  min-width:     230px;
  padding:       8px 0;
  z-index:       99999;
  white-space:   nowrap;
}

/* Triangle notch pointing up */
ul.primary-menu li.menu-item-has-children > ul.sub-menu::before {
  content:       '';
  position:      absolute;
  top:           -7px;
  left:          50%;
  transform:     translateX(-50%);
  border-left:   7px solid transparent;
  border-right:  7px solid transparent;
  border-bottom: 7px solid #D4E4EE;
}
ul.primary-menu li.menu-item-has-children > ul.sub-menu::after {
  content:       '';
  position:      absolute;
  top:           -6px;
  left:          50%;
  transform:     translateX(-50%);
  border-left:   6px solid transparent;
  border-right:  6px solid transparent;
  border-bottom: 6px solid #ffffff;
}

/* Show panel on hover */
ul.primary-menu li.menu-item-has-children:hover > ul.sub-menu,
ul.primary-menu li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block;
}

/* Chevron on parent link */
ul.primary-menu li.menu-item-has-children > a {
  display:     flex !important;
  align-items: center !important;
  gap:         5px !important;
}
ul.primary-menu li.menu-item-has-children > a::after {
  content:      '' !important;
  display:      inline-block !important;
  width:        0  !important;
  height:       0  !important;
  border-left:  4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top:   5px solid currentColor !important;
  opacity:      .6;
  transition:   transform .2s ease;
  flex-shrink:  0;
  margin-top:   1px;
}
ul.primary-menu li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
  opacity:   1;
}

/* Sub-menu link styling */
ul.primary-menu .sub-menu li a {
  display:         block !important;
  padding:         11px 20px !important;
  font-size:       14px !important;
  font-weight:     500 !important;
  color:           #1A2E3D !important;
  text-decoration: none !important;
  border-left:     3px solid transparent;
  transition:      background .15s, padding-left .15s, border-color .15s;
  line-height:     1.4;
}
ul.primary-menu .sub-menu li a:hover {
  background:        #EAF0F6   !important;
  color:             #1B4F72   !important;
  border-left-color: #C9973A;
  padding-left:      24px      !important;
}

/* Current page in sub-menu */
ul.primary-menu .sub-menu li.current-menu-item > a,
ul.primary-menu .sub-menu li.current-page-ancestor > a {
  background:        #EAF0F6 !important;
  color:             #1B4F72 !important;
  border-left-color: #C9973A;
  font-weight:       600     !important;
}

/* "NEW" badge on VYOM™ item */
ul.primary-menu .sub-menu li.menu-vyom > a::before {
  content:        'NEW' !important;
  background:     #C9973A;
  color:          #fff;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .06em;
  padding:        2px 6px;
  border-radius:  3px;
  margin-right:   8px;
  vertical-align: middle;
  display:        inline-block;
}

/* Mobile: accordion */
@media (max-width: 768px) {
  ul.primary-menu li.menu-item-has-children > ul.sub-menu {
    position:   static  !important;
    transform:  none    !important;
    box-shadow: none    !important;
    border:     none    !important;
    background: rgba(27,79,114,.06) !important;
    border-left: 3px solid #C9973A !important;
    margin:     4px 0 4px 16px !important;
    padding:    0 !important;
    border-radius: 0 !important;
    min-width:  auto !important;
    display:    none !important;
  }
  ul.primary-menu li.menu-item-has-children > ul.sub-menu.is-open {
    display: block !important;
  }
  ul.primary-menu .sub-menu li a {
    padding: 9px 16px !important;
    border-left: none !important;
  }
  ul.primary-menu li.menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
    opacity:   1;
  }
}


/* ── 2. STICKY HEADER ─────────────────────────────────────── */
#site-header {
  transition: box-shadow .2s ease, background-color .2s ease;
}
#site-header.scrolled {
  box-shadow:       0 2px 20px rgba(18,48,74,.18) !important;
  background-color: #12304A !important;
}


/* ── 3. SCROLL REVEAL ─────────────────────────────────────── */
.reveal-on-scroll {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity .45s ease, transform .45s ease;
}
.reveal-on-scroll.is-visible {
  opacity:   1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}