/* ============================================================
   NEXUS — Dark/Light theme layer  (loaded AFTER styles.css)
   Dark is the DEFAULT (html.theme-dark). Light = html.theme-light

   Strategy note: the template's --White / --Gray are overloaded —
   used BOTH as light surfaces AND as light "ink" (text/strokes).
   So we DON'T flip them (ink must stay light). Instead we:
     • flip only --Title / --Paragraph (body text) to light,
     • darken the specific light-surface selectors by hand,
     • guard neon accents so their text stays dark.
   ============================================================ */

:root {
  --Body: #FFFFFF;
  --nx-surface: #0F1D26;
  --nx-elevated: #17272F;
  --nx-ink: #F1F5F3;
  --nx-muted: #A7B4BC;
  --nx-border: rgba(255, 255, 255, 0.12);
}

html { color-scheme: light; }
body { background-color: var(--Body); }

/* Smooth theme transition */
body, .header-sticky, .tf-btn, .footer, section,
.mobile-nav-wrap, .offcanvasMegamenu, .sub-menu,
.trainer-box, .box-mission-vision, .contact-form-wrap {
  transition: background-color .35s ease, color .3s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   DARK THEME  (default)
   ============================================================ */
html.theme-dark { color-scheme: dark; --Body: #0A1319; }

html.theme-dark {
  --Title: #F1F5F3;       /* headings + primary text -> light */
  --Paragraph: #A7B4BC;   /* body / muted text -> light */
  /* --White, --Gray, --Black, --Neon, --Red intentionally unchanged */
}

/* text on the (already dark) accent sections stays light regardless */
html.theme-dark .text-Black { color: var(--nx-ink) !important; }

/* ---- Darken the enumerated light SURFACES ---- */
html.theme-dark .sub-menu,
html.theme-dark .header-sticky,
html.theme-dark .offcanvas-search,
html.theme-dark .offcanvasMegamenu,
html.theme-dark .mobile-nav-wrap,
html.theme-dark #loading {
  background-color: var(--nx-surface) !important;
}
html.theme-dark .header-sticky { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); }

html.theme-dark .trainer-item .trainer-box,
html.theme-dark .tf-post.style-4,
html.theme-dark .wg-author,
html.theme-dark .testimonials-item.style-3 .content,
html.theme-dark .faqs-according-item.active,
html.theme-dark .features-item::before,
html.theme-dark .our-team-item .icon,
html.theme-dark .box-mission-vision,
html.theme-dark .section-bmi .table-bmi,
html.theme-dark .contact-form-wrap {
  background-color: var(--nx-elevated) !important;
}

/* form fields on dark */
html.theme-dark form input,
html.theme-dark form textarea,
html.theme-dark .nice-select {
  background-color: #0E1B23 !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-ink) !important;
}

