/* Shared top bar: logo, main links, social icons. Used by index.html, past-cleanups.html,
   about.html, get-involved.html and api/cleanup.js. On phones the links drop to their own row. */
header.top { background:var(--ink); color:var(--on-dark); position:relative; z-index:3; }
header.top .wrap { display:flex; align-items:center; gap:10px 22px; padding-top:12px; padding-bottom:12px; }
header.top .logo img { width:84px; height:auto; display:block; }
header.top nav { display:flex; align-items:center; gap:22px; margin-left:auto; }
header.top nav a { color:var(--on-dark); text-decoration:none; font-weight:600; font-size:.98rem; white-space:nowrap; }
header.top nav a:hover, header.top nav a[aria-current] { text-decoration:underline; text-underline-offset:4px; }
header.top a:focus-visible { outline:3px solid var(--on-dark); outline-offset:3px; border-radius:4px; }
@media (max-width: 760px) {
  header.top .wrap { flex-wrap:wrap; padding-top:10px; padding-bottom:10px; }
  header.top .logo img { width:60px; }
  header.top .social { margin-left:auto; gap:0; }
  header.top nav { order:3; flex-basis:100%; margin-left:0; justify-content:space-between; gap:8px;
                   border-top:1px solid var(--rule-dark); padding-top:10px; }
  header.top nav a { font-size:.95rem; }
}
@media (max-width: 400px) { header.top nav { gap:4px 6px; flex-wrap:wrap; } header.top nav a { font-size:.88rem; } }
@media (max-width: 350px) { header.top nav a { font-size:.8rem; } }