/**
 * Page header — canonical shared component (A-20h)
 * ============================================================================
 *
 * The centred title block that opens an archive, a taxonomy term, a standard
 * Page and a single. Previously TWO near-duplicate families living in
 * `theme-unified.css`, which shipped them on every page and breached the
 * ownership rule in CLAUDE.md §5:
 *
 *   `.archive-header`  — CPT archives and taxonomy terms (11 live routes)
 *   `.tiorai-header`   — Pages, singles and the generic `archive.php` fallback
 *
 * They are one pattern. Measured at the point of consolidation, every property
 * where they disagreed had `.archive-header` as the better implementation — it
 * carries the `@supports` fallback for `background-clip: text`, a themed
 * description colour, responsive steps and a print rule; `.tiorai-header` had
 * none of those. So `.archive-header` is the canonical base, and the only two
 * values worth keeping from `.tiorai-header` are its narrower measure and
 * tighter title rhythm, which survive as the `--compact` modifier.
 *
 * CANONICAL NAME: `.tr-page-header` (§9.4a — new shared UI is `tr-*`).
 *
 * "page-header", not "archive-header": the pattern is not archive-specific.
 * Seven of its consumers are Pages and singles, so naming it after archives
 * would have locked in the wrong mental model at the moment of consolidation.
 *
 * MARKUP CONTRACT
 * ---------------
 *   <header class="tr-page-header">              [--compact for Pages/singles]
 *     <div class="tr-page-header__content">      [measure + centring]
 *       …breadcrumbs (optional, first child)…
 *       <h1 class="tr-page-header__title">…</h1> [exactly one per document]
 *       <p class="tr-page-header__description">…</p>          [optional]
 *       <div class="tr-page-header__meta">                    [optional]
 *         <span class="tr-page-header__count">…</span>        [optional]
 *       </div>
 *     </div>
 *   </header>
 *
 * Search (A-11) and filter (A-19) chrome render INSIDE this block on the tool
 * and prompt archives. Neither is styled here — they own their own files and
 * this component only provides the centred column they sit in.
 *
 * LEGACY COMPATIBILITY
 * --------------------
 * `.tiorai-header*` is GONE — all seven consumers migrated to `--compact` and a
 * repo-wide sweep of PHP, JS and CSS found no remaining markup using it. (The
 * `tiorai-header` strings still in `modules/header/header-functions.php` are
 * wp_enqueue HANDLES for `header.css`/`header.js`, not this class.)
 *
 * `.archive-header*` is RETAINED, deliberately, for the consumers that cannot
 * be migrated and verified here:
 *
 *   modules/resource/templates/archive-resource.php  — `modules/resource/
 *     assets/css/archive-layout.css` overrides `.archive-header__title` /
 *     `__description`, so the markup and its CSS have to move together, in a
 *     task that owns both.
 *   modules/workflow/templates/archive-ai_workflow.php — unreachable. The
 *     workflow module registers no `template_include` filter at all.
 *   modules/deal/templates/archive-ai_deal.php — the deal module is not loaded
 *     and `ai_deal` stays disabled by product decision (A-35).
 *
 * A-39 REMOVED TWO ENTRIES from this list. `taxonomy-prompt_category.php` and
 * `taxonomy-prompt_tag.php` were listed here as unreachable consumers of
 * `.archive-header`. They have been retired: the prompt archive, prompt
 * categories and prompt tags now all render through the single canonical
 * `modules/prompt/templates/archive-ai_prompt.php`, which uses `.tr-page-header`.
 * Verified at runtime in both themes — the taxonomy description computes
 * `rgb(71,85,105)` in light and `rgb(154,160,168)` in dark, so the 1.00:1
 * invisible-description defect those templates carried is gone with them.
 *
 * Migrating markup that cannot be rendered cannot be validated, so it is not
 * migrated. See the A-20h entry in `impeccable/AUDIT.md`.
 *
 * CASCADE POSITION — load-order dependent, verified rather than assumed.
 * Enqueued from `inc/unified-components.php`, which emits after
 * `theme-unified.css` but BEFORE any module stylesheet. That ordering matters:
 * `modules/collection/…/archive-collection.css` and
 * `modules/resource/…/archive-layout.css` both override these selectors at
 * equal specificity and must keep winning. Verified against the live link
 * order on `/lists/` — no stylesheet between `theme-unified.css` and this file
 * touches either family.
 *
 * @package TiorAI
 * @since 1.28.0
 */

/* ----------------------------------------------------------------------------
   Block
   -------------------------------------------------------------------------- */

.tr-page-header,
.archive-header {
  padding: 90px 0;
  margin-bottom: var(--space-2);
  text-align: center;
}

/* Ambient glow. Note this is `position: absolute` against an unpositioned
   block, so it resolves against the nearest positioned ancestor rather than
   the header itself. That is pre-existing behaviour, relocated unchanged —
   giving the block `position: relative` here would move the glow on every
   consumer at once. Recorded in A-20h rather than silently corrected. */
