/* -----------------------------------------------------------------------------
 * Gravity Forms, wearing the UniverseZero.one design system.
 *
 * Gravity Forms 2.7+ ships the "orbital" theme framework, which is driven
 * entirely by CSS custom properties on the form wrapper. That is the supported
 * way to restyle it, and it is what this file uses: it sets tokens, it does not
 * fight selectors and it does not touch a single element rule the plugin relies
 * on.
 *
 * The consequence matters. Validation, conditional logic, ARIA wiring, error
 * association, the live regions and the required-field announcements are all
 * Gravity Forms' own and are left completely intact — the form simply stops
 * being white-on-white inside a dark page.
 *
 * The plugin's default palette is built for a light background: white control
 * backgrounds, #112337 label text and a #204ce5 blue accent. Every token below
 * is one of those, remapped to the theme palette.
 * -------------------------------------------------------------------------- */

.uz-form {
	/* The page's accent, so a form on Community reads violet and one on Start
	   Here reads cyan — the same rule the rest of the page follows. */
	--uz-form-accent: var(--uz-page-accent, var(--uz-electric-cyan));
	--uz-form-accent-text: var(--uz-page-accent-text, var(--uz-form-accent));
}

/* =========================================================================
 * Gravity Forms theme tokens
 * ====================================================================== */
