/* Blog hub — private prefix bh-. Do not reuse legacy article classes here. */
.bh {
  --bh-bg: #050816;
  --bh-card: #0d1438;
  --bh-text: #ffffff;
  --bh-body: rgba(255, 255, 255, 0.84);
  --bh-gold: #e2c89a;
  --bh-line: rgba(255, 255, 255, 0.18);
  --bh-pink: #c8168c;
  color: var(--bh-body);
  /* clears the fixed site header */
  padding: calc(var(--header-height, 64px) + 28px) 0 72px;
}

.bh-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.bh-kicker {
  margin: 0;
  color: var(--bh-gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bh h1,
.bh h2 {
  color: var(--bh-text);
  line-height: 1.15;
  margin: 8px 0 12px;
}

.bh h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.bh h2 { font-size: 1.35rem; }

.bh-lead {
  margin: 0 0 8px;
  max-width: 40rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.bh-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.bh-choice,
.bh-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--bh-line);
  background: transparent;
  color: var(--bh-text);
  font: inherit;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
}

.bh-choice[aria-pressed="true"],
.bh-filter[aria-current="page"],
html body.siya-h2-surface:not(.page-home) main .bh.bh button.bh-choice.bh-choice[aria-pressed="true"],
html body.siya-h2-surface:not(.page-home) main .bh.bh a.bh-filter.bh-filter[aria-current="page"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #050816 !important;
  -webkit-text-fill-color: #050816 !important;
  border-color: #ffffff !important;
}

.bh-card,
.bh-note {
  background: var(--bh-card);
  border: 1px solid var(--bh-line);
  border-radius: 16px;
  padding: 20px;
  margin: 14px 0;
}

.bh-card h2,
.bh-card h3 { margin-top: 8px; }

.bh-card a {
  color: var(--bh-text);
  text-decoration: none;
}

.bh-card a:hover,
.bh-card a:focus-visible { text-decoration: underline; }

.bh-meta {
  margin: 0;
  color: var(--bh-gold);
  font-size: 0.85rem;
}

.bh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.bh-cta,
html body.siya-h2-surface:not(.page-home) main .bh.bh a.bh-cta.bh-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 18px;
  border-radius: 999px;
  background: #c8168c !important;
  background-color: #c8168c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
}

.bh-cta:hover,
.bh-cta:focus-visible { color: #ffffff; text-decoration: underline; }

.bh-search label {
  display: block;
  margin-bottom: 8px;
  color: var(--bh-text);
  font-weight: 600;
}

.bh-search input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bh-line);
  background: #070c2a;
  color: var(--bh-text);
  font: inherit;
}

.bh-search-status { margin: 8px 0 0; }

.bh-results {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.bh-result {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: #070c2a;
  color: var(--bh-text);
  text-decoration: none;
}

.bh-result:hover,
.bh-result:focus-visible { text-decoration: underline; }

.bh-result span { display: block; }

.bh-result__meta { color: var(--bh-gold); font-size: 0.8rem; }

@media (min-width: 800px) {
  .bh-list { grid-template-columns: 1fr 1fr; }
}