/*
Theme Name: Origin Canvas
Theme URI: https://origin-blocks.github.io/origin-canvas/
Author: Origin
Author URI: https://github.com/origin-blocks
Description: Start closer to finished with a free WordPress block theme: templates, patterns and 12 style variations, ready to edit in the Site Editor.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.4.3
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: origin-canvas
Tags: blog, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, grid-layout, style-variations, threaded-comments, three-columns, translation-ready
*/

/* Baseline reset keeps browser defaults predictable until block styles take over. */
*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	min-height: 100vh;
}

ul,
ol {
	list-style: none;
}

/* Block list defaults override the global reset. */
ul.wp-block-list,
ol.wp-block-list,
.wp-block-list ul,
.wp-block-list ol {
	list-style-position: outside;
	padding-inline-start: var(--wp--preset--spacing--medium);
}

ul.wp-block-list,
.wp-block-list ul {
	list-style-type: disc;
}

ol.wp-block-list,
.wp-block-list ol {
	list-style-type: decimal;
}

/**
 * Comment bodies are freeform HTML with no layout container, so the global
 * margin + list-style resets above are not otherwise restored here.
 */
.wp-block-comment-content > * + * {
	margin-block-start: var(--wp--preset--spacing--medium);
}

.wp-block-comment-content ul,
.wp-block-comment-content ol {
	list-style-position: outside;
	padding-inline-start: var(--wp--preset--spacing--medium);
}

.wp-block-comment-content ul {
	list-style-type: disc;
}

.wp-block-comment-content ol {
	list-style-type: decimal;
}

/* Contain long unbreakable strings so they wrap inside the card. */
.wp-block-comment-content {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Preformatted/code wraps inside the card instead of overflowing. */
.wp-block-comment-content pre {
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

a {
	text-decoration: none;
}

/* Every link fades its colour in 200ms on hover and focus, the nav link and button timing.
   theme.json holds the hover colours but has no transition property. Nav links, buttons,
   chips and the other links with their own transition rule are more specific and keep it. */
@media (prefers-reduced-motion: no-preference) {
	a {
		transition: color 200ms ease;
	}
}

.origin-canvas-links-plain a {
	text-decoration: none;
}

mark.has-inline-color:not([style*="background" i]):not(.has-background):not([class*="-background-color"]) {
	background-color: transparent;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Form fields. Fields and a lone visible action are at least 44px tall, so the hit target
   does not depend on line height (#119). Buttons take the same floor from theme.json,
   styles.elements.button, which reaches every button block, search button and form submit. */
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast-5);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--regular);
	min-height: 44px;
	padding: var(--wp--preset--spacing--small-medium) var(--wp--preset--spacing--medium);
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
	select,
	textarea {
		transition: box-shadow 120ms ease, border-color 120ms ease;
	}
}

input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--contrast-3);
}

input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) {
	border-color: var(--wp--preset--color--contrast-5);
}

input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 var(--wp--preset--spacing--extra-small) color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
	outline: none;
}

input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):disabled,
select:disabled,
textarea:disabled {
	background-color: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--base-6);
	color: var(--wp--preset--color--contrast-2);
	cursor: not-allowed;
}

/* Checkboxes and radios. Checked, a checkbox is a primary fill with a white check and a radio
   is a primary border and dot: a tiny checked marker reads as a bullet, not an action. On
   focus-visible both take the field's border and ring, since they are form inputs (#119). */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast-5);
	cursor: pointer;
	height: 20px;
	margin: 0;
	position: relative;
	width: 20px;
}

@media (prefers-reduced-motion: no-preference) {
	input[type="checkbox"],
	input[type="radio"] {
		transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	}
}

