/*
 * Fix It Sticks / NRL22 community survey.
 *
 * Scoped to .fis-survey-page, a wrapper div placed around the [ninja_form]
 * shortcode in the page content. Ninja Forms' own "wrapper_class" setting does
 * reach .nf-form-cont, but the wrapper div is what gates the enqueue in
 * functions.php — it has to exist regardless, so it is the single hook.
 *
 * The survey paints its own surface and text colours rather than inheriting
 * them, because the parent theme's page background differs between templates
 * and a form that half-inherits reads as broken.
 */

.fis-survey-page {
	/* Fix It Sticks brand orange, sampled from fixitsticks.com. */
	--fis-accent: #dd5928;
	--fis-accent-strong: #ef6d3c;
	--fis-accent-ink: #ffffff;

	--fis-surface: #16181c;
	--fis-surface-raised: #1e2127;
	--fis-surface-input: #101216;
	--fis-border: #2e333c;
	--fis-border-strong: #444b57;

	--fis-text: #f2f4f7;
	--fis-text-muted: #a4acba;
	--fis-error: #ff6b6b;

	--fis-radius: 10px;
	--fis-gap: 28px;

	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	color: var(--fis-text);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- shell -- */

.fis-survey-page .nf-form-cont {
	background: var(--fis-surface);
	border: 1px solid var(--fis-border);
	border-radius: var(--fis-radius);
	padding: 40px 36px 44px;
}

.fis-survey-page .nf-form-fields-required {
	display: none;
}

.fis-survey-page .nf-form-content {
	padding: 0;
	max-width: none;
}

/* Ninja Forms ships a fixed bottom margin on every field container; the
   spacing here is driven by the question blocks instead. */
.fis-survey-page .nf-field-container {
	margin-bottom: 0;
}

/* ----------------------------------------------------------- sponsor bar -- */

/*
 * NRL22 owns the page — the site's own header and logo sit above this card — so
 * the survey names itself first and gives Fix It Sticks a clearly-labelled
 * sponsor lockup rather than co-equal billing.
 */
.fis-survey-page .fis-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 22px;
	margin-bottom: 4px;
	border-bottom: 3px solid var(--fis-accent);
}

.fis-survey-page .fis-brand__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fis-text);
}

.fis-survey-page .fis-brand__partner {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fis-survey-page .fis-brand__partner-label {
	font-size: 12px;
	line-height: 1.3;
	color: var(--fis-text-muted);
	text-align: right;
}

/* Their storefront only publishes this mark at 188px wide, so it is displayed
   below native size to stay sharp on a 2x screen. Swap in the vector when
   Fix It Sticks supply their press kit and this cap goes away. */
.fis-survey-page .fis-brand__logo {
	display: block;
	width: 132px;
	height: auto;
	max-width: 100%;
}

/* ----------------------------------------------------------------- intro -- */

.fis-survey-page .fis-intro {
	border-left: 3px solid var(--fis-accent);
	padding: 2px 0 2px 20px;
	margin-bottom: 8px;
}

.fis-survey-page .fis-intro p {
	margin: 0 0 14px;
	color: var(--fis-text-muted);
}

.fis-survey-page .fis-intro p:last-child {
	margin-bottom: 0;
}

.fis-survey-page .fis-intro__lede {
	font-size: 19px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--fis-text);
}

/* --------------------------------------------------------- section heads -- */

.fis-survey-page .fis-section-head {
	margin: calc(var(--fis-gap) + 14px) 0 4px;
	padding-top: 26px;
	border-top: 1px solid var(--fis-border);
}

.fis-survey-page .fis-section-head__num {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fis-accent);
	margin-bottom: 6px;
}

.fis-survey-page .fis-section-head__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--fis-text);
}

.fis-survey-page .fis-section-head__note {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--fis-text-muted);
}

/* ------------------------------------------------------------- questions -- */

.fis-survey-page .fis-q {
	margin-top: var(--fis-gap);
}

/* Ninja Forms emits a <label> for text inputs but a <span class="nf-label-span">
   for radio, checkbox and HTML fields, so the question heading needs both. */
