/* Scratch — for CSS that has nowhere else to live yet.

   Scratch is for the *pre-artifact* phase: there's no component file,
   no page module, no page template, no typography concept yet. The
   moment any of those exists, the CSS belongs in the matching file —
   not here. See CLAUDE.md → "CSS Placement" for the full bright line.

   What's in here right now:
     - One labeled prototype (:has() trailing-emphasis experiment) that
       is intentionally NOT shipping as-is. Stays here as a "look at it"
       artifact while the production shape (ACF flag + body attribute)
       is decided.
*/


/* ─────────────────────────────────────────────────────────────────────
   PROTOTYPE — trailing emphasis bleeds into footer.

   Goal: when the last authored section in <article> has a
   data-emphasis, the gap between content and footer (.page-content
   padding-bottom) and the footer itself adopt that emphasis, so the
   page ends in one continuous color field instead of "section, white
   gap, white footer."

   Approach here: pure CSS via :has(). No PHP, no flag. Just to see if
   the visual works. See notes at the bottom for why this is *probably*
   not the shape we ship.

   Scope: hardcoded for "focused" only. Repeat the block per emphasis
   (alternate, immersive) if we move ahead with this approach.
───────────────────────────────────────────────────────────────────── */

body:has(article > section.page-section:last-of-type[data-emphasis='focused']) {
	/* Hoist focused tokens to body scope so descendant rules pick them
	   up via inheritance. */
	--trailing-fill:      var(--color-stone-900);
	--trailing-ink:       var(--color-stone-100);
	--trailing-fill-step: var(--color-stone-800);

	/* Bridge strip at the bottom of .page-content, sized to the
	   existing padding-bottom. Pseudo-element keeps the paint OFF
	   the section grid above. */
	.page-content {
		position: relative;
	}

	.page-content::after {
		content: '';
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 50px; /* matches .page-content padding-bottom */
		background-color: var(--trailing-fill);
		pointer-events: none;
	}

	/* Footer takes the emphasis bg directly. */
	.site-footer {
		background-color: var(--trailing-fill);
		color:            var(--trailing-ink);
	}

	/* site-index steps to a deeper variant so the footer still reads
	   as a distinct landmark inside the colored field. This is the
	   design call worth iterating on. */
	.site-footer site-index {
		background-color: var(--trailing-fill-step);
		color:            var(--trailing-ink);
	}
}

/* --- Notes for the comparison ------------------------------------------

WHY :has() IS THE WRONG FINAL SHAPE (even though it works for the demo):

1. "Last authored section" isn't a concept CSS can express.
   The selector above relies on `:last-of-type` skipping the
   page-end-spacer (it's a div, not a section). That's true today.
   Add any trailing <section> later — debug widget, admin tool,
   sitemap fragment — and the selector silently stops matching.
   It's a tripwire, not a contract.

2. There's no opt-out per page or per section.
   Every red CTA section bleeds. Every focused testimonial bleeds.
   Some authored endings *want* the hard footer break — a muted
   "related links" closer doesn't want to flood the footer with
   its color. CSS can't gate this on author intent.

3. Per-emphasis duplication.
   Each emphasis needs its own :has() block (or its own swap
   inside one body block per emphasis). Not the end of the world,
   but it's PHP work moved into CSS.

4. The selector grows with DOM reality.
   Section-groups, structural-helpers, future trailing widgets —
   each new layout pattern adds to a :not() exclusion list that
   doesn't even compose well with :last-of-type.

WHY THE FLAG/VARIABLE PATH WINS FOR PRODUCTION:

   - page-modules.php already iterates sections in render order.
     It knows which is the *intentional* trailing section.
   - One ACF flag per section ("extend to footer") encodes
     authoring intent — the CSS just paints when told to.
   - One body attribute (e.g. data-trailing-emphasis="focused")
     drives one CSS rule per emphasis, no :has() at all.
   - Survives DOM additions. Survives section-groups. Survives
     anything CSS can't see.

USE :has() FOR: this prototype, "look at it" experiments, one-off
                 page-specific tweaks.

USE THE FLAG FOR: the actual shipped feature.

----------------------------------------------------------------------- */