/**
 * Kumiko supplementary styles
 *
 * theme.json owns colour, type and spacing. Everything here is something
 * theme.json genuinely cannot do: pseudo-elements, the lattice motif,
 * sticky/blurred header chrome, hover transitions and block style variations.
 */

/*
 * A load marker. motion.js reads this to tell whether THIS stylesheet actually
 * arrived. Checking a --wp--preset--* variable is not good enough: those are
 * printed inline from theme.json and are present even when this file 404s.
 */
:root {
	--kumiko-css-loaded: 1;
}

/* ---------------------------------------------------------------------------
 * 1. Base refinements
 * ------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
	/*
	 * `clip`, not `hidden`. `overflow-x: hidden` forces overflow-y to `auto`,
	 * which makes body a scroll container and silently breaks the sticky
	 * header. `clip` contains stray horizontal overflow without that side
	 * effect. Older Safari ignores it and simply does not clip, acceptable,
	 * since wide blocks already scroll inside their own containers.
	 */
	overflow-x: clip;
}

/* Optical fix: the display serif reads heavy at large sizes on dark ground. */
h1, h2, h3,
.wp-block-post-title {
	font-variant-ligatures: common-ligatures;
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-soft);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Skip link, visible only when focused. */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: 6px;
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 1b. Motion
 *
 * The reveal is a fade and a short rise. That is a CSS transition's job, so
 * CSS does it: the compositor handles it, there is no per-frame JavaScript for
 * thirty-odd elements, and it cannot break on a library's API details. The
 * script's only role is to add `.is-revealed` at the right moment.
 *
 * `.kumiko-motion` is added by the inline bootstrap in functions.php only when
 * JavaScript is available and reduced motion is NOT requested, so nothing is
 * ever hidden unless something is guaranteed to reveal it.
 * ------------------------------------------------------------------------- */

/*
 * NOTE on the :not() below, do not remove it.
 *
 * `[data-kumiko-reveal]` matches group containers too, because their value is
 * the string "group". Hiding the container while only ever revealing its
 * CHILDREN leaves the whole section at opacity 0 with nothing able to bring it
 * back: a parent at zero opacity hides its children whatever their own opacity
 * says. Group containers must never be hidden; only their children animate.
 */
.kumiko-motion [data-kumiko-reveal]:not([data-kumiko-reveal="group"]),
.kumiko-motion [data-kumiko-reveal="group"] > *,
.kumiko-motion [data-kumiko-hero-eyebrow],
.kumiko-motion [data-kumiko-hero] h1,
.kumiko-motion [data-kumiko-hero-lede],
.kumiko-motion [data-kumiko-hero-actions],
.kumiko-motion [data-kumiko-hero-figure] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.62s cubic-bezier(0.22, 0.7, 0.3, 1),
		transform 0.62s cubic-bezier(0.22, 0.7, 0.3, 1);
	will-change: opacity, transform;
}

/* The hero figure travels a little further, the eyebrow a little less. */
.kumiko-motion [data-kumiko-hero-figure] {
	transform: translateY(34px) scale(0.988);
	transition-duration: 0.98s;
}

.kumiko-motion [data-kumiko-hero-eyebrow] {
	transform: translateY(10px);
	transition-duration: 0.5s;
}

.kumiko-motion [data-kumiko-reveal]:not([data-kumiko-reveal="group"]).is-revealed,
.kumiko-motion [data-kumiko-reveal="group"] > .is-revealed,
.kumiko-motion [data-kumiko-hero-eyebrow].is-revealed,
.kumiko-motion [data-kumiko-hero] h1.is-revealed,
.kumiko-motion [data-kumiko-hero-lede].is-revealed,
.kumiko-motion [data-kumiko-hero-actions].is-revealed,
.kumiko-motion [data-kumiko-hero-figure].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* The hero lattice fades up under the timeline; give it a variable to drive. */
.kumiko-motion [data-kumiko-hero].kumiko-lattice::before {
	opacity: var(--kumiko-lattice-o, 0);
	transition: opacity 1.4s ease;
}

.kumiko-motion [data-kumiko-hero].kumiko-lattice.is-revealed::before {
	opacity: 0.5;
}

/* Safety net: once the script reports ready, nothing may stay invisible for
   want of a trigger that never fired. */
.kumiko-motion-ready [data-kumiko-hero].kumiko-lattice::before {
	opacity: var(--kumiko-lattice-o, 0.5);
}

