/* ==========================================================================
   WUC Technologies — Mega Menu Visual & Branding Polish (Audit Fix Group 1)
   File: assets/css/wuc-menu-polish.css
   Notes:
     - html body[class] prefix = +1 attribute specificity.
     - !important used selectively ONLY where theme inline styles
       (wuc-block-q-nav-supplement, wuc-block-t-nav-precision) already use
       !important on the same property; required for legitimate override.
   ========================================================================== */

/* 1a. Panel open/close transition (fade + 6px lift) */
html body[class] .wuc-v5-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity .18s ease-out,
    transform .18s ease-out,
    visibility 0s linear .18s;
  will-change: opacity, transform;
}
html body[class] .wuc-v5-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity .18s ease-out,
    transform .18s ease-out,
    visibility 0s linear 0s;
}

/* 1b. Unified minimum panel inner height prevents jump between triggers */
html body[class] .wuc-v5-panel .wuc-v5-panel-inner {
  min-height: 520px;
  transition: min-height .2s ease;
}
@media (max-width: 1024px) {
  html body[class] .wuc-v5-panel .wuc-v5-panel-inner { min-height: 0; }
}

/* 1e. Hairline normalization — must override theme !important rules */
html body[class] [id^="wuc-v5-panel-"],
html body[class] .wuc-v5-panel { border-top: 2px solid #0070E0 !important; }
html body[class] .wuc-v5-mobile-trigger { border-bottom-width: 1px; }
html body[class] .wuc-v5-mobile-link { border-bottom-width: 1px; }
html body[class] .wuc-v5-cta-ghost { border-width: 1px; }

/* 1f. Panel shadow — must override theme !important rules */
html body[class] [id^="wuc-v5-panel-"],
html body[class] .wuc-v5-panel {
  box-shadow:
    0 16px 40px rgba(4, 8, 15, .16),
    0 2px 6px rgba(4, 8, 15, .06) !important;
  border-bottom: 1px solid rgba(4, 8, 15, .08);
}

/* 1d. Pulsing live-monitoring indicator on utility bar */
html body[class] .wuc-v5-util-bar .wuc-v5-ai-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  flex: 0 0 auto;
}
html body[class] .wuc-v5-util-bar .wuc-v5-ai-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #10B981;
  opacity: .55;
  transform: scale(1);
  animation: wuc-ai-pulse-ring 2s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}
