/* ============================================================================
   South West Boxing Club — Coming Soon splash
   Brand layer lifted 1:1 from the main site (css/site.css) so the two match.
   Vibe axes: heavy display / SHARP radius / warm-dark canvas / minimal chrome.
   ========================================================================== */

:root {
  /* Gold ramp */
  --accent-300: #ddc270;
  --accent-500: #C7A63A;

  /* Forest green + cream (brand) */
  --d-bg:    #13351D;
  --d-text:  #EDEADD;
  --d-muted: #a9b8a0;
  --d-line:  color-mix(in srgb, #EDEADD 18%, transparent);

  /* Brand black — never pure #000 */
  --ink: #0D0D0D;

  --font-display: 'Graduate', ui-serif, Georgia, serif;
  --font-body: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --tracking-wide: 0.12em;
  --radius-sharp: 2px;

  /* 4/8 spacing scale */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;

  --dur: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--d-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* --- Language toggle: show only the active language ---------------------- */
html[lang="en"] [data-lang="fr"],
html[lang="fr"] [data-lang="en"] { display: none; }

/* ---------------------------------------------------------------------------
   Splash — full-bleed photo, dark green-black wash, centered stack
   ------------------------------------------------------------------------- */
.splash {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-5);
  isolation: isolate;
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 78%, transparent) 0%,
      color-mix(in srgb, var(--d-bg) 62%, transparent) 45%,
      color-mix(in srgb, var(--ink) 88%, transparent) 100%),
    url('/assets/img/bg-gym.jpg');
  background-size: cover;
  background-position: center;
}

/* Film grain over the photo — same treatment as the main site */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.splash__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-5);
}

.splash__logo {
  width: auto;
  /* Art is edge-to-edge now (transparent padding cropped), so this is all mark:
     ~1.8x the visible emblem of the old padded file at a smaller declared height. */
  height: clamp(165px, 22vw, 215px);
  filter: drop-shadow(0 12px 32px rgb(0 0 0 / 0.55));
}

.splash__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Solid leading + scale-over-weight, per the house display rule */
  font-size: clamp(2.75rem, 11vw, 5.75rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--d-text);
  text-shadow: 0 6px 28px rgb(0 0 0 / 0.5);
}

.rule-gold {
  width: 64px;
  height: 2px;
  margin: 0;
  border: 0;
  background: var(--accent-500);
}

.splash__lead {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 2.4vw, 0.875rem);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.7;
  color: color-mix(in srgb, var(--d-text) 82%, transparent);
  max-width: 42ch;
}

/* ---------------------------------------------------------------------------
   Signup — wrapper for the Mindbody/Healcode prospects widget
   Widget-specific overrides live in the block below.
   ------------------------------------------------------------------------- */
.signup {
  width: 100%;
  max-width: 520px;
  margin-top: var(--space-2);
}

.signup__fallback {
  font-size: 0.875rem;
  color: var(--d-muted);
  line-height: 1.7;
}
.signup__fallback a { color: var(--accent-300); }

/* --- Social ------------------------------------------------------------- */
.social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--d-line);
  border-radius: var(--radius-sharp);
  color: color-mix(in srgb, var(--d-text) 88%, transparent);
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.social__link svg { width: 20px; height: 20px; display: block; }
.social__link:hover,
.social__link:focus-visible {
  color: var(--ink);
  background: var(--accent-500);
  border-color: var(--accent-500);
}

.splash__place {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--d-muted) 88%, transparent);
}

