/* What this is and where its config comes from:
docs/claude_context/title_banner.md

position:relative + overflow:hidden is what clips/positions the dot
circles (see .title-banner-circle below); margin:auto is what keeps a
constrained width centered in its column instead of hugging the left edge
(text-align:center on .category-page/.article-index-page only centers
inline content, not a block-level element's own box). */
.title-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  padding: 3rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 16px var(--color-shadow-strong);
}

/* same fix, same reason, as #page-title-plain[hidden] above -- .title-
banner's own "display: flex" (needed to vertically center its h1) now
ties [hidden]'s specificity too, and author CSS wins ties over the UA
stylesheet, so the banner would otherwise stay visible even while
[hidden]. */
.title-banner[hidden] {
  display: none;
}

.title-banner h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  /* a long single-word title (no spaces to wrap at) would otherwise
  overflow .title-banner's own width and get clipped by its
  overflow:hidden (needed to clip the dot circles) instead of wrapping. */
  overflow-wrap: break-word;
}

/* one scattered dot -- position/size randomized per-circle by
title_banner.js, this just supplies the fixed part every circle shares.
Color comes from --dot-color (set on .title-banner itself, banner_dot_color
-- editor-chosen, independent of the banner's own background color) via
inheritance. mix-blend-mode: overlay (rather than a flat rgba tint) is what
actually fixes dots disappearing/just-darkening on certain banner colors --
overlay reads as a soft highlight against ANY base color, light or dark,
saturated or pale, instead of flatly lightening or darkening it. */
.title-banner-circle {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--dot-color, #ffffff);
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

/* .title-banner's own h1 (CategoryPage/StudentUnionCategoryPage both use
the plain .category-page h1 rule above, which would otherwise leak its
accent-color underline into the banner box too -- same specificity, so
this has to come after it in source order to actually win). The banner
already supplies its own background/color, this underline reads as a
stray leftover line inside it rather than a design choice. */
.title-banner h1 {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
}