/* ============================================
   CyberSafe Mega Menu
   SAP-style multi-column dropdown nav
   ============================================ */

/* Override default nav-links to support mega items */
.nav-links{position:static;gap:8px}
.nav-links > a,
.nav-links > .mega-item > .mega-trigger{
  font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.82);
  padding:10px 14px;border-radius:8px;
  background:transparent;border:none;
  display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;transition:color .2s ease,background .2s ease;
  font-family:inherit;
}
.nav-links > a:hover,
.nav-links > .mega-item > .mega-trigger:hover,
.nav-links > .mega-item.is-open > .mega-trigger{
  color:#fff;background:rgba(255,255,255,.08);
}
.nav-links > a::after{display:none}
.mega-trigger svg.mega-chevron{
  width:11px;height:11px;transition:transform .25s ease;opacity:.7;
}
.nav-links > .mega-item.is-open .mega-chevron{transform:rotate(180deg);opacity:1}

/* Light mode: dark text on light header */
[data-theme="light"] .nav-links > a,
[data-theme="light"] .nav-links > .mega-item > .mega-trigger{
  color:rgba(20,30,50,.78);
}
[data-theme="light"] .nav-links > a:hover,
[data-theme="light"] .nav-links > .mega-item > .mega-trigger:hover,
[data-theme="light"] .nav-links > .mega-item.is-open > .mega-trigger{
  color:#0d1426;background:rgba(0,0,0,.05);
}
[data-theme="light"] .nav-links > a.nav-cta{color:#fff!important}

/* Dark-variant (used on hero pages where header sits over imagery): force light text in either theme */
.nav-links--dark > a,
.nav-links--dark > .mega-item > .mega-trigger{color:rgba(255,255,255,.82)!important}
.nav-links--dark > a:hover,
.nav-links--dark > .mega-item > .mega-trigger:hover,
.nav-links--dark > .mega-item.is-open > .mega-trigger{color:#fff!important;background:rgba(255,255,255,.08)!important}

/* Mega item container */
.mega-item{position:relative}

/* Backdrop overlay (darkens content behind panel) */
.mega-backdrop{
  position:fixed;inset:0;background:rgba(5,8,16,.45);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
  z-index:998;
}
.mega-backdrop.is-active{opacity:1;pointer-events:auto}

/* The panel itself — full-width, slides down. Top set dynamically by JS to match header bottom. */
.mega-panel{
  position:fixed;left:0;right:0;top:var(--mega-panel-top,68px);
  background:rgba(13,20,38,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(122,182,72,.15);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility 0s linear .25s;
  z-index:999;
  max-height:calc(100vh - var(--mega-panel-top,68px));overflow-y:auto;
}
.mega-item.is-open .mega-panel{
  transform:translateY(0);opacity:1;visibility:visible;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility 0s linear 0s;
}
[data-theme="light"] .mega-panel{
  background:rgba(255,255,255,.98);
  border-top:1px solid rgba(122,182,72,.25);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}

.mega-panel-inner{
  max-width:var(--max-width);margin:0 auto;
  padding:40px 24px 48px;
}
.mega-grid{
  display:grid;gap:36px;
}
.mega-grid--3{grid-template-columns:1.1fr 1fr 1fr}
.mega-grid--4{grid-template-columns:repeat(4,1fr)}
.mega-grid--ind{grid-template-columns:repeat(3,1fr);gap:18px}

.mega-col h4{
  font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--primary-green);margin-bottom:18px;
  padding-bottom:10px;border-bottom:1px solid rgba(122,182,72,.18);
}
[data-theme="light"] .mega-col h4{color:#5a9a2f}

/* Each mega-link is a card-like item */
.mega-link{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 14px;margin:0 -14px 4px;border-radius:10px;
  transition:background .2s ease,transform .2s ease;
  color:var(--text-primary);
}
.mega-link:hover{
  background:rgba(122,182,72,.08);
  transform:translateX(2px);
}
[data-theme="light"] .mega-link:hover{background:rgba(122,182,72,.12)}
.mega-link-title{
  font-size:.95rem;font-weight:600;color:var(--text-white);
  display:flex;align-items:center;gap:8px;
}
[data-theme="light"] .mega-link-title{color:#1a202c}
.mega-link-desc{
  font-size:.8rem;color:var(--text-secondary);line-height:1.5;
}
.mega-link-icon{
  width:18px;height:18px;color:var(--primary-green);flex-shrink:0;
}

/* Industries grid is denser */
.mega-grid--ind .mega-link{padding:14px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin:0;border-radius:10px}
.mega-grid--ind .mega-link:hover{background:rgba(122,182,72,.1);border-color:rgba(122,182,72,.3);transform:none}
[data-theme="light"] .mega-grid--ind .mega-link{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.08)}
[data-theme="light"] .mega-grid--ind .mega-link:hover{background:rgba(122,182,72,.08);border-color:rgba(122,182,72,.4)}

/* Featured column (right side accent panel) */
.mega-col--feature{
  background:linear-gradient(135deg,rgba(122,182,72,.08),rgba(26,58,92,.12));
  border:1px solid rgba(122,182,72,.15);
  border-radius:14px;padding:24px;
}
.mega-col--feature h4{border-bottom:none;padding-bottom:0;margin-bottom:14px}
.mega-feature-card{
  display:block;border-radius:10px;padding:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  margin-bottom:10px;transition:all .2s ease;
}
.mega-feature-card:hover{background:rgba(122,182,72,.1);border-color:rgba(122,182,72,.3)}
[data-theme="light"] .mega-feature-card{background:rgba(255,255,255,.7);border-color:rgba(122,182,72,.18)}
[data-theme="light"] .mega-feature-card:hover{background:rgba(122,182,72,.08);border-color:rgba(122,182,72,.35)}
[data-theme="light"] .mega-col--feature{background:linear-gradient(135deg,rgba(122,182,72,.06),rgba(26,58,92,.04));border:1px solid rgba(122,182,72,.18)}
[data-theme="light"] .mega-feature-desc{color:#4a5568}
[data-theme="light"] .mega-link-desc{color:#5a6477}
.mega-feature-tag{
  display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--primary-green);margin-bottom:6px;
}
.mega-feature-title{font-size:.92rem;font-weight:600;color:#fff;margin-bottom:4px}
[data-theme="light"] .mega-feature-title{color:#1a202c}
.mega-feature-desc{font-size:.78rem;color:var(--text-secondary);line-height:1.5}

/* Footer row inside panel for cross-links */
.mega-panel-footer{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:28px;padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.85rem;color:var(--text-secondary);
}
[data-theme="light"] .mega-panel-footer{border-top-color:rgba(0,0,0,.08)}
.mega-panel-footer a{
  color:var(--primary-green);font-weight:600;display:inline-flex;align-items:center;gap:6px;
}
.mega-panel-footer a:hover{gap:10px}

/* Mobile: convert to accordion */
@media (max-width:980px){
  .nav-links{
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:rgba(8,12,24,.98);backdrop-filter:blur(20px);
    padding:16px 0;gap:0;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .25s ease,opacity .2s ease,visibility 0s .25s;
    max-height:calc(100vh - 64px);overflow-y:auto;
    border-top:1px solid var(--border-dark);
  }
  .nav-links.is-open{
    transform:translateY(0);opacity:1;visibility:visible;
    transition:transform .25s ease,opacity .2s ease,visibility 0s 0s;
  }
  .nav-links > a,
  .nav-links > .mega-item > .mega-trigger{
    width:100%;justify-content:space-between;
    padding:14px 24px;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .nav-links > .mega-item{width:100%}
  .mega-backdrop{display:none}
  .mega-panel{
    position:static;transform:none;opacity:1;visibility:visible;
    background:rgba(0,0,0,.18);backdrop-filter:none;
    box-shadow:none;border:none;
    max-height:0;overflow:hidden;padding:0;
    transition:max-height .3s ease;
  }
  .mega-item.is-open .mega-panel{max-height:1200px}
  .mega-panel-inner{padding:8px 24px 16px}
  .mega-grid,.mega-grid--3,.mega-grid--4,.mega-grid--ind{grid-template-columns:1fr;gap:8px}
  .mega-col h4{font-size:.7rem;margin:14px 0 8px;padding:0;border:none;color:var(--text-muted)}
  .mega-link{padding:10px 0;margin:0;border-radius:0}
  .mega-link:hover{background:transparent;transform:none}
  .mega-grid--ind .mega-link{padding:12px;background:transparent;border:1px solid rgba(255,255,255,.08)}
  .mega-col--feature{padding:14px;margin-top:8px}
  .mega-panel-footer{margin-top:14px;padding-top:14px;flex-direction:column;align-items:flex-start;gap:10px}
  [data-theme="light"] .nav-links{background:rgba(255,255,255,.98)}
}

/* Hide the mobile toggle text-tweak on desktop when menu is open */
@media (min-width:981px){
  .mega-trigger[aria-expanded="true"]{outline:none}
}

/* Mobile mega-menu refinements — tighter touch targets, better tap UX */
@media (max-width:980px){
  .nav-links{
    /* Smoother slide-in instead of fade */
    transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility 0s .25s;
  }
  .nav-links > a,
  .nav-links > .mega-item > .mega-trigger{
    font-size:1rem;padding:16px 20px;min-height:48px;
  }
  .mega-trigger svg.mega-chevron{width:14px;height:14px}
  .nav-cta{
    margin:14px 16px 6px;border-radius:50px!important;
    padding:14px 24px!important;text-align:center;justify-content:center;
  }
  .mega-link-title{font-size:.95rem}
  .mega-link-desc{font-size:.8rem;line-height:1.45}
  .mega-grid--ind .mega-link{padding:14px}
  .mega-panel-inner{padding:10px 20px 18px}
  /* Disable hover-open on touch */
}

/* Pure touch devices — never auto-open on hover */
@media (hover:none){
  .mega-item:hover .mega-panel{
    /* explicitly do nothing — only the click handler opens it */
  }
}