/*
Theme Name: Ghizo Labs
Theme URI: https://ghizolabs.com
Author: Ghizo Labs
Author URI: https://ghizolabs.com
Description: The Ghizo Labs storefront. A block theme carrying the same navy and blue system as the plugin listings, with Inter served from the site rather than from Google.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.0
License: GPL-3.0-or-later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: ghizo-labs
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, e-commerce

Almost everything lives in theme.json. What is here is the handful of things a
design token cannot express: the wordmark's two tones, the product card grid, and
the states the editor has no control for.
*/

/* ------------------------------------------------------------------ wordmark */

/*
 * GHIZO in the text colour, LABS in the accent, as one word. The plugin banners
 * use exactly this, and a visitor arriving from a listing should see the same
 * mark rather than something merely similar.
 */
.ghizo-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

.ghizo-wordmark:hover,
.ghizo-wordmark:focus {
	text-decoration: none;
}

.ghizo-wordmark__ghizo {
	color: currentColor;
}

.ghizo-wordmark__labs {
	color: var(--wp--preset--color--blue);
}

/* On the navy header the accent needs to be the lighter blue to stay legible. */
.has-navy-background-color .ghizo-wordmark__labs,
.has-navy-field-gradient-background .ghizo-wordmark__labs {
	color: var(--wp--preset--color--blue-soft);
}

/* ------------------------------------------------------------- links on navy */

/*
 * The link colour in theme.json is tuned for white paper, where deep navy is the
 * accessible choice. On the navy footer that same colour is nearly invisible, so
 * every link inside a dark surface flips to paper with the accent on hover.
 *
 * Scoped to the background classes rather than to the footer, so a navy section
 * anywhere on a page gets it too.
 */
.has-navy-background-color a:where(:not(.wp-element-button):not(.ghizo-wordmark)),
.has-navy-field-gradient-background a:where(:not(.wp-element-button):not(.ghizo-wordmark)) {
	color: var(--wp--preset--color--paper);
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 0.18em;
}

.has-navy-background-color a:where(:not(.wp-element-button)):hover,
.has-navy-field-gradient-background a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--blue-soft);
	text-decoration-color: currentColor;
}

.has-navy-background-color a:focus-visible,
.has-navy-field-gradient-background a:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-soft);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------- header */

/* The nav is links, not prose: no underline until it is worth one. */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--navy-deep);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --------------------------------------------------------------- eyebrow text */

/*
 * The small tracked line above a heading. Its own class because it is a role
 * rather than a size: it always reads as a label, whatever the heading below it
 * is doing.
 */
.ghizo-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-deep);
	margin-bottom: var(--wp--preset--spacing--10);
}

.has-navy-background-color .ghizo-eyebrow,
.has-navy-field-gradient-background .ghizo-eyebrow {
	color: var(--wp--preset--color--blue-soft);
}

/* ------------------------------------------------------------- product cards */

/*
 * A card that is a link in its entirety, without nesting a link around block
 * content: the whole surface is clickable through the pseudo element, and the
 * real anchor stays the only thing in the tab order.
 */
.ghizo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.ghizo-card:hover,
.ghizo-card:focus-within {
	border-color: var(--wp--preset--color--blue-soft);
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ghizo-card {
		transition: none;
	}

	.ghizo-card:hover,
	.ghizo-card:focus-within {
		transform: none;
	}
}

.ghizo-card__media {
	display: block;
	aspect-ratio: 1544 / 500;
	background: var(--wp--preset--color--navy);
	overflow: hidden;
}

.ghizo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ghizo-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	flex: 1;
}

.ghizo-card__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 650;
	letter-spacing: -0.015em;
	margin: 0;
}

.ghizo-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The link covers the card, so a click anywhere lands on it. */
.ghizo-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ghizo-card__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.ghizo-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

