/*
 * AInovaq Global CSS — loaded on every page (home, articles, legal, archive).
 * Contains cross-page components: nav dropdown, shared overrides.
 */

/* ══════════════════════════════════════════════════════════
   OVERFLOW FIX — prevents hero__glow (700px abs element) from
   causing horizontal scroll on Android Chrome.
   Parent theme sets overflow-x:hidden on body only; Android Chrome
   requires it on html too.
   ══════════════════════════════════════════════════════════ */
html {
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL FONT OVERRIDE — force Inter (sans-serif) everywhere
   ══════════════════════════════════════════════════════════ */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, td, th, blockquote, figcaption,
input, textarea, select, button,
.blog-archive__title,
.blog-archive__subtitle,
.blog-card__title,
.blog-card__subtitle {
  font-family: 'Inter', 'InterFallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   INSIGHTS NAV DROPDOWN
   ══════════════════════════════════════════════════════════ */
.nav__item--has-dropdown {
  position: relative;
}

/* Invisible bridge — fills the gap between nav item bottom and dropdown top so
   hover state is never lost while the mouse travels down (Safari-safe) */
.nav__item--has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 16px;
}

/* caret triangle */
.nav__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform 0.2s ease;
  vertical-align: middle;
  margin-left: 3px;
  margin-top: -1px;
}

.nav__item--has-dropdown:hover .nav__caret,
.nav__item--has-dropdown:focus-within .nav__caret {
  transform: rotate(180deg);
}

/* dropdown panel */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #ffffff;
  border: 1px solid #EEF0F6;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 29, 82, 0.13);
  padding: 14px 6px 6px;
  min-width: 290px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 150ms delay before hiding — gives mouse time to travel from link to panel */
  transition: opacity 0.18s ease 0.15s, transform 0.18s ease 0.15s, visibility 0.18s ease 0.15s;
  z-index: 500;
}

.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* show immediately, no delay */
  transition: opacity 0.18s ease 0s, transform 0.18s ease 0s, visibility 0.18s ease 0s;
}

/* dropdown items */
.nav__dropdown li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__dropdown li a {
  display: block;
  padding: 9px 13px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #4A5568 !important;
  border-radius: 9px;
  text-decoration: none !important;
  line-height: 1.45;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 290px;
}

.nav__dropdown li a:hover {
  background: #F0F4FF;
  color: #243C8F !important;
}

.nav__dropdown__divider {
  height: 1px;
  background: #EEF0F6;
  margin: 5px 8px;
}

.nav__dropdown__all a {
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #243C8F !important;
  letter-spacing: 0.02em;
}

.nav__dropdown__all a:hover {
  background: #EBF0FF !important;
}

/* ══ Mobile — fix dropdown overflow on ALL pages ══
   Keeps nav__dropdown out of absolute flow on mobile so it never
   contributes to page scroll-width (fixes home page horizontal overflow). */
@media (max-width: 900px) {
  .nav__item--has-dropdown .nav__dropdown {
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
  .nav__caret          { display: none !important; }
  .nav__dropdown__divider { display: none; }
}

/* ══ Hamburger animation (article pages only) ══ */
@media (max-width: 900px) {
  body.has-blog-header .nav__hamburger span {
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
  }
  body.has-blog-header .nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.has-blog-header .nav__hamburger.open span:nth-child(2) { opacity: 0; }
  body.has-blog-header .nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ══ Mobile nav overlay — completely independent of parent theme nav CSS ══ */
#mob-nav {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  background: #0F1D52;
  z-index: 99999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px 48px;
  box-sizing: border-box;
}
#mob-nav.open { display: block; }

#mob-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#mob-nav li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#mob-nav li:last-child { border-bottom: none; }
#mob-nav li a {
  display: block;
  padding: 18px 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  line-height: 1.4;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
#mob-nav li a:hover {
  color: rgba(255,255,255,0.75) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.75) !important;
}

