/**
 * Shared "simple page title" header — left-aligned. Rendered by
 * template-parts/page-header.php, used by any template that just
 * needs a page name (plus, optionally, an eyebrow label, a short
 * description, and one CTA link) up top rather than a full custom
 * hero: Current Voices, Category Feed pages, native category
 * archives, and the About page.
 */
.page-header {
  /* Top padding is intentionally larger than it looks like it needs to
     be: this sits directly under the fixed .site-header, whose real
     height .header-space (css/main.css) reserves space for. That
     reservation is synced live from the header's actual rendered
     height (js/interactions.js's initHeaderSpaceSync()) rather than a
     fixed guess, but a caching layer serving a stale copy of that
     script — or any other timing gap between the two — has repeatedly
     shown up here first, as the eyebrow label clipping behind the
     nav bar. This extra margin is deliberate slack against exactly
     that, not an oversight to "clean up" later. */
  padding: var(--space-24) 0 var(--space-8);
  text-align: left;
}

.page-header__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.page-title {
  font-size: var(--font-size-h1);
  font-weight: bold;
  margin: 0;
}

.page-header__desc {
  margin: var(--space-3) 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 56ch;
}

.page-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 11px 20px;
  transition: border-color var(--transition-fast);
}

.page-header__cta svg,
.page-header__cta img {
  width: 16px;
  height: 16px;
}

.page-header__cta:hover {
  border-color: var(--color-accent);
}

@media (max-width: 480px) {
  .page-header {
    padding: var(--space-16) 0 var(--space-6);
  }

  .page-header__cta {
    display: flex;
    width: fit-content;
    text-align: left;
  }
}