/*
 * Shared Edunexa header/off-canvas presentation.
 * The Animation Addons widget supplies the markup and state classes; this
 * file only restores the approved visual treatment and responsive behavior.
 */

:root {
  --edunexa-nav-purple: #7562bd;
  --edunexa-nav-purple-dark: #6551ae;
  --edunexa-nav-line: #cfc5eb;
}

/* CTA items must never occupy horizontal-nav space. */
.wcf__nav-menu .edunexa-nav-cta-item,
.wcf__nav-menu .edunexa-header-cta {
  display: none !important;
}

/* Keep the native desktop menu unchanged apart from the removed CTA items. */
.wcf__nav-menu .wcf-menu-hamburger,
.wcf__nav-menu .wcf-menu-close {
  box-sizing: border-box;
}

/* Keep the shared header and desktop hover submenus above page sections whose
 * Elementor motion settings create their own stacking contexts. */
.edunexa-navigation-layer {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Some Elementor pages wrap the header in a transformed pin-spacer. Raise
 * that containing stacking context too; a child z-index cannot escape a
 * lower parent context when the first content section is above it. */
.pin-spacer:has(.edunexa-navigation-layer),
.elementor-element:has(> .e-con-inner.edunexa-navigation-layer),
.elementor-element:has(> .edunexa-navigation-layer) {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.edunexa-navigation-layer .wcf__nav-menu,
.edunexa-navigation-layer .wcf__nav-menu.desktop-menu-active,
.edunexa-navigation-layer .wcf__nav-menu.desktop-menu-active .sub-menu {
  z-index: 2147483001 !important;
}

.edunexa-navigation-layer .wcf__nav-menu,
.edunexa-navigation-layer .wcf-nav-menu-container,
.edunexa-navigation-layer .wcf-nav-menu-nav {
  overflow: visible !important;
}

@media (min-width: 1201px) {
  /* The shared markup keeps drawer controls available for the responsive
   * script; hide those controls on the desktop presentation. */
  .edunexa-site-header .wcf-menu-hamburger,
  .edunexa-site-header .wcf-menu-close,
  .edunexa-site-header .wcf-menu-overlay {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  body.edunexa-mobile-menu-open .edunexa-navigation-layer,
  body.edunexa-mobile-menu-open .pin-spacer:has(.edunexa-navigation-layer),
  body.edunexa-mobile-menu-open .elementor-element:has(> .e-con-inner.edunexa-navigation-layer),
  body.edunexa-mobile-menu-open .elementor-element:has(> .edunexa-navigation-layer) {
    z-index: 2147482999 !important;
  }
  .edunexa-header-cta {
    display: none !important;
  }

  /* Treat every tablet/mobile format as the approved off-canvas layout, even
   * when a copied Elementor header still carries the desktop breakpoint. */
  .wcf__nav-menu,
  .wcf__nav-menu.mobile-menu-active,
  .wcf__nav-menu.desktop-menu-active {
    display: block !important;
    width: auto !important;
    max-width: none !important;
  }

  .wcf__nav-menu .wcf-menu-hamburger,
  .wcf__nav-menu.desktop-menu-active .wcf-menu-hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 2px solid var(--edunexa-nav-purple) !important;
    border-radius: 0 !important;
    background: #fbfaff !important;
    color: #111 !important;
    fill: currentColor !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
  }

  /* Use a deterministic icon so a white/empty Elementor SVG cannot leave a
   * blank square. */
  .wcf__nav-menu .wcf-menu-hamburger > * {
    display: none !important;
  }

  .wcf__nav-menu .wcf-menu-hamburger::before {
    content: "";
    display: block;
    width: 21px;
    height: 15px;
    background: linear-gradient(#111 0 0) top / 100% 2px no-repeat,
      linear-gradient(#111 0 0) center / 100% 2px no-repeat,
      linear-gradient(#111 0 0) bottom / 100% 2px no-repeat;
  }

  .wcf__nav-menu .wcf-menu-hamburger:hover,
  .wcf__nav-menu .wcf-menu-hamburger:focus-visible {
    background: #f8f6ff !important;
    outline: 2px solid rgba(117, 98, 189, 0.22);
    outline-offset: 2px;
  }

  .wcf__nav-menu .wcf-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    background: rgba(25, 24, 34, 0.54) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 220ms ease, visibility 220ms ease !important;
  }

  .wcf__nav-menu.wcf-nav-is-toggled .wcf-menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .wcf__nav-menu .wcf-nav-menu-container,
  .wcf__nav-menu.mobile-menu-right .wcf-nav-menu-container,
  .wcf__nav-menu.mobile-menu-left .wcf-nav-menu-container {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 2147483001 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(55vw, 520px) !important;
    min-width: 300px !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border-left: 1px solid var(--edunexa-nav-line) !important;
    box-shadow: -18px 0 42px rgba(35, 28, 65, 0.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 260ms cubic-bezier(0.22, 0.7, 0.2, 1),
      opacity 220ms ease, visibility 220ms ease !important;
  }

  .wcf__nav-menu.wcf-nav-is-toggled .wcf-nav-menu-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav,
  .wcf__nav-menu.desktop-menu-active .wcf-nav-menu-nav {
    order: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 70px 0 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #b6a7df transparent;
  }

  .wcf__nav-menu .wcf-menu-close,
  .wcf__nav-menu.mobile-menu-active .wcf-menu-close,
  .wcf__nav-menu.desktop-menu-active .wcf-menu-close {
    position: absolute !important;
    top: 17px !important;
    right: 18px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #777 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #161616 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
  }

  .wcf__nav-menu .wcf-menu-close > * {
    display: none !important;
  }

  .wcf__nav-menu .wcf-menu-close::before {
    content: "×";
    display: block;
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
  }

  .wcf__nav-menu .wcf-nav-menu-nav > .menu-item,
  .wcf__nav-menu .wcf-nav-menu-nav .menu-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: normal !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .menu-item > a {
    display: flex !important;
    align-items: center !important;
    min-height: 43px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 26px !important;
    border: 0 !important;
    background: #fbfaff !important;
    color: var(--edunexa-nav-purple) !important;
    fill: var(--edunexa-nav-purple) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .menu-item > a:hover,
  .wcf__nav-menu .wcf-nav-menu-nav .menu-item > a:focus-visible {
    background: #f7f4ff !important;
    color: var(--edunexa-nav-purple-dark) !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .menu-item.current-menu-item > a,
  .wcf__nav-menu .wcf-nav-menu-nav .menu-item.current-menu-ancestor > a {
    background: #faf9ff !important;
    color: var(--edunexa-nav-purple-dark) !important;
  }

  .wcf__nav-menu .wcf-submenu-indicator {
    display: none !important;
  }

  /* Keep nested links in the same flowing panel instead of letting the
   * native widget's full-screen slide-over obscure the parent menu. */
  .wcf__nav-menu .wcf-nav-menu-nav .menu-item-has-children > .sub-menu {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 0 8px 32px !important;
    overflow: visible !important;
    border: 0 !important;
    background: #fbfaff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .sub-menu .menu-item > a {
    min-height: 37px !important;
    padding: 6px 20px !important;
    border-bottom: 0 !important;
    border-left: 1px solid #c9bdec !important;
    font-size: 17px !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .sub-menu .wcf-submenu-indicator {
    right: 0 !important;
    height: 37px !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .nav-back-link {
    display: none !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .sub-menu > .menu-item:has(> .nav-back-link) {
    display: none !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .edunexa-nav-cta-item {
    display: none !important;
  }

  .edunexa-offcanvas-actions {
    order: 2 !important;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding: 18px 24px 28px;
    border-top: 1px solid var(--edunexa-nav-line);
    background: #fbfaff;
  }

  .edunexa-offcanvas-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 16px;
    border: 1px solid var(--edunexa-nav-purple);
    border-radius: 4px;
    color: var(--edunexa-nav-purple);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .edunexa-offcanvas-actions a:first-child {
    color: #fff;
    background: var(--edunexa-nav-purple);
  }

  .edunexa-offcanvas-actions a:hover,
  .edunexa-offcanvas-actions a:focus-visible {
    color: #fff;
    background: var(--edunexa-nav-purple-dark);
  }

body.edunexa-mobile-menu-open {
    overflow: hidden !important;
  }
}

/* Use an ASCII CSS escape so the drawer close glyph cannot be mojibaked by
 * an editor or deployment encoding conversion. */
@media (max-width: 1200px) {
  .wcf__nav-menu .wcf-menu-close::before {
    content: "\00d7";
  }
}

@media (max-width: 767px) {
  .wcf__nav-menu .wcf-nav-menu-container {
    width: min(88vw, 420px) !important;
    min-width: 0 !important;
  }

  .wcf__nav-menu .wcf-nav-menu-nav .menu-item > a {
    font-size: 16px !important;
  }

  .edunexa-offcanvas-actions {
    padding-inline: 20px;
  }
}

/* Keep the homepage pricing cards stacked only in portrait tablet/mobile layouts. */
@media (max-width: 1024px) and (orientation: portrait) {
  .edunexa-pricing-stack {
    overflow: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .edunexa-pricing-stack > .elementor-element-1509d56c,
  .edunexa-pricing-stack > .elementor-element-56709868,
  .edunexa-pricing-stack > .elementor-element-6eb28159,
  .edunexa-pricing-stack > .elementor-element-6fa290fd {
    position: sticky !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  .edunexa-pricing-stack > .elementor-element-1509d56c {
    top: 70px !important;
    z-index: 8 !important;
  }

  .edunexa-pricing-stack > .elementor-element-56709868 {
    top: 100px !important;
    z-index: 11 !important;
  }

  .edunexa-pricing-stack > .elementor-element-6eb28159 {
    top: 130px !important;
    z-index: 14 !important;
  }

  .edunexa-pricing-stack > .elementor-element-6fa290fd {
    top: 160px !important;
    z-index: 17 !important;
  }
}
