/*
Theme Name: BucketWP
Theme URI: https://bucketwp.com/
Author: Pixarlabs
Author URI: https://bucketwp.com/
Description: Developer-console block theme for BucketWP, built from the Stitch "Developer Console Precision" design. Self-hosted variable fonts, inline SVG icons, no icon font, no JavaScript framework.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.3.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bucketwp
Tags: full-site-editing, wide-blocks, editor-style
*/

/* Values mirror the Stitch Tailwind config: radius lg=4 xl=8 "full"=12 2xl=16 3xl=24; spacing sm=8 md=14 lg=20 xl=32. */
:root {
	--bwp-gutter: 1rem;
	--i-list: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M290-620v-60h550v60H290Zm0 170v-60h550v60H290Zm0 170v-60h550v60H290ZM150-620q-12 0-21-9t-9-21.5q0-12.5 9-21t21.5-8.5q12.5 0 21 8.62 8.5 8.63 8.5 21.38 0 12-8.62 21-8.63 9-21.38 9Zm0 170q-12 0-21-9t-9-21.5q0-12.5 9-21t21.5-8.5q12.5 0 21 8.62 8.5 8.63 8.5 21.38 0 12-8.62 21-8.63 9-21.38 9Zm0 170q-12 0-21-9t-9-21.5q0-12.5 9-21t21.5-8.5q12.5 0 21 8.62 8.5 8.63 8.5 21.38 0 12-8.62 21-8.63 9-21.38 9Z'/></svg>");
	--i-code: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M320-242 80-482l242-242 43 43-199 199 197 197-43 43Zm318 2-43-43 199-199-197-197 43-43 240 240-242 242Z'/></svg>");
	--i-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m40-120 440-760 440 760H40Zm104-60h672L480-760 144-180Zm340.18-57q12.82 0 21.32-8.68 8.5-8.67 8.5-21.5 0-12.82-8.68-21.32-8.67-8.5-21.5-8.5-12.82 0-21.32 8.68-8.5 8.67-8.5 21.5 0 12.82 8.68 21.32 8.67 8.5 21.5 8.5ZM454-348h60v-224h-60v224Zm26-122Z'/></svg>");
	--i-verified: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m346-60-76-130-151-31 17-147-96-112 96-111-17-147 151-31 76-131 134 62 134-62 77 131 150 31-17 147 96 111-96 112 17 147-150 31-77 130-134-62-134 62Zm27-79 107-45 110 45 67-100 117-30-12-119 81-92-81-94 12-119-117-28-69-100-108 45-110-45-67 100-117 28 12 119-81 94 81 92-12 121 117 28 70 100Zm107-341Zm-43 133 227-225-45-41-182 180-95-99-46 45 141 140Z'/></svg>");
	--i-quiz: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M543-340q16.6 0 28.8-12.2T584-381q0-16.6-12.2-28.8T543-422q-16.6 0-28.8 12.2T502-381q0 16.6 12.2 28.8T543-340Zm-25-126h47q2-29 8.5-43t32.5-39q27-26 37.5-45.4Q654-612.79 654-639q0-45.88-31.5-74.94Q591-743 540-743q-38 0-68 20.5T428-665l45 19q11-25 27.5-38t39.5-13q29.78 0 48.39 17T607-637q0 20-9 35t-32 32q-32 29-40 46.5t-8 57.5ZM260-200q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z'/></svg>");
	--bwp-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m421-298 283-283-46-45-237 237-120-120-45 45 165 166Zm59 218q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z'/></svg>");
}
@media (min-width: 1024px) { :root { --bwp-gutter: 2rem; } }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; }
.wp-site-blocks { padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .bwp-main { flex: 1; }
:where(h1, h2, h3, h4, p) { margin: 0; }
:where(input, button, select, textarea) { font: inherit; color: inherit; }
img, svg { display: block; }
.bwp-i { fill: currentColor; flex: none; }

.bwp-label { font-family: var(--wp--preset--font-family--mono); font-size: 11px; line-height: 14px; font-weight: 500; }
.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
:focus-visible { outline: 2px solid var(--wp--preset--color--primary-container); outline-offset: 2px; }

.bwp-container { box-sizing: border-box; width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--bwp-gutter); }

/* ── Header (Stitch refined) ─────────────────────────────── */
/* The header block is sticky itself; its part wrapper must not be a box. */
.bwp-part-header { display: contents; }

.bwp-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 32px; padding: 0 14px; border-radius: 4px; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; transition: background-color 0.15s, transform 0.1s; }

.bwp-btn:active { transform: scale(0.98); }

/* ── Footer (Stitch refined) ─────────────────────────────── */
.bwp-part-footer { margin-top: 32px; }