input[type="checkbox"] {
	border-radius: var(--wp--custom--radius--small);
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:checked {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

input[type="radio"]:checked {
	border-color: var(--wp--preset--color--primary);
}

input[type="checkbox"]:checked::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	height: 9px;
	left: 6px;
	position: absolute;
	top: 3px;
	transform: rotate(45deg);
	width: 5px;
}

input[type="radio"]:checked::after {
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	height: 8px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 var(--wp--preset--spacing--extra-small) color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Dynamic post and archive support */
.origin-canvas-post-excerpt .wp-block-post-excerpt__more-link {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: 0.25rem;
	text-decoration: none;
}

.origin-canvas-post-excerpt .wp-block-post-excerpt__more-link::after {
	content: "\2192";
}

/* Featured image fallback */
.origin-canvas-featured-fallback {
	display: block;
	overflow: hidden;
}

.origin-canvas-featured-fallback--list {
	height: 100%;
	width: 100%;
}

.origin-canvas-featured-fallback--list .origin-canvas-featured-fallback__media {
	background-color: var(--wp--preset--color--base);
	background-image:
		linear-gradient(to left, var(--wp--preset--color--base-2) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 28%, var(--wp--preset--color--base) 72%) 100%);
}

.origin-canvas-featured-fallback--list img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.origin-canvas-featured-fallback__link {
	display: block;
	height: 100%;
	width: 100%;
}

.origin-canvas-featured-fallback__media {
	--origin-canvas-featured-fallback-edge: linear-gradient(180deg, transparent 0%, var(--wp--preset--color--base-2) 100%);
	background-color: var(--wp--preset--color--base);
	background-image:
		radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--wp--preset--color--primary) 42%, transparent) 0%, transparent 55%),
		radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--wp--preset--color--primary) 32%, transparent) 0%, transparent 62%),
		radial-gradient(circle at 48% 78%, color-mix(in srgb, var(--wp--preset--color--base-2) 82%, transparent) 0%, transparent 64%),
		var(--origin-canvas-featured-fallback-edge),
		linear-gradient(140deg, color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base-2) 72%, transparent) 100%);
	display: block;
	height: 100%;
	width: 100%;
}

/* Pagination */
.wp-block-query-pagination,
.wp-block-comments-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small);
	justify-content: center;
}

.wp-block-query-pagination-numbers,
.wp-block-comments-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small);
}

.wp-block-query-pagination .page-numbers,
.wp-block-comments-pagination .page-numbers {
	min-inline-size: var(--wp--preset--spacing--extra-large);
}

.wp-block-query-pagination .page-numbers.current,
.wp-block-comments-pagination .page-numbers.current {
	align-items: center;
	background: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--base);
	cursor: default;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	justify-content: center;
	min-inline-size: var(--wp--preset--spacing--extra-large);
	padding: 0.875rem 1.25rem;
}

.wp-block-query-pagination .page-numbers.dots,
.wp-block-comments-pagination .page-numbers.dots {
	align-items: center;
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
	cursor: default;
	display: inline-flex;
	min-inline-size: auto;
	padding: 0.875rem 0.5rem;
}

/**
 * Pagination number links stay plain (opt-in underline system). The selector applies in
 * both contexts, but only has an EFFECT in the block editor: core adds an underline to
 * .wp-block-query-pagination-numbers a solely via the block's editor.css. On the front end
 * the numbers are already undecorated (the global `a { text-decoration: none }` reset), so
 * this rule is a no-op there. Loaded into the editor iframe via add_editor_style('style.css').
 */
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-comments-pagination-numbers .page-numbers {
	text-decoration: none;
}

/**
 * Table default font size - must be in CSS because core/table block.json
 * rewrites theme.json selectors to target inner <table>, making wrapper
 * defaults impossible via theme.json.
 */
.wp-block-table > table {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table[class*="-font-size"] > table {
	font-size: inherit;
}

/**
 * Sticky header: when the header contains a sticky child, make the header
 * wrapper itself the sticky element (its containing block is the page flow, so
 * it can travel), admin-bar-aware, above page content. Front end only.
 */
body:not(.wp-admin) header:has(> .is-position-sticky) {
	position: sticky;
	top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 100;
}

@media (max-width: 600px) {
	body:not(.wp-admin) header:has(> .is-position-sticky) {
		top: 0;
	}
}

/**
 * Anchor targets land below the sticky chrome: the admin bar (core sets this part
 * itself, so it is only restated) plus the sticky header's measured height, which
 * assets/js/anchor-navigation.js keeps in --origin-canvas-sticky-header-height.
 * Mirrors the sticky-header rule above: at 600px and below the admin bar is not fixed.
 */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--origin-canvas-sticky-header-height, 0px));
}

