/* FlexGym Vreden — static rebuild.
   Visual rules are a 1:1 restoration of the deployed site's compiled CSS
   (Tailwind 4.1.10 + CSS Modules). Deviations are marked FIX: and are
   bug fixes only — contrast, focus, dead debug styling, keyboard access. */

/* ============ fonts ============ */

@font-face {
  font-family: FuturaStdBook;
  src: url("../fonts/FuturaStdBook.61f2af8f.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* FIX: live had none -> FOIT on both faces */
}

@font-face {
  font-family: CollegiateBlackFLF;
  src: url("../fonts/CollegiateBlackFLF.298561bc.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* FIX */
}

/* ============ base ============ */

html {
  scroll-behavior: smooth;
}

body {
  /* FIX: live shipped `color:#fff; background-color:#fff` — white on white
     for any element that forgot to override. Ground is black. The background
     lives on body alone so it propagates to the canvas and the legal pages
     can flip it to white. */
  color: #fff;
  background-color: #000;
  margin: 0;
  padding: 0;
  font-family: FuturaStdBook, Arial, sans-serif;
  overflow-x: hidden;
}

/* No global border-box: the deployed CSS used the default content-box
   everywhere except where noted, and the section widths depend on it. */
img { display: block; max-width: 100%; }

/* FIX: live had no focus styling at all, on any element. */
:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
/* white ring is invisible on the white legal pages */
.legal-container :focus-visible { outline-color: #c81a18; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ navbar ============ */

.navbar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: #000;
  border-radius: 0 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  font-family: FuturaStdBook, Arial, sans-serif;
  box-sizing: border-box;
}

.logo {
  width: auto;
  max-width: 100px;
  min-width: 40px;
  height: auto;
  display: flex;
  align-items: center;
  margin-left: 1rem;
}
/* Live ships a viewBox-less SVG that lays out at the SVG default 300x60 and
   overflows its 100px flex box. Same box here, with a viewBox added so the
   mark cannot be squeezed by the flex container. */
.logo svg { width: 300px; height: 60px; flex: 0 0 auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  box-sizing: border-box;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.2s;
  display: inline-block;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover { color: #b51b1a; }
.nav-link:hover::after { transform: scaleX(1); }

/* FIX: live used a <div role="button"> with no key handler and a 32x32 hit
   area. Real <button>, 44x44 target, same 32px bar block inside. */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 1rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 4px;
  width: 32px;
  background: #fff;
  margin: 4px 0;
  border-radius: 2px;
  transition: 0.3s;
}

@media (max-width: 900px) {
  .navbar { padding: 0.75rem 1rem; }
  .nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #000;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    z-index: 100;
    width: 100%;
    max-width: 100vw;
  }
  .nav-links.open { display: flex; }
  .hamburger { display: flex; margin-right: 1rem; }
  .logo { width: 80px; }
}

@media (max-width: 600px) {
  .navbar { padding: 0.5rem; }
  .logo { width: 60px; }
  .nav-links { padding: 0.5rem 1rem; gap: 1rem; }
  .nav-link { font-size: 1rem; padding: 0.3rem 0; }
}

/* ============ hero ============ */

.hero {
  position: relative;
  background-image: url("../img/Newimage4.ea94c418.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(to top, black, transparent);
  pointer-events: none;
  z-index: 1;
}

.blur-overlay {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-text {
  font-family: FuturaStdBook, Arial, sans-serif;
  color: #fff;
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  width: 100%;
  margin: 10rem 0 0;
}

.rotating-word {
  font-family: CollegiateBlackFLF, Arial, sans-serif;
  color: #ec2220;
  font-size: 0.9em;
  letter-spacing: 3px;
  display: inline-block;
  /* The hero sits under a full-size backdrop-filter. Without its own
     compositing layer, every frame of the word swap forces the browser to
     re-blur the whole hero — that is the stutter. */
  will-change: opacity, transform;
  transform: translateZ(0);
}

@keyframes fade-in-slide {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-out-slide {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}
.rotating-word.fade-in { animation: fade-in-slide 0.3s forwards; }
.rotating-word.fade-out { animation: fade-out-slide 0.3s forwards; }

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, 720px);
  margin-top: 4rem;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.signup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 1.25rem 2rem;
  background: #ec2220;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: 1px;
  text-align: center;
  font-family: CollegiateBlackFLF, Arial, sans-serif;
  box-sizing: border-box;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.signup-button:hover { background: #b51b1a; }
.signup-button:active { transform: translateY(2px); }

/* Secondary action: same block, outlined instead of a second red slab. */
.signup-button-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px #fff;
}
.signup-button-ghost:hover {
  background: #fff;
  color: #000;
}

@media (max-width: 900px) {
  .rotating-word { font-size: 3.2rem; }
}
@media (max-width: 600px) {
  .hero-actions {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
}

@media (max-width: 375px) {
  .hero-text { font-size: 2rem; margin-top: 6rem; }
  .rotating-word { font-size: 2rem; }
}

/* ============ black section ============ */

.black-section {
  width: 100%;
  min-height: 600px;
  background: #000;
  position: relative;
  z-index: 2;
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  font-family: FuturaStdBook, Arial, sans-serif;
}

/* FIX: the live rule carried `background: rgba(255,0,0,.1)` — a debug fill
   that shipped. Removed. The exit-fade is also gone: the observer now runs
   once, so a line no longer erases itself while you are reading it. */
.fade-line {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  font-size: 3rem;
  color: gray;
  text-align: left;
  width: 100%;
  max-width: 900px;
  margin: 0.2em 0;
}
.fade-line.visible {
  opacity: 1;
  transform: translateY(0);
  color: #fff;
}

@media (max-width: 900px) {
  .fade-line { text-align: center; margin-left: 0; }
}
@media (max-width: 375px) {
  .fade-line { font-size: 1.2rem; max-width: 95vw; }
}

/* ============ images ============ */

.image-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-direction: column;
}

/* FIX: dropped `box-shadow: 0 2px 8px rgba(0,0,0,.1)` — a black shadow on a
   black ground, invisible by construction. */
.image-section img {
  max-width: 800px;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .image-section { gap: 1.2rem; }
  .image-section img { max-width: 90vw; }
}
@media (min-width: 901px) and (max-width: 1600px) {
  .image-section { gap: 1.5rem; }
  .image-section img { max-width: 900px; }
}

/* ============ trial form ============ */

.form-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 15rem;
  margin: 6rem auto 0;
  font-family: FuturaStdBook, Arial, sans-serif;
  max-width: 900px;
  width: 100%;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}

.form-side {
  flex: 1;
  max-width: 400px;
}

.trial-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
/* FIX: live set `width: 90%` on inputs against a full-width button — 386px
   fields under a 400px button. */
.trial-form input {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: FuturaStdBook, Arial, sans-serif;
  width: 100%;
  box-sizing: border-box;
  color: #222;
  background: #fff;
}
.trial-form input[aria-invalid="true"] { border-color: #ec2220; border-width: 2px; }

.trial-form button {
  padding: 0.75rem;
  /* FIX: #fff on #ec2220 is 4.36:1 — fails AA for 16px text. #c81a18 is the
     same red one step darker and clears 4.5:1. The 2rem hero CTA keeps the
     original #ec2220, which passes as large text. */
  background: #c81a18;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  font-family: FuturaStdBook, Arial, sans-serif;
}
.trial-form button:hover { background: #b51b1a; }
.trial-form button:disabled { opacity: 0.65; cursor: wait; }

.field-error {
  display: none;
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #ff6b69; /* lighter red: 4.5:1+ on black, unlike #ec2220 */
}
.field-error.show { display: block; }

.form-status {
  margin: 1rem 0 0;
  font-size: 1rem;
  min-height: 1.5em;
}
.form-status.ok { color: #fff; }
.form-status.fail { color: #ff6b69; }


@media (max-width: 900px) {
  .form-section {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    text-align: center;
    box-sizing: border-box;
  }
  .form-side { width: 100%; max-width: none; box-sizing: border-box; }
  .trial-form input {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============ opening hours ============ */

.hours-wrapper { margin-top: 6rem; }

.opening-title {
  position: relative;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 2rem 0 2rem;
  color: #fff;
  font-family: CollegiateBlackFLF, Arial, sans-serif;
  padding-top: 2.5rem;
}
.opening-title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  max-width: 75%;
  height: 2px;
  background: #fff;
}

.timetable {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 900px;
  margin: 4rem auto 0;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  gap: 6rem;
  background: #fafafa;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  font-family: FuturaStdBook, Arial, sans-serif;
}
.timetable-col { flex: 1; min-width: 220px; }

.timetable .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ececec;
  font-size: 1.3rem;
}
.timetable .row:last-child { border-bottom: none; }
.timetable .day { font-weight: 600; color: #222; }
.timetable .time { color: #444; font-family: monospace; }

@media (max-width: 900px) {
  .timetable {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    max-width: 90vw;
    width: 90vw;
  }
  .timetable-col { max-width: 90vw; width: 80%; }
}
@media (max-width: 375px) {
  .timetable .time,
  .timetable .day { font-size: 0.9rem; }
  .timetable .row { gap: 0.5rem; }
}

/* ============ contact ============ */

/* FIX: dropped `box-shadow: 0 2px 16px rgba(0,0,0,.06)` — black on black. */
.contact-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  max-width: 1200px;
  margin: 2rem auto 0;
}
.contact-left { flex: 1; min-width: 220px; }

/* FIX: live rendered these two in the browser's default sans-serif because
   nothing set a family on the block. Everything else on the page is Futura. */
.big-title {
  font-family: FuturaStdBook, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  color: #fff;
}
.address {
  font-family: FuturaStdBook, Arial, sans-serif;
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.6;
  font-style: normal;
}
/* FIX: the phone number and address were plain text. Links now, styled to
   look exactly as they did. */
.address a {
  color: #fff;
  text-decoration: none;
}
.address a:hover { color: #ec2220; }

/* The Google Maps embed is gone; the address links out instead. */
.route-link {
  margin: 1.2rem 0 0;
  font-size: 1.2rem;
}
.route-link a {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid #ec2220;
  padding-bottom: 2px;
}
.route-link a:hover { color: #ec2220; }

@media (max-width: 600px) {
  .contact-section {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem 0.5rem;
    max-width: 95vw;
    width: 95vw;
  }
  .contact-left { width: 100%; min-width: 0; }
  .big-title,
  .address,
  .route-link { text-align: center; }
}

/* ============ legal pages ============ */

.legal-page {
  background-color: #fff;
  color: #222;
  min-height: 100vh;
}

.legal-container {
  max-width: 700px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  font-family: FuturaStdBook, Arial, sans-serif;
  color: #222;
}
.legal-container h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  color: #1a1a1a;
}
.legal-container h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
  color: #333;
}
.legal-container h3 {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 1.2rem 0 0.3rem;
  color: #444;
}
.legal-container address {
  font-style: normal;
  margin-bottom: 1.2rem;
  line-height: 1.6;
}
.legal-container p,
.legal-container li { line-height: 1.6; }
.legal-container ul { padding-left: 1.2rem; }
.legal-container section { margin-bottom: 1.5rem; }
/* FIX: live used #0070f3, 2.9:1 on white. One step darker clears AA. */
.legal-container a { color: #0059c1; text-decoration: underline; }


@media (max-width: 600px) {
  .legal-container { padding: 1rem; font-size: 0.97rem; }
  .legal-container h1 { font-size: 1.4rem; }
  .legal-container h2 { font-size: 1.05rem; }
}

/* ============ reduced motion ============ */

/* FIX: live had none, against an infinite 2s word rotator (WCAG 2.2.2). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-line { opacity: 1; transform: none; color: #fff; }
}