/* =====================================================================
   ADHD UK Form Theme
   Brands Gravity Forms (Orbital theme) in ADHD UK styling.
   ---------------------------------------------------------------------
   Design goals:
   - ADHD UK purple (#651077) as the core brand colour
   - Rounded corners on ALL elements (inputs, selects, buttons, bars)
   - Clear, high-contrast, generously spaced layout that is friendly
     for long / complex questionnaires (strong focus states, large
     touch targets, obvious primary buttons)
   - Progress bar kept as a purple pill with a light-grey track
   ---------------------------------------------------------------------
   HOW TO TWEAK: change the values in the :root block below. Everything
   else references these variables, so a colour change cascades.
   ===================================================================== */

:root {
	/* --- Brand palette --- */
	--adhduk-purple:        #651077;
	--adhduk-purple-dark:   #4d0c5b;
	--adhduk-purple-tint:   #f2e7f5;
	--adhduk-focus-ring:    rgba(101, 16, 119, 0.30);

	/* --- Neutrals --- */
	--adhduk-text:          #2b2b33;
	--adhduk-label:         #3a3a44;
	--adhduk-border:        #c7c7d1;
	--adhduk-input-bg:      #ffffff;
	--adhduk-track:         #ececec;
	--adhduk-error:         #c0392b;

	/* --- Shape & spacing --- */
	--adhduk-radius:        8px;
	--adhduk-radius-btn:    10px;
	--adhduk-radius-pill:   50px;
	--adhduk-field-gap:     24px;

	/* --- Text sizes (rem = respects browser zoom).
	   Bump these to make form text bigger/smaller. --- */
	--adhduk-question-size: 1.125rem;  /* question labels  (~18px) */
	--adhduk-choice-size:   1.0625rem; /* options, inputs, descriptions */
	--adhduk-btn-size:      1.125rem;  /* Next / Previous / Submit */
}

/* 1. Gravity Forms CSS API (preferred hook) */
.gform-theme--framework,
.gform-theme--foundation,
.gform_wrapper.gravity-theme {
	--gf-color-primary:                   var(--adhduk-purple);
	--gf-color-primary-rgb:               101, 16, 119;
	--gf-color-primary-contrast:          #ffffff;
	--gf-color-primary-darker:            var(--adhduk-purple-dark);
	--gf-color-primary-lighter:           var(--adhduk-purple-tint);
	--gf-ctrl-radius:                     var(--adhduk-radius);
	--gf-ctrl-border-color:               var(--adhduk-border);
	--gf-ctrl-bg-color:                   var(--adhduk-input-bg);
	--gf-ctrl-color:                      var(--adhduk-text);
	--gf-ctrl-border-color-focus:         var(--adhduk-purple);
	--gf-ctrl-btn-radius:                 var(--adhduk-radius-btn);
	--gf-ctrl-btn-bg-color-primary:       var(--adhduk-purple);
	--gf-ctrl-btn-bg-color-hover-primary: var(--adhduk-purple-dark);
	--gf-ctrl-btn-color-primary:          #ffffff;
}

/* 2. Explicit selectors (robust backbone) */
.gform_wrapper .gfield {
	margin-top: var(--adhduk-field-gap);
}

/* Labels (question text) */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	color: var(--adhduk-label);
	font-weight: 700;
	font-size: var(--adhduk-question-size);
	line-height: 1.4;
}

/* Choice options, descriptions & input text */
.gform_wrapper .gchoice label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_description,
.gform_wrapper .gsection .gsection_description,
.gform_wrapper .gfield input,
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
	font-size: var(--adhduk-choice-size);
	line-height: 1.5;
}

/* Required marker */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_text {
	color: var(--adhduk-purple);
}

/* Text inputs, textareas, selects */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="search"],
.gform_wrapper textarea,
.gform_wrapper select {
	border: 1px solid var(--adhduk-border);
	border-radius: var(--adhduk-radius);
	background-color: var(--adhduk-input-bg);
	color: var(--adhduk-text);
	padding: 12px 14px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper select {
	min-height: 48px;
	border-radius: var(--adhduk-radius);
}

/* Focus state */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--adhduk-purple);
	outline: none;
	box-shadow: 0 0 0 3px var(--adhduk-focus-ring);
}

/* Radios & checkboxes */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
	accent-color: var(--adhduk-purple);
	width: 1.15em;
	height: 1.15em;
}

/* 3. Buttons — primary = solid purple, Previous = outlined */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button,
.gform_wrapper input.gform-button,
.gform_wrapper button.gform-button {
	background-color: var(--adhduk-purple);
	color: #ffffff;
	border: 2px solid var(--adhduk-purple);
	border-radius: var(--adhduk-radius-btn);
	padding: 15px 44px;
	font-size: var(--adhduk-btn-size);
	font-weight: 700;
	letter-spacing: 0.2px;
	min-height: 54px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper input.gform-button:hover,
.gform_wrapper button.gform-button:hover {
	background-color: var(--adhduk-purple-dark);
	border-color: var(--adhduk-purple-dark);
}

.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_page_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_next_button:focus-visible,
.gform_wrapper .gform_button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--adhduk-focus-ring);
}

.gform_wrapper .gform_previous_button,
.gform_wrapper input.gform_previous_button {
	background-color: #ffffff;
	color: var(--adhduk-purple);
	border: 2px solid var(--adhduk-purple);
	border-radius: var(--adhduk-radius-btn);
	padding: 15px 44px;
	font-size: var(--adhduk-btn-size);
	font-weight: 700;
	letter-spacing: 0.2px;
	min-height: 54px;
	cursor: pointer;
}
.gform_wrapper .gform_previous_button:hover,
.gform_wrapper input.gform_previous_button:hover {
	background-color: var(--adhduk-purple-tint);
}

/* 4. Multi-step progress bar (ADHD UK purple pill) */
.gform_wrapper .gf_progressbar_title,
.gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title {
	color: var(--adhduk-label);
	font-size: 0.95em;
	font-weight: 600;
	margin-bottom: 8px;
}

.gform_wrapper .gf_progressbar {
	background-color: var(--adhduk-track);
	border-radius: var(--adhduk-radius-pill);
	height: 28px;
	overflow: hidden;
	box-shadow: none;
}

.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage[class*="percentbar_"] {
	background-color: var(--adhduk-purple) !important;
	border-radius: var(--adhduk-radius-pill);
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 2.5em;
	transition: width 0.3s ease;
}

.gform_wrapper .gf_progressbar_percentage span {
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.85em;
	padding-right: 12px;
	background: none;
}

/* 5. Validation / error states */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--adhduk-error);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	color: var(--adhduk-error);
	font-weight: 600;
	border-radius: var(--adhduk-radius);
}

/* 6. (OPTIONAL) To brand SOME forms only, replace .gform_wrapper with
   #gform_wrapper_<id> (e.g. #gform_wrapper_8) throughout. Leaving it
   global keeps every questionnaire consistent. */