/* =========================================================================
   Strengthletics brand — dark theme
   Palette sampled directly from the training photographs: the neon greens are
   the gym's light tubes, the ground is the darkest pixels in the shoot.
   Astra styles itself through --ast-global-color-0..8, so those are remapped
   onto the brand palette rather than overridden selector by selector.
   ========================================================================= */

:root {
	--void: #050904;        /* darkest pixels in the shoot   */
	--void-2: #0C130D;      /* raised surface                */
	--void-3: #131C15;      /* input / card surface          */
	--neon: #99F6AE;        /* brightest 5% — the light green*/
	--neon-bright: #A8FEC3; /* brightest 1% — neon core      */
	--green-mid: #3DC96E;   /* glow                          */
	--green-deep: #0A8237;  /* deep green                    */
	--text: #CBD8CD;        /* body copy on black            */
	--muted: #8B9C8E;       /* secondary copy                */
	--rule: rgba(153, 246, 174, 0.16);

	--font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Astra palette remap */
	--ast-global-color-0: #99F6AE;
	--ast-global-color-1: #A8FEC3;
	--ast-global-color-2: #A8FEC3;
	--ast-global-color-3: #CBD8CD;
	--ast-global-color-4: #050904;
	--ast-global-color-5: #0C130D;
	--ast-global-color-6: #050904;
	--ast-global-color-7: #17231A;
	--ast-global-color-8: #050904;
}

/* The hero bleeds to 100vw; clip (not hidden) keeps sticky behaviour intact. */
html,
body {
	overflow-x: clip;
}

/* -------------------------------------------------------------------------
   Typography
   ---------------------------------------------------------------------- */

body,
button,
input,
select,
textarea,
.ast-button {
	font-family: var(--font-mono);
}

body {
	background-color: var(--void);
	color: var(--text);
	font-size: 15px;
	line-height: 1.8;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	line-height: 0.94;
	color: var(--neon-bright);
}

h1, .entry-title { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
h3 { font-size: 1.7rem; }

a { color: var(--neon); }
a:hover, a:focus { color: var(--neon-bright); }

::selection {
	background: var(--neon);
	color: var(--void);
}

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

.sl-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: min(86vh, 880px);
	display: grid;
	place-items: end center;
	overflow: hidden;
	background-color: var(--void);
}

.sl-hero__slides {
	position: absolute;
	inset: 0;
}

.sl-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Portrait sources cropped to a wide band: bias upward to keep the
	   subject's head and torso in frame rather than centring on the hips. */
	object-position: center 12%;
	opacity: 0;
	animation: sl-hero-fade var(--sl-hero-cycle, 48s) linear infinite;
	will-change: opacity;
}

/* Scrim: holds the neon glow but sinks the midtones so type stays readable. */
.sl-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(5, 9, 4, 0.14) 0%, rgba(5, 9, 4, 0.04) 26%, rgba(5, 9, 4, 0.55) 62%, rgba(5, 9, 4, 0.9) 100%);
}

.sl-hero__content {
	position: relative;
	z-index: 1;
	max-width: 1040px;
	padding: 40px 24px 72px;
	text-align: center;
}

.sl-hero__heading {
	margin: 0 0 22px;
	font-size: clamp(2.6rem, 7vw, 5rem);
	color: var(--neon-bright);
	text-shadow: 0 0 60px rgba(153, 246, 174, 0.3), 0 2px 26px rgba(5, 9, 4, 0.85);
}

.sl-hero__text {
	margin: 0 auto 36px;
	max-width: 620px;
	color: var(--text);
	font-size: 1rem;
	line-height: 1.85;
	text-shadow: 0 1px 16px rgba(5, 9, 4, 0.95);
}

.sl-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 34px;
	background: var(--neon);
	color: var(--void);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 0 36px rgba(153, 246, 174, 0.28);
	transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sl-hero__cta:hover,
.sl-hero__cta:focus {
	background: var(--neon-bright);
	color: var(--void);
	box-shadow: 0 0 48px rgba(153, 246, 174, 0.45);
}

