/* ---------------------------------------------------------------------------
   Front page.

   Measured from scraper/out/design/css/wp-content__uploads__elementor__css__post-10.css:
     hero        [2570b83f] nexaphhero.webp cover/centre, overlay astglobalcolor1
                 (#4f1c64) at .6, container max-width 1005px, min-height 31vh,
                 h1 DM Serif Display 500 white, lede 18px/33px white
     split       [6b48f769] white, 40px block padding; aside title 22px/32px;
                 aside links Roboto 400 15px/25px in #4f1c64, 10px gap
     bands       [5b60112] [08e8612] #F6F7FF with Grid-11-1.png at .05 opacity,
                 50px block padding, contents centred
     about lede  [6d0ae1ca] 16px/32px
   --------------------------------------------------------------------------- */

/* --- Hero ---------------------------------------------------------------- */

.nx-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 31vh;
	padding-block: 56px;
	background-color: var(--nx-purple-deep);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--nx-white);
	text-align: center;
}

.nx-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--nx-purple-deep);
	opacity: 0.6;
}

.nx-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1005px;
}

.nx-hero__title {
	margin: 0 0 14px;
	color: var(--nx-white);
	font-size: var(--nx-h1);
	text-wrap: balance;
}

.nx-hero__lede {
	margin: 0 auto 24px;
	max-width: 900px;
	font-size: 18px;
	line-height: 33px;
	color: var(--nx-white);
}

.nx-hero__cta {
	background: var(--nx-white);
	border-color: var(--nx-white);
	color: var(--nx-purple);
}
.nx-hero__cta:hover {
	background: var(--nx-purple);
	border-color: var(--nx-white);
	color: var(--nx-white);
}

/* --- Sale row ------------------------------------------------------------ */

.nx-home-sale { padding-block: 46px 10px; }

/* --- Peptides split ------------------------------------------------------ */

.nx-home-split { background: var(--nx-white); padding-block: 40px; }

.nx-home-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 30px var(--nx-widget-gap);
	align-items: start;
}

.nx-home-split__aside-title,
.nx-home-split__title {
	margin: 0 0 12px;
	padding-top: 6px;
	font-size: 22px;
	line-height: 32px;
}

.nx-home-split__aside-title a { color: var(--nx-ink); }
.nx-home-split__aside-title a:hover { color: var(--nx-purple); }

/* --- Texture bands ------------------------------------------------------- */

.nx-band {
	position: relative;
	background-color: var(--nx-band);
	padding-block: 50px;
	text-align: center;
	overflow: hidden;
}

/* The texture is painted by a child at 5% so the copy stays at full contrast,
   exactly how the source layers its background overlay.

   The URL rides on the parent as a custom property rather than as its
   background-image: `inherit` would have made the parent paint the texture at
   full strength as well, and the two coats read as a hard grid instead of the
   source's faint wash. */
.nx-band__texture {
	position: absolute;
	inset: 0;
	background-image: var(--nx-texture, none);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.05;
	pointer-events: none;
}

.nx-band__inner { position: relative; z-index: 1; }

.nx-band__title { margin: 0 0 12px; font-size: var(--nx-h2); color: var(--nx-navy); }

.nx-band__text {
	margin: 0 auto 22px;
	max-width: 900px;
	font-size: 16px;
	line-height: 32px;
}

/* --- Newsletter ---------------------------------------------------------- */

.nx-newsletter { max-width: 560px; margin-inline: auto; }

.nx-newsletter__form { display: flex; gap: 10px; }
.nx-newsletter__form input[type="email"] { flex: 1 1 auto; }
.nx-newsletter__form .nx-btn { flex: 0 0 auto; }

.nx-newsletter__status { margin: 10px 0 0; min-height: 1.4em; font-size: 14px; }
.nx-newsletter__status.is-ok { color: var(--nx-success); }
.nx-newsletter__status.is-error { color: var(--nx-danger); }

/* --- FAQ ----------------------------------------------------------------- */

.nx-faq { padding-block: 50px; }
.nx-faq__title { text-align: center; margin-bottom: 26px; font-size: var(--nx-h2); color: var(--nx-navy); }

/* --- Breakpoints --------------------------------------------------------- */

@media (max-width: 1024px) {
	.nx-home-split__grid { grid-template-columns: minmax(0, 1fr); }
	.nx-home-split__aside { display: none; }
}

@media (max-width: 767px) {
	.nx-hero { padding-block: 40px; text-align: center; }
	.nx-hero__lede { font-size: 15px; line-height: 1.9; }
	.nx-newsletter__form { flex-direction: column; }
	.nx-band__text { font-size: 15px; line-height: 1.8; }
	.nx-accordion__header { padding: 15px 16px; font-size: 15px; }
	.nx-accordion__panel { padding: 0 16px 16px; }
}