/* =========================================
   Header & Navigation
   Token-based overrides
   ========================================= */

/* ---------- Desktop dropdown ---------- */

.nav-item.onhover-dropdown {
  position: relative !important;
  padding-bottom: 12px;
}

.nav-item.onhover-dropdown > .nav-link {
  position: relative;
  z-index: 1002;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.nav-item.onhover-dropdown .onhover-show-div {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;

  width: 100%;
  min-width: 220px !important;
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  text-align: right !important;

  background-color: var(--surface-card, #ffffff) !important;
  border-radius: 10px !important;
  box-shadow: var(--ds-shadow-md, 0 4px 12px rgba(11, 31, 77, 0.1)) !important;

  z-index: 1001 !important;

  transform: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}

.nav-item.onhover-dropdown .onhover-show-div li {
  width: 100%;
}

.nav-item.onhover-dropdown .onhover-show-div .dropdown-item {
  display: block !important;
  padding: 10px 18px !important;

  white-space: nowrap;
  text-align: right;

  color: var(--text-body, #363e55) !important;
  background-color: transparent !important;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.nav-item.onhover-dropdown:hover > .onhover-show-div,
.nav-item.onhover-dropdown:focus-within > .onhover-show-div,
.nav-item.onhover-dropdown .onhover-show-div:hover {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s;
}

.nav-item.onhover-dropdown .onhover-show-div .dropdown-item:hover,
.nav-item.onhover-dropdown .onhover-show-div .dropdown-item:focus-visible {
  background-color: var(--surface-background, #f7f7fa) !important;
  color: var(--text-heading, #1a2238) !important;
}

/* Invisible bridge between trigger and dropdown */

.nav-item.onhover-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 14px;
  z-index: 1000;
}

/* Services dropdown */

.nav-services {
  position: relative !important;
}

.nav-services > .onhover-show-div {
  top: 100% !important;
  right: 0 !important;
  margin-top: 0 !important;
}

/* Header stacking context */

.theme-color-5 .header-style-1,
header.header-style-1 {
  position: relative !important;
}

.header-style-1 {
  z-index: 1050;
}

.header-style-1 .main-menu {
  z-index: 1050;
}

/* ---------- Mobile accordion ---------- */

.mobile-accordion .accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: var(--text-primary, #1a2238);
  font-weight: 600;
}

.mobile-accordion .accordion-arrow {
  color: var(--text-secondary, #5f6679);
  transition:
    transform 0.3s ease,
    color 0.18s ease;
}

.mobile-accordion.is-open .accordion-toggle,
.mobile-accordion.is-open .accordion-arrow {
  color: var(--theme-color, var(--brand-primary, #003399));
}

.mobile-accordion.is-open .accordion-arrow {
  transform: rotate(180deg);
}

.mobile-accordion .accordion-panel {
  list-style: none;
  margin: 10px;
  padding: 0;

  border-radius: 10px;
  overflow: hidden;

  background-color: var(--surface-background, #f7f7fa);

  transition: max-height 0.3s ease;
}

.mobile-accordion.is-open .accordion-panel {
  max-height: 500px;
}

.mobile-accordion .accordion-panel > li {
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-accordion .accordion-panel > li > a {
  display: block !important;

  padding: 11px 24px 11px 16px !important;
  margin: 0 !important;

  color: var(--text-secondary, #5f6679);
  font-size: 0.92em;
  line-height: 1.7;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.mobile-accordion .accordion-panel > li > a:hover,
.mobile-accordion .accordion-panel > li > a:focus-visible {
  background-color: var(--surface-card, #ffffff);
  color: var(--text-heading, #1a2238);
}