/**
 * WPForms restyled to the BrioForge design.
 *
 * Loaded separately and enqueued after WPForms' own stylesheet — the plugin's
 * modern renderer ships ~170KB of CSS that would otherwise win on load order,
 * and out-specifying all of it from style.css meant unreadable selectors.
 * Coming later in the cascade lets these rules stay close to the design's own.
 *
 * Two variants, matching the design's two form treatments:
 *   .wpforms-styled.is-navy   navy block  — white fields, light labels, inverted button
 *   .wpforms-styled.is-card  white card  — paper fields, ink labels, ink button
 */

.wpforms-styled div.wpforms-container,
.wpforms-styled div.wpforms-container .wpforms-form {
	margin: 0 !important;
	max-width: none !important;
}

/* Two-column grid, matching .form / .cform in the design. */
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-container {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
}
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	float: none !important;
	display: block !important;
	justify-self: stretch !important;
}
/* Textarea and submit span both columns, as .full does in the design. */
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-textarea,
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-submit-container {
	grid-column: 1 / -1 !important;
}
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-submit-container { padding: 0; }

/* Labels — 13px Space Grotesk above the field. */
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-label {
	display: block !important;
	font-family: var(--wp--preset--font-family--space-grotesk) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin-bottom: 7px !important;
	line-height: 1.3;
}
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-description {
	font-size: 12px !important;
	color: var(--muted) !important;
	margin-top: 6px;
}
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-required-label { color: var(--pink-d); }

/* Fields. The size classes cap width, so they are reset explicitly. */
.wpforms-styled div.wpforms-container .wpforms-form input[type=text],
.wpforms-styled div.wpforms-container .wpforms-form input[type=email],
.wpforms-styled div.wpforms-container .wpforms-form input[type=tel],
.wpforms-styled div.wpforms-container .wpforms-form textarea,
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-medium,
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-large,
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-small {
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 12px !important;
	padding: 13px 15px !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-size: 15px !important;
	color: var(--ink) !important;
	box-shadow: none !important;
	height: auto !important;
}
.wpforms-styled div.wpforms-container .wpforms-form textarea {
	min-height: 130px !important;
	resize: vertical;
}

/* Submit — the design's pill button. */
.wpforms-styled div.wpforms-container .wpforms-form button[type=submit],
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-submit {
	display: inline-flex !important;
	align-items: center;
	gap: 9px !important;
	font-family: var(--wp--preset--font-family--space-grotesk) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	padding: 14px 26px !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--ink) !important;
	background: var(--ink) !important;
	color: #fff !important;
	cursor: pointer;
	transition: .18s;
	width: auto !important;
	height: auto !important;
}
.wpforms-styled div.wpforms-container .wpforms-form button[type=submit]:hover,
.wpforms-styled div.wpforms-container .wpforms-form .wpforms-submit:hover {
	background: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
 * Navy variant — white fields on the dark block
 * ---------------------------------------------------------------------- */
.wpforms-styled.is-navy div.wpforms-container .wpforms-form .wpforms-field-label { color: #cdd0e4; }
.wpforms-styled.is-navy div.wpforms-container .wpforms-form input[type=text],
.wpforms-styled.is-navy div.wpforms-container .wpforms-form input[type=email],
.wpforms-styled.is-navy div.wpforms-container .wpforms-form input[type=tel],
.wpforms-styled.is-navy div.wpforms-container .wpforms-form textarea {
	border: 0 !important;
	background: #fff !important;
}
.wpforms-styled.is-navy div.wpforms-container .wpforms-form button[type=submit],
.wpforms-styled.is-navy div.wpforms-container .wpforms-form .wpforms-submit {
	background: #fff !important;
	color: var(--ink) !important;
	border-color: #fff !important;
}
.wpforms-styled.is-navy div.wpforms-container .wpforms-form button[type=submit]:hover,
.wpforms-styled.is-navy div.wpforms-container .wpforms-form .wpforms-submit:hover {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: var(--ink) !important;
}
.wpforms-styled.is-navy div.wpforms-container .wpforms-form .wpforms-confirmation-container-full,
.wpforms-styled.is-navy div.wpforms-container .wpforms-form .wpforms-field-description { color: #c3c6de; }

/* -------------------------------------------------------------------------
 * Card variant — paper fields on white
 * ---------------------------------------------------------------------- */
.wpforms-styled.is-card div.wpforms-container .wpforms-form .wpforms-field-label { color: var(--ink); }
.wpforms-styled.is-card div.wpforms-container .wpforms-form input[type=text],
.wpforms-styled.is-card div.wpforms-container .wpforms-form input[type=email],
.wpforms-styled.is-card div.wpforms-container .wpforms-form input[type=tel],
.wpforms-styled.is-card div.wpforms-container .wpforms-form textarea {
	border: 1px solid var(--line) !important;
	background: var(--paper) !important;
}
.wpforms-styled.is-card div.wpforms-container .wpforms-form input:focus,
.wpforms-styled.is-card div.wpforms-container .wpforms-form textarea:focus {
	outline: none;
	border-color: var(--ink) !important;
	background: #fff !important;
}

@media (max-width: 760px) {
	.wpforms-styled div.wpforms-container .wpforms-form .wpforms-field-container { grid-template-columns: 1fr; }
}