/* Canvas compatibility for markup created only by explicit optional applies. */

/* Four-card and four-step presets remain balanced instead of wrapping 3 + 1. */
.smartcloud-canvas-grid:has(> .wp-block-column:nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smartcloud-canvas-component--process-numbered-steps .smartcloud-canvas-grid {
	counter-reset: smartcloud-starter-step;
}

.smartcloud-canvas-component--process-numbered-steps .smartcloud-canvas-grid > .wp-block-column {
	counter-increment: smartcloud-starter-step;
}

.smartcloud-canvas-component--process-numbered-steps .smartcloud-canvas-slot--item {
	counter-increment: none;
}

.smartcloud-canvas-component--process-numbered-steps .smartcloud-canvas-slot--item::before {
	content: counter(smartcloud-starter-step, decimal-leading-zero);
}

.smartcloud-starter-ai-header-tools {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--20, 0.75rem);
	margin-block-start: 0;
}

.smartcloud-starter-ai-header-tools > * {
	width: auto;
	min-width: 2.25rem;
	margin-block: 0;
}

/* The provider renders this direct React-fallback child before its mount has
 * content. Match the compact AI-Kit launcher geometry so Header layout never
 * jumps when Summarizer or DocSearch finishes hydrating. */
.smartcloud-starter-ai-header-tools :where(.wp-block-smartcloud-ai-kit-feature, .wp-block-smartcloud-ai-kit-doc-search) > .wp-block-wpsuite-react-fallback {
	display: block;
	margin: 0;
}

/* WP Suite hides the authored fallback as soon as the React mount has content.
 * The normal display declaration above must never override that state. */
.smartcloud-starter-ai-header-tools :where(.wp-block-wpsuite-react-fallback, [data-wpsuite-react-fallback])[hidden] {
	display: none !important;
}

.smartcloud-starter-ai-header-tools .smartcloud-starter-react-fallback {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 3.75rem;
	min-width: 3.75rem;
	height: 2.75rem;
	margin: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: var(--wp--preset--color--contrast, #132033);
	color: var(--wp--preset--color--base, #f7f9fc);
}

.smartcloud-starter-ai-header-tools .smartcloud-starter-react-fallback--summarizer::after {
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.smartcloud-starter-ai-header-tools .smartcloud-starter-react-fallback--docsearch::after {
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 0 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 0 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Flow keeps its authored controls hidden until React mounts. This small,
 * Canvas-coloured placeholder communicates that state rather than leaving an
 * abrupt empty rail on Contact or the preview support page. */
.smartcloud-starter-react-fallback--flow {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-height: 12rem;
	padding: var(--wp--custom--card-padding, clamp(1.1rem, 1.5vw, 1.5rem));
	border: 1px solid var(--wp--preset--color--border, #cbd5e1);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--contrast, #132033);
}

.smartcloud-starter-react-fallback--flow::before {
	width: 1.35rem;
	height: 1.35rem;
	border: 0.18rem solid color-mix(in srgb, currentColor 20%, transparent);
	border-top-color: currentColor;
	border-radius: 999px;
	content: "";
	animation: smartcloud-starter-react-fallback-spin 720ms linear infinite;
}

.smartcloud-starter-react-fallback__label {
	margin: var(--wp--preset--spacing--20, 0.75rem) 0 0;
	font-weight: 650;
}

@keyframes smartcloud-starter-react-fallback-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.smartcloud-starter-react-fallback--flow::before {
		animation: none;
	}
}

/* Header tools are siblings of Core Navigation in the Canvas navigation row,
 * never navigation descendants. The direct-child selector remains for older
 * Starter Headers created before the row-markup repair. */
@media (width >= 782px) {
	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) .wp-block-group.alignwide > .smartcloud-starter-ai-header-tools,
	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) > .smartcloud-starter-ai-header-tools {
		position: static;
		flex: 0 0 auto;
		width: auto !important;
		max-width: none;
		margin-inline: 0 !important;
	}

	:where(.smartcloud-canvas-component--header-centered) .smartcloud-canvas-header-menu-row > .smartcloud-starter-ai-header-tools {
		flex: 0 0 auto;
		width: auto !important;
	}

	.smartcloud-starter-ai-header-tools > :where(.wp-block-smartcloud-ai-kit-feature, .wp-block-smartcloud-ai-kit-doc-search) {
		flex: 0 0 auto;
		width: auto !important;
		max-width: none;
		margin: 0 !important;
	}
}

.gatey-account-authenticated,
.smartcloud-gatey-authenticated {
	display: var(--gatey-account-authenticated, var(--wpsuite-in-editor, none)) !important;
}

.gatey-account-not-authenticated,
.smartcloud-gatey-not-authenticated {
	display: var(--gatey-account-not-authenticated, var(--wpsuite-in-editor, none)) !important;
}

.smartcloud-starter-gatey-profile,
.smartcloud-starter-gatey-profile-sign-in {
	box-sizing: border-box;
	width: 100%;
	flex-direction: column;
}

.smartcloud-starter-gatey-header-auth,
.smartcloud-starter-gatey-header-signed-in,
.smartcloud-starter-gatey-header-signed-out {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.75rem);
	margin-block-start: 0;
}

.smartcloud-starter-gatey-header-auth {
	flex: 0 0 auto;
}

.smartcloud-starter-gatey-header-auth [smartcloud-gatey-account-attribute] {
	display: inline-block;
	width: auto;
}

.smartcloud-starter-gatey-header-auth :where(.wp-block-buttons, .wp-block-button, p) {
	margin-block: 0;
}

.smartcloud-starter-gatey-header-auth :where(a, .wp-block-button__link) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
	text-decoration: none;
	transition: color var(--smartcloud-canvas-transition, 180ms ease);
}

