/* ══════════════════════════════════════════════════════════════
   SecneurX — Standardised Navigation (nav.css)
   Desktop rules are inside @media (min-width: 961px) so they
   never fight mobile.css or the JS drawer toggle.
══════════════════════════════════════════════════════════════ */

/* ── Nav bar — all sizes ─────────────────────────────────────── */
.snx-nav {
  display: block !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: rgba(14, 5, 2, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(201,65,26,0.18) !important;
  font-family: 'Inter','Segoe UI',sans-serif !important;
  height: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ── Inner wrapper — all sizes ───────────────────────────────── */
.snx-nav-inner {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 68px !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* ── Logo — all sizes ────────────────────────────────────────── */
.snx-nav-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  margin-right: auto !important;
}
.snx-nav-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: 150px !important;
  display: block !important;
  /* Ignore EXIF rotation metadata — PNG orientation tag causes iOS Safari
     to display the logo sideways. Raw pixel data is already correct. */
  image-orientation: none !important;
  object-fit: contain !important;
}

/* ── Link appearance — all sizes (colours/fonts only) ────────── */
.snx-nav .nav-links > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.snx-nav .nav-links a {
  color: rgba(240,232,224,0.82) !important;
  text-decoration: none !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color 0.2s, background 0.2s !important;
  letter-spacing: 0.01em !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  line-height: 1.4 !important;
}
.snx-nav .nav-links a:hover {
  color: #fff !important;
  background: rgba(201,65,26,0.13) !important;
  border-bottom: none !important;
}
.snx-nav .nav-links a.active {
  color: #C9411A !important;
  background: rgba(201,65,26,0.10) !important;
  border-bottom: none !important;
}

/* ── Dropdown item appearance — all sizes ────────────────────── */
.snx-dropdown { position: relative !important; }
.snx-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.15s, color 0.15s !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
}
.snx-dropdown-item:hover {
  background: rgba(201,65,26,0.12) !important;
  color: #fff !important;
  border-bottom: none !important;
}
.snx-dropdown-item.active-product { background: rgba(201,65,26,0.1) !important; }
.snx-dropdown-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(201,65,26,0.12) !important;
  border: 1px solid rgba(201,65,26,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.snx-dropdown-icon svg { width: 16px !important; height: 16px !important; stroke: #C9411A !important; }
.snx-dropdown-item strong { display: block !important; font-size: 13px !important; color: #fff !important; font-weight: 600 !important; margin-bottom: 2px !important; }
.snx-dropdown-item span   { display: block !important; font-size: 11px !important; color: rgba(255,255,255,0.38) !important; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP — ≥ 961px
   Layout rules that must NOT affect mobile.
══════════════════════════════════════════════════════════════ */
@media (min-width: 961px) {

  /* Hide hamburger */
  .snx-nav .nav-hamburger { display: none !important; }

  /* Horizontal nav links row */
  .snx-nav .nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* CTA button — desktop only margin */
  .snx-nav .nav-links a.nav-cta {
    background: #C9411A !important;
    color: #fff !important;
    padding: 9px 22px !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    margin-left: 10px !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(201,65,26,0.35) !important;
    white-space: nowrap !important;
  }
  .snx-nav .nav-links a.nav-cta:hover {
    background: #a83514 !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(201,65,26,0.5) !important;
  }

  /* Hover bridge — fills gap so mouse can travel to dropdown */
  .snx-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 18px;
    background: transparent;
    display: none;
  }
  .snx-dropdown:hover::after { display: block; }

  /* Dropdown panel */
  .snx-dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 640px !important;
    background: rgba(14, 5, 2, 0.98) !important;
    border: 1px solid rgba(201,65,26,0.22) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
    z-index: 1000 !important;
  }
  .snx-dropdown:hover .snx-dropdown-menu { display: grid !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — ≤ 960px
══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* Compact inner wrapper */
  .snx-nav-inner { padding: 0 20px !important; }

  /* Show hamburger */
  .snx-nav .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    z-index: 10000 !important;
  }
  .snx-nav .nav-hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: rgba(240,232,224,0.85) !important;
    border-radius: 2px !important;
    transition: transform 0.3s, opacity 0.3s !important;
  }
  .snx-nav .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .snx-nav .nav-hamburger.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  .snx-nav .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* Nav links: hidden, revealed by JS drawer */
  .snx-nav .nav-links { display: none !important; }

  /* Inside the drawer: full-width vertical links */
  .snx-nav .nav-links a {
    width: 100% !important;
    white-space: normal !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  /* CTA inside drawer */
  .snx-nav .nav-links a.nav-cta {
    background: #C9411A !important;
    color: #fff !important;
    margin: 8px 0 0 0 !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  /* Dropdown items: keep flex layout (icon + text side-by-side) even
     when mobile.css's .nav-links.mobile-open a { display:block } fires.
     Specificity (0,3,1) beats mobile.css's (0,2,1). */
  .snx-nav .nav-links .snx-dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 9px 10px !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }
  .snx-nav .nav-links .snx-dropdown-icon {
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .snx-nav .nav-links .snx-dropdown-item > div:not(.snx-dropdown-icon) strong {
    display: block !important;
    font-size: 13px !important;
    color: rgba(240,232,224,0.9) !important;
  }
  .snx-nav .nav-links .snx-dropdown-item > div:not(.snx-dropdown-icon) span {
    display: block !important;
    font-size: 11px !important;
    color: rgba(240,232,224,0.45) !important;
    margin-top: 2px !important;
  }

  /* Solutions submenu — accordion, triggered by .open class (JS) */
  .snx-dropdown-menu {
    display: none !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    left: auto !important;
    grid-template-columns: 1fr !important;
    box-shadow: none !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    border-radius: 10px !important;
    padding: 6px !important;
    background: rgba(30, 8, 2, 0.98) !important;
    border: 1px solid rgba(201,65,26,0.2) !important;
  }
  .snx-dropdown.open .snx-dropdown-menu {
    display: grid !important;
  }

  /* Chevron rotates when Solutions is expanded */
  .snx-dropdown > a svg {
    transition: transform 0.25s !important;
    flex-shrink: 0 !important;
  }
  .snx-dropdown.open > a svg {
    transform: rotate(180deg) !important;
  }

  /* Dropdown items: full-width in mobile accordion */
  .snx-dropdown-item {
    padding: 9px 10px !important;
  }
  .snx-dropdown-icon {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }
}