/* ============================================================
   theme/css/blog-header.css  (BLOG HEADER ONLY)
   Loaded on top of header-base.css by theme/blog-header.php. The tools
   mega-menu (header.css) is never linked on blog pages — the "Tools"
   item in the blog nav uses the shared, lightweight .submenu component
   from header-base.css instead.
   ============================================================ */

/* "Blog" context pill next to the crow mark, for quick way-finding */
.brand-context {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-left: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.brand-context:hover {
  background: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .brand-context { display: none; }
}