/* WP2Static UI Polyfill — sticky header + utility */
header.fusion-header-wrapper, #masthead, header.site-header, header#header, .header-main {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
    transition: box-shadow .2s ease, padding .2s ease;
}
header.wp2s-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(6px);
}
/* Hide Avada slider loading spinner — Avada JS removes it normally,
   but we strip that JS, so it would stay forever. Hide it always. */
.fusion-slider-loading, .fusion-slider-loading-progress, .fusion-slider-loading-progress-bar,
.fusion-loader, .fusion-page-loading, .fusion-preloader,
#preloader, #fusion-preloader, .preloader-wrap, .preloader { display: none !important; }
/* Ensure slider slides themselves stay visible if loader was hiding them */
.fusion-slider, .fusion-slider-sc, .flexslider, .fusion-flexslider { opacity: 1 !important; visibility: visible !important; }

/* Desktop menu must NEVER be hidden by our polyfill — guard against accidental display:none */
@media (min-width: 800px) {
    .fusion-main-menu, nav.fusion-main-menu, .fusion-main-menu > ul,
    .fusion-menu, ul.fusion-menu { display: block !important; }
    .fusion-main-menu > ul, .fusion-menu { display: flex !important; }
}

/* Make sure toggle/accordion content can be shown */
.fusion-toggle-content, .elementor-tab-content, .elementor-accordion-content,
.panel-collapse, .accordion-content, .collapse { display: none; }
.fusion-toggle-content.fusion-toggle-content-open,
.elementor-tab-content.active, .elementor-accordion-content.active,
.panel-collapse.in, .panel-collapse.show, .collapse.in, .collapse.show,
.accordion-content.active { display: block !important; }
.fusion-toggle-heading, .elementor-tab-title, .elementor-accordion-title,
.panel-heading[role="tab"], .accordion-toggle, [data-toggle="collapse"] {
    cursor: pointer; user-select: none;
}
/* v1.3.9: Pages where sidebar is removed (contact-us etc.) — make content full-width */
body.wp2s-no-sidebar #content,
body.wp2s-no-sidebar section#content,
body.wp2s-no-sidebar .fusion-content-widget-area-wrapper,
body.wp2s-no-sidebar .has-sidebar #content {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
}
body.wp2s-no-sidebar #sidebar,
body.wp2s-no-sidebar aside#sidebar,
body.wp2s-no-sidebar .fusion-sidebar { display: none !important; }
body.wp2s-no-sidebar .has-sidebar #main .fusion-row { display: block !important; }

/* Avada search overlay — hidden permanently when our inline search is used (v1.3.8). */
.fusion-overlay-search { display: none !important; }

