/* ============================================================
   UpJourney v2 — desktop mega menu module
   Loaded by inc/mega-menu.php (wp_enqueue_style 'uj-mega-menu').
   Uses --uj-* tokens from style.css only; no hardcoded colors
   except white (panel surface) and shadow rgba (per spec).
   Breakpoint: 1025px+ = desktop mega menu, <=1024px = GP stock mobile menu
   (matches generate_menu_plus_settings[mobile_menu_breakpoint]=1025 — the
   old 769px split left a broken 769-1024 band where GP already runs its
   mobile header; found + fixed 2026-07-03).
   ============================================================ */

/* ---------- Desktop / mobile split ----------
   GP's stock item list is appended inside a data-uj-mobile wrapper <li>;
   our desktop markup lives in .uj-mega-menu-list. Only one is visible
   at a time, purely via CSS — no JS, no body classes, no UA sniffing. */
.main-navigation .main-nav .uj-mega-menu-list{display:none;}

@media (min-width:1025px){
  .main-navigation .main-nav .uj-mega-menu-list{
    display:flex;
    align-items:stretch;
    list-style:none;
    margin:0;padding:0;
  }
  /* GP's stock top-level items are siblings of our injected <li>; they only
     serve the mobile slide-out, so hide them at desktop widths. */
  .main-navigation .main-nav > ul > li:not(.uj-mega-menu-list){display:none;}
}

/* ---------- Top-level items ---------- */
.uj-mega-item{
  position:relative;
  display:flex;
  align-items:stretch;
}

/* Specificity note: GP's stock ".main-navigation .main-nav ul li a" rule
   (style.css) is (0,2,3) and matches this link too (still a descendant of
   the "ul li" host); out-specify it here rather than relying on the values
   happening to match, so this stays correct if the base nav styles change. */
.main-navigation .main-nav .uj-mega-trigger{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--uj-font-body);
  font-size:15.5px;
  font-weight:600;
  color:#42505C;
  padding:0 13px;
  line-height:66px;
  text-decoration:none;
  white-space:nowrap;
}

.main-navigation .main-nav .uj-mega-trigger:hover,
.main-navigation .main-nav .uj-mega-item.is-active .uj-mega-trigger{
  color:var(--uj-primary);
}

.main-navigation .main-nav .uj-mega-trigger:focus-visible{
  outline:2px solid var(--uj-primary);
  outline-offset:-2px;
  border-radius:4px;
}

/* Chevron */
.uj-mega-chevron{
  width:9px;height:6px;flex-shrink:0;
  opacity:.55;
  transition:transform .18s ease,opacity .18s ease;
}
.uj-mega-item:hover .uj-mega-chevron,
.uj-mega-item:focus-within .uj-mega-chevron,
.uj-mega-item.is-open .uj-mega-chevron{
  opacity:1;
  transform:rotate(180deg);
}

/* Invisible toggle button layered over the chevron area for click/keyboard
   control; the visible affordance stays the <a> + chevron so sighted mouse
   users see one coherent trigger, while AT gets a real button with
   aria-expanded. Sized to be a reasonable tap/click target on its own.
   Specificity note (fix 2026-07-03): GP ships stock styling for nav BUTTONS
   (menu-toggle family, incl. dark hover/focus background) that out-specified
   the old bare-class rule — the toggle rendered as a dark square next to the
   label. Same cure as the link notes above: out-specify across ALL states. */
nav.main-navigation .main-nav .uj-mega-toggle,
nav.main-navigation .main-nav .uj-mega-toggle:hover,
nav.main-navigation .main-nav .uj-mega-toggle:focus,
nav.main-navigation .main-nav .uj-mega-toggle:active{
  -webkit-appearance:none;appearance:none;
  border:0;background:transparent;box-shadow:none;color:inherit;
  position:absolute;
  right:-2px;top:50%;
  transform:translateY(-50%);
  width:22px;height:22px;
  padding:0;margin:0;
  cursor:pointer;
}
nav.main-navigation .main-nav .uj-mega-toggle:focus-visible{
  outline:2px solid var(--uj-primary);
  outline-offset:1px;
  border-radius:50%;
}

