/**
 * Solomon AI — header trigger button, popup modal, and homepage hero search.
 *
 * The button lives in parts/site-header.html (rendered via wp:html), the modal
 * is injected once into wp_footer (see functions.php :: tc_render_solomon_ai_modal),
 * and the hero is a pattern (patterns/home-hero.php) used on front-page.html.
 */

/* -------------------------------------------------------------------------- */
/* Solomon AI header trigger button                                            */
/* -------------------------------------------------------------------------- */

.solomon-ai-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: 100px;
	background: linear-gradient(135deg, #024E9E 0%, #0269D7 100%);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--lato), Lato, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	cursor: pointer;
	overflow: hidden;
	transition: filter 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.solomon-ai-trigger::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.38) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-20deg);
	transition: none;
	pointer-events: none;
}

.solomon-ai-trigger:hover {
	filter: brightness(1.08);
	transform: scale(1.05);
}

.solomon-ai-trigger:hover::after {
	animation: tc-solomon-shine 0.55s ease forwards;
}

.solomon-ai-trigger:active {
	transform: scale(1.02) translateY(1px);
}

.solomon-ai-trigger:focus-visible {
	outline: 2px solid #0269D7;
	outline-offset: 2px;
}

@keyframes tc-solomon-shine {
	0%   { left: -100%; }
	100% { left: 160%; }
}

.solomon-ai-trigger__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* The site-header.html template ships BOTH the original wp:search and the
 * Solomon AI button so that production (which does not load this stylesheet
 * and lacks the .tc-solomon-ai-active body class) keeps the original search.
 * On staging the inline gate CSS in tc_solomon_ai_inline_gate_css() hides the
 * .tc-prod-only search wrapper. Nothing else needed here. */

/* -------------------------------------------------------------------------- */
/* Solomon AI modal                                                            */
/* -------------------------------------------------------------------------- */

.solomon-ai-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 80px 16px 16px;
	overflow-y: auto;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.32s;
}

.solomon-ai-modal[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s linear 0s;
}

/* Backdrop animates its own dim + blur so it fades in alongside the dialog
   rather than popping in after the parent opacity transition finishes. */
.solomon-ai-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	transition: background 0.32s ease, backdrop-filter 0.32s ease, -webkit-backdrop-filter 0.32s ease;
}

.solomon-ai-modal[aria-hidden="false"] .solomon-ai-modal__backdrop {
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.solomon-ai-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 720px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--lato), Lato, sans-serif;
	color: #1f2937;
	/* fadeInDown / fadeOutUp: slides down from above on open, up + fades on close */
	transform: translateY(-32px);
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

.solomon-ai-modal[aria-hidden="false"] .solomon-ai-modal__dialog {
	transform: translateY(0);
	opacity: 1;
}

.solomon-ai-modal__header {
	background: #024E9E;
	color: #ffffff;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.solomon-ai-modal__icon-tile {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.solomon-ai-modal__icon-tile svg {
	width: 32px;
	height: 32px;
}

.solomon-ai-modal__header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.solomon-ai-modal__titles {
	flex: 1;
	min-width: 0;
}

.solomon-ai-modal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	font-family: var(--wp--preset--font-family--lato), Lato, sans-serif;
	color: #ffffff;
}

.solomon-ai-modal__subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
}

.solomon-ai-modal__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.solomon-ai-modal__close:hover {
	background: rgba(255, 255, 255, 0.15);
}

.solomon-ai-modal__close svg {
	width: 18px;
	height: 18px;
}

.solomon-ai-modal__body {
	padding: 24px;
}

.solomon-ai-modal__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	border: 1px solid #024E9E;
	border-radius: 25px;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.solomon-ai-modal__form:focus-within {
	box-shadow: 0 0 0 3px rgba(2, 78, 158, 0.15);
}

.solomon-ai-modal__form-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #024E9E;
}

.solomon-ai-modal__form-icon svg {
	width: 18px;
	height: 18px;
}

