/**
 * Subscribe Forms — front-end styles.
 *
 * ---------------------------------------------------------------------------
 * ROBUSTNESS NOTE (SiteGround Speed Optimizer / "remove unused CSS", block
 * themes, aggressive CSS combine + defer):
 *
 *   • EVERY var(--sf-*) in a component rule below carries a literal fallback,
 *     e.g. `padding: var(--sf-button-padding, .8rem 1.2rem)`. If an optimizer
 *     strips the `.subforms { … }` variable block, components still render at
 *     their intended size instead of collapsing to 0 / unset.
 *   • No inline custom property contains the substring "border-width" — WP
 *     core ships `:where([style*="border-width"]){border-style:solid}`, which
 *     substring-matches the wrapper's inline style attribute and would paint a
 *     stray border. We use --sf-card-bw / --sf-input-bw, and also set
 *     `border-style:none` on the wrapper as a belt-and-braces guard.
 *
 * The variable block is still declared (authoritative when not stripped) and
 * remains the override surface for themes / WPCode snippets.
 * ---------------------------------------------------------------------------
 *
 * @package Subscribe_Forms
 */

.subforms {
	/* --- Colors (inherit the theme where possible) --- */
	--sf-accent: var( --wp--preset--color--primary, #e8791b );
	--sf-accent-hover: color-mix( in srgb, var( --sf-accent ) 87%, #000 );
	--sf-text: inherit;
	--sf-bg: #0a2342;
	--sf-card-bg: var( --sf-bg );
	--sf-card-text: #ffffff;
	--sf-field-bg: var( --wp--preset--color--base, #ffffff );
	--sf-field-text: var( --wp--preset--color--contrast, #1a2233 );
	--sf-field-border: #cfd6e0;
	--sf-focus-ring: color-mix( in srgb, var( --sf-accent ) 30%, transparent );
	--sf-error: #e2564a;
	--sf-button-text: #ffffff;
	--sf-required-color: var( --sf-accent );
	--sf-placeholder-color: #9aa4b2;
	--sf-card-border: transparent;
	--sf-card-bw: 0px;

	/* --- Typography --- */
	--sf-font: inherit;
	--sf-font-heading: var( --sf-font );
	--sf-font-size: 1rem;
	--sf-line-height: 1.4;
	--sf-badge-size: 0.72rem;
	--sf-headline-size: 1.4rem;
	--sf-headline-weight: 700;
	--sf-subhead-size: 0.98rem;
	--sf-label-size: 0.82rem;
	--sf-label-weight: 600;
	--sf-note-size: 0.85rem;
	--sf-help-size: 0.78rem;
	--sf-fine-size: 0.76rem;
	--sf-button-size: 1.02rem;
	--sf-button-weight: 700;

	/* --- Spacing & sizing --- */
	--sf-max-width: 560px;
	--sf-align: 0 auto;
	--sf-card-padding: 1.75rem;
	--sf-field-gap: 1rem;
	--sf-label-gap: 0.375rem;
	--sf-input-padding: 0.75rem 0.875rem;
	--sf-input-bw: 1px;
	--sf-button-padding: 0.8rem 1.2rem;

	/* --- Corner radii --- */
	--sf-radius: 11px;
	--sf-radius-card: var( --sf-radius );
	--sf-radius-input: calc( var( --sf-radius ) * 0.6 );
	--sf-radius-button: calc( var( --sf-radius ) * 0.6 );

	/* --- Layout --- */
	--sf-fields-columns: 1;

	box-sizing: border-box;
	border-style: none; /* guard vs core's [style*="border-width"] rule */
	max-width: var( --sf-max-width, 560px );
	margin: var( --sf-align, 0 auto );
	font-family: var( --sf-font, inherit );
	font-size: var( --sf-font-size, 1rem );
	line-height: var( --sf-line-height, 1.4 );
}

.subforms *,
.subforms *::before,
.subforms *::after {
	box-sizing: border-box;
}

/* Card border applies to either variant (transparent by default). */
.subforms__card {
	border: var( --sf-card-bw, 0 ) solid var( --sf-card-border, transparent );
}

/* Hero card variant: solid or gradient card background, auto-contrasted text. */
.subforms--hero .subforms__card {
	background: var( --sf-card-bg, #0a2342 );
	color: var( --sf-card-text, #fff );
	padding: var( --sf-card-padding, 1.75rem );
	border-radius: var( --sf-radius-card, 11px );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.18 );
}

/* Plain variant: transparent, inherits page colors. */
.subforms--plain .subforms__card {
	background: transparent;
	color: var( --sf-text, inherit );
	padding: 0;
}

/* A bordered plain card needs padding so content doesn't touch the border. */
.subforms--bordered.subforms--plain .subforms__card {
	padding: var( --sf-card-padding, 1.75rem );
	border-radius: var( --sf-radius-card, 11px );
}

.subforms__badge {
	display: inline-block;
	background: var( --sf-accent, #e8791b );
	color: #fff;
	font-size: var( --sf-badge-size, 0.72rem );
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	margin-bottom: 0.85rem;
}

.subforms__headline {
	margin: 0 0 0.4rem;
	font-family: var( --sf-font-heading, inherit );
	font-size: var( --sf-headline-size, 1.4rem );
	font-weight: var( --sf-headline-weight, 700 );
	line-height: 1.25;
}

.subforms--hero .subforms__headline {
	color: var( --sf-card-text, #fff );
}

.subforms__subhead {
	margin: 0 0 1.1rem;
	font-family: var( --sf-font-heading, inherit );
	opacity: 0.92;
	font-size: var( --sf-subhead-size, 0.98rem );
	line-height: 1.45;
}

.subforms__note {
	margin: 0;
	font-size: var( --sf-note-size, 0.85rem );
	opacity: 0.85;
}

/* Fields grid: single column by default; set --sf-fields-columns: 2. */
.subforms__form {
	display: grid;
	grid-template-columns: repeat( var( --sf-fields-columns, 1 ), minmax( 0, 1fr ) );
	row-gap: var( --sf-field-gap, 16px );
	column-gap: var( --sf-field-gap, 16px );
}

/* Full-width and non-field rows span all columns. */
.subforms__form > .subforms__note,
.subforms__form > .subforms__consent,
.subforms__form > .subforms__submit,
.subforms__form > .subforms__fine-print,
.subforms__form > .subforms__message,
.subforms__form > .subforms__hp,
.subforms__form > .subforms__step,
.subforms__form > .subforms__progress,
.subforms__field--full {
	grid-column: 1 / -1;
}

.subforms__field {
	min-width: 0;
}

.subforms__label {
	display: block;
	font-size: var( --sf-label-size, 0.82rem );
	font-weight: var( --sf-label-weight, 600 );
	font-family: var( --sf-font, inherit );
	margin-bottom: var( --sf-label-gap, 6px );
}

.subforms__req {
	color: var( --sf-required-color, var( --sf-accent, #e8791b ) );
	margin-left: 2px;
}

.subforms__input {
	width: 100%;
	padding: var( --sf-input-padding, 12px 14px );
	font-size: var( --sf-font-size, 1rem );
	font-family: var( --sf-font, inherit );
	line-height: 1.3;
	color: var( --sf-field-text, #1a2233 );
	background: var( --sf-field-bg, #fff );
	border: var( --sf-input-bw, 1px ) solid var( --sf-field-border, #cfd6e0 );
	border-radius: var( --sf-radius-input, 7px );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.subforms__textarea {
	min-height: 90px;
	resize: vertical;
}

.subforms__input:focus {
	outline: none;
	border-color: var( --sf-accent, #e8791b );
	box-shadow: 0 0 0 3px var( --sf-focus-ring, rgba( 232, 121, 27, 0.28 ) );
}

.subforms__input::placeholder {
	color: var( --sf-placeholder-color, #9aa4b2 );
	opacity: 1;
}

.subforms__help {
	display: block;
	font-size: var( --sf-help-size, 0.78rem );
	opacity: 0.8;
	margin-top: 0.25rem;
}

.subforms__error {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	margin-top: 0.3rem;
	color: #ffd7d0;
}

.subforms--plain .subforms__error {
	color: #b32d2e;
}

.subforms__field--has-error .subforms__input {
	border-color: var( --sf-error, #e2564a );
	box-shadow: 0 0 0 3px rgba( 226, 86, 74, 0.22 );
}

/* SMS consent row. */
.subforms__consent {
	margin: 0;
	font-size: var( --sf-label-size, 0.82rem );
	line-height: 1.4;
}

.subforms__consent-label {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	cursor: pointer;
}

.subforms__consent-label input[type="checkbox"] {
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

/* Submit button. */
.subforms__submit {
	display: inline-block;
	width: 100%;
	padding: var( --sf-button-padding, 0.8rem 1.2rem );
	font-size: var( --sf-button-size, 1.02rem );
	font-weight: var( --sf-button-weight, 700 );
	font-family: var( --sf-font, inherit );
	color: var( --sf-button-text, #fff );
	background: var( --sf-accent, #e8791b );
	border: none;
	border-radius: var( --sf-radius-button, 7px );
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.subforms__submit:hover,
.subforms__submit:focus {
	background: var( --sf-accent-hover, var( --sf-accent, #d76d12 ) );
}

.subforms__submit:focus-visible {
	outline: 3px solid rgba( 255, 255, 255, 0.6 );
	outline-offset: 2px;
}

.subforms__submit:active {
	transform: translateY( 1px );
}

.subforms__fine-print {
	margin: 0;
	font-size: var( --sf-fine-size, 0.76rem );
	text-align: center;
	opacity: 0.82;
}

/* Messages. */
.subforms__message {
	padding: 1rem 1.2rem;
	border-radius: var( --sf-radius-card, 11px );
	font-size: var( --sf-subhead-size, 0.98rem );
	line-height: 1.4;
}

.subforms__message--success,
.subforms__message--already {
	background: var( --sf-card-bg, #0a2342 );
	color: var( --sf-card-text, #fff );
}

.subforms--plain .subforms__message--success,
.subforms--plain .subforms__message--already {
	background: #eaf7ee;
	color: #14532d;
}

.subforms__message--error {
	background: #fdecea;
	color: #8a1c13;
	margin-bottom: 1rem;
}

/* --- Multi-step wizard --- */
/* [hidden] must win over display:grid, or every step shows at once. */
.subforms__step[hidden] {
	display: none !important;
}

.subforms__progress {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 0 0 1rem;
}

.subforms__progress-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.28;
	transition: opacity 0.2s ease;
}

.subforms__progress-dot.is-active {
	opacity: 1;
	background: var( --sf-accent, #e8791b );
}

.subforms__step {
	display: grid;
	grid-template-columns: repeat( var( --sf-fields-columns, 1 ), minmax( 0, 1fr ) );
	row-gap: var( --sf-field-gap, 16px );
	column-gap: var( --sf-field-gap, 16px );
}

.subforms__step > .subforms__note,
.subforms__step > .subforms__consent,
.subforms__step > .subforms__step-nav,
.subforms__step > .subforms__field--full {
	grid-column: 1 / -1;
}

.subforms__step-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 0.25rem;
}

.subforms__step-nav .subforms__next,
.subforms__step-nav .subforms__submit {
	flex: 1 1 auto;
}

.subforms__nav-btn {
	display: inline-block;
	padding: var( --sf-button-padding, 0.8rem 1.2rem );
	font-size: var( --sf-button-size, 1.02rem );
	font-weight: var( --sf-button-weight, 700 );
	font-family: var( --sf-font, inherit );
	border-radius: var( --sf-radius-button, 7px );
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.subforms__next {
	color: var( --sf-button-text, #fff );
	background: var( --sf-accent, #e8791b );
	border: none;
}

.subforms__next:hover,
.subforms__next:focus {
	background: var( --sf-accent-hover, var( --sf-accent, #d76d12 ) );
}

.subforms__back,
.subforms__skip {
	background: transparent;
	border-color: var( --sf-field-border, #cfd6e0 );
	color: inherit;
	opacity: 0.85;
}

.subforms__back:hover,
.subforms__skip:hover {
	opacity: 1;
}

.subforms--hero .subforms__back,
.subforms--hero .subforms__skip {
	border-color: rgba( 255, 255, 255, 0.4 );
	color: var( --sf-card-text, #fff );
}

/* Honeypot: visually and semantically hidden, still submittable by bots. */
.subforms__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Accessible screen-reader-only text (in case the theme lacks it). */
.subforms .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Responsive: collapse any multi-column grid on small screens. */
@media ( max-width: 480px ) {
	.subforms {
		--sf-fields-columns: 1;
	}

	.subforms--hero .subforms__card {
		padding: 1.35rem;
	}

	.subforms__headline {
		font-size: 1.25rem;
	}
}