/* --- Form Styles --- */
.form-card {
  background-image: linear-gradient(to bottom right, #122344, #0f172a);
}

.form-badge {
  background-image: linear-gradient(
    to right,
    var(--primary),
    var(--primary-gradient)
  );
  color: white;
}
.form-title {
  color: white;
}
.title-emphasis {
  color: var(--primary);
}
.form-secondary {
  color: rgba(255, 255, 255, 0.8);
}

.form-input {
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  background-color: #f3f4f6;
  font-weight: 500;
  color: #000;
}
.form-input::placeholder {
  color: #9ca3af;
}
.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.form-input-icon {
  color: #000;
}
.form-input-field:focus-within .form-input-icon {
  color: var(--primary);
}

.form-input-description {
  color: #fff;
}
.form-input-success {
  background-color: #f0fdf4 !important;
  border-color: #4ade80 !important;
  box-shadow: 0 0 0 1px #86efac !important;
  color: #166534 !important;
}
.form-input-success::placeholder {
  color: #15803d !important;
}
.form-input-icon-success {
  color: #16a34a !important;
}

.form-button {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  background: linear-gradient(
    to right,
    var(--primary),
    var(--primary-gradient)
  );
  color: white;
  transition: all 0.2s;
}
.form-button:hover {
  filter: brightness(110%);
}
.form-button:focus {
  border-color: var(--primary);
}

/* --- Hero Styles --- */
.hero-title {
  color: white;
}

.hero-title-emphasis {
  color: white;
  background: linear-gradient(
    to right,
    var(--primary),
    var(--primary-gradient)
  );
  clip-path: polygon(18px 0%, 100% 0%, calc(100% - 18px) 100%, 0% 100%);
}

.hero-secondary {
  color: rgba(255, 255, 255, 0.8);
}

.hero-introduction {
  border-radius: 0.75rem;
  background-color: white;
  border: 2px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  color: #000;
}

/* --- Highlights Styles --- */
.highlight-card-link {
  background-image: linear-gradient(
    to right,
    var(--primary),
    var(--primary-gradient)
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: all 0.2s;
}

.highlight-card-link:hover {
  background-size: 100% 100%;
}

.highlight-card-link:hover .highlight-card-title,
.highlight-card-link:hover .highlight-card-description {
  color: black;
  transition: all 0.2s;
}

/* --- Sessions Styles --- */
.session-card-badge {
  color: white;
  background-image: linear-gradient(
    to right,
    var(--primary),
    var(--primary-gradient)
  );
}

.sessions-button-secondary {
  color: black;
  border: 2px solid black;
}

.sessions-button-secondary:hover {
  color: black;
  text-decoration: underline;
}

/* --- Exhibitors Styles --- */
.exhibitors-button-secondary {
  color: white;
  border: 2px solid white;
}

.exhibitors-button-secondary:hover {
  color: white;
  text-decoration: underline;
}

/* --- CTA Styles --- */
.cta-primary {
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  background: linear-gradient(
    to right,
    var(--primary),
    var(--primary-gradient)
  );
  color: white;
  transition: all 0.2s;
}

.cta-primary:hover {
  filter: brightness(110%);
}

.cta-primary:focus {
  border-color: var(--primary);
}

.cta-secondary {
  text-align: center;
  color: white;
  background: transparent;
  border: 2px solid white;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.cta-secondary:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Sections Styles --- */
.section {
  width: 100vw;
  padding: 6rem 2rem;
}

.section:nth-child(odd) {
  background-color: white;
  color: black;
}

.section:nth-child(even) {
  background-color: black;
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
  color: white;
}

.section-button-primary {
  height: 3rem;
  padding: 0 1.5rem;
  text-align: center;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  background: linear-gradient(
    to right,
    var(--primary),
    var(--primary-gradient)
  );
  color: white;
  transition: all 0.2s;
}

.section-button-primary:hover {
  filter: brightness(110%);
}

.section-button-primary:focus {
  border-color: var(--primary);
}

.section-button-secondary {
  height: 3rem;
  padding: 0 1.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  border-radius: 9999px;
}

.section-button-secondary:hover {
  background: transparent;
}

@media (max-width: 480px) {
  .hero-title-highlight {
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  }
  .highlight-card-link:hover {
    background-size: 0% 100% !important;
  }
  .section {
    padding: 4rem 1rem;
  }
  .section:nth-child(even) {
    clip-path: polygon(0 0, 100% 1.5%, 100% 100%, 0 98.5%);
  }
}