.app-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 10px;
  background: linear-gradient(
    180deg,
    #f5f9ff 0%,
    #eef6ea 60%,
    #e8f3e5 100%
  );
  border-bottom: 1px solid #d8e5d2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  flex: 0 0 auto;
}

.app-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.app-logo{
  width:30px;
  height:30px;
  display:block;
}

.site-name{
  font-size:18px;
  font-weight:700;
  color:#2a4f2a;
  text-shadow:0 1px 1px rgba(255,255,255,0.7);
}

.site-name-link{
  text-decoration:none;
}

.nav-row{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.nav-btn{
  padding:10px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:#fff;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
  background-image: linear-gradient(
    rgba(255,255,255,0.18),
    rgba(0,0,0,0.06)
  );
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    filter 0.08s ease;
}

.nav-btn:hover{
  filter:brightness(1.05);
}

.nav-btn:active{
  transform:translateY(1px);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    inset 0 1px 2px rgba(0,0,0,0.15);
}

.nav-btn.active{
  outline:3px solid rgba(255,255,255,0.6);
}

.nav-btn.events{
  background-color:#d94b4b;
}

.nav-btn.eatdrink{
  background-color:#2f8f4e;
}

.nav-btn.discover{
  background-color:#3a6fd8;
}