/*
 * Restyles the embedded EmailOctopus newsletter form so it matches each site.
 *
 * EmailOctopus injects its own stylesheet after the page loads, scoped to
 * [data-form="..."] and partly using !important, so these overrides need
 * !important too, plus higher specificity wherever it marks a rule
 * !important itself (its stylesheet comes later and wins ties).
 *
 * Each page themes the form by setting the --newsletter-* custom properties
 * on the element that carries .newsletter-form-skin.
 */

.newsletter-form-skin {
  min-width: 0;
  color: var(--newsletter-text, inherit);
  line-height: 1.4;
}

.newsletter-form-skin .inline-container[data-form],
.newsletter-form-skin .form-container,
.newsletter-form-skin .emailoctopus-form-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.newsletter-form-skin .main-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.75rem !important;
}

.newsletter-form-skin .main-form .emailoctopus-form-row,
.newsletter-form-skin [eo-form-fields-container] {
  flex: 999 1 14rem !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.newsletter-form-skin input[type="email"] {
  width: 100% !important;
  height: auto !important;
  min-height: 3.25rem !important;
  padding: 0.75rem 1rem !important;
  border: var(--newsletter-border-width, 2px) solid var(--newsletter-input-border, currentColor) !important;
  border-radius: var(--newsletter-radius, 0.75rem) !important;
  color: var(--newsletter-input-text, #241816) !important;
  font: var(--newsletter-font-weight, 500) 1rem/1.2 var(--newsletter-font, inherit) !important;
  background: var(--newsletter-input-bg, #fff) !important;
  box-shadow: none !important;
}

.newsletter-form-skin input[type="email"]::placeholder {
  color: var(--newsletter-placeholder, #6c757d) !important;
}

.newsletter-form-skin input[type="email"]:focus,
.newsletter-form-skin input[type="submit"]:focus-visible {
  outline: 3px solid var(--newsletter-focus, currentColor) !important;
  outline-offset: 2px !important;
}

.newsletter-form-skin input[type="submit"] {
  flex: 1 0 auto !important;
  width: auto !important;
  min-height: 3.25rem !important;
  margin: 0 !important;
  padding: 0.75rem 1.5rem !important;
  border: var(--newsletter-border-width, 2px) solid var(--newsletter-button-border, transparent) !important;
  border-radius: var(--newsletter-radius, 0.75rem) !important;
  color: var(--newsletter-button-text, #fff) !important;
  font-family: var(--newsletter-button-font, inherit) !important;
  font-size: var(--newsletter-button-font-size, 1.1rem) !important;
  font-weight: var(--newsletter-button-font-weight, 600) !important;
  line-height: 1 !important;
  letter-spacing: var(--newsletter-button-letter-spacing, normal) !important;
  text-transform: var(--newsletter-button-text-transform, none) !important;
  background: var(--newsletter-button-bg, #241816) !important;
  box-shadow: var(--newsletter-button-shadow, none) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

.newsletter-form-skin input[type="submit"]:hover {
  transform: translateY(2px);
  box-shadow: var(--newsletter-button-shadow-hover, none) !important;
  filter: brightness(1.05);
}

.newsletter-form-skin .emailoctopus-form-row-consent {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
  margin: 1rem 0 0 !important;
  text-align: left;
}

.newsletter-form-skin .emailoctopus-form-row-consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  accent-color: var(--newsletter-accent, currentColor);
}

.newsletter-form-skin .emailoctopus-form-row-consent label {
  color: var(--newsletter-text, inherit) !important;
  font-family: var(--newsletter-font, inherit) !important;
  font-weight: var(--newsletter-font-weight, 400) !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

.newsletter-form-skin [data-form] .emailoctopus-success-message,
.newsletter-form-skin [data-form] .emailoctopus-error-message {
  margin: 0 0 1rem !important;
  padding: 0.8rem 1rem !important;
  border-radius: var(--newsletter-radius, 0.75rem) !important;
  font-family: var(--newsletter-font, inherit) !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.newsletter-form-skin [data-form] .emailoctopus-success-message:empty,
.newsletter-form-skin [data-form] .emailoctopus-error-message:empty {
  display: none !important;
}

.newsletter-form-skin [data-form] .emailoctopus-success-message {
  color: #174d2d !important;
  background: #dff3e5 !important;
}

.newsletter-form-skin [data-form] .emailoctopus-error-message {
  color: #7a211d !important;
  background: #f9deda !important;
}

/* Required by the EmailOctopus free plan; kept small and quiet instead of removed. */
.newsletter-form-skin .mastfoot {
  display: block !important;
  margin-top: 0.75rem !important;
  opacity: 0.7;
}

.newsletter-form-skin .mastfoot .inner {
  text-align: left !important;
}

.newsletter-form-skin .mastfoot p {
  padding: 0 !important;
  line-height: 1.6 !important;
  color: var(--newsletter-text, inherit) !important;
  background: none !important;
  border: 0 !important;
}

.newsletter-form-skin .mastfoot a {
  color: var(--newsletter-text, inherit) !important;
}

.newsletter-recaptcha {
  margin-top: 0.5rem;
  color: var(--newsletter-text, inherit);
  font-family: var(--newsletter-font, inherit);
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.75;
}

.newsletter-recaptcha a {
  color: inherit;
}