/* global.css — fonts, tokens, reset, shared components */

@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-normal-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../assets/fonts/lato-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --red: #eb3f41;
  --red-deep: #852425;
  --red-bright: #ff0000;
  --red-faq: #eb4345;
  --red-band: #eb4143;
  --orange: #e14a13;
  --orange-text: #e04817;
  --coral: #ed4a48;
  --cream: #f7f1e7;
  --cream-alt: #f6f1e7;
  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, 0.8);
  --ink-faq: #171717;
  --white: #ffffff;

  --font-lato: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-caveat: "Caveat", cursive;

  /* Fixed UI (sticky CTAs): same uncapped 1920 scale as .page --s for zoom −25% */
  --float-s: max(0.5333px, calc(100vw / 1920));
}

/*
 * Desktop scale unit: 1 Figma px at 1920px wide. Scales linearly with the viewport
 * from 1024px (0.5333px) upward with no cap, so wide screens and browser zoom-out
 * keep the exact 1920 composition edge to edge.
 */
.page {
  container-type: inline-size;
  --s: max(0.5333px, calc(100cqw / 1920));
  --line: max(1px, var(--s));
  --shadow-pill: 0 calc(33 * var(--s)) calc(40 * var(--s)) rgba(0, 0, 0, 0.07),
    0 calc(13.787 * var(--s)) calc(16.711 * var(--s)) rgba(0, 0, 0, 0.05),
    0 calc(7.371 * var(--s)) calc(8.935 * var(--s)) rgba(0, 0, 0, 0.04),
    0 calc(4.132 * var(--s)) calc(5.009 * var(--s)) rgba(0, 0, 0, 0.04),
    0 calc(2.195 * var(--s)) calc(2.66 * var(--s)) rgba(0, 0, 0, 0.03),
    0 calc(0.913 * var(--s)) calc(1.107 * var(--s)) rgba(0, 0, 0, 0.02);
  --shadow-glow: 0 calc(4 * var(--s)) calc(50 * var(--s)) rgba(255, 5, 5, 0.3);
  overflow-x: clip;
}

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

html {
  scroll-behavior: smooth;
  /* keeps anchored sections clear of the sticky header */
  scroll-padding-top: max(53px, calc(100vw * 100 / 1920));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-lato);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stage {
  position: relative;
  width: calc(1920 * var(--s));
  margin-inline: auto;
}

.sectionHeading {
  font-weight: 500;
  font-size: calc(64 * var(--s));
  line-height: normal;
  text-align: center;
  color: var(--ink);
}

.sectionLead {
  font-size: calc(22 * var(--s));
  line-height: 1.5;
  text-align: center;
}

/* Pill buttons (hero + footer) */
.pillBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(22 * var(--s)) calc(40 * var(--s));
  border-radius: 999px;
  font-family: var(--font-helvetica);
  font-size: calc(20 * var(--s));
  line-height: 1.1;
  white-space: nowrap;
  text-transform: capitalize;
  box-shadow: 0 calc(14 * var(--s)) calc(7 * var(--s)) rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.pillBtn:hover {
  transform: translateY(-2px);
}

.pillBtn--orange {
  background: #cf1f04;
  color: var(--white);
  font-weight: 700;
}

.pillBtn--orange:hover {
  background: #a81903;
}

.pillBtn--black {
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
}

.pillBtn--black:hover {
  background: #2a2a2a;
}

.pillBtn--outline {
  background: var(--white);
  color: var(--ink);
  font-weight: 500;
  border: var(--line) solid rgba(225, 74, 19, 0.5);
  padding: calc(22 * var(--s) - var(--line)) calc(40 * var(--s) - var(--line));
}

.pillBtn--outline:hover {
  border-color: var(--orange);
}

/* Segmented tabs (events, prize, highlights) */
.tabGroup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--s));
}

.tabBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(71 * var(--s));
  min-width: calc(162 * var(--s));
  padding: calc(22 * var(--s)) calc(40 * var(--s));
  border-radius: calc(35.5 * var(--s));
  background: var(--white);
  color: var(--red);
  font-weight: 700;
  font-size: calc(28 * var(--s));
  line-height: normal;
  white-space: nowrap;
  box-shadow: var(--shadow-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tabBtn--upper {
  text-transform: uppercase;
}

.tabBtn.is-active {
  color: var(--white);
  font-weight: 900;
}

.tabBtn--gradient.is-active {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
}

.tabBtn--solid.is-active {
  background: var(--red);
}

.tabBtn--dark.is-active {
  background: var(--ink);
  box-shadow: var(--shadow-glow);
}

.tabBtn:not(.is-active):hover {
  background: #fff3f3;
}

.desktopBreak {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Tablet + mobile: fluid unit no longer tied to the 1920 stage */
@media (max-width: 1023px) {
  html {
    scroll-padding-top: 72px;
  }

  .page {
    --s: clamp(0.62px, calc(100cqw / 1100), 0.9px);
  }

  .stage {
    width: 100%;
    padding-inline: clamp(16px, 4vw, 40px);
  }

  .desktopBreak {
    display: none;
  }

  .sectionHeading {
    font-size: clamp(30px, 5.4vw, 48px);
  }

  .sectionLead {
    font-size: clamp(15px, 2.2vw, 19px);
  }

  .pillBtn {
    font-size: clamp(14px, 2vw, 18px);
    padding: 16px 28px;
  }

  .pillBtn--outline {
    padding: 15px 27px;
  }

  .tabGroup {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tabBtn {
    height: 48px;
    min-width: 0;
    padding: 0 22px;
    border-radius: 24px;
    font-size: clamp(16px, 2.4vw, 22px);
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: calc(100vw * 60 / 420);
  }
}

/* ---------- Sticky registration tabs ---------- */
.floatCtas {
  position: fixed;
  z-index: 30;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.floatCtas__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, calc(22 * var(--float-s)), 28px) clamp(8px, calc(14 * var(--float-s)), 18px);
  font-family: var(--font-helvetica);
  color: var(--white);
  box-shadow: clamp(-2px, calc(-4 * var(--float-s)), -6px) 0 clamp(10px, calc(18 * var(--float-s)), 24px)
    rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.floatCtas__label {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(10px, calc(14 * var(--float-s)), 16px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: clamp(0.02em, calc(0.5 * var(--float-s)), 0.06em);
  text-transform: uppercase;
  white-space: nowrap;
}

.floatCtas__btn--open {
  background: #cf1f04;
  border-radius: clamp(10px, calc(14 * var(--float-s)), 18px) 0 0 0;
}

.floatCtas__btn--mahe {
  color: var(--ink);
  background: var(--white);
  border: max(1px, calc(1 * var(--float-s))) solid rgba(225, 74, 19, 0.5);
  border-right: 0;
  border-radius: 0 0 0 clamp(10px, calc(14 * var(--float-s)), 18px);
  box-shadow: clamp(-2px, calc(-4 * var(--float-s)), -6px) 0 clamp(8px, calc(16 * var(--float-s)), 22px)
    rgba(0, 0, 0, 0.1);
}

.floatCtas__btn--open:hover {
  background: #a81903;
}

.floatCtas__btn--mahe:hover {
  border-color: var(--orange);
}

.floatCtas__btn--mahe .floatCtas__label {
  font-weight: 500;
}

.floatCtas__btn:focus-visible {
  outline: max(2px, calc(2 * var(--float-s))) solid var(--ink);
  outline-offset: calc(-3 * var(--float-s));
}

@media (max-width: 768px) {
  :root {
    --float-m: calc(100vw / 420);
  }

  body {
    padding-bottom: calc(clamp(48px, calc(56 * var(--float-m)), 68px) + env(safe-area-inset-bottom, 0px));
  }

  .floatCtas {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    translate: none;
    flex-direction: row;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    filter: none;
    box-shadow: 0 clamp(-2px, calc(-4 * var(--float-m)), -6px) clamp(12px, calc(20 * var(--float-m)), 24px)
      rgba(0, 0, 0, 0.1);
  }

  .floatCtas__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: clamp(44px, calc(52 * var(--float-m)), 64px);
    padding: clamp(8px, calc(12 * var(--float-m)), 14px) clamp(6px, calc(8 * var(--float-m)), 12px);
    border-radius: 0;
    box-shadow: none;
  }

  .floatCtas__btn--open {
    flex: 1.22 1 0;
    background: #cf1f04;
  }

  .floatCtas__label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(11px, 2.45vw, 14px);
    letter-spacing: 0;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
  }

  .floatCtas__btn--mahe {
    background: var(--white);
    color: var(--ink);
    border: 0;
    box-shadow: inset max(1px, calc(1 * var(--float-m))) 0 0 rgba(225, 74, 19, 0.45);
  }

  .floatCtas__btn--mahe .floatCtas__label {
    font-weight: 500;
  }

  .floatCtas__btn--mahe:hover {
    background: #fff8f5;
  }
}