@media (max-width: 600px) {
	html {
		scroll-padding-top: var(--origin-canvas-sticky-header-height, 0px);
	}
}

/**
 * TRANSITIONAL back-compat for the removed `display` font-family preset.
 * REMOVE: 1.5.0 at the earliest, and only if no Display-related report has
 * arrived since 1.3.0 shipped (the rules mirror current WordPress preset
 * output — re-check them if core changes how font-family presets are emitted).
 *
 * 1.3.0 dropped the `display` preset from theme.json: its stack was
 * byte-identical to `sans`, and matching by fontFamily string made the editor's
 * font control tick both entries. Content or global styles saved under earlier
 * versions may still reference it (block picks, or Display as a global font).
 * These two rules reproduce the exact CSS WordPress generated for the preset,
 * so that stored content keeps rendering Inter: the class rule out-ranks the
 * typography variations' heading rules exactly as before, and the var
 * definition keeps a global Display font resolving instead of falling through
 * to the browser default. Non-destructive — stored content is never touched;
 * loads in the editor canvas too via add_editor_style( 'style.css' ). Known
 * limitation: stylesheets loading after this one can override these rules at
 * equal specificity — deliberate targeting of a retired preset's internals is
 * treated as the customizer's intent.
 */
:root {
	--wp--preset--font-family--display: var(--wp--preset--font-family--sans);
}

.has-display-font-family {
	font-family: var(--wp--preset--font-family--display) !important;
}

/**
 * Letter spacing follows font size. theme.json holds the tokens
 * (settings.custom.letterSpacing). theme.json cannot attach a style to a font-size
 * preset, so these rules give the tokens to any block set at a preset from medium
 * up, paragraphs included.
 *
 * Zero specificity, so a letter spacing set on the block or in Global Styles wins.
 * Headings take their value through the variable, which elements.heading reads with
 * the base token as fallback. A size class sets the variable; a heading with no size
 * class takes it from its level, and the named blocks below take the token for the
 * size theme.json gives them. These rules set only the variable, never letter-spacing,
 * so a Global Styles heading letter spacing still replaces the one heading rule for
 * every level. The variable does not inherit: a heading inside a larger block keeps
 * its own value.
 */
@property --origin-canvas-letter-spacing {
	syntax: "*";
	inherits: false;
}

/* The element ladder: h1 48, h2 36, h3 30 are display; h4 24 large; h5 20 medium.
   h6 18 takes the base fallback. Only the variable is set, never letter-spacing. */
:where(h1, h2, h3) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--display);
}

:where(h4) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--large);
}

:where(h5) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--medium);
}

/* Headings sized off the ladder: theme.json sizes the comments title at large and the
   site title (an h1 when its level is set) at regular-plus; the reply title is
   regular-plus. A heading with a custom size keeps its level's token; the block's
   Letter spacing control is the way to change it. */
:where(.wp-block-comments-title) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--large);
}

:where(.wp-block-site-title, .comment-reply-title) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--base);
}

:where(.has-extra-large-font-size, .has-huge-font-size, .has-display-font-size, .has-display-xl-font-size, .has-display-2-xl-font-size) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--display);
	letter-spacing: var(--origin-canvas-letter-spacing);
}

:where(.has-large-font-size) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--large);
	letter-spacing: var(--origin-canvas-letter-spacing);
}

:where(.has-medium-font-size) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--medium);
	letter-spacing: var(--origin-canvas-letter-spacing);
}

/* Below medium a heading takes base, whatever its level. The variable only: body
   text at these sizes keeps normal letter spacing. */
:where(.has-extra-small-font-size, .has-small-font-size, .has-regular-font-size, .has-regular-plus-font-size) {
	--origin-canvas-letter-spacing: var(--wp--custom--letter-spacing--base);
}

/* The site title reads the variable only when it renders as a paragraph (level 0). An h1
   site title is a heading, so the one heading rule in theme.json, and a Global Styles
   "Headings" letter spacing, reach it. theme.json cannot scope a value by tag. */
:where(p.wp-block-site-title) {
	letter-spacing: var(--origin-canvas-letter-spacing);
}

/* Letter spacing inherits as a computed length, so small text inside one of the
   nodes above would take the larger size's spacing. Reset it to the body default. */