.fis-survey-page .fis-q .nf-field-label label,
.fis-survey-page .fis-q .nf-field-label .nf-label-span {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--fis-text);
	margin-bottom: 4px;
}

/* The HTML fields carry the intro and section headings; their empty label
   wrapper would otherwise add stray vertical space. */
.fis-survey-page .html-container .nf-field-label,
.fis-survey-page .fis-section-head-wrap .nf-field-label,
.fis-survey-page .fis-brand-wrap .nf-field-label,
.fis-survey-page .fis-footer-wrap .nf-field-label,
.fis-survey-page .fis-intro-wrap .nf-field-label {
	display: none;
}

/* NF renders the required marker as a bare asterisk glued to the label text. */
.fis-survey-page .ninja-forms-req-symbol {
	color: var(--fis-accent);
	margin-left: 2px;
}

/* Ninja Forms always emits the description after the field element. For helper
   copy like "Select all that apply" that is too late to be useful, so the wrap
   is ordered explicitly rather than relying on the desc_pos setting. */
.fis-survey-page .fis-q .field-wrap {
	display: flex;
	flex-direction: column;
}

.fis-survey-page .fis-q .nf-field-label {
	order: 1;
}

.fis-survey-page .fis-q .nf-field-description {
	order: 2;
}

.fis-survey-page .fis-q .nf-field-element {
	order: 3;
}

.fis-survey-page .nf-field-description,
.fis-survey-page .nf-field-description p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--fis-text-muted);
	margin: 0 0 12px;
}

/* --------------------------------------------------------- text controls -- */