.ghizo-card__price {
	font-weight: 650;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------- prose measures */

/*
 * A wide section wants its grid full width and its sentences narrow. The block
 * editor's answer is to nest another constrained layout, but a constrained layout
 * inside a constrained layout clamps everything to the content width and then
 * nothing can escape it, alignwide included. So sections use a flow layout and
 * these cap the prose instead.
 *
 * Characters rather than rems: the limit that matters is how far the eye travels
 * back to the next line, and that is a function of the text, not the viewport.
 */
.ghizo-measure {
	max-width: 62ch;
}

.ghizo-measure-tight {
	max-width: 46ch;
}

/* Display type sets much larger, so it needs its own, shorter measure. */
.ghizo-measure-display {
	max-width: 24ch;
}

.has-text-align-center.ghizo-measure,
.has-text-align-center.ghizo-measure-tight,
.has-text-align-center.ghizo-measure-display {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------- the grid */

.ghizo-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

/* --------------------------------------------------------------- screenshots */

/*
 * A screenshot with its caption. Bordered rather than shadowed: these are
 * pictures of a WordPress admin screen on a white background, so a shadow makes
 * them float while a border makes them read as a window.
 */
.ghizo-shot {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.ghizo-shot:last-child {
	margin-bottom: 0;
}

.ghizo-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--wash);
}

.ghizo-shot figcaption {
	margin-top: var(--wp--preset--spacing--10);
	max-width: 70ch;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ------------------------------------------------------------- feature lists */

.ghizo-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.ghizo-ticks li {
	position: relative;
	padding-left: 1.65rem;
	color: var(--wp--preset--color--ink-muted);
}

.ghizo-ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.9rem;
	height: 0.5rem;
	border-left: 2px solid var(--wp--preset--color--blue);
	border-bottom: 2px solid var(--wp--preset--color--blue);
	transform: rotate(-45deg);
}

.ghizo-ticks strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* The same list on navy. */
.has-navy-background-color .ghizo-ticks li,
.has-navy-field-gradient-background .ghizo-ticks li {
	color: var(--wp--preset--color--on-navy);
}

.has-navy-background-color .ghizo-ticks strong,
.has-navy-field-gradient-background .ghizo-ticks strong {
	color: var(--wp--preset--color--paper);
}

.has-navy-background-color .ghizo-ticks li::before,
.has-navy-field-gradient-background .ghizo-ticks li::before {
	border-color: var(--wp--preset--color--blue-soft);
}

/* --------------------------------------------------------------- skip to main */

/*
 * Visible only when focused. WordPress prints the link; without this it is either
 * always visible or never reachable.
 */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy-deep);
	border-radius: 6px;
	box-shadow: var(--wp--preset--shadow--lifted);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	height: auto;
	left: var(--wp--preset--spacing--20);
	line-height: normal;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	top: var(--wp--preset--spacing--20);
	width: auto;
	z-index: 100000;
}

/* -------------------------------------------------------------------- plans */

/*
 * Auto fit rather than a fixed column count: there are three plans today and
 * there will be more, and the grid should not need editing when that happens.
 */
.ghizo-plans {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ghizo-plan {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
}

/* The one you can actually buy today gets the emphasis. */
.ghizo-plan--now {
	border-color: var(--wp--preset--color--blue);
	box-shadow: var(--wp--preset--shadow--card);
}

.ghizo-plan__tag {
	align-self: flex-start;
	background: var(--wp--preset--color--wash);
	border-radius: 999px;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.7rem;
	text-transform: uppercase;
}

.ghizo-plan--now .ghizo-plan__tag {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--paper);
}

.ghizo-plan__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ghizo-plan__price {
	align-items: baseline;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--10);
}

.ghizo-plan__amount {
	/* Tabular figures, so 96 and 288 line up down the row of cards. */
	font-feature-settings: 'tnum';
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
}