/* hairline borders that were black-on-light */
html.theme-dark .header-content { border-color: var(--nx-border) !important; }
html.theme-dark .tf-btn.style-1 { border-color: var(--nx-border); color: var(--nx-ink); }
html.theme-dark .tf-btn.style-1:hover { background-color: var(--Neon); color: var(--Black); border-color: var(--Neon); }
html.theme-dark .tf-btn.style-black { background-color: #17272F; border-color: var(--nx-border); color: var(--nx-ink); }
html.theme-dark .tf-btn.style-black:hover { background-color: var(--Neon); color: var(--Black); }

/* ---- GUARD neon accents: text must stay DARK on neon ---- */
html.theme-dark .marquee-1 .text-Title,
html.theme-dark .marquee-1 .text-1,
html.theme-dark .box-gradient-1,
html.theme-dark .box-gradient-1 *,
html.theme-dark .box-gradient-2,
html.theme-dark .box-gradient-2 * { color: var(--Black) !important; }
html.theme-dark .tf-btn.style-2:hover { color: var(--Black) !important; }

/* offcanvas close icons -> light */
html.theme-dark .mobile-nav-close svg path,
html.theme-dark .offcanvasMegamenu .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* marquee-3 (green ribbon) always sits on Neon, so its text must stay
   pure black in both themes -- var(--Title) flips light in dark mode
   and reads poorly on the bright green background otherwise. */
.tf-marquee.marquee-3 .text-Title,
.tf-marquee.marquee-3 .text-1 { color: var(--Black) !important; }

/* ============================================================
   SECTION MARQUE RIBBON — tighten the gap under section-programs
   .section-marque reserves only 88px but its first child carries
   a 36px margin-top before the rotated ribbon starts, on top of
   section-programs' own 130px bottom padding -- reads as a big
   dead black gap. Pull the whole ribbon block up to close it.
   ============================================================ */
.section-marque { margin-top: -90px; }

/* ============================================================
   LIGHT THEME tidy-ups
   ============================================================ */
html.theme-light { color-scheme: light; }
html.theme-light body { background-color: #FFFFFF; }

/* ============================================================
   HEADER over the (always-dark) hero — force light text/icons
   The top #header always sits over the dark hero image, both themes.
   ============================================================ */
#header .main-menu .item-link,
#header .main-menu .item-link span { color: #F1F5F3; }
#header .nav-icon svg path { stroke: #F1F5F3; }
#header .nav-icon svg path[fill="black"],
#header .nav-icon svg path[fill="#111111"] { fill: #F1F5F3; stroke: none; }
#header .mobile-button span { background-color: #F1F5F3; }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle-wrap { display: flex; align-items: center; }
.theme-toggle {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #F1F5F3; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { background: var(--Neon); border-color: var(--Neon); color: #0A1319; }
.theme-toggle:focus-visible { outline: 2px solid var(--Neon); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; display: block; }

/* toggle on the sticky header adapts to its surface */
.header-sticky .theme-toggle { border-color: rgba(17,17,17,0.18); color: #111111; background: rgba(0,0,0,0.03); }
html.theme-dark .header-sticky .theme-toggle { border-color: rgba(255,255,255,0.22); color: #F1F5F3; background: rgba(255,255,255,0.06); }
.header-sticky .theme-toggle:hover,
html.theme-dark .header-sticky .theme-toggle:hover { background: var(--Neon); color: #0A1319; border-color: var(--Neon); }

/* moon shown in dark (tap -> light); sun shown in light (tap -> dark) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.theme-light .theme-toggle .icon-sun { display: block; }
html.theme-light .theme-toggle .icon-moon { display: none; }

/* ============================================================
   LOGO SWAP (context-aware)
   .logo-swap holds .logo-dark (white logo) + .logo-light (black logo)
   ============================================================ */
.logo-swap .logo-light { display: none; }
.logo-swap .logo-dark { display: block; }
html.theme-light .logo-swap .logo-light { display: block; }
html.theme-light .logo-swap .logo-dark { display: none; }

.logo-header img, .logo-mobile img, .logo-megamenu img { height: 44px; width: auto; }
.logo-footer img { height: 132px; width: auto; }

/* ============================================================
   HERO — full-bleed image + Hyrox logo (video removed)
   ============================================================ */
.section-hero { min-height: 80vh; }
.section-hero .box-content { min-height: 80vh; box-sizing: border-box; }
.section-hero .right {
  display: flex; flex-direction: column;
  align-items: flex-end; text-align: right; max-width: 460px;
}
@media (max-width: 767px) {
  .section-hero, .section-hero .box-content { min-height: 78vh; }
}
.hero-hyrox-logo { margin: 6px 0 30px; }
.hero-hyrox-logo img {
  width: 300px; max-width: 42vw; height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
}
/* stronger bottom gradient so hero copy always reads on any photo */
.section-hero::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.30) 45%, #000000 100%);
}

@media (max-width: 1200px) {
  .section-hero .right { align-items: flex-start; text-align: left; }
  .hero-hyrox-logo img { width: 220px; max-width: 60vw; }
}
@media (max-width: 767px) {
  .hero-hyrox-logo img { width: 180px; }
  .logo-footer img { height: 96px; }
}

/* ============================================================
   HYROX INTERACTIVE ACCORDION (image stations)
   ============================================================ */
.section-hyrox-accordion { padding: 100px 20px; }
.hyrox-accordion-wrap {
  display: flex; align-items: center; gap: 56px;
  max-width: 1480px; margin: 0 auto;
}
.hyrox-accordion-content { flex: 0 0 34%; max-width: 34%; }
.hyrox-accordion-content .box-gradient-2 { margin-bottom: 18px; }
.hyrox-accordion-content h2 {
  font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(30px, 3.4vw, 56px); line-height: 1.02;
  color: var(--Title); margin-bottom: 22px;
}
.hyrox-accordion-desc { color: var(--Paragraph); margin-bottom: 32px; max-width: 48ch; }

.hyrox-accordion { display: flex; gap: 12px; height: 460px; flex: 1 1 auto; min-width: 0; }
.hyrox-panel {
  position: relative; flex: 1 1 0%; min-width: 0;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1);
  outline: none;
}
.hyrox-panel.is-active { flex-grow: 7; }
.hyrox-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hyrox-panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.62) 100%);
}
.hyrox-panel:focus-visible { box-shadow: inset 0 0 0 3px var(--Neon); }