.uz-form .gform_wrapper.gform-theme,
.uz-form .gform_wrapper {

	/* --- Accent ------------------------------------------------------- */
	--gf-color-primary: var(--uz-form-accent);
	--gf-color-primary-darker: var(--uz-form-accent);
	--gf-color-primary-lighter: var(--uz-form-accent);
	--gf-color-primary-contrast: var(--uz-void-black);
	--gf-color-in-ctrl-primary: var(--uz-form-accent);
	--gf-color-in-ctrl-primary-darker: var(--uz-form-accent);
	--gf-color-in-ctrl-primary-lighter: var(--uz-form-accent);
	--gf-color-in-ctrl-primary-contrast: var(--uz-void-black);
	--gf-ctrl-accent-color: var(--uz-form-accent);
	--gf-ctrl-choice-check-color: var(--uz-form-accent);
	--gf-ctrl-border-color-focus: var(--uz-form-accent);
	--gf-ctrl-desc-border-color-consent-focus: var(--uz-form-accent);
	--gf-form-spinner-fg-color: var(--uz-void-black);
	--gf-form-spinner-fg-color-secondary: var(--uz-form-accent);

	/* --- Control surfaces --------------------------------------------- */
	--gf-color-secondary: var(--uz-void-black);
	--gf-color-secondary-lighter: var(--uz-void-black);
	--gf-color-secondary-darker: var(--uz-deep-surface);
	--gf-color-in-ctrl: var(--uz-void-black);
	--gf-color-in-ctrl-lighter: var(--uz-void-black);
	--gf-color-in-ctrl-darker: var(--uz-deep-surface);
	--gf-ctrl-bg-color: var(--uz-void-black);
	--gf-ctrl-bg-color-hover: var(--uz-void-black);
	--gf-ctrl-bg-color-focus: var(--uz-void-black);
	--gf-ctrl-bg-color-error: var(--uz-void-black);
	--gf-ctrl-bg-color-disabled: var(--uz-deep-surface);
	--gf-ctrl-date-picker-bg-color: var(--uz-deep-surface);

	/* --- Text on controls and labels ---------------------------------- */
	--gf-color-secondary-contrast: var(--uz-warm-white);
	--gf-color-in-ctrl-contrast: var(--uz-warm-white);
	--gf-color-out-ctrl-dark-darker: var(--uz-warm-white);
	--gf-color-in-ctrl-dark-darker: var(--uz-warm-white);
	--gf-ctrl-color: var(--uz-warm-white);
	--gf-ctrl-color-hover: var(--uz-warm-white);
	--gf-ctrl-color-focus: var(--uz-warm-white);
	--gf-ctrl-color-error: var(--uz-warm-white);
	--gf-ctrl-readonly-color: var(--uz-warm-white);
	--gf-ctrl-label-color-primary: var(--uz-warm-white);
	--gf-ctrl-label-color-secondary: var(--uz-warm-white);
	--gf-ctrl-icon-color-hover: var(--uz-warm-white);
	--gf-ctrl-icon-color-focus: var(--uz-warm-white);
	--gf-ctrl-file-prev-name-color: var(--uz-warm-white);

	/* --- Muted text: descriptions, placeholders, icons ---------------- */
	--gf-color-out-ctrl-dark-lighter: var(--uz-muted-text);
	--gf-color-in-ctrl-dark-lighter: var(--uz-muted-text);
	--gf-ctrl-icon-color: var(--uz-muted-text);
	--gf-ctrl-icon-color-disabled: var(--uz-muted-text);
	--gf-ctrl-placeholder-color: var(--uz-muted-text);

	/* --- Borders ------------------------------------------------------- */
	--gf-ctrl-border-color: var(--uz-border-control);
	--gf-ctrl-border-color-hover: var(--uz-border-control);
	--gf-ctrl-border-color-disabled: var(--uz-border);
	--gf-color-out-ctrl-light-darker: var(--uz-border);
	--gf-color-in-ctrl-light-darker: var(--uz-border);
	--gf-color-out-ctrl-light-lighter: var(--uz-border);
	--gf-color-in-ctrl-light-lighter: var(--uz-border);
	--gf-color-out-ctrl-light: var(--uz-border);
	--gf-color-in-ctrl-light: var(--uz-border);
	--gf-ctrl-desc-border-color-consent: var(--uz-border);
	--gf-field-section-border-color: var(--uz-border);

	/* --- Submit button -------------------------------------------------
	 * Both the "primary" and "ctrl" button roles, because the submit button
	 * uses one or the other depending on the form's button settings.
	 * ------------------------------------------------------------------ */
	--gf-ctrl-btn-bg-color-primary: var(--uz-form-accent);
	--gf-ctrl-btn-bg-color-hover-primary: var(--uz-form-accent);
	--gf-ctrl-btn-bg-color-focus-primary: var(--uz-form-accent);
	--gf-ctrl-btn-bg-color-ctrl: var(--uz-form-accent);
	--gf-ctrl-btn-bg-color-hover-ctrl: var(--uz-form-accent);
	--gf-ctrl-btn-bg-color-focus-ctrl: var(--uz-form-accent);
	--gf-ctrl-btn-color-primary: var(--uz-void-black);
	--gf-ctrl-btn-color-hover-primary: var(--uz-void-black);
	--gf-ctrl-btn-color-focus-primary: var(--uz-void-black);
	--gf-ctrl-btn-color-ctrl: var(--uz-void-black);
	--gf-ctrl-btn-color-hover-ctrl: var(--uz-void-black);
	--gf-ctrl-btn-color-focus-ctrl: var(--uz-void-black);
	--gf-ctrl-btn-border-color-primary: var(--uz-form-accent);
	--gf-ctrl-btn-border-color-focus-primary: var(--uz-form-accent);
	--gf-ctrl-btn-border-color-focus-ctrl: var(--uz-form-accent);
	--gf-ctrl-btn-border-color-secondary: var(--uz-border-control);
	--gf-ctrl-btn-border-color-tertiary: var(--uz-border-control);
	--gf-ctrl-btn-color-secondary: var(--uz-warm-white);
	--gf-ctrl-btn-color-tertiary: var(--uz-warm-white);
	--gf-ctrl-btn-bg-color-secondary: transparent;
	--gf-ctrl-btn-bg-color-tertiary: transparent;
	--gf-ctrl-btn-radius: var(--uz-radius-pill);
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-padding-x: 1.75rem;
	--gf-ctrl-btn-size: var(--uz-touch-target);

	/* --- Danger / success ---------------------------------------------- */
	--gf-color-danger: #FF7A7A;
	--gf-color-danger-contrast: var(--uz-void-black);
	--gf-color-success: #57D69B;
	--gf-color-success-contrast: var(--uz-void-black);
	--gf-form-validation-heading-icon-bg-color: rgba(255, 122, 122, 0.12);

	/* --- Shape and type ------------------------------------------------ */
	--gf-ctrl-radius: var(--uz-radius-md);
	--gf-ctrl-textarea-radius: var(--uz-radius-md);
	--gf-ctrl-size: var(--uz-touch-target);
	--gf-ctrl-choice-size: 1.15rem;
	--gf-ctrl-outline-color: transparent;
	--gf-font-family-primary: var(--uz-font-body);
	--gf-ctrl-label-font-family-primary: var(--uz-font-heading);
	--gf-ctrl-label-font-family-secondary: var(--uz-font-heading);
}