:where(.has-medium-font-size, .has-large-font-size, .has-extra-large-font-size, .has-huge-font-size, .has-display-font-size, .has-display-xl-font-size, .has-display-2-xl-font-size) :where(.has-extra-small-font-size, .has-small-font-size, .has-regular-font-size, .has-regular-plus-font-size) {
	letter-spacing: normal;
}

/* ==========================================================================
   Utilities

   Opt-in classes, applied through Additional CSS Classes, each named for the one
   job it does so any block can use it. See CLAUDE.md rule 6b.
   ========================================================================== */

/* A flex child that keeps its size. WordPress 7.0's Fixed width sets only the
   basis, so the item can still shrink; 7.1 saves Fixed as fixedNoShrink, which
   holds, but the theme supports 7.0. Pair it with Fixed (selfStretch "fixed"). */
.origin-canvas-no-shrink {
	flex-shrink: 0;
}

/* A Row whose children sit on a shared text baseline. Core aligns a flex row only
   top, center, bottom or stretch; aligning line boxes leaves glyphs of different
   sizes up to 6px apart. */
.origin-canvas-align-baseline.is-layout-flex {
	align-items: baseline;
}

/* Text whose lines break to near-equal lengths, so a heading never ends on one
   word. No block support or theme.json property sets text-wrap. */
.origin-canvas-text-balance {
	text-wrap: balance;
}

/* A dot texture on a section: 1px dots at a 20px pitch, contrast at 8% on a
   light ground, base-2 at 10% on the theme's dark grounds (ODS "Dot texture").
   Apply one class: even dots, fade to centre (strongest at the top and sides), or
   fade down (fading out down the section). theme.json cannot hold a palette-aware
   tiled dot, and a gradient set in the block's Background keeps fixed colours.
   The dots sit on a layer under the content, so a fade masks the dots only, and a
   background colour, gradient or image set on the block still shows beneath. */
.origin-canvas-dots,
.origin-canvas-dots-fade-centre,
.origin-canvas-dots-fade-down {
	--origin-canvas-dots-ink: var(--wp--preset--color--contrast);
	--origin-canvas-dots-alpha: 8%;
	isolation: isolate;
	position: relative;
}

.origin-canvas-dots::before,
.origin-canvas-dots-fade-centre::before,
.origin-canvas-dots-fade-down::before {
	background-image: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--origin-canvas-dots-ink) var(--origin-canvas-dots-alpha), transparent) 1px, transparent 1.5px);
	background-size: 20px 20px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Fade to centre, measured from Knock's hero: about 20% at the top edge, 7% at the
   sides and 3–5% in the middle. The two masks multiply. */
.origin-canvas-dots-fade-centre {
	--origin-canvas-dots-alpha: 22.5%;
}

.origin-canvas-dots-fade-centre::before {
	mask-composite: intersect;
	mask-image:
		linear-gradient(to bottom, #000 0, rgb(0 0 0 / 35%) 120px, rgb(0 0 0 / 35%) 100%),
		radial-gradient(ellipse 55% 80% at 50% 50%, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 55%) 50%, #000 100%);
}

/* Fade down, measured from Warp's hero: in over the top 19%, full (about 7%) to
   42%, then out past the bottom edge. */
.origin-canvas-dots-fade-down::before {
	mask-image: linear-gradient(to bottom, transparent 0%, #000 19%, #000 42%, transparent 138%);
}

/* The theme's dark grounds: the custom.dark.bg fill the dark patterns use, and the
   contrast palette fill. Every form peaks at the ruled 10%; a fade keeps its
   masks, so fade to centre scales from 10% at the top edge. Content saved before the
   #116 rename still holds the old Text Heading fill class; the twin rules in
   assets/css/palette-aliases.css match it. */
:is(.origin-canvas-dots, .origin-canvas-dots-fade-centre, .origin-canvas-dots-fade-down):is(.has-contrast-background-color, [style*="--wp--custom--dark--bg"]) {
	--origin-canvas-dots-ink: var(--wp--preset--color--base-2);
	--origin-canvas-dots-alpha: 10%;
}

/* ==========================================================================
   Pattern CSS

   Only what core cannot do for a pattern (CLAUDE.md rule 6b). One section per
   pattern, named for it. These rules load on every page, so keep them small.
   ========================================================================== */

/**
 * Pattern Showcase: a full-bleed 12-column grid of wash tiles.
 *
 * Core cannot hold this on WordPress 7.0: it has no 12/6/2 column breakpoints and no
 * control for layered color-mix gradients. Colors route through palette tokens so
 * the tiles reskin with style variations.
 */
.origin-canvas-pattern-board {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	margin-top: 56px;
	padding-inline: clamp(20px, 3.5vw, 48px);
}

.origin-canvas-wash-tile {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--medium);
	/* !important so the editor-placeholder-suppressing inline min-height:240px
	   (on the block, see pattern) does not flatten the responsive clamp on the
	   front end. Inline styles beat plain stylesheet rules; !important wins back. */
	min-height: clamp(240px, 26vw, 320px) !important;
	overflow: hidden;
}

.origin-canvas-wash-hero {
	background-image:
		radial-gradient(70% 80% at 22% 20%, color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent), transparent 60%),
		radial-gradient(60% 70% at 84% 86%, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent), transparent 62%),
		linear-gradient(150deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base-3) 100%);
	grid-column: span 5;
}

