/*
|--------------------------------------------------------------------------
| Chicago Home Landing Page
|--------------------------------------------------------------------------
*/

.shared-landing-page {
  color: white;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(180, 0, 0, 0.24),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #130000 0%,
      #050505 48%,
      #000000 100%
    );
}


.landing-hero {
  position: relative;

  overflow: hidden;
}


.landing-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255, 0, 0, 0.12),
      transparent 40%
    );
}


.landing-hero-content {
  position: relative;
  z-index: 1;
}


.landing-eyebrow {
  color: #ff4545;
}


.landing-title {
  color: white;

  text-shadow:
    0 0 40px
    rgba(255, 0, 0, 0.18);
}


.landing-button-primary {
  background: #c90000;
  color: white;
}


.landing-button-primary:hover {
  background: #ef1010;
}


.landing-button-secondary {
  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.2
    );
}


.landing-stat,
.landing-feature {
  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.1
    );
}


.landing-feature:hover {
  border-color:
    rgba(
      255,
      40,
      40,
      0.4
    );
}


.landing-feature-link {
  color: #ff5252;
}


.landing-final-cta {
  background:
    linear-gradient(
      135deg,
      rgba(180, 0, 0, 0.22),
      rgba(255, 255, 255, 0.035)
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );
}


/* FORUM NAV LOGIN STATUS */

.forum-nav-user {
  color:
    var(--cal-white);
}

.forum-nav-logout {
  border-color:
    rgba(255, 255, 255, 0.8);

  color:
    var(--cal-white);
}

.forum-nav-logout:hover {
  background:
    rgba(255, 255, 255, 0.18);
}

/*
|--------------------------------------------------------------------------
| Chicago Forum Navigation
|--------------------------------------------------------------------------
*/

.forum-nav {
  background:
    linear-gradient(
      90deg,
      var(--cal-orange),
      #ff8a3d
    );

  border-bottom:
    6px solid
    var(--cal-yellow);

  box-shadow:
    0 5px 18px
    rgba(1, 87, 155, 0.18);
}

.forum-nav-brand {
  color:
    var(--cal-white);

  font-size:
    1.35rem;
}

.forum-nav-links a {
  color:
    var(--cal-white);
}

.forum-nav-links a:hover {
  background:
    rgba(255, 255, 255, 0.18);
}

.forum-nav-login {
  background:
    var(--cal-yellow);

  color:
    var(--cal-blue-dark)
    !important;

  border:
    0;
}

/*
|--------------------------------------------------------------------------
| Chicago Login CTA
|--------------------------------------------------------------------------
*/

.shared-login-cta-content {
  background:
    linear-gradient(
      135deg,
      var(--cal-orange),
      #ff7043
    );

  color:
    var(--cal-white);

  border-bottom:
    8px solid
    var(--cal-yellow);

  box-shadow:
    0 14px 35px
    rgba(1, 87, 155, 0.18);
}

.shared-login-cta-content h2 {
  color:
    var(--cal-white);
}

.shared-login-cta-button {
  background:
    var(--cal-yellow);

  color:
    var(--cal-blue-dark);

  box-shadow:
    0 5px 0
    #e5a900;
}

/*
|--------------------------------------------------------------------------
| The Chicago Skater
|--------------------------------------------------------------------------
|
| Chicago summer palette:
| - Deep orange
| - Golden yellow
| - Pacific blue
| - White
|--------------------------------------------------------------------------
*/

:root {
  --cal-orange: #f4511e;
  --cal-orange-dark: #d84315;
  --cal-yellow: #ffd54f;
  --cal-yellow-bright: #ffeb3b;
  --cal-blue: #0277bd;
  --cal-blue-dark: #01579b;
  --cal-sky: #e3f5ff;
  --cal-white: #ffffff;
  --cal-text: #17232d;
}


/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

html {
  background:
    linear-gradient(
      180deg,
      #78d4ff 0%,
      #e3f5ff 32%,
      #ffffff 72%
    );
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cal-text);
  background: transparent;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

#app {
  min-height: 70vh;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

#siteHeader {
  min-height: 18px;
  background:
    linear-gradient(
      90deg,
      var(--cal-orange),
      var(--cal-yellow),
      var(--cal-orange)
    );
  border-bottom: 5px solid var(--cal-white);
  box-shadow:
    0 4px 16px
    rgba(1, 87, 155, 0.18);
}


/*
|--------------------------------------------------------------------------
| Home
|--------------------------------------------------------------------------
*/

#app > section {
  width: min(100% - 32px, 1000px);
  box-sizing: border-box;
  margin: 40px auto;
}

#app > section > h1 {
  margin: 0 0 14px;
  color: var(--cal-blue-dark);
  font-size: clamp(
    2.7rem,
    8vw,
    5.5rem
  );
  line-height: 0.95;
  letter-spacing: -0.05em;
}

