/* The mailing list form.
   Shared by the home page and the generated pages, which is why it is a file
   rather than another block inside build.py: both link it, and both already
   define the colours it uses. Everything here is drawn the way the rest of the
   site is — thick borders, uneven corners, a hard shadow cast down and right. */

.signup { margin: 14px 0 0; touch-action: auto; }

.signup > label {
  display: block;
  font-size: .82rem;
  font-style: italic;
  letter-spacing: .06em;
  color: var(--sun);
  margin-bottom: 7px;
}

.signup-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

.signup input[type=email] {
  flex: 1 1 11em;
  min-width: 0;
  font-family: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: var(--cream);
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px 10px 17px 9px;
  box-shadow: 3px 4px 0 var(--cast);
}

.signup input[type=email]::placeholder { color: var(--bark, #9C8679); opacity: 1; }

.signup button {
  font-family: inherit;
  font-weight: 700;
  font-size: .92rem;
  color: var(--sun);
  background: var(--deep, #0B5A2C);   /* sun on --green is too faint */
  padding: 11px 18px;
  border: 3px solid transparent;
  border-radius: 10px 16px 9px 17px;
  box-shadow: 3px 4px 0 var(--cast);
  cursor: pointer;
}

.signup button:hover,
.signup button:focus-visible { background: var(--orange); color: var(--ink); }
.signup button[disabled] { opacity: .55; cursor: default; }

/* What the server said. Empty until there is something to say, so it takes up
   no room and does not push the panel around before it is used. */
.signup-said {
  margin: 9px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  font-style: italic;
  max-width: 34ch;
}
.signup-said:empty { display: none; }
.signup-said.good { color: var(--sun); font-style: normal; }
.signup-said.bad { color: var(--cream, #F4E7CE); }

/* Once it has been taken there is nothing left to type. */
.signup.signed .signup-row { display: none; }
.signup.signed > label { color: var(--bark, #9C8679); }

/* The line under the player that appears once a song has played to its end,
   pointing back at the form, and the form it points at, lit for a moment. */
.signup-nudge {
  margin: 10px 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--sun);
}
.signup-nudge[hidden] { display: none; }
.signup-nudge a { color: var(--sun); font-weight: 700; }
.signup.nudged input[type=email] { animation: signup-nudge 1.1s ease-out 2; }
@keyframes signup-nudge {
  0% { box-shadow: 3px 4px 0 var(--cast), 0 0 0 0 var(--sun); }
  60% { box-shadow: 3px 4px 0 var(--cast), 0 0 0 7px transparent; }
  100% { box-shadow: 3px 4px 0 var(--cast); }
}
@media (prefers-reduced-motion: reduce) {
  .signup.nudged input[type=email] { animation: none; outline: 3px solid var(--sun); }
}

/* On a page with no JavaScript the form would post nowhere, so it is not
   offered at all. */
.signup[hidden] { display: none; }

@media (max-width: 620px) {
  .signup > label { font-size: .76rem; }
  .signup input[type=email], .signup button { font-size: .85rem; padding: 9px 13px; }
}

/* The honeypot. Off the screen rather than display:none, which some bots know
   to skip; out of the tab order and the accessibility tree in the markup. */
.signup-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}