/* Header condense, toggled by motion.js. */
.wp-site-blocks > header.wp-block-template-part.is-scrolled::before {
	background-color: rgba(10, 10, 11, 0.88);
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled {
	border-bottom-color: rgba(201, 164, 124, 0.22);
}

.wp-site-blocks > header.wp-block-template-part {
	transition: border-color 0.3s ease;
}

/* ---------------------------------------------------------------------------
 * 2. The lattice motif
 *
 * A kumiko panel is a triangular grid of interlocking strips. Three sets of
 * hairlines at 60deg to each other reproduce the underlying asanoha framing
 * without shipping an image.
 * ------------------------------------------------------------------------- */

.kumiko-lattice {
	position: relative;
	isolation: isolate;
}

.kumiko-lattice::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		repeating-linear-gradient(60deg, rgba(201, 164, 124, 0.10) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(-60deg, rgba(201, 164, 124, 0.10) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(0deg, rgba(201, 164, 124, 0.07) 0 1px, transparent 1px 55px);
	-webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 0%, transparent 78%);
}

/* Corner-anchored variant for section headers. */
.kumiko-lattice--corner::before {
	opacity: 0.42;
	-webkit-mask-image: radial-gradient(ellipse 55% 90% at 100% 50%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 55% 90% at 100% 50%, #000 0%, transparent 72%);
}

/* A single hairline rule with a tan segment, used under eyebrows. */
.kumiko-rule {
	position: relative;
}

.kumiko-rule::after {
	content: "";
	display: block;
	width: 52px;
	height: 2px;
	margin-top: 1.25rem;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), transparent);
}

.kumiko-rule.has-text-align-center::after {
	margin-inline: auto;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--primary), transparent);
}

/* ---------------------------------------------------------------------------
 * 3. Header chrome
 * ------------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid rgba(244, 231, 218, 0.08);
}

/*
 * The translucent blur lives on a pseudo-element, NOT on the header itself.
 *
 * `backdrop-filter` makes an element a containing block for `position: fixed`
 * descendants. With it on the header, the mobile navigation overlay, which is
 * fixed and expects to cover the viewport, was instead confined to the header
 * bar, so page content sat on top of the open menu. Putting the filter on
 * ::before keeps the visual and lets the overlay escape to the viewport.
 */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(10, 10, 11, 0.72);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
	transition: background-color 0.3s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-site-blocks > header.wp-block-template-part::before {
		background-color: var(--wp--preset--color--base);
	}
}

/*
 * Logo.
 *
 * The mark is the real artwork, split into lattice cells so it can assemble.
 * The wordmark stays a raster image so the typeface is exactly the brand's.
 * Height drives everything and width follows, so nothing can stretch.
 */

/*
 * One number controls the lockup. The mark and the wordmark both read their
 * height from --kumiko-logo-h, so they cannot drift apart: changing the logo
 * size means editing a single value here, not three declarations that have to
 * be kept in agreement.
 */
.kumiko-logo {
	--kumiko-logo-h: 45px;
	display: inline-flex;
	align-items: center;
	gap: 0.42em;
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
	text-decoration: none;
	color: var(--wp--preset--color--cream);
}

.kumiko-logo--footer {
	--kumiko-logo-h: 34px;
}

/*
 * Height drives both, width follows from the intrinsic ratio, and the ratio is
 * pinned as well. Nothing sets both dimensions, so neither part can stretch.
 * The selectors carry .kumiko-logo so they outrank any generic image rule
 * regardless of stylesheet order.
 */
.kumiko-logo .kumiko-mark,
.kumiko-logo .kumiko-mark--pieces {
	display: block;
	height: var(--kumiko-logo-h);
	width: auto;
	max-width: none;
	aspect-ratio: 142 / 160;
	border-radius: 0;
}