.origin-canvas-wash-features {
	background-image:
		radial-gradient(65% 75% at 80% 22%, color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent), transparent 60%),
		linear-gradient(160deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base-3) 100%);
	grid-column: span 4;
}

.origin-canvas-wash-testimonial {
	background-image:
		radial-gradient(72% 72% at 24% 26%, color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent), transparent 58%),
		linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base-4) 100%);
	grid-column: span 3;
}

.origin-canvas-wash-pricing {
	background-image:
		radial-gradient(60% 70% at 26% 78%, color-mix(in srgb, var(--wp--preset--color--primary) 13%, transparent), transparent 56%),
		linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base-3) 100%);
	grid-column: span 4;
}

.origin-canvas-wash-cta {
	background-image:
		radial-gradient(72% 80% at 80% 30%, color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent), transparent 60%),
		radial-gradient(60% 70% at 20% 84%, color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent), transparent 58%),
		linear-gradient(135deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base-3) 100%);
	grid-column: span 4;
}

.origin-canvas-wash-editor {
	background-image:
		radial-gradient(60% 70% at 50% 24%, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent), transparent 60%),
		linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base-3) 100%);
	grid-column: span 4;
}

@media (max-width: 1100px) {
	.origin-canvas-pattern-board {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.origin-canvas-wash-hero,
	.origin-canvas-wash-editor {
		grid-column: span 6;
	}

	.origin-canvas-wash-features,
	.origin-canvas-wash-testimonial,
	.origin-canvas-wash-pricing,
	.origin-canvas-wash-cta {
		grid-column: span 3;
	}
}

@media (max-width: 640px) {
	.origin-canvas-pattern-board {
		gap: 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 40px;
	}

	.origin-canvas-wash-hero,
	.origin-canvas-wash-editor {
		grid-column: span 2;
	}

	.origin-canvas-wash-features,
	.origin-canvas-wash-testimonial,
	.origin-canvas-wash-pricing,
	.origin-canvas-wash-cta {
		grid-column: span 1;
	}

	.origin-canvas-wash-tile {
		min-height: 170px !important;
	}
}

/**
 * Hidden Sidebar: the rail in parts/sidebar.html.
 *
 * Only what the blocks cannot set. core/search has no padding control, so the
 * field and button take tighter padding to suit a 373px rail and sit on the 44px
 * floor; the 404 search keeps the default size. Latest Posts has no date controls. The list resets, the
 * featured image gap and the block title cover blocks an owner may add to the
 * rail in the Site Editor: Categories, Archives, Latest Comments, and Latest
 * Posts with images on.
 */
.origin-canvas-sidebar .wp-block-categories-list,
.origin-canvas-sidebar .wp-block-archives-list,
.origin-canvas-sidebar .wp-block-latest-comments {
	list-style: none;
	margin: 0;
	padding: 0;
}

.origin-canvas-sidebar .wp-block-latest-posts__featured-image {
	margin-bottom: var(--wp--preset--spacing--extra-small);
}

.origin-canvas-sidebar .wp-block-latest-posts__post-title {
	display: block;
}

/* Shim, sunset 2.0.0. The category rows keep their count at its size with
   origin-canvas-no-shrink since the release after 1.3.1. Rails saved from 1.3.1 carry
   no such class on the count: this keeps it from shrinking. The pattern still carries
   origin-canvas-sidebar-categories; flex: none adds nothing to no-shrink there. */
.origin-canvas-sidebar-categories .wp-block-term-count {
	flex: none;
}

.origin-canvas-search-compact input.wp-block-search__input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
	padding: 8px 12px;
}

