/*
  integration.css — PERMANENT styles for markup only Umbraco produces.
  Loaded after the synced static bundle (assets/css/main.css) and before patches.css.

  Belongs here: Umbraco Forms output, CMS-driven markup the prototype has no equivalent for.
  Does NOT belong here: fixes to Chris's design — those go in patches.css (and upstream).

  Every block carries a header scripts/static-port-diff.sh reads:
    @block  <id>
    @watch  <static source file> <token>   (repeatable) — flag this block when upstream changes it
    @why    one line
*/

/* @block newsletter-umbraco-forms
   @watch src/components/newsletter_footer/newsletter_footer.scss newsletter__
   @watch src/components/btns/btns.scss --yellow
   @why   Map Umbraco Forms "default" theme markup onto Chris's newsletter_footer design
          (input with envelope icon + yellow button). Mirrors his values — re-sync if his design changes. */
.newsletter__form .umbraco-forms-form,
.newsletter__form .umbraco-forms-form form {
  width: 100%;
}

.newsletter__form .umbraco-forms-form form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@container footer (width > 48rem) {
  .newsletter__form .umbraco-forms-form form {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
}

.newsletter__form .umbraco-forms-page,
.newsletter__form .umbraco-forms-fieldset,
.newsletter__form .umbraco-forms-fieldset .row-fluid,
.newsletter__form .umbraco-forms-container,
.newsletter__form .umbraco-forms-navigation,
.newsletter__form .umbraco-forms-navigation > div {
  display: contents;
}

.newsletter__form .umbraco-forms-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.newsletter__form .umbraco-forms-field {
  flex: 1;
  margin: 0;
}

.newsletter__form .umbraco-forms-tooltip,
.newsletter__form .validation-summary-valid {
  display: none;
}

.newsletter__form .umbraco-forms-field input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  padding: 0 .75rem 0 2.5rem;
  border: 1px solid #52525B;
  border-radius: 6px;
  background: #27272A url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2216%22%20viewBox%3D%220%200%2019%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M17.6668%203.5L10.1918%208.25C9.93452%208.41119%209.63706%208.49668%209.33346%208.49668C9.02986%208.49668%208.7324%208.41119%208.47513%208.25L1.00013%203.5M2.66679%201H16.0001C16.9206%201%2017.6668%201.74619%2017.6668%202.66667V12.6667C17.6668%2013.5871%2016.9206%2014.3333%2016.0001%2014.3333H2.66679C1.74632%2014.3333%201.00013%2013.5871%201.00013%2012.6667V2.66667C1.00013%201.74619%201.74632%201%202.66679%201Z%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.7%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat .75rem center;
  color: white;
  font-family: var(--font-body);
}

.newsletter__form .umbraco-forms-field input[type="email"]::placeholder {
  color: var(--white-70);
}

.newsletter__form .field-validation-error {
  display: block;
  margin-top: .25rem;
  color: var(--yellow);
  font-size: .75rem;
}

.newsletter__form .umbraco-forms-navigation input[type="submit"] {
  flex: 0 0 6.75rem;
  height: 3rem;
  padding: 8px 24px;
  border: 0;
  border-radius: 6px;
  background-color: var(--yellow);
  color: var(--black-txt);
  font-family: var(--font-body);
  cursor: pointer;
}

.newsletter__form .umbraco-forms-navigation input[type="submit"]:hover {
  background-color: var(--purple);
}