/*
 * Secure Mail & Forms — frontend.
 *
 * The form takes its type, colours and spacing from the theme. Every rule sits
 * inside :where(), which has zero specificity, so a theme (or theme.json, or a
 * block's own styles) overrides any of it without !important.
 *
 * To restyle without touching this file, set the custom properties on
 * .secure-form-container or any ancestor:
 *
 *   --smf-gap              space between fields
 *   --smf-radius           corner radius of fields and button
 *   --smf-border           field border colour
 *   --smf-field-bg         field background
 *   --smf-accent           focus ring and checkbox
 *   --smf-button-bg        button background
 *   --smf-button-fg        button text
 *   --smf-success-bg / --smf-success-fg
 *   --smf-error-bg   / --smf-error-fg
 *
 * The button also carries WordPress's .wp-element-button class, so in a block theme
 * it takes the button style set in Appearance > Editor > Styles, and these defaults
 * only apply where the theme styles no buttons.
 *
 * 1.x shipped one client's look here (black button, dark fields forced with
 * !important, and a dark mode that followed the visitor's OS rather than the site).
 */

:where(.secure-form-container) {
	--smf-gap: 1.25rem;
	--smf-radius: 0.5rem;
	--smf-border: color-mix(in srgb, currentColor 30%, transparent);
	--smf-field-bg: transparent;
	--smf-accent: currentColor;
	--smf-button-bg: #1f1f1f;
	--smf-button-fg: #ffffff;
	--smf-success-bg: #ecfdf5;
	--smf-success-fg: #065f46;
	--smf-error-bg: #fef2f2;
	--smf-error-fg: #991b1b;
	max-width: 100%;
}

:where(.secure-form-container) :where(.smf-form) {
	display: grid;
	gap: var(--smf-gap);
}

:where(.secure-form-container) :where(.form-field) {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

:where(.secure-form-container) :where(.grouped-fields) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--smf-gap);
}

:where(.secure-form-container) :where(.form-field > label:not(.checkbox-label)) {
	font-weight: 600;
}

:where(.secure-form-container) :where(.required) {
	margin-inline-start: 0.15em;
}

:where(.secure-form-container) :where(.form-control) {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--smf-border);
	border-radius: var(--smf-radius);
	background: var(--smf-field-bg);
	color: inherit;
	font: inherit;
}

:where(.secure-form-container) :where(textarea.form-control) {
	min-height: 8rem;
	resize: vertical;
}

:where(.secure-form-container) :where(.form-control:focus-visible, .checkbox-label input:focus-visible, .submit-button:focus-visible) {
	outline: 2px solid var(--smf-accent);
	outline-offset: 2px;
}

:where(.secure-form-container) :where(.checkbox-label) {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.5;
	cursor: pointer;
}

:where(.secure-form-container) :where(.checkbox-label input[type="checkbox"]) {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--smf-accent);
}

:where(.secure-form-container) :where(.checkbox-text a) {
	color: inherit;
	text-decoration: underline;
}

:where(.secure-form-container) :where(.submit-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8em 1.6em;
	border: 0;
	border-radius: var(--smf-radius);
	background: var(--smf-button-bg);
	color: var(--smf-button-fg);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

:where(.secure-form-container) :where(.submit-button:disabled) {
	opacity: 0.7;
	cursor: progress;
}

:where(.secure-form-container) :where(.button-text, .loading-indicator) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

:where(.secure-form-container) :where(.loading-indicator)::before {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: smf-spin 0.8s linear infinite;
}

@keyframes smf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.secure-form-container) :where(.loading-indicator)::before {
		animation-duration: 2.4s;
	}
}

:where(.secure-form-container) :where(.smf-message) {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: var(--smf-gap);
	padding: 0.9rem 1.1rem;
	border-radius: var(--smf-radius);
}

:where(.secure-form-container) :where(.smf-message svg) {
	flex-shrink: 0;
}

:where(.secure-form-container) :where(.smf-message-success) {
	background: var(--smf-success-bg);
	color: var(--smf-success-fg);
}

:where(.secure-form-container) :where(.smf-message-error) {
	background: var(--smf-error-bg);
	color: var(--smf-error-fg);
}

:where(.secure-form-container) :where(.smf-privacy-notice) {
	margin-block-start: var(--smf-gap);
	font-size: 0.85em;
	opacity: 0.85;
}

:where(.secure-form-container) :where(.smf-privacy-notice p) {
	margin: 0 0 0.5em;
}

:where(.secure-form-container) :where(.smf-field-error) {
	margin: 0;
	font-size: 0.875em;
	color: var(--smf-error-fg);
}

:where(.secure-form-container) :where(.form-control[aria-invalid="true"], .checkbox-label input[aria-invalid="true"]) {
	border-color: var(--smf-error-fg);
	outline: 1px solid var(--smf-error-fg);
}

:where(.secure-form-container) :where(.smf-recaptcha) {
	gap: 0.5rem;
	font-size: 0.875em;
}

:where(.secure-form-container) :where(.smf-recaptcha-notice) {
	margin: 0;
}

:where(.secure-form-container) :where(.smf-recaptcha-consent) {
	justify-self: start;
	padding: 0.5em 1em;
	border: 1px solid var(--smf-border);
	border-radius: var(--smf-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

:where(.secure-form-container) :where(.smf-recaptcha.is-on .smf-recaptcha-notice) {
	display: none;
}

/* Honeypot: off-screen rather than display:none, which some bots check for.
   These two rules keep their specificity so a theme cannot reveal the trap. */
.secure-form-container .smf-hp,
.secure-form-container .input--hidden {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.secure-form-container [hidden] {
	display: none !important;
}

:where(.secure-form-container) :where(.screen-reader-text) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}