.fis-survey-page input[type="text"],
.fis-survey-page input[type="email"],
.fis-survey-page textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--fis-surface-input);
	border: 1px solid var(--fis-border-strong);
	border-radius: 8px;
	padding: 12px 14px;
	color: var(--fis-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fis-survey-page textarea {
	min-height: 120px;
	resize: vertical;
}

.fis-survey-page input[type="text"]::placeholder,
.fis-survey-page input[type="email"]::placeholder,
.fis-survey-page textarea::placeholder {
	color: #6b7382;
}

.fis-survey-page input[type="text"]:focus,
.fis-survey-page input[type="email"]:focus,
.fis-survey-page textarea:focus {
	outline: none;
	border-color: var(--fis-accent);
	box-shadow: 0 0 0 3px rgba(221, 89, 40, 0.30);
}

/* --------------------------------------------------- radio / checkbox UI -- */

.fis-survey-page .listradio-wrap .nf-field-element ul,
.fis-survey-page .listcheckbox-wrap .nf-field-element ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

/*
 * Ninja Forms renders the input and the label as siblings inside the li, so the
 * li itself is the option card and both children lay out inside it.
 *
 * Every selector in this block carries .nf-field-element purely for weight:
 * display-structure.css styles the same elements at equal specificity and is
 * enqueued when the form renders, which is always after this file, so a tie
 * would go to Ninja Forms. Where it ships !important (li margin and padding,
 * input width) matching it is the only way through — those are marked below.
 */
.fis-survey-page .listradio-wrap .nf-field-element li,
.fis-survey-page .listcheckbox-wrap .nf-field-element li {
	list-style: none;
	margin: 0 !important;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 16px 13px 15px !important;
	background: var(--fis-surface-raised);
	border: 1px solid var(--fis-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fis-survey-page .listradio-wrap .nf-field-element li:hover,
.fis-survey-page .listcheckbox-wrap .nf-field-element li:hover {
	border-color: var(--fis-border-strong);
	background: #232730;
}

.fis-survey-page .listradio-wrap .nf-field-element li label,
.fis-survey-page .listcheckbox-wrap .nf-field-element li label {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--fis-text);
	cursor: pointer;
}

/* Stretches the label's hit area over the whole card, so a tap anywhere on the
   row selects the option rather than only on the words. */
.fis-survey-page .listradio-wrap .nf-field-element li label::before,
.fis-survey-page .listcheckbox-wrap .nf-field-element li label::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Keeps the control itself above that overlay so it stays directly clickable. */
.fis-survey-page .listradio-wrap .nf-field-element li input,
.fis-survey-page .listcheckbox-wrap .nf-field-element li input {
	position: relative;
	z-index: 1;
}

.fis-survey-page .listradio-wrap .nf-field-element input[type="radio"],
.fis-survey-page .listcheckbox-wrap .nf-field-element input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	/* Beats display-structure.css's width:auto!important, which otherwise
	   collapses an appearance:none control to a 4px sliver. */
	width: 20px !important;
	height: 20px;
	/* Ninja Forms floats these left, which would drop them out of the flex row. */
	float: none;
	margin: 1px 0 0;
	background: var(--fis-surface-input);
	border: 2px solid var(--fis-border-strong);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fis-survey-page .listradio-wrap .nf-field-element input[type="radio"] {
	border-radius: 50%;
}

.fis-survey-page .listcheckbox-wrap .nf-field-element input[type="checkbox"] {
	border-radius: 5px;
}

.fis-survey-page .listradio-wrap .nf-field-element input[type="radio"]:checked,
.fis-survey-page .listcheckbox-wrap .nf-field-element input[type="checkbox"]:checked {
	border-color: var(--fis-accent);
	background: var(--fis-accent);
}

.fis-survey-page .listradio-wrap .nf-field-element input[type="radio"]:checked {
	box-shadow: inset 0 0 0 4px var(--fis-surface-input);
}

.fis-survey-page .listcheckbox-wrap .nf-field-element input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a1205' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
}

.fis-survey-page .listradio-wrap .nf-field-element input:focus-visible,
.fis-survey-page .listcheckbox-wrap .nf-field-element input:focus-visible {
	outline: 2px solid var(--fis-accent-strong);
	outline-offset: 2px;
}

/* Selected-card treatment. Ninja Forms also stamps nf-checked on the input when
   it re-renders the option, which covers any engine without :has(). */
.fis-survey-page .listradio-wrap .nf-field-element li:has(input:checked),
.fis-survey-page .listcheckbox-wrap .nf-field-element li:has(input:checked),
.fis-survey-page .listradio-wrap .nf-field-element li:has(input.nf-checked),
.fis-survey-page .listcheckbox-wrap .nf-field-element li:has(input.nf-checked) {
	border-color: var(--fis-accent);
	background: rgba(221, 89, 40, 0.12);
}

/* Options carrying a trailing description (kit sizes, torque offerings). */
.fis-survey-page .fis-q--rich li {
	padding: 15px 18px 15px 16px;
}

.fis-survey-page .fis-opt-title {
	display: block;
	font-weight: 700;
}

.fis-survey-page .fis-opt-desc {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fis-text-muted);
}

/* The 26 torque values: a dense chip grid rather than a 26-row column. */
.fis-survey-page .fis-q--grid .listcheckbox-wrap .nf-field-element ul {
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 8px;
}

.fis-survey-page .fis-q--grid .listcheckbox-wrap .nf-field-element li {
	padding: 10px 12px !important;
	gap: 9px;
}

.fis-survey-page .fis-q--grid .listcheckbox-wrap .nf-field-element li label {
	font-size: 14px;
	white-space: nowrap;
}

.fis-survey-page .fis-q--grid .listcheckbox-wrap .nf-field-element input[type="checkbox"] {
	width: 17px !important;
	height: 17px;
	margin-top: 2px;
}

/* --------------------------------------------------------- two-up fields -- */

/*
 * Ninja Forms' own one-half classes land on .nf-field-container, which is
 * nested inside a block-level <nf-field> — so floating it cannot pair two
 * fields on a row. The row is built on the wrapper instead, and :has() lifts
 * the half-width signal up to the <nf-field> that actually forms the column.
 */
.fis-survey-page nf-fields-wrap {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	row-gap: 0;
}

.fis-survey-page nf-fields-wrap > nf-field {
	flex: 0 0 100%;
	min-width: 0;
}

@media (min-width: 600px) {
	.fis-survey-page nf-fields-wrap > nf-field:has(.one-half) {
		flex: 0 0 calc(50% - 8px);
	}
}

