/**
 * CTA section styles
 * Loaded when: .cta-section is present
 */

.cta-section {
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		/* background-image injected via wp_add_inline_style for dynamic path */
		background-size: 67px 100px;
		background-position: top left;
		opacity: 0.1;
		pointer-events: none;
	}

	& > * {
		position: relative;
		z-index: 1;
	}
}

/* ==========================================================================
   Two-column layout
   ========================================================================== */
.cta-columns {
	gap: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   Buttons row (left column)
   50/50 when they fit, stack when they overflow
   ========================================================================== */
.cta-buttons-row.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);

	/* Each button takes equal space but wraps if text can't fit */
	.wp-block-button {
		flex: 1 1 200px;
		min-width: 0;
	}

	.wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Form card (right column)
   ========================================================================== */
.cta-form-wrapper {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ---------- Ninja Forms field styling ---------- */
.cta-form-wrapper .nf-form-cont {

	/* Labels */
	.nf-field-label label {
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.875rem;
		font-weight: 600;
		color: #0f172b;
		margin-bottom: 6px;
	}

	/* Text inputs, email, phone, textarea */
	.ninja-forms-field:not([type="submit"]) {
		width: 100%;
		padding: 12px 14px;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.9375rem;
		color: #0f172b;
		background-color: #f8fafc;
		border: 1px solid #cbd5e1;
		border-radius: 6px;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;

		&:focus {
			outline: none;
			border-color: #1172ba;
			box-shadow: 0 0 0 3px rgba(17, 114, 186, 0.15);
		}

		&::placeholder {
			color: #94a3b8;
		}
	}

	/* Select dropdown */
	select.ninja-forms-field {
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 14px center;
		padding-right: 40px;
	}

	/* Textarea height */
	textarea.ninja-forms-field {
		min-height: 110px;
		resize: vertical;
	}

	/* Submit button */
	input[type="submit"].ninja-forms-field,
	.nf-field-element input[type="button"] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 14px 24px;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		color: #ffffff;
		background-color: #1172ba;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		            box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);

		&:hover {
			background-color: #0e5f9e;
			transform: translateY(-2px);
			box-shadow: 0 4px 14px rgba(17, 114, 186, 0.4);
		}

		&:active {
			transform: translateY(0);
			box-shadow: 0 2px 6px rgba(17, 114, 186, 0.3);
		}
	}

	/* Field spacing */
	.nf-field-container {
		margin-bottom: 16px;
	}

	/* Error message styling */
	.nf-error-msg {
		font-size: 0.8125rem;
		color: #dc2626;
		margin-top: 4px;
	}

	.nf-error .ninja-forms-field {
		border-color: #dc2626;
	}

	/* Required asterisk */
	.nf-field-label .ninja-forms-req-symbol {
		color: #dc2626;
	}

	/* Success message */
	.nf-response-msg {
		text-align: center;
		font-size: 1rem;
		color: #0f172b;
		padding: 20px;
	}
}

/* ==========================================================================
   Responsive — stack columns on mobile
   ========================================================================== */
@media (max-width: 781px) {
	.cta-columns {
		gap: var(--wp--preset--spacing--40) !important;
	}

	.cta-section .wp-block-heading {
		text-align: center;
	}

	.cta-section > .wp-block-columns > .wp-block-column:first-child p {
		text-align: center;
	}

	.cta-buttons-row.wp-block-buttons {
		max-width: 400px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.cta-form-wrapper {
		padding: var(--wp--preset--spacing--30) !important;
	}
}