/*
 * Forge — BrittAI brand utilities.
 * Small helpers the homepage patterns lean on; everything token-driven
 * lives in theme.json.
 */

/* Gradient-clipped text (brand blue → green). */
.forge-grad-text {
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Header, main, and footer sit flush — sections carry their own spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Line-height pairings the font-size presets can't carry themselves:
   lead /1.6 · body-sm /1.55 · caption /1.4 · card title /1.3. */
p.has-md-font-size {
	line-height: 1.6;
}

p.has-xs-font-size {
	line-height: 1.55;
}

p.has-xxs-font-size {
	line-height: 1.4;
}

.has-title-font-size {
	line-height: 1.3;
}

/* Sticky translucent header. */
.forge-sticky-header {
	background: rgba(248, 250, 251, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Buttons ease color and shadow with the house curve. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

/* Focus is always the blue ring. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid rgba(44, 107, 255, 0.45);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--xs);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	border-radius: var(--wp--custom--radius--md);
}

/* Wordmark lockup: mark + BRITTAi. */
.forge-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.forge-wordmark img {
	height: 34px;
	width: auto;
	display: block;
}

.forge-wordmark--dark {
	color: var(--wp--preset--color--base);
}

/* Card surface used across the homepage grids — the system card recipe:
   surface + 1px border + 16px radius + shadow-sm, lifting to shadow-md. */
.forge-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-2);
	border-radius: var(--wp--custom--radius--lg);
	padding: 30px;
	box-shadow: var(--wp--preset--shadow--sm);
	transition: transform var(--wp--custom--transition--normal), box-shadow var(--wp--custom--transition--normal);
}

.forge-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

.forge-card h3 {
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.forge-card p {
	font-size: 15px;
	line-height: 1.62;
}

/* Solutions cards are a step more compact than the benefit cards. */
#solutions .forge-card {
	padding: 26px;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}

#solutions .forge-card h3 {
	font-size: 19px;
}

#solutions .forge-card p {
	font-size: 14.5px;
	line-height: 1.6;
}

/* Process steps: slightly smaller titles and body than the defaults. */
#process h3 {
	font-size: 20px;
	line-height: 1.25;
}

#process p {
	font-size: 15px;
	line-height: 1.62;
}

/* The comp caps headline measure so statements wrap with intent. */
#top h1 {
	max-width: 16ch;
	margin-inline: auto;
}

#why h2 {
	max-width: 20ch;
}

#difference h2 {
	max-width: 22ch;
}

#positioning h2 {
	max-width: 18ch;
}

/* Tinted icon chips — soft fills with darkened brand color on top. */
.forge-icon-chip {
	width: 46px;
	height: 46px;
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.forge-icon-chip svg {
	width: 23px;
	height: 23px;
}

.forge-icon-chip--blue {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

.forge-icon-chip--green {
	background: var(--wp--preset--color--secondary-soft);
	color: var(--wp--preset--color--secondary-alt);
}

/* Chip + index number row at the top of a solution card. */
.forge-chip-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.forge-mono-num {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 13px;
	color: var(--wp--preset--color--grey-mid);
}

/* Oversized index numbers (difference list) — numbers live in mono. */
.forge-num-display {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: clamp(2.375rem, 4vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

/* Mono check bullets under the hero CTAs (sit on the navy hero). */
.forge-check-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 13px;
	color: var(--wp--preset--color--grey-mid);
}

.forge-check-row span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.forge-check-row svg {
	width: 15px;
	height: 15px;
	color: var(--wp--preset--color--secondary);
}

/* Numbered process step circles, with a gradient rail behind them. */
.forge-step-num {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 16px;
	border: 4px solid var(--wp--preset--color--base-2);
}

.forge-process-wrap {
	position: relative;
}

.forge-process-rail {
	position: absolute;
	top: 23px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: var(--wp--preset--gradient--brand);
	opacity: 0.35;
}

@media (max-width: 781px) {
	.forge-process-rail {
		display: none;
	}
}

/* Footer link rows with a small inline icon. */
.forge-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 15px;
	color: var(--wp--preset--color--grey-soft);
	text-decoration: none;
}

.forge-footer-link:hover {
	color: var(--wp--preset--color--base);
}

.forge-footer-link svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Glow button — the hero CTA: primary blue with the reserved blue halo.
   One per page, on the hero only. */
.is-style-forge-glow .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--glow);
}

