/* =====================================================
   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;
}

/* =====================================================
   PRIMARY HEADER - NAV MENU COLORS ON SCROLL
===================================================== */

/* Default state (when scrolled) */
.header-scrolled.mpx-header-primary .elementor-nav-menu a {
  color: var(--primary-menu-color) !important;
  transition: color var(--mpx-anim-ms) ease !important;
}

/* Hover state */
.header-scrolled.mpx-header-primary .elementor-nav-menu a:hover {
  color: var(--primary-menu-color-hover) !important;
}

/* Active menu item (current page) */
.header-scrolled.mpx-header-primary .elementor-nav-menu a.elementor-item-active {
  color: var(--primary-menu-color-hover) !important;
}


/* =====================================================
   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 - NAV MENU COLORS ON SCROLL
   For Elementor standard nav menu (not mega menu)
===================================================== */

/* Default state (when scrolled) */
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .elementor-nav-menu a {
  color: var(--secondary-menu-color) !important;
  transition: color var(--mpx-anim-ms) ease !important;
}

/* Hover state */
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .elementor-nav-menu a:hover {
  color: var(--secondary-menu-color-hover) !important;
}

/* Active menu item (current page) */
.header-scrolled.mpx-header-secondary .mpx-nav-secondary .elementor-nav-menu a.elementor-item-active {
  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;
}

/* =====================================================
   HEADER CLASSES & VARIABLES GUIDE (Elementor)
   -----------------------------------------------------
   This CSS/JS pair controls dual headers with scroll 
   animations and optional logo swaps.

   FILE LOCATIONS:
     CSS (header styles): assets/css/header-menu.css
     JS (header logic):  assets/js/header-menu.js
     CSS Variables:      assets/css/vars.css

   1. Header Containers:
      - Primary header: add class `mpx-header-primary`
      - Secondary header: add class `mpx-header-secondary`
      How to add in Elementor:
        a. Edit your header template
        b. Select the Section/Container that is the header
        c. Go to Advanced → CSS Classes
        d. Enter the correct class above

   2. Logos (optional logo swap on scroll):
      Primary header:
        - Default logo: `logo-1`
        - Scroll/alternate logo: `logo-2`
      Secondary header:
        - Default logo: `logo-secondary-1`
        - Scroll/alternate logo: `logo-secondary-2`
      Notes:
        - Place these classes on the <img> tags of your logos
        - JS automatically toggles visibility on scroll

   3. Variables (for colors, paddings, shadows, etc.):
      - All variables are defined in: assets/css/vars.css
      - Examples:
          --primary-shrink-bg          → Primary header background on scroll
          --secondary-shrink-bg        → Secondary header background on scroll
          --secondary-menu-color       → Menu link color when scrolled
          --secondary-menu-color-hover → Menu link hover color when scrolled
      - Edit vars.css to change colors, spacing, shadows, font sizes, etc.

   4. JS-Managed Classes (do not add manually):
        - `header-scrolled` → added when page scroll passes threshold
        - `mpx-is-sticky` → added when header becomes sticky
        - `mpx-show` → triggers header show animation
        - `mpx-no-trans` → temporarily disables transitions during toggle

   5. Spacer:
        - JS inserts a spacer div after header automatically
        - Ensures smooth scroll and layout preservation

   6. Notes:
        - Both CSS and JS files are required for proper behavior
        - Ensure header containers have the correct class, else JS/CSS won't work
        - Logo swap requires both logo images to exist with proper classes
        - Animation duration and scroll thresholds are configured in JS

   ===================================================== */