/*
 * Form styling.
 *
 * All cosmetic rules are wrapped in :where() with zero specificity — any
 * theme rule wins on cascade. Theme tokens (--color-*, --size-*) are consumed
 * via var() with fallback chains, so:
 *   - sites that define those tokens get their design system applied,
 *   - sites that don't get sensible neutral defaults,
 *   - sites that want explicit control can override --ff-* at any scope.
 *
 * Functional rules (honeypot hide, error state, empty-error collapse,
 * textarea resize) keep normal specificity so they always apply.
 */

:where(.fortrydelsesformular) {
	/* Surfaces / borders */
	--ff-input-border: var(--color-brand-25, #c3c4c7);
	--ff-radius: 4px;

	/* Accent (focus ring, link-like elements) */
	--ff-accent: var(--color-gold, #2271b1);

	/* Primary action (button) */
	--ff-primary-bg: var(--color-brand-100, #2271b1);
	--ff-primary-fg: var(--color-brand-10, #ffffff);

	/* Status colors */
	--ff-error: var(--color-red, #b32d2e);
	--ff-success-fg: var(--color-green-60, #14532d);

	/* Spacing — uses theme size tokens when present */
	--ff-pad-y: var(--size-12, 0.55rem);
	--ff-pad-x: var(--size-16, 0.75rem);
	--ff-btn-pad-y: var(--size-12, 0.6rem);
	--ff-btn-pad-x: var(--size-24, 1.5rem);
}

/* Stack labels above their inputs by default */
:where(.fortrydelsesformular label) {
	display: block;
}

/* Vertical breathing room between fields */
.fortrydelsesformular .ff-field {
	margin-bottom: var(--size-20, 1.25rem);
}

.fortrydelsesformular .ff-actions {
	margin-top: 2rem;
}

/* Inputs / textareas */
:where(.fortrydelsesformular input, .fortrydelsesformular textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: var(--ff-pad-y) var(--ff-pad-x);
	border: 1px solid var(--ff-input-border);
	border-radius: var(--ff-radius);
	background: transparent;
	font: inherit;
	color: inherit;
}

:where(.fortrydelsesformular input:focus, .fortrydelsesformular textarea:focus) {
	outline: 2px solid var(--ff-accent);
	outline-offset: -1px;
}

/* Submit button */
:where(.fortrydelsesformular button[type="submit"]) {
	background: var(--ff-primary-bg);
	color: var(--ff-primary-fg);
	border: 0;
	padding: var(--ff-btn-pad-y) var(--ff-btn-pad-x);
	border-radius: var(--ff-radius);
	font: inherit;
	cursor: pointer;
}

:where(.fortrydelsesformular button[type="submit"]:hover) {
	filter: brightness(0.92);
}

:where(.fortrydelsesformular button[type="submit"]:focus) {
	outline: 2px solid var(--ff-accent);
	outline-offset: 2px;
}

:where(.fortrydelsesformular button[type="submit"]:disabled) {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Required asterisk */
:where(.ff-required) {
	color: var(--ff-error);
}

/* Notice banner — plugin-only class, no theme conflict */
:where(.ff-notice) {
	padding-left: 0.75rem;
	border-left: 3px solid;
	margin: 0 0 1rem;
}

.ff-notice[hidden] {
	display: none;
}

:where(.ff-notice--success) {
	color: var(--ff-success-fg);
}

:where(.ff-notice--error) {
	color: var(--ff-error);
}

/* Field error message — plugin-only class */
:where(.ff-error) {
	display: block;
	color: var(--ff-error);
	font-size: 0.875em;
}

.ff-error:empty {
	display: none;
}

/*
 * Error state on input — !important because Bootstrap's .form-control and
 * many theme rules target inputs at the same specificity and load later.
 * Validation indicators MUST be visible; treating as functional, not cosmetic.
 */
.ff-input--error {
	border-color: var(--ff-error) !important;
}

/* Non-resizable textarea (functional — note field stays the size we set). */
.fortrydelsesformular textarea {
	resize: none;
}

/* Honeypot — must always be hidden */
.ff-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}