.hyrox-panel-label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 24px; pointer-events: none;
  color: #fff; font-weight: 700; font-size: 16px;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.hyrox-panel-label .t {
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.hyrox-panel.is-active .hyrox-panel-label .t {
  writing-mode: horizontal-tb; transform: none;
}

@media (max-width: 991px) {
  .section-hyrox-accordion { padding: 70px 20px; }
  .hyrox-accordion-wrap { flex-direction: column; align-items: stretch; gap: 36px; }
  .hyrox-accordion-content { flex: none; max-width: none; text-align: center; }
  .hyrox-accordion-desc { margin-left: auto; margin-right: auto; }
  .hyrox-accordion { height: 400px; }
}
@media (max-width: 767px) {
  .hyrox-panel-label { font-size: 13px; padding-bottom: 16px; }
  .hyrox-accordion { height: 340px; gap: 8px; }
}

/* ============================================================
   NEXUS GALLERY — auto-scroll carousel (Swiper)
   ============================================================ */
.section-nexus-gallery { padding: 100px 20px; overflow: hidden; }
.nexus-gallery-head { text-align: center; margin-bottom: 44px; }
.nexus-gallery-head .box-gradient-2 { margin-bottom: 16px; }
.nexus-gallery-head h2 {
  font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(28px, 4vw, 56px); line-height: 1.05;
  color: var(--Title);
}
/* viewport masks overflow; track scrolls continuously */
.nexus-gallery-viewport {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.nexus-gallery-track {
  display: flex; gap: 16px; width: max-content;
  animation: nexus-marquee 55s linear infinite;
  will-change: transform;
}
.nexus-gallery-viewport:hover .nexus-gallery-track { animation-play-state: paused; }
@keyframes nexus-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.nexus-gallery-item {
  width: 480px; height: 360px; flex: 0 0 auto;
  border-radius: 16px; overflow: hidden;
  background: var(--nx-elevated);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.nexus-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.nexus-gallery-item:hover img { transform: scale(1.06); }
html.theme-light .nexus-gallery-item { border-color: rgba(0, 0, 0, 0.06); }
@media (max-width: 991px) {
  .section-nexus-gallery { padding: 70px 20px; }
  .nexus-gallery-track { animation-duration: 40s; }
}
@media (max-width: 767px) {
  .nexus-gallery-item { width: 320px; height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .nexus-gallery-track { animation: none; }
  .nexus-gallery-viewport { overflow-x: auto; }
}

/* ============================================================
   CLASS SCHEDULE — 7-day grid + theme-aware contrast
   The base template hardcodes .schedule-title to var(--Black)
   on a barely-there black-tint card, so in dark mode the text
   goes black-on-near-black. Fix: card ink follows the theme,
   and the Neon hover/active state always keeps dark text.
   ============================================================ */
@media (min-width: 1025px) {
  .schedule-wrap { grid-template-columns: repeat(7, 1fr); }
}

.schedule-wrap .schedule-item {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.schedule-wrap .schedule-item .schedule-title { color: var(--Title); }
.schedule-wrap .schedule-item .schedule-time { color: var(--Paragraph); }

html.theme-dark .schedule-wrap .schedule-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
html.theme-dark .schedule-wrap .schedule-item.active,
html.theme-dark .schedule-wrap .schedule-item:hover {
  background-color: var(--Neon);
  border-color: var(--Neon);
}
html.theme-dark .schedule-wrap .schedule-item.active .schedule-title,
html.theme-dark .schedule-wrap .schedule-item.active .schedule-time,
html.theme-dark .schedule-wrap .schedule-item:hover .schedule-title,
html.theme-dark .schedule-wrap .schedule-item:hover .schedule-time {
  color: var(--Black);
}