/*
 * WordPress adapter for site.css. Block markup differs from the original
 * site's HTML in a few places; this file maps it back. Keep it small, and say
 * why per rule.
 */

/* Block gap CSS is off (settings.spacing.blockGap: null); site.css owns
   spacing. These resets stay at zero specificity so every site.css rule wins. */
:where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-group { box-sizing: border-box; }
/* post-content is a flow-root in core, which stops margins collapsing as site.css expects. */
.wp-block-post-content { display: contents; }

/* Template-part wrappers. */
.wp-block-template-part.site-header { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 0.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--rail); }
/* No admin-bar offset: the v2 header is position: relative (site.css), where top: 32px opened a white band under the admin bar. */

/* Buttons: Relume's shape (Fahim, 2026-10-12), the same as the v2 buttons in site.css:
   6px corners, regular weight, the brand fill, colour-only hover. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button__link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 11px 16px; border-radius: 6px;
	font: 400 15px/1.15 var(--sans); text-decoration: none; white-space: nowrap;
	background: var(--accent); color: var(--paper); border: 1px solid var(--accent);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.wp-block-button__link:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); }
.wp-block-button.is-style-pill-soft .wp-block-button__link { background: rgb(255 255 255 / 0.6); color: var(--ink); border-color: rgb(27 25 25 / 0.14); }
.wp-block-button.is-style-pill-soft .wp-block-button__link:hover { background: var(--paper); color: var(--ink); border-color: rgb(27 25 25 / 0.3); }
.wp-block-button.is-sm .wp-block-button__link { padding: 8px 12px; font-size: 14px; }
/* The › chevron, which the original site puts in <span class="chev">. */
.wp-block-button.chev .wp-block-button__link::after { content: '›'; font-size: 1.1em; line-height: 0; transform: translateY(-1px); }

/* Header: the navigation block stands in for the original header's <nav><ul>. */
.bar .wp-block-navigation { margin: 0 auto; }
.bar .wp-block-navigation .wp-block-navigation__container { gap: 2px; }
.bar .wp-block-navigation-item__content {
	display: block; padding: 6px 12px; border-radius: 999px;
	color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 450;
}
.bar .wp-block-navigation-item__content:hover,
.bar .wp-block-navigation-item__content[aria-current='page'] { background: var(--panel); color: var(--ink); }
.bar > .wp-block-buttons { gap: 0; }
@media (max-width: 760px) {
	.bar > .wp-block-buttons { margin-left: auto; }
	.bar .wp-block-navigation { order: 3; width: 100%; margin: 0; overflow-x: auto; }
	.bar .wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap; }
	.bar .wp-block-navigation-item__content { padding: 6px 8px; font-size: 0.9rem; }
}

/* Footer columns: the original site has bare links; blocks wrap each in <p>. */
.foot-col p { margin: 0; }
.foot-col p:not(.label) { font-size: 0.93rem; }
.foot-col .label { margin: 0 0 4px; }
.foot-base p { margin: 0; }
.foot-brand p { margin: 0; }

/* Lists and paragraphs inside cells keep the original site's spacing. */
.cells > .wp-block-group { margin: 0; }

