/*
 * Nomination form enhancement (REVERSIBLE).
 *
 * Brings the Swipeix nomination form (#chef-qualification-form / .chef-form,
 * rendered by the parent theme) in line with the new site UI, and styles the
 * accessible inline validation added by nomination.js. Additive + scoped: it
 * edits none of the parent-theme files. Loads only on the nomination page.
 *
 * Revert to the original look + behaviour entirely with:
 *   define( 'NGE_NOMINATION_FORM_ENHANCE', false );   // in wp-config.php
 * (or add_filter 'nge_nomination_form_enhance' => __return_false). That stops
 * this stylesheet + the script from enqueuing.
 */

.chef-form .form-input,
.chef-form .form-select,
.chef-form .form-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid #A6A6A6;
	border-radius: 4px;
	background: #FFFFFF;
	color: #1A1A1A;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.chef-form .form-textarea {
	resize: vertical;
	min-height: 110px;
}

.chef-form .form-input::placeholder,
.chef-form .form-textarea::placeholder {
	color: #8A8A8A;
}

.chef-form .form-input:focus,
.chef-form .form-select:focus,
.chef-form .form-textarea:focus {
	outline: none;
	border-color: #E7B040;
	box-shadow: 0 0 0 3px rgba( 231, 176, 64, .25 );
}

.chef-form .form-select:disabled {
	background: #F2F2F2;
	color: #8A8A8A;
	cursor: not-allowed;
}

.chef-form .question-label {
	display: block;
	margin-bottom: 6px;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: #1A1A1A;
}

.chef-form .required {
	color: #B42318;
}

/* Buttons: gold primary CTA, outlined secondary, matching the site. */
.chef-form .submit-btn,
.chef-form .add-nomination-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 22px;
	border: 0;
	border-radius: 6px;
	background: #E7B040;
	color: #1A1A1A;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.chef-form .add-nomination-btn {
	background: transparent;
	color: #1A1A1A;
	border: 1px solid #1A1A1A;
	font-weight: 500;
}

/* Re-assert every interaction state with !important: the Hello reset paints
   button :hover/:focus pink (#c36) and the template paints them grey (#eeeeee).
   This guards the gold CTA against both, permanently. */
.chef-form .submit-btn:hover,
.chef-form .submit-btn:focus,
.chef-form .submit-btn:focus-visible,
.chef-form .submit-btn:active {
	background: #C4A45D !important;
	color: #1A1A1A !important;
	border: 0 !important;
	outline: none;
}

.chef-form .add-nomination-btn:hover,
.chef-form .add-nomination-btn:focus-visible {
	background: #1A1A1A;
	color: #FFFFFF;
	outline: none;
}

.chef-form .submit-btn[disabled] {
	opacity: .6;
	cursor: wait;
}

/* Inline validation: per-field error + invalid state (replaces the bare red
   border + single generic message). */
.chef-form .ngnom-invalid,
.chef-form .ngnom-invalid:focus {
	border-color: #B42318 !important;
	box-shadow: 0 0 0 3px rgba( 180, 35, 24, .18 );
}

.chef-form .radio-group.ngnom-invalid {
	border: 1px solid #B42318;
	border-radius: 6px;
	padding: 8px;
}

.chef-form .ngnom-error {
	margin: 6px 0 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #B42318;
}

/* Form-level messages (this stylesheet only loads on the nomination page). */
.form-message {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 6px;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

.form-message.form-error {
	background: #FCEBEA;
	color: #8A1C13;
	border: 1px solid #F1B5B0;
}

.form-message.form-success {
	background: #ECF6EE;
	color: #1E5631;
	border: 1px solid #BFE0C6;
}

/* The form page must end at the Submit button: nothing below it. The page
   template renders the theme footer (duplicate logo + copyright) underneath,
   so hide the whole footer on this page. Scoped here (this stylesheet only
   loads on the nomination page), so every other page keeps its footer. */
#site-footer.dynamic-footer {
	display: none;
}