/**
 * Phase M3 – Enterprise SaaS Navigation (Polish Pass 2 - Native)
 * Scoped entirely to header#main-header. Staging only.
 * Pure CSS dropdowns.
 */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
header#main-header {
  --akr-brand:        #0a4181;
  --akr-brand-dark:   #083670;
  --akr-hover-bg:     #EEF4FF;
  --akr-text:         #1E293B;
  --akr-text-2:       #4A5568;
  --akr-muted:        #94A3B8;
  --akr-border:       #E8EEF6;
  --akr-surface:      #ffffff;
  --akr-bg-subtle:    #F8FAFC;
  --akr-radius:       12px;
  --akr-item-radius:  6px;
  --akr-shadow:       0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(15,23,42,0.10), 0 0 0 1px rgba(15,23,42,0.03);
  --akr-speed:        175ms;
  --akr-fn:           cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── HEADER WRAPPER ─────────────────────────────────────────── */
header#main-header {
  box-shadow: 0 1px 0 #E8EEF4, 0 2px 12px rgba(15,23,42,0.04) !important;
  background: #ffffff !important;
}

header#main-header .main-header {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── NAV BAR ALIGNMENT ──────────────────────────────────────── */
header#main-header nav#site-navigation {
  height: 66px !important;
  min-height: 66px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

header#main-header nav#site-navigation > .container,
header#main-header nav#site-navigation > .container > .row,
header#main-header nav#site-navigation > .container > .row > [class*='col'] {
  display: flex !important;
  align-items: center !important;
  height: 66px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

header#main-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: 66px !important;
  padding: 0 !important;
  margin: 0 !important;
}
header#main-header .navbar-brand img.logo {
  max-height: 38px !important;
  width: auto !important;
  display: block !important;
}

/* PRIORITY 1: Header Alignment - Move nav slightly right */
header#main-header #navbarSupportedContent {
  display: flex !important;
  align-items: center !important;
  height: 66px !important;
  padding: 0 8px 0 60px !important; /* Increased left padding from 40px to 60px */
  margin: 0 !important;
}

header#main-header #top-menu {
  display: flex !important;
  align-items: center !important;
  height: 66px !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 20px 0 auto !important; /* Push slightly right, keeping space from CTA */
  list-style: none !important;
  flex-wrap: nowrap !important;
}

header#main-header #top-menu > li {
  display: flex !important;
  align-items: center !important;
  height: 66px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* ── TOP-LEVEL NAV LINKS ────────────────────────────────────── */
header#main-header #top-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 66px !important;
  padding: 0 13px !important;
  font-size: 15px !important; /* Priority 3: Increased from 14px */
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--akr-text-2) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color var(--akr-speed) ease !important;
}

header#main-header #top-menu > li > a:hover {
  color: var(--akr-brand) !important;
}

/* Kill ALL theme pseudo-element dividers/separators */
header#main-header #top-menu > li::before,
header#main-header #top-menu > li::after,
header#main-header #top-menu > li + li::before {
  display: none !important;
}

/* CHEVRON */
header#main-header #top-menu > li.menu-item-has-children > a::after {
  content: '' !important;
  display: inline-flex !important;
  align-self: center !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  flex-shrink: 0 !important;
  margin-left: 3px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform var(--akr-speed) var(--akr-fn), background-image var(--akr-speed) ease !important;
}

header#main-header #top-menu > li:hover > a::after,
header#main-header #top-menu > li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a4181' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* ── HIRE US CTA BUTTON ─────────────────────────────────────── */
header#main-header .iq-btn-container,
header#main-header .iq-btn-container a,
header#main-header a.iq-button,
header#main-header .nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

header#main-header .iq-btn-container a,
header#main-header a.iq-button,
header#main-header .nav-btn {
  padding: 9px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
  background: var(--akr-brand) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(10,65,129,0.15) !important;
  transition: background var(--akr-speed) ease, transform 140ms ease, box-shadow var(--akr-speed) ease !important;
}
header#main-header .iq-btn-container a:hover,
header#main-header a.iq-button:hover,
header#main-header .nav-btn:hover {
  background: var(--akr-brand-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(10,65,129,0.25) !important;
}

/* =========================================================================
   DESKTOP DROPDOWN STYLES (Native Xamin 2-Column Architecture)
   ========================================================================= */
@media (min-width: 1200px) {
  /* Ensure all 2-column dropdowns (Services, Solutions, etc.) render cleanly */
  header#main-header #top-menu > li.menu-item-has-children > ul.sub-menu {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  }

  header#main-header #top-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    color: var(--akr-text-2) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 26px !important;
    padding: 10px 18px !important;
    display: block !important;
    transition: color var(--akr-speed) ease, background var(--akr-speed) ease !important;
  }

  header#main-header #top-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover {
    color: var(--akr-brand) !important;
    background: var(--akr-hover-bg) !important;
  }
}