/* Pixel art: a background image so no absolute URL lands in content. */
.pixel-scene { display: block; width: 100%; background-size: 100% 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel-hero-7 { aspect-ratio: 320 / 64; background-image: url(../img/pixel-hero-7.png?v=2026-10-22); }
.pixel-cta-19 { aspect-ratio: 320 / 40; background-image: url(../img/pixel-cta-19.png?v=2026-10-22); }
.pixel-404-53 { aspect-ratio: 320 / 40; background-image: url(../img/pixel-404-53.png?v=2026-10-22); }
.pixel-wpvibe { aspect-ratio: 320 / 36; background-image: url(../img/pixel-wpvibe.png?v=2026-10-22); }
.pixel-novamira { aspect-ratio: 320 / 36; background-image: url(../img/pixel-novamira.png?v=2026-10-22); }

/* Homepage: the decluttered sections end on their cells, so drop the doubled hairline. */
.p-home .frame > .cells:last-child { border-bottom: 0; }

/* Links that cover a whole card or row (the original site wraps the card in <a>). */
.p-recipes .item, .p-alts .row { position: relative; }
.p-recipes .item h3 a, .p-alts .row-name a { color: inherit; text-decoration: none; }
.p-recipes .item h3 a::after, .p-alts .row-name a::after { content: ''; position: absolute; inset: 0; }
.p-recipes .item:hover, .p-alts .row:hover { color: inherit; }
.p-alts .rows .row:last-child { border-bottom: 1px solid var(--rail); }
.p-alts .row > p, .p-recipes .item-head > * { margin: 0; }

/* Comparison table: core/table wraps <table> in <figure>. */
.p-alt figure.cmp { min-width: 0; margin: 0; }
.p-alt .cmp table { width: 100%; border-collapse: collapse; min-width: 640px; border: 0; }
.p-alt .cmp thead { border: 0; }
.p-alt .cmp th, .p-alt .cmp td { border: 0; border-bottom: 1px solid var(--rail); }
.p-alt .cmp tbody th { font-family: var(--mono); letter-spacing: 0.02em; } /* th.mono in the original site */
.p-alt .cmp tr > :nth-child(3) { background: var(--accent-tint); color: var(--ink); }
.p-alt .cmp thead th:nth-child(3)::before {
	content: ''; display: inline-block; width: 24px; height: 24px; margin: 0.8px 8px 0 0; vertical-align: top;
	background: var(--accent);
	-webkit-mask: url(../img/mark.svg) center / contain no-repeat; mask: url(../img/mark.svg) center / contain no-repeat;
}
/* the original site's inline-flex .us-head makes this row's line box 32.4px; match the row height. */
.p-alt .cmp thead th:nth-child(3) { padding-bottom: 26.8px; }

/* Docs tables and quotes: core/table and core/quote bring borders and sizes of their own. */
.p-docs .prose figure.wp-block-table { margin: 16px 0 24px; }
.p-docs .prose .wp-block-table table { border: 0; margin: 0; }
.p-docs .prose .wp-block-table thead { border: 0; }
.p-docs .prose .wp-block-table th, .p-docs .prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); }
.p-docs .prose .wp-block-quote { font-size: inherit; border-width: 0 0 0 3px; border-left-color: var(--accent-soft); }
.p-docs .wp-block-post-excerpt__excerpt { margin: 0; }
.p-docs .wp-block-post-excerpt { margin-top: 0; }

/* Doc nav: the list block stands in for the original docs layout's <ul>. */
.p-docs .doc-nav ul { padding: 0; }

/* Code: core/code sets its own padding and border. Deliberately NOT matched:
   The original build's Shiki light theme prints near-black code on the dark block, which
   is unreadable; here the code keeps the light --code-ink. */
.wp-block-code { border: 0; }
.wp-block-code code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Download facts table (the original site uses <dl>). */
.p-download dl { margin: 24px 0 0; }

/* Mono ▶ links inside a list or paragraph (the original site puts .mono-cta on the <a>). */
.mono-links { list-style: none; padding: 0; }
.mono-links a {
	display: inline-flex; align-items: center; gap: 8px;
	font: 500 0.8rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--ink); text-decoration: none;
}
.mono-links a::after { content: '▶'; font-size: 0.7em; }
.mono-links a:hover { color: var(--accent); }

/* ---- Pages the original site never had. Nothing below touches a ported page. */