.is-style-forge-glow .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--glow);
}

/* Accent button — the single green "go" moment. Always navy text on green. */
.is-style-forge-accent .wp-block-button__link {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--navy-deep);
}

.is-style-forge-accent .wp-block-button__link:hover,
.is-style-forge-accent .wp-block-button__link:focus {
	background: var(--wp--preset--color--secondary-hover);
	color: var(--wp--preset--color--navy-deep);
}

.is-style-forge-accent .wp-block-button__link:active {
	background: var(--wp--preset--color--secondary-alt);
	color: var(--wp--preset--color--navy-deep);
}

/* Blog home: category filter chips (core/categories list). */
ul.wp-block-categories.forge-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.forge-cat-chips li {
	margin: 0;
}

.forge-cat-chips a,
.forge-chip-link a {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--border-2);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-2);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

.forge-cat-chips a:hover,
.forge-chip-link a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* The category being viewed reads as the active, dark-filled chip. */
.forge-cat-chips .current-cat > a,
.forge-cat-chips .current-cat > a:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Blog home: cards clip their flush featured images. */
.forge-featured-card,
.forge-post-card {
	overflow: hidden;
}

.forge-post-card {
	transition: transform var(--wp--custom--transition--normal), box-shadow var(--wp--custom--transition--normal);
}

.forge-post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* Single post: cover image pulled up over the hero edge. */
.forge-post-cover {
	box-shadow: var(--wp--preset--shadow--lg);
}

/* ------------------------------------------------------------------ */
/* Hover system — one consistent set of responses across the theme.   */
/* ------------------------------------------------------------------ */

/* Text links ease between colors instead of snapping. */
a:where(:not(.wp-element-button)) {
	transition: color var(--wp--custom--transition--fast);
}

/* The page you're on reads as the active, primary-colored nav item. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation [aria-current="page"] {
	color: var(--wp--preset--color--primary);
}

/* On dark sections the default primary-alt hover is unreadable —
   text links brighten to white instead. */
.has-dark-radial-gradient-background a:where(:not(.wp-element-button)):hover,
.has-navy-deep-background-color a:where(:not(.wp-element-button)):hover,
.is-style-forge-on-dark a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--base);
}

/* Featured card lifts like the grid cards. */
.forge-featured-card {
	transition: transform var(--wp--custom--transition--normal), box-shadow var(--wp--custom--transition--normal);
}

.forge-featured-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* Hovering anywhere on a card tints its title and gently zooms the cover. */
.forge-post-card:hover .wp-block-post-title a,
.forge-featured-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

.forge-post-card .wp-block-post-featured-image,
.forge-featured-card .wp-block-post-featured-image {
	overflow: hidden;
}

.forge-post-card .wp-block-post-featured-image img,
.forge-featured-card .wp-block-post-featured-image img {
	transition: transform var(--wp--custom--transition--normal);
}

.forge-post-card:hover .wp-block-post-featured-image img,
.forge-featured-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Filter chips get a soft blue wash on top of the border/color shift. */
.forge-cat-chips li:not(.current-cat) a:hover,
.forge-chip-link a:hover {
	background: var(--wp--preset--color--primary-soft);
}