/* ------------------------------------------------------------ conditional -- */

/*
 * Branch questions are hidden by Ninja Forms itself: fis-survey.js sets the
 * field model's visible flag, which removes the element outright rather than
 * just hiding it, so required validation is skipped along with it.
 *
 * This rule is the pre-script state only. Ninja Forms renders the form after
 * DOMContentLoaded, so without it every branch question would show for a frame
 * before the script runs.
 */
.fis-survey-page .fis-hidden {
	display: none !important;
}

/* ---------------------------------------------------------------- submit -- */

.fis-survey-page .fis-submit {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--fis-border);
	clear: both;
}

.fis-survey-page .fis-turnstile {
	margin-top: var(--fis-gap);
}

/*
 * White on the brand orange is 3.8:1, which clears WCAG AA only at large-text
 * size — hence 19px/700 (past the 14pt bold threshold) rather than the 16px the
 * other controls use. Do not shrink this without switching to dark ink.
 */
.fis-survey-page input[type="button"].ninja-forms-field,
.fis-survey-page input[type="submit"].ninja-forms-field {
	width: 100%;
	background: var(--fis-accent);
	color: var(--fis-accent-ink);
	border: none;
	border-radius: 8px;
	padding: 17px 28px;
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.08s ease;
}

.fis-survey-page input[type="button"].ninja-forms-field:hover,
.fis-survey-page input[type="submit"].ninja-forms-field:hover {
	background: var(--fis-accent-strong);
}

.fis-survey-page input[type="button"].ninja-forms-field:active,
.fis-survey-page input[type="submit"].ninja-forms-field:active {
	transform: translateY(1px);
}

.fis-survey-page input[type="button"].ninja-forms-field:focus-visible,
.fis-survey-page input[type="submit"].ninja-forms-field:focus-visible {
	outline: 2px solid var(--fis-accent-strong);
	outline-offset: 3px;
}

.fis-survey-page .nf-field-container.submit-container .nf-field-element {
	margin: 0;
}

/* ----------------------------------------------------------------- errors -- */

.fis-survey-page .nf-error-msg,
.fis-survey-page .ninja-forms-field-error {
	color: var(--fis-error);
	font-size: 14px;
	margin-top: 6px;
}

.fis-survey-page .nf-error .nf-field-element input[type="text"],
.fis-survey-page .nf-error .nf-field-element input[type="email"],
.fis-survey-page .nf-error .nf-field-element textarea {
	border-color: var(--fis-error);
}

.fis-survey-page .nf-error.field-wrap .nf-field-element::after {
	display: none;
}

/* ---------------------------------------------------------------- footer -- */

.fis-survey-page .fis-footer {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--fis-border);
}

.fis-survey-page .fis-footer p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--fis-text-muted);
}

/* ------------------------------------------------------------ thank you -- */

.fis-survey-page .fis-thanks {
	border-left: 3px solid var(--fis-accent);
	padding: 4px 0 4px 20px;
}

.fis-survey-page .fis-thanks h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 700;
	color: var(--fis-text);
}

.fis-survey-page .fis-thanks p {
	margin: 0;
	color: var(--fis-text-muted);
}

.fis-survey-page .nf-response-msg {
	font-size: 16px;
}

/* -------------------------------------------------------------- responsive -- */

@media (max-width: 640px) {
	.fis-survey-page .nf-form-cont {
		padding: 26px 18px 30px;
		border-radius: 8px;
	}

	.fis-survey-page {
		--fis-gap: 24px;
		font-size: 15px;
	}

	.fis-survey-page .fis-intro__lede {
		font-size: 17px;
	}

	.fis-survey-page .fis-section-head__title {
		font-size: 20px;
	}

	/* Keep the tap target comfortable on a phone even in the dense grid. */
	.fis-survey-page .fis-q--grid .listcheckbox-wrap .nf-field-element ul {
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	}

	.fis-survey-page .fis-q--grid .listcheckbox-wrap .nf-field-element li {
		padding: 12px 10px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fis-survey-page * {
		transition: none !important;
	}
}