/* Footer newsletter signup.

   In a shared file rather than each page's <style> block, because it lands
   on 22 footers and a copy in each one is 22 places to fix a padding value.
   The rest of the site predates this decision; new shared components should
   live here too.

   Scoped tightly to .footer-signup — the pages have wildly different form
   styling and nothing here should reach any of it. */

.footer-signup {
  flex: 0 0 100%;
  order: -1;
  padding-bottom: 1.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(56, 69, 79, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
}

.footer-signup-label {
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(56, 69, 79, 0.45);
}

.footer-signup-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.footer-signup input[type="email"] {
  font-family: inherit;
  font-size: 0.8rem;
  color: #38454F;
  background: transparent;
  border: 1px solid rgba(56, 69, 79, 0.22);
  border-radius: 2px;
  padding: 0.55rem 0.8rem;
  width: 230px;
  transition: border-color 0.2s;
}
.footer-signup input[type="email"]::placeholder { color: rgba(56, 69, 79, 0.32); }
.footer-signup input[type="email"]:focus {
  outline: none;
  border-color: rgba(56, 69, 79, 0.55);
}

.footer-signup button {
  font-family: inherit;
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F3F6F6;
  background: #38454F;
  border: none;
  border-radius: 2px;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.footer-signup button:hover { opacity: 0.78; }
.footer-signup button:disabled { opacity: 0.4; cursor: default; }

/* Lives outside the row so it survives the row being hidden on success. */
.footer-signup-msg {
  flex: 0 0 100%;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(56, 69, 79, 0.6);
  margin: 0;
}
.footer-signup-msg:empty { display: none; }
.footer-signup-msg.error { color: #a0392c; }

/* Spam trap — hidden from sight and from screen readers.

   The same rules are ALSO set inline on the element itself. That is not
   redundancy for its own sake: if this stylesheet fails to load, a rule here
   would do nothing, a real person would see a field labelled "Website",
   helpfully fill it in, and their signup would be silently discarded with no
   error and no record. Inline styles need no second request to work. */
.footer-signup-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 700px) {
  .footer-signup {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .footer-signup-row { width: 100%; }
  .footer-signup input[type="email"] { width: auto; flex: 1; min-width: 0; }
}