#app > section > p {
  max-width: 650px;
  margin-bottom: 28px;
  font-size: 1.1rem;
  line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| General links
|--------------------------------------------------------------------------
*/

#app > section > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px 8px 4px 0;
  padding: 12px 22px;
  border-radius: 999px;

  background:
    var(--cal-orange);

  color:
    var(--cal-white);

  font-weight: 800;
  text-decoration: none;

  box-shadow:
    0 5px 0
    var(--cal-orange-dark);

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

#app > section > a:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 7px 0
    var(--cal-orange-dark);
}


/*
|--------------------------------------------------------------------------
| Forum page
|--------------------------------------------------------------------------
*/

.forum-page,
.forum-thread-page,
.forum-create-page {
  background:
    rgba(255, 255, 255, 0.94);

  margin-top: 32px;
  margin-bottom: 60px;

  padding:
    32px;

  box-sizing:
    border-box;

  border-radius:
    24px;

  border-top:
    8px solid
    var(--cal-yellow);

  box-shadow:
    0 16px 45px
    rgba(1, 87, 155, 0.15);
}


/*
|--------------------------------------------------------------------------
| Forum headings
|--------------------------------------------------------------------------
*/

.forum-page-title,
.forum-create-header h1,
.forum-thread-header h1 {
  color:
    var(--cal-blue-dark);
}

.forum-page-description,
.forum-create-header p {
  color:
    #4b6575;
}


/*
|--------------------------------------------------------------------------
| Forum buttons
|--------------------------------------------------------------------------
*/

.forum-create-button,
.forum-submit-button {
  border:
    0;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      var(--cal-orange),
      #ff7043
    );

  color:
    var(--cal-white);

  box-shadow:
    0 5px 0
    var(--cal-orange-dark);
}

.forum-create-button:hover,
.forum-submit-button:hover {
  transform:
    translateY(-2px);
}

.forum-cancel-button {
  border:
    2px solid
    var(--cal-blue);

  border-radius:
    999px;

  color:
    var(--cal-blue);

  background:
    var(--cal-white);
}


/*
|--------------------------------------------------------------------------
| Thread cards
|--------------------------------------------------------------------------
*/

.forum-thread-card {
  border:
    2px solid
    #d5efff;

  border-radius:
    18px;

  background:
    var(--cal-white);

  box-shadow:
    0 6px 18px
    rgba(2, 119, 189, 0.08);

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

.forum-thread-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--cal-yellow);

  box-shadow:
    0 10px 25px
    rgba(2, 119, 189, 0.14);
}

.forum-thread-title {
  color:
    var(--cal-blue-dark);
}

.forum-thread-meta {
  color:
    var(--cal-orange-dark);

  font-weight:
    700;
}


/*
|--------------------------------------------------------------------------
| Replies
|--------------------------------------------------------------------------
*/

.forum-replies-section > h2,
.forum-reply-section > h2 {
  color:
    var(--cal-blue-dark);
}

.forum-post {
  margin-bottom:
    12px;

  padding:
    18px;

  border:
    0;

  border-left:
    5px solid
    var(--cal-yellow);

  border-radius:
    0 14px 14px 0;

  background:
    var(--cal-sky);
}

.forum-post-meta strong {
  color:
    var(--cal-orange-dark);
}


/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

.forum-create-form input,
.forum-create-form textarea,
.forum-reply-form textarea {
  border:
    2px solid
    #b9e5ff;

  border-radius:
    14px;

  background:
    var(--cal-white);

  color:
    var(--cal-text);

  outline:
    none;
}

.forum-create-form input:focus,
.forum-create-form textarea:focus,
.forum-reply-form textarea:focus {
  border-color:
    var(--cal-blue);

  box-shadow:
    0 0 0 4px
    rgba(2, 119, 189, 0.12);
}


/*
|--------------------------------------------------------------------------
| Empty / error states
|--------------------------------------------------------------------------
*/

.forum-empty-state {
  background:
    #fffbea;

  border:
    2px dashed
    var(--cal-yellow);

  color:
    var(--cal-blue-dark);
}

.forum-error-state {
  background:
    #fff2ed;

  border:
    2px dashed
    var(--cal-orange);

  color:
    var(--cal-orange-dark);
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

#siteFooter {
  min-height:
    90px;

  background:
    var(--cal-blue-dark);

  border-top:
    8px solid
    var(--cal-yellow);
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

  .forum-page,
  .forum-thread-page,
  .forum-create-page {
    margin-top:
      18px;

    padding:
      22px;

    border-radius:
      18px;
  }

  #app > section > h1 {
    font-size:
      clamp(
        2.5rem,
        14vw,
        4rem
      );
  }
}