.kumiko-logo .kumiko-logo-text {
	display: block;
	height: var(--kumiko-logo-h);
	width: auto;
	max-width: none;
	aspect-ratio: 643 / 171;
	object-fit: contain;
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Mark assembly
 *
 * The mark is set piece by piece, the way a kumiko panel is: the four frame
 * members first, then every lattice piece pushed into its opening in turn,
 * filling outward from the centre.
 *
 * Two nested elements per piece. The outer <i> holds the clip and never moves,
 * so it behaves as a fixed opening in the panel. The inner <b> carries the
 * artwork and slides into it. Moving the outer element would drag the opening
 * along too and read as a wipe.
 *
 * Pure CSS, delays baked into the markup, so it runs before any script parses.
 * ------------------------------------------------------------------------- */

.kumiko-mark--pieces {
	position: relative;
	/* Sizing comes from the .kumiko-logo rule above; only layout here. */
	overflow: hidden; /* pieces overshoot the panel before they seat */
}

.kumiko-mark--pieces > i {
	position: absolute;
	inset: 0;
	display: block;
}

.kumiko-mark--pieces > i > b {
	position: absolute;
	inset: 0;
	display: block;
	background-image: var(--mark);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	opacity: 0;
	transform: translate(var(--x), var(--y));
	animation: kumiko-seat 0.42s cubic-bezier(0.18, 0.86, 0.31, 1) var(--d) forwards;
}

/*
 * The piece is already opaque a third of the way in, so most of what you see is
 * travel and seating rather than a fade. A pure fade would read as the panel
 * appearing; this reads as it being built.
 */
@keyframes kumiko-seat {
	35% {
		opacity: 1;
	}

	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/*
 * Reduced motion, or no animation support: the finished panel at once. The
 * resting values are restated rather than relying on the keyframe landing,
 * because `animation: none` alone would strand every piece offset and invisible.
 */
@media (prefers-reduced-motion: reduce) {
	.kumiko-mark--pieces > i > b {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Navigation submenus inherit the dark surface rather than the WP default. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.4rem;
	box-shadow: var(--wp--preset--shadow--lifted);
	min-width: 230px;
}

.wp-block-navigation .wp-block-navigation__submenu-container li a {
	border-radius: 6px;
	padding: 0.55rem 0.75rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container li a:hover {
	background-color: rgba(201, 164, 124, 0.12);
}

/* ---------------------------------------------------------------------------
 * Mobile overlay menu
 *
 * When open it must cover the page completely and nothing may show through or
 * be reachable underneath. Three things are needed for that, and all three are
 * stated explicitly rather than inherited, because a menu that is merely
 * *mostly* on top is worse than one that is obviously broken.
 * ------------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	/* 1. Cover the viewport, not just the header it is nested in. */
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;

	/* 2. Be genuinely opaque. A translucent overlay over a dark page still
	      shows moving content behind it while scrolling. */
	background-color: var(--wp--preset--color--base) !important;

	/* 3. Sit above everything. See the .has-modal-open rule further down: the
	      header's own stacking context has to be dropped for this to apply at
	      the page level rather than only within the header. */
	z-index: 100001;

	padding-top: var(--wp--preset--spacing--60);

	/* A long menu must scroll inside itself, and must not chain that scroll to
	   the page underneath once it reaches the end. */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
}

/* Submenus inside the overlay are inline lists, not floating cards. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 1.05rem;
	color: var(--wp--preset--color--muted);
}

/*
 * Closed state, stated here rather than borrowed from core.
 *
 * Every rule above describes the menu once it is OPEN. The closed state, and
 * the placement of the close button, came from core's navigation stylesheet,
 * which is a conditional asset: `should_load_separate_core_block_assets` means
 * it is enqueued only when the block is detected, and it ships as a <link> on
 * some pages and inlined on others. If it ever fails to arrive there is no
 * closed state at all, so every submenu unfolds into the page and drops on top
 * of the hero, with no overlay background behind it. A navigation menu is not
 * something to leave depending on that, so the theme states it itself. These
 * rules match core's, and are harmless duplicates when core's CSS is present.
 */
@media (max-width: 599px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100002;
	color: var(--wp--preset--color--cream);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

/* The hamburger must clear the header's blurred pseudo-element. The close
   button is positioned by the rule above, which is where its own z-index and
   colour live. */
.wp-block-navigation__responsive-container-open {
	position: relative;
	z-index: 100002;
	color: var(--wp--preset--color--cream);
}

/*
 * ...but it must not clear the overlay. Core only hides the hamburger at 600px
 * and up, where the overlay is not in play; below that it stays in the document
 * and is meant to be buried under the open menu. The z-index above defeats
 * that, so it surfaced on top of the overlay next to the close button, two
 * controls for the same menu at the same corner. Hide it outright while the
 * menu is open, which also keeps it out of the tab order.
 */
.has-modal-open .wp-block-navigation__responsive-container-open {
	display: none;
}

/*
 * RAISE the header while the menu is open. Do not drop it.
 *
 * This rule previously set `z-index: auto` here, on the reasoning that removing
 * the header's stacking context would let the overlay's own z-index apply at
 * page level. That reasoning was wrong: `position: sticky` creates a stacking
 * context on its own, in every current browser, whatever the z-index says. The
 * header is sticky, so the overlay nested inside it can never escape, and its
 * `z-index: 100001` only ever competes with the header's siblings.
 *
 * Setting `auto` therefore did not free the overlay, it only surrendered the
 * header's z-index: 1000. Every section on the page is `.kumiko-lattice`, which
 * is `position: relative`, so with the header at `auto` each section became a
 * positioned, z-index: auto box painting after the header in DOM order, i.e.
 * ON TOP of it. That is invisible on a normal page, because a section paints no
 * background of its own, but with the menu open it put the hero's text straight
 * over an opaque overlay: menu and page legible at once, which read as an
 * overlay that had no background at all.
 *
 * Since the overlay cannot leave the header's stacking context, the header is
 * what has to clear the page, so it goes above everything while a modal is
 * open. WordPress puts `.has-modal-open` on the document element (confirmed in
 * the navigation block's view module) for exactly this kind of adjustment.
 */
.has-modal-open .wp-site-blocks > header.wp-block-template-part {
	z-index: 100000;
}

/* Nothing behind the overlay should be reachable, including by scroll. */
.has-modal-open {
	overflow: hidden;
}

/*
 * In-page anchors land under the sticky header without this. It matters more
 * now that the menu closes on click: tapping an anchor in the overlay scrolls
 * straight to a heading that would otherwise be hidden behind the header.
 */
:where(.wp-site-blocks) [id] {
	scroll-margin-top: 5.5rem;
}

/* ---------------------------------------------------------------------------
 * 4. Block style variations
 * ------------------------------------------------------------------------- */

/* Card, a bordered surface panel that lifts on hover. */
.wp-block-group.is-style-kumiko-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.28s ease,
		background-color 0.28s ease;
}

.wp-block-group.is-style-kumiko-card:hover {
	transform: translateY(-3px);
	border-color: rgba(201, 164, 124, 0.45);
	background-color: var(--wp--preset--color--surface-raised);
}

/* Quiet card, no hover, for reference/spec content. */
.wp-block-group.is-style-kumiko-panel {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

/* Numbered step, the workflow sections. */
.wp-block-group.is-style-kumiko-step {
	position: relative;
	padding-left: var(--wp--preset--spacing--50);
	border-left: 1px solid var(--wp--preset--color--border);
	height: 100%;
}

.wp-block-group.is-style-kumiko-step::before {
	content: "";
	position: absolute;
	left: -4.5px;
	top: 0.5rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
}

/* Metric tile. */
.wp-block-group.is-style-kumiko-metric {
	border-top: 2px solid var(--wp--preset--color--primary);
	padding-top: var(--wp--preset--spacing--30);
	height: 100%;
}

/* Secondary / ghost button. */
.wp-block-button.is-style-kumiko-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--border);
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-kumiko-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-kumiko-ghost .wp-block-button__link:focus {
	background-color: rgba(201, 164, 124, 0.10);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
}

/* Text-only link button with an arrow. */
.wp-block-button.is-style-kumiko-link .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--primary-soft);
	padding-inline: 0;
}

.wp-block-button.is-style-kumiko-link .wp-block-button__link::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

.wp-block-button.is-style-kumiko-link .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Screenshot frame, a browser-ish chrome around product imagery. */
.wp-block-image.is-style-kumiko-screenshot img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
}