/* ── Shared atoms ─────────────────────────────────────────── */
.bwp-eyebrow { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 12px; line-height: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wp--preset--color--primary); }

.bwp-lead { font-size: 15px; line-height: 22px; color: var(--wp--preset--color--text-muted); }

@keyframes bwp-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes bwp-pulse { 50% { opacity: 0.5; } }
.c-primary { color: var(--wp--preset--color--primary-container); }
.c-tertiary { color: var(--wp--preset--color--tertiary); }
.c-pro { color: var(--wp--preset--color--badge-pro); }
.c-secondary { color: var(--wp--preset--color--secondary, #5f5e61); }
.c-error { color: var(--wp--preset--color--error, #ba1a1a); }

.bwp-postgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.bwp-postgrid > li { margin: 0; display: flex; }
.bwp-postgrid > li > * { flex: 1; }

.bwp-postgrid--3 { gap: 14px; }
@media (min-width: 768px) { .bwp-postgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bwp-postgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bwp-postgrid :where(p:empty) { display: none; }

.bwp-ccard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.bwp-ccard__desc { margin: 0; }

/* ── Tools archive (Stitch 10) ───────────────────────────── */
.bwp-archive { position: relative; padding-bottom: 32px; }
/* The compact hero carries the container's pt-space-lg itself. */

.bwp-ccard { position: relative; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding: 20px; background: var(--wp--preset--color--surface-card); border: 1px solid var(--wp--preset--color--border-subtle); border-radius: 8px; transition: all 0.2s; }
.bwp-ccard:hover { border-color: var(--wp--preset--color--border-strong); box-shadow: var(--wp--preset--shadow--md), 0 0 0 1px rgb(212 212 216 / 0.6); }
.bwp-ccard > * + * { margin-top: 14px; }
.bwp-ccard > .bwp-ccard__title + .bwp-ccard__desc { margin-top: 4px; }

.bwp-ccard__tag { padding: 2px 8px; border-radius: 6px; background: var(--wp--preset--color--badge-free-bg, #eff6ff); color: var(--wp--preset--color--badge-pro, #1d4ed8); font-family: var(--wp--preset--font-family--mono); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.05em; }

.bwp-ccard__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--wp--preset--color--on-surface); transition: color 0.15s; }
.bwp-ccard__title a { color: inherit; }
.bwp-ccard:hover .bwp-ccard__title { color: var(--wp--preset--color--primary); }
.bwp-ccard__desc p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 12px; line-height: 1.625; color: var(--wp--preset--color--text-muted); }

.bwp-empty { padding: 32px 20px; text-align: center; background: var(--wp--preset--color--surface-card); border: 1px solid var(--wp--preset--color--border-subtle); border-radius: 8px; color: var(--wp--preset--color--text-muted); }
.bwp-pager { margin-top: 20px; gap: 6px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; }
.bwp-pager a, .bwp-pager .current { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--wp--preset--color--border-subtle); background: var(--wp--preset--color--surface-card); }
.bwp-pager .current { background: var(--wp--preset--color--on-surface); color: var(--wp--preset--color--surface-container-lowest, #fff); border-color: var(--wp--preset--color--on-surface); }

/* ── Tools archive: page sections (Stitch tools-collection) ──
   Section rhythm of the tools-collection screen: each titled section opens
   mt-space-xl pt-space-xl under a hairline, its heading mb-space-lg; the
   heading type is the screen's label-sm eyebrow (bold, tracking-widest,
   primary) over a headline-lg title mt-1. */
.bwp-archive .bwp-archive-section { margin-top: var(--wp--preset--spacing--xl, 2rem); padding-top: var(--wp--preset--spacing--xl, 2rem); border-top: 1px solid var(--wp--preset--color--border-subtle, #e4e4e7); }
.bwp-archive .bwp-archive-section.wp-block-bucketwp-section-heading { margin-bottom: var(--wp--preset--spacing--lg, 1.25rem); }
.bwp-archive .bwp-archive-section .bwp-heading__eyebrow { font-size: var(--wp--preset--font-size--label-sm, 11px); line-height: var(--wp--custom--typography--label-sm--line-height, 14px); font-weight: 700; letter-spacing: 0.1em; color: var(--wp--preset--color--primary, #004ac6); }
.bwp-archive .bwp-archive-section .bwp-heading__title { margin-top: var(--wp--preset--spacing--xs, 0.25rem); }
.bwp-archive .bwp-archive-section:not(.bwp-heading--center) .bwp-heading__subtitle { max-width: 36rem; }
.bwp-archive .bwp-archive-section.bwp-heading--center .bwp-heading__subtitle { max-width: 42rem; }
/* Workflow cards: gap-space-md grid, space-y-space-sm inside each card. */
.bwp-archive .bwp-steps--style-badge { gap: var(--wp--preset--spacing--md, 0.875rem); }
.bwp-archive .bwp-steps--style-badge .bwp-step__body { gap: var(--wp--preset--spacing--sm, 0.5rem); }

/* Newsletter box on this screen: md:p-space-xl, space-y-3 stack, h-9 form
   in a max-w-md column, label-sm tag and footnote (the homepage keeps the
   block's roomier defaults). */
.bwp-archive .bwp-newsletter--center { padding: var(--wp--preset--spacing--lg, 1.25rem); }
@media (min-width: 768px) { .bwp-archive .bwp-newsletter--center { padding: var(--wp--preset--spacing--xl, 2rem); } }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__tag { margin-bottom: var(--wp--preset--spacing--gutter-sm, 0.75rem); padding: 2px var(--wp--preset--spacing--gutter-sm, 0.75rem); border: 1px solid color-mix(in srgb, var(--bwp-newsletter-ink) 20%, transparent); background: color-mix(in srgb, var(--bwp-newsletter-ink) 10%, transparent); font-size: var(--wp--preset--font-size--label-sm, 11px); line-height: var(--wp--custom--typography--label-sm--line-height, 14px); font-weight: 600; letter-spacing: 0.05em; }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__title { margin-bottom: var(--wp--preset--spacing--gutter-sm, 0.75rem); font-weight: 700; letter-spacing: -0.025em; }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__subtitle { margin-bottom: var(--wp--preset--spacing--lg, 1.25rem); line-height: 1.625; }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__form-wrap { max-width: 28rem; margin-bottom: var(--wp--preset--spacing--md, 0.875rem); }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__form, .bwp-archive .bwp-newsletter--center .bwp-newsletter__field { gap: var(--wp--preset--spacing--sm, 0.5rem); }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__input { flex: 1 1 auto; height: 36px; padding: 0 var(--wp--preset--spacing--md, 0.875rem); border-radius: var(--wp--custom--radius--lg, 0.25rem); font-size: var(--wp--preset--font-size--body-sm, 12px); }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__submit { height: 36px; padding: 0 16px; border-radius: var(--wp--custom--radius--lg, 0.25rem); background: var(--wp--preset--color--on-primary-fixed, #00174b); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.bwp-archive .bwp-newsletter--center .bwp-newsletter__disclaimer { font-family: var(--wp--preset--font-family--mono, monospace); font-size: var(--wp--preset--font-size--label-sm, 11px); line-height: var(--wp--custom--typography--label-sm--line-height, 14px); }

/* Dark mode: the centred newsletter box sits on "primary", which turns light
   in dark mode; use the dark primary container so the light ink reads. */
:root[data-theme="dark"] .bwp-archive .bwp-newsletter--center { background: var(--wp--preset--color--primary-container, #003ea8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bwp-archive .bwp-newsletter--center { background: var(--wp--preset--color--primary-container, #003ea8); } }

/* ── Tool page (Stitch "htaccess-generator" / "wp-config-generator") ── */
/* Order: white head band (breadcrumbs + the tool block's own head), the tool,
   intro, Best practices guide cards, How to use / Example / Pitfalls /
   Compatibility cards, boxed FAQ, related tools. Content columns stop at
   1440px; the band and the page run full width. */
.bwp-toolpage {
	/* The tool screens use px-margin (32px) at every width, phones included. */
	--bwp-tp-pad: max(var(--wp--preset--spacing--margin, 2rem), calc((100% - var(--wp--custom--layout--max-width, 1440px)) / 2 + var(--wp--preset--spacing--margin, 2rem)));
	position: relative; box-sizing: border-box; width: 100%; overflow-x: clip;
	padding: 0 var(--bwp-tp-pad) var(--wp--preset--spacing--xl, 2rem);
}
/* Two soft glows behind the tool (Stitch), drawn with pseudo-elements, not markup. */
.bwp-toolpage::before,
.bwp-toolpage::after { content: ""; position: absolute; pointer-events: none; }
.bwp-toolpage::before { top: 160px; left: 25%; width: 512px; height: 384px; background: radial-gradient(closest-side, color-mix(in srgb, var(--bwp-primary) 6%, transparent), transparent); }
.bwp-toolpage::after { top: 300px; right: 33%; width: 448px; height: 336px; background: radial-gradient(closest-side, color-mix(in srgb, var(--bwp-tertiary-container) 6%, transparent), transparent); }
.bwp-toolpage > * { position: relative; }

/* Head band: breadcrumbs and the tool head share one full-bleed white band
   (py 20, 14 between the rows) with a hairline under it. */
.bwp-toolpage > .bwp-breadcrumbs,
.bwp-toolpage .bwp-tool__head { border-image: linear-gradient(var(--wp--preset--color--surface-card) 0 0) fill 0 / / 0 100vmax; }
.bwp-toolpage > .bwp-breadcrumbs { margin: 0; padding: var(--wp--preset--spacing--lg, 1.25rem) 0 0; }
.bwp-toolpage .bwp-tool__head { position: relative; margin: 0 0 var(--wp--preset--spacing--xl, 2rem); padding: var(--wp--preset--spacing--md, 0.875rem) 0 var(--wp--preset--spacing--lg, 1.25rem); background: none; border-bottom: 0; }
.bwp-toolpage .bwp-tool__head::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: var(--wp--preset--color--border-subtle); }

/* Post content: the tool, the intro, the guide cards and the FAQ span the
   page; the four reference sections pair up two by two on desktop. */
.bwp-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--gutter, 1.25rem); }
@media (min-width: 1024px) { .bwp-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bwp-sections > :where(.bwp-tool, .wp-block-bucketwp-generator, .wp-block-bucketwp-transform, .bwp-guide-cards, .bwp-faq, .bwp-sec--intro) { grid-column: 1 / -1; }
.bwp-sections > * { margin-block: 0; }
/* The tool sits at the top of the page, and paint containment would clip the
   full-bleed head band, so this wrapper opts out of content-visibility. */
.bwp-toolpage .bwp-sections { content-visibility: visible; contain-intrinsic-size: none; }
/* Section rhythm from the design: 32px below the tool, 14 more above the
   guide heading, 32px between the later sections. */
.bwp-sections > .bwp-guide-cards { margin-top: var(--wp--preset--spacing--md, 0.875rem); margin-bottom: var(--wp--preset--spacing--md, 0.875rem); }
.bwp-sections > .bwp-faq { margin-top: var(--wp--preset--spacing--md, 0.875rem); }

.bwp-sec { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md, 0.875rem); padding: var(--wp--preset--spacing--lg, 1.25rem); border: 1px solid var(--wp--preset--color--border-subtle); border-radius: var(--wp--custom--radius--xl, 0.5rem); background: var(--wp--preset--color--surface-card); box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)); }
.bwp-sec--intro { padding: 0; border: 0; background: none; box-shadow: none; }
.bwp-sec--intro p { font-size: var(--wp--preset--font-size--body-lg); line-height: var(--wp--custom--typography--body-lg--line-height); color: var(--wp--preset--color--on-surface-variant); max-width: 56rem; }
.bwp-sec h2 { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs, 0.25rem); margin-bottom: 4px; font-size: var(--wp--preset--font-size--headline-lg); line-height: var(--wp--custom--typography--headline-lg--line-height); font-weight: var(--wp--custom--typography--headline-md--weight); letter-spacing: -0.015em; color: var(--wp--preset--color--on-surface); }
/* The heading says what the section is; the icon only repeated it. */
.bwp-sec h2::before { content: none; }
.bwp-sec h3 { font-size: var(--wp--preset--font-size--headline-md); line-height: var(--wp--custom--typography--headline-md--line-height); font-weight: 600; margin-top: var(--wp--preset--spacing--sm, 0.5rem); }
/* Running text uses the reading scale, not the UI scale, and stops at a
   comfortable measure so lines never run the full width of a wide card. */
.bwp-sec :where(p, li) { max-width: 36em; font-size: var(--wp--preset--font-size--prose); line-height: var(--wp--custom--typography--prose--line-height); color: var(--wp--preset--color--on-surface-variant); text-wrap: pretty; }
.bwp-sec :where(ul, ol) { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bwp-sec ol { padding-left: 1.5rem; }
.bwp-sec ul { list-style: none; }
.bwp-sec ul > li { position: relative; padding-left: 28px; }
/* The marker hangs beside the first line, so it follows the text size. */
.bwp-sec ul > li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1em; height: 1em; background: var(--wp--preset--color--tertiary); -webkit-mask: var(--bwp-check) center / contain no-repeat; mask: var(--bwp-check) center / contain no-repeat; }
/* Inline code sizes off its surrounding text so mixed lines keep one rhythm. */
.bwp-sec :where(p, li) code { font-family: var(--wp--preset--font-family--mono); font-size: 0.875em; background: var(--wp--preset--color--surface-container-low); padding: 0.1em 0.35em; border-radius: var(--wp--custom--radius--base, 0.125rem); color: var(--wp--preset--color--on-surface); }
.bwp-sec pre.wp-block-code { margin: 0; padding: var(--wp--preset--spacing--md, 0.875rem); overflow: auto; border-radius: var(--wp--custom--radius--lg, 0.25rem); background: var(--wp--custom--terminal--bg, #18181b); color: var(--wp--custom--terminal--code, #d4d4d8); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--code-snippet); line-height: 1.625; }
.bwp-sec pre.wp-block-code code { background: none; padding: 0; color: inherit; font: inherit; }
.bwp-sec--how-to-use { --bwp-sec-icon: var(--i-list); }
.bwp-sec--example { --bwp-sec-icon: var(--i-code); }
.bwp-sec--pitfalls { --bwp-sec-icon: var(--i-warning); }
.bwp-sec--compatibility { --bwp-sec-icon: var(--i-verified); }

/* Related tools: design heading row (headline-lg title, body-sm subtitle,
   primary mono "Explore all" link) 14px above a 4-up card grid. */
.bwp-toolpage > .bwp-toolpage__related-head { margin: var(--wp--preset--spacing--xl, 2rem) 0 var(--wp--preset--spacing--md, 0.875rem); }
.bwp-toolpage__related-head .bwp-heading__subtitle { font-size: var(--wp--preset--font-size--body-sm); line-height: var(--wp--custom--typography--body-sm--line-height); }
.bwp-toolpage__related-head .bwp-heading__link { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label-md); line-height: var(--wp--custom--typography--label-md--line-height); color: var(--wp--preset--color--primary); }
.bwp-toolpage__related-head .bwp-heading__link:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.bwp-toolpage > .bwp-toolpage__related { margin: 0; }

.bwp-postgrid :where(p > code) { font: inherit; color: inherit; background: none; padding: 0; border-radius: 0; }

/* ── Blog post (Stitch 04) ───────────────────────────────── */
/* Prose rules target the article's own children (">"), so blocks nested in
   the content (callout, compare, code panel) keep their own type and colour. */
.bwp-post { box-sizing: border-box; width: 100%; max-width: 1440px; margin-inline: auto; padding: 32px var(--bwp-gutter); }

/* Core's flow layout zeroes children's block-end margin; the hero keeps the design's 32px. */
.bwp-post > .bwp-posthero { margin-block: 0 32px; }
.bwp-post > .bwp-post__grid { margin-top: 0; }
.bwp-post__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
/* The design lays the post out on its 12-column grid: article 8, sidebar 4. */
@media (min-width: 1024px) { .bwp-post__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .bwp-post__grid > .bwp-article { grid-column: span 8; } .bwp-post__grid > .bwp-post-sidebar, .bwp-post__grid > aside { grid-column: span 4; } }
.bwp-article { min-width: 0; counter-reset: bwp-h2; }
.bwp-article__content > * + * { margin-top: 14px; }
.bwp-article__content > :first-child { margin-top: 0; }
.bwp-article__content > :where(p, ul, ol) { margin-bottom: 0; }
.bwp-article__content > p, .bwp-article__content > :where(ul, ol) li { max-width: 36em; font-size: var(--wp--preset--font-size--prose, 16px); line-height: var(--wp--custom--typography--prose--line-height, 27px); color: var(--wp--preset--color--on-surface-variant); text-wrap: pretty; }
.bwp-article__content > p:first-child { max-width: 32em; font-size: var(--wp--preset--font-size--prose-lead, 18px); line-height: var(--wp--custom--typography--prose-lead--line-height, 30px); }
.bwp-article__content > :where(ul, ol) li + li { margin-top: 8px; }
.bwp-article__content > * + * { margin-top: 16px; }
.bwp-article__content > :where(ul, ol) { padding-left: 1.25rem; }
.bwp-article__content > h2 { margin-top: 32px; font-size: var(--wp--preset--font-size--headline-lg, 24px); line-height: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--wp--preset--color--on-surface); counter-increment: bwp-h2; scroll-margin-top: 80px; }
/* Section eyebrow "01 ──": the counter, then a 24px hairline. */
.bwp-article__content > h2::before { content: counter(bwp-h2, decimal-leading-zero); display: block; width: max-content; margin-bottom: 14px; padding-right: 32px; background: linear-gradient(var(--wp--preset--color--outline-variant, #c3c6d7), var(--wp--preset--color--outline-variant, #c3c6d7)) no-repeat right center / 24px 1px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label-md, 12px); line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--wp--preset--color--text-muted, #71717a); }
.bwp-article__content > h2::after { content: none; }
.bwp-article__content > h3 { margin-top: 24px; font-size: var(--wp--preset--font-size--headline-md, 18px); line-height: 24px; font-weight: 600; scroll-margin-top: 80px; }
.bwp-article__content > :where(p, ul, ol, h2, h3) a { color: var(--wp--preset--color--primary); text-decoration: underline; text-decoration-color: rgb(0 74 198 / 0.3); text-underline-offset: 2px; }
.bwp-article__content > :where(p, h2, h3) code, .bwp-article__content > :where(ul, ol) li code, .bwp-docarticle__content > p code, .bwp-docarticle__content > :where(ul, ol) li code { padding: 2px 6px; border-radius: 2px; background: var(--wp--preset--color--surface-container-high); color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--mono); font-size: 0.875em; font-weight: 500; }
.bwp-article__content > h2 code { background: var(--wp--preset--color--surface-container); color: var(--wp--preset--color--error, #ba1a1a); }
.bwp-article__content > pre.wp-block-code { position: relative; margin-top: 20px; padding: 48px 14px 14px; overflow-x: auto; border-radius: 8px; background: var(--wp--custom--terminal--bg, #18181b); color: var(--wp--custom--terminal--code-alt, #e4e4e7); font-family: var(--wp--preset--font-family--mono); font-size: 13px; line-height: 1.625; box-shadow: var(--wp--preset--shadow--xs); }
.bwp-article__content > pre.wp-block-code::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px; background: radial-gradient(circle at 19px 17px, var(--wp--preset--color--error, #ba1a1a) 5px, transparent 5.5px), radial-gradient(circle at 37px 17px, var(--wp--preset--color--outline, #737686) 5px, transparent 5.5px), radial-gradient(circle at 55px 17px, var(--wp--preset--color--tertiary-fixed-dim, #68dba9) 5px, transparent 5.5px), var(--wp--preset--color--on-surface, #191b23); border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.bwp-article__content > pre.wp-block-code code { font: inherit; }
.bwp-article__content > blockquote { margin: 20px 0 0; padding: 14px 20px; border-left: 3px solid var(--wp--preset--color--primary-container); border-radius: 0 4px 4px 0; background: var(--wp--preset--color--surface-container-low); }
.bwp-article__content img { max-width: 100%; height: auto; border-radius: 8px; }
/* Blocks get the design's 20px breathing room from the prose around them. */
.bwp-article__content > :where(.bwp-code-panel, .bwp-compare, .bwp-callout, .wp-block-table), .bwp-docarticle__content > :where(.bwp-code-panel, .bwp-compare, .wp-block-table) { margin-top: 20px; }
.bwp-article__tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; }
.bwp-article__tags a { padding: 4px 12px; border-radius: 12px; background: var(--wp--preset--color--surface-card); color: var(--wp--preset--color--text-muted, #71717a); box-shadow: var(--wp--preset--shadow--xs); }
.bwp-article__newsletter { margin-top: 32px; }
/* Stitch blog-post "Newsletter Subscribe Card": inside the article column the
   signup is the compact dark card, not the full-width blue band. */
.bwp-article .bwp-article__newsletter { --bwp-newsletter-ink: var(--wp--preset--color--primary-fixed, #dbe1ff); padding: var(--wp--preset--spacing--xl, 2rem); background: var(--wp--preset--color--on-primary-fixed, #00174b); box-shadow: var(--wp--preset--shadow--md); }
.bwp-article .bwp-article__newsletter .bwp-newsletter__title { font-size: var(--wp--preset--font-size--headline-lg, 24px); line-height: 32px; letter-spacing: -0.025em; }
.bwp-article .bwp-article__newsletter .bwp-newsletter__subtitle { font-size: var(--wp--preset--font-size--prose-sm, 14px); line-height: var(--wp--custom--typography--prose-sm--line-height, 23px); color: var(--wp--preset--color--primary-fixed, #dbe1ff); }
.bwp-article .bwp-article__newsletter .bwp-newsletter__submit { background: var(--wp--preset--color--primary-fixed, #dbe1ff); color: var(--wp--preset--color--on-primary-fixed, #00174b); }
.bwp-article .bwp-article__newsletter .bwp-newsletter__submit:is(:hover, :focus-visible) { background: var(--wp--preset--color--primary-fixed-dim, #b4c5ff); color: var(--wp--preset--color--on-primary-fixed, #00174b); }
.bwp-article .bwp-article__newsletter .bwp-newsletter__disclaimer { color: var(--wp--preset--color--primary-fixed-dim, #b4c5ff); }
.bwp-article__nav { margin-top: 20px; font-size: 13px; }
.bwp-article__nav:empty { display: none; }
.bwp-article__nav a { color: var(--wp--preset--color--primary); }

/* ── Docs (Stitch 08) ─────────────────────────────────────── */
.bwp-docs { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; max-width: 1440px; margin-inline: auto; padding: 20px var(--bwp-gutter) 0; align-items: start; }
/* Stats ribbon spans the page; below it the design's 12-column grid: nav 3,
   article 6, "on this page" 3. The side columns collapse on phones, where
   the design hides them: nav and TOC follow the article instead. */
.bwp-docs > .bwp-metrics { grid-column: 1 / -1; margin: 0; }
.bwp-docs > .bwp-doc-nav { order: 2; }
.bwp-docs > .bwp-doc-toc { order: 3; }
@media (min-width: 1024px) { .bwp-docs { grid-template-columns: repeat(12, minmax(0, 1fr)); } .bwp-docs > .bwp-doc-nav { order: 0; grid-column: span 3; } .bwp-docs > .bwp-docarticle { grid-column: span 6; } .bwp-docs > .bwp-doc-toc { order: 0; grid-column: span 3; } }

.bwp-docarticle { min-width: 0; padding: 20px; border-radius: var(--wp--custom--radius--xl, 0.5rem); background: var(--wp--preset--color--surface-card); box-shadow: var(--wp--preset--shadow--xs); counter-reset: bwp-doc; }
.bwp-docarticle__title { margin: 0 0 20px; font-size: var(--wp--preset--font-size--headline-xl-mobile, 28px); line-height: 34px; font-weight: 700; letter-spacing: -0.025em; color: var(--wp--preset--color--on-surface); }
.bwp-docarticle__content > * + * { margin-top: 16px; }
.bwp-docarticle__content > :where(p, ul, ol) { margin-bottom: 0; }
.bwp-docarticle__content > p, .bwp-docarticle__content > :where(ul, ol) li { max-width: 36em; font-size: var(--wp--preset--font-size--prose, 16px); line-height: var(--wp--custom--typography--prose--line-height, 27px); color: var(--wp--preset--color--on-surface-variant); text-wrap: pretty; }
.bwp-docarticle__content > :where(ul, ol) { padding-left: 1.25rem; }
.bwp-docarticle__content > :where(ul, ol) li + li { margin-top: 4px; }
.bwp-docarticle__content > .bwp-callout { margin-top: 20px; }
.bwp-docarticle__content > .bwp-callout:first-child { margin-top: 0; }
.bwp-docarticle__content > h2 { display: flex; align-items: center; gap: 8px; margin-top: 34px; margin-bottom: 0; font-size: var(--wp--preset--font-size--headline-lg, 24px); line-height: 32px; font-weight: 600; letter-spacing: -0.025em; color: var(--wp--preset--color--on-surface); counter-increment: bwp-doc; scroll-margin-top: 80px; }
.bwp-docarticle__content > h2::before { content: counter(bwp-doc, decimal-leading-zero); flex: none; padding: 2px 8px; border-radius: var(--wp--custom--radius--base, 0.125rem); background: var(--wp--preset--color--surface-container-low); color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label-sm, 11px); line-height: 14px; font-weight: 500; letter-spacing: 0; }
.bwp-docarticle__content > h3 { margin-top: 24px; font-size: var(--wp--preset--font-size--headline-md, 18px); line-height: 24px; font-weight: 600; scroll-margin-top: 80px; }
.bwp-docarticle__content > pre.wp-block-code { margin-top: 14px; padding: 14px; border-radius: var(--wp--custom--radius--lg, 0.25rem); background: var(--wp--preset--color--surface-canvas, #fafafa); color: var(--wp--preset--color--on-surface); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--code-snippet, 12px); line-height: 1.625; overflow-x: auto; box-shadow: var(--wp--preset--shadow--xs); }
.bwp-docarticle__content > pre.wp-block-code code { font: inherit; }
.bwp-docarticle__content > :where(.wp-block-group.is-style-note, blockquote) { margin-top: 20px; padding: 14px 20px; border-radius: 4px; background: var(--wp--preset--color--surface-container-low); }
.bwp-docarticle__content > :where(p, ul, ol) a { color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 2px; }
.bwp-docarticle__content kbd { padding: 1px 5px; border-radius: 2px; background: var(--wp--preset--color--surface-container, #ededf9); font-family: var(--wp--preset--font-family--mono); font-size: 11px; }
.bwp-docarticle__updated { margin-top: 32px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label-sm, 11px); color: var(--wp--preset--color--text-muted, #71717a); }
.bwp-docarticle__updated::before { content: "Last updated "; }
.bwp-docarticle > .bwp-doc-feedback { margin-top: 14px; }

/* ── Docs: tables ─────────────────────────────────────────── */
/* Stitch docs "Escaping Functions Quick Matrix": a core/table inside the
   docs article (and blog post) — tinted header row, row hairlines, first
   column mono in primary colour, inline <code> chips. Scoped to the article
   content so this never touches core/table anywhere else on the site; the
   core table's cell borders are replaced by the design's row hairlines. */
.bwp-docarticle__content .wp-block-table, .bwp-article__content .wp-block-table { margin: 20px 0 0; overflow-x: auto; }
.bwp-docarticle__content table, .bwp-article__content table { width: 100%; border: 0; border-collapse: collapse; overflow: hidden; border-radius: var(--wp--custom--radius--xl, 0.5rem); background: var(--wp--preset--color--surface-container-low, #f3f3fe); font-size: var(--wp--preset--font-size--body-sm, 12px); line-height: 1.5; }
.bwp-docarticle__content thead, .bwp-article__content thead { border: 0; background: var(--wp--preset--color--surface-container-high, #e7e7f3); color: var(--wp--preset--color--on-surface, #191b23); font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: var(--wp--preset--font-size--label-sm, 11px); }
.bwp-docarticle__content .wp-block-table :is(th, td), .bwp-article__content .wp-block-table :is(th, td), .bwp-docarticle__content .wp-block-table thead, .bwp-article__content .wp-block-table thead { border: 0; }
.bwp-docarticle__content th, .bwp-article__content th { padding: 8px 12px; text-align: left; }
.bwp-docarticle__content tbody tr, .bwp-article__content tbody tr { border-top: 1px solid var(--wp--preset--color--surface-container-high, #e7e7f3); }
.bwp-docarticle__content tbody tr:hover, .bwp-article__content tbody tr:hover { background: var(--wp--preset--color--surface-card, #fff); }
.bwp-docarticle__content td, .bwp-article__content td { padding: 8px 12px; vertical-align: top; color: var(--wp--preset--color--on-surface-variant, #434655); }
.bwp-docarticle__content td:first-child, .bwp-article__content td:first-child { font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); color: var(--wp--preset--color--primary, #004ac6); font-weight: 500; }
.bwp-docarticle__content :where(td, th) :where(code, kbd), .bwp-article__content :where(td, th) :where(code, kbd) { padding: 1px 5px; border-radius: 2px; background: var(--wp--preset--color--surface-container, #ededf9); font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); font-size: 11px; }
@media (min-width: 768px) { .bwp-docarticle__content td:first-child, .bwp-article__content td:first-child { white-space: nowrap; } }

/* ── Account (Stitch 03) ──────────────────────────────────── */
.bwp-authpage { position: relative; padding: 64px 16px; background: radial-gradient(40rem 30rem at 0% 10%, rgb(0 74 198 / 0.04), transparent 70%), radial-gradient(36rem 28rem at 100% 90%, rgb(0 98 67 / 0.03), transparent 70%); }

/* ── Generic pages ───────────────────────────────────────── */
.bwp-page { padding-top: 32px; padding-bottom: 32px; }
.bwp-page--narrow { max-width: calc(48rem + 2 * var(--bwp-gutter)); }
.bwp-page__title { margin-bottom: 8px; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.025em; color: var(--wp--preset--color--on-surface); }
.bwp-prose { margin-top: 24px; padding: 24px; background: var(--wp--preset--color--surface-card); border-radius: 8px; box-shadow: var(--wp--preset--shadow--xs); }
@media (min-width: 768px) { .bwp-prose { padding: 32px; } }
.bwp-prose :where(h2) { font-size: 18px; line-height: 24px; margin: 32px 0 8px; }
.bwp-prose :where(h2):first-child { margin-top: 0; }
.bwp-prose :where(p, ul, ol, pre, details) { margin: 0 0 12px; }
.bwp-prose :where(p, li) { font-size: 13px; line-height: 1.625; color: var(--wp--preset--color--on-surface-variant); }
.bwp-prose :where(p, li) code { font-family: var(--wp--preset--font-family--mono); font-size: 12px; background: var(--wp--preset--color--surface-container-low); padding: 2px 6px; border-radius: 2px; }
.bwp-posts .wp-block-post-date { align-self: start; }
.bwp-404 { text-align: center; padding-top: 80px; padding-bottom: 80px; }
.bwp-404 .bwp-lead { margin-bottom: 24px; }
.bwp-404__actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
:where(code, pre, kbd, .bwp-eyebrow, .bwp-label) { font-variant-ligatures: none; }

/* Skip layout/paint for below-the-fold sections until they approach the viewport. */
.bwp-sections { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ── Homepage ────────────────────────────────────────────────────────────
 * Hero rhythm from Stitch homepage.html, scoped to the front page so the
 * archive/search heroes (which follow tools-collection.html) keep theirs:
 * pill mb-6, headline mb-4, search mb-6, category pills pb-2.
 */
.bwp-home .bwp-hero__pill {
	margin-bottom: var(--wp--preset--spacing--6, 1.5rem);
}

.bwp-home .bwp-hero__title {
	margin-bottom: var(--wp--preset--spacing--margin-mobile, 1rem);
}

.bwp-home .bwp-hero__actions {
	gap: var(--wp--preset--spacing--6, 1.5rem);
}

.bwp-home .bwp-hero__actions > :last-child {
	padding-bottom: var(--wp--preset--spacing--sm, 0.5rem);
}