@import url("./main.css");
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@600;700&display=swap");

/* Gamegou hero font update
   This file is designed to replace assets/css/main.min.css.
   It keeps the existing site styling by importing main.css first, then applies the new hero typography.
*/
:root {
  --hero-sport-font: "Teko", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
}

.hero h1,
.hero-title,
.hero-heading,
.hero__title,
.hero-copy h1,
.hero-content h1 {
  font-family: var(--hero-sport-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: clamp(5.4rem, 13.6vw, 11.2rem) !important;
  line-height: 0.78 !important;
  letter-spacing: 0.015em !important;
  color: #ffffff !important;
  max-width: 8.5ch;
  margin-bottom: clamp(1rem, 2vw, 1.6rem) !important;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.58),
    -4px 0 20px rgba(225, 120, 0, 0.08);
  transform: skewX(-4deg);
  transform-origin: left center;
}

.hero h1 span,
.hero-title span,
.hero-heading span,
.hero__title span,
.hero-copy h1 span,
.hero-content h1 span {
  color: inherit !important;
}

.hero-eyebrow,
.hero .eyebrow,
.hero .kicker,
.hero-kicker,
.hero-copy .eyebrow,
.hero-content .eyebrow {
  font-family: var(--hero-sport-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #f28c18 !important;
  font-size: clamp(0.95rem, 1.5vw, 1.35rem) !important;
}

.hero-desc,
.hero-text,
.hero-subtitle,
.hero .lead,
.hero-copy > p:last-of-type,
.hero-content > p:last-of-type {
  font-size: clamp(1.1rem, 2vw, 1.55rem) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.78) !important;
  max-width: 720px;
}

.hero {
  background:
    radial-gradient(circle at 11% 34%, rgba(242, 140, 24, 0.16), transparent 28%),
    radial-gradient(circle at 80% 50%, rgba(0, 86, 120, 0.13), transparent 34%),
    linear-gradient(120deg, #171006 0%, #070a0d 45%, #05080d 100%) !important;
}

@media (max-width: 720px) {
  .hero h1,
  .hero-title,
  .hero-heading,
  .hero__title,
  .hero-copy h1,
  .hero-content h1 {
    font-size: clamp(4.6rem, 22vw, 7.5rem) !important;
    line-height: 0.8 !important;
    max-width: 7.8ch;
  }

  .hero-eyebrow,
  .hero .eyebrow,
  .hero .kicker,
  .hero-kicker,
  .hero-copy .eyebrow,
  .hero-content .eyebrow {
    letter-spacing: 0.18em !important;
  }
}