.splash__legal {
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.splash__legal a {
  color: color-mix(in srgb, var(--d-muted) 70%, transparent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.splash__legal a:hover { color: var(--accent-300); border-bottom-color: var(--accent-500); }

/* --- Language toggle ----------------------------------------------------- */
.lang-toggle {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 3;
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-sharp);
  color: var(--d-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
  color: var(--ink);
  background: var(--accent-500);
  border-color: var(--accent-500);
}

:where(a, button):focus-visible {
  outline: 2px solid var(--accent-300);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Healcode (Mindbody) prospects widget — restyled to brand.
   The widget renders real DOM (no iframe), so it can be themed. Its own
   stylesheet is injected AFTER this file, so overrides need !important.
   Class names verified against the live widget render, not guessed.
   ------------------------------------------------------------------------- */
.signup healcode-widget { display: block; width: 100%; }
.signup .healcode.prospect { background: none !important; border: 0 !important; padding: 0 !important; }

/* EN and FR are two separate Mindbody widgets, both mounted at load (see the
   note in index.html for why they can't be swapped on toggle). Show whichever
   matches <html lang>. This has to key off the vendor's own data-widget-id:
   healcode.js consumes a data-lang attribute and strips unknown ones, so the
   [data-lang] rule used everywhere else on this page can't reach these. */
html[lang="fr"] .signup healcode-widget[data-widget-id="7865975fb7e"],
html[lang="en"] .signup healcode-widget[data-widget-id="7866000fb7e"] { display: none; }

/* Widget re-renders the club logo + its own promo line. Both are redundant
   here — we show the logo above, and the promo repeats our own lead. (Each
   widget now carries its own language, so this is no longer about the toggle;
   it's a duplication call.) Alyx can also remove these in the widget settings. */
.signup .healcode-prospect-logo,
.signup .healcode-prospect-promo-text { display: none !important; }

.signup .hc_prospect { display: grid !important; gap: var(--space-3) !important; }
.signup .hc-prospect-field { margin: 0 !important; }

.signup .hc-prospect-field input {
  width: 100% !important;
  padding: var(--space-4) !important;
  background: color-mix(in srgb, var(--ink) 62%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent-500) 38%, transparent) !important;
  border-radius: var(--radius-sharp) !important;
  color: var(--d-text) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
  transition: border-color var(--dur) var(--ease-out);
}
.signup .hc-prospect-field input::placeholder {
  color: color-mix(in srgb, var(--d-text) 52%, transparent) !important;
  text-transform: uppercase;
  font-size: 0.8125rem;
}
.signup .hc-prospect-field input:focus {
  outline: none !important;
  border-color: var(--accent-500) !important;
}

/* Consent checkboxes — CASL express consent, must stay visible and legible */
.signup .communication-wrapper {
  display: grid !important;
  gap: var(--space-2) !important;
  margin: var(--space-2) 0 0 !important;
  text-align: left;
}
.signup .communication-settings,
.signup .communication-settings * {
  color: color-mix(in srgb, var(--d-text) 80%, transparent) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  line-height: 1.6 !important;
}
.signup .communication-settings input[type="checkbox"] {
  accent-color: var(--accent-500);
  width: 16px; height: 16px;
  margin-right: var(--space-2) !important;
  vertical-align: middle;
}

/* Submit — brand gold, matches the site's .btn language */
.signup .hc-actions { margin: var(--space-3) 0 0 !important; }
.signup .hc-prospect-submit {
  width: 100% !important;
  padding: var(--space-4) var(--space-6) !important;
  background: var(--accent-500) !important;
  border: 1px solid var(--accent-500) !important;
  border-radius: var(--radius-sharp) !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.signup .hc-prospect-submit:hover,
.signup .hc-prospect-submit:focus-visible {
  background: transparent !important;
  color: var(--accent-300) !important;
}

/* Mindbody attribution + privacy link — kept (attribution), made subtle */
.signup .hc-privacy-footer {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4) !important;
  opacity: 0.55;
}
.signup .hc-privacy-footer img { max-height: 26px; width: auto; }
.signup .hc-privacy-footer a,
.signup .widget-privacy-link a {
  color: color-mix(in srgb, var(--d-text) 78%, transparent) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em;
}

/* Success / error messages the widget swaps in after submit */
.signup .healcode.prospect > div:not(.hc-privacy-footer) { color: var(--d-text) !important; }

@media (max-width: 560px) {
  .splash { padding: var(--space-8) var(--space-4); }
  .lang-toggle { top: var(--space-4); right: var(--space-4); }
}

/* ============================================================================
   LEGAL / POLICY PAGE (privacy.html)
   The splash is a single centered stack; a policy is a document, so it gets its
   own quiet column. Kept on the dark canvas so it still reads as the same site.
   Type steps below match css/site.css 1:1 — when the full site replaces this
   project at /privacy.html, the page should not visibly jump.
   ========================================================================== */
:root {
  --step--2: 0.694rem;
  --step--1: 0.833rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  1.5rem;
  --step-4:  clamp(2.1rem, 4vw, 2.8rem);
  --leading-normal: 1.65;
  --space-9: 96px;
}

.doc {
  min-height: 100%;
  padding: var(--space-7) var(--space-5) var(--space-9);
  background: var(--ink);
}
.doc__in { max-width: 74ch; margin: 0 auto; counter-reset: legal-section; }

.doc__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--d-muted);
  text-decoration: none;
  margin-bottom: var(--space-7);
  transition: color var(--dur) var(--ease-out);
}
.doc__back:hover { color: var(--accent-300); }

.doc h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.12;
  color: var(--d-text);
  margin: 0 0 var(--space-4);
}
.doc__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--d-muted);
  border-bottom: 1px solid var(--d-line);
  padding-bottom: var(--space-4);
  margin: 0 0 var(--space-6);
}

.doc p, .doc li {
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--d-text);
  margin: 0 0 var(--space-4);
}

.doc section { margin: 0 0 var(--space-7); }

.doc h2 {
  counter-increment: legal-section;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--d-text);
  margin: 0 0 var(--space-4);
}
.doc h2::before {
  content: counter(legal-section, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-300);
  margin-bottom: var(--space-2);
}

/* Underlined, not colour-only — colour alone is not an accessible link cue
   inside a wall of body text. */
.doc a:not(.doc__back) {
  color: var(--accent-300);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.doc a:not(.doc__back):hover { text-decoration-thickness: 2px; }

.doc ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.doc ul li { position: relative; padding-left: var(--space-5); margin-bottom: var(--space-3); }
.doc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--accent-500);
}

.doc__callout {
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--radius-sharp);
  background: color-mix(in srgb, var(--d-bg) 60%, transparent);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.doc__callout > :last-child { margin-bottom: 0; }

/* The splash pins the toggle over a full-bleed photo; on the document it has to
   sit in normal flow or it floats over the text as you scroll. */
.doc .lang-toggle { position: static; display: block; margin: 0 0 var(--space-5) auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}