/* ============================================================
   WiseIQ Nav Fixes — v1
   Fixes: (1) logo clipping, (2) nav centering, (3) dropdown overflow
   ============================================================ */

/* ── 1. Logo: stop clipping, use contain so full mark is visible ── */
.nav-logo-mark {
  width: auto !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: transparent !important;
  overflow: visible !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
}

.nav-logo-mark img {
  width: auto !important;
  height: 36px !important;
  max-width: 120px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 6px !important;
}

.nav-logo-mark svg {
  display: none !important;
}

/* ── 2. Nav centering: nav-inner uses flex with logo left, links centered, actions right ── */
.nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: var(--max-w, 1280px) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  gap: 0 !important;
  overflow: visible !important;
}

/* Logo stays left, fixed width so links can center */
.nav-logo {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  margin-right: 0 !important;
}

/* Nav links: take all available space, centered between logo and actions */
nav.nav-links {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  min-width: 0 !important;
}

/* Actions (CTA button + search): stay right, fixed width */
.nav-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
}

/* ── 3. Dropdown: prevent left-edge overflow ── */
/* The mega panel uses left:50% + translateX(-50%) relative to its trigger.
   When the trigger is the first item (Credit Cards), the panel overflows left.
   Fix: clamp the panel to never go left of 0, and use left:0 + no transform
   for the first dropdown trigger. */

/* General: ensure the wrapper is positioned so panel can be clamped */
.nav-mega-wrapper {
  position: relative !important;
}

/* Default panel: centered under trigger */
.nav-mega-panel {
  left: 50% !important;
  transform: translateX(-50%) translateY(6px) !important;
  min-width: 480px !important;
  max-width: 560px !important;
}

.nav-mega-panel.open {
  transform: translateX(-50%) translateY(0) !important;
}

/* First dropdown (Credit Cards): anchor to left edge of trigger, not center */
.nav-mega-wrapper:first-of-type .nav-mega-panel {
  left: 0 !important;
  transform: translateY(6px) !important;
}

.nav-mega-wrapper:first-of-type .nav-mega-panel.open {
  transform: translateY(0) !important;
}

/* Second dropdown (Personal Loans): slight left offset to stay on screen */
.nav-mega-wrapper:nth-of-type(2) .nav-mega-panel {
  left: -20px !important;
  transform: translateY(6px) !important;
}

.nav-mega-wrapper:nth-of-type(2) .nav-mega-panel.open {
  transform: translateY(0) !important;
}