/* Newsletter signup band (top of the footer). The form itself is rendered by the engine's embed
   block, so these rules target plain form elements and do not depend on its class names.
   Each label sits above its field; the fields and the button share a row when there is room. */

.footer-signup {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 56px;
  padding-bottom: 36px;
  border-bottom: 1px solid #1E2745;
}
.footer-signup-copy { flex: 1 1 280px; min-width: 0; }
.footer-signup-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--amber);
}
.site-footer .footer-signup h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.footer-signup-embed { flex: 1 1 420px; min-width: 0; }

.footer-signup-embed form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}
.footer-signup-embed form > * { flex: 1 1 180px; min-width: 0; margin: 0; }
.footer-signup-embed form > button,
.footer-signup-embed form > input[type="submit"] { flex: 0 0 auto; }

.footer-signup-embed label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-dark-faint);
}
.footer-signup-embed label abbr,
.footer-signup-embed label .required { color: var(--amber); text-decoration: none; }

.footer-signup-embed input[type="email"],
.footer-signup-embed input[type="text"] {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  background: var(--navy-2);
  color: #fff;
  border: 1px solid #2A3560;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.2;
}
.footer-signup-embed input::placeholder { color: var(--on-dark-faint); }
.footer-signup-embed input[type="email"]:focus,
.footer-signup-embed input[type="text"]:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }

.footer-signup-embed button,
.footer-signup-embed input[type="submit"] {
  padding: 13px 22px;
  background: var(--amber);
  color: var(--navy);
  border: 0;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.footer-signup-embed button:hover,
.footer-signup-embed input[type="submit"]:hover { background: #fff; }
.footer-signup-embed p { margin: 8px 0 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); }
.footer-signup-embed a { color: #fff; text-decoration: underline; }

@media (max-width: 767px) {
  .site-footer .footer-signup h2 { font-size: 24px; }
  .footer-signup { padding-bottom: 28px; }
}

/* Engine form classes. The engine wraps the button in p.form-actions and marks required fields
   with span.form-required. */
.footer-signup-embed form > .form-actions { flex: 0 0 auto; }
.footer-signup-embed label .form-required { color: var(--amber); }
/* The engine's own error colour is the accent blue, about 3:1 on navy. Amber reads on the dark band.
   Three classes so it wins over the engine's inline rule, which loads later. */
.footer-signup-embed .se-form .form-error { color: var(--amber); font-family: var(--font-ui); font-size: 13px; line-height: 1.4; }
.footer-signup-embed .se-form .form-error:empty { display: none; }

/* Consent field: its own row, checkbox to the left, wording and privacy link flowing as one line of text. */
.footer-signup-embed form > .form-consent { flex: 1 1 100%; }
.footer-signup-embed .form-consent label {
  position: relative;
  display: block;
  margin: 0;
  padding-left: 30px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-dark-muted);
  cursor: pointer;
}
.footer-signup-embed .form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--navy-2);
  border: 1px solid var(--on-dark-faint);
  border-radius: 4px;
  cursor: pointer;
}
.footer-signup-embed .form-consent input[type="checkbox"]:checked {
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%230B1020' stroke-width='2.2'/%3E%3C/svg%3E") center / 100% no-repeat;
  border-color: var(--amber);
}
.footer-signup-embed .form-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.footer-signup-embed .form-consent a { color: #fff; text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; }
.footer-signup-embed .form-consent a:hover { color: var(--amber); }
.footer-signup-embed .form-consent .form-error { padding-left: 30px; }