/*
* Nuclear Resister — CLASSIC WordPress content (.nr-wp-content)
* ===========================================================================
*
* THE ONE COPY of the rules that style pre-block WordPress markup: the
* alignment classes, the grey caption box, the float clearfix, and the
* mobile breakpoint that turns the floats off. Every one of them moved here
* from src/styles/global.css on 2026-08-15 — that file now carries a pointer
* and nothing else. There is no second copy anywhere and there must not be.
*
* Loaded by a in src/layouts/BaseLayout.astro, so it reaches ALL FIVE
* surfaces that render `.nr-wp-content` (the post template, [...slug].astro,
* contact-us.astro, FutureActionsList.astro, InteriorPageLayout.astro). That
* five-surface reach is the reason these rules were in global.css rather than
* in the two body templates, and it is preserved exactly — see the pointer in
* global.css for the original argument.
*
* ---------------------------------------------------------------------------
* WHY IT IS A FOURTH FILE IN public/ AND NOT MORE global.css
* ---------------------------------------------------------------------------
* Same reason as /tokens.css, /wp-content.css and /wp-blocks.css before it.
* The Lowthian Editor's style bridge fetches the front end's stylesheets and
* injects them into the block-editor canvas, so a client composes in the
* column, typeface and caption box they publish into. It can only fetch a
* STABLE, UNHASHED url. Anything inside src/styles/ is bundled by Vite into
* `_astro/BaseLayout..css`, whose name changes on every deploy; public/
* is copied to dist/ verbatim, so this file is served at exactly
* /wp-classic.css on every build.
*
* Roughly 1,150 of the site's 1,255 posts are classic, not block. Until this
* file existed the bridge covered the block ones and nothing else: a client
* editing a fourteen-year-old report saw every floated photo stacked at the
* left margin, no caption box, and a canvas 1,491px taller than the page it
* publishes into. Measured — style-ab-harness/canvas-fixture, post 417.
*
* ---------------------------------------------------------------------------
* EVERY SELECTOR MUST BE SCOPED UNDER `.nr-wp-content`
* ---------------------------------------------------------------------------
* The bridge's rewrite is a literal substitution of the configured wrapper
* (`.nr-wp-content`) for `.editor-styles-wrapper`, with word guards either
* side (lde-style-bridge.php, lde_style_bridge_normalize). A rule that does
* not name the wrapper is injected into the canvas UNSCOPED — it would then
* apply to WordPress's own editor chrome, which shares that iframe. So:
*
* - no bare tag selectors, no `*` at the top level, no `:root`/`html`/`body`
* - no global reset of any kind, however tempting
*
* The box-sizing block below is deliberately written as
* `.nr-wp-content, .nr-wp-content *` and NOT as the `*` the front end's own
* reset uses, for exactly this reason.
*
* ---------------------------------------------------------------------------
* LOAD ORDER
* ---------------------------------------------------------------------------
* /tokens.css → /wp-content.css → /wp-blocks.css → /wp-classic.css
*
* On the front end BaseLayout emits this immediately after
* /wp-blocks.css, which puts it where the rules used to sit relative to core's
* block CSS. In the editor, add the same url LAST in the Lowthian Editor's
* stylesheet setting; the bridge injects in configured order and two of the
* rules below have to beat something in the bridged /wp-blocks.css (see the
* alignment block).
*
* Every value here is a var(--nr-*). Without /tokens.css ahead of it this file
* renders as unstyled text. Do not inline a :root block to avoid that — the
* palette has one home and this is not it.
*
* ---------------------------------------------------------------------------
* WHAT IS DELIBERATELY *NOT* HERE
* ---------------------------------------------------------------------------
* The editorial typography for WP body content — p, h1-h6, links, lists,
* blockquote, figcaption, the image baseline — is in public/wp-content.css,
* which is linked by the two body templates ONLY because those three other
* surfaces style their content differently. Read that file's header before
* moving anything between the two. The split is: WordPress-core CLASSES that
* must work on every surface live here; this site's editorial voice for body
* copy lives there.
*
* `h1` is the newest thing to land on that line and it went THERE, not here,
* on 2026-08-16. It is a plain tag, not a WordPress-core class, and every one
* of the 74 posts and pages carrying an in-content h1 is on one of the two
* surfaces wp-content.css already covers — so putting it here would have made
* h1 the only heading level styled on five surfaces while h2-h6 are styled on
* two.
*
* No BOX or LAYOUT property on the `.nr-wp-content` wrapper itself — no
* max-width, margin, padding, width, display, float or position. That is the
* hard rule from wp-content.css's header and it binds here identically: the
* bridge rewrites a wrapper rule onto the canvas BODY, where WordPress's
* theme.json layout already owns the column width, and a box property there
* constrains the canvas twice. The two declarations on the wrapper below are
* inherited typography, which is a different thing and is stated for a reason
* given at that rule.
*
* Revisions:
* 2026-08-16 font-weight added to the wrapper rule below, alongside the
* font-family and line-height that went in with it. Same defect,
* same argument, missed the first time because the fixture's
* canvas arm under-models core's editor stylesheet. Measured in
* the real editor, not the fixture. Zero front-end change
* re-verified on post 417 (7 widths) and on a nine-page set
* carrying every heading level — see the note at the rule.
* 2026-08-15 Created. The alignment, caption, clearfix and 640px rules
* moved here verbatim from src/styles/global.css — no value
* changed. Three declarations ADDED that the front end had been
* getting from inheritance and from the global reset, and that
* the canvas has no way to get; each is a no-op on the front end
* and says so at its own rule. Zero front-end change verified by
* a computed-style diff of 169 elements x 51 properties at 7
* viewport widths against a build of the previous commit —
* 8,619 values per width, 0 differences.
* ===========================================================================
*/
/* Inherited typography, STATED rather than inherited.
* ===========================================================================
* These three declarations are the only things in this file that are not a
* move from global.css, and not one of them changes a computed value on the
* front end. They are here for the canvas.
*
* On the front end `.nr-wp-content` inherits its font from `body` in
* global.css and its leading from `.nr-interior__column--measure` (interior
* pages) or `body` (posts) — all three say var(--nr-font-body) /
* var(--nr-leading-body), so declaring them here computes the identical value
* and the cascade is untouched at (0,1,0), below everything that already
* styles this wrapper. font-weight comes from the same `body` rule and nothing
* else on the site sets it on this wrapper, so it lands the same way.
*
* In the canvas NONE of those ancestors exist. `body` IS the wrapper after the
* rewrite, and the bridge deliberately leaves `body` rules alone, so the
* inheritance chain the front end relies on has nothing at the top of it. The
* measured consequence was 27 elements in Times New Roman and 36 computing
* line-height:normal — the client composing a report in a serif face at the
* wrong leading and publishing into Verdana at 1.65.
*
* font-weight was the same defect and was missed on the first pass, because the
* fixture's canvas arm models core's LAYOUT contribution and not core's actual
* editor stylesheet, which turned out to set a lighter default weight. Measured
* in the REAL editor on post 15315: every one of the 11 matched elements was at
* the wrong weight — body text 400 on the page and 300 in the canvas.
*
* AND ARE FIXED BY THIS ONE DECLARATION AND MUST NOT GET THEIR
* OWN. The UA rule for both is `font-weight: bolder`, which is RELATIVE to the
* inherited weight: from 300 it resolves to 400, from 400 to 700. So the canvas
* was rendering bold text at the page's regular weight as a second-order effect
* of the wrapper, not as a bug of its own, and it comes right the moment the
* wrapper does. The same relativity is why a hard `font-weight: 700` on strong
* would be WRONG: the front end computes 900 for a inside a heading
* (bolder from 700), and 700 there would flatten it.
*
* Typography only. See this file's header for why no box property may join
* them. */
.nr-wp-content {
font-family: var(--nr-font-body);
font-weight: var(--nr-weight-regular);
line-height: var(--nr-leading-body);
}
/* box-sizing, scoped to the content and its descendants.
* ===========================================================================
* global.css opens with `*, *::before, *::after { box-sizing: border-box }`
* and that reset STAYS THERE — it is the whole site's, not this file's, and
* this is not a copy of it. What is here is the same guarantee re-established
* for content that has been lifted out of the site and dropped into an editor
* iframe that has no reset of its own: 160 of post 417's 169 elements computed
* content-box in the canvas.
*
* Written long-hand as `.nr-wp-content, .nr-wp-content *` rather than `*`
* because a bare `*` is precisely what must never be injected into the canvas
* — after the rewrite it would reach WordPress's own editor UI in that iframe
* and restyle it. See the scoping section of this file's header.
*
* (0,1,0), so `.wp-caption`'s content-box below still wins, which it must. */
.nr-wp-content,
.nr-wp-content *,
.nr-wp-content *::before,
.nr-wp-content *::after {
box-sizing: border-box;
}
/* -------------------------------------------------------
* WordPress content: alignment + caption boxes
*
* Geoffrey, 2026-08-09, comparing a 2010 report against the live site:
* "we lost the float and the nice looking caption", then "can we also add back
* the light grey background".
*
* The old K2 theme supplied all of this. The headless build never ported it, so
* .alignleft/.alignright/.aligncenter had NO rules anywhere and every floated
* photo the clients had placed since 2010 rendered as a full-width block with
* the text shoved underneath. 579 built pages use alignleft, 569 alignright,
* 1,282 carry a wp-caption.
*
* WHY THIS IS ONE FILE AND NOT FIVE. It was first added to the two page
* templates, which is where the existing WP-content styling sits. But
* .nr-wp-content appears on FIVE surfaces — the post template, the page
* template, contact-us.astro, FutureActionsList.astro and
* InteriorPageLayout.astro — and any WP content pasted into the other three
* would silently miss out. Mirroring into five files to fix a WordPress-core
* class is the wrong shape. One definition, every surface. That argument is
* why these rules were in global.css from 2026-08-09 until 2026-08-15; moving
* them into a file BaseLayout links keeps all five surfaces and adds the
* canvas.
*
* Measured off the live site rather than invented: #f3f3f3 box, 1px #ddd
* border, 3px radius, 3px padding, centred caption. The box uses the locked
* palette's --nr-light-gray (#efefef) instead of #f3f3f3 — a difference nobody
* can see, and it keeps the caption inside the palette Willa locked. It sits on
* the white interior card, the same relationship the old site had.
*
* box-sizing: content-box is LOAD-BEARING, not a stylistic choice. The global
* reset — and the scoped one above — set border-box, and WordPress writes an
* inline width onto the figure describing the IMAGE. Under border-box the
* padding and border eat into that width and every captioned photo shrinks by
* 8px.
*
* THE MARGINS ON .alignleft/.alignright/.aligncenter HAVE TO BEAT SOMETHING.
* The bridged /wp-blocks.css carries core's
* `.editor-styles-wrapper :where(figure) { margin: 0 }`. `:where()` scores
* zero, so that rule is (0,1,0) and the (0,2,0) rules below outrank it — the
* gutter survives in the canvas. Verified in the fixture, not assumed: without
* these three rules present the canvas computed margin-right 0 on every
* alignleft figure and margin-left 0 on every alignright one.
* ------------------------------------------------------- */
.nr-wp-content .alignleft {
float: left;
margin: 0 var(--nr-space-6) var(--nr-space-4) 0;
}
.nr-wp-content .alignright {
float: right;
margin: 0 0 var(--nr-space-4) var(--nr-space-6);
}
.nr-wp-content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.nr-wp-content .alignnone {
display: block;
}
.nr-wp-content .wp-caption {
max-width: 100%;
box-sizing: content-box;
background: var(--nr-light-gray);
border: 1px solid #dddddd;
border-radius: var(--nr-radius-button);
padding: 3px;
text-align: center;
}
.nr-wp-content .wp-caption img {
display: block;
max-width: 100%;
height: auto;
}
/* #555 on #efefef = 6.48:1, comfortably past the 4.5:1 floor for body text. */
.nr-wp-content .wp-caption-text {
margin: var(--nr-space-2) 0 2px;
text-align: center;
}
/* Contain the float. Without this a tall photo near the end of a report escapes
* the body and rides down over the "back to Resistance News" link.
*
* A pseudo-element, so nothing that walks the element tree can tell you it is
* missing — the canvas measurement had to read it directly. After the rewrite
* it lands on the canvas body, which is where the canvas's floats escape to,
* so it does the same job there. */
.nr-wp-content::after {
content: '';
display: block;
clear: both;
}
@media (max-width: 640px) {
/* A 200px float in a 327px column leaves an unreadable ribbon of text, so
* floats become blocks here.
*
* Deliberately NOT forcing width:100%. The first version did, and measuring
* it at 390px showed why that was wrong: it stretched the grey box to 335px
* around a 203px photo, leaving a wide grey margin the old site never had.
* Dropping the float is what fixes the cramped text; the box can keep the
* width WordPress gave it. Oversized images are already handled by
* max-width:100% on .wp-caption above, so nothing overflows either way. */
.nr-wp-content .alignleft,
.nr-wp-content .alignright {
float: none;
margin: 0 0 var(--nr-space-4) 0;
}
}