/* ============================================================
   RAW FITNESS — WordPress layer.

   base.css is the approved design: tokens, layout, motion.
   This file adds only what the WordPress build needs on top —
   no-JS safety, the components that became dynamic, and the
   generic post/page styling.
   ============================================================ */

/* ------------------------------------------------------------
   1. No-JS safety.

   base.css starts reveal elements at opacity 0. That is only
   safe while scripts are running, so every hidden-until-revealed
   rule is re-scoped to the .rf-js flag that wp_head sets. With
   scripts blocked, the whole page renders as finished content.
   ------------------------------------------------------------ */

html:not(.rf-js) .reveal,
html:not(.rf-js) .tw-in,
html:not(.rf-js) .hero-logo,
html:not(.rf-js) .tagline,
html:not(.rf-js) .hero-cta,
html:not(.rf-js) .trust,
html:not(.rf-js) .hero-blaze {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

html:not(.rf-js) .wipe {
	clip-path: inset(0 0 0 0) !important;
}

/* The site-wide motion switch mirrors the OS-level preference. */
html.rf-reduced .reveal,
html.rf-reduced .tw-in,
html.rf-reduced .hero-logo,
html.rf-reduced .tagline,
html.rf-reduced .hero-cta,
html.rf-reduced .trust,
html.rf-reduced .hero-blaze {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

html.rf-reduced .wipe {
	clip-path: inset(0 0 0 0) !important;
}

html.rf-reduced .hero-bg img,
html.rf-reduced .hero-spin-ring,
html.rf-reduced .disc-track,
html.rf-reduced .band-word,
html.rf-reduced .g-row,
html.rf-reduced .urgent-track,
html.rf-reduced .tier-hot,
html.rf-reduced .badge i {
	animation: none !important;
}

/* ------------------------------------------------------------
   2. Header details that became dynamic.
   ------------------------------------------------------------ */

/* Between the 900px burger breakpoint and roughly 1180px the seven links
   and the CTA ran out of room and wrapped to a second line. Keep each
   label intact and tighten the gaps instead. */
.nav-links a {
	white-space: nowrap;
}

@media (max-width: 1180px) {
	.nav-links {
		gap: 20px;
	}

	#nav {
		gap: 18px;
	}
}

@media (max-width: 1040px) {
	.nav-links {
		gap: 14px;
	}

	.nav-links a {
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	.nav-right .btn {
		min-width: 0;
		padding: 12px 18px;
	}
}

.foot-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-top: 14px;
}

.foot-nav a,
.foot-social a {
	font-size: 10.5px;
	letter-spacing: 0.18em;
	color: var(--mut);
	transition: color 0.25s;
}

.foot-nav a:hover,
.foot-social a:hover {
	color: #fff;
}

.foot-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 14px;
}

.band-word {
	white-space: nowrap;
}

/* ------------------------------------------------------------
   3. Gallery — plain, non-interactive marquee thumbnails.
   ------------------------------------------------------------ */

.g-row > .g-item {
	display: block;
	flex: none;
	line-height: 0;
}

/* ------------------------------------------------------------
   4. Testimonials — Swiper on top of the reference quote styling.

   base.css fades .qs in and out by absolute positioning. Once
   Swiper takes over it owns the transition, so the slides go back
   to being in flow.
   ------------------------------------------------------------ */

.q-car.is-live {
	overflow: hidden;
}

.q-car.is-live .qs {
	position: relative;
	inset: auto;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	height: auto;
}

.q-car.is-live .swiper-wrapper {
	align-items: stretch;
}

.q-car .q-dots {
	position: relative;
	z-index: 2;
}

.q-car .swiper-pagination-bullet {
	width: 26px;
	height: 6px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.14);
	opacity: 1;
	margin: 0 !important;
	clip-path: none;
	transition: background 0.3s;
}

.q-car .swiper-pagination-bullet-active {
	background: var(--red);
}

/* Without JavaScript the quotes stack and stay readable. */
html:not(.rf-js) .qs,
.q-car:not(.is-live) .qs {
	position: relative;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* ------------------------------------------------------------
   6. Named coaches — only rendered once the client adds them.
   ------------------------------------------------------------ */

.coaches-named {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.coaches-named .coach {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 220px;
	clip-path: none;
}

.coaches-named .coach img {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
	object-position: center 25%;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.coaches-named .coach:hover img {
	transform: scale(1.05);
}

.coaches-named .coach-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 30px 14px 12px;
	background: linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.85));
}

.coaches-named .coach-meta b {
	font-family: var(--disp);
	font-stretch: 125%;
	font-weight: 900;
	font-size: 15px;
	text-transform: uppercase;
	color: #fff;
}

