/* Newsletter form shortcode output: try to look at home inside the slate
   pill regardless of which plugin renders it. The plugin's own stylesheet
   still wins on specificity, this just normalizes the obvious offenders. */

.oit-footer__newsletter-form form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.oit-footer__newsletter-form input[type="text"],
.oit-footer__newsletter-form input[type="email"] {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 20px;
  border-radius: 90px;
  border: 0;
  background: var(--color-white, #FFFFFF);
  color: var(--color-black, #1A0303);
  font: inherit;
}

/* The Newsletter Plugin (Stefano Lissa) ships an opinionated stylesheet that
   sets background, padding, etc. on .tnp-submit with specificity that ties or
   beats ours. !important wins the cascade reliably for the visual overrides
   we actually care about. */
.oit-footer__newsletter-form button,
.oit-footer__newsletter-form input[type="submit"],
.oit-footer__newsletter-form .tnp-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 48px 10px 20px !important;       /* extra right padding leaves room for the chevron */

  border: 0 !important;
  border-radius: 90px !important;
  background-color: var(--color-cta-red, #E00523) !important;
  color: var(--color-white, #FFFFFF) !important;
  cursor: pointer;
  transition: background-color 220ms ease;

  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  text-transform: uppercase !important;
  white-space: nowrap;
  text-shadow: none;

  /* Double-chevron icon (» right) — background-image so it works on
     both <button> and <input type="submit"> (pseudo-elements don't apply
     to <input>). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 13 12' fill='none'><path d='M0 1.41L1.36689 0L7.18345 6L1.36689 12L0 10.59L4.43997 6L0 1.41ZM5.81656 1.41L7.18345 0L13 6L7.18345 12L5.81656 10.59L10.2565 6L5.81656 1.41Z' fill='%23FFFFFF'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  background-size: 13px 12px !important;
}

.oit-footer__newsletter-form button:hover,
.oit-footer__newsletter-form input[type="submit"]:hover,
.oit-footer__newsletter-form .tnp-submit:hover,
.oit-footer__newsletter-form button:focus-visible,
.oit-footer__newsletter-form input[type="submit"]:focus-visible,
.oit-footer__newsletter-form .tnp-submit:focus-visible {
  background-color: var(--color-cta-red-700, #B8001D) !important;
}

/* HubSpot (developer/inline embed) newsletter form on the footer strip.
   Matches Figma: a single line -- [First] [Last] [Email] [SUBMIT >>] -- with
   placeholders only (no labels), white pill inputs, red pill submit. HubSpot
   ships its own .hsfc-* base CSS, so most rules use !important. */
.oit-footer__newsletter-form .hsfc-Form,
.oit-footer__newsletter-form .hsfc-Step,
.oit-footer__newsletter-form .hsfc-Step__Content {
  background: transparent !important;
  font-family: "DM Sans", sans-serif;
}

/* Tight, even 10px padding (overrides HubSpot's variable-based padding) and no
   wrapper margins, so the form sits centered in the strip. */
.oit-footer__newsletter-form .hsfc-Step__Content {
  padding: 10px !important;
}
.oit-footer__newsletter-form .hsfc-Form,
.oit-footer__newsletter-form .hsfc-Step,
.oit-footer__newsletter-form .hsfc-FormWrapper,
.oit-footer__newsletter-form .hsfc-Renderer {
  padding: 0 !important;
  margin: 0 !important;
}

/* Mobile: stack field row + submit, and stack the fields within the row. */
.oit-footer__newsletter-form .hsfc-Step__Content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
.oit-footer__newsletter-form .hsfc-Step__Content > .hsfc-Row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.oit-footer__newsletter-form .hsfc-Row .hsfc-TextField,
.oit-footer__newsletter-form .hsfc-Row .hsfc-EmailField,
.oit-footer__newsletter-form .hsfc-Row .hsfc-PhoneField {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Desktop: everything on one line -- [First][Last][Email] [SUBMIT >>]. */
@media (min-width: 1024px) {
  .oit-footer__newsletter-form .hsfc-Step__Content {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .oit-footer__newsletter-form .hsfc-Step__Content > .hsfc-Row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
  }
  .oit-footer__newsletter-form .hsfc-Row .hsfc-TextField,
  .oit-footer__newsletter-form .hsfc-Row .hsfc-EmailField,
  .oit-footer__newsletter-form .hsfc-Row .hsfc-PhoneField {
    flex: 1 1 0 !important;
  }
}

/* Hide HubSpot's helper rows (a .hsfc-Row whose direct child is a hidden input). */
.oit-footer__newsletter-form .hsfc-Step__Content > .hsfc-Row:has(> input) {
  display: none !important;
}

/* No labels on this strip -- the placeholders carry the fields (matches Figma). */
.oit-footer__newsletter-form .hsfc-FieldLabel {
  display: none !important;
}

/* Inputs: white pills. */
.oit-footer__newsletter-form .hsfc-Form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.oit-footer__newsletter-form .hsfc-Form select {
  width: 100% !important;
  background: #ffffff !important;
  color: #1a0303 !important;
  border: 0 !important;
  border-radius: 90px !important;
  padding: 11px 22px !important;
  min-height: 44px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.oit-footer__newsletter-form .hsfc-Form input::placeholder {
  color: rgba(26, 3, 3, 0.55) !important;
}
.oit-footer__newsletter-form .hsfc-Form input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(224, 5, 35, 0.25) !important;
}

/* Submit row + button: inline, red pill (chevron added in the shared rule below). */
.oit-footer__newsletter-form .hsfc-NavigationRow,
.oit-footer__newsletter-form .hsfc-NavigationRow__Buttons {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
.oit-footer__newsletter-form .hsfc-NavigationRow__Alerts:empty {
  display: none !important;
}
.oit-footer__newsletter-form .hsfc-Button {
  background: var(--color-cta-red, #e00523) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 90px !important;
  padding: 12px 24px !important;
  min-height: 44px !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.oit-footer__newsletter-form .hsfc-Button:hover {
  background: var(--color-cta-red-700, #c40420) !important;
}

/* Double-chevron after the submit label (matches the brand CTA buttons). */
.oit-footer__newsletter-form .hsfc-Button::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 13px;
  margin-left: 10px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath fill='%23ffffff' d='M0 1.41L1.36689 0L7.18345 6L1.36689 12L0 10.59L4.43997 6L0 1.41ZM5.81656 1.41L7.18345 0L13 6L7.18345 12L5.81656 10.59L10.2565 6L5.81656 1.41Z'/%3E%3C/svg%3E") no-repeat center / contain;
}