/* Shared blue header; article and footer styles remain independent. */
.site-header {
  background: var(--color-primary);
  border-bottom-color: transparent;
}
.site-header .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  white-space: normal;
}
.site-header .site-brand:hover { color: #fff; }
.site-brand-mark {
  flex: 0 0 80px;
  width: 80px;
  height: auto;
}
.site-brand-name { line-height: 1.25; }
.site-header .site-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 0;
}
.site-header .site-nav a {
  color: #fff;
  border-radius: 4px;
  padding: 6px 8px;
}
.site-header .site-nav a:hover,
.site-header .site-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.site-header .mobile-menu summary { color: #fff; }
.site-header .mobile-menu summary:hover,
.site-header .mobile-menu[open] summary {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.site-header .site-brand:focus-visible,
.site-header .site-nav a:focus-visible,
.site-header .mobile-menu summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}
.site-header .mobile-menu nav a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
@media (max-width: 600px) {
  .site-header .site-brand { gap: 10px; font-size: 1rem; }
  .site-brand-name span { display: block; }
  .site-brand-mark { flex-basis: 64px; width: 64px; }
  .site-header .header-top { gap: 12px; }
}