/* An auto-playing crossfade is motion; honour the system preference. */
@media (prefers-reduced-motion: reduce) {
	.sl-hero__slide {
		animation: none;
	}

	.sl-hero__slide:first-child {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
   Header + logo lockup
   ---------------------------------------------------------------------- */

.site-header,
.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
	background-color: var(--void) !important;
	border-bottom: 1px solid var(--rule);
}

.site-branding.ast-site-identity {
	display: flex;
	align-items: center;
	gap: 0.55em;
	font-size: 18px;
	padding: 0.28em;
}

.site-branding.ast-site-identity::before {
	content: "";
	flex: none;
	width: 2.364em;
	height: 2.6em;
	/* Single-colour mark, per the brand guidance for dark grounds. */
	background: url("mark-neon.svg") no-repeat center center;
	background-size: contain;
}

.site-title {
	font-size: 1.9em !important;
	line-height: 0.84 !important;
	letter-spacing: 0.012em;
	margin: 0;
}

.site-title a {
	color: var(--neon-bright) !important;
}

.site-title a:hover {
	color: var(--neon) !important;
}

.site-description,
.ast-site-identity .site-description {
	display: block !important;
	font-family: var(--font-mono);
	font-size: 0.5em !important;
	font-weight: 400;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--muted) !important;
	margin: 0.7em 0 0;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------------- */

.main-header-menu .menu-link,
.main-header-menu > li > a {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text);
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
	color: var(--neon);
}

.main-header-menu .sub-menu {
	background-color: var(--void-2);
	border: 1px solid var(--rule);
	min-width: 260px;
	padding: 6px 0;
}

.main-header-menu .sub-menu .menu-link {
	color: var(--text);
	padding-top: 11px;
	padding-bottom: 11px;
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link {
	color: var(--neon);
	background-color: rgba(153, 246, 174, 0.08);
}

/* Book a session: neon sign against the black. */
.main-header-menu li.book-now-btn {
	display: flex !important;
	align-items: center !important;
}

.main-header-menu li.book-now-btn > a.menu-link {
	background-color: var(--neon) !important;
	color: var(--void) !important;
	border-radius: 0 !important;
	padding: 0 26px !important;
	margin-left: 18px !important;
	height: 46px !important;
	line-height: 46px !important;
	font-weight: 500 !important;
	letter-spacing: 0.22em !important;
	transition: background-color 0.15s ease-in-out;
}

.main-header-menu li.book-now-btn > a.menu-link:hover,
.main-header-menu li.book-now-btn > a.menu-link:focus {
	background-color: var(--neon-bright) !important;
	color: var(--void) !important;
}

.ast-header-break-point .main-header-menu li.book-now-btn {
	display: block !important;
}

.ast-header-break-point .main-header-menu li.book-now-btn > a.menu-link {
	display: inline-block !important;
	margin: 12px 20px !important;
}

/* Mobile menu panel */
.ast-header-break-point .main-header-menu,
.ast-mobile-header-wrap .main-header-menu {
	background-color: var(--void-2);
}

.ast-mobile-menu-trigger-minimal {
	color: var(--neon) !important;
}

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

.wp-block-button__link,
.ast-button,
button,
input[type="submit"] {
	background-color: var(--neon);
	color: var(--void);
	border: 0;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	min-height: 46px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--neon-bright);
	color: var(--void);
}

/* -------------------------------------------------------------------------
   Content + footer
   ---------------------------------------------------------------------- */

.ast-separate-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
#content,
.site-content {
	background-color: var(--void);
}

.entry-content p {
	line-height: 1.8;
}

.site-footer .site-below-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-below-footer-wrap.ast-builder-grid-row-container,
.site-primary-footer-wrap.ast-builder-grid-row-container {
	background-color: var(--void-2) !important;
	color: var(--muted) !important;
	border-top: 1px solid var(--rule);
}

.site-footer .site-below-footer-wrap *,
.site-footer .site-primary-footer-wrap * {
	color: var(--muted);
}

.site-footer .site-below-footer-wrap a,
.site-footer .site-primary-footer-wrap a {
	color: var(--neon) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer .site-below-footer-wrap a:hover,
.site-footer .site-primary-footer-wrap a:hover {
	color: var(--neon-bright) !important;
}

.site-footer .site-below-footer-wrap {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}