/* ==========================================================================
   Page header (§9.2)
   The scroll-linked parallax scene this file used to drive is gone: §9.2 bans
   parallax, scroll-linked background movement and decorative gradients, and
   §9.5 lists load-time animation in its avoid column. What is left is the flat
   header, which needs almost no CSS at all — the surface tokens do the work.
   The file and its <link> are kept so the header keeps a home of its own.
   ========================================================================== */
.elx-pagehead .elx-eyebrow { color: rgba(255, 255, 255, .75); }
.elx-pagehead .lead { color: var(--ink-on-deep); }

/* Blog and case-study headers pass a meta row (date, tag, read time). */
.elx-pagehead .d-flex > span { color: var(--ink-on-deep); }

/* ==========================================================================
   Gradient header (.elx-pagehead--grad, coloured by .elx-pal on <body>)
   --------------------------------------------------------------------------
   A deliberate exception to the flat-surface rule above, requested for the
   content headers. Every page rendering the header partial gets it.

   GEOMETRY IS FIXED, COLOUR VARIES. Every page uses the identical layer
   stack below; `.elx-pal` on <body> supplies the five tones and two glows
   as custom properties, derived from that page's own pair of hues. Because
   they sit on <body> rather than on this section, the closing CTA band
   elsewhere in the page reads the same values and the two always agree.

   Layers, front to back:
     1. a fine dot grid — the texture that keeps a large flat gradient from
        looking like an empty swatch
     2. an accent bloom, held to the RIGHT of the band
     3. the dark-to-accent sweep itself

   The accent is deliberately kept out of the left two thirds. The header's
   copy lives in a .col-lg-9, and white text over a bright accent runs about
   2.9:1 — nowhere near readable. The 64% stop is --ph-deep, whose fixed 27%
   lightness measures at least 7.86:1 against white across all 108 published
   pages, and the bloom's inner edge lands near 67%, just past where the
   copy ends. The accent is a colour beside the text, never behind it.

   The compound selector is intentional. `.elx-surface-deep` sets a
   background-color in typography.css, which loads after this file, so a
   single class here would lose on cascade order.
   ========================================================================== */
.elx-pagehead.elx-pagehead--grad {
  background-color: var(--ph-base);
  background-image:
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px),
    radial-gradient(38% 110% at 94% 26%,
      var(--ph-glow-a) 0%, var(--ph-glow-b) 46%, transparent 70%),
    linear-gradient(100deg,
      var(--ph-base) 0%, var(--ph-mid) 44%, var(--ph-deep) 64%,
      var(--ph-warm) 88%, var(--ph-accent) 100%);
  background-size: 22px 22px, cover, cover;
  background-position: 0 0, center, center;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* On a phone the band is far narrower than it is wide, so the sweep would
   drag the accent in behind the copy. Turned vertical, it sits below the
   text instead of across it. */
@media (max-width: 767.98px) {
  .elx-pagehead.elx-pagehead--grad {
    background-image:
      radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px),
      radial-gradient(80% 46% at 78% 96%,
        var(--ph-glow-a) 0%, var(--ph-glow-b) 48%, transparent 74%),
      linear-gradient(165deg,
        var(--ph-base) 0%, var(--ph-mid) 52%, var(--ph-deep) 82%, var(--ph-warm) 100%);
  }
}

/* --------------------------------------------------------------------------
   The palette, built from the page's two hues.

   `.elx-pal` sits on <body> carrying --ph-h (the dark family) and --ph-ah
   (the accent) as inline custom properties; see elx_page_hues() in
   app/Common.php. One rule therefore produces a different palette for every
   page, instead of a fixed list that 106 pages had to share.

   LIGHTNESS IS FIXED, HUE VARIES. That is what keeps the contrast promise
   true for every page at once: --ph-deep is the lightest tone the copy ever
   sits on, and pinning it to 27% L means white stays far above the 7:1 bar
   whatever hue it is rotated to. Only the last two stops and the blooms —
   all of which sit past the text — go bright.

   Neither hue is ever in the 62-172deg arc, so no page turns green, and no
   dark tone turns olive or brown.
   -------------------------------------------------------------------------- */
.elx-pal {
  --ph-base:   hsl(var(--ph-h) 58% 9%);
  --ph-mid:    hsl(var(--ph-h) 62% 17%);
  --ph-deep:   hsl(var(--ph-h) 64% 27%);
  --ph-warm:   hsl(var(--ph-ah) 74% 40%);
  --ph-accent: hsl(var(--ph-ah) 86% 56%);
  --ph-glow-a: hsl(var(--ph-ah) 92% 58% / .55);
  --ph-glow-b: hsl(var(--ph-h)  82% 52% / .24);
}

/* No hue set (a page rendered outside the normal layout) falls back to the
   original flat deep surface rather than to hsl(0 ...) red. */
.elx-pal:not([style*="--ph-h"]) {
  --ph-base: var(--surface-deep); --ph-mid: var(--surface-deep);
  --ph-deep: var(--surface-deep); --ph-warm: var(--surface-deep);
  --ph-accent: var(--surface-deep);
  --ph-glow-a: transparent; --ph-glow-b: transparent;
}