/* Block-editor bridging.
 *
 * Everything here exists because a core block cannot do something the v2 PHP
 * template did. Where the answer was "change the CSS so the content becomes
 * plain editable text", that is what happened — an editable list of words beats
 * a list of words each wrapped in markup an editor can break.
 */

/* ---- Section boundaries as block style variations ----
 *
 * layout.css already implements the torn seam against .section--seam,
 * --seam-above and --seam-below. Those are generic modifier classes, so a Group
 * block carrying one gets the seam with no new CSS.
 *
 * It also carries a list of ~18 concrete selectors naming the specific
 * boundaries on the v2 site (.solution + .features-section, and so on). Those
 * become unnecessary here: a pattern states its own boundary by carrying the
 * modifier class, rather than the stylesheet inferring it from document order.
 * That is a simplification, not a loss — the boundary is now visible where the
 * section is defined.
 *
 * .section is the padding/rhythm class; a Group block needs it explicitly since
 * core wraps content in .wp-block-group rather than <section>.
 */
.wp-block-group.section { position: relative; }

/* ---- Checklist bullets ----
 *
 * v2 rendered an inline SVG per list item through rebelpsa_sketch_icon(), which
 * a core List block cannot produce — and should not have to. The icon is
 * decoration, so it moves to CSS and the list becomes a plain core List an
 * editor can type into.
 *
 * background-image, NOT mask-image. These icons are two-tone (#181111 with a
 * #C41C1C accent) and a mask flattens an icon to a single colour, which would
 * quietly drop the brand red from every checkmark. A background keeps the file's
 * own fills exactly as drawn.
 *
 * 18px matches the size v2 passed to the icon helper at these call sites.
 */
.pricing-card__features,
.pricing-includes ul {
	padding: 0;
	list-style: none;
}

.pricing-card__features li,
.pricing-includes li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.pricing-card__features li::before,
.pricing-includes li::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Light card: the navy-and-red check. */
.pricing-card__features li::before {
	background-image: url("../img/icons/sketch/light/check.svg");
}

/* The includes panel is --color-dark, so it takes the white-ink set — the same
   variant swap the v2 template made when it passed variant => 'dark'. */
.pricing-includes li::before {
	background-image: url("../img/icons/sketch/dark/check.svg");
}

/* ---- Core block adjustments ----
 *
 * Core wraps a List in <ul class="wp-block-list">, and a Group in a <div>. The
 * ported stylesheets were written against bare <ul> and <section>, so where a
 * selector assumed the element rather than the class, it is restated here
 * against the block class instead of being loosened in the ported file. Keeping
 * the edits in this file means base/components/sections/pages stay diffable
 * against their v2 originals.
 */
.pricing-card__features.wp-block-list,
.pricing-includes .wp-block-list {
	margin-block: 1.5rem;
}

/* ---- Buttons ----
 *
 * Core wraps a Button in .wp-block-button and puts .wp-block-button__link
 * .wp-element-button on the anchor; the theme styles .btn. Patterns put .btn on
 * the same anchor, so both style systems land on one element.
 *
 * An earlier version of this rule zeroed background, padding and radius on
 * `.wp-block-button .btn` intending to strip CORE's styling — but .btn IS the
 * anchor, so it stripped the theme's buttons instead and the hero CTAs rendered
 * as underlined text. The nav CTA was unaffected and gave it away: it carries
 * .btn without a .wp-block-button wrapper and looked correct throughout.
 *
 * The fix is the other direction. Core's button styles are defined at low
 * specificity through :root :where(...), so simply matching both classes on the
 * anchor is enough for the theme to win — no !important, and nothing zeroed. */
.wp-block-button .wp-block-button__link.btn {
	background: var(--gradient-primary);
	padding: 0.5rem 1.1rem;
	border-radius: var(--radius-sm);
}

.wp-block-button .wp-block-button__link.btn--lg {
	padding: 0.85rem 1.6rem;
}

/* The quiet variant is an outline, so it must not inherit the gradient above. */
.wp-block-button .wp-block-button__link.btn--quiet {
	background: transparent;
}

/* ---- post-content must not clamp the page ----
 *
 * Core applies theme.json's layout.contentSize to core/post-content, which put a
 * max-width of 864px on .entry-content. Every section then sat inside it, so the
 * hero's tint band stopped two-thirds across the viewport and the pricing card
 * rendered at 45% width.
 *
 * The theme's own .container owns width and centring — one measurement, applied
 * per section, the same way v2 did it. So post-content is released here rather
 * than contentSize being widened, because widening it would still clamp, just
 * further out, and would also change what the editor shows as the content width.
 *
 * Scoped to .site-main so it only affects the theme's own page shell.
 */
.site-main .wp-block-post-content {
	max-width: none;
}

