/* wp-99-chrome.css — HAND-MAINTAINED (the other wp-*.css files are generated by
 * scripts/wp-migrate/css.mjs; this one is not). Loaded LAST on every WordPress-replica page.
 *
 * It carries the ONE deliberate difference between the replica and WordPress: the site chrome.
 * The WP pages sat under their own 114px sticky header; these pages sit under the CP3.2.2 global
 * header — 34px announcement + 60px bar + 1px hairline = 95px on desktop, and 105px at ≤991px
 * where the announcement wraps to two lines. Every sticky offset and anchor margin below keeps
 * the SAME clearance under the header that the live site has; only the header height term
 * changes. `--qwp-chrome` is the UNCOMPRESSED height on purpose: these are resting offsets for
 * rails that must not collide with the header at scrollY 0. The compressed height (49 / 61px)
 * is what Nav.astro's scroll-padding-top is built from, because an anchor is only ever reached
 * after the header has compacted. Numbers in comments are the live computed values (measured
 * headless on 2026-08-21).
 *
 * It also turns three things the live site does with inline styles from JavaScript into plain
 * rules, so the replica needs no DOM-mutating scripts for them.
 *
 * Selectors start with `div.qwp` on purpose: the generated bundles map WordPress' `body` to
 * `div.qwp` (keeping its type-selector point), so an override here has to carry the same point
 * to win ties against a `body.single-post …` rule — being last in the cascade is not enough.
 */
.qwp { --qwp-rem: 16px; --qwp-chrome: 95px; }   /* CP3.2.2 chrome: announcement 34 + bar 60 + hairline 1 */
@media (max-width: 991px) { .qwp { --qwp-chrome: 105px; } }   /* announcement 44 (wraps) + bar 60 + hairline 1 */
/* One stacking context for the whole WordPress DOM, UNDER the Astro header (z-index 60): the
 * sticky TOC rail carries z-index 100 from wp-custom-css, which WordPress' 999 header ignored. */
div.qwp { isolation: isolate; }
/* Nav.astro sets html{scroll-padding-top} for showcase anchors; here the WordPress rule below
 * (scroll-margin-top on every [id]) is the one offset, as on WordPress. Page-wide on purpose —
 * this sheet loads on replica pages only. */
html { scroll-padding-top: 0 !important; }
/* Astra: html{font-size:91.2%} at ≤921px (and ≤544px). The generated CSS turns every `Nrem`
 * into calc(N * var(--qwp-rem)); this is the variable. */
@media (max-width: 921px) { .qwp { --qwp-rem: 14.592px; } }

/* ── sticky rails (single posts) ─────────────────────────────────────────────── */
@media (min-width: 1300px) {
  /* live: top 140px = 114 + 26 (set by the window.load "fixToc" snippet as inline !important) */
  div.qwp .lwptoc, div.qwp .custom-floating-toc, div.qwp .custom-floating-toc[style] {
    position: sticky !important; top: calc(var(--qwp-chrome) + 26px) !important; left: auto !important;
  }
  /* live: top 204px = 114 + 90 (wp-custom-css "Sidebar Alignment Fixes") */
  div.qwp.single-post .sidebar-main { top: calc(var(--qwp-chrome) + 90px) !important; }
  /* live: top 180px = 114 + 66 (press-release rails, inline from the builder snippet) */
  div.qwp .pr-share-sidebar, div.qwp .pr-recent-sidebar { top: calc(var(--qwp-chrome) + 66px) !important; }
}
/* live: scroll-margin-top 150px = 114 + 36 (quattr-nav-v2 block) */
div.qwp .entry-content [id], div.qwp article [id] { scroll-margin-top: calc(var(--qwp-chrome) + 36px); }

/* ── "fixToc" (window.load snippet): inline !important styles on the TOC, as rules ─── */
div.qwp .lwptoc { background: transparent !important; border: none !important; border-radius: 0 !important; }
@media (max-width: 1299px) {
  div.qwp .lwptoc { position: static !important; top: auto !important; left: auto !important; margin-top: 10px !important; margin-bottom: 10px !important; }
}