/* Motion-sensitive visitors get the color changes without the movement. */
@media (prefers-reduced-motion: reduce) {
	.forge-card,
	.forge-post-card,
	.forge-featured-card,
	.forge-post-card .wp-block-post-featured-image img,
	.forge-featured-card .wp-block-post-featured-image img {
		transition: none;
	}

	.forge-card:hover,
	.forge-post-card:hover,
	.forge-featured-card:hover {
		transform: none;
	}

	.forge-post-card:hover .wp-block-post-featured-image img,
	.forge-featured-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* On Navy — the dark hero context as a one-click group style.        */
/* Applies the design system's .on-dark token remapping.              */
/* ------------------------------------------------------------------ */

.is-style-forge-on-dark {
	background: var(--wp--preset--gradient--dark-radial);
	color: var(--wp--preset--color--base);
}

/* Headings flip to white unless the author picked a color. */
.is-style-forge-on-dark :is(h1, h2, h3, h4, h5):not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

/* Eyebrows go accent-green on dark heroes. */
.is-style-forge-on-dark h6:not(.has-text-color) {
	color: var(--wp--preset--color--secondary);
}

/* Text links read as light blue (blue-400 on navy — AA). */
.is-style-forge-on-dark a:where(:not(.wp-element-button):not(.has-text-color):not(.forge-footer-link)) {
	color: var(--wp--preset--color--primary-light);
}

/* Metadata steps down to the on-dark muted grey. */
.is-style-forge-on-dark :is(figcaption, cite) {
	color: var(--wp--preset--color--grey-mid);
}

/* Hairlines and wells use the dark border/surface tokens. */
.is-style-forge-on-dark :is(.wp-block-separator, .wp-block-pullquote) {
	border-color: var(--wp--preset--color--border-dark);
}

.is-style-forge-on-dark .wp-block-table :is(td, th) {
	border-color: var(--wp--preset--color--border-dark);
}

.is-style-forge-on-dark .wp-block-table th,
.is-style-forge-on-dark .wp-block-code {
	background-color: var(--wp--preset--color--navy-surface);
	color: var(--wp--preset--color--base);
}

.is-style-forge-on-dark .wp-block-code {
	border-color: var(--wp--preset--color--border-dark);
}

/* Cards on navy: raised dark surface, border-led hierarchy, no shadow. */
.is-style-forge-on-dark .forge-card,
.is-style-forge-on-dark .is-style-forge-card {
	background: var(--wp--preset--color--navy-surface);
	border-color: var(--wp--preset--color--border-dark);
	box-shadow: none;
}

.is-style-forge-on-dark :is(.forge-card, .is-style-forge-card) :is(h3, h4):not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

.is-style-forge-on-dark :is(.forge-card, .is-style-forge-card) p:not(.has-text-color) {
	color: var(--wp--preset--color--grey-soft);
}

/* Outline buttons inherit white instead of primary on navy. */
.is-style-forge-on-dark .is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ */
/* Ghost button — transparent, primary text, soft-blue hover wash.    */
/* ------------------------------------------------------------------ */

.is-style-forge-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: none;
}

.is-style-forge-ghost .wp-block-button__link:hover,
.is-style-forge-ghost .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-alt);
	box-shadow: none;
}

.is-style-forge-ghost .wp-block-button__link:active {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-press);
}

/* On navy the ghost lightens and the wash goes translucent
   (the token sheet's on-dark --primary-soft value). */
.is-style-forge-on-dark .is-style-forge-ghost .wp-block-button__link {
	color: var(--wp--preset--color--primary-light);
}

.is-style-forge-on-dark .is-style-forge-ghost .wp-block-button__link:hover,
.is-style-forge-on-dark .is-style-forge-ghost .wp-block-button__link:focus {
	background: rgba(44, 107, 255, 0.14);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ */
/* Badges — soft fills with darkened text, pill radius, caption type. */
/* ------------------------------------------------------------------ */

:is(.is-style-forge-badge, .is-style-forge-badge-green, .is-style-forge-badge-warning, .is-style-forge-badge-danger) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-press);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
}

.is-style-forge-badge-green {
	background: var(--wp--preset--color--secondary-soft);
	color: var(--wp--preset--color--secondary-alt);
}

.is-style-forge-badge-warning {
	background: color-mix(in srgb, var(--wp--preset--color--warning) 16%, white);
	color: var(--wp--preset--color--contrast);
}

.is-style-forge-badge-danger {
	background: color-mix(in srgb, var(--wp--preset--color--danger) 12%, white);
	color: color-mix(in srgb, var(--wp--preset--color--danger) 70%, var(--wp--preset--color--navy-deep));
}

/* ------------------------------------------------------------------ */
/* Inputs — rest in the muted well, wake to white with the blue ring. */
/* ------------------------------------------------------------------ */

.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments-form textarea,
.wp-block-search__input {
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):focus,
.wp-block-post-comments-form textarea:focus,
.wp-block-search__input:focus {
	outline: none;
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(44, 107, 255, 0.45);
}

.wp-block-post-comments-form ::placeholder,
.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--grey-mid);
	opacity: 1;
}