html body[class] .wuc-v5-util-bar .wuc-v5-ai-dot {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, .35);
}
@keyframes wuc-ai-pulse-ring {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0;    }
  100% { transform: scale(2.6); opacity: 0;    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html body[class] .wuc-v5-panel,
  html body[class] .wuc-v5-panel.is-open,
  html body[class] .wuc-v5-panel .wuc-v5-panel-inner {
    transition: none !important;
    transform: none !important;
  }
  html body[class] .wuc-v5-util-bar .wuc-v5-ai-pulse::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ==========================================================================
   Fix 2 — Typography & Readability (Audit Group 2)
   ========================================================================== */

/* 2a. Link title — bump to semibold for clear primary hierarchy */
html body[class] .wuc-v5-panel .wuc-v5-link-title {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* 2b. Link description — size down, mute, tighten leading */
html body[class] .wuc-v5-panel .wuc-v5-link-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #475569;
  margin-top: 2px;
}

/* 2c. Category column header — muted eyebrow */
html body[class] .wuc-v5-panel .wuc-v5-cat-header {
  color: #64748b;
  letter-spacing: 0.64px;
}

/* 2d. Audience selector row — tighten line-height */
html body[class] .wuc-v5-panel .wuc-v5-path-label,
html body[class] .wuc-v5-panel .wuc-v5-path-pill {
  line-height: 1.4;
}

/* 2e. Secondary CTA links — bump weight for actionability */
html body[class] .wuc-v5-panel .wuc-v5-spotlight-cta,
html body[class] .wuc-v5-panel .wuc-v5-cta-ghost {
  font-weight: 600;
}

/* 2f. Ghost-meta — demote to secondary metadata */
html body[class] .wuc-v5-panel .wuc-v5-ghost-meta {
  font-size: 13px;
  color: #64748b;
  font-weight: 400;
}

/* 2c-override. Category header — overrides theme !important inline rules.
   Using slate-600 (71,85,105) to align with theme's own palette
   already used in wuc-block-q-nav-supplement. */
html body[class] .wuc-v5-panel .wuc-v5-cat-header {
  color: #475569 !important;
  letter-spacing: 0.04em !important;
}

/* ==========================================================================
   Fix 3 — Spacing & Visual Hierarchy (Audit Group 3)
   ========================================================================== */

/* 3a. Panel inner — symmetric, slightly more horizontal breathing room */
html body[class] .wuc-v5-panel .wuc-v5-panel-inner {
  padding: 32px 32px;
}

/* 3b. 3-column grid — wider column separation */
html body[class] .wuc-v5-panel .wuc-v5-panel-grid-3col {
  gap: 40px;
}

/* 3c. Mega link — comfort padding + consistent radius */
html body[class] .wuc-v5-panel .wuc-v5-mega-link {
  padding: 12px 10px;
  border-radius: 8px;
}

/* 3d. Consecutive link vertical rhythm — 10px gap between links in a column.
   Using adjacent sibling selector so the first link in a column is not pushed. */
html body[class] .wuc-v5-panel .wuc-v5-mega-link + .wuc-v5-mega-link {
  margin-top: 6px;
}

/* 3e. Spotlight CTA title — breathing room from trust badges */
html body[class] .wuc-v5-panel .wuc-v5-spotlight-stat {
  margin-top: 20px;
}

/* 3f. Ghost CTA button — premium padding */
html body[class] .wuc-v5-panel .wuc-v5-cta-ghost {
  padding: 12px 20px;
}

/* ==========================================================================
   Fix 3 — overrides for !important collisions and PHP inline styles
   ========================================================================== */

/* 3a-override. Panel inner padding */
html body[class] .wuc-v5-panel .wuc-v5-panel-inner {
  padding: 32px 32px !important;
}

/* 3b-override. 3-column grid gap */
html body[class] .wuc-v5-panel .wuc-v5-panel-grid-3col {
  gap: 40px !important;
  column-gap: 40px !important;
}

/* 3c-override. Mega link comfort padding */
html body[class] .wuc-v5-panel .wuc-v5-mega-link {
  padding: 12px 10px !important;
}

/* 3e-override. Spotlight CTA title margin — beats inline style attribute */
html body[class] .wuc-v5-panel .wuc-v5-spotlight-stat {
  margin-top: 20px !important;
}

/* 3f-override. Ghost CTA button padding */
html body[class] .wuc-v5-panel .wuc-v5-cta-ghost {
  padding: 12px 20px !important;
}

/* ==========================================================================
   Fix 4 — Interaction & Hover States (Audit Group 4)
   All overrides use !important where the theme's inline !important rules
   would otherwise win. This is a legitimate exception — we're overriding
   theme !important with theme !important.
   ========================================================================== */

/* 4b. Mega link base transition — smooth fade instead of snap */
html body[class] .wuc-v5-panel .wuc-v5-mega-link {
  transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out !important;
}

/* 4a. Mega link hover — subtle brand tint, premium feel */
html body[class] .wuc-v5-panel .wuc-v5-mega-link:hover {
  background: rgba(0, 112, 224, 0.06) !important;
  background-color: rgba(0, 112, 224, 0.06) !important;
  color: #0070E0 !important;
}
html body[class] .wuc-v5-panel .wuc-v5-mega-link:hover .wuc-v5-link-title {
  color: #0070E0 !important;
}
html body[class] .wuc-v5-panel .wuc-v5-mega-link:hover .wuc-v5-link-desc {
  color: #475569 !important; /* stay slate-600 — no white flash */
}
html body[class] .wuc-v5-panel .wuc-v5-mega-link:hover .wuc-v5-link-icon,
html body[class] .wuc-v5-panel .wuc-v5-mega-link:hover svg {
  color: #0070E0 !important;
}
/* Don't invert the badges on hover — keep them readable */
html body[class] .wuc-v5-panel .wuc-v5-mega-link:hover .wuc-v5-tag,
html body[class] .wuc-v5-panel .wuc-v5-mega-link:hover [class*="badge"] {
  background: rgba(0, 112, 224, 0.12) !important;
  background-color: rgba(0, 112, 224, 0.12) !important;
  color: #0070E0 !important;
}

/* 4c. Universal focus-visible — clear WCAG 2.2 AA ring */
html body[class] .wuc-v5-panel .wuc-v5-mega-link:focus-visible,
html body[class] .wuc-v5-panel .wuc-v5-path-pill:focus-visible,
html body[class] .wuc-v5-panel .wuc-v5-cta-ghost:focus-visible,
html body[class] .wuc-v5-panel .wuc-v5-spotlight-cta:focus-visible {
  outline: 2px solid #0070E0 !important;
  outline-offset: 2px !important;
  /* Keep the non-focus hover visual when keyboard-focused too */
  background: rgba(0, 112, 224, 0.06) !important;
  background-color: rgba(0, 112, 224, 0.06) !important;
  color: #0070E0 !important;
}
/* Nav trigger focus ring — with offset */
html body[class] .wuc-v5-header .wuc-v5-nav-trigger:focus-visible {
  outline: 2px solid #0070E0 !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* 4d. Path pill hover + focus */
html body[class] .wuc-v5-panel .wuc-v5-path-pill {
  transition: background-color .15s ease-out, color .15s ease-out !important;
}
html body[class] .wuc-v5-panel .wuc-v5-path-pill:hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #0070E0 !important;
}

/* 4e. Ghost CTA hover */
html body[class] .wuc-v5-panel .wuc-v5-cta-ghost {
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out !important;
}
html body[class] .wuc-v5-panel .wuc-v5-cta-ghost:hover {
  background: rgba(4, 8, 15, 0.04) !important;
  background-color: rgba(4, 8, 15, 0.04) !important;
  border-color: #0070E0 !important;
  color: #0070E0 !important;
}

/* 4f. Spotlight CTA hover (See packaging) — underline thickness bump */
html body[class] .wuc-v5-panel .wuc-v5-spotlight-cta {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s ease-out, color .15s ease-out !important;
}
html body[class] .wuc-v5-panel .wuc-v5-spotlight-cta:hover {
  text-decoration-thickness: 2px !important;
  color: #ffffff !important;
  opacity: 0.9;
}

/* Nav trigger — tighter transition property list instead of "all" */
html body[class] .wuc-v5-header .wuc-v5-nav-trigger {
  transition: color .15s ease-out, background-color .15s ease-out !important;
}

/* Respect reduced motion — zero out interaction transitions */
@media (prefers-reduced-motion: reduce) {
  html body[class] .wuc-v5-panel .wuc-v5-mega-link,
  html body[class] .wuc-v5-panel .wuc-v5-path-pill,
  html body[class] .wuc-v5-panel .wuc-v5-cta-ghost,
  html body[class] .wuc-v5-panel .wuc-v5-spotlight-cta,
  html body[class] .wuc-v5-header .wuc-v5-nav-trigger {
    transition: none !important;
  }
}

/* =========================================================
   FIX 5 — Conversion Optimization (6 items)
   5a Primary spotlight CTA → white pill button
   5b Arrow affordance after spotlight CTA
   5c Spotlight card depth (layered shadow)
   5d Bullet divider between ghost CTA and meta
   5e Trust bar rhythm (gap + letter-spacing)
   5f Ghost CTA hover → brand-blue border + color
   ========================================================= */

/* 5a — Spotlight CTA as white pill button */
html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: #ffffff !important;
  color: #0070E0 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.1px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06) !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out !important;
  margin-top: 4px !important;
}
html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta:hover {
  transform: translateY(-1px) !important;
  background: #F8FBFF !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 6px 14px rgba(0,0,0,0.10) !important;
  text-decoration: none !important;
}
html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* 5b — Arrow affordance */
html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta::after {
  content: "\2192";
  display: inline-block;
  font-weight: 700;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta:hover::after {
  transform: translateX(3px);
}

/* 5c — Spotlight card depth */
html body[class] [id^="wuc-v5-panel-"] .wuc-v5-spotlight {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 1px 2px rgba(0, 40, 90, 0.12),
    0 10px 28px rgba(0, 40, 90, 0.18) !important;
}

/* 5d — Bullet divider between ghost CTA and meta */
html body[class] .wuc-v5-cta-ghost .wuc-v5-ghost-meta::before {
  content: "\00B7";
  display: inline-block;
  margin: 0 8px 0 6px;
  color: rgba(100, 116, 139, 0.6);
  font-weight: 700;
}

/* 5e — Trust bar rhythm */
html body[class] .wuc-v5-spotlight .wuc-v5-trust-bar {
  gap: 8px !important;
  padding-bottom: 14px !important;
  margin-bottom: 4px !important;
}
html body[class] .wuc-v5-spotlight .wuc-v5-trust-badge {
  letter-spacing: 0.3px !important;
  padding: 3px 8px !important;
}

/* 5f — Ghost CTA hover: brand-blue border + color */
html body[class] .wuc-v5-cta-ghost {
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out !important;
}
html body[class] .wuc-v5-cta-ghost:hover {
  border-color: rgba(0, 112, 224, 0.45) !important;
  color: #0070E0 !important;
  box-shadow: 0 1px 2px rgba(0, 112, 224, 0.08), 0 3px 8px rgba(0, 112, 224, 0.10) !important;
}
html body[class] .wuc-v5-cta-ghost:hover .wuc-v5-ghost-meta {
  color: rgba(0, 112, 224, 0.75) !important;
}

/* Reduced motion — freeze arrow + lift */
@media (prefers-reduced-motion: reduce) {
  html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta,
  html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta::after,
  html body[class] .wuc-v5-cta-ghost {
    transition: none !important;
  }
  html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta:hover {
    transform: none !important;
  }
  html body[class] .wuc-v5-spotlight .wuc-v5-spotlight-cta:hover::after {
    transform: none !important;
  }
}

/* =========================================================
   FIX 6 — Accessibility & WCAG 2.2 AA (6 items)
   6a sr-only utility + decorative pulse neutralization
   6b scroll-padding to keep focus clear of sticky header
   6c hidden-panel descendants non-focusable (CSS half; JS sets inert)
   6d forced-colors mode hardening
   6e spotlight contrast floor (solid brand blue)
   6f focus underline + 44x44 hit-area enforcement
   ========================================================= */

/* 6a — Visually-hidden utility + silence decorative pulse visuals */
.wuc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
html body[class] .wuc-v5-ai-pulse,
html body[class] .wuc-v5-ai-dot {
  pointer-events: none;
}
/* Belt-and-braces: if aria-hidden is missing these still don't expose text */
html body[class] .wuc-v5-ai-pulse::before,
html body[class] .wuc-v5-ai-pulse::after {
  content: none !important;
}

/* 6b — Focus-not-obscured: keep focused target below sticky header */
html {
  scroll-padding-top: 96px;
}
html body[class] [id^="wuc-v5-panel-"] a:focus-visible,
html body[class] [id^="wuc-v5-panel-"] button:focus-visible,
html body[class] [id^="wuc-v5-panel-"] .wuc-v5-path-pill:focus-visible {
  scroll-margin-top: 120px;
}

/* 6c — Hidden panels must not expose focus targets (CSS belt; JS adds `inert`) */
html body[class] [id^="wuc-v5-panel-"][aria-hidden="true"] a,
html body[class] [id^="wuc-v5-panel-"][aria-hidden="true"] button,
html body[class] [id^="wuc-v5-panel-"][aria-hidden="true"] [tabindex] {
  visibility: hidden;
}
html body[class] [id^="wuc-v5-panel-"][aria-hidden="false"] a,
html body[class] [id^="wuc-v5-panel-"][aria-hidden="false"] button,
html body[class] [id^="wuc-v5-panel-"][aria-hidden="false"] [tabindex] {
  visibility: visible;
}

/* 6d — Forced-colors / Windows High Contrast */
@media (forced-colors: active) {
  html body[class] .wuc-v5-nav-trigger,
  html body[class] .wuc-v5-cta-ghost,
  html body[class] .wuc-v5-spotlight-cta,
  html body[class] .wuc-v5-path-pill {
    border: 1px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
    forced-color-adjust: none;
  }
  html body[class] .wuc-v5-nav-trigger:focus-visible,
  html body[class] .wuc-v5-cta-ghost:focus-visible,
  html body[class] .wuc-v5-spotlight-cta:focus-visible,
  html body[class] [id^="wuc-v5-panel-"] a:focus-visible,
  html body[class] .wuc-v5-path-pill:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
  html body[class] .wuc-v5-ai-pulse,
  html body[class] .wuc-v5-ai-dot {
    background: CanvasText !important;
    border-color: CanvasText !important;
  }
  html body[class] [id^="wuc-v5-panel-"] {
    border-top-color: CanvasText !important;
  }
}

/* 6e — Spotlight contrast floor: solid brand blue (no rgba alpha) */
html body[class] [id^="wuc-v5-panel-"] .wuc-v5-spotlight {
  background-color: #0070E0 !important;
}

/* 6f — Focus underline on link title + 44x44 hit area */
html body[class] [id^="wuc-v5-panel-"] a:focus-visible .wuc-v5-mega-link-title,
html body[class] [id^="wuc-v5-panel-"] a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
html body[class] .wuc-v5-nav-trigger {
  min-block-size: 44px;
}
html body[class] .wuc-v5-path-pill {
  min-block-size: 32px; /* pills are small by design; keep ≥32px for AAA touch */
  display: inline-flex;
  align-items: center;
}

/* Reduced motion respect: no new motion in fix 6 */

/* =========================================================
   FIX 7 — Performance & Core Web Vitals (6 items)
   7a will-change scoping (no permanent GPU reservation)
   7b pulse animation gated by page-visibility
   7c transition-property list (kill transition:all in nav)
   7d content-visibility on hidden panels
   7e containment + content-visibility on mega-link SVGs
   7f font-display swap belt-and-braces
   ========================================================= */

/* 7a — Scope will-change only while interacting (not permanently) */
html body[class] [id^="wuc-v5-panel-"] {
  will-change: auto;
}
html body[class] [id^="wuc-v5-panel-"][aria-hidden="false"],
html body[class] .wuc-v5-nav-trigger[aria-expanded="true"] + [id^="wuc-v5-panel-"],
html body[class] .wuc-v5-nav-item:hover [id^="wuc-v5-panel-"] {
  will-change: opacity, transform;
}

/* 7b — Pause infinite pulse when tab is backgrounded or user prefers reduced motion */
html.wuc-page-hidden body[class] .wuc-v5-ai-pulse::before,
html.wuc-page-hidden body[class] .wuc-v5-ai-pulse::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  html body[class] .wuc-v5-ai-pulse::before,
  html body[class] .wuc-v5-ai-pulse::after {
    animation-play-state: paused !important;
    animation: none !important;
  }
}

