/* ==========================================================================
   ANewLog — Home page body (Phase D1)
   Ported from REFERENCE/APPROVED-PROTOTYPE/index.html's inline <style> block
   and the components global.css/chrome.css deliberately deferred until a
   page needed them (.tag, .spine, .reveal motion). Enqueued only on the
   front page (functions.php: is_front_page() gate).

   The Home body itself is authored as real Gutenberg/core + Spectra
   (uagb/*) blocks (see inc/home-content.php + the block editor), not custom
   page-template markup — these rules target the classes applied to blocks
   via each block's own "Additional CSS Class(es)" field, exactly the
   "custom layer" columns already anticipated by Blueprint Section 4.
   ========================================================================== */

/* --------------------------------- Tag ------------------------------------- */
.tag{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--anl-dark-grey);
}
.tag i{ width: 6px; height: 6px; border-radius: 50%; background: var(--anl-red); display:inline-block; }

/* ------------------------------ Reveal motion ------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* -------------------------------- sr-only ----------------------------------- */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------- Section background variants ---------------------- */
.section--surface-bordered{
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-section{
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: var(--sp-6);
}

/* --------------------------------- Hero ------------------------------------- */
.hero-figure{
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: var(--sp-6);
}
/* Logo Usage Standards: hero/landing placements get 2X clear space, a light
   neutral background, preserved proportions, no added effects. */
.hero-logo-mark{
  width: min(300px, 56vw);
  height: auto;
  margin-inline: auto;
}
.mono-label[data-live-clock-wrap]{ display:block; }

/* ------------------------------ The Problem --------------------------------- */
.problem-list{
  display: flex; flex-direction: column;
  counter-reset: problemnum;
}
.problem-list li{
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem; color: var(--anl-dark-grey);
  counter-increment: problemnum;
}
.problem-list li:first-child{ border-top: 1px solid var(--line); }
.problem-list li::before{
  content: counter(problemnum, decimal-leading-zero);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--anl-red);
  font-size: 0.8125rem;
  white-space: nowrap; /* prevents the two-digit counter itself from line-wrapping between digits at narrow widths */
  flex-shrink: 0;
}