/*
 * Capability icons.
 *
 * Inline stroke SVGs on a 24x24 grid. `currentColor` means the icon takes the
 * tan from this rule and shifts with the card on hover, so there is no second
 * colour to keep in sync.
 */
.kumiko-icon {
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--40);
	line-height: 0;
	transition: color 0.28s ease;
}

.kumiko-icon svg {
	width: 34px;
	height: 34px;
	display: block;
	overflow: visible;
}

.is-style-kumiko-card:hover .kumiko-icon {
	color: var(--wp--preset--color--primary-soft);
}

/* Retained for any pattern still placing a raster icon. */
.kumiko-icon img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * 5. Content components
 * ------------------------------------------------------------------------- */

/* FAQ built on <details> via the core Details block. */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40) 0;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	color: var(--wp--preset--color--cream);
	list-style: none;
	position: relative;
	padding-right: 2rem;
	transition: color 0.2s ease;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--primary-soft);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform 0.25s ease;
}

.wp-block-details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.wp-block-details > *:not(summary) {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
}

/* Comparison / pricing tables. */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	text-align: left;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-table td {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgba(244, 231, 218, 0.07);
	vertical-align: top;
}

.wp-block-table tbody tr:hover td {
	background-color: rgba(201, 164, 124, 0.05);
}

/* Long content: keep wide blocks from forcing a horizontal page scroll. */
.wp-block-table,
.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
	max-width: 100%;
}

/* Post/doc body rhythm. */
.kumiko-prose :where(h2) {
	margin-top: var(--wp--preset--spacing--60);
}

.kumiko-prose :where(h3) {
	margin-top: var(--wp--preset--spacing--50);
}

.kumiko-prose :where(p, ul, ol) {
	color: #d7cdc4;
}