.coaches-named .coach-meta i {
	font-style: normal;
	font-size: 9.5px;
	letter-spacing: 0.2em;
	color: var(--mut);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
   7. Layouts that must survive a different number of entries.
   ------------------------------------------------------------ */

/* The food mosaic is a named eight-cell grid. Any other count
   falls back to an even auto grid instead of collapsing. */
.k-food-auto {
	grid-template-areas: none;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.k-food-auto .kf {
	grid-area: auto !important;
}

.mtable-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mtable-scroll .mtable {
	min-width: 460px;
}

/* ------------------------------------------------------------
   8. Section variants used by the sub-brand page templates.
   ------------------------------------------------------------ */

.sec-alt {
	background: #0d0d0f;
}

.sec-tight {
	padding-top: 24px;
}

.sec-top {
	padding-top: clamp(140px, 18vh, 200px);
}

/* ------------------------------------------------------------
   9. Ordinary WordPress content — blog, plain pages, editor blocks.
   ------------------------------------------------------------ */

.page-copy {
	max-width: 760px;
	color: #c7c9cf;
	font-size: clamp(15.5px, 1.5vw, 17.5px);
	margin-top: 22px;
}

.page-copy > * + * {
	margin-top: 1.1em;
}

.page-copy a {
	color: var(--red-hot);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-copy h2,
.page-copy h3,
.page-copy h4 {
	font-family: var(--disp);
	font-stretch: 125%;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--white);
	margin-top: 1.6em;
}

.page-copy h2 {
	font-size: clamp(20px, 2.4vw, 28px);
}

.page-copy h3 {
	font-size: clamp(17px, 1.9vw, 22px);
}

.page-copy ul,
.page-copy ol {
	padding-left: 1.2em;
}

.page-copy li + li {
	margin-top: 0.4em;
}

.page-copy blockquote {
	border-left: 3px solid var(--red);
	padding-left: 18px;
	font-style: italic;
	color: #e3e4e8;
}

.page-copy img,
.page-media img {
	max-width: 100%;
	height: auto;
}

.page-media {
	margin-top: 26px;
	clip-path: none;
}

.post-list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: 34px;
}

.post-card {
	background: var(--panel);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	clip-path: none;
}

.post-card__media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.post-card__body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.post-card__body .mono {
	font-size: 10px;
	color: var(--mut);
}

.post-card__body h2 {
	font-family: var(--disp);
	font-stretch: 125%;
	font-weight: 900;
	font-size: clamp(17px, 1.8vw, 21px);
	text-transform: uppercase;
	color: var(--white);
}

.post-card__body p {
	font-size: 14.5px;
	color: #b4b6bd;
}

.post-pagination {
	margin-top: 34px;
}

.post-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	font-family: var(--cond);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 13px;
	color: #cfd0d4;
	border: 1px solid var(--line);
	margin: 0 4px 8px 0;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.post-pagination .page-numbers.current,
.post-pagination .page-numbers:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

/* ------------------------------------------------------------
   11. Hero column rails.

   The structural hairlines and their red intersection nodes now
   run in the hero only. Everywhere else the layout draws its own
   rules — every grid in base.css is separated by 1px gaps over a
   concrete backdrop — so an overlay grid on top of that would be
   noise rather than structure.

   Drawn with pseudo-elements and background gradients: no extra
   markup and nothing extra to download.
   ------------------------------------------------------------ */

:root {
	--grid-line: rgba(236, 233, 227, 0.16);
	--grid-node: var(--red);
	--grid-col: min(var(--maxw), calc(100% - 2 * var(--gut)));
	--grid-dot: 6px;
	--grid-tile: 8px;
	--grid-off: -4px;
}

/* Vertical rails tracing the content column, banded into thirds. */
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--grid-col);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 3;
	background-image:
		linear-gradient(var(--grid-line), var(--grid-line)),
		linear-gradient(var(--grid-line), var(--grid-line)),
		linear-gradient(var(--grid-line), var(--grid-line)),
		repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 33.333%);
	background-size: 1px 100%, 1px 100%, 1px 100%, 100% 100%;
	background-position: left top, center top, right top, left top;
	background-repeat: no-repeat;
}

/* Nodes pinned on the crossings. The four-value background-position
   syntax offsets each tile by half its size, which lands the dot on
   the intersection rather than tangent to it. */
.hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--grid-col);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 3;
	background-image:
		radial-gradient(circle, var(--grid-node) 0 calc(var(--grid-dot) / 2), transparent calc(var(--grid-dot) / 2 + 0.5px)),
		radial-gradient(circle, var(--grid-node) 0 calc(var(--grid-dot) / 2), transparent calc(var(--grid-dot) / 2 + 0.5px)),
		radial-gradient(circle, var(--grid-node) 0 calc(var(--grid-dot) / 2), transparent calc(var(--grid-dot) / 2 + 0.5px)),
		radial-gradient(circle, var(--grid-node) 0 calc(var(--grid-dot) / 2), transparent calc(var(--grid-dot) / 2 + 0.5px)),
		radial-gradient(circle, var(--grid-node) 0 calc(var(--grid-dot) / 2), transparent calc(var(--grid-dot) / 2 + 0.5px)),
		radial-gradient(circle, var(--grid-node) 0 calc(var(--grid-dot) / 2), transparent calc(var(--grid-dot) / 2 + 0.5px));
	background-size: var(--grid-tile) var(--grid-tile);
	background-position:
		left var(--grid-off) top calc(33.333% + var(--grid-off)),
		left calc(50% + var(--grid-off)) top calc(33.333% + var(--grid-off)),
		right var(--grid-off) top calc(33.333% + var(--grid-off)),
		left var(--grid-off) top calc(66.666% + var(--grid-off)),
		left calc(50% + var(--grid-off)) top calc(66.666% + var(--grid-off)),
		right var(--grid-off) top calc(66.666% + var(--grid-off));
	background-repeat: no-repeat;
}

/* Under 700px the centre rail drops away so the rails frame the
   headline instead of cutting through it. */
@media (max-width: 700px) {
	.hero::before {
		background-image:
			linear-gradient(var(--grid-line), var(--grid-line)),
			linear-gradient(var(--grid-line), var(--grid-line)),
			repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 33.333%);
		background-size: 1px 100%, 1px 100%, 100% 100%;
		background-position: left top, right top, left top;
	}

	.hero::after {
		background-position:
			left var(--grid-off) top calc(33.333% + var(--grid-off)),
			right var(--grid-off) top calc(33.333% + var(--grid-off)),
			left var(--grid-off) top calc(66.666% + var(--grid-off)),
			right var(--grid-off) top calc(66.666% + var(--grid-off));
	}
}

/* ------------------------------------------------------------
   10. Focus visibility across the dark theme.
   ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--red-hot);
	outline-offset: 3px;
}

.skip-link:focus {
	z-index: 1000;
}