/* Modal styling */
.modal { display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.5); align-items: center; justify-content: center; }
.modal.in, .modal.show, .modal.active { display: flex !important; }
.modal-dialog { background: #fff; max-width: 600px; max-height: 80vh; overflow-y: auto;
    border-radius: 8px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal .close, .modal-close { cursor: pointer; font-size: 24px; background: none;
    border: none; position: absolute; top: 10px; right: 16px; color: #666; }
/* Mobile menu */
@media (max-width: 800px) {
    .fusion-mobile-menu, .mobile-menu, .menu-mobile { display: none; }
    .fusion-mobile-menu.wp2s-open, .mobile-menu.wp2s-open, .menu-mobile.wp2s-open {
        display: block !important; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: 20px; z-index: 999;
    }
}

/* ============================================================
   EchoPx Header v2 — scoped styles
   Everything lives under #echopx-header so it can't collide with
   leftover Avada/.fusion-* rules still loaded on the page.
   ============================================================ */

#echopx-header{
  --epx-ink:#171B24;
  --epx-blue:#2A5CE0;
  --epx-blue-dark:#1E44B0;
  --epx-blue-light:#5B8DFF;
  --epx-red:#E31E24;
  --epx-red-dark:#C21118;
  --epx-muted:#7A8296;
  --epx-white:#FFFFFF;
  --epx-header-h:78px;
  --epx-topbar-h:38px;

  font-family:'Inter',Arial,sans-serif;
}
#echopx-header,
#echopx-header *{ box-sizing:border-box; }
#echopx-header ul{ list-style:none; margin:0; padding:0; }
#echopx-header a{ text-decoration:none; color:inherit; }
#echopx-header .epx-mono{ font-family:'IBM Plex Mono','Courier New',monospace; letter-spacing:.02em; }

/* Reserve space so page content isn't hidden under the fixed header */
body{ padding-top: calc(var(--epx-header-h, 78px) + var(--epx-topbar-h, 38px)); }
@media (max-width: 960px){ body{ padding-top: 90px; } }

/* ---------------- Top utility bar ---------------- */
.epx-topbar{
  position:fixed; top:0; left:0; right:0; height:var(--epx-topbar-h);
  background:linear-gradient(180deg,var(--epx-blue),var(--epx-blue-dark)); color:#EAF0FF; z-index:9101;
  display:flex; align-items:center; justify-content:space-between; padding:0 4vw; font-size:12.5px;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.epx-topbar a{ color:#EAF0FF; opacity:.95; }
.epx-topbar a:hover,
.epx-topbar a:focus,
.epx-topbar a:visited{ color:#EAF0FF; opacity:.95; text-decoration:none; }
.epx-topbar a.epx-erplax-badge:hover{ opacity:1; }
.epx-topbar-left{ display:flex; gap:18px; align-items:center; font-weight:500; }
.epx-topbar .epx-sep{ opacity:.5; }
.epx-erplax-badge{
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); color:#fff;
  padding:4px 12px; border-radius:20px; font-weight:600; font-size:11.5px; border:1px solid rgba(255,255,255,.25);
}
.epx-topbar.epx-hide{ transform:translateY(-100%); opacity:0; }

/* ---------------- Main desktop header ---------------- */
.epx-header{
  position:fixed; left:0; right:0; z-index:9100; top:var(--epx-topbar-h); height:var(--epx-header-h);
  display:flex; align-items:center; padding:0 4vw;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid #E7EAF2;
  box-shadow:0 1px 0 rgba(20,30,60,.04);
  transition:top .35s cubic-bezier(.4,0,.2,1), height .3s ease, background .3s ease, box-shadow .3s ease;
}
.epx-header.epx-scrolled{ top:0; height:66px; background:rgba(255,255,255,.98); box-shadow:0 6px 20px rgba(20,30,60,.08); }
.epx-nav-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:28px; }

.epx-logo{ display:flex; align-items:center; flex-shrink:0; }
.epx-logo-img{ height:44px; width:auto; display:block; transition:height .3s ease; }
.epx-header.epx-scrolled .epx-logo-img{ height:36px; }

.epx-primary-nav > ul{ display:flex; align-items:center; gap:2px; }
.epx-primary-nav > ul > li{ position:relative; }
.epx-primary-nav > ul > li > a{
  position:relative; display:flex; align-items:center; gap:5px; padding:9px 14px; border-radius:8px;
  font-size:14.5px; font-weight:600; white-space:nowrap;
}
/* Locked static — no colour/background change on hover, focus, or visited */
#echopx-header .epx-primary-nav > ul > li > a,
#echopx-header .epx-primary-nav > ul > li > a:hover,
#echopx-header .epx-primary-nav > ul > li > a:focus,
#echopx-header .epx-primary-nav > ul > li > a:visited,
#echopx-header .epx-primary-nav > ul > li > a:active{
  color:#3A4152 !important; background:transparent !important;
}
.epx-chev{ width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.55; flex-shrink:0; }

/* Current page: quiet underline, not a filled box — colour locked static too */
#echopx-header .epx-primary-nav li.epx-current > a,
#echopx-header .epx-primary-nav li.epx-current > a:hover,
#echopx-header .epx-primary-nav li.epx-current > a:focus,
#echopx-header .epx-primary-nav li.epx-current > a:visited{ color:var(--epx-blue) !important; }
.epx-primary-nav li.epx-current > a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--epx-blue); border-radius:2px;
}

/* Our Services: same treatment as every other nav item now, no red highlight */
.epx-primary-nav li.epx-featured > a{ box-shadow:none; border-radius:8px; padding:9px 14px; }