/* Docs sidebar navigation. */
.kumiko-docs-nav .wp-block-page-list a,
.kumiko-docs-nav .wp-block-list a {
	display: block;
	padding: 0.4rem 0.7rem;
	border-radius: 6px;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kumiko-docs-nav .wp-block-page-list a:hover,
.kumiko-docs-nav .wp-block-list a:hover {
	background-color: rgba(201, 164, 124, 0.10);
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

.kumiko-docs-nav .wp-block-page-list .current-menu-item > a {
	color: var(--wp--preset--color--cream);
	background-color: rgba(201, 164, 124, 0.14);
}

/* Post cards in the blog/changelog query loops. */
.kumiko-postcard {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
	transition: border-color 0.25s ease;
}

.kumiko-postcard:hover {
	border-color: rgba(201, 164, 124, 0.5);
}

.kumiko-postcard .wp-block-post-title a {
	color: var(--wp--preset--color--cream);
}

.kumiko-postcard .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-soft);
	text-decoration: none;
}

/* Changelog version badge. */
.kumiko-version-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--primary);
	border: 1px solid rgba(201, 164, 124, 0.4);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
}

/* Footer. */
.wp-site-blocks > footer.wp-block-template-part {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * 5b. Forms
 *
 * Contact Form 7 ships almost no styling of its own, so on a dark theme its
 * fields render as white browser defaults. These rules cover CF7 and plain
 * form controls together, so a different form plugin inherits the same look.
 * ------------------------------------------------------------------------- */

.wpcf7 form > p,
.wpcf7 form > div {
	margin-bottom: var(--wp--preset--spacing--40);
}

.wpcf7 label,
.kumiko-form-fallback label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--cream);
	margin-bottom: 0.5rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.45rem;
	padding: 0.7rem 0.85rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	/* Stop iOS Safari repainting inputs with its own chrome. */
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
	border-color: rgba(201, 164, 124, 0.5);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary-soft);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface-raised);
}

/* Chrome and Safari repaint autofilled fields white. Nothing can override the
   background directly, but a large inset shadow covers it, and the text colour
   is settable through -webkit-text-fill-color. */
.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:hover,
.wpcf7 input:-webkit-autofill:focus,
.wpcf7 textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	-webkit-box-shadow: 0 0 0 1000px var(--wp--preset--color--base) inset;
	caret-color: var(--wp--preset--color--contrast);
	transition: background-color 5000s ease-in-out 0s;
}

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	display: inline-block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.9rem 1.6rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
	background-color: var(--wp--preset--color--primary-soft);
	border-color: var(--wp--preset--color--primary-soft);
}

.wpcf7 input[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Validation and response messages. */
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	color: var(--wp--preset--color--signal);
	font-size: 0.8125rem;
}

.wpcf7 .wpcf7-not-valid {
	border-color: var(--wp--preset--color--signal);
}

.wpcf7 .wpcf7-response-output {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--primary);
	background-color: rgba(201, 164, 124, 0.10);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--wp--preset--color--signal);
	background-color: rgba(224, 82, 79, 0.10);
}

.wpcf7 .wpcf7-spinner {
	filter: invert(1) grayscale(1);
}

/* The no-plugin fallback rendered by [kumiko_demo_form]. */
.kumiko-form-fallback p {
	color: var(--wp--preset--color--muted);
}

.kumiko-form-fallback .wp-block-button__link {
	display: inline-block;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 5c. Section rhythm
 *
 * Every full-bleed section carries its own top and bottom padding, so two
 * stacked sections already produce a generous gap. The flow layout's blockGap
 * then adds a third one on top, which reads as dead space rather than rhythm.
 * Remove it only where two full-width sections meet.
 * ------------------------------------------------------------------------- */

.wp-site-blocks main .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Motion & responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.kumiko-lattice::before {
		opacity: 0.3;
	}

	/* The header CTA crowds the wordmark once the nav starts collapsing, and
	   every page carries the same "Book a demo" call further down, so drop it
	   from the header rather than let it squeeze the logo. */
	.wp-site-blocks > header.wp-block-template-part .wp-block-buttons.kumiko-header-cta {
		display: none;
	}

	.wp-block-group.is-style-kumiko-step {
		padding-left: var(--wp--preset--spacing--40);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Honour a forced light preference by keeping the dark canvas but raising
   contrast, this is a deliberately dark brand, not a themable surface. */
@media (prefers-contrast: more) {
	:root {
		--wp--preset--color--muted: #c9c1b9;
		--wp--preset--color--border: #4a4a52;
	}
}

@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > footer.wp-block-template-part {
		display: none;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}