/* Navigation bar component: see templates/components/navbar.html.
   Uses the color variables defined in base.css. */
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: .9rem 2rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.navbar-user { display: inline-flex; align-items: center; gap: .65rem; justify-self: start; font-weight: 700; text-decoration: none; }
.navbar-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 2.25rem; height: 2.25rem; overflow: hidden; border-radius: 50%; color: var(--primary-dark); background: #e7f2f3; font-size: .9rem; }
.navbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; align-items: center; }
.nav a { padding: .55rem .75rem; border-radius: 9px; text-decoration: none; color: var(--muted); }
.nav a:hover, .nav a.active { color: var(--primary-dark); background: #e7f2f3; }
.logout {
  justify-self: end; padding: .55rem .75rem; border: 1px solid var(--danger); border-radius: 9px;
  color: var(--danger); text-decoration: none;
}
.logout:hover { color: #fff; background: var(--danger); }
/* A pressed link fades for a moment, as a text button does on iPhone. */
.navbar-user:active, .logout:active { opacity: var(--press-opacity); }
/* A pressed page link takes the selected look at once instead of fading, so it already looks like
   the page that is about to open, and nothing flickers while the page changes. */
.nav a:active { color: var(--primary-dark); background: #e7f2f3; }
@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; padding: 1rem; }
  .nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (pointer: coarse) {
  .navbar-user, .nav a, .logout { display: inline-flex; align-items: center; min-height: 2.75rem; }
}