/* Lists (blog, archive, search): /alternatives/'s head and hairline rows. */
.p-list .list-head { padding-top: 72px; padding-bottom: 48px; }
.p-list .list-head .label { margin-bottom: 14px; }
.p-list .list-head h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 0; } /* the docs and recipe H1 */
.p-list .list-head .lede { margin: 16px 0 0; }
.p-list .list-count { margin: 12px 0 0; color: var(--ink-3); }
.p-list .wp-block-query { padding-bottom: 72px; }
.p-list .rows { list-style: none; margin: 0; padding: 0; }
.p-list .row {
	position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px; align-items: baseline;
	padding: 22px 48px; border-top: 1px solid var(--rail); transition: background-color 0.15s ease;
}
.p-list .rows > li:last-child .row { border-bottom: 1px solid var(--rail); }
.p-list .row:hover { background: var(--panel-2); }
.p-list .row::after { content: '▶'; font-size: 0.6rem; color: var(--ink-3); }
.p-list .row:hover::after { color: var(--accent); }
.p-list .row-kicker { margin: 0; font: 500 0.78rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.p-list .row-title { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.p-list .row-title a { color: var(--ink); text-decoration: none; }
.p-list .row-title a::after { content: ''; position: absolute; inset: 0; } /* the whole row is the link */
.p-list .row-line { margin: 6px 0 0; color: var(--ink-2); }
.p-list .list-pages { padding-top: 28px; font: 500 0.8rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.p-list .list-pages a { color: var(--ink); text-decoration: none; }
.p-list .list-pages a:hover, .p-list .list-pages .current { color: var(--accent); }
.p-list .list-empty { padding-top: 32px; border-top: 1px solid var(--rail); }
.p-list .list-empty p { margin: 0 0 20px; color: var(--ink-2); }
.p-list .list-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }

/* The search form: a pale pill field beside the brand button. */
.p-list .wp-block-search { max-width: 560px; margin-top: 28px; }
.p-list .wp-block-search__inside-wrapper { gap: 8px; }
.p-list .wp-block-search__input {
	min-width: 0; padding: 10px 18px; border: 1px solid var(--rail-2); border-radius: 999px;
	background: var(--paper); color: var(--ink); font: 1rem/1.3 var(--sans);
}
.p-list .wp-block-search__input::placeholder { color: var(--ink-3); }
.p-list .wp-block-search__input:focus-visible { border-radius: 999px; outline-offset: 2px; }
.p-list .wp-block-search__button { margin: 0; }

@media (max-width: 900px) {
	.p-list .row { grid-template-columns: 1fr; gap: 6px; padding: 20px 16px; }
	.p-list .row::after { display: none; }
}
@media (max-width: 720px) {
	.p-list .list-head { padding-top: 56px; padding-bottom: 36px; }
}

/* Posts and plain pages: the recipe page's column, with the original docs layout's prose. */
.p-post .post { max-width: calc(var(--prose) + 48px); padding-top: 56px; padding-bottom: 96px; }
.p-post .post h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.p-post .post-meta {
	display: flex; flex-wrap: wrap; gap: 0 10px; margin-bottom: 14px;
	font: 500 0.78rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
}
.p-post .post-meta > * + *::before { content: '·'; margin-right: 10px; }
.p-post .post-meta a { color: inherit; text-decoration: none; }
.p-post .post-meta a:hover { color: var(--ink); }
.p-post .lede { margin: 0 0 32px; }
.p-post .prose h2 { font-size: 1.45rem; margin-top: 48px; padding-top: 8px; }
.p-post .prose h3 { font-size: 1.1rem; margin-top: 32px; }
.p-post .prose ul, .p-post .prose ol { padding-left: 22px; }
.p-post .prose li { margin: 6px 0; }
.p-post .prose .wp-block-quote {
	margin: 20px 0; padding: 14px 18px; border: 0; border-left: 3px solid var(--accent-soft);
	background: var(--paper-2); border-radius: 0 8px 8px 0; color: var(--ink-2); font-size: inherit;
}
.p-post .prose .wp-block-quote p:last-child { margin: 0; }
.p-post .prose hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.p-post .prose figure { margin: 32px 0; }
.p-post .prose img { max-width: 100%; height: auto; border-radius: 4px; }
.p-post .prose figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--ink-3); }
.p-post .prose figure.wp-block-table { margin: 16px 0 24px; overflow-x: auto; }
.p-post .prose table { width: 100%; border: 0; border-collapse: collapse; font-size: 0.95rem; }
.p-post .prose thead { border: 0; }
.p-post .prose th, .p-post .prose td { text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.p-post .prose th { font-weight: 600; color: var(--ink-3); font-size: 0.85rem; }
.p-post .post-nav {
	display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
	font: 500 0.8rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
}
.p-post .post-nav:not(:has(a)) { display: none; }
.p-post .post-nav a { color: var(--ink); text-decoration: none; }
.p-post .post-nav a:hover { color: var(--accent); }
.p-post .post-nav .post-navigation-link-next { margin-left: auto; }

/* Recipes (inc/recipes.php). The prompt is a code block, so its sentences are
   not one paragraph; in the .prompt box it reads as text, not as code.
   site.css paints every pre with !important, so the reset needs it too. */
.prompt .wp-block-code { margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--ink); font: 400 1.02rem/1.6 var(--sans); white-space: pre-wrap; }
.prompt .wp-block-code code { font: inherit; color: inherit; }
/* The recipe cards, chapters and head are the "Recipes" block at the end of site.css. */