/* ---- Core's flow margins must not reach grid children ----
 *
 * Core adds .is-layout-flow to every Group and with it
 * `> * + * { margin-block-start: 24px }`. Inside a CSS grid that margin does not
 * collapse into the gap — it offsets each item individually, so the first card in
 * a row sat 19px higher than the other three and the grids looked staggered.
 *
 * The theme's grids own their spacing through `gap`, so the flow margin is
 * cancelled wherever one of them is the container.
 */
.grid.is-layout-flow > * + *,
.card-grid.is-layout-flow > * + *,
.comparison__grid.is-layout-flow > * + *,
.feature-list.is-layout-flow > * + * {
	margin-block-start: 0;
}

/* ---- Headings on dark bands ----
 *
 * v2 never set a heading colour: .on-dark sets `color` and headings inherit it.
 * theme.json originally declared elements.heading.color.text, which broke that
 * inheritance and rendered every heading on a dark band in near-black — legible
 * as a shape, unreadable as text. The declaration is gone from theme.json; this
 * restates the inheritance explicitly so a future theme.json edit cannot
 * reintroduce it silently.
 */
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
	color: inherit;
}

/* ---- No flow margins between top-level sections ----
 *
 * post-content is itself an is-layout-flow container, so core inserts
 * margin-block-start between every top-level child — which put a strip of white
 * body background between the hero and the trust strip, and again between every
 * dark band. v2 sections abut exactly; each owns its spacing as padding.
 *
 * theme.json already sets styles.spacing.blockGap to 0px, which makes core emit
 * `:root :where(.is-layout-flow) > * { margin-block-start: 0px }` in global
 * styles and handles this on its own. The theme rule that used to live here was
 * not just redundant, it was harmful: at (0,3,0) it beat `.contact-channels`
 * (0,1,0) and flattened that section's deliberate -4.5rem lift, so the contact
 * channel cards sat below the dark hero instead of straddling its lower edge.
 *
 * Core's rule is inside :where(), so it contributes (0,1,0) and is printed
 * before the theme's stylesheets — any component that wants its own margin,
 * like .contact-channels, simply states it and wins.
 */

/* ---- Block-conversion micro-rhythm ----
 *
 * Two spots where wrapping v2's markup in blocks moved spacing by a few pixels,
 * measured against live in the launch audit:
 *
 * - v2's message-panel opened with a bare <strong>; as a block that strong sits
 *   inside a paragraph, which .message-panel p gives 0.35rem of top margin the
 *   strong never had. Zero it on the first child only — the second paragraph
 *   keeps its gap.
 * - v2's section-action was a <p>, whose UA bottom margin (1em) separated it
 *   from the section's bottom padding; as a Group it is a <div> with none.
 */
.message-panel > p:first-child { margin-top: 0; }

.wp-block-group.section-action { margin-bottom: 1em; }

/* ---- Long-form resources (guides) ----
 *
 * A fourteen-section guide is a document, not a landing page, so it borrows the
 * legal documents' reading layout wholesale: sticky contents rail on the left,
 * measured column on the right, same scroll-spy. Reusing that component rather
 * than inventing a second one means the behaviour is already tested and the two
 * document types stay visually consistent.
 */
.resource-document--guide { background: linear-gradient(180deg, var(--color-white), var(--color-tint)); }

/* The measure cap belongs to the single-column case. Inside the grid the column
   is already constrained by the track, and capping twice strands it left. */
.resource-document--guide .resource-document__inner { max-width: 62rem; }

/* The back link is not part of the last section. Its default 2.5rem was exactly
   the old computed section boundary and is now less than it, so on the guide it
   read as one more chapter break with nothing after it. One step above the
   boundary instead. Short resources without the --guide class keep 2.5rem. */
.resource-document--guide .resource-document__back { margin-top: 4rem; }