/* ── press-release share buttons: the builder snippet swaps these on mouseenter/leave ─── */
div.qwp .pr-share-btn { color: #1d3557; }
div.qwp .pr-share-btn svg { fill: #1d3557; }
div.qwp .pr-share-btn:hover { background-color: #51d497 !important; }
div.qwp .pr-share-btn:hover svg { fill: #ffffff; }

/* ── Astra scroll-to-top (its frontend.js toggles `ast-scroll-to-top-enable`) ─── */
div.qwp #ast-scroll-top { display: none; }
div.qwp #ast-scroll-top.ast-scroll-to-top-enable { display: block; }

/* Astra's `#page{min-height:100vh}` assumes the WordPress header and footer live INSIDE #page; here
   the Astro chrome is outside the replica wrapper, so on a short page (the 404) the rule stretched
   the content area alone to a full viewport and left a blank band above the footer. */
.qwp #page { min-height: 0; }

/* ── ONE FRAME: the page column the header and footer use (owner request 2026-09-16, docs/WORDPRESS-MIGRATION.md §4 #13) ───
   Live WordPress pages ignore the site's header geometry: posts run a TOC rail from the screen edge
   (x≈0) to a sidebar ending at x≈1420 on a 1440px screen, the blog and press indexes lay cards from
   40 to 1400, author pages start text at 80, while the header's content runs 148–1292. Here every
   template sits on the same column as the header and footer: #content becomes that column (max-width
   --container-max, centred, --container-pad inset on the shared gutter ladder), and the Astra layers
   inside it give up their own side insets, so boxed components (cards, CTA panels) put their BORDER
   on the edge and plain text puts its first character there. Posts use the exact geometry of the
   authored V2 detail pages (TOC 236 | 36 | article | 36 | aside 300) wherever the snippet makes them
   three columns (≥1300px). The snippet writes nearly all of these properties with !important, some
   through `#content` ID selectors and page-id classes, so each override matches its weight; comments
   name the rule being outranked. The 404 is excluded: its layout is a single centred block, so there
   is no edge to align and constraining it only narrowed the text on phones.
   width:100%: #page is a column flex box, and auto side margins switch off stretching, so the column
   sized itself to its widest unbreakable content. A wide table made it 485-600px wide on a 390px
   phone and cut the article text off at the screen edge (live has the same bug); the table now
   scrolls inside its own block (.wp-block-table is overflow-x:auto), as WordPress intends. */
div.qwp:not(.error404) #content.site-content {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--container-pad) !important; padding-right: var(--container-pad) !important;
  box-sizing: border-box;
}
/* doubled: the press index (page-id-1409) pads this at (1,4,1) !important */
div.qwp:not(.error404) #content.site-content > .ast-container.ast-container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
div.qwp:not(.error404) #content.site-content :is(#primary, #secondary) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
/* doubled: Astra's article card is padded 16px !important below 922px at (0,5,0) */
div.qwp:not(.error404) #content.site-content .ast-article-single.ast-article-single:not(.ast-related-post) { padding-left: 0 !important; padding-right: 0 !important; }
/* posts: the TOC plugin insets itself 20px and its inner wrapper another 18px */
div.qwp.ast-single-post #content .lwptoc, div.qwp.ast-single-post #content .lwptoc .lwptoc_i { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 1300px) {
  div.qwp.ast-single-post:not(.category-press-release) #content.site-content { column-gap: 36px; }
  div.qwp.ast-single-post:not(.category-press-release) #content.site-content > .lwptoc { flex: 0 0 236px !important; width: 236px !important; max-width: 236px !important; margin-right: 0 !important; }
  div.qwp.ast-single-post:not(.category-press-release) #content.site-content > .ast-container { column-gap: 36px; }
  div.qwp.ast-single-post:not(.category-press-release) #content #primary { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  div.qwp.ast-single-post:not(.category-press-release) #content #secondary { flex: 0 0 300px !important; width: 300px !important; max-width: 300px !important; }
}
/* press releases: the Share | article | Recent Posts wrapper (max-width:1400px inline) fills the column */
div.qwp #content .pr-content-wrapper { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* blog + press indexes: card grids put their outer card borders on the edge */
div.qwp #content :is(.qtr-blog-archive, .pr-cards-grid) { padding-left: 0 !important; padding-right: 0 !important; }
/* author pages: plain text on the edge; Astra spaces the photo 5px off the right edge */
div.qwp #content .ast-author-box { padding-left: 0 !important; padding-right: 0 !important; }
div.qwp #content .ast-author-avatar { margin-right: 0 !important; }
/* posts under 922px: the title banner runs edge to edge by pulling itself out by Astra's old 32px side inset
   and padding its text back in by the same amount (wp-03-rest.css). The inset is now the 20px gutter, so the
   banner overshot the screen by 12px a side (hidden by #page's overflow clip) while its text still lined up.
   It pulls out by the gutter instead. */
@media (max-width: 921px) {
  div.qwp.single-post #content.site-content .entry-header {
    margin-left: calc(-1 * var(--container-pad)) !important; margin-right: calc(-1 * var(--container-pad)) !important;
    padding-left: var(--container-pad) !important; padding-right: var(--container-pad) !important;
  }
}