.ghizo-plan__per {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.ghizo-plan__text {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ghizo-plan .ghizo-ticks {
	margin-top: var(--wp--preset--spacing--30);
}

/* Pushes the button to the bottom edge whatever the list above it does. */
.ghizo-plan__foot {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.ghizo-plan__cta {
	background: var(--wp--preset--color--navy-deep);
	border-radius: 8px;
	color: var(--wp--preset--color--paper);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.8rem 1rem;
	text-align: center;
	text-decoration: none;
}

.ghizo-plan--now .ghizo-plan__cta {
	background: var(--wp--preset--color--blue);
}

.ghizo-plan__cta:hover,
.ghizo-plan__cta:focus {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

.ghizo-plan__cta--off {
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--ink-muted);
	cursor: default;
}

/* --------------------------------------------------------------------- table */

.ghizo-table-scroll {
	/* A table is the one thing that legitimately cannot shrink. Let it scroll in
	   its own box rather than making the whole page scroll sideways. */
	overflow-x: auto;
	margin-top: var(--wp--preset--spacing--30);
}

.ghizo-table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	min-width: 26rem;
	width: 100%;
}

.ghizo-table th,
.ghizo-table td {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.7rem 1rem 0.7rem 0;
	text-align: left;
	vertical-align: top;
}

.ghizo-table thead th {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ghizo-table td:not(:first-child) {
	font-feature-settings: 'tnum';
}

/* ------------------------------------------------------------ questions, terms */

.ghizo-qa {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

/* Two columns from tablet up: these are short answers, and a single column of
   them reads as a very long page for no reason. */
@media (min-width: 48rem) {
	.ghizo-qa {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}
}

.ghizo-qa h3 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	margin: 0;
}

.ghizo-qa p {
	color: var(--wp--preset--color--ink-muted);
	margin: 0.6rem 0 0;
	max-width: 52ch;
}

.ghizo-legal {
	counter-reset: clause;
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}

.ghizo-legal > li {
	counter-increment: clause;
	padding-top: var(--wp--preset--spacing--30);
}

.ghizo-legal > li + li {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: var(--wp--preset--spacing--30);
}

.ghizo-legal h2 {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.ghizo-legal h2::before {
	color: var(--wp--preset--color--blue);
	content: counter(clause) '. ';
	font-feature-settings: 'tnum';
}

.ghizo-legal p,
.ghizo-legal li {
	color: var(--wp--preset--color--ink-muted);
	max-width: 68ch;
}

.ghizo-legal p {
	margin: 0.7rem 0 0;
}

.ghizo-legal ul {
	margin: 0.7rem 0 0;
	padding-left: 1.2rem;
}

/* A short aside that needs to be read: a caveat, a date, an exception. */
.ghizo-note {
	background: var(--wp--preset--color--wash);
	border-left: 3px solid var(--wp--preset--color--blue);
	border-radius: 0 10px 10px 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
}

.ghizo-note strong {
	color: var(--wp--preset--color--ink);
}

/* ----------------------------------------------------------------- step lists */

.ghizo-steps {
	counter-reset: step;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.ghizo-steps li {
	color: var(--wp--preset--color--ink-muted);
	counter-increment: step;
	padding-left: 2.4rem;
	position: relative;
}

.ghizo-steps li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.ghizo-steps li::before {
	background: var(--wp--preset--color--wash);
	border-radius: 999px;
	color: var(--wp--preset--color--navy-deep);
	content: counter(step);
	font-feature-settings: 'tnum';
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	height: 1.6rem;
	left: 0;
	line-height: 1.6rem;
	position: absolute;
	text-align: center;
	top: 0.05rem;
	width: 1.6rem;
}

.ghizo-steps strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.ghizo-steps code {
	background: var(--wp--preset--color--wash);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	padding: 0.15em 0.4em;
}

/* ----------------------------------------------------------- two card pricing */

/*
 * Free beside Pro. The shared grid auto fits, which would let two cards stretch
 * to half a very wide page each; capped so a pair reads as a pair.
 */
.ghizo-plans--pair {
	grid-template-columns: repeat(auto-fit, minmax(17rem, 26rem));
	justify-content: center;
}

/* ------------------------------------------------------------ comparison table */

.ghizo-compare th[scope='row'] {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	padding-right: var(--wp--preset--spacing--30);
	width: 55%;
}

.ghizo-compare td {
	white-space: nowrap;
}

.ghizo-yes {
	color: var(--wp--preset--color--navy-deep);
	font-weight: 600;
}

/*
 * The tick is decorative: "Yes" is already in the cell, so the glyph is not
 * carrying the meaning on its own.
 */
.ghizo-yes::before {
	content: '';
	display: inline-block;
	width: 0.85rem;
	height: 0.45rem;
	margin-right: 0.45rem;
	border-left: 2px solid var(--wp--preset--color--blue);
	border-bottom: 2px solid var(--wp--preset--color--blue);
	transform: rotate(-45deg) translateY(-0.15rem);
}

.ghizo-no {
	color: var(--wp--preset--color--ink-muted);
}

/* --------------------------------------------------------------------- code */

/*
 * Eight space tabs turn a two level indent into a wrapped line inside a code
 * block at reading width, which is what the hook examples were doing.
 */
.wp-block-code {
	tab-size: 2;
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	overflow-x: auto;
	padding: var(--wp--preset--spacing--30);
}

.wp-block-code code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ------------------------------------------------------------ gravity forms */

/*
 * Gravity Forms ships its own stylesheet, so this only aligns the parts that
 * would otherwise read as somebody else's form dropped into the page.
 */
.gform_wrapper.gravity-theme .gform_fields {
	row-gap: var(--wp--preset--spacing--30);
}

.gform_wrapper.gravity-theme .gfield_label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.gform_wrapper.gravity-theme .gfield_description {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--micro);
	padding-top: 0.3rem;
}

.gform_wrapper.gravity-theme input[type='text'],
.gform_wrapper.gravity-theme input[type='email'],
.gform_wrapper.gravity-theme input[type='url'],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7rem 0.9rem;
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	border-color: var(--wp--preset--color--blue);
	outline: 2px solid var(--wp--preset--color--blue-soft);
	outline-offset: 1px;
}

.gform_wrapper.gravity-theme .gform_footer input[type='submit'] {
	background: var(--wp--preset--color--blue);
	border: 0;
	border-radius: 8px;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.8rem 1.6rem;
}

.gform_wrapper.gravity-theme .gform_footer input[type='submit']:hover,
.gform_wrapper.gravity-theme .gform_footer input[type='submit']:focus {
	background: var(--wp--preset--color--navy-deep);
}

.gform_confirmation_message {
	background: var(--wp--preset--color--wash);
	border-left: 3px solid var(--wp--preset--color--blue);
	border-radius: 0 10px 10px 0;
	padding: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------- licence tiers */

.ghizo-tiers th[scope='row'] {
	width: auto;
}

/* The tier name, then what it covers, on the line below it. */
.ghizo-tiers th[scope='row'] span {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	margin-top: 0.15rem;
}

.ghizo-tiers td {
	font-feature-settings: 'tnum';
	white-space: nowrap;
}

.ghizo-tier-buy {
	background: var(--wp--preset--color--blue);
	border-radius: 8px;
	color: var(--wp--preset--color--paper);
	display: inline-block;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	padding: 0.45rem 1.1rem;
	text-decoration: none;
}

.ghizo-tier-buy:hover,
.ghizo-tier-buy:focus-visible {
	background: var(--ghizo-cta-hover);
	color: var(--wp--preset--color--paper);
}

/* ============================================================================
   Marketing surfaces
   Added in the design pass. Everything above is the original theme; everything
   here is the components the store's pages are actually built from.
   ========================================================================= */

/* --------------------------------------------------------------- foundations */

/*
 * One transition duration and one easing for the whole site, so nothing feels
 * like it belongs to a different page. ease-out for anything entering, which is
 * everything here: hovers, lifts, and colour changes.
 */
:root {
	/* One step darker than the CTA blue, for hover. Written out rather than mixed
	   so there is one value to look at when somebody asks what colour that is. */
	--ghizo-cta-hover: #1d4ed8;
	--ghizo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ghizo-fast: 160ms;
	--ghizo-slow: 260ms;
}

/*
 * A visible focus ring everywhere, in the brand blue, offset so it reads as a
 * ring rather than a border. Removing this is the single most common way a
 * polished looking site becomes unusable with a keyboard.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.has-navy-background-color :focus-visible,
.has-navy-field-gradient-background :focus-visible {
	outline-color: var(--wp--preset--color--blue-soft);
}

/* Anchored headings should not land under the sticky header. */
:where(h1, h2, h3, [id]) {
	scroll-margin-top: 6rem;
}

/*
 * Motion is decoration here, never information: every animation below is a
 * hover or a lift, so turning them all off costs the reader nothing.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------ sticky header */

/*
 * The header follows you down the page, which is what keeps the pricing link
 * one click away from the bottom of a long product page. Solid rather than
 * translucent: a blur over a screenshot makes the screenshot look broken.
 */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* ------------------------------------------------------------------- icons */

.ghizo-icon {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

/* -------------------------------------------------------------------- hero */

.ghizo-hero {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

/*
 * Two columns from 62rem, with the words given the larger share. Below that the
 * art goes under the words rather than beside them: a screenshot squeezed into
 * half a phone screen shows nothing.
 */
@media (min-width: 62rem) {
	.ghizo-hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.ghizo-hero--single {
	max-width: 46rem;
}

.ghizo-hero__title {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 24ch;
	text-wrap: balance;
}

.ghizo-hero__lead {
	color: var(--wp--preset--color--on-navy);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 46ch;
}

.ghizo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
}

.ghizo-hero__note {
	color: var(--wp--preset--color--muted, var(--wp--preset--color--on-navy));
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 44ch;
	opacity: 0.85;
}

/*
 * The screenshot, tilted very slightly and cropped at the bottom so it reads as
 * a window onto the product rather than a picture pasted onto the page.
 */
.ghizo-hero__art {
	border-radius: 14px;
	box-shadow: 0 30px 60px -20px rgb(2 8 23 / 65%);
	overflow: hidden;
	position: relative;
	border: 1px solid rgb(147 197 253 / 22%);
	background: rgb(255 255 255 / 4%);
}

.ghizo-hero__art img {
	display: block;
	height: auto;
	width: 100%;
}

/* --------------------------------------------------------------- buttons */

/*
 * Plain anchors that match the core button block, for the places that cannot
 * hold a block: the hero, and the tier table.
 */
.ghizo-button {
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	/* 44px minimum, met by padding rather than a fixed height so the label can
	   wrap on a narrow screen without being clipped. */
	min-height: 2.75rem;
	padding: 0.75rem 1.4rem;
	text-decoration: none;
	transition: background var(--ghizo-fast) var(--ghizo-ease),
		border-color var(--ghizo-fast) var(--ghizo-ease),
		transform var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-button--primary {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--paper);
}

/*
 * Darker on hover, never lighter, and the text colour never changes.
 *
 * The first version swapped a blue button with white text for a pale blue button
 * with dark text, which is a different button appearing where you pointed rather
 * than the one you pointed at responding. One step down the same hue is all a
 * hover has to do.
 */
.ghizo-button--primary:hover,
.ghizo-button--primary:focus-visible {
	background: var(--ghizo-cta-hover);
	color: var(--wp--preset--color--paper);
}

.ghizo-button--ghost {
	border: 1px solid rgb(147 197 253 / 45%);
	color: var(--wp--preset--color--paper);
}

.ghizo-button--ghost:hover,
.ghizo-button--ghost:focus-visible {
	background: rgb(147 197 253 / 12%);
	border-color: var(--wp--preset--color--blue-soft);
	color: var(--wp--preset--color--paper);
}

.ghizo-button:active {
	transform: translateY(1px);
}

/* ------------------------------------------------------------------- stats */

.ghizo-stats {
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	padding-top: var(--wp--preset--spacing--40);
}

.ghizo-stat__figure {
	color: var(--wp--preset--color--navy-deep);
	display: block;
	/* Tabular figures so a column of numbers lines up. */
	font-feature-settings: 'tnum';
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1;
}

.ghizo-stat__label {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	margin-top: 0.5rem;
	max-width: 22ch;
}

.has-navy-background-color .ghizo-stats,
.has-navy-field-gradient-background .ghizo-stats {
	border-top-color: rgb(147 197 253 / 22%);
}

.has-navy-background-color .ghizo-stat__figure,
.has-navy-field-gradient-background .ghizo-stat__figure {
	color: var(--wp--preset--color--paper);
}

.has-navy-background-color .ghizo-stat__label,
.has-navy-field-gradient-background .ghizo-stat__label {
	color: var(--wp--preset--color--on-navy);
}

/* ---------------------------------------------------------------- features */

.ghizo-features {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-top: var(--wp--preset--spacing--40);
}

.ghizo-feature {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	transition: border-color var(--ghizo-fast) var(--ghizo-ease),
		box-shadow var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-feature:hover {
	border-color: var(--wp--preset--color--blue-soft);
	box-shadow: var(--wp--preset--shadow--card);
}

/* The icon in a tinted square, which is what stops four cards reading as four
   paragraphs with a decoration on top. */
.ghizo-feature__icon {
	align-items: center;
	background: var(--wp--preset--color--wash);
	border-radius: 10px;
	color: var(--wp--preset--color--navy-deep);
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.ghizo-feature__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ghizo-feature__text {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0.6rem 0 0;
}

.has-wash-background-color .ghizo-feature {
	background: var(--wp--preset--color--paper);
}

.has-wash-background-color .ghizo-feature__icon {
	background: var(--wp--preset--color--wash);
}

/* ------------------------------------------------------------------- leads */

.ghizo-lead {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin-top: var(--wp--preset--spacing--20);
}

.has-navy-background-color .ghizo-lead,
.has-navy-field-gradient-background .ghizo-lead {
	color: var(--wp--preset--color--on-navy);
}

/* ----------------------------------------------------------------- closing */

.ghizo-closing {
	margin-inline: auto;
	max-width: 44rem;
	text-align: center;
}

.ghizo-closing__title {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

.ghizo-closing .ghizo-lead {
	margin-inline: auto;
}

/* --------------------------------------------------------------------- q&a */

.ghizo-qa__item {
	min-width: 0;
}

/* -------------------------------------------------------------------- cards */

/*
 * The whole card is the link target, with the heading's anchor stretched over
 * it. That gives a 100% wide hit area without nesting anything inside an anchor.
 */
.ghizo-card {
	transition: border-color var(--ghizo-fast) var(--ghizo-ease),
		box-shadow var(--ghizo-slow) var(--ghizo-ease),
		transform var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-card:hover,
.ghizo-card:focus-within {
	transform: translateY(-2px);
}

.ghizo-card__media img {
	transition: transform var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-card:hover .ghizo-card__media img {
	transform: scale(1.02);
}

/* The arrow after the card title, which is the affordance saying it opens. */
.ghizo-card__title a::after {
	transition: transform var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-card:hover .ghizo-card__title a::after {
	transform: translateX(3px);
}

/* --------------------------------------------------- design pass corrections */

/*
 * The hero screenshot, cropped rather than shrunk.
 *
 * A 1440 wide admin screen scaled into a 500px column is a grey rectangle: all
 * of it is visible and none of it is legible. env/bin/make-hero-art.py crops
 * into the one panel that matters, and the frame takes whatever shape that crop
 * is. Forcing every crop into one ratio meant either dead space beside a
 * portrait panel or clipping a landscape one, and both look like a mistake.
 */
.ghizo-hero__art {
	max-height: 34rem;
}

.ghizo-hero__art img {
	max-height: 34rem;
	object-fit: contain;
	object-position: center top;
}

/*
 * The footer's own top margin was removed in parts/footer.html rather than
 * overridden here: every page now ends with a full bleed navy band, so a strip
 * of white between two navy surfaces was reading as a mistake. Overriding an
 * inline block style from a stylesheet needs !important, and an !important that
 * exists only to undo a value you also control is a value worth deleting.
 */

/* The bands own the vertical rhythm now, so main adds none. */
.wp-site-blocks > main {
	margin-block: 0;
}

/*
 * The last 24 pixels of white. wp-site-blocks puts the global block gap between
 * its own children, so main and the footer were still separated by one gap even
 * with the footer's own margin gone. Zeroing the gap rather than the margin is
 * the difference between fixing it and fighting it.
 */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * The frame hugs the image rather than the column.
 *
 * With object-fit: contain, a portrait crop in a full width frame left pale bars
 * down both sides, which read as part of the screenshot. Shrink wrapping the
 * frame and moving the border and shadow onto the image itself means the edge
 * you see is always the edge of the picture.
 */
.ghizo-hero__art {
	background: none;
	border: 0;
	box-shadow: none;
	margin-inline: auto;
	width: fit-content;
}

.ghizo-hero__art img {
	border: 1px solid rgb(147 197 253 / 22%);
	border-radius: 14px;
	box-shadow: 0 30px 60px -20px rgb(2 8 23 / 65%);
	width: auto;
	max-width: 100%;
}

/*
 * The wordmark's dark half, on navy.
 *
 * navy-deep on navy is 1.72:1, so half the logo was effectively invisible in the
 * footer. The light half was fine, which is exactly how this kind of thing
 * survives a visual review: the word is still readable, just not all of it.
 */
.has-navy-background-color .ghizo-wordmark__ghizo,
.has-navy-field-gradient-background .ghizo-wordmark__ghizo {
	color: var(--wp--preset--color--blue-soft);
}

/* ============================================================================
   Navigation
   The store is a matrix: four sections by three plugins. The header moves along
   one axis; everything here moves along the other.
   ========================================================================= */

/* ------------------------------------------------------------- breadcrumbs */

.ghizo-crumbs {
	align-items: center;
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.5rem;
}

.ghizo-crumbs a {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	text-underline-offset: 3px;
}

.ghizo-crumbs a:hover,
.ghizo-crumbs a:focus-visible {
	color: var(--wp--preset--color--navy-deep);
	text-decoration: underline;
}

.ghizo-crumbs [aria-current='page'] {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/*
 * The separator was set in the border colour, which measured 1.28:1 against the
 * page: invisible, which defeats the one job a separator has. aria-hidden keeps
 * it out of the reading order without making it decorative to the eye.
 */
.ghizo-crumbs__sep {
	color: var(--wp--preset--color--ink-muted);
	opacity: 0.55;
}

/* Free is not a lesser action, so it does not get a lesser button: same size and
   shape as Buy, in the quieter of the two brand colours. */
.ghizo-tier-buy--free {
	background: var(--wp--preset--color--navy-deep);
}

.ghizo-tier-buy--free:hover,
.ghizo-tier-buy--free:focus-visible {
	background: var(--wp--preset--color--navy);
}

/* --------------------------------------------------------------- plugin tabs */

/*
 * One plugin, its four pages. Placed under the hero rather than in the header,
 * because it is about the thing you are looking at and not about the site.
 */
.ghizo-tabs {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--20);
	padding-bottom: 0;
}

.ghizo-tabs__name {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	padding-bottom: 0.75rem;
}

.ghizo-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.ghizo-tab {
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--ink-muted);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	/* 44px of target from padding alone, so the tab is comfortable on touch
	   without a height that would detach it from the rule it sits on. */
	padding: 0.7rem 0.25rem 0.75rem;
	text-decoration: none;
	transition: color var(--ghizo-fast) var(--ghizo-ease),
		border-color var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-tab:hover,
.ghizo-tab:focus-visible {
	border-bottom-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

/* Weight and a rule, not colour alone: the current tab has to be obvious to
   somebody who cannot tell these two blues apart. */
.ghizo-tab--current,
.ghizo-tab--current:hover {
	border-bottom-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--navy-deep);
	font-weight: 650;
}

/* ---------------------------------------------------------------- siblings */

.ghizo-siblings {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin-top: var(--wp--preset--spacing--40);
}

.ghizo-sibling {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	display: block;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	transition: border-color var(--ghizo-fast) var(--ghizo-ease),
		box-shadow var(--ghizo-slow) var(--ghizo-ease),
		transform var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-sibling:hover,
.ghizo-sibling:focus-visible {
	border-color: var(--wp--preset--color--blue-soft);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.ghizo-sibling__kicker {
	color: var(--wp--preset--color--navy-deep);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ghizo-sibling__name {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin-top: 0.5rem;
}

.ghizo-sibling__name::after {
	content: ' \2192';
	color: var(--wp--preset--color--blue);
	display: inline-block;
	transition: transform var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-sibling:hover .ghizo-sibling__name::after {
	transform: translateX(3px);
}

.ghizo-sibling__text {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------- contents */

/*
 * The reference pages run to five thousand pixels. Without this the only route
 * to the hooks table is scrolling past everything already decided about.
 */
.ghizo-contents {
	background: var(--wp--preset--color--wash);
	border-radius: 12px;
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
}

.ghizo-contents__title {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.ghizo-contents ol {
	columns: 2;
	column-gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 40rem) {
	.ghizo-contents ol {
		columns: 1;
	}
}

.ghizo-contents li {
	break-inside: avoid;
}

.ghizo-contents a {
	color: var(--wp--preset--color--navy-deep);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.35rem 0;
	text-decoration: none;
}

.ghizo-contents a:hover,
.ghizo-contents a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------- header submenus */

/*
 * Core's navigation block draws the submenu; this only makes it look like the
 * rest of the site. The z-index has to beat the sticky header's own stacking
 * context or the panel opens behind the page.
 */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
	min-width: 15rem;
	padding: 0.4rem;
	z-index: 30;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.55rem 0.75rem;
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--navy-deep);
}

/* The current section, in the header. Core adds the class; it has never styled
   it, and a navigation that cannot say where you are is half a navigation. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy-deep);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/*
 * Bottom spacing, unless the page already ends in a full bleed band.
 *
 * Every marketing page ends with a navy closing band whose own padding is the
 * spacing, which is why main has none. A page that loses that band, or never had
 * one, was left with its last card welded to the footer. This gives main the
 * spacing back and takes it away only when a band really is the last thing.
 */
.wp-site-blocks > main {
	padding-bottom: var(--wp--preset--spacing--60);
}

.wp-site-blocks > main:has(> .entry-content > .alignfull:last-child),
.wp-site-blocks > main:has(> .alignfull:last-child) {
	padding-bottom: 0;
}

/* --------------------------------------------------------- the comparison */

.ghizo-rival th[scope='row'] {
	width: 34%;
}

.ghizo-rival td {
	font-feature-settings: 'tnum';
}

/* What their price actually covers, under the number, so the comparison is not
   quietly flattering us by leaving the site count out. */
.ghizo-rival td span {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	margin-top: 0.15rem;
}

.ghizo-source {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--micro);
	margin-top: var(--wp--preset--spacing--20);
	max-width: 60ch;
}