.resource-document__download {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.resource-document__download .btn { width: 100%; }

.resource-document__filemeta {
	margin-top: 0.6rem;
	color: var(--color-body-muted);
	font-size: var(--text-sm);
	text-align: center;
}

/* Section rhythm.
 *
 * Four steps, each of which has to read as clearly different from the next, or
 * a fourteen-section reference document collapses into undifferentiated slabs:
 *
 *   0.60rem  list item to list item
 *   1.10rem  the flow gap - paragraph to paragraph, paragraph to list
 *   2.00rem  a subheading, and the blocks inserted between paragraphs
 *   3.50rem  a section boundary
 *
 * The flow gap is the one that matters, because there was none. Measured on the
 * rendered page, 21 of the 32 sibling boundaries inside these sections were
 * exactly 0px: base.css's `* { margin: 0 }` is the only rule that reaches
 * inside .doc-section__body, theme.json ships --wp--style--block-gap: 0px, and
 * this markup carries no .is-layout-* class for core's flow rules to bite on.
 * The page was a wall because nothing was setting paragraph spacing at all.
 *
 * Two of the three rules replaced here never rendered either.
 * .doc-section__title is (0,1,0) and pages.css's `.entry-content h2` is
 * (0,1,1), so the 3rem always resolved to that rule's 2.5rem and the anchor
 * offset to its 1rem. Both are restored at a specificity that wins -- and the
 * offset keeps the --chrome-top term it had been inheriting from the rule that
 * beat it, so the admin-bar allowance is not quietly dropped.
 * `.doc-section__body > *:first-child { margin-top: 0.75rem }` collapsed: the
 * body div has no padding and no border, so a first child's top margin had no
 * edge to sit against and merged with the div's own.
 *
 * None of this reaches the legal documents. They are built from
 * .legal-document / .legal-section__body and never carry .entry-content or
 * .doc-section__*, so their own scale is untouched.
 */
.entry-content .doc-section__title { margin-top: 3.5rem; scroll-margin-top: calc(var(--nav-h) + var(--chrome-top) + 1.5rem); }
.entry-content .doc-section__title:first-of-type { margin-top: 0; }

/* A heading belongs to the body under it: closer than the flow gap, so the two
   read as one unit against the 3.5rem above. */
.entry-content .doc-section__body { margin-top: 1rem; }

/* The flow gap. 1.1rem is the legal documents' 0.9rem carried across at the
   same gap-to-leading ratio against this column's looser line-height, rather
   than a new number invented for the occasion. */
.doc-section__body > * + * { margin-top: 1.1rem; }

/* 0.45rem suits the legal pages' one-line items. Here the average item runs
   past the measure and wraps, so an item boundary needs to beat the line
   advance inside an item. One step below the flow gap. */
.entry-content .doc-section__body li + li { margin-top: 0.6rem; }

/* Blocks dropped between paragraphs take the subheading's step. .callout
   already had 2rem; .table-scroll had nothing, so its `6px 6px 0` stamp shadow
   painted across the top line of whatever followed it. */
.doc-section__body > .table-scroll { margin-block: 2rem; }

/* A subheading owns what follows it, including a table or a callout -- both of
   which would otherwise take the 2rem above and leave the h3 floating midway
   between its own section and its own content. */
.entry-content .doc-section__body > h3 + * { margin-top: 0.75rem; }

/* Last on purpose: this ties on specificity with the .table-scroll rule and
   with pages.css's .entry-content .callout, and source order breaks the tie, so
   the gap under every h2 is owned by .doc-section__body's own margin alone. */
.entry-content .doc-section__body > *:first-child { margin-top: 0; }

/*
 * Reference tables. .comparison-table is the theme's table treatment, but it
 * centres its cells — right for a three-column feature comparison, wrong for
 * definitions and prose, which need a left edge to scan down.
 */
.comparison-table--doc th,
.comparison-table--doc td {
	padding: 0.85rem 1rem;
	text-align: left;
	vertical-align: top;
	font-size: var(--text-sm);
	line-height: var(--leading-normal, 1.6);
}

.comparison-table--doc thead th { color: var(--color-white); }

/*
 * Row headers wrap.
 *
 * They were nowrap, which suited the first guide's glossary — "SLA", "OLA",
 * "Brand Scope" — and broke the moment a row was headed "Marketing campaigns,
 * templates, and activities". Under table-layout: fixed the column keeps its
 * 24% no matter what, so the unwrappable text simply ran on across the cell
 * beside it and the two overlapped, unreadably.
 *
 * Wrapping is the only option that cannot collide: the fixed layout already
 * guarantees the column its width, so a long term stacks onto a second line
 * instead of escaping the box. overflow-wrap catches the pathological case of
 * a single word longer than the column.
 */
.comparison-table--doc tbody th {
	font-weight: 750;
	color: var(--color-dark);
	white-space: normal;
	overflow-wrap: anywhere;
}

.comparison-table--doc tbody tr:nth-child(even) { background: var(--color-tint); }

/*
 * Column widths. Without them the browser auto-sizes from content and gives a
 * two-word term column a third of the table while the definition it explains
 * is squeezed into a ribbon. table-layout: fixed plus an explicit first column
 * puts the space where the prose is.
 */
.comparison-table--doc { table-layout: fixed; }
.comparison-table--cols2 th:first-child { width: 24%; }
.comparison-table--cols3 th:first-child { width: 14%; }
.comparison-table--cols3 th:nth-child(2) { width: 20%; }

/*
 * The vertical contents rail must wrap.
 *
 * .sub-nav__link sets white-space: nowrap, which is right for the horizontal
 * chip rail it was written for — chips should never break mid-label. In the
 * legal/guide TOC the same component stacks vertically in a narrow column, and
 * nowrap there pushes long titles out of the box behind a horizontal
 * scrollbar. The legal pages never showed it because their sections are called
 * things like "1. Overview"; a fourteen-section guide with real titles does.
 */
.sub-nav--legal .sub-nav__link {
	display: flex;
	align-items: flex-start;
	white-space: normal;
	text-align: left;
	line-height: var(--leading-snug, 1.35);
	padding-block: 0.5rem;
}

.sub-nav--legal .sub-nav__scroll { overflow-x: visible; }