/* ===== KPEX Header Normalize (load last on every page) ===== */

/* Desktop: center header grid and let the nav fill the row */
@media (min-width: 1200px){
  .header-area__inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
  }
  .header__nav{
    position:static !important;
    transform:none !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:100% !important;           /* overrides the 950px/750px width */
    margin:0 !important;
  }
  .header__nav .main-menu{ display:flex; justify-content:center; }
  .header__nav .main-menu > ul{
    display:flex; align-items:center; justify-content:center;
    margin:0; gap:10px;
  }
  /* Keep items readable and even across themes */
  .header__nav .main-menu > ul > li > a{
    padding:11px 20px;               /* override big 37px paddings */
    border:1px solid rgba(18,18,18,.12);
    border-radius:15px;
    font-size:16px; font-weight:400; text-transform:capitalize; white-space:nowrap;
    transition:all .3s ease;
  }
}

/* Desktop dropdown (consistent, lightweight) */
.header__nav .main-menu .menu-item-has-children{ position:relative; }
.header__nav .main-menu .menu-item-has-children > .sub-menu{
  position:absolute; left:0; top:100%;
  min-width:260px; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); padding:8px;
  z-index:1000; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s ease; pointer-events:none;
}
.header__nav .main-menu .menu-item-has-children:hover > .sub-menu,
.header__nav .main-menu .menu-item-has-children.is-open > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.header__nav .main-menu .sub-menu a{
  display:block; padding:10px 16px; white-space:nowrap; color:#111;
  text-transform:none !important; border-radius:8px;
}
.header__nav .main-menu .sub-menu a:hover{ background:#f6f7f9; color:#111; }

/* Off-canvas (mobile) submenu: click-to-open */
.offcanvas-3__menu .menu-item-has-children > .sub-menu{ display:none; padding-left:20px; margin-top:8px; border-left:2px solid rgba(0,0,0,.05); }
.offcanvas-3__menu .menu-item-has-children.is-open > .sub-menu{ display:block; }
.offcanvas-3__menu .sub-menu a{ text-transform:none !important; }




/* Caret immediately after “Services” (desktop + mobile) */
#nav-services > a.no-nav .nav-caret,
#nav-services-mobile > a.no-nav .nav-caret{
  margin-left: 6px;
  font-size: 12px;
  transition: transform .2s ease;
}

/* Rotate caret when open */
#nav-services.is-open > a .nav-caret,
#nav-services-mobile.is-open > a .nav-caret{ transform: rotate(180deg); }

/* Offcanvas submenu collapsed by default with a smooth open */
.offcanvas-3__menu .menu-item-has-children .sub-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding-left: 0;
}
.offcanvas-3__menu .menu-item-has-children.is-open .sub-menu{
  max-height: 600px; /* enough to reveal all items */
}

/* Keep desktop dropdown behavior (hover or JS) clean */
.main-menu .menu-item-has-children .sub-menu{
  /* your theme likely already handles this; this is just safety */
  will-change: opacity, transform;
}


/* Hide any theme-provided generic carets on desktop (safety) */
@media (min-width: 1200px){
  .main-menu .menu-item-has-children > a::after{ content: none !important; }
}

/* Desktop: use a CSS pseudo-caret AFTER the Services text */
@media (min-width: 1200px){
  #nav-services > a.no-nav::after{
    content: "▾";
    margin-left: 6px;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    transition: transform .2s ease;
  }
  #nav-services.is-open > a.no-nav::after,
  #nav-services:hover > a.no-nav::after{
    transform: rotate(180deg);
  }

  /* Hide the Font Awesome caret on desktop to avoid double arrows */
  #nav-services > a.no-nav .nav-caret{ display: none !important; }
}

/* Mobile: use the Font Awesome caret; ensure no extra pseudo-caret sneaks in */
@media (max-width: 1199px){
  #nav-services > a.no-nav::after{ content: none !important; }
  /* mobile item uses the FA icon we added already */
}