/* ===== Mobile / tablet hamburger menu fix =====
   Existing zz-redesign.css hides .xc-menu at max-width:1100px.
   This file adds the replacement hamburger menu for the same range.
*/

.xc-mobile-toggle {
  display: none;
  width: 46px;
  height: 40px;
  border: 1px solid rgba(90,156,255,.62);
  border-radius: 10px;
  background: rgba(8,18,34,.96);
  box-shadow: 0 0 18px rgba(47,145,255,.22);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xc-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 3px;
  transition: transform .2s ease, opacity .2s ease;
}

.xc-mobile-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.xc-mobile-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.xc-mobile-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1100px) {
  .xc-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    height: auto !important;
    min-height: 88px !important;
    background: rgba(3,10,20,.97) !important;
    backdrop-filter: blur(14px);
  }

  .xc-nav-inner {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: 88px !important;
    padding: 12px 16px 22px !important;
    max-width: none !important;
    gap: 12px !important;
  }

  .xc-logo {
    width: auto !important;
    max-width: 260px !important;
    text-align: left !important;
    flex: 0 1 auto !important;
  }

  .xc-logo a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .xc-nav-logo {
    height: 28px !important;
    width: auto !important;
  }

  .xc-nav-brand,
  .xc-nav-brand::after {
    white-space: nowrap !important;
    font-size: 1rem !important;
    letter-spacing: .06em !important;
  }

  .xc-lang {
    position: absolute !important;
    left: 50% !important;
    bottom: 2px !important;
    transform: translateX(-50%) !important;
    z-index: 3002 !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    font-size: 12px !important;
  }

  .xc-lang::before {
    display: none !important;
  }

  .xc-mobile-toggle {
    display: flex !important;
    position: absolute !important;
    right: 16px !important;
    top: 12px !important;
    z-index: 3003 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Override zz-redesign's .xc-menu{display:none} and turn it into a dropdown. */
  .xc-menu {
    position: fixed !important;
    top: 88px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3001 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    padding: 12px 18px 18px !important;
    background: rgba(3,10,20,.985) !important;
    border-top: 1px solid rgba(90,156,255,.18) !important;
    border-bottom: 1px solid rgba(90,156,255,.22) !important;
    box-shadow: 0 22px 46px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(16px);
  }

  .xc-menu.is-open {
    display: flex !important;
  }

  .xc-menu a {
    display: block !important;
    padding: 15px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(245,249,255,.92) !important;
    font-size: .94rem !important;
    letter-spacing: .04em !important;
    text-align: left !important;
  }

  .xc-menu a:last-child {
    border-bottom: 0 !important;
  }

  body.xc-menu-open {
    overflow: hidden;
  }

  .xc-defense-hero {
    padding-top: 96px !important;
  }
}

/* Compact phone fine-tuning */
@media (max-width: 480px) {
  .xc-nav-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .xc-logo {
    max-width: 230px !important;
  }

  .xc-nav-logo {
    height: 24px !important;
  }

  .xc-nav-brand,
  .xc-nav-brand::after {
    font-size: .95rem !important;
  }

  .xc-mobile-toggle {
    right: 12px !important;
    width: 42px !important;
    height: 38px !important;
  }

  .xc-lang {
    bottom: 1px !important;
    font-size: 11px !important;
  }
}