/* ============================================================
   COMPONENT: Page Header (Shared, internal pages)
   FILE: assets/css/page-header.css
   Phase: Stage 6 (Final Master Blueprint Roadmap V3, §8).
   Depends on: tokens.css, base.css, surfaces.css, breadcrumbs.css
   (loaded before this file). Owns only .page-header* selectors
   and the `--on-dark` breadcrumb variant it introduces for use on
   this component's gradient surface.

   Bilingual/RTL: logical properties only.
   ============================================================ */

.page-header {
  padding-block-start: calc(var(--space-10) + 64px); /* clears the fixed transparent header, matching hero.css's offset convention */
  padding-block-end: var(--space-8);
}

.page-header__inner {
  text-align: start;
}

.page-header__heading {
  font-size: var(--text-h1);
  color: var(--color-white);
  margin-block-start: var(--space-2);
  margin-block-end: var(--space-1);
}

.page-header__subheading {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
}

/* Breadcrumbs on the dark gradient surface need light-on-dark colors —
   this is the one approved variant of the shared breadcrumbs component. */
.breadcrumbs--on-dark .breadcrumbs__link {
  color: var(--color-white);
  opacity: 0.72;
}

.breadcrumbs--on-dark .breadcrumbs__link:hover,
.breadcrumbs--on-dark .breadcrumbs__link:focus-visible {
  opacity: 1;
  color: var(--color-white);
}

.breadcrumbs--on-dark .breadcrumbs__separator {
  color: var(--color-white);
  opacity: 0.4;
}

.breadcrumbs--on-dark .breadcrumbs__current {
  color: var(--color-gold);
}