/* ---------------------------- Built With Discipline -------------------------- */
.discipline-list{
  display: flex; flex-direction: column;
}
.discipline-list li{
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid #343B3E;
  font-family: var(--font-body); font-size: 1.0625rem; color: #C3CBCF;
}
.discipline-list li:first-child{ border-top: 1px solid #343B3E; }
.discipline-list .num{
  font-family: var(--font-mono); color: #7E929B; font-style: italic;
  white-space: nowrap; flex-shrink: 0;
}

/* ------------------------------- Early Access -------------------------------- */
.early-access-block{ max-width: 760px; margin-inline: auto; text-align: center; }
.early-access-block .eyebrow{ justify-content: center; }
#approach-heading{ max-width: 20ch; }
#discipline-heading{ max-width: 14ch; }
.email-capture{
  display: flex; gap: var(--sp-2); max-width: 480px; flex-wrap: wrap;
  margin-inline: auto;
}
.email-capture input{
  flex: 1 1 240px;
  border: 1.5px solid var(--anl-input-inactive);
  border-radius: 999px;
  padding: 0.9em 1.3em;
  background: var(--anl-white);
}
.email-capture input:focus{ border-color: var(--anl-blue); outline: none; }
.email-capture .btn{ flex: 0 0 auto; }
.form-note{ font-size: 0.8125rem; color: var(--muted); margin-top: var(--sp-2); text-align: center; }
/* Spectra's own confirmation-message text/color/border attributes carry the
   post-submit success/error state now (see inc/signup.php) -- no custom
   status element or CSS needed here. */

/* uagb/forms field/button styling — matches the prototype's .email-capture
   pill treatment (chrome.css doesn't cover this; it's Home-body-specific). */
.email-capture form,
.email-capture .uagb-forms-main-form{
  display: flex; gap: var(--sp-2); max-width: 480px; flex-wrap: wrap; margin-inline: auto;
}
.email-capture input[type="email"]{
  border: 1.5px solid var(--anl-input-inactive) !important;
  border-radius: 999px !important;
  padding: 0.9em 1.3em !important;
  background: var(--anl-white);
}
.email-capture input[type="email"]:focus{ border-color: var(--anl-blue) !important; outline: none; }
.email-capture button[type="submit"]{
  border-radius: 999px !important;
  background: var(--anl-cta) !important;
  color: var(--anl-charcoal) !important;
  font-weight: 600;
  padding: 0.85em 1.5em !important;
  border: none !important;
}
.email-capture button[type="submit"]:hover{ background: #22B3F3 !important; }
/* The prototype visually hides its email label (sr-only) since a placeholder
   carries the same information in a single-row pill. Left visible here
   instead of risking an inaccessible display:none -- a small, honest
   deviation rather than a fragile CSS "visually hidden" reproduction. */

/* --------------------------- Spacing utilities ------------------------------- */
/* Minimal subset of the prototype's utility classes, needed only because the
   Home body's copy blocks (hero, lede, button group, mono-label) reproduce
   the prototype's exact vertical rhythm via the same class names, rather
   than relying on each block's own default spacing. */
.mt-3{ margin-top: var(--sp-3); }
.mt-4{ margin-top: var(--sp-4); }
.mt-5{ margin-top: var(--sp-5); }
.mt-6{ margin-top: var(--sp-6); }

/* --------------------- Block-authored buttons -------------------------------- */
/* This entire rule set (pill shape, .btn-primary/.btn-ghost variants, the
   dark-section ghost contrast fix) now lives in chrome.css, sitewide --
   About/Security's block-authored buttons ("Join Early Access", "Contact
   us", "Read the Privacy Policy") were found rendering with Astra's default
   button style because these rules were scoped to Home only. */

/* --------------------- Component-specific stacking breakpoints -------------- */
/* Reconciles Astra/core-block default responsive behavior with the
   prototype's own component breakpoints (Blueprint 2.4) -- these three grids
   must stack at the exact points the prototype specifies (960/860/860px),
   not WordPress core's generic ~600px Columns-block default. */
.hero-grid{ align-items: center; }
.hero-grid.wp-block-columns{ flex-wrap: wrap; }
@media (min-width: 960px){
  .hero-grid.wp-block-columns{ flex-wrap: nowrap; gap: var(--sp-5); }
}
@media (max-width: 959px){
  .hero-grid.wp-block-columns > .wp-block-column{ flex-basis: 100% !important; }
}

.problem-grid.wp-block-columns, .discipline-grid.wp-block-columns{ flex-wrap: wrap; }
@media (min-width: 860px){
  .problem-grid.wp-block-columns, .discipline-grid.wp-block-columns{ flex-wrap: nowrap; gap: var(--sp-7); }
}
@media (max-width: 859px){
  .problem-grid.wp-block-columns > .wp-block-column,
  .discipline-grid.wp-block-columns > .wp-block-column{ flex-basis: 100% !important; }
}

/* -------------------------- Our Approach (spine + icons) --------------------- */
/* Reproduces the approved prototype's own single-column "log spine" motif
   (REFERENCE/APPROVED-PROTOTYPE/index.html .spine/.spine-entry, named and
   documented in the prototype's own style-guide.html) -- NOT a centered
   alternating timeline. The block is configured with timelinAlignment:"left"
   (Spectra's own single-side layout variant, confirmed live: its outer
   wrapper gets class uagb-timeline__left-block instead of ...center-block,
   producing one consistent left-hand spine with all content to its right --
   the same structural shape as the prototype, before any of these overrides).
   These rules then correct the remaining visual gap: Spectra's own styling
   for this variant still uses a thick blue line, a large icon-badge marker,
   and a shaded content panel with zero built-in spacing, none of which
   match the prototype.

   Spectra's "date" field is a real date/moment.js-formatted value, not a
   free-text slot -- attempts to coerce it into showing the prototype's
   "00:00 — STABILITY" mono-label produced garbled output (moment partially
   parses bracket-escaped literal text as tokens rather than treating it as
   fully literal). Hidden below; the mono-label instead leads each item's
   description text, which is a plain, reliably-controllable field. */
.wp-block-uagb-content-timeline .uagb-timeline__date-new,
.wp-block-uagb-content-timeline .uagb-timeline__inner-date-new{
  display: none !important;
}

/* Spine line: thin and muted, not Spectra's 3px brand blue. */
.wp-block-uagb-content-timeline.uagb-timeline__left-block{
  padding-left: var(--sp-5);
  position: relative;
}
.wp-block-uagb-content-timeline.uagb-timeline__left-block .uagb-timeline__line{
  left: 0 !important;
}
.wp-block-uagb-content-timeline.uagb-timeline__left-block .uagb-timeline__line__inner{
  width: 1px !important;
  background: var(--line-strong) !important;
  opacity: 0.55;
  /* Phase E: "spine lacks scroll/reveal motion" -- the line now draws
     downward (transform, not height, so it doesn't fight Spectra's own
     inline-styled height) the same way every other .reveal element on the
     page fades in: an IntersectionObserver-added class (main.js), on the
     timeline's own outer wrapper, triggers this transition. Respects
     prefers-reduced-motion via the existing sitewide rule (global.css)
     that clamps all transition-durations to ~0. */
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease-out);
}
.wp-block-uagb-content-timeline.uagb-timeline__left-block.is-visible .uagb-timeline__line__inner{
  transform: scaleY(1);
}

/* Marker: the prototype's small red-ringed dot, not Spectra's icon badge. */
.wp-block-uagb-content-timeline .uagb-timeline__marker{
  width: 9px !important;
  height: 9px !important;
  /* Spectra's own rule uses min-width/min-height (35px), which floors the
     rendered size above regardless of width/height -- both must be reset. */
  min-width: 9px !important;
  min-height: 9px !important;
  line-height: normal !important;
  border-radius: 50%;
  background: var(--surface-sunken) !important;
  border: 1.5px solid var(--anl-red) !important;
  box-shadow: none !important;
  left: -9px !important;
}
.wp-block-uagb-content-timeline .uagb-timeline__marker svg{ display: none; }

/* Content: no shaded panel, no built-in padding -- the prototype's entries
   sit directly on the section background with generous vertical rhythm and
   comfortable inline padding for the text/icon column. */
.wp-block-uagb-content-timeline .uagb-timeline__day-left,
.wp-block-uagb-content-timeline .uagb-timeline__day-right{
  background: transparent !important;
}
/* Phase E: text + icon two-column layout, ported from the prototype's own
   .approach-row grid (inline styles, index.html) -- applied directly to
   this existing element rather than a new wrapper div. An earlier attempt
   wrapped the paragraph+icon in a new `.approach-row` div and broke
   Spectra's own timeline.min.js (a null.getBoundingClientRect() error,
   confirmed live) -- its arrow/position logic evidently depends on the
   original flat sibling structure of this container. Grid placement on the
   existing element changes layout only, not the DOM tree, so it doesn't
   disturb whatever that script is walking. */
.wp-block-uagb-content-timeline .uagb-timeline__events-inner--content{
  padding: 0 var(--sp-4) 0 var(--sp-2) !important;
  display: grid;
  gap: var(--sp-2) var(--sp-4);
}
@media (min-width: 720px){
  .wp-block-uagb-content-timeline .uagb-timeline__events-inner--content{
    grid-template-columns: 1fr 180px;
  }
  .wp-block-uagb-content-timeline .approach-icon{
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
  }
}
.wp-block-uagb-content-timeline.uagb-timeline__left-block .wp-block-uagb-content-timeline-child{
  padding-bottom: var(--sp-7);
  margin-bottom: 0 !important;
}
.wp-block-uagb-content-timeline.uagb-timeline__left-block .wp-block-uagb-content-timeline-child:last-child{
  padding-bottom: 0;
}
/* Mono-label: Phase E fix -- was silently not rendering anywhere (see
   anewlog_timeline_child()'s own comment in inc/home-content.php for the
   full history). Reuses the sitewide .mono-label class exactly like the
   prototype's <span class="mono-label">; this scoped rule only adds the
   block-level stacking + bottom margin the prototype's own
   `.spine-entry .mono-label` rule provides (css/style.css). */
.wp-block-uagb-content-timeline .uagb-timeline__mono{
  display: block;
  margin-bottom: var(--sp-1);
}
.wp-block-uagb-content-timeline .uagb-timeline__heading{
  margin: 0 0 0.5rem 0;
}
/* Phase E fix: line-height/max-width now match .body-text (global.css)
   exactly, reused rather than redeclared with different values, since this
   paragraph carries Spectra's own class instead of .body-text itself. Also
   fixes Human Engineering's "excessive wrapped-line spacing" note, which
   turned out to mostly be the icon SVG printing inline inside this same
   paragraph (moved out to .approach-row below) forcing erratic wraps, not
   the line-height itself. */
.wp-block-uagb-content-timeline .uagb-timeline-desc-content{
  font-family: var(--font-body); color: var(--anl-dark-grey);
  line-height: 1.75;
  max-width: 62ch;
  margin: 0;
}
.wp-block-uagb-content-timeline .uagb-timeline__arrow{ display: none; } /* zigzag-only connector, unused in the left variant */

.approach-icon{ width: 160px; height: 60px; }
@media (max-width: 719px){ .approach-icon{ justify-self: start; margin-top: var(--sp-1); } }
.sync-pulse{ animation: pulse-travel 3.2s linear infinite; }
@keyframes pulse-travel{
  0%{ transform: translateX(0); opacity: 0; }
  8%{ opacity: 1; }
  92%{ opacity: 1; }
  100%{ transform: translateX(80px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .sync-pulse{ animation: none; } }

/* Responsive: match the prototype's own component breakpoint (Blueprint 2.4)
   -- tighter spine indent and marker offset on narrow viewports. */
@media (max-width: 719px){
  .wp-block-uagb-content-timeline.uagb-timeline__left-block{ padding-left: var(--sp-4); }
  .wp-block-uagb-content-timeline .uagb-timeline__events-inner--content{ padding-right: 0 !important; }
}