/* =============================================================================
   page-header.css — reusable page heading (title + optional tagline)
   Desktop only. Visibility (display: none → flex at 1024px+) is owned by
   .page-header in css/layout.css — mobile uses .section-title-bar instead
   (see css/components/section-title-bar.css), so nothing here can leak onto
   mobile. This file owns typography and spacing.

   Structure — identical on every page, only the text changes:

     <header class="page-header">
       <h1 class="page-title">Bibliographie</h1>
       <p class="page-subtitle">Now part of a private collection</p>
     </header>

   - .page-title always reflects the current page's name.
   - .page-subtitle is entirely optional. Omit the <p> on pages with no
     tagline/status — most pages have none. Do not hardcode a shared
     tagline; only pages that have real per-page status text include it.
   - Sits directly after .breadcrumb inside .content-area. The 32px gap
     above this component is .breadcrumb's own margin-bottom (see
     css/components/breadcrumb.css) — this file adds no top margin on
     .page-header itself, so the two gaps don't stack.
   ============================================================================= */


/* ── Title ───────────────────────────────────────────────────────────────────── */

.page-title {
  font-family: var(--font-family-base);
  font-size: 1.75rem;                    /* 28px */
  font-weight: 400;                      /* Regular — overrides globals.css h1 { font-weight: 700 } */
  color: var(--color-white);
  margin: 0;
}

/* ── Modifier: accent color (Collection, About me, Turn your route into art) ──
 * Opt-in per page — add "page-title--accent" alongside the base class on
 * only those three pages' <h1>. FAQs and Contact are NOT included and keep
 * the default white above. Matches .section-title--accent (mobile) and
 * .artwork-card__title / .artwork-detail__title's gray-50 (#D2D2D2).
 * ─────────────────────────────────────────────────────────────────────── */
.page-title--accent {
  color: var(--color-gray-50);           /* #D2D2D2 */
}


/* ── Tagline (optional) ─────────────────────────────────────────────────────── */

.page-subtitle {
  font-family: var(--font-family-base);
  font-size: 1rem;                       /* 16px */
  font-weight: 400;                      /* Regular */
  color: var(--color-rose-400);
  margin: 0;
  margin-top: var(--space-2);            /* 8px below the title */
}


/* ── Spacing below the component ────────────────────────────────────────────── */

.page-header {
  margin-bottom: var(--space-8);         /* 32px before whatever follows (.page-main) */
}


/* ── Modifier: content pages (Commission, About, FAQs, Contact, The Artistic
 * Process) — removes reliance on margin collapsing ───────────────────────────
 * The base .page-header above sits next to .page-main and its 32px
 * margin-bottom used to *collapse* with whatever margin-top the page's own
 * first content element supplied (process.css / commission.css /
 * contact.css / faq.css). That's correct CSS, but it's two separate values
 * from two different files relying on collapsing to produce the right
 * number — fragile if either value or the DOM between them ever changes.
 * This modifier removes the ambiguity: margin-bottom goes to 0, so the
 * single, explicit margin-top each page declares on its own first content
 * element (32px — see those files) is the entire gap below the title.
 *
 * Deliberately does NOT touch .page-title's own line-height/height/
 * position — an earlier pass did, and that shifted the title's vertical
 * position out of sync with Collection (same component, meant to render
 * identically above the title on every page that uses it). Only the
 * space *below* the title is this modifier's concern. NOT applied to
 * Collection or individual Artwork pages — .page-header there keeps the
 * original collapsing behavior untouched.
 * ─────────────────────────────────────────────────────────────────────── */
.page-header--content {
  margin-bottom: 0;
}