/* 7c — Constrain nav transitions to compositor-friendly properties only */
html body[class] #wucMainNav *,
html body[class] [id^="wuc-v5-panel-"] * {
  transition-property: background-color, color, border-color, opacity, transform, box-shadow, outline-color, text-decoration-color;
}
/* Preserve our specific transitions explicitly (re-declare where needed) */
html body[class] [id^="wuc-v5-panel-"] .wuc-v5-mega-link,
html body[class] [id^="wuc-v5-panel-"] .wuc-v5-path-pill,
html body[class] .wuc-v5-cta-ghost,
html body[class] .wuc-v5-spotlight-cta {
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* 7d — content-visibility on hidden panels (skip rendering work) */
html body[class] [id^="wuc-v5-panel-"][aria-hidden="true"] {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}
/* Open panel returns to normal so animations/focus behave */
html body[class] [id^="wuc-v5-panel-"][aria-hidden="false"] {
  content-visibility: visible;
}

/* 7e — Per-card containment (render isolation) */
html body[class] [id^="wuc-v5-panel-"] .wuc-v5-mega-link {
  contain: layout paint style;
}
html body[class] [id^="wuc-v5-panel-"] svg {
  content-visibility: auto;
  contain-intrinsic-size: 24px 24px;
}

/* 7f — Belt-and-braces font-display for Inter (in case any @font-face missed it) */
@supports (font-display: swap) {
  :root { font-display: swap; }
}

/* Spotlight card — WUC Deep Navy override (supersedes Fix 6e) */
html body[class] [id^="wuc-v5-panel-"] .wuc-v5-spotlight {
  background-color: #0B3A8C !important;
  border-color: #0B3A8C !important;
}