/* ---------------------------------------------------------------------------
   Base — reset, typography, buttons, forms.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--nx-font-body);
	font-size: var(--nx-body);
	line-height: 1.7;
	color: var(--nx-text);
	background: var(--nx-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--nx-purple); text-decoration: none; transition: color var(--nx-transition); }
a:hover { color: var(--nx-purple-deep); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nx-font-heading);
	font-weight: 500;
	color: var(--nx-ink);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: var(--nx-h1); }
h2 { font-size: var(--nx-h2); }
h3 { font-size: var(--nx-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--nx-rule); margin: 2rem 0; }

table { border-collapse: collapse; width: 100%; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 10000;
	background: var(--nx-purple); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--nx-purple);
	outline-offset: 2px;
}

/* --- Buttons ------------------------------------------------------------- */

.nx-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--nx-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 13px 26px;
	border: 1px solid var(--nx-purple);
	border-radius: var(--nx-radius);
	background: var(--nx-purple);
	color: var(--nx-white);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition);
}

.nx-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--nx-purple-deep);
	border-color: var(--nx-purple-deep);
	color: var(--nx-white);
}

.nx-btn--ghost {
	background: transparent;
	color: var(--nx-purple);
}
.nx-btn--ghost:hover { background: var(--nx-purple); color: var(--nx-white); }

.nx-btn--navy { background: var(--nx-navy); border-color: var(--nx-navy); }
.nx-btn--navy:hover { background: var(--nx-ink); border-color: var(--nx-ink); }

.nx-btn[disabled], .woocommerce button.button:disabled, .woocommerce button.button.disabled {
	opacity: 0.5; cursor: not-allowed;
}

/* --- Forms --------------------------------------------------------------- */

label { font-family: var(--nx-font-form); }

/* A DELIBERATE choice, not a measurement.
   These were briefly set from a diff against the source checkout — but that
   reading was taken before WFACP's stylesheets were harvested, so it was really
   measuring Astra defaults leaking through. The source's own form chrome belongs
   to a funnel checkout this build does not ship, so there is nothing meaningful
   to match: 16px and a 3px radius keep the fields consistent with this theme's
   own buttons, and Exo is source-correct (the Elementor kit sets it on labels
   and inputs).

   The rule's :not() chain gives it (0,4,1), so it out-specifies later
   class-based overrides — values have to be right HERE, not patched downstream. */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	font-family: var(--nx-font-form);
	font-size: 16px;
	line-height: 1.4;
	width: 100%;
	padding: 11px 13px;
	color: var(--nx-ink);
	background: var(--nx-white);
	border: 1px solid var(--nx-rule);
	border-radius: 3px;
	transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--nx-purple);
	box-shadow: 0 0 0 3px var(--nx-purple-10);
	outline: none;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M12 15.4 5.6 9 7 7.6l5 5 5-5L18.4 9Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 18px;
	padding-right: 34px;
}

textarea { min-height: 140px; resize: vertical; }

/* --- Utility ------------------------------------------------------------- */

.nx-container {
	width: 100%;
	max-width: var(--nx-container);
	margin-inline: auto;
	padding-inline: var(--nx-gutter);
}

.nx-section { padding-block: 50px; }

.nx-eyebrow {
	font-family: var(--nx-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nx-purple);
}

.nx-center { text-align: center; }

.nx-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Accordion (homepage FAQ + product data panels) ---------------------- */

.nx-accordion {
	max-width: 900px;
	margin-inline: auto;
	border: 1px solid var(--nx-rule);
	border-radius: var(--nx-radius-lg);
	overflow: hidden;
	background: var(--nx-white);
}

.nx-accordion__item + .nx-accordion__item { border-top: 1px solid var(--nx-rule); }

.nx-accordion__heading { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; }

.nx-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 22px;
	border: 0;
	background: transparent;
	font-family: var(--nx-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--nx-ink);
	text-align: left;
	cursor: pointer;
	transition: background var(--nx-transition), color var(--nx-transition);
}
.nx-accordion__header:hover { background: var(--nx-pale); color: var(--nx-purple); }
.nx-accordion__header[aria-expanded="true"] { color: var(--nx-purple); }

.nx-accordion__chevron {
	flex: 0 0 auto;
	fill: currentColor;
	transition: transform var(--nx-transition);
}
.nx-accordion__header[aria-expanded="true"] .nx-accordion__chevron { transform: rotate(180deg); }

.nx-accordion__panel { padding: 0 22px 20px; font-size: 15px; line-height: 1.75; }
.nx-accordion__panel[hidden] { display: none; }