/* Header desktop styles - Vendoprone */
.vn-header { font-family: 'Inter', system-ui, Arial, sans-serif; background: #ffffff; border-bottom: 1px solid #eef0f3; }
.vn-topbar { display:flex; justify-content:flex-end; gap:20px; padding:6px 20px; font-size:13px; color:#4b5563; background:#f8fafc; }
.vn-topbar a { color:#374151; text-decoration:none; }
.vn-main { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; max-width:1200px; margin:0 auto; }
.vn-logo img{height:80px}
.vn-nav { display:flex; gap:28px; align-items:center; }
.vn-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.vn-nav a.nav-link{color:#0f172a;text-decoration:none;font-weight:500}
.vn-cta { display:flex; gap:12px; align-items:center }
.vn-btn-primary{background:#0b74ff;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.vn-btn-ghost{border:1px solid #e6eefc;padding:8px 12px;border-radius:8px;color:#0b74ff;text-decoration:none}
.vn-dropdown{position:relative}
/* Ensure megamenu hidden by default and animate visibility. Use high-specificity + important to avoid theme overrides. */
.vn-header .vn-dropdown .vn-megamenu{position:absolute;left:0;top:calc(100% + 12px);background:#fff;box-shadow:0 18px 40px rgba(15,23,42,0.12);padding:18px;border-radius:10px;display:flex;gap:24px;min-width:720px;z-index:1200;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.vn-header .vn-dropdown .vn-megamenu *{pointer-events:auto}
.vn-header .vn-dropdown.open > .vn-megamenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.vn-megamenu .col{flex:1;min-width:200px}
.vn-megamenu h4{margin:0 0 8px 0;font-size:15px;color:#0f172a}
.vn-megamenu p{margin:0;color:#475569;font-size:13px}
.vn-megamenu a{display:inline-block;color:#0b74ff;margin-top:10px;text-decoration:none;font-weight:600}

/* Service item */
.vn-megamenu .service-item{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.vn-megamenu .service-item .icon{width:44px;height:44px;flex:0 0 44px}
.vn-megamenu .service-item .icon img{width:100%;height:100%;object-fit:contain}
.vn-megamenu .service-item .meta{flex:1}
.vn-megamenu .service-item .meta h5{margin:0;font-size:14px;color:#0f172a;font-weight:500}
.vn-megamenu .service-item .meta p{margin:4px 0 0 0;font-size:13px;color:#64748b}

/* Column groups for expertises/solutions */
.vn-megamenu.cols-3{display:flex}
.vn-megamenu.cols-2{display:flex}

/* Hover styles */
.vn-dropdown > a.nav-link:after{content:'';display:inline-block;width:8px;height:8px;margin-left:8px;border-left:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(-45deg);vertical-align:middle}
.vn-dropdown.open > a.nav-link:after{transform:rotate(45deg);border-color:#0b74ff}


/* Responsive: hide desktop header on small screens (mobile uses side-bar) */
@media (max-width: 991px){
  .vn-topbar{display:none}
  .vn-main{display:none}
}

/* Sticky header + shrink on scroll */
.vn-header{position:sticky;top:0;z-index:12000;background:#ffffff;backdrop-filter:blur(4px)}

/* Force header fixed on desktop to avoid theme hiding it; adjust body spacing */
@media (min-width: 992px) {
  .vn-header{position:fixed !important; top:0 !important; left:0; right:0; z-index:12000 !important;}
  :root{--vn-header-height:86px}
  body{padding-top:var(--vn-header-height);}
}
.vn-header .vn-topbar{transition:height .18s ease,opacity .18s ease}
.vn-header .vn-main{transition:padding .18s ease,box-shadow .18s ease;background:transparent}
.vn-header.vn-scrolled{box-shadow:0 6px 20px rgba(2,6,23,0.06)}
.vn-header.vn-scrolled .vn-main{padding:8px 20px}
.vn-header.vn-scrolled .vn-logo img{height:60px}

/* Ensure header does not overlap focus outlines */
.vn-header *:focus{outline-offset:3px}

/* Mobile menu trigger: visible only on small screens and fixed on top-right */
@media (max-width: 991px) {
  .menu-toggle {
    display: flex !important;
    position: fixed !important;
    top: 12px !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #d25400 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    z-index: 13000 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
  }
  .menu-toggle .menu-toggle-icon i { font-size: 20px !important; }
}

/* Hide animation when scrolling down */
.menu-toggle.is-hidden {
  transform: translateY(-140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 220ms ease, opacity 180ms ease;
}
.menu-toggle { transition: transform 220ms ease, opacity 180ms ease; }

/* Mobile submenu toggle (small arrow button) */
.mobile-submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  background: transparent;
  border: none;
  color: #0f172a;
  font-size: 14px;
  border-radius: 8px;
  transition: transform 200ms ease, color 160ms ease;
}
.mobile-submenu-toggle i { transition: transform 200ms ease; }
.mobile-submenu-toggle[aria-expanded="true"] i { transform: rotate(90deg); }

/* Ensure toggle is visible only on small screens */
@media (min-width: 992px) {
  .mobile-submenu-toggle { display: none !important; }
}

/* When submenu is active, show it (the base .submenu.active is in style.css) */
.submenu.mm-collapse { max-height: 0; overflow: hidden; transition: max-height 320ms ease; }
.submenu.mm-collapse.active { max-height: 999px; }

/* Mobile-menu specific adjustments to replace old chevrons */
@media (max-width: 991px) {
  /* hide legacy dropdown icon inside the link */
  .mobile-menu-main .dropdown-icon,
  .mainmenu .has-droupdown > a .dropdown-icon { display: none !important; }

  /* make sure parent li is positioned so toggle can be absolutely placed */
  .mobile-menu-main nav ul li.has-droupdown { position: relative; }

  /* place our toggle at the right edge of the list item */
  .mobile-submenu-toggle {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 40px !important;
    height: 40px !important;
    background: rgba(210,84,0,0.06) !important;
    color: var(--vp-primary) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  .mobile-submenu-toggle i { font-size: 14px !important; color: var(--vp-primary) !important; }
  .mobile-submenu-toggle.active { background: rgba(210,84,0,0.12) !important; }
}