/* Newsletter Section */
.newsletter {
  background-color: var(--clr-darknavy) !important;
  color: var(--clr-light);
  text-align: center;
}

.newsletter-description {
  max-width: 600px;
  margin: 0 auto 2rem;
}

#mc_embed_signup {
  background: transparent;
  clear: left;
  width: 100%;
}

#mc-embedded-subscribe-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

#mc_embed_signup_scroll {
  display: flex;
  width: 100%;
  gap: 1rem;
}

#mc_embed_signup input.email {
  flex-grow: 1;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  height: 38px;
}

#mc_embed_signup .button {
  flex-shrink: 0;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.05em;
  margin: auto;
  width: 150px !important;
  height: 40px;
  background-color: var(--clr-lightgold);
  color: var(--clr-light);
  padding: 0.5em 1em;
  border-radius: 6px;
  border: none;
  box-shadow: 0 10px 20px rgba(202, 138, 4, 0.5), 0 6px 6px rgba(202, 138, 4, 0.5), 0 0 100px -10px var(--clr-lightgold);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}

#mc_embed_signup .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(202, 138, 4, 0.25), 0 10px 10px rgba(202, 138, 4, 0.22), 0 0 120px -10px var(--clr-lightgold);
  color: var(--clr-dark);
}

/* Style the response messages */
#mce-responses {
  margin-top: 1rem;
}

#mce-success-response, #mce-error-response {
  padding: 0.5rem;
  border-radius: 4px;
}

#mce-success-response {
  background-color: var(--clr-green);
  color: var(--clr-light);
}

#mce-error-response {
  background-color: #ef4444;
  color: var(--clr-light);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #mc_embed_signup_scroll {
    flex-direction: column;
  }

  #mc_embed_signup input.email,
  #mc_embed_signup .button {
    width: 100%;
  }

  #mc_embed_signup .button {
    margin-top: 1rem;
  }
}