/* Newsletter Form Styles */
.embeddable-buttondown-form {
  max-width: 500px;
  margin: 20px auto; /* Center the form and add some vertical margin */
  text-align: center; /* Ensure content is centered */
}

.embeddable-buttondown-form label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--text-color); /* Use text color variable */
}

/* Style for the form on the accent background (index page) */
.section[style*="--accent-color"] .embeddable-buttondown-form label,
.section[style*="--accent-color"] .embeddable-buttondown-form p a {
  color: var(--primary-color); /* Use primary color for text on accent background */
}

.embeddable-buttondown-form input[type="email"] {
  width: 100%;
  max-width: 350px; /* Limit width */
  padding: 12px 15px;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 15px; /* Space below email input */
  transition: border-color var(--transition-medium);
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Style for the form on the accent background (index page) */
.section[style*="--accent-color"] .embeddable-buttondown-form input[type="email"] {
  border-color: var(--primary-color);
}

.embeddable-buttondown-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-color);
}

.embeddable-buttondown-form input[type="submit"] {
  /* Inherit button styles from main.css .btn */
  min-width: 150px;
  cursor: pointer;
}

/* Style for the submit button on the accent background (index page) */
.section[style*="--accent-color"] .embeddable-buttondown-form input[type="submit"] {
  background-color: var(--primary-color);
  color: var(--accent-color); /* Use accent color for text */
}

.embeddable-buttondown-form p {
  margin-top: 15px;
  font-size: 0.8rem;
}

.embeddable-buttondown-form p a {
  color: var(--text-color); /* Use text color variable */
  opacity: 0.7;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.embeddable-buttondown-form p a:hover {
  opacity: 1;
}

/* Styles for the contact page newsletter section */
.newsletter-contact {
    background-color: var(--background-color); /* Match page background */
}

.newsletter-contact .embeddable-buttondown-form label,
.newsletter-contact .embeddable-buttondown-form p a {
    color: var(--text-color); /* Default text color */
}

.newsletter-contact .embeddable-buttondown-form input[type="email"] {
    border-color: var(--text-color); /* Default border color */
}

.newsletter-contact .embeddable-buttondown-form input[type="submit"] {
    background-color: var(--primary-color);
    color: var(--secondary-color); /* Light text on dark button */
}

/* Remove old styles if they exist */
.newsletter-form,
.form-field {
    /* These might be obsolete now */
}