.tr-page-header::before,
.archive-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(var(--color-primary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Content column — the measure
   -------------------------------------------------------------------------- */

.tr-page-header__content,
.archive-header .archive-header-content {
  max-width: 750px;
  margin: 0 auto;
}

.tr-page-header--compact .tr-page-header__content {
  max-width: 650px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */

/* Page title — the theme's display tier, and now a real fluid step (A-15).
   -----------------------------------------------------------------------------
   A-20h left this at a flat `2.5rem` and handed the defect to Phase 13. The
   defect: the two responsive `font-size` steps at the bottom of this file are
   single-class `(0,1,0)` while this rule is two-class `(0,2,0)`, so they LOSE
   and have never applied. Measured at 390px, the title rendered **40px** — not
   the 30px the `≤768` block asks for, nor the 24px the `≤480` block asks for.
   The most prominent heading on nearly every route has been running at desktop
   size on phones since the rules were written.

   Fixed with a clamp rather than by repairing the two media queries, which is
   what A-15 asked for — "no shared fluid step" was one of its three findings —
   and it also removes the steps' second bug: they are INVERTED, asking for
   30px at ≤768 but 24px at ≤480, so a phone would have got a smaller title
   than the tablet rule intended for it.

   `clamp(1.875rem, 1.574rem + 1.235vw, 2.5rem)` solves for exactly the two
   endpoints already in the scale, across the theme's real viewport range:
       390px viewport -> 25.18px + 4.82px = 30px  (= --font-size-3xl)
      1200px viewport -> 25.18px + 14.82px = 40px (= the current 2.5rem)
   Between them it scales continuously instead of snapping at two breakpoints.

   TEXT-RESIZE SAFE, which A-15 recorded as a hard constraint for any fluid
   step it adopted: `vw` ignores the browser's text-size setting, so the
   minimum is pure `rem` and the preferred value keeps a `rem` term. A visitor
   who scales text only still gets a title that grows.

   Not degenerate and not inverted: min 30px < max 40px. */
.tr-page-header .tr-page-header__title,
.archive-header .archive-header__title {
  font-size: clamp(1.875rem, 1.574rem + 1.235vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 var(--space-6) 0;
  color: var(--color-text-primary);
  line-height: 1.2;
  background: var(--color-text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tr-page-header--compact .tr-page-header__title {
  margin: 0 0 var(--space-2) 0;
  line-height: 1.6;
}

/* Gradient text is painted by clipping the background to the glyphs and making
   the fill transparent. Without `background-clip: text` the fill stays
   transparent and the heading disappears, so the unsupported branch has to put
   both back. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .tr-page-header .tr-page-header__title,
  .archive-header .archive-header__title {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--color-text-primary);
  }
}

/* ----------------------------------------------------------------------------
   Description
   -------------------------------------------------------------------------- */

/* `.tiorai-header__description` used to declare a hardcoded
   `rgba(255, 255, 255, 0.7)` here — a dark-theme value with no light
   counterpart, the same defect class as A-01. Measured on `/contact-us/` in
   light theme: white text on a white surface, contrast **1.00:1**, i.e. the
   description was invisible on every Page, every single and the generic
   `archive.php` fallback. Its twin `.archive-header__description` had already
   been repaired the same way, so the correct value was not in question. */
.tr-page-header__description,
.archive-header .archive-header__description {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-10) 0;
  font-weight: 400;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   Meta row + result count
   -------------------------------------------------------------------------- */

.tr-page-header__meta,
.archive-header__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.tr-page-header__count,
.archive-header__count {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Only the `padding` steps below actually apply. The `font-size` steps are
   single-class and lose to the two-class base rule above — see the note there.
   They are kept verbatim so the defect stays visible to A-15 rather than being
   quietly deleted; deleting them would erase the evidence that a responsive
   type step was ever intended.

   `--compact` opts OUT of these steps, so that migrating a Page or single off
   `.tiorai-header` is a genuine no-op. `.tiorai-header` was never in them, and
   inheriting them would not be an upgrade: the two steps are inverted — 8px at
   ≤768 but 24px at ≤480 — so a tablet gets LESS breathing room than a phone.
   That inversion is real and live on every archive today. It is a
   spacing-rhythm decision, so it goes to Phase 13 with the type scale rather
   than being propagated to seven more templates here.

   The opt-out is a second single-class rule, NOT `:not(--compact)` on the
   first. `:not()` would raise the selector to two-class specificity, and these
   rules are deliberately single-class so that a module override still wins:
   `.news-archive__header` sets `padding-bottom: var(--space-2)` at (0,1,0) from
   a stylesheet that loads later, and it must keep winning. Measured — the
   `:not()` form silently changed the news archive's mobile padding from 8px to
   24px before this was caught. */
@media (max-width: 768px) {
  .archive-header,
  .tr-page-header {
    padding: var(--space-2) 0;
  }

  .tr-page-header--compact {
    padding: 90px 0;
  }

  /* The inert `font-size` step that used to sit here is gone — the clamp on
     the base rule now does this job continuously. See the note there. */
}

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

  .tr-page-header--compact {
    padding: 90px 0;
  }

  /* Second inert `font-size` step removed with the first. It also disagreed
     with it — 24px here against 30px at the wider breakpoint — so a phone was
     asking for a SMALLER title than a tablet. The clamp has one minimum. */
}

/* ----------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .tr-page-header,
  .archive-header {
    background: none !important;
    border: none !important;
    padding: var(--space-4) 0 !important;
  }
}