/* ============================================================
   Navbar Component (BSA Strategy Navbar)
   File: /assets/css/components/navbar.css
   ============================================================ */

:root{
  --nav-bg: rgba(255,255,255,0);
  --nav-border: rgba(15,23,42,0.10);
  --nav-text: #0f172a;     /* slate-900 */
  --nav-muted: rgba(15,23,42,0.72);
  --nav-accent: #E60028;   /* BSA red */
}

/* Strategy-style surface */
.navbar-strategy{
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.00);
}

/* Brand */
.navbar-strategy .navbar-brand img{
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
}

/* Links */
.navbar-strategy .nav-link{
  color: var(--nav-muted) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: .55rem .75rem !important;
  border-radius: 12px;
  transition: color .15s ease, background-color .15s ease, transform .15s ease;
}

.navbar-strategy .nav-link:hover,
.navbar-strategy .nav-link:focus{
  color: var(--nav-text) !important;
  background: rgba(15,23,42,0.05);
}

/* Active: clean underline + accent */
.navbar-strategy .nav-link.active{
  color: var(--nav-text) !important;
  position: relative;
  background: rgba(15,23,42,0.04);
}
.navbar-strategy .nav-link.active::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-accent);
  opacity: .95;
}

/* CTA button */
.navbar-strategy .join-cta .btn{
  background: #ffffff;
  color: var(--nav-text);
  border: 1px solid rgba(15,23,42,0.18);
  font-weight: 700;
  border-radius: 999px;
  padding: .55rem 1rem;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.06);
}
.navbar-strategy .join-cta .btn:hover{
  background: var(--nav-accent);
  border-color: var(--nav-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.14);
}

/* Social icons */
.navbar-strategy .social-icons a{
  color: var(--nav-muted);
  margin-left: .85rem;
  font-size: 1.15rem;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
  opacity: .9;
}
.navbar-strategy .social-icons a:hover{
  color: var(--nav-accent);
  transform: translateY(-1px);
  opacity: 1;
}

/* Desktop spacing */
@media (min-width: 992px){
  .navbar-strategy .navbar-nav{ gap: .35rem; }
  .navbar-strategy .nav-link{ padding: .55rem .9rem !important; }
}

/* Mobile panel */
@media (max-width: 991.98px){
  #bsaNavbar .navbar-nav .nav-item + .nav-item{ margin-top: .35rem; }
  #bsaNavbar .join-cta{ margin-top: .85rem; }
  #bsaNavbar .join-cta .btn{ display:block; width:100%; }

  .navbar-strategy .navbar-collapse{
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(15,23,42,0);
    border-radius: 18px;
    padding: .85rem .9rem 1rem;
    margin-top: .75rem;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.10);
  }
}

/* Toggler: avoid the “invert” hack. Use a real icon via background-image */
.navbar-strategy .navbar-toggler{
  border-color: rgba(15,23,42,0.12);
}

.navbar-strategy .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15, 23, 42, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* ============================================================
   FIX: Stop logo + burger from shifting when mobile menu opens
   ============================================================ */

/* Keep the brand + toggler as a stable row */
.navbar-strategy .navbar-toprow{
  min-height: 72px;                 /* stable height */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* IMPORTANT: lock the logo size so it doesn't reflow */
.navbar-strategy .navbar-brand{
  display: flex;
  align-items: center;
  margin-right: 0;                  /* prevent "push" behaviour */
}

.navbar-strategy .navbar-brand img{
  width: auto;                      /* override your 52x52 square */
  height: 34px;                     /* stable logo height */
  max-height: 34px;
  object-fit: contain;
  border-radius: 0;                 /* optional: remove rounded square look */
}

/* Ensure collapse sits below and doesn't affect top row */
.navbar-strategy .navbar-collapse{
  width: 100%;
}