/* Mailing list embed overrides (EmailOctopus script injects inline styles). */
#mailing-list-embed {
  width: 100%;
}

#mailing-list-embed > :not(script) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  border-radius: 1rem !important;
  border: 1px solid var(--color-stone-200) !important;
  background: var(--color-white) !important;
  box-shadow: var(--shadow-sm) !important;
}

#mailing-list-embed :is(form, .form, [class*="form"], [id*="form"]) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#mailing-list-embed :is(h1, h2, h3, h4) {
  font-family: var(--font-serif) !important;
  color: var(--color-stone-900) !important;
  letter-spacing: 0.01em !important;
}

#mailing-list-embed :is(p, label, small, span, li, div) {
  font-family: var(--font-sans) !important;
  color: var(--color-stone-700) !important;
}

#mailing-list-embed :is(input[type="email"], input[type="text"], input[type="name"], input[type="tel"]) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0.75rem !important;
  border: 2px solid var(--color-stone-500) !important;
  background: var(--color-white) !important;
  color: var(--color-stone-900) !important;
  box-shadow: none !important;
}

#mailing-list-embed :is(input[type="email"], input[type="text"], input[type="name"], input[type="tel"])::placeholder {
  color: var(--color-stone-500) !important;
}

#mailing-list-embed :is(input[type="email"], input[type="text"], input[type="name"], input[type="tel"]):focus {
  outline: none !important;
  border-color: var(--color-amber-400) !important;
  box-shadow: 0 0 0 2px var(--color-amber-300) !important;
}

#mailing-list-embed :is(button, input[type="submit"]) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0.75rem !important;
  border: 0 !important;
  background: var(--color-amber-500) !important;
  color: var(--color-slate-950) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

#mailing-list-embed :is(button, input[type="submit"]):hover {
  background: var(--color-amber-300) !important;
  color: var(--color-slate-950) !important;
}

#mailing-list-embed input[type="checkbox"] {
  accent-color: var(--color-amber-600) !important;
}

#mailing-list-embed a {
  color: var(--color-amber-700) !important;
}

@media (prefers-color-scheme: dark) {
  #mailing-list-embed > :not(script) {
    border-color: var(--color-slate-700) !important;
    background: var(--color-slate-900) !important;
  }

  #mailing-list-embed :is(h1, h2, h3, h4) {
    color: var(--color-stone-100) !important;
  }

  #mailing-list-embed :is(p, label, small, span, li, div) {
    color: var(--color-slate-300) !important;
  }

  #mailing-list-embed :is(input[type="email"], input[type="text"], input[type="name"], input[type="tel"]) {
    border-color: var(--color-slate-400) !important;
    background: var(--color-slate-950) !important;
    color: var(--color-stone-100) !important;
  }

  #mailing-list-embed :is(input[type="email"], input[type="text"], input[type="name"], input[type="tel"])::placeholder {
    color: var(--color-slate-400) !important;
  }

  #mailing-list-embed :is(button, input[type="submit"]) {
    background: var(--color-amber-500) !important;
    color: var(--color-slate-950) !important;
  }

  #mailing-list-embed :is(button, input[type="submit"]):hover {
    background: var(--color-amber-300) !important;
    color: var(--color-slate-950) !important;
  }

  #mailing-list-embed a {
    color: var(--color-amber-300) !important;
  }
}