/* =====================================================
   MPX – CHANGE HEADER ON SCROLL
   Dual headers • SEO safe • Elementor
===================================================== */

.mpx-no-trans {
  transition: none !important;
}

/* Primary Header */
.mpx-header-primary.mpx-is-sticky {
  position: fixed;
  top: var(--mpx-admin-offset);
  left: 0;
  right: 0;
  z-index: 10000; /* Primary above secondary */
  
  transform: translateY(-110%);
  transition: transform var(--mpx-anim-ms) ease;
  will-change: transform;
}

.mpx-header-primary.mpx-is-sticky.mpx-show {
  transform: translateY(0);
}

/* Secondary Header */
.mpx-header-secondary.mpx-is-sticky {
  position: fixed;
  top: var(--mpx-admin-offset);
  left: 0;
  right: 0;
  z-index: 9999; /* Secondary below primary */
  
  transform: translateY(-110%);
  transition: transform var(--mpx-anim-ms) ease;
  will-change: transform;
}

.mpx-header-secondary.mpx-is-sticky.mpx-show {
  transform: translateY(0);
}

/* =====================================================
   LOGO SWAP (OPTIONAL)
   Apply to both headers
===================================================== */

/* Primary logo swap */
.mpx-header-primary .logo-2 { display: none; }
.header-scrolled.mpx-header-primary .logo-1 { display: none; }
.header-scrolled.mpx-header-primary .logo-2 { display: inline-block; }

/* Secondary logo swap (if needed) */
.mpx-header-secondary .logo-secondary-2 { display: none; }
.header-scrolled.mpx-header-secondary .logo-secondary-1 { display: none; }
.header-scrolled.mpx-header-secondary .logo-secondary-2 { display: inline-block; }

/* =====================================================
   BASE STRUCTURE
===================================================== */

.mpx-header__inner {
  width: 100%;
  margin: 0 auto;
}

.header-scrolled.mpx-header .e-con-inner {
  position: relative;
}

/* =====================================================
   PRIMARY HEADER - SHRINK MODE
===================================================== */

.header-scrolled.mpx-header-primary:not([data-header-mode]),
.header-scrolled.mpx-header-primary[data-header-mode="shrink"] {
  background: var(--primary-shrink-bg);
  backdrop-filter: blur(var(--primary-shrink-blur));
  box-shadow: var(--primary-shrink-shadow);
}

.header-scrolled.mpx-header-primary:not([data-header-mode]) .e-con-inner,
.header-scrolled.mpx-header-primary[data-header-mode="shrink"] .e-con-inner {
  padding-top: var(--primary-shrink-pad-y);
  padding-bottom: var(--primary-shrink-pad-y);
}

.header-scrolled.mpx-header-primary:not([data-header-mode]) .mpx-header__inner,
.header-scrolled.mpx-header-primary[data-header-mode="shrink"] .mpx-header__inner {
  max-width: none;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* =====================================================
   SECONDARY HEADER - SHRINK MODE
===================================================== */

.header-scrolled.mpx-header-secondary:not([data-header-mode]),
.header-scrolled.mpx-header-secondary[data-header-mode="shrink"] {
  background: var(--secondary-shrink-bg);
  backdrop-filter: blur(var(--secondary-shrink-blur));
  box-shadow: var(--secondary-shrink-shadow);
}

.header-scrolled.mpx-header-secondary:not([data-header-mode]) .e-con-inner,
.header-scrolled.mpx-header-secondary[data-header-mode="shrink"] .e-con-inner {
  padding-top: var(--secondary-shrink-pad-y);
  padding-bottom: var(--secondary-shrink-pad-y);
}

.header-scrolled.mpx-header-secondary:not([data-header-mode]) .mpx-header__inner,
.header-scrolled.mpx-header-secondary[data-header-mode="shrink"] .mpx-header__inner {
  max-width: none;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* Secondary Header Nested Menu - Link Color on Scroll */
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-title {
  /* This targets the entire menu item container */
}

.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-title:hover .e-n-menu-title-container,
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-title:hover .e-n-menu-title-text,
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-title:hover .e-n-menu-dropdown-icon i {
  color: var(--secondary-menu-color-hover) !important;
}

/* Default state (when not hovering) */
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-title-container,
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-title-text,
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-dropdown-icon i {
  color: var(--secondary-menu-color) !important;
  transition: color var(--mpx-anim-ms) ease !important;
}

/* Also handle when hovering the dropdown icon directly */
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .e-n-menu-dropdown-icon:hover i {
  color: var(--secondary-menu-color-hover) !important;
}

/* =====================================================
   SMOOTH VISUAL POLISH
===================================================== */

.header-scrolled .mpx-header__inner {
  transition:
    padding 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

/* Spacer styling */
.mpx-header-spacer {
  transition: height var(--mpx-anim-ms) ease;
  pointer-events: none;
}