/*!
 * Section: Form
 *
 * Scoped CSS for inc/sections/form.php. Stub partial — the kit-handler form
 * markup (contact / newsletter / application) is preserved verbatim per
 * Topic 17 trade-off T-5. Page-migration WPs (RENDER-WP5–WP11) hook
 * `mystwood_studios_ab_render_form_section` and bring the handler markup with
 * its own existing styles. This file styles only the wrapper.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 17 RENDER-WP1
 */

/* Topic 23 REDESIGN-WP7 — section rhythm tokens applied.
 * Form section padding-block anchors to --mw-space-section (120px) max;
 * headline→intro wires --mw-space-headline-to-paragraph (24px); intro→
 * form-slot wires --mw-space-paragraph-to-cta (36px). H2 ceiling lifted to
 * 2.625rem (42px) per WP-1 type scale. */
.mw-section--form {
	padding-block: clamp(2rem, 6vw, var(--mw-space-section, 120px));
}

.mw-section--form .mw-section__inner {
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--form .mw-section__eyebrow {
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block-end: 0.5rem;
}

.mw-section--form .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.625rem);
	line-height: 1.2;
	margin-block: 0 var(--mw-space-headline-to-paragraph, 24px);
}

.mw-section--form .mw-section__intro {
	font-size: 1rem;
	line-height: 1.5;
	margin-block-end: var(--mw-space-paragraph-to-cta, 36px);
}

.mw-section--form .mw-section__form-slot {
	margin-block-start: 1rem;
}

/* -------------------------------------------------------------------------
 * Topic 17 RENDER-WP5 / WP-6 — Kit-handler forms surfaced inside form-section slot.
 *
 * Markup is rendered verbatim by inc/kit/form-renderers.php on the
 * `mystwood_studios_ab_render_form_section` action. These rules style only
 * the wrapper-internal pieces (banner, field row, submit row, disclosure)
 * so the form-section section CSS owns layout while the kit handlers own
 * field semantics.
 *
 * RENDER-WP6 form-CSS token sweep (WP-5 carry-forward):
 *   - Replaced hard-coded rgba() values with var(--wp--preset--color--*)
 *     tokens + hex fallbacks (per CLAUDE.md CSS additions discipline).
 *   - Added scoped status palette via local form-banner tokens so success/
 *     error states stay readable across all three brand tints.
 *   - Newsletter + contact (and future application) share the field, submit,
 *     disclosure, and banner rules via shared `.mw-section--form` selectors;
 *     handler-specific overrides go under `.mw-section--form-<handler>`.
 * ----------------------------------------------------------------------- */

/* Local form-banner palette — translucent overlays of the studio status
 * colours, designed to remain legible on studio-dark / studio-violet /
 * studio-light backgrounds without re-declaring per brand. */
.mw-section--form {
	--mw-form-banner-bg: rgba(255, 255, 255, 0.08);
	--mw-form-banner-bg-success: rgba(72, 187, 120, 0.18);
	--mw-form-banner-bg-error: rgba(229, 62, 62, 0.18);
	--mw-form-field-border: rgba(255, 255, 255, 0.4);
	--mw-form-field-bg: rgba(255, 255, 255, 0.95);
	--mw-form-field-color: #111;
}

/* Shared banner styles — used by both newsletter and contact handlers. */
.mw-section--form .mw-newsletter-banner,
.mw-section--form .mw-contact-banner {
	margin-block-end: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	background: var(--mw-form-banner-bg);
	color: var(--wp--preset--color--text-white, #fff);
	font-size: 0.95rem;
	line-height: 1.45;
}

.mw-section--form .mw-newsletter-banner p,
.mw-section--form .mw-contact-banner p {
	margin: 0;
}

.mw-section--form .mw-newsletter-banner--pending,
.mw-section--form .mw-newsletter-banner--confirmed,
.mw-section--form .mw-contact-banner--sent {
	background: var(--mw-form-banner-bg-success);
}

.mw-section--form .mw-newsletter-banner--error,
.mw-section--form .mw-newsletter-banner--confirm_failed,
.mw-section--form .mw-contact-banner--error {
	background: var(--mw-form-banner-bg-error);
}

/* Shared field input styles — text / email / textarea / number captcha. */
.mw-section--form input[type="text"],
.mw-section--form input[type="email"],
.mw-section--form input[type="number"],
.mw-section--form textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	border: 1px solid var(--mw-form-field-border);
	border-radius: 6px;
	background: var(--mw-form-field-bg);
	color: var(--mw-form-field-color);
}

.mw-section--form textarea {
	min-height: 8rem;
	resize: vertical;
}

.mw-section--form .mw-captcha-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0;
}

.mw-section--form .mw-captcha-row input[type="number"] {
	width: 5rem;
	padding: 0.5rem 0.75rem;
}

/* -------------------------------------------------------------------------
 * Newsletter-specific layout — single-field signup row.
 * ----------------------------------------------------------------------- */

.mw-section--form-newsletter .mw-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-start: 0.5rem;
}

.mw-section--form-newsletter .mw-newsletter-form__submit {
	margin: 0;
}

.mw-section--form-newsletter .mw-newsletter-form__submit .mw-btn {
	width: 100%;
}

.mw-section--form-newsletter .mw-newsletter-form__disclosure {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.45;
	opacity: 0.85;
}

@media (min-width: 36rem) {
	.mw-section--form-newsletter .mw-newsletter-form__submit .mw-btn {
		width: auto;
		min-width: 10rem;
	}
}

/* -------------------------------------------------------------------------
 * Topic 17 RENDER-WP6 — Contact form layout (name + email + textarea).
 *
 * Three labelled fields stacked vertically on mobile; submit row at the
 * bottom matches the newsletter submit treatment so both forms feel like
 * the same family.
 * ----------------------------------------------------------------------- */

.mw-section--form-contact .mw-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-start: 0.5rem;
}

.mw-section--form-contact .mw-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.mw-section--form-contact .mw-contact-form__field label {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-white, #fff);
}

.mw-section--form-contact .mw-contact-form__submit {
	margin: 0;
}

.mw-section--form-contact .mw-contact-form__submit .mw-btn {
	width: 100%;
}

.mw-section--form-contact .mw-contact-form__disclosure {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.45;
	opacity: 0.85;
}

@media (min-width: 36rem) {
	.mw-section--form-contact .mw-contact-form__submit .mw-btn {
		width: auto;
		min-width: 10rem;
	}
}