.smartcloud-starter-gatey-header-auth :where(a, .wp-block-button__link):hover {
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--accent-1);
}

.smartcloud-starter-gatey-profile-header {
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.smartcloud-starter-gatey-profile-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
	align-items: stretch;
	width: 100%;
}

.smartcloud-starter-gatey-profile-grid > * {
	align-self: stretch;
	margin-block-start: 0 !important;
}

.smartcloud-starter-gatey-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--wp--custom--card-padding, clamp(1.1rem, 1.5vw, 1.5rem));
	border: 1px solid var(--wp--preset--color--border, #cbd5e1);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: var(--wp--preset--color--surface, #fff);
}

.smartcloud-starter-gatey-card > .wp-block-heading,
.smartcloud-starter-gatey-card > .wp-block-separator {
	width: 100%;
}

.smartcloud-starter-gatey-card > .wp-block-separator {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	border-color: var(--wp--preset--color--border, #cbd5e1);
}

.smartcloud-starter-gatey-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.smartcloud-starter-gatey-attribute-row {
	display: grid !important;
	grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20, 0.75rem);
	align-items: baseline;
	width: 100%;
}

.smartcloud-starter-gatey-attribute-label {
	font-weight: 650;
}

.smartcloud-starter-gatey-attribute-value,
.smartcloud-starter-gatey-attribute-value > *,
.smartcloud-starter-gatey-attribute-value [smartcloud-gatey-account-attribute] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.smartcloud-starter-gatey-mfa-enabled {
	display: var(--gatey-account-mfa-enabled, var(--wpsuite-in-editor, none)) !important;
}

.smartcloud-starter-gatey-mfa-not-enabled {
	display: var(--gatey-account-mfa-not-enabled, var(--wpsuite-in-editor, none)) !important;
}

.smartcloud-starter-gatey-mfa-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 0.75rem);
	width: 100%;
}

.smartcloud-starter-gatey-actions {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
}

.smartcloud-starter-gatey-action,
.smartcloud-starter-gatey-action > *,
.smartcloud-starter-gatey-action [smartcloud-gatey-authenticator],
.smartcloud-starter-gatey-sign-in-rail,
.smartcloud-starter-gatey-sign-in-rail > *,
.smartcloud-starter-gatey-sign-in-rail [smartcloud-gatey-authenticator] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: none;
}

.smartcloud-starter-gatey-action [smartcloud-gatey-authenticator],
.smartcloud-starter-gatey-sign-in-rail [smartcloud-gatey-authenticator] {
	display: block;
}

.smartcloud-starter-gatey-card > .smartcloud-starter-gatey-action,
.smartcloud-starter-gatey-card-body > .smartcloud-starter-gatey-action,
.smartcloud-starter-gatey-mfa-actions > .smartcloud-starter-gatey-action {
	width: 100%;
	max-width: 16.25rem;
}

.smartcloud-starter-gatey-sign-in-rail,
.smartcloud-starter-gatey-sign-in-rail > *,
.smartcloud-starter-gatey-sign-in-rail [smartcloud-gatey-authenticator] {
	max-width: var(--wp--custom--gatey-auth-width, 36rem);
}

.smartcloud-starter-gatey-sign-in-rail {
	margin-inline: auto;
}

.editor-styles-wrapper {
	--wpsuite-in-editor: flex;
}

