/* ------------------------------------------------
   NAVBAR
--------------------------------------------------- */

.navbar{
  width:100%;
  position:sticky;
  top:0;
  left:0;
  z-index:9999;
  background:#031633;
  padding:.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

.navbar-container{
  width:100%;
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

/* ==================================================
   BRAND (LOGO + TEXT)
================================================== */

.navbar-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;

  /* Safari/desktop flex hardening */
  flex:1 1 auto;
  min-width:0;
}

.navbar-logo{
  height:60px;
  width:auto;
  display:block;
  flex:0 0 auto; /* never shrink logo */
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0; /* allows ellipsis */
}

.brand-name{
  font-weight:700;
  font-size:1rem;
  color:#fff;
}

.brand-subtitle{
  font-size:.75rem;
  font-weight:500;
  color:#d1d1d1;
  letter-spacing:.02em;
  margin-top:.15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}

/* Name swap */
.brand-name-desktop{ display:inline; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:520px; }
.brand-name-mobile{ display:none; }

@media (max-width:1100px){
  .brand-name-desktop{ display:none; }
  .brand-name-mobile{ display:inline; }
}

/* ==================================================
   DESKTOP MENU
================================================== */

.navbar-menu{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-right:2rem;
}

.navbar-menu a{
  color:#fff;
  font-weight:500;
  font-size:1rem;
  text-decoration:none;
  position:relative;
}

.navbar-menu a:hover{ color:#ffc107; }

/* Gold separators (desktop only) */
.navbar-menu a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-.5rem;
  top:50%;
  transform:translateY(-50%);
  width:2px;
  height:18px;
  background:#ffc107;
}

.navbar-donate{
  padding:.3rem .8rem;
  font-size:.95rem;
  border-radius:999px;
  background:#ffc107;
  color:#031633 !important;
}

/* Keep the Donate heart icon red inside the yellow pill */
.navbar-donate i.bi-heart-fill {
  color: #c62828;
}

/* ==================================================
   HAMBURGER + MOBILE MENU
================================================== */

.navbar-toggle{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  margin-right:1rem;
}

@media (max-width:768px){
  .navbar-logo{ height:52px; }
  .brand-subtitle{
    display:block;
    font-size:.7rem;
    max-width:260px;
    white-space:normal;
  }

  .brand-name-mobile{
    display:block;
    max-width:260px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* IMPORTANT: never zero out body padding/margins here */

  .navbar-toggle{ display:block; }
  .navbar-menu a::after{ display:none !important; }

  .navbar-menu{
    position:absolute;
    top:100%;
    right:0;
    background:#031633;
    flex-direction:column;
    padding:1rem;
    gap:1rem;
    display:none;
    min-width:200px;
  }

  .navbar-menu.open{ display:flex; }

  .navbar-menu a{
    width:100%;
    padding:.5rem 0;
    border-bottom:1px solid #ffc107;
  }

  .navbar-menu .navbar-donate{
    border-bottom:none !important;
    padding:.6rem .8rem !important;
    line-height:1.2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}