/* ==========================================================================
   page.css — page.php surface (every static page that uses the page template)
   ==========================================================================
   🔒 LOCKED — 2026-05-17

   Christopher considers the page.php template + this stylesheet finished.
   See user-memory entry [[reference_thisismyurl_pages_lock]] for the lock
   contract and per-session override.

   This file holds every rule that styles ONLY page.php (and its sibling
   page-* templates that re-use .page-entry — page-stance.php, page-
   stances-index.php, page-site-index.php). Rules shared with single.php's
   sidebar partial (.page-aside-cta, .page-hero-actions__*) stay in
   main.css so the sidebar item template-parts/sidebar/items/page-aside-cta.php
   keeps working on case_study / training_program / tool / post singles.

   Carved out of main.css 2026-05-17 alongside the figcaption craft pass
   that gives page captions their own visual register (smaller, muted,
   top-rule anchor, eyebrow pill) so a caption like:

       "Procurement security with explicit scope boundaries — and explicit
        honesty about what isn't in place."

   reads as caption-metadata under the diagram, not as another paragraph
   of body content. The pill + top-rule + tracked-out colour are the three
   signals; together they make the caption legible-as-caption from the
   peripheral-vision pass a reader makes before they decide to read the
   figure at all.

   Conditionally enqueued via inc/setup.php on is_page() (except glossary,
   which has its own page-glossary.css).
   ========================================================================== */


/* ---------------------------------------------------------------------------
   .page-entry — article wrapper around the_content() for page.php
   --------------------------------------------------------------------------- */

.page-entry {
  padding: clamp(1.2rem, 3vw, 2.2rem) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-entry .entry-content {
  /* No max-width on the container — figures and tables fill the full
     article column. The 64ch reading constraint applies only to text-
     bearing children below, so prose stays scannable while diagrams
     and data tables span edge-to-edge. Changed 2026-05-17 from
     `max-width: 64ch` on the container, which was crushing the
     /security/ posture diagram into a tiny inset square. */
  font-size: 1.03rem;
  line-height: 1.72;
}

/* Reading-comfort cap on text-bearing direct children only. Figures,
   tables, and wp-block-image siblings are deliberately excluded so they
   fill the article column. */
.page-entry .entry-content > :where(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, .wp-block-code, .wp-block-preformatted, .wp-block-quote, .wp-block-pullquote) {
  max-width: 64ch;
}

.page-entry .entry-content > * + * {
  margin-top: 1rem;
}

.page-entry .entry-content > :where(h3, h4) {
  margin-top: 2.4rem;
  margin-bottom: 0.4rem;
  /* Was --color-gold — violated tokens.css gold constraint
     (decorative accent, never as global body-text colour).
     Designer CC-3, audit 2026-05-03. Document hierarchy uses
     --color-text-strong, the canonical neutral-strong token. */
  color: var(--color-text-strong);
  letter-spacing: -0.005em;
}

.page-entry .entry-content > h2 {
  margin-top: 3.4rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}

.page-entry .entry-content > h2:first-child,
.page-entry .entry-content > :where(h3, h4):first-child {
  margin-top: 0;
}

.page-entry .entry-content :where(ul, ol) {
  margin-top: 0.6rem;
}

.page-entry .entry-content :where(ul, ol) li + li {
  margin-top: 0.5rem;
}


/* ---------------------------------------------------------------------------
   .page-entry figures + captions — caption-as-metadata, not body content
   ---------------------------------------------------------------------------
   The screenshot trigger 2026-05-17: the /security/ Scope-and-posture
   diagram's figcaption was rendering at body size and weight, so a reader
   skimming the page couldn't tell where the figure stopped and where the
   prose resumed. Three changes restore the caption's caption-ness:

     1. Top rule bridges from the image into the caption block so the
        caption visually attaches to the figure it describes.
     2. "FIGURE" pill eyebrow classifies the text BEFORE it reads — the
        reader's eye lands on the pill, then the caption text, then the
        next paragraph. The pill uses the same navy-on-tint chip register
        as section eyebrows elsewhere in the design system.
     3. Type spec — smaller (0.8125rem), muted colour, line-height 1.55,
        tracked-out 0.01em. Mirrors single-article.css's caption spec so
        a reader who arrives from a blog post recognises the convention.

   Photo-credit support: the .photo-credit span inside figcaption renders
   when the attachment has _thisismyurl_photo_credit meta populated (see
   reference_thisismyurl_photo_credit_system memory entry). Italic +
   right-aligned + smaller so it differentiates from the caption text.
   --------------------------------------------------------------------------- */

.page-entry .entry-content :where(figure, .wp-block-image) {
  margin: 1.85rem 0;
}

.page-entry .entry-content :where(figure, .wp-block-image) :where(img) {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: block;
  width: 100%;
  height: auto;
}

.page-entry .entry-content :where(figcaption, .wp-caption-text) {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-medium);
  font-style: normal;
  text-align: left;
  letter-spacing: 0.01em;
}

.page-entry .entry-content :where(figcaption, .wp-caption-text)::before {
  content: "Figure";
  display: inline-block;
  margin-right: 0.55rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(18, 52, 86, 0.08);
  color: var(--color-accent-strong, var(--color-accent));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.05em;
}

/* Photo-credit span — sub-line attribution beneath caption text.
   Italic + smaller + tracked + right-aligned so it differentiates from
   the caption proper. Mirrors single-article.css convention. */
.page-entry .entry-content figcaption .photo-credit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  text-align: right;
}