@media (width <= 781px) {
	.smartcloud-canvas-grid:has(> .wp-block-column:nth-child(4):last-child) {
		grid-template-columns: 1fr;
	}

	/* CTA primary bands use the coloured outer component as their card. Canvas
	 * supplies the compact section's vertical rhythm; Starter supplies its
	 * mobile inline gutter so headings and actions never meet the rounded edge. */
	.smartcloud-canvas-component--cta-primary-band > .smartcloud-canvas-section--compact {
		padding-inline: clamp(1.25rem, 6vw, 2rem);
	}

	.smartcloud-starter-gatey-profile-grid {
		grid-template-columns: 1fr;
	}

	.smartcloud-starter-gatey-attribute-row {
		grid-template-columns: 1fr;
	}

	.smartcloud-starter-gatey-actions {
		grid-template-columns: 1fr;
	}

	.smartcloud-starter-ai-header-tools {
		justify-content: center;
		width: 100%;
	}

	/* The launchers need their own header row on a narrow screen. Keeping them
	 * beside the site title and menu button makes the compact bar overflow. */
	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-centered, .smartcloud-canvas-component--header-minimal) :where(.wp-block-group, .is-layout-flex):has(> .smartcloud-starter-ai-header-tools) {
		flex-wrap: wrap !important;
	}

	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-centered, .smartcloud-canvas-component--header-minimal) .smartcloud-starter-ai-header-tools {
		display: flex;
		order: 10 !important;
		flex: 1 0 100% !important;
		min-width: 100%;
		box-sizing: border-box;
		width: 100%;
		padding-block-start: var(--wp--preset--spacing--20, 0.75rem);
		border-block-start: 1px solid var(--wp--preset--color--border);
	}

	/* Standard and Minimal use the direct alignwide row from Canvas. Targeting
	 * this structural row avoids relying on WordPress' generated layout class
	 * and makes the managed tools an actual second row. */
	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) > .wp-block-group.alignwide {
		flex-wrap: wrap !important;
	}

	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) > .wp-block-group.alignwide > .smartcloud-starter-ai-header-tools {
		flex: 0 0 100% !important;
		inline-size: 100% !important;
		margin-inline: 0 !important;
	}

	/* In the rendered Standard Header the navigation row also has WordPress'
	 * generated flex utilities. Use a two-column grid at this breakpoint, so
	 * the logo/menu stay in row one and the managed AI tools cannot remain in
	 * that row regardless of those generated flex declarations. */
	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) > .wp-block-group.alignwide:has(> .smartcloud-starter-ai-header-tools) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) > .wp-block-group.alignwide:has(> .smartcloud-starter-ai-header-tools) > :first-child {
		grid-column: 1;
		grid-row: 1;
	}

	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) > .wp-block-group.alignwide:has(> .smartcloud-starter-ai-header-tools) > .wp-block-navigation {
		grid-column: 2;
		grid-row: 1;
	}

	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-minimal) > .wp-block-group.alignwide > .smartcloud-starter-ai-header-tools {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	:where(.smartcloud-canvas-component--header-centered) .smartcloud-canvas-header-menu-row {
		flex-wrap: wrap !important;
	}

	:where(.smartcloud-canvas-component--header-centered) .smartcloud-canvas-header-menu-row > .smartcloud-starter-ai-header-tools {
		flex: 0 0 100% !important;
		inline-size: 100% !important;
		margin-inline: 0 !important;
	}

	/* When WordPress opens its full-screen navigation, lift the same controls
	 * into the overlay above the account actions. */
	:where(.smartcloud-canvas-component--header-standard, .smartcloud-canvas-component--header-centered, .smartcloud-canvas-component--header-minimal):has(.wp-block-navigation__responsive-container.is-menu-open) .smartcloud-starter-ai-header-tools {
		position: fixed;
		right: max(1rem, env(safe-area-inset-right));
		bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.5rem);
		left: max(1rem, env(safe-area-inset-left));
		z-index: 100001;
		display: flex;
		justify-content: flex-start;
		width: auto;
		padding-block-start: 1rem;
		border-block-start: 1px solid var(--wp--preset--color--border);
	}

	.smartcloud-starter-gatey-card > .smartcloud-starter-gatey-action,
	.smartcloud-starter-gatey-card-body > .smartcloud-starter-gatey-action,
	.smartcloud-starter-gatey-mfa-actions > .smartcloud-starter-gatey-action {
		max-width: none;
	}
}

@media (width < 600px) {
	.smartcloud-starter-gatey-header-auth {
		width: 100%;
	}
}