/*
 * WordPress adapter for site.css (which is generated from the Astro CSS).
 * Block markup differs from Astro's in a few places; this file maps it back
 * so the pages render pixel for pixel. Keep it small, and say why per rule.
 */

/* Block gap CSS is off (settings.spacing.blockGap: null); Astro's CSS owns
   spacing. These resets stay at zero specificity so every Astro 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 they do in Astro. */
.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); }
body.admin-bar .wp-block-template-part.site-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* Buttons: .pill is the core button link. */
.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 20px; border-radius: 999px;
	font: 500 0.97rem/1 var(--sans); text-decoration: none; white-space: nowrap;
	background: var(--accent); color: #fff; border: 1px solid var(--accent);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-block-button__link:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.wp-block-button.is-style-pill-soft .wp-block-button__link { background: var(--panel); color: var(--ink); border-color: var(--panel); }
.wp-block-button.is-style-pill-soft .wp-block-button__link:hover { background: #ebebe2; color: var(--ink); }
.wp-block-button.is-sm .wp-block-button__link { padding: 8px 15px; font-size: 0.9rem; }
/* The › chevron, which Astro 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 Base.astro'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: Astro 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 Astro'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); }
.pixel-cta-19 { aspect-ratio: 320 / 40; background-image: url(../img/pixel-cta-19.png); }
.pixel-404-53 { aspect-ratio: 320 / 40; background-image: url(../img/pixel-404-53.png); }
.pixel-wpvibe { aspect-ratio: 320 / 36; background-image: url(../img/pixel-wpvibe.png); }
.pixel-novamira { aspect-ratio: 320 / 36; background-image: url(../img/pixel-novamira.png); }

/* 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 (Astro 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 Astro */
.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;
}
/* Astro'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 Doc.astro's <ul>. */
.p-docs .doc-nav ul { padding: 0; }

/* Code: core/code sets its own padding and border. Deliberately NOT matched:
   Astro'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 (Astro uses <dl>). */
.p-download dl { margin: 24px 0 0; }

/* Mono ▶ links inside a list or paragraph (Astro 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 Astro 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 olive pill 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 Doc.astro'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; }

/* Legacy .btn (download page): an inline link in the text flow, as in Astro. */
.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: Astro's jump links are a <nav>; here a paragraph, minus its margin. */
.p-recipes .jump { margin-bottom: 0; }

/* Homepage step numbers: a <span> in Astro, 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 Astro; 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 Astro site has too, fixed here (AGENTS.md section 9). */

/* Below 390px, the width Astro 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; }
}