/* ==========================================================================
   Shared components: buttons, cards, pills, forms. Defined once, reused
   across header/hero/sections/footer — never redeclared ad hoc per section.
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-sm);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body);
	line-height: 1;
	white-space: nowrap;
	transition: transform var(--dur-fast) var(--ease-standard),
	            box-shadow var(--dur-fast) var(--ease-standard),
	            background-color var(--dur-fast) var(--ease-standard),
	            color var(--dur-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--c-cta-primary);
	color: var(--c-white);
	box-shadow: var(--shadow-amber-glow);
}
.btn--primary:hover { background: var(--c-cta-primary-hover); }

.btn--secondary {
	background: transparent;
	color: var(--c-cta-secondary);
	border: 1.5px solid var(--c-cta-secondary);
}
.btn--secondary:hover { background: var(--c-cta-secondary); color: var(--c-white); }

.btn--secondary-on-dark {
	background: transparent;
	color: var(--c-ink-on-dark);
	border: 1.5px solid rgba(243, 236, 221, 0.35);
}
.btn--secondary-on-dark:hover { border-color: var(--c-amber-500); color: var(--c-amber-500); }

.btn--ghost {
	background: transparent;
	color: var(--c-navy-950);
	padding-inline: var(--space-3);
	font-weight: var(--fw-semibold);
}
.btn--ghost::after { content: '←'; margin-inline-start: var(--space-2); transition: transform var(--dur-fast) var(--ease-standard); display: inline-block; }
.btn--ghost:hover::after { transform: translateX(-4px); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-small); }
.btn--block { width: 100%; }

/* ---- Pills (Problem Navigator secondary options) ---- */
.ns-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background: var(--c-white);
	color: var(--c-ink-900);
	border: 1.5px solid var(--c-border-light);
	border-radius: var(--radius-pill);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.ns-pill:hover, .ns-pill:focus-visible { border-color: var(--c-amber-500); color: var(--c-amber-600); background: var(--c-amber-100); }

/* ---- Cards ---- */
.ns-card {
	background: var(--c-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.ns-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

/* ---- Numbered label (Equipment showcase) ---- */
.ns-numeral {
	font-family: var(--font-base);
	font-weight: var(--fw-black);
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--c-amber-500);
	opacity: 0.9;
}

/* ---- Forms ---- */
.ns-form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.ns-form-field label { font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.ns-form-field input,
.ns-form-field select,
.ns-form-field textarea {
	padding: var(--space-3) var(--space-4);
	border: 1.5px solid var(--c-border-light);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	transition: border-color var(--dur-fast) var(--ease-standard);
}
.ns-form-field input:focus,
.ns-form-field select:focus,
.ns-form-field textarea:focus { border-color: var(--c-cta-secondary); }
.ns-form-field textarea { min-height: 120px; resize: vertical; }
.ns-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 600px) { .ns-form-row { grid-template-columns: 1fr; } }

.ns-form-note { font-size: var(--fs-small); color: var(--c-ink-muted); }
.ns-form-success { padding: var(--space-4); background: rgba(30,158,90,0.12); color: var(--c-success-600); border-radius: var(--radius-sm); font-weight: var(--fw-semibold); }
.ns-form-error { padding: var(--space-4); background: rgba(192,57,43,0.12); color: var(--c-danger-600); border-radius: var(--radius-sm); font-weight: var(--fw-semibold); }

/* Honeypot — hidden from humans, visible to naive bots */
.ns-hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ---- Scroll reveal ---- */
.ns-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.ns-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.ns-reveal { opacity: 1; transform: none; transition: none; }
}