/* ============================================================================
   Union Yoga — Squarespace compatibility layer for the reimagined system.
   Load this AFTER reimagined.css, ONLY on a Squarespace page whose Code Block
   content is wrapped in <div class="uy-sqs-root"> … </div>.

   Squarespace drops Code Block content inside a centered, max-width, padded
   column (.content-wrapper). Our full-bleed sections assume they own the
   viewport. This makes the root break out to full width once, so every child
   section becomes edge-to-edge without changing the design CSS.
   ============================================================================ */

/* Kill the orange flash on load. Squarespace paints the host section with the
   template's default (a terracotta) until reimagined.js recolours it — that shows
   for a beat before script runs. This render-blocking stylesheet paints the host
   section (and its .section-background overlay child) cream at first paint, so
   there is nothing to flash. :has() targets whichever section wraps our block. */
section:has(.uy-sqs-root),
section:has(.uy-sqs-root) .section-background {
  background: #F4EFE6 !important;   /* --cream */
}

/* Break the whole reimagined page out of Squarespace's content column. */
.uy-sqs-root {
  width: 100vw;
  /* Fallback for a classic centred column; on Squarespace's Fluid Engine grid the
     reimagined.js fitSqs() routine overrides these with a measured margin. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* cancel any inherited Squarespace text styles on the wrapper itself */
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  text-align: left;
}

/* Squarespace's own page gutters + block padding would double up — zero them
   for the section we escaped into. */
.uy-sqs-root .wrap { width: min(1240px, 90vw); }

/* Kill horizontal scroll from the 100vw escape. Use `clip`, NOT `hidden`:
   overflow:hidden turns html/body into a scroll container, which silently
   breaks every `position:sticky` descendant (the pinned heat chapter, the
   sideways rail). overflow-x:clip contains the same overflow WITHOUT creating a
   scroll container, so sticky keeps working. */
html, body { overflow-x: clip; }

/* The V2 test pages keep the Squarespace site footer (footer.sections / .uy-ftr)
   below our own; with the empty space collapsed it now shows as a double footer.
   This stylesheet loads only on our pages, so hiding it here is scoped to them. */
footer.sections, .uy-ftr, #footer-sections, .sqs-site-footer { display: none !important; }

/* Collapse the Fluid Engine grid that hosts our block. Squarespace gives the code
   block a fixed grid-row span (e.g. `1 / 696`) sized for hundreds of empty rows,
   leaving ~16,000px of blank space below our footer. Force the grid (and the block
   cell) to hug the actual content. Scoped to the section that contains our root so
   no other Fluid Engine section is affected. */
.fluid-engine:has(.uy-sqs-root){
  height:auto !important; min-height:0 !important;
  grid-template-rows:auto !important; grid-auto-rows:auto !important;
}
.fluid-engine:has(.uy-sqs-root) > .fe-block{
  grid-row:auto !important; height:auto !important; align-self:start !important;
}

/* Squarespace injects link underlines and heading resets; keep ours winning. */
.uy-sqs-root a { text-decoration: none; }
.uy-sqs-root h1, .uy-sqs-root h2, .uy-sqs-root h3 { margin: 0; }
.uy-sqs-root p, .uy-sqs-root ul, .uy-sqs-root ol, .uy-sqs-root dl { margin: 0; }

/* The template sets a fixed (dark) heading colour directly on h1–h6, which beats
   the light colour our dark sections set on themselves and inherit down — so a
   heading on a forest section renders black-on-forest (unreadable). Force every
   heading to inherit its section's colour: cream on dark sections, ink on light.
   No reimagined heading uses a non-inherited colour, so this is safe. */
.uy-sqs-root h1, .uy-sqs-root h2, .uy-sqs-root h3,
.uy-sqs-root h4, .uy-sqs-root h5, .uy-sqs-root h6 { color: inherit; }

/* The fixed nav + progress bar must escape the stacking context of the block.
   Squarespace's sticky site header sits at z-index ~1000; keep our fixed nav
   BELOW it (the page keeps the Squarespace header) or hide the SQS header via
   page Header Code Injection. Default: sit just under the SQS header. */
.uy-sqs-root .nav { position: fixed; }
.uy-sqs-root .progress { position: fixed; }