/* ══════════════════════════════════════════════════════════════════════
   NAVBAR
   States: default (solid) · hero-page transparent · scrolled solid+blur
   ══════════════════════════════════════════════════════════════════════ */

/* ── Base ───────────────────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  box-shadow: 0 2px 8px rgba(18, 47, 92, .18);
  padding-top: .8rem;
  padding-bottom: .8rem;
  z-index: 1040;
  transition:
    background  var(--motion-slow) var(--ease-out),
    box-shadow  var(--motion-slow) var(--ease-out),
    padding     var(--motion-base) var(--ease-out);
}

/* ── Hero-page: dark gradient so white links are always readable ─────── */
.hero-page .navbar {
  background: linear-gradient(180deg,
    rgba(12, 28, 60, 0.78) 0%,
    rgba(12, 28, 60, 0.0) 100%);
  box-shadow: none;
}

/* ── Scrolled state (JS adds .navbar--scrolled) ─────────────────────── */
.navbar--scrolled,
.hero-page .navbar--scrolled {
  background: linear-gradient(135deg,
    rgba(18, 47, 92, .97) 0%,
    rgba(26, 74, 138, .97) 100%);
  box-shadow: 0 4px 28px rgba(18, 47, 92, .38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: .55rem;
  padding-bottom: .55rem;
}

/* ── Logo ───────────────────────────────────────────────────────────── */
.navbar-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  background: var(--color-white);
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.navbar-brand:hover .navbar-logo {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .2);
}

/* ── Brand text ─────────────────────────────────────────────────────── */
.navbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-acronym {
  font-family: 'Inter', var(--font-sans);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: .05em;
}

.brand-tagline {
  font-size: .62rem;
  color: rgba(255, 255, 255, .75);
  font-weight: 400;
  letter-spacing: .01em;
  max-width: 260px;
  line-height: 1.3;
}

/* ── Nav links — underline indicator style ──────────────────────────── */
.navbar-nav .nav-link {
  font-family: 'Inter', var(--font-sans);
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 500;
  font-size: .92rem;
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--motion-base) var(--ease-out),
              background-color var(--motion-base) var(--ease-out);
}

/* Animated underline */
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--motion-base) var(--ease-out);
}

.navbar-nav .nav-link:hover {
  color: var(--color-white) !important;
  background-color: rgba(255, 255, 255, .08);
}

.navbar-nav .nav-link:hover::after { width: 55%; }

.navbar-nav .nav-link.active {
  color: var(--color-white) !important;
  font-weight: 700;
}
.navbar-nav .nav-link.active::after { width: 60%; }

/* ── Donate button in nav ───────────────────────────────────────────── */
.navbar-nav .btn-donate {
  padding: .45rem 1.15rem;
  font-size: .88rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.navbar-nav .btn-donate:hover { transform: translateY(-2px); }

/* ── Toggler ────────────────────────────────────────────────────────── */
.navbar-toggler {
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-sm);
  padding: .35rem .55rem;
  transition: background-color var(--motion-base) var(--ease-out);
}
.navbar-toggler:hover  { background: rgba(255, 255, 255, .1); }
.navbar-toggler:focus  { box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }

/* Custom animated hamburger icon */
.navbar-toggler-icon {
  background-image: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  position: relative;
}

/* Use Font Awesome bars icon via content – simpler: keep Bootstrap SVG but tint it */
.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%28255,255,255,.92%29' stroke-linecap='round' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Mobile collapse — slide + fade ────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-collapse {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: .65rem;
    padding: .75rem 0 .5rem;
    /* slide handled by Bootstrap; we add a subtle bg */
    background: rgba(18, 47, 92, .55);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    backdrop-filter: blur(8px);
  }

  .navbar-nav .nav-link {
    padding: .55rem 1rem;
    border-radius: var(--radius-sm);
  }

  /* Remove underline on mobile — use left border instead */
  .navbar-nav .nav-link::after { display: none; }

  .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, .14);
    border-left: 3px solid var(--color-white);
    padding-left: calc(1rem - 3px);
  }

  .navbar-nav .nav-item { margin-bottom: .1rem; }

  .navbar-nav .btn-donate {
    margin-top: .6rem;
    display: inline-block;
  }
}

/* ── Focus ring for keyboard nav ────────────────────────────────────── */
.navbar-nav .nav-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .75);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}