/* Option A: individual outlined buttons, scoped to the main header only. */
.topbar { gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.topbar .brand { flex-shrink: 0; }
.topbar .main-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.topbar .main-nav a, .topbar .logout-form .link-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 10px 13px;
  border: 1px solid #bfd0c6; border-radius: 9px;
  background: var(--surface); color: #253d33;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.3;
  text-align: center; text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.topbar .logout-form { flex-shrink: 0; }
.topbar .main-nav a:hover, .topbar .logout-form .link-button:hover { background: #f0f6f2; border-color: #8baa9a; }
.topbar .main-nav a[aria-current="page"] { background: var(--green); border-color: var(--green); color: #fff; }
.topbar .main-nav a:focus-visible, .topbar .logout-form .link-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 1400px) {
  .topbar { flex-wrap: wrap; position: static; }
  .topbar .main-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .topbar { padding-left: 4vw; padding-right: 4vw; }
  .topbar .main-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar .main-nav a, .topbar .logout-form .link-button { min-height: 44px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .main-nav a, .topbar .logout-form .link-button { transition: none; }
}