.page-entry .entry-content figcaption .photo-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease;
}
.page-entry .entry-content figcaption .photo-credit a:hover,
.page-entry .entry-content figcaption .photo-credit a:focus-visible {
  text-decoration-color: var(--color-text-medium);
}

@media (max-width: 480px) {
  .page-entry .entry-content :where(figcaption, .wp-caption-text) {
    font-size: 0.75rem;
  }
  .page-entry .entry-content :where(figcaption, .wp-caption-text)::before {
    font-size: 0.625rem;
  }
  .page-entry .entry-content figcaption .photo-credit {
    text-align: left;
  }
}


/* ---------------------------------------------------------------------------
   /about/ — hero portrait + impact list
   --------------------------------------------------------------------------- */

.about-hero-photo {
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 34px rgba(11, 31, 58, 0.2);
  background: rgba(255, 255, 255, 0.55);
}

@media (max-width: 860px) {
  .about-hero-photo {
    width: min(100%, 180px);
  }
}

/* About page: lighter, editorial layout (fewer boxed surfaces). */
.page-wrap--about .about-impact-item {
  border: 0;
  border-left: 2px solid rgba(18, 52, 86, 0.2);
  border-radius: 0;
  background: transparent;
  padding: 0.25rem 0 0.25rem 0.8rem;
}


/* ---------------------------------------------------------------------------
   Hero layout — page.php variants
   ---------------------------------------------------------------------------
   The hero base (.archive-hero, .archive-hero__layout) lives in main.css
   and archive-common.css because it is shared with archive surfaces. The
   page.php-only variants are extracted here:

     - --with-actions: two-column hero used today only on /about/ to host
       the portrait aside. Built 2026-05-12 to host the booking + brief
       CTA pair too; that pair moved into the sticky body sidebar later
       the same day, leaving the variant in active use on /about/ alone.
     - --single (compound): single-column hero used on every other page.php
       surface. The compound class selector intentionally bumps specificity
       above the base .archive-hero__layout rule which would otherwise win
       on source order.
   --------------------------------------------------------------------------- */

.archive-hero__layout--with-actions {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  align-items: center;
}

.archive-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: stretch;
}

.archive-hero__aside .archive-hero__sigil {
  margin: 0 auto;
}

.archive-hero__layout.archive-hero__layout--single {
  grid-template-columns: 1fr;
}

@media (max-width: 860px) {
  .archive-hero__layout--with-actions {
    grid-template-columns: 1fr;
  }
  .archive-hero__aside {
    gap: 0.9rem;
  }
}


/* ---------------------------------------------------------------------------
   Body layout for page.php — article column + sticky CTA sidebar
   ---------------------------------------------------------------------------
   The .page-aside-cta wrapper and .page-hero-actions__* card classes live
   in main.css because they're shared with single.php (via the partial
   template-parts/sidebar/items/page-aside-cta.php). Only the page.php
   layout grid lives here.
   --------------------------------------------------------------------------- */

.page-wrap__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

@media (max-width: 860px) {
  .page-wrap__layout {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------------------------
   /contact/ — mobile-only hero-bottom tightening
   ---------------------------------------------------------------------------
   Mirrors the desktop variant from main.css's archive-hero spec; pulls the
   hero closer to the form so the form sits inside the first viewport on
   mobile rather than below a fold-eating gap. The aria-labelledby guard
   inside main.css scopes the hero rule to the contact page-heading id;
   the wrapper-level overrides below pair with that.
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .page-wrap.page-wrap--contact {
    margin-top: 0;
    padding-top: 0.6rem;
  }
  .page-wrap.page-wrap--contact > .page-wrap__layout {
    gap: 0.6rem;
  }
}


/* ---------------------------------------------------------------------------
   "Reviewed by NAME on DATE" stamp at the top of every page
   (emitted by thisismyurl_2026_prepend_reviewed_byline in
   inc/template-tags.php, suppressed on /contact/).
   ---------------------------------------------------------------------------
   The stamp stays at the TOP — EEAT expects the reviewer signal where a
   procurement skim will find it. The job here is to dial the visual
   weight DOWN so it reads as metadata (a dateline), not as the first
   sentence of body content. Same caption-grade register: smaller, muted,
   tracked-out, with a thin top-rule + bottom-rule to anchor it as a
   dateline strip above the article body.

   Christopher's call 2026-05-17: keep at top, less prominent. The body
   content has a 64ch cap; this strip is allowed slightly wider so it
   reads as page chrome, not as the first paragraph.
   --------------------------------------------------------------------------- */

.page-entry .entry-content > p.entry-reviewed-line {
  margin: 0 0 1.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  /* Slightly wider than the 64ch text column so the dateline reads as
     page chrome, not as the first paragraph. */
  max-width: 78ch;
}

.page-entry .entry-content > p.entry-reviewed-line .entry-reviewed {
  display: inline;
}

.page-entry .entry-content > p.entry-reviewed-line .entry-reviewed__label,
.page-entry .entry-content > p.entry-reviewed-line .entry-reviewed__on {
  color: var(--color-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.page-entry .entry-content > p.entry-reviewed-line .entry-reviewed__name {
  color: var(--color-text-medium);
  text-decoration: none;
  border-bottom: 1px dotted rgba(18, 52, 86, 0.3);
  font-weight: 600;
}

.page-entry .entry-content > p.entry-reviewed-line .entry-reviewed__name:hover,
.page-entry .entry-content > p.entry-reviewed-line .entry-reviewed__name:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.page-entry .entry-content > p.entry-reviewed-line .entry-reviewed__date {
  color: var(--color-text-medium);
  font-weight: 600;
}