/* Legacy .btn (download page): an inline link in the text flow, as in the original site. */
.wp-block-buttons.inline { display: block; }
.wp-block-buttons.inline > .wp-block-button { display: inline; }
.wp-block-buttons.inline .wp-block-button__link { width: auto; }
.wp-block-button.is-btn .wp-block-button__link { gap: 8px; border-color: transparent; line-height: 1.6; }

/* Recipes: the original site's jump links are a <nav>; here a paragraph, minus its margin. */
.p-recipes .jump { margin-bottom: 0; }

/* Homepage step numbers: a <span> in the original site, a paragraph here, so .cell p would win. */
.p-home .cell p.step-n { margin-bottom: 18px; color: var(--accent); }

/* "All comparisons": a bare a.mono-cta in the original site; the paragraph here must add no height. */
.p-alt .final p.all { display: flex; margin: 26px 0 0; }

/* Editor: the page canvas is full width, as on the front end (sections carry their own .frame). */
/* Core's editor root rule caps content at 680px with (0,2,0); the repeated class wins the tie. */
.block-editor-block-list__layout.is-root-container.is-root-container > * { max-width: none; }
.block-editor-block-list__layout.is-root-container { padding-left: 0; padding-right: 0; }

/* ---- Two bugs the original site has too, fixed here (AGENTS.md section 9). */

/* Below 390px, the width the original site was never checked under: the hero H1's
   "WordPress&nbsp;busywork." cannot wrap, and at its 2.5rem floor it is 371px
   wide, so the homepage scrolled sideways (12px at 375, 27px at 360, 67px at
   320). Size it to fit between the 16px gutters instead. 9.4 is that phrase's
   width in ems, plus a little room. 390 and wider are untouched. */
@media (max-width: 389px) {
	.p-home .hero h1 { font-size: calc((100vw - 32px) / 9.4); }
}

/* The diagram's step numbers were ink-3 on panel-2 at 11.5px: 4.42:1, under
   the 4.5:1 floor (ink-3 is for white only, AGENTS.md section 6). */
.stage-inner .gate-n { color: var(--ink-2); }

/* ---- Print: docs and recipes get printed; the chrome and the art do not. */
@media print {
	.wp-block-template-part.site-header, .site-footer, .pixel-scene, .p-docs .doc-nav, .final, .skip-link { display: none !important; }
	.frame { border: 0; }
	.p-docs .doc-grid { display: block; padding: 0; }
	body { font-size: 11pt; }
	a { color: inherit; }
	pre { white-space: pre-wrap; }
}

/* ---- Saddle Blocks on this site. The plugin's blocks carry their own styles;
   these rules only give them this site's pixel art in place of the plugin's
   CSS ridges. The diagram pattern's rules in site.css also match .sb-hero__stage. */
.sb-scene--hills { height: auto; max-width: var(--frame); margin: 0 auto; aspect-ratio: 320 / 64; background: url(../img/pixel-hero-7.png?v=2026-10-22) center / 100% 100% no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; }
.sb-cta .sb-scene--hills { aspect-ratio: 320 / 40; background-image: url(../img/pixel-cta-19.png?v=2026-10-22); }
.sb-scene--hills::before, .sb-scene--hills::after { display: none; }