/* =========================================================================
 * A small amount of layout the tokens cannot express
 * ====================================================================== */
.uz-form .gform_wrapper { margin: 0; }

/* Name and email sit side by side where there is room. */
@media (min-width: 620px) {
	.uz-form .gform_wrapper .gfield--width-half { grid-column: span 6; }
}

/*
 * The required marker is a visible "(Required)" word supplied by Gravity Forms,
 * so the state is never conveyed by colour alone. Amber simply makes it legible.
 */
.uz-form .gform_wrapper .gfield_required { color: var(--uz-human-amber); }

/* Consent fields carry legal weight, so they are set apart from the ordinary
   questions. The two survey consents remain independent Gravity Forms fields. */
.uz-form .gform_wrapper .gfield--type-consent {
	padding: var(--uz-space-lg);
	background: rgba(125, 196, 230, 0.05);
	border: 1px solid var(--uz-border);
	border-radius: var(--uz-radius-md);
}
.uz-form .gform_wrapper .gfield--type-consent a { color: var(--uz-form-accent-text); }

/* Every choice row clears the 24px target-size floor in WCAG 2.2 SC 2.5.8. */
.uz-form .gform_wrapper .gchoice { min-height: 2rem; display: flex; align-items: flex-start; gap: var(--uz-space-sm); }
.uz-form .gform_wrapper .gchoice label { cursor: pointer; }

@media (min-width: 720px) {
	/* Long checkbox lists read better in two columns. */
	.uz-form .gform_wrapper .gfield--type-checkbox .gfield_checkbox {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--uz-space-lg);
	}
	.uz-form .gform_wrapper .gfield--type-consent .gfield_checkbox { display: block; }
}

/* The theme's own focus ring, on top of Gravity Forms' outline handling. */
.uz-form .gform_wrapper :where(input, select, textarea, button, a):focus-visible {
	outline: 3px solid var(--uz-focus);
	outline-offset: 3px;
}

/*
 * Confirmation message, once the form has been replaced by it.
 *
 * Only the innermost message carries the panel. Gravity Forms nests the message
 * inside a wrapper, and the survey nests that inside its own panel, so styling
 * more than one of them produced a box inside a box inside a box.
 */
.uz-form .gform_confirmation_wrapper { padding: 0; background: none; border: 0; }
.uz-form .gform_confirmation_message {
	padding: var(--uz-space-xl);
	background: rgba(87, 214, 155, 0.08);
	border: 1px solid rgba(87, 214, 155, 0.45);
	border-radius: var(--uz-radius-lg);
	color: var(--uz-warm-white);
	font-size: var(--uz-text-lg);
	line-height: 1.6;
}
.uz-form .gform_confirmation_message p:last-child { margin-bottom: 0; }

/* The survey panel is the form's frame; once the form is gone it is redundant. */
.uz-survey__panel:has(.gform_confirmation_wrapper) { padding: 0; background: none; border: 0; }

/* Gravity Forms hides the honeypot itself; belt and braces so it can never
   become a visible or focusable control. */
.uz-form .gform_wrapper .gform_validation_container { display: none !important; }

/* =========================================================================
 * The unavailable state — an honest notice, never a fake form
 * ====================================================================== */
.uz-form--unavailable {
	padding: var(--uz-space-lg);
	background: var(--uz-bg-card);
	border: 1px dashed var(--uz-border-strong);
	border-radius: var(--uz-radius-md);
}
.uz-form__notice { margin: 0; color: var(--uz-muted-text); font-size: var(--uz-text-sm); }

@media (prefers-reduced-motion: reduce) {
	.uz-form .gform_wrapper * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}