.solomon-ai-modal__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	padding: 8px 4px;
	font-size: 16px;
	font-family: inherit;
	color: #1f2937;
}

.solomon-ai-modal__input::placeholder {
	color: #6b7280;
}

.solomon-ai-modal__submit {
	flex: 0 0 auto;
	border: 0;
	border-radius: 100px;
	padding: 10px 16px;
	background: #024E9E;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.solomon-ai-modal__submit:hover {
	filter: brightness(1.08);
}

.solomon-ai-modal__info {
	margin-top: 18px;
	padding: 24px;
	background: #F4F9FE;
	border: 1px solid #96c8f2;
	border-radius: 12px;
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.solomon-ai-modal__info-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #024E9E;
	margin-top: 2px;
}

.solomon-ai-modal__info-text {
	flex: 1;
	font-size: 13px;
	line-height: 1.5;
	color: #414042;
}

.solomon-ai-modal__info-title {
	display: block;
	font-weight: 700;
	color: #024E9E;
	margin-bottom: 2px;
}

.solomon-ai-modal__examples-label {
	margin: 18px 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: rgba(17, 17, 19, 0.6);
}

.solomon-ai-modal__examples {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.solomon-ai-modal__example {
	border: 1px solid #96c8f2;
	background: #ffffff;
	color: #414042;
	font-family: var(--wp--preset--font-family--lato), Lato, sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 100px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.solomon-ai-modal__example:hover {
	border-color: #024E9E;
	color: #024E9E;
	background: #F4F9FE;
}

/* -------------------------------------------------------------------------- */
/* Homepage hero (full-bleed, mirrors existing .home-hero-banner footprint)    */
/* -------------------------------------------------------------------------- */

/*
 * The hero is composed of native Gutenberg blocks (wp:group, wp:columns,
 * wp:heading, wp:paragraph, wp:search, wp:buttons / wp:button, wp:image).
 * The .solomon-ai-hero__* classes ride on those blocks as `className`
 * attributes so all the styling below still applies — but the underlying
 * DOM includes wp-block-* wrappers, which is why several rules below scope
 * through those default classes (e.g. `.wp-block-search__inside-wrapper`).
 */
.solomon-ai-hero {
	background-color: #F4F9FE;
	/* 610px (not 560) so the rendered height matches the approved staging
	   layout. Old hero used a <section> with content-box, where
	   `min-height:560 + padding-top:50` = 610px total. The new wp:group
	   is border-box, so min-height already includes the padding — bump it
	   to 610 to recover the same Y padding. */
	min-height: 610px;
	/* flex-column so the inner wp:columns row can stretch to fill the hero's
	   full height (`flex:1` below). Without this the row only takes the
	   height of the tallest column, leaving empty space below — and the
	   bottom-aligned media column lands above the hero's bottom edge instead
	   of flush against it. */
	display: flex;
	flex-direction: column;
	/* `calc(50% - 50vw)` on each side is the trick the approved staging hero
	   uses to compensate for the vertical scrollbar: the element overflows the
	   body by exactly the scrollbar width on each side. Combined with the
	   centered, content-box inner below, this puts the inner's content-area
	   left edge at the same x as the navbar logo's container at every
	   viewport size (verified at 1440 and 2560). */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	/* width: 100% (not auto) keeps the box the same width as <body> — the
	   negative margins only shift it; without this the hero would expand by
	   the scrollbar width on each side and trigger horizontal page scroll. */
	width: 100%;
}

/* wp:columns row inside the hero — centered with content-box max-width so the
   1440px constraint applies to the content area (not the padding). At wide
   viewports this centers a 1504px-wide row (1440 content + 32px padding × 2)
   inside the hero, putting the content's left edge at the navbar logo's x. */
.solomon-ai-hero__inner.wp-block-columns {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: content-box;
	gap: 32px;
	/* Fill the remaining vertical space inside the hero (which is flex-column)
	   so the bottom-aligned media column hits the hero's bottom edge. */
	flex: 1;
}

/* Left content column (wp:column) */
.solomon-ai-hero__content.wp-block-column {
	flex: 1 1 50%;
	min-width: 0;
	padding: 16px 0 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.solomon-ai-hero__title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--lora), Lora, serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 1.3;
	color: #2d2e33;
}

.solomon-ai-hero__lede {
	margin: 0 0 24px;
	max-width: 520px;
	font-family: var(--wp--preset--font-family--lato), Lato, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #2d2e33;
}

/* ----- wp:search block restyled as the pill-shaped Solomon AI search ----- */
.solomon-ai-hero .solomon-ai-hero__form.wp-block-search {
	max-width: 560px;
	margin: 0 0 16px;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__label {
	display: none;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: #ffffff;
	border: 1.5px solid #DFEFFB;
	border-radius: 100px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__inside-wrapper:focus-within {
	border-color: #0269D7;
	box-shadow: 0 0 0 3px rgba(2, 105, 215, 0.15);
}

/* AI sparkle icon — rendered as a ::before pseudo on the inside-wrapper since
   wp:search has no slot for decorative markup. */
.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__inside-wrapper::before {
	content: '';
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0C16.7044 0 17.3332 0.394444 17.5723 0.986315C19.3722 5.44061 20.63 8.01257 22.4224 9.89451C24.1718 11.7313 26.5532 13.031 30.9531 14.6149C31.5857 14.8426 32 15.3908 32 16C32 16.6092 31.5857 17.1574 30.9531 17.3851C26.5533 18.969 24.1718 20.2687 22.4224 22.1055C20.63 23.9874 19.3722 26.5594 17.5723 31.0137C17.3332 31.6056 16.7044 32 16 32C15.2956 32 14.6668 31.6056 14.4277 31.0137C12.6278 26.5594 11.37 23.9874 9.57758 22.1055C7.8282 20.2687 5.44675 18.969 1.04685 17.3851C0.414291 17.1574 0 16.6092 0 16C0 15.3908 0.414291 14.8426 1.04685 14.6149C5.44675 13.031 7.8282 11.7313 9.57758 9.89451C11.37 8.01257 12.6278 5.44061 14.4277 0.986316C14.6668 0.394444 15.2956 0 16 0ZM16 5.69538C14.8385 8.22486 13.6757 10.2006 12.1239 11.8299C10.4883 13.5472 8.48691 14.8152 5.80517 16C8.48691 17.1848 10.4883 18.4528 12.1239 20.1701C13.6757 21.7994 14.8385 23.7751 16 26.3046C17.1615 23.7751 18.3243 21.7994 19.8761 20.1701C21.5117 18.4528 23.5131 17.1848 26.1948 16C23.5131 14.8152 21.5117 13.5472 19.8761 11.8299C18.3243 10.2006 17.1615 8.22486 16 5.69538Z' fill='white'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
		#024E9E;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	padding: 8px 4px;
	font-size: 16px;
	font-family: inherit;
	color: #1f2937;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__input::placeholder {
	color: #6b7280;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__button.wp-element-button {
	position: relative;
	flex: 0 0 auto;
	border: 0;
	border-radius: 100px;
	padding: 10px 22px;
	background: linear-gradient(135deg, #024E9E 0%, #0269D7 100%);
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	overflow: hidden;
	transition: filter 0.15s ease;
	margin: 0;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__button.wp-element-button::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.38) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-20deg);
	transition: none;
	pointer-events: none;
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__button.wp-element-button:hover {
	filter: brightness(1.08);
}

.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__button.wp-element-button:hover::after {
	animation: tc-solomon-shine 0.55s ease forwards;
}

/* ----- "Try asking:" label + chip buttons (wp:buttons / wp:button) ----- */
.solomon-ai-hero__suggest {
	margin-top: 16px;
	gap: 8px;
	font-family: var(--wp--preset--font-family--lato), Lato, sans-serif;
	font-size: 13px;
	color: #6b7280;
}

.solomon-ai-hero__suggest-label {
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}

.solomon-ai-hero__chips.wp-block-buttons {
	gap: 8px;
}

/* The chip is the wrapper div; the actual clickable element is the inner <a>.
   Override the theme's default core/button (tc-blue background) to get the
   light-pill look the original chips had. */
.solomon-ai-hero__chip.wp-block-button .wp-block-button__link.wp-element-button {
	background: #ffffff;
	background-color: #ffffff;
	border: 1px solid #E5E7EB;
	color: #414042;
	font-family: var(--wp--preset--font-family--lato), Lato, sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 100px;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.solomon-ai-hero__chip.wp-block-button .wp-block-button__link.wp-element-button:hover {
	border-color: #0269D7;
	color: #024E9E;
	background: #F4F9FE;
	background-color: #F4F9FE;
}

/* ----- Right-hand media column (wp:column with dove backdrop + image) ----- */
.solomon-ai-hero__media.wp-block-column {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	/* background-image is set inline on the column via the block style attr */
}

/* The image is a wp:image block, so it ships wrapped in <figure class="wp-block-image">.
   `display: contents` removes the figure from the layout tree so the inner <img>
   remains the direct flex child — preserving the original alignment exactly. */
.solomon-ai-hero__media .wp-block-image,
.solomon-ai-hero__media .solomon-ai-hero__media-image {
	display: contents;
	margin: 0;
}

.solomon-ai-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	object-position: bottom right;
}

/* Mobile / responsive */
@media (max-width: 900px) {
	.solomon-ai-hero {
		padding: 32px 0 0;
		min-height: 0;
	}

	/* The wp:columns block ships padding-left/right:32px as an inline style
	   (from the pattern's block attrs). Inline styles win over class selectors,
	   so we need !important here to bring the columns inside the viewport at
	   narrow widths — otherwise the inner overflows the hero by ~30px on the
	   right at 375px. */
	.solomon-ai-hero .solomon-ai-hero__inner.wp-block-columns {
		flex-direction: column;
		gap: 16px;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.solomon-ai-hero__content {
		padding: 0 0 32px;
	}

	.solomon-ai-hero__title {
		font-size: 36px;
	}

	.solomon-ai-hero__media {
		flex-basis: auto;
		max-height: 320px;
		justify-content: center;
	}

	.solomon-ai-hero__media img {
		max-height: 320px;
		object-position: bottom center;
	}

	.solomon-ai-modal {
		padding: 12px;
	}

	.solomon-ai-modal__dialog {
		max-width: 100%;
		border-radius: 14px;
	}

	.solomon-ai-modal__header {
		padding: 14px 16px;
	}

	.solomon-ai-modal__body {
		padding: 16px;
	}

	/* Icon + input stay on the same row; Search button drops to full-width row below. */
	.solomon-ai-modal__form {
		flex-wrap: wrap;
		padding: 8px 12px;
		gap: 6px;
	}

	.solomon-ai-modal__form-icon {
		order: 1;
		flex: 0 0 auto;
	}

	.solomon-ai-modal__input {
		order: 2;
		flex: 1;
		min-width: 0;
		padding: 6px 4px;
	}

	.solomon-ai-modal__submit {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		margin-top: 2px;
	}

	.solomon-ai-modal__info {
		padding: 14px;
		gap: 12px;
	}

	/* Chips: keep inline, wrap overflow to next line (not column). */
	.solomon-ai-hero__suggest.wp-block-group {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.solomon-ai-hero__chips.wp-block-buttons {
		flex-direction: row !important;
		flex-wrap: wrap;
	}

	.solomon-ai-hero__chip.wp-block-button {
		width: auto;
	}

	/* Single-row pill on mobile — icon left, input, Search button right. */
	.solomon-ai-hero .solomon-ai-hero__form.wp-block-search {
		max-width: none;
	}

	.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__inside-wrapper {
		flex-wrap: nowrap;
		border-radius: 100px;
		padding: 8px;
	}

	.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__input {
		flex: 1;
		min-width: 0;
		order: unset;
		padding: 10px 4px;
	}

	.solomon-ai-hero .solomon-ai-hero__form .wp-block-search__button.wp-element-button {
		order: unset;
		width: auto;
		white-space: nowrap;
		padding: 12px 20px;
	}
}

@media (max-width: 600px) {
	.solomon-ai-hero__title {
		font-size: 32px;
	}

	.solomon-ai-trigger {
		padding: 0 14px;
	}

	.solomon-ai-trigger__icon {
		width: 14px;
		height: 14px;
	}
}

/* Hide the "Help us keep Torah Class FREE for all!" teaser text at <428px
   when Solomon AI is active — it overlaps the trigger button at that width. */
@media (max-width: 427px) {
	body.tc-solomon-ai-active header.wp-block-template-part .wp-block-buttons::before {
		display: none;
	}
}

/* Lock body scroll (both axes) when modal is open. overflow-x is explicit
   because some pages have horizontal overflow from carousels — without this
   the user can still swipe sideways and visually offset the fixed modal. */
body.solomon-ai-modal-open {
	overflow: hidden;
	overflow-x: hidden;
}

/* Dark mode parity (theme uses body.cmddark) — keep modal/hero readable. */
body.cmddark .solomon-ai-modal__dialog {
	background: #1f2937;
	color: #f3f4f6;
}

body.cmddark .solomon-ai-modal__input,
body.cmddark .solomon-ai-modal__info-text {
	color: #f3f4f6;
}

body.cmddark .solomon-ai-modal__form {
	background: #111827;
	border-color: rgba(255, 255, 255, 0.1);
}

body.cmddark .solomon-ai-modal__info {
	background: rgba(255, 255, 255, 0.05);
}

body.cmddark .solomon-ai-modal__info-icon {
	color: #60a5fa;
}

body.cmddark .solomon-ai-modal__info-title {
	color: #60a5fa;
}

body.cmddark .solomon-ai-modal__example {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.2);
	color: #f3f4f6;
}

body.cmddark .solomon-ai-hero__chip.wp-block-button .wp-block-button__link.wp-element-button {
	background: transparent;
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.2);
	color: #f3f4f6;
}

body.cmddark .solomon-ai-hero {
	/* `!important` so this beats the inline background-color emitted by the
	   wp:group block attributes (`style.color.background:#F4F9FE`). The inline
	   style has to stay on the rendered HTML to keep the block valid in the
	   editor, so the dark override has to win via specificity bump. */
	background-color: #111827 !important;
}

body.cmddark .solomon-ai-hero__title,
body.cmddark .solomon-ai-hero__lede {
	color: #f3f4f6;
}

body.cmddark .solomon-ai-hero .solomon-ai-hero__form .wp-block-search__inside-wrapper {
	background: #1f2937;
	border-color: rgba(255, 255, 255, 0.1);
}

body.cmddark .solomon-ai-hero .solomon-ai-hero__form .wp-block-search__input {
	color: #f3f4f6;
}

/* -------------------------------------------------------------------------- */
/* Loading state — spinner replaces submit button text when form is submitted  */
/* -------------------------------------------------------------------------- */

@keyframes tc-spin {
	to { transform: rotate(360deg); }
}

.solomon-ai-modal__form.is-loading .solomon-ai-modal__submit,
.solomon-ai-hero__form.is-loading .wp-block-search__button.wp-element-button {
	position: relative;
	color: transparent;
	cursor: not-allowed;
	opacity: 0.8;
	pointer-events: none;
}

.solomon-ai-modal__form.is-loading .solomon-ai-modal__submit::after,
.solomon-ai-hero__form.is-loading .wp-block-search__button.wp-element-button::after,
.solomon-ai-hero__form.is-loading .wp-block-search__button.wp-element-button:hover::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	margin: auto !important;
	width: 16px !important;
	height: 16px !important;
	background: none !important;
	/* No !important on transform — CSS !important beats animation keyframes in
	   the cascade, so transform: none !important would prevent tc-spin from
	   rotating. The animation layer overrides normal transform declarations. */
	transform: none;
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: tc-spin 0.7s linear infinite !important;
	pointer-events: none !important;
}