/* =========================================================
   HOME CTA
   ========================================================= */

.home-cta {
  position: relative;

  overflow: hidden;

  min-height: 620px;

  margin-top: 30px;

  padding:
    90px
    60px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 82% 34%,
      rgba(255, 211, 138, 0.95) 0%,
      rgba(255, 138, 0, 0.72) 15%,
      rgba(255, 90, 0, 0.25) 30%,
      transparent 46%
    ),
    linear-gradient(
      135deg,
      #ff7a00 0%,
      #f04a00 36%,
      #4a1608 64%,
      #080808 100%
    );

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.35);
}


/* dark horizon */

.home-cta::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 42%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.8)
    );

  pointer-events: none;
}


.home-cta > * {
  position: relative;

  z-index: 2;
}


/* sun */

.home-cta-glow {
  position: absolute;

  right: 8%;

  top: 18%;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #fff7dc 0%,
      #ffc45f 24%,
      #ff7a00 55%,
      rgba(255, 90, 0, 0) 72%
    );

  opacity: 0.9;

  filter: blur(1px);

  z-index: 1;
}


/* headline */

.home-cta h1 {
  max-width: 820px;

  margin:
    12px 0
    20px;

  font-size:
    clamp(
      58px,
      9vw,
      120px
    );

  line-height: 0.84;

  letter-spacing: -6px;

  text-transform: uppercase;

  text-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.35);
}


/* body */

.home-cta p {
  max-width: 650px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.88);

  font-size: 18px;

  line-height: 1.65;
}


/* buttons */

.home-cta-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 32px;
}


.home-cta-button {
  min-height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0
    24px;

  border-radius: 12px;

  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.6px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


/* forum */

.home-cta-forum {
  background: #080808;

  color: white;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  box-shadow:
    0 16px 35px
    rgba(0, 0, 0, 0.3);
}


.home-cta-forum:hover {
  transform:
    translateY(-3px);

  background: #151515;
}


/* login */

.home-cta-login {
  background: white;

  color: #111;

  border:
    1px solid white;
}


.home-cta-login:hover {
  transform:
    translateY(-3px);

  background:
    #ffcf8c;

  border-color:
    #ffcf8c;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 700px
) {

  .home-cta {
    min-height: 520px;

    padding:
      65px
      26px;

    border-radius: 22px;
  }


  .home-cta h1 {
    letter-spacing: -4px;
  }


  .home-cta-glow {
    width: 210px;

    height: 210px;

    right: -45px;

    top: 14%;
  }


  .home-cta-actions {
    flex-direction: column;

    width: 100%;
  }


  .home-cta-button {
    width: 100%;
  }

}

/* =========================================================
   HEADER BUTTONS
   ========================================================= */

header nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

header nav a {
  color: white;
  text-decoration: none;
}

.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 0 18px;

  border-radius: 10px;

  font-size: 13px;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: 0.5px;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

/* Forum */

.forum-button {
  background: linear-gradient(
    135deg,
    #ff8a00,
    #ff5a00
  );

  color: white;

  box-shadow:
    0 8px 22px
    rgba(255, 90, 0, 0.28);
}

.forum-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 28px
    rgba(255, 90, 0, 0.4);
}

/* Login */

.login-button {
  background: #ffffff;

  color: #111111;

  border: 1px solid white;
}

.login-button:hover {
  transform: translateY(-2px);

  background: #ffb347;

  border-color: #ffb347;

  color: #111;
}

/* =========================================================
   THE CITY SKATER
   Orange / Black / White Sunset Theme
   ========================================================= */

:root {
  --black: #080808;
  --black-soft: #111111;
  --black-card: #171717;

  --orange: #ff5a00;
  --orange-bright: #ff7a00;
  --orange-light: #ffad42;

  --white: #ffffff;
  --off-white: #f7f3ee;
  --gray: #a8a8a8;

  --border: rgba(255, 255, 255, 0.12);

  --shadow:
    0 20px 50px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    linear-gradient(
      180deg,
      #ff8a00 0px,
      #ff5a00 190px,
      #18110d 430px,
      #080808 700px
    );

  background-attachment: fixed;

  color: var(--white);

  min-height: 100vh;
}


/* =========================================================
   HEADER
   ========================================================= */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 20px 30px;

  background:
    rgba(8, 8, 8, 0.94);

  border-bottom:
    1px solid rgba(255, 122, 0, 0.45);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.25);

  position: sticky;

  top: 0;

  z-index: 100;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
  color: var(--white);

  font-size: 22px;

  font-weight: 900;

  letter-spacing: -0.5px;

  text-transform: uppercase;
}

.brand::before {
  content: "";

  display: inline-block;

  width: 12px;
  height: 12px;

  margin-right: 10px;

  border-radius: 50%;

  background: var(--orange);

  box-shadow:
    0 0 10px var(--orange),
    0 0 25px rgba(255, 90, 0, 0.7);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

header nav {
  display: flex;

  align-items: center;

  gap: 24px;
}

header a {
  color: var(--white);

  text-decoration: none;

  font-weight: 700;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

header nav a {
  color: #d7d7d7;

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: 0.7px;
}

header nav a:hover {
  color: var(--orange-light);
}


/* =========================================================
   APP
   ========================================================= */

#app {
  width: min(
    1200px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    40px 0
    100px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  overflow: hidden;

  margin-top: 25px;

  padding:
    90px
    55px
    100px;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 80% 35%,
      rgba(255, 174, 66, 0.95) 0,
      rgba(255, 90, 0, 0.65) 13%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #ff7a00 0%,
      #e94600 40%,
      #250d05 72%,
      #080808 100%
    );

  box-shadow: var(--shadow);
}


/*
Sun
*/

.hero::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: 8%;
  top: 50%;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #fff4d7 0%,
      #ffbf54 25%,
      #ff7a00 55%,
      rgba(255, 90, 0, 0) 72%
    );

  opacity: 0.85;

  filter: blur(1px);
}


