:root{
  --scs-red: #9f0014;
  --scs-red-dark: #7f0010;
  --scs-ink: #0b1220;
  --nav-h: 70px;
}

/* reserve space for fixed navbar */
body{ padding-top: var(--nav-h); }

/* Fixed bar */
.navbar-scs{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;

  /* fallback surface (always) */
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(15,23,42,.14);

  /* compositor stability */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* only use blur when supported (and slightly lighter) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .navbar-scs{
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
  }
}


/* Container row */
.navbar-scs .navbar-bsa-row{
  min-height: var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Brand */
.navbar-scs .navbar-bsa-brand{
  display:flex;
  align-items:center;
  padding:0;
}
.navbar-scs .navbar-bsa-brand img{
  width: 54px;
  height: 54px;
  object-fit:contain;
  display:block;
}

/* Desktop socials (15% larger) */
.navbar-bsa-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  flex: 1 1 auto; /* centers between brand + right */
}
.navbar-bsa-social a{
  color: var(--scs-ink);
  opacity:.75;
  font-size: 1.21rem;
  line-height:1;
  transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.navbar-bsa-social a:hover{
  opacity:1;
  transform: translateY(-1px);
  color: var(--scs-red);
  text-decoration:none;
}

/* Right nav (desktop horizontal) */
.navbar-bsa-nav{
  display:flex !important;
  flex-direction: row !important;
  align-items:center;
  gap: .25rem;
  margin:0;
  padding:0;
  list-style:none;
}

/* Links */
.navbar-scs .nav-link{
  position: relative;
  color: var(--scs-ink) !important;
  opacity:.9;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem .95rem !important;
  background: transparent;
  border-radius: 0;
  transition: color .15s ease, opacity .15s ease;
}
.navbar-scs .nav-link::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: .35rem;
  height: 2px;
  background: var(--scs-ink);
  transform: scaleX(0);
  transform-origin:center;
  opacity:.85;
  transition: transform .18s ease-out, background .18s ease-out;
}
.navbar-scs .nav-link:hover{ opacity:1; text-decoration:none; }
.navbar-scs .nav-link:hover::after{ transform: scaleX(1); }
.navbar-scs .nav-link.active{
  opacity: 1;
  color: var(--scs-red) !important;
}
.navbar-scs .nav-link.active::after{
  background: var(--scs-red);
  transform: scaleX(1);
}

/* Join CTA */
.navbar-scs .join-cta .btn{
  display:inline-flex;
  align-items:center;
  background: var(--scs-red);
  border: 1px solid var(--scs-red-dark);
  color:#fff !important;
  font-weight: 800;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding:.5rem 1rem;
  box-shadow:none;
}
.navbar-scs .join-cta .btn:hover{
  background: var(--scs-red-dark);
  border-color: var(--scs-red-dark);
  text-decoration:none;
}

/* Toggler button */
.navbar-bsa-toggler{
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 12px;
  padding: .45rem .6rem;
  background: rgba(255,255,255,.92);
}
.navbar-bsa-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(159,0,20,.15);
}

/* Force burger icon visibility by overriding Bootstrap SVG with red strokes */
.navbar-scs .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(159,0,20,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ------------------------------
   Mobile: ONLY logo + burger visible.
   Collapsed menu becomes a panel.
-------------------------------- */
@media (max-width: 991.98px){
  /* tighter top row; also prevents logo + burger being too close */
  .navbar-scs .navbar-bsa-row{
    gap: 12px;
  }

  .navbar-scs .navbar-bsa-brand img{
    width: 50px;
    height: 50px;
  }

  /* collapse panel */
  .navbar-scs .navbar-collapse{
    width: 100%;
    margin-top: .65rem;
    padding: .85rem .95rem;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 50px rgba(15,23,42,.12);
  }

  /* nav vertical in panel */
  .navbar-bsa-nav{
    flex-direction: column !important;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .navbar-bsa-nav .nav-link{
    padding: .7rem .15rem !important;
  }

  /* full width join inside panel */
  .navbar-scs .join-cta .btn{
    width: 100%;
    justify-content: center;
    margin-top: .35rem;
  }

  /* mobile socials inside panel */
  .bsa-mobile-social{
    display:flex;
    justify-content:center;
    gap: 1.15rem;
    padding-top: .75rem;
    margin-top: .6rem;
    border-top: 1px solid rgba(15,23,42,.08);
  }
  .bsa-mobile-social a{
    font-size: 1.2rem;
    color: rgba(15,23,42,.72);
  }
  .bsa-mobile-social a:hover{
    color: var(--scs-red);
    text-decoration:none;
  }
}