/* ---------- Panel ---------- */
.uj-mega-panel{
  display:block;
  position:absolute;
  top:100%;
  left:50%;
  padding-top:8px;
  z-index:100;
  visibility:hidden;opacity:0;
  transform:translateX(-50%) translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  pointer-events:none;
}
/* open = .is-open ONLY (JS hover-intent + click toggle + keyboard via the
   aria-expanded button). :focus-within was here too but it pins the panel
   open after any click (focus lingers) — the "weird mouseover" bug. */
.uj-mega-item.is-open .uj-mega-panel{
  visibility:visible;opacity:1;
  transform:translateX(-50%) translateY(0);
  transition:opacity .16s ease,transform .16s ease,visibility 0s;
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  .uj-mega-panel{transition:none;transform:translateX(-50%);}
}
/* last two triggers: anchor the panel to the item's right edge so wide
   panels never poke past the viewport (they were the 3px h-scroll source) */
.uj-mega-panel.uj-mega-panel-right{
  left:auto;right:0;
  transform:translateY(6px);
}
.uj-mega-item.is-open .uj-mega-panel.uj-mega-panel-right{
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .uj-mega-panel.uj-mega-panel-right{transition:none;transform:none;}
}

.uj-mega-panel-inner{
  background:#fff;
  border:1px solid var(--uj-hair);
  border-top:3px solid var(--uj-accent);
  border-radius:14px;
  box-shadow:0 26px 64px rgba(10,40,60,.18);
  padding:24px 26px 18px;
  display:flex;
  flex-direction:column;
}

/* featured card + link columns row */
.uj-mega-panel-main{
  display:flex;
  gap:34px;
}

/* ---------- Featured pillar card (recirc card language) ---------- */
.main-navigation .main-nav .uj-mega-feat{
  display:block;
  width:224px;
  flex:0 0 224px;
  padding:0;
  text-decoration:none;
  white-space:normal;
}
.main-navigation .main-nav .uj-mega-feat img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  border-radius:8px;margin-bottom:9px;
}
.uj-mega-feat .uj-rn-kicker{
  display:block;
  font:600 10.5px/1.5 var(--uj-font-body);
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--uj-muted);
  margin:0 0 3px;
}
.main-navigation .main-nav .uj-mega-feat .uj-mega-feat-title{
  display:block;
  font-family:var(--uj-font-heading);
  font-weight:700;font-size:15.5px;line-height:1.32;
  color:var(--uj-hero-ink);
  transition:color .15s;
  padding:0;white-space:normal;
}
.main-navigation .main-nav .uj-mega-feat:hover .uj-mega-feat-title{color:var(--uj-primary);}
.uj-mega-feat .uj-mega-feat-head{display:block;}

/* ---------- Explore-all bottom row ---------- */
.main-navigation .main-nav .uj-mega-explore{
  display:block;
  margin-top:18px;
  padding:12px 0 4px;
  border-top:1px solid var(--uj-hair);
  font-family:var(--uj-font-body);
  font-size:13px;font-weight:700;
  color:var(--uj-accent-text);
  text-decoration:none;
  white-space:nowrap;
}
.main-navigation .main-nav .uj-mega-explore:hover{color:var(--uj-primary);}

.uj-mega-col{
  display:flex;
  flex-direction:column;
  min-width:180px;
}

.uj-mega-col-head{
  font-family:var(--uj-font-body);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--uj-accent-text);
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--uj-hair);
}

.uj-mega-col-head-spacer{
  color:transparent;
  border-bottom-color:transparent;
}

/* Specificity note: GP's stock ".main-navigation .main-nav ul li a" rule
   (style.css) is (0,2,3) and DOES match these links (they're still
   descendants of the "ul li" the panel hangs off of), so it would clobber
   size/weight/color/padding/line-height here unless we out-specify it.
   Repeating the ".main-navigation .main-nav" prefix keeps the cascade
   readable without reaching for !important. */
.main-navigation .main-nav .uj-mega-panel-inner a{
  display:block;
  padding:7px 0;
  font-family:var(--uj-font-body);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--uj-hero-ink);
  text-decoration:none;
  border-radius:4px;
  white-space:nowrap;
}

.main-navigation .main-nav .uj-mega-panel-inner a:hover,
.main-navigation .main-nav .uj-mega-panel-inner a:focus-visible{
  color:var(--uj-primary);
}

.main-navigation .main-nav .uj-mega-panel-inner a:focus-visible{
  outline:2px solid var(--uj-primary);
  outline-offset:2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .uj-mega-chevron{transition:none;}
}