/* Invisible hover bridge so the mega/dropdown menu doesn't lose hover state
   crossing the small gap between the nav link and the panel below it */
.epx-has-mega::before,
.epx-has-dropdown::before{
  content:''; position:absolute; left:0; right:0; top:100%; height:10px; z-index:1;
}

/* ERPLax.com: distinguished by colour + icon, not a boxed button — colour locked static */
#echopx-header .epx-primary-nav li.epx-external > a,
#echopx-header .epx-primary-nav li.epx-external > a:hover,
#echopx-header .epx-primary-nav li.epx-external > a:focus,
#echopx-header .epx-primary-nav li.epx-external > a:visited{ color:var(--epx-blue) !important; font-weight:700; }
.epx-primary-nav li.epx-external > a::after{ display:none; }
.epx-primary-nav li.epx-external > a .epx-ext-icon{
  width:12px; height:12px; opacity:.75; transition:transform .18s ease;
}
.epx-primary-nav li.epx-external > a:hover .epx-ext-icon{ transform:translate(2px,-2px); }

.epx-header-actions{ display:flex; align-items:center; gap:10px; }
.epx-search-box{
  display:flex; align-items:center; gap:6px; background:transparent; border-radius:20px; padding:7px 6px 7px 14px;
  border:1.5px solid #E3E7F0; transition:border-color .2s, background .2s;
}
.epx-search-box:focus-within{ border-color:var(--epx-blue); background:#F7F9FD; }
.epx-search-box input{ border:none; outline:none; background:transparent; font-size:13px; width:100px; color:var(--epx-ink); }
.epx-search-box button{ width:26px; height:26px; border-radius:50%; background:var(--epx-blue); color:#fff; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }

/* ---- Our Services mega menu ---- */
.epx-mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  width:760px; max-width:80vw; background:var(--epx-white); border-radius:16px;
  box-shadow:0 24px 56px rgba(20,30,60,.16), 0 2px 8px rgba(20,30,60,.06);
  border:1px solid #E7EAF2; padding:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
li.epx-has-mega:hover .epx-mega{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.epx-col-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--epx-blue); margin-bottom:10px; padding-left:4px; }
.epx-sub-link{ display:block; padding:8px 6px; border-radius:8px; font-size:13px; font-weight:500; color:#3A4152; transition:background .15s, color .15s; }
.epx-sub-link:hover{ background:#F3F5FA; color:var(--epx-blue); }

/* ---- Packages dropdown ---- */
.epx-dropdown{
  position:absolute; top:calc(100% + 10px); left:0; transform:translateY(6px); min-width:300px;
  background:var(--epx-white); border-radius:14px; box-shadow:0 24px 56px rgba(20,30,60,.16), 0 2px 8px rgba(20,30,60,.06);
  border:1px solid #E7EAF2; padding:10px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
li.epx-has-dropdown:hover .epx-dropdown{ opacity:1; pointer-events:auto; transform:translateY(0); }
.epx-dropdown a{ display:block; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500; color:#3A4152; transition:background .15s, color .15s; }
.epx-dropdown a:hover{ background:#F3F5FA; color:var(--epx-blue); }

/* ---------------- Mobile: Dynamic-Island nav ---------------- */
.epx-island-wrap{ display:none; }

@media (max-width: 960px){
  .epx-topbar{ display:none; }
  .epx-header{ display:none; }

  .epx-island-wrap{
    display:flex; flex-direction:column; align-items:center; position:fixed; top:12px; left:0; right:0; z-index:9200;
    pointer-events:none; padding:0 12px;
  }
  .epx-island{
    pointer-events:auto; background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
    color:var(--epx-ink); border-radius:28px; display:flex; flex-direction:column; overflow:hidden;
    width:100%; max-width:680px; height:66px;
    box-shadow:0 1px 2px rgba(20,30,60,.05), 0 16px 40px rgba(20,30,60,.16);
    border:1px solid rgba(255,255,255,.7); border-bottom:3px solid var(--epx-blue);
    transition:height .45s cubic-bezier(.32,1.4,.4,1), border-radius .4s ease, box-shadow .3s ease;
  }
  .epx-island.epx-open{ height:auto; border-radius:26px; }
  .epx-island-bar{ height:66px; min-height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 10px 0 16px; flex-shrink:0; }
  .epx-logo-mini{ display:flex; align-items:center; cursor:pointer; }
  .epx-logo-mini-img{ height:30px; width:auto; display:block; }

  .epx-actions{ display:flex; align-items:center; gap:8px; }
  .epx-icon-call{
    width:44px; height:44px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--epx-blue),var(--epx-blue-light)); color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(42,92,224,.35);
  }
  .epx-divider-dot{ width:1px; height:22px; background:rgba(20,30,60,.1); margin:0 2px; }
  .epx-burger{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(20,30,60,.06); flex-shrink:0; transition:background .2s; cursor:pointer; }
  .epx-island.epx-open .epx-burger{ background:rgba(20,30,60,.09); }
  .epx-lines{ position:relative; width:16px; height:11px; }
  .epx-lines span{ position:absolute; left:0; width:100%; height:1.8px; background:var(--epx-ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease, top .3s ease; }
  .epx-lines span:nth-child(1){ top:0; }
  .epx-lines span:nth-child(2){ top:4.5px; }
  .epx-lines span:nth-child(3){ top:9px; }
  .epx-island.epx-open .epx-lines span:nth-child(1){ top:4.5px; transform:rotate(45deg); }
  .epx-island.epx-open .epx-lines span:nth-child(2){ opacity:0; }
  .epx-island.epx-open .epx-lines span:nth-child(3){ top:4.5px; transform:rotate(-45deg); }

  .epx-island-body{ max-height:0; opacity:0; transition:max-height .4s ease, opacity .3s ease .05s; padding:0 12px; }
  .epx-island.epx-open .epx-island-body{ max-height:75vh; opacity:1; padding:2px 12px 16px; overflow-y:auto; }

  .epx-search-box-mobile{
    display:flex; align-items:center; gap:6px; background:rgba(20,30,60,.06); border-radius:14px;
    padding:10px 8px 10px 14px; margin:10px 0 4px;
  }
  .epx-search-box-mobile input{ border:none; outline:none; background:transparent; font-size:14px; flex:1; color:var(--epx-ink); }
  .epx-search-box-mobile button{ width:32px; height:32px; border-radius:50%; background:var(--epx-blue); color:#fff; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }

  .epx-accordion-item{ border-bottom:1px solid rgba(20,30,60,.07); }
  .epx-accordion-item:last-child{ border-bottom:none; }
  .epx-accordion-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 10px; font-size:15px; font-weight:600; color:#20242C; cursor:pointer; }
  .epx-accordion-head .epx-chev{ transition:transform .25s ease; }
  .epx-accordion-item.epx-open .epx-accordion-head .epx-chev{ transform:rotate(-135deg); }
  .epx-accordion-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 10px; }
  .epx-accordion-item.epx-open .epx-accordion-panel{ max-height:400px; padding-bottom:8px; }
  .epx-accordion-panel a{ display:block; padding:8px 10px; font-size:13.5px; color:#4A5061; border-radius:8px; }
  .epx-accordion-panel a:active{ background:rgba(20,30,60,.05); }
  .epx-top-link{ display:flex; align-items:center; justify-content:space-between; padding:14px 10px; font-size:15px; font-weight:600; color:#20242C; border-bottom:1px solid rgba(20,30,60,.07); }
  .epx-cta-mobile{ margin-top:12px; background:var(--epx-red); color:#fff; text-align:center; font-weight:700; padding:14px; border-radius:14px; font-size:14.5px; display:block; }
  .epx-contact-mini{ display:flex; justify-content:space-between; margin-top:12px; font-size:11.5px; color:var(--epx-muted); padding:0 10px; }
  .epx-home-indicator{ pointer-events:none; margin-top:8px; width:36px; height:4px; border-radius:3px; background:rgba(20,30,60,.18); }
}

@media (prefers-reduced-motion: reduce){
  #echopx-header *{ transition:none !important; }
}