/* Blogs sub-links inside overlay */
#mob-nav .nav__dropdown {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 0 !important;
  width: 100%;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0 0 8px 14px;
  transition: none !important;
}
#mob-nav .nav__dropdown li { border-bottom: none; }
#mob-nav .nav__dropdown a {
  padding: 6px 0 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.6) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.6) !important;
}
#mob-nav .nav__dropdown a:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#mob-nav .nav__dropdown__divider { display: none; }
#mob-nav .nav__caret { display: none !important; }

/* Talk to Experts CTA at bottom */
#mob-nav .mob-cta {
  margin-top: 32px;
  border-bottom: none !important;
}
#mob-nav .mob-cta a {
  display: block;
  text-align: center;
  padding: 14px 24px !important;
  border-radius: 10px;
  background: linear-gradient(135deg, #243C8F 0%, #70C3C5 100%) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#mob-nav .mob-cta a:hover { opacity: 0.88; }

/* Landscape phone */
@media (max-width: 900px) and (orientation: landscape) {
  #mob-nav { top: 56px; padding: 12px 28px 24px; }
  #mob-nav li a { padding: 13px 0; font-size: 0.95rem; }
}

/* ══ Home page mobile nav overlay (mirrors #mob-nav on blog pages) ══ */
#mob-nav-home {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  background: #0F1D52;
  z-index: 99999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px 48px;
  box-sizing: border-box;
}
#mob-nav-home.open { display: block; }
#mob-nav-home ul { list-style: none; margin: 0; padding: 0; }
#mob-nav-home li { border-bottom: 1px solid rgba(255,255,255,0.1); }
#mob-nav-home li:last-child { border-bottom: none; }
#mob-nav-home li a {
  display: block;
  padding: 18px 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  background: none !important;
}
#mob-nav-home li a:hover {
  color: rgba(255,255,255,0.75) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.75) !important;
}
#mob-nav-home .mob-home-cta { margin-top: 24px; border-bottom: none !important; }
#mob-nav-home .mob-home-cta a {
  display: block;
  text-align: center;
  padding: 14px 24px !important;
  border-radius: 10px;
  background: linear-gradient(135deg, #243C8F 0%, #70C3C5 100%) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}
@media (max-width: 900px) and (orientation: landscape) {
  #mob-nav-home { top: 56px; padding: 12px 28px 24px; }
  #mob-nav-home li a { padding: 13px 0; font-size: 0.95rem; }
}

/* ══ Home page mobile nav fixes ══ */

/* Hide the CTA list item from the desktop horizontal nav row */
.nav__cta-mobile { display: none; }

/* Show it inside the open mobile menu, styled as a button */
@media (max-width: 768px) {
  /* Hamburger must sit above the open nav overlay (z-index: 6999)
     so the X is actually clickable */
  .nav__hamburger {
    position: relative;
    z-index: 7000 !important;
  }

  /* Force ALL nav items to be clearly visible when menu is open.
     Parent CSS uses --muted (#7a8db5 light gray) as the default link
     color — on a bright white mobile screen this looks nearly invisible,
     making users think only the .active (blue) item exists. */
  .nav__links.open > li {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav__links.open > li > a {
    display: block !important;
    color: #1a2035 !important;
    -webkit-text-fill-color: #1a2035 !important;
    opacity: 1 !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }

  .nav__links.open > li:last-child > a {
    border-bottom: none;
  }

  .nav__links.open > li > a.active {
    color: #243c8f !important;
    -webkit-text-fill-color: #243c8f !important;
    font-weight: 700 !important;
  }

  .nav__links.open .nav__cta-mobile {
    display: block !important;
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 16px;
  }

  .nav__links.open .nav__cta-mobile a {
    display: block;
    padding: 14px 24px !important;
    border-radius: 10px;
    background: linear-gradient(135deg, #243C8F 0%, #70C3C5 100%);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-align: center;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    border-bottom: none !important;
  }
}

/* ══ Home page footer — tighten Blogs heading gap ══ */
.footer__col h4 {
  margin-bottom: 8px !important;
}
.footer__col ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ══ Home page footer — text brand name, no logo pill ══ */
.footer__logo-pill {
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.01em;
}

.footer__logo-pill img {
  display: none !important;
}