.origin-canvas-search-compact .wp-block-search__button {
	padding: 8px 20px;
}

.origin-canvas-sidebar .wp-block-latest-posts__post-date,
.origin-canvas-sidebar .wp-block-latest-comments__comment-date {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--extra-small);
	font-weight: 400;
	margin-top: var(--wp--preset--spacing--extra-small);
}

/* When the Sidebar part draws its own inline left border, the template's divider
   and stacked rule hide, so the rail shows its own rules only. The part's border
   is untouched. !important matches core's visibility rules. */
.wp-block-group:has(> aside > .origin-canvas-sidebar[style*="border-left-width:1px"]) > .origin-canvas-sidebar-divider,
.wp-block-group:has(> .wp-block-group > aside > .origin-canvas-sidebar[style*="border-left-width:1px"]) > .origin-canvas-sidebar-rule {
	display: none !important;
}

/* The same bordered part, stacked on phones, takes its top rule and spacing. */
@media (max-width: 782px) {
	.origin-canvas-sidebar[style*="border-left-width:1px"] {
		border-top: 1px solid var(--wp--preset--color--base-5);
		margin-top: var(--wp--preset--spacing--huge);
		padding-top: var(--wp--preset--spacing--huge);
	}
}

/* The sidebar templates stack at 782px as well. Core's Hide setting treats 782px
   as tablet while core Columns stack only below it, so without this the phone
   rule would show beside side-by-side columns at that one width. */
@media (width: 782px) {
	.wp-block-columns:has(> .wp-block-column > .wp-block-group > .wp-block-group > .origin-canvas-sidebar-divider) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:has(> .wp-block-column > .wp-block-group > .wp-block-group > .origin-canvas-sidebar-divider) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* The section headings are small uppercase labels: ODS chrome label tracking, 0.06em,
   and 600 weight. Low specificity, so a heading's own Typography settings still
   win; rule 7 keeps these values off the blocks themselves. */
.origin-canvas-sidebar :where(h2) {
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* A site with no tags: core's Tag Cloud renders nothing, so the Tags group holds
   only its heading. Hide the group rather than show a heading with nothing under it. */
.origin-canvas-sidebar-tags:has(> h2:only-child) {
	display: none;
}

/**
 * Token System: pink bullet markers and the theme.json tokens panel on the
 * landing page. Every fill is a palette token or an ink-tinted color-mix, so the
 * panel tracks style variations.
 */
.origin-canvas-bullet-mark {
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--small);
	flex-shrink: 0;
	height: 6px;
	width: 6px;
}

/* Radius clipping for the panel's square-cornered bar (no JSON overflow analogue). */
.origin-canvas-tokens-panel {
	overflow: hidden;
}

.origin-canvas-token-palrow {
	display: flex;
	gap: 10px;
}

.origin-canvas-token-palrow > .wp-block-group {
	flex: 1;
}

.origin-canvas-token-sw {
	border-radius: var(--wp--custom--radius--small);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	height: 34px;
}

.origin-canvas-token-scale {
	align-items: flex-end;
	display: flex;
	gap: 10px;
}

.origin-canvas-token-bar {
	background: var(--wp--preset--color--base-3);
	border-radius: var(--wp--custom--radius--small) var(--wp--custom--radius--small) 0 0;
	width: 26px;
}

.origin-canvas-token-bar--1 {
	height: 14px;
}

.origin-canvas-token-bar--2 {
	height: 22px;
}

.origin-canvas-token-bar--3 {
	height: 32px;
}

.origin-canvas-token-bar--4 {
	height: 44px;
}

.origin-canvas-token-bar--5 {
	height: 58px;
}

.origin-canvas-token-bar--6 {
	height: 74px;
}

.origin-canvas-token-bar--7 {
	height: 92px;
}

/**
 * Template Showcase: schematic template cards on the landing page, drawn with
 * empty groups. Ink-tinted color-mix fills track the active style variation.
 */
.origin-canvas-wire {
	background: var(--wp--preset--color--base-3);
	border-radius: var(--wp--custom--radius--medium);
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 168px;
	padding: 13px;
}

.origin-canvas-wire-head {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: var(--wp--custom--radius--small);
	flex: none;
	height: 18px;
}

.origin-canvas-wire-body {
	display: flex;
	flex: 1;
	gap: 8px;
	min-height: 0;
}

.origin-canvas-wire-body--center {
	justify-content: center;
}

.origin-canvas-wire-body--col {
	flex-direction: column;
}

.origin-canvas-wire-body--grid {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.origin-canvas-wire-blk {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--small);
	flex: 1;
}

.origin-canvas-wire-blk--alt {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.origin-canvas-wire-blk--w60 {
	flex: none;
	width: 60%;
}

.origin-canvas-wire-blk--grow2 {
	flex: 2;
}

/**
 * Hero Canvas: the landing hero backdrop. Layered radials (cool top glow +
 * faint pink corner) over a subtle 48px grid. A plain pattern class (not a
 * registered block style), applied only by hero-canvas, so it stays out of the
 * editor's group Styles panel.
 */
.wp-block-group.origin-canvas-canvas-grid {
	background-color: var(--wp--preset--color--base);
	background-image:
		linear-gradient(180deg, transparent 42%, var(--wp--preset--color--base) 97%),
		radial-gradient(120% 75% at 50% -18%, var(--wp--preset--color--base-3) 0%, transparent 60%),
		radial-gradient(38% 50% at 88% 2%, color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent) 0%, transparent 70%),
		linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent) 1px, transparent 1px);
	background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
	background-size: cover, cover, cover, 48px 48px, 48px 48px;
	overflow: hidden;
	position: relative;
}

