/* Shared site chrome (header + footer) injected by site.js into
   <header id="site-header"> and <footer id="site-footer"> on every page.
   Edit here once — all pages update. ID-scoped + self-contained colors so it
   renders identically regardless of a page's own CSS. */

#site-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 16px; padding: 18px 28px;
}
#site-header .logo { display: flex; align-items: center; text-decoration: none; }
#site-header .logo-icon { width: auto; height: 26px; display: block; }
#site-header nav { display: flex; flex-wrap: wrap; gap: 4px; }
#site-header nav a {
  color: #64748b; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 6px 10px; border-radius: 8px;
}
#site-header nav a:hover { color: #0f172a; background: #f8fafc; }
#site-header nav a.active { color: #0f766e; background: #f0fdfa; }

#site-footer {
  border-top: 1px solid #e2e8f0; padding: 28px 20px; text-align: center;
  color: #64748b; font-size: 13px; line-height: 2; background: transparent;
}
#site-footer a { color: #64748b; margin: 0 8px; text-decoration: none; }
#site-footer a:hover { color: #0f172a; }

@media (max-width: 600px) {
  #site-header { padding: 14px 18px; }
}