/* SILVERMINDS NAV MENU OVERRIDES - v2026-05-17-PRO-DROPDOWN
   Upload this file to: /includes/site-nav.css
   This file is intentionally using !important because site-nav.php also contains
   embedded navbar CSS. */

/* TOP BAR - keep original dark style */
.smx-top-bar,
.smx-top{
  width:100% !important;
  background:#020b18 !important;
  color:#dce8f3 !important;
  font-size:14px !important;
  font-weight:700 !important;
  padding:10px 20px !important;
  position:relative !important;
  z-index:10000 !important;
}

.smx-top-bar-inner,
.smx-top-inner{
  max-width:1200px !important;
  margin:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  gap:28px !important;
  align-items:center !important;
  white-space:nowrap !important;
}

.smx-top-bar span,
.smx-top span{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  line-height:1.2 !important;
}

.smx-top-bar i,
.smx-top i{
  color:#ff7a1a !important;
  font-size:14px !important;
}

/* MAIN NAV - keep dark blue navbar */
.smx-nav-wrap{
  font-family:'Inter', Arial, sans-serif !important;
}

.smx-main{
  background:#0b1d3a !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:0 10px 28px rgba(2,11,24,0.12) !important;
}

.smx-main-inner{
  max-width:1240px !important;
  min-height:78px !important;
}

.smx-menu{
  gap:30px !important;
}

.smx-link,
.smx-drop-btn,
.smx-signin{
  font-size:14px !important;
  font-weight:750 !important;
  letter-spacing:-0.01em !important;
  color:#ffffff !important;
}

.smx-link:hover,
.smx-drop-btn:hover,
.smx-signin:hover{
  color:#ff9b52 !important;
}

.smx-cta{
  border-radius:999px !important;
  padding:12px 22px !important;
  font-weight:800 !important;
  box-shadow:0 10px 24px rgba(255,122,26,0.22) !important;
}

/* DESKTOP MEGA MENU - bigger, cleaner, professional */
.smx-mega{
  width:1040px !important;
  max-width:calc(100vw - 42px) !important;
  padding:26px !important;
  border-radius:28px !important;
  border:1px solid rgba(226,237,247,0.95) !important;
  background:rgba(255,255,255,0.98) !important;
  box-shadow:0 30px 80px rgba(2,11,24,0.22), 0 8px 24px rgba(2,11,24,0.08) !important;
  backdrop-filter:blur(10px) !important;
}

.smx-mega.company{
  width:880px !important;
  max-width:calc(100vw - 42px) !important;
}

.smx-grid{
  grid-template-columns:1fr 1fr !important;
  gap:18px 22px !important;
}

.smx-card{
  min-height:116px !important;
  padding:19px !important;
  border-radius:22px !important;
  gap:18px !important;
  border:1px solid transparent !important;
  background:#ffffff !important;
  box-shadow:0 1px 0 rgba(2,11,24,0.04) !important;
  transition:background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

.smx-card:hover{
  background:#f8fbff !important;
  border-color:#dce8f3 !important;
  box-shadow:0 18px 42px rgba(2,11,24,0.09) !important;
  transform:translateY(-3px) !important;
}

/* Make the actual photo thumbnails bigger and cleaner */
.smx-card-img{
  width:124px !important;
  height:88px !important;
  min-width:124px !important;
  max-width:124px !important;
  max-height:88px !important;
  border-radius:18px !important;
  object-fit:cover !important;
  object-position:center !important;
  border:1px solid #dce8f3 !important;
  box-shadow:0 10px 24px rgba(2,11,24,0.10) !important;
}

/* Bigger clean icons for the non-image menu cards */
.smx-card-icon{
  width:78px !important;
  height:78px !important;
  min-width:78px !important;
  max-width:78px !important;
  max-height:78px !important;
  border-radius:20px !important;
  background:#fff7f0 !important;
  color:#ff7a1a !important;
  border:1px solid #ffd9bd !important;
  font-size:26px !important;
  box-shadow:none !important;
}

/* Professional menu typography */
.smx-card strong{
  font-size:18px !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  letter-spacing:-0.025em !important;
  color:#06172a !important;
  margin-bottom:8px !important;
}

.smx-card span{
  font-size:14.5px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
  color:#53657a !important;
  letter-spacing:-0.005em !important;
}

/* Footer inside dropdown */
.smx-mega-foot{
  margin-top:22px !important;
  padding:18px 20px !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#06172a 0%,#0b1d3a 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.smx-mega-foot strong{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em !important;
}

.smx-mega-foot div{
  font-size:14px !important;
  font-weight:500 !important;
  color:#dce8f3 !important;
}

.smx-mega-foot a{
  padding:12px 20px !important;
  border-radius:999px !important;
  font-size:13.5px !important;
  font-weight:800 !important;
  box-shadow:0 10px 22px rgba(255,122,26,0.22) !important;
}

/* Mobile */
@media(max-width:900px){
  .smx-main-inner{
    min-height:70px !important;
  }

  .smx-menu{
    background:linear-gradient(180deg,#0b1d3a 0%,#071832 100%) !important;
    padding:18px !important;
    gap:12px !important;
  }

  .smx-link,
  .smx-drop-btn{
    font-size:15.5px !important;
    font-weight:750 !important;
    border-radius:16px !important;
  }

  .smx-mega,
  .smx-mega.company{
    width:100% !important;
    max-width:100% !important;
    background:rgba(255,255,255,0.06) !important;
    padding:12px 0 12px 12px !important;
    border-left:3px solid #ff7a1a !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .smx-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .smx-card{
    min-height:auto !important;
    padding:13px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,0.07) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow:none !important;
  }

  .smx-card:hover{
    transform:none !important;
    background:rgba(255,255,255,0.10) !important;
    box-shadow:none !important;
  }

  .smx-card-img{
    width:88px !important;
    height:64px !important;
    min-width:88px !important;
    max-width:88px !important;
    max-height:64px !important;
    border-radius:14px !important;
  }

  .smx-card-icon{
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    max-height:62px !important;
    border-radius:16px !important;
    font-size:22px !important;
  }

  .smx-card strong{
    color:#ffffff !important;
    font-size:15.5px !important;
    font-weight:800 !important;
  }

  .smx-card span{
    color:#dce8f3 !important;
    font-size:13.5px !important;
    font-weight:500 !important;
  }
}