/**
 * Style Variations: swatch circles, preset dots and specimen fonts on the landing
 * page. The inset rings are an ink-tinted color-mix, so they track the active
 * variation. The specimen fonts are not theme presets.
 */
.origin-canvas-sw {
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	height: 20px;
	width: 20px;
}

.origin-canvas-preset-dot {
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	flex: none;
	height: 38px;
	width: 38px;
}

.origin-canvas-specimen-serif {
	font-family: "Source Serif 4", Georgia, serif;
}

.origin-canvas-specimen-grotesk {
	font-family: "Space Grotesk", var(--wp--preset--font-family--sans);
}

.origin-canvas-specimen-dmsans {
	font-family: "DM Sans", var(--wp--preset--font-family--sans);
}

/**
 * Landing rows shared by Style Variations, Token System and Template Showcase:
 * the monospace micro-labels.
 */
.origin-canvas-mono {
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}


/**
 * Header Marketing, below 600px: one row.
 *
 * The nav has collapsed to the hamburger. The brand word, both pills and the
 * hamburger do not fit a phone width on one row, so the ghost "View demo" is hidden
 * (by the button's own Hide setting, up to 782px) and the site title drops to
 * screen-reader-only while the site logo carries the brand; the title link is still a tab stop, so it un-clips while focused. A site
 * with no logo keeps its title. "Download" stays, on the theme's 44px button floor
 * (theme.json), and the hamburger packs beside it. Child
 * combinators keep the hamburger rule off the overlay's own Navigation block.
 */
