/* natama_forms — behavioural + supplementary styles.
 *
 * The main look is provided by natama_theme (_form.scss) through the shared,
 * Bootstrap-flavoured class names (.theme-form, .form-element, .form-control,
 * .form-label, .btn, .btn-primary, .actions, .help-block, .error, .required).
 * These rules only add the pieces the theme does not cover: conditional
 * visibility, the honeypot, checkbox/radio rows, fieldsets and the confirmation
 * box. Theme design tokens are used with safe fallbacks so the form still looks
 * reasonable if the theme is ever absent.
 */

/* Conditional fields hidden by the show/hide logic. */
.form-element[data-nf-visible='0'] {
	display: none;
}

/* Spam-protection honeypot — visually removed, still in the DOM. */
.nf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Checkbox / radio rows (the theme styles text-like inputs only). */
.form-check {
	margin: 0.3rem 0;
}

.form-check-label {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	cursor: pointer;
	font-weight: 400;
}

.form-check-input {
	flex: 0 0 auto;
	margin: 0;
}

/* Fieldset grouping. */
.nf-fieldset {
	margin: 0 0 var(--space-lg, 1.5rem);
	padding: var(--space-md, 1rem);
	border: 1px solid var(--theme-border, #d9e0ec);
	border-radius: var(--radius-sm, 4px);
	/* Each fieldset is its OWN query container. Crucially, container-size is
	   the fieldset's own allocated width — so a nested fieldset sitting in a
	   grid cell measures that cell's width, not the outer fieldset's width. */
	container-type: inline-size;
}

/* The grid lives on an inner wrapper, never on the fieldset itself: an element
   cannot respond to its own container query, so the wrapper reads the parent
   fieldset's container size. This is what makes nesting work at any depth. */
.nf-fieldset.nf-cols-2 > .nf-fieldset__grid,
.nf-fieldset.nf-cols-3 > .nf-fieldset__grid,
.nf-fieldset.nf-cols-4 > .nf-fieldset__grid {
	display: grid;
	grid-template-columns: 1fr; /* default: single column on narrow containers */
	gap: 0 var(--space-md, 1rem);
}

/* Activate columns based on each fieldset's own width. Because every fieldset
   is its own container, nested fieldsets query their real allocated width.
   NOTE: the selectors below intentionally repeat the full `.nf-fieldset.nf-cols-N`
   prefix so they match the specificity of the single-column default rule above
   (container queries add no specificity — a weaker selector would lose the cascade). */
@container (min-width: 28rem) {
	.nf-fieldset.nf-cols-2 > .nf-fieldset__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (min-width: 36rem) {
	.nf-fieldset.nf-cols-3 > .nf-fieldset__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@container (min-width: 44rem) {
	.nf-fieldset.nf-cols-4 > .nf-fieldset__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.nf-legend {
	padding: 0 0.4rem;
	font-weight: 700;
	color: var(--theme-text, #18212f);
}

/* General (form-level) error message. */
.nf-general-error {
	margin-bottom: var(--space-md, 1rem);
	font-weight: 600;
}

/* Confirmation message shown after a successful submission. */
.nf-confirmation {
	padding: var(--space-md, 1rem) var(--space-lg, 1.25rem);
	border: 1px solid var(--theme-accent, #2b5cff);
	border-radius: var(--radius-sm, 4px);
	background: color-mix(in srgb, var(--theme-accent, #2b5cff) 8%, transparent);
}

/* Per-field error list. */
.nf-errors {
	margin: var(--space-xs, 0.25rem) 0 0;
	padding-left: 1.1rem;
}

/* ---------------------------------------------------------------------------
 * Multi-step (pages) navigation.
 *
 * Progressive enhancement: the previous/next buttons and the step counter are
 * hidden until steps.js marks the form as .nf-stepped. Without JavaScript every
 * step stays visible and the form submits as one long page with a single submit
 * button at the end.
 * ------------------------------------------------------------------------- */
.nf-prev,
.nf-next,
.nf-step-status {
	display: none;
}

.nf-step-title {
	margin: 0 0 var(--space-md, 1rem);
}

.nf-stepped .nf-step-status {
	display: block;
	margin: 0 0 var(--space-md, 1rem);
	font-size: 0.875rem;
	color: var(--theme-text-muted, #5b6573);
}

/* Once stepping is active only the current step is shown, and its navigation
 * buttons become available. */
.nf-stepped .nf-step {
	display: none;
}

.nf-stepped .nf-step.is-active {
	display: block;
}

.nf-stepped .nf-step.is-active .nf-prev,
.nf-stepped .nf-step.is-active .nf-next {
	display: inline-block;
}

.nf-step-nav {
	margin-top: var(--space-md, 1rem);
}



/* While an AJAX submission is in flight, dim the form and block further input
 * without collapsing its layout. */
.nf-submitting {
	opacity: 0.6;
	pointer-events: none;
}