/*
Dark horizon
*/

.hero::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 34%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.82)
    );

  pointer-events: none;
}

.hero > * {
  position: relative;

  z-index: 2;
}

.hero h1 {
  max-width: 780px;

  margin: 0;

  font-size:
    clamp(
      52px,
      8vw,
      100px
    );

  line-height: 0.9;

  letter-spacing: -5px;

  text-transform: uppercase;

  text-shadow:
    0 8px 30px
    rgba(0, 0, 0, 0.35);
}

.hero p {
  max-width: 620px;

  margin-top: 25px;

  color:
    rgba(255, 255, 255, 0.87);

  font-size: 18px;

  line-height: 1.6;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
  position: relative;

  overflow: hidden;

  margin-top: 25px;

  padding:
    70px
    45px
    55px;

  border-radius: 24px;

  background:
    linear-gradient(
      120deg,
      #ff7200 0%,
      #e84600 38%,
      #120b08 78%
    );

  box-shadow: var(--shadow);
}

.page-header::after {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  right: -40px;
  top: -70px;

  border-radius: 50%;

  background:
    rgba(255, 184, 82, 0.35);

  filter: blur(3px);
}

.page-header h1 {
  position: relative;

  z-index: 2;

  margin: 10px 0;

  max-width: 850px;

  font-size:
    clamp(
      48px,
      7vw,
      82px
    );

  line-height: 0.95;

  letter-spacing: -3px;

  text-transform: uppercase;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.eyebrow {
  position: relative;

  z-index: 2;

  display: inline-block;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--white);

  border-left:
    5px solid var(--black);

  padding-left: 12px;
}


/* =========================================================
   LOCATIONS SECTION
   ========================================================= */

.locations-section {
  margin-top: 55px;
}

.locations-section h2 {
  margin-bottom: 25px;

  font-size:
    clamp(
      30px,
      5vw,
      52px
    );

  letter-spacing: -2px;

  text-transform: uppercase;
}


/* =========================================================
   LOCATION GRID
   ========================================================= */

.location-grid,
#locationsGrid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(260px, 1fr)
    );

  gap: 20px;
}


/* =========================================================
   LOCATION CARDS
   ========================================================= */

.location-card {
  position: relative;

  overflow: hidden;

  min-height: 220px;

  padding: 26px;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #1d1d1d,
      #101010
    );

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.2);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}


/*
Orange sunset stripe
*/

.location-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 5px;

  background:
    linear-gradient(
      90deg,
      #ff3d00,
      #ff7a00,
      #ffc05c
    );
}

.location-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(255, 122, 0, 0.65);

  box-shadow:
    0 22px 45px
    rgba(0, 0, 0, 0.38);
}

.location-card h3 {
  margin:
    10px 0
    12px;

  color: var(--white);

  font-size: 22px;

  line-height: 1.15;
}

.location-card p {
  color: var(--gray);

  line-height: 1.55;
}


/* =========================================================
   LOCATION LINKS
   ========================================================= */

.location-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  color: var(--orange-light);

  font-weight: 800;

  text-decoration: none;
}

.location-link::after {
  content: "→";

  transition:
    transform 0.2s ease;
}

.location-link:hover::after {
  transform:
    translateX(5px);
}


/* =========================================================
   INDIVIDUAL LOCATION PAGE
   ========================================================= */

.location-page {
  position: relative;

  overflow: hidden;

  max-width: 900px;

  margin-top: 30px;

  padding:
    80px
    50px;

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      #1c1c1c,
      #090909
    );

  border:
    1px solid var(--border);

  box-shadow: var(--shadow);
}

.location-page::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 8px;

  background:
    linear-gradient(
      90deg,
      #ff3d00,
      #ff7a00,
      #ffb347
    );
}

.location-page h1 {
  max-width: 800px;

  margin:
    10px 0
    20px;

  font-size:
    clamp(
      48px,
      8vw,
      92px
    );

  line-height: 0.92;

  letter-spacing: -4px;

  text-transform: uppercase;
}

.location-page-city {
  display: inline-block;

  margin-top: 10px;

  color: var(--orange-light);

  font-size: 24px;

  font-weight: 700;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    14px
    22px;

  border: 0;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      var(--orange-bright),
      var(--orange)
    );

  color: var(--white);

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  cursor: pointer;

  box-shadow:
    0 10px 25px
    rgba(255, 90, 0, 0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

button:hover,
.button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 15px 35px
    rgba(255, 90, 0, 0.38);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 700px
) {

  header {
    padding:
      17px
      20px;
  }

  header nav {
    gap: 12px;
  }

  header nav a {
    font-size: 12px;
  }

  .brand {
    font-size: 17px;
  }

  #app {
    width:
      calc(
        100% - 24px
      );
  }

  .hero {
    padding:
      65px
      25px
      75px;

    border-radius: 20px;
  }

  .hero::before {
    width: 180px;
    height: 180px;

    right: -50px;
    top: 25%;
  }

  .hero h1 {
    letter-spacing: -3px;
  }

  .page-header {
    padding:
      55px
      25px
      45px;
  }

  .location-page {
    padding:
      60px
      25px;
  }

  .location-page h1 {
    letter-spacing: -3px;
  }

}