@media (max-width: 599px) {
	.origin-canvas-header-marketing .wp-block-group:has(> .wp-block-site-logo) > .wp-block-site-title:not(:focus-within) {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.origin-canvas-header-marketing > .wp-block-group > .wp-block-navigation {
		margin-left: auto;
	}
}

/**
 * Header With Button, below 600px. Below core's
 * breakpoint the nav is only the open button; `order` sends it last so the row
 * reads [title] … [button][open], with the open button at the gutter edge on the
 * axis the overlay ✕ is tuned to. `margin-left: auto` on the
 * buttons packs the button beside it.
 */
@media (max-width: 599px) {
	.origin-canvas-header-with-button > .wp-block-group > .wp-block-navigation {
		order: 1;
	}

	.origin-canvas-header-with-button > .wp-block-group > .wp-block-buttons {
		margin-left: auto;
	}
}

/**
 * Product Grid: the status chip and the live-product dot on the landing page's
 * product cards. The Paragraph block has no border support, so the pill lives
 * here. The chip is borderless: a 1px hairline measured 1.28:1 against white, so
 * the pill reads by shape and the text carries the contrast (about 6.7:1). The dot
 * is shape only: each card sets the product's own hue on the block, so it does
 * not track the primary color.
 */
.origin-canvas-status-chip {
	background-color: var(--wp--preset--color--base-3);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-2);
	font-weight: 500;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	text-transform: uppercase;
	width: fit-content;
}

.origin-canvas-status-chip--dark {
	background-color: rgb(255 255 255 / 10%);
	color: rgb(255 255 255 / 85%);
}

.origin-canvas-status-dot {
	border-radius: 999px;
	flex: none;
	height: 8px;
	width: 8px;
}

/**
 * Post Loop Grid: cards in a row share one height, and each card's text panel
 * fills to the bottom. Grid rows already stretch the post; the post has no layout
 * of its own, so it becomes a column here. A Stack inside the post cannot do it:
 * the featured image, sized only by its aspect ratio, collapses to 0 there.
 */
.origin-canvas-posts--stretch .wp-block-post {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.origin-canvas-posts--stretch .wp-block-post > .wp-block-group {
	flex: 1;
}

/**
 * Post Loop List: the card clips its image to the card's radius. The corners the
 * image needs change when the columns stack, so a per-corner radius on the image
 * cannot do it.
 */
.origin-canvas-post-list-card {
	overflow: hidden;
}

/**
 * Features Numbered: the step numerals keep one width per digit, so a column of
 * them lines up. Core has no numeral-spacing control.
 */
.origin-canvas-step-numeral {
	font-variant-numeric: tabular-nums;
}

/**
 * Left-sidebar template: the sidebar follows the content in the HTML, as on the
 * right-sidebar templates, so reading and focus order are content first
 * everywhere and phones stack content above the sidebar. On desktop the row is
 * reversed to put the sidebar on the left. Core Columns have no order control.
 */
@media (min-width: 783px) {
	.wp-block-columns.origin-canvas-sidebar-left {
		flex-direction: row-reverse;
	}
}

/**
 * Features Checklist: one list of eight in two columns, read across the rows as on
 * the board, and in one column on phones. The List block has no column or gap
 * control. The grid's own row gap replaces the 8px between items that Check
 * Primary and Check Neutral add, so both columns share one top and one row rhythm.
 */
ul.wp-block-list.origin-canvas-features-checklist-list {
	display: grid;
	gap: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--extra-large);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(16rem, (100% - var(--wp--preset--spacing--extra-large)) / 2)), 1fr));
}

ul.wp-block-list:is(.is-style-origin-canvas-list-check, .is-style-origin-canvas-list-check-neutral).origin-canvas-features-checklist-list > li + li {
	margin-top: 0;
}

/**
 * Pricing Grid: the featured tier's 2px top line sits 1px higher, so its bottom
 * edge lines up with the 1px hairlines over the other tiers and the content below
 * does not move. The Column block has no margin control.
 */
.wp-block-column.origin-canvas-pricing-simple-featured {
	margin-top: -1px;
}

/**
 * CTA Newsletter: when the columns stack on phones, the Subscribe button centers
 * under the centered text; on desktop it stays at the left of its column, beside
 * the field. The Buttons block has one justification for every width. 781px is
 * where core Columns stack.
 */
@media (max-width: 781px) {
	.wp-block-buttons.is-layout-flex.origin-canvas-cta-newsletter-action {
		justify-content: center;
	}
}

/**
 * CTA Split: when the columns stack on phones, the Subscribe button moves to the
 * left under the left-aligned text; on desktop it stays at the right of its
 * column. The Buttons block has one justification for every width. 781px is
 * where core Columns stack.
 */
@media (max-width: 781px) {
	.wp-block-buttons.is-layout-flex.origin-canvas-cta-inline-action {
		justify-content: flex-start;
	}
}