/* ==========================================================================
   Inline email capture (spark-tools/shared)

   Layout only. The BUTTON keeps whatever class its page already uses, so the
   webinar page's green button and the awards page's button each stay exactly
   as they are and this file never has to know about either.

   The field is a white box with dark ink on every page. Both places this is
   used sit on a photograph behind a scrim, where a transparent input is
   unreadable and a tinted one looks broken.
   ========================================================================== */

.gfi {
  --gfi-accent: #006D41;
  --gfi-ink: #001B2C;
  --gfi-rule: rgba(0, 27, 44, .22);

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  width: 100%;
  max-width: 560px;
}

/* Present for a screen reader, absent for everyone else. A placeholder on its
   own is not a label: it disappears the moment someone types, which is exactly
   when a person who has lost their place needs it. */
.gfi-lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gfi-field {
  flex: 1 1 15rem;
  min-width: 0;
  box-sizing: border-box;
  padding: 13px 15px;
  font: inherit;
  font-size: 1rem;           /* never below 16px: iOS zooms the page in on focus */
  line-height: 1.3;
  color: var(--gfi-ink);
  background: #fff;
  border: 1px solid var(--gfi-rule);
  border-radius: 4px;
  appearance: none;
}

.gfi-field::placeholder { color: #667080; opacity: 1; }

.gfi-field:focus-visible {
  outline: 2px solid var(--gfi-accent);
  outline-offset: 2px;
  border-color: var(--gfi-accent);
}

.gfi-field[aria-invalid="true"] { border-color: #B3261E; }

/* The button is the page's own. All this does is stop it stretching to the
   full width of the row on wide screens, and let it fill the row on narrow. */
.gfi > .cta,
.gfi > .gfw-btn { flex: 0 0 auto; margin: 0; }

.gfi-err {
  flex: 1 0 100%;
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  color: #fff;
  background: #B3261E;
  border-radius: 4px;
  padding: 7px 11px;
}

/* On a phone the two controls stack, and a button narrower than the field it
   belongs to reads as unrelated to it. */
@media (max-width: 30rem) {
  .gfi-field { flex: 1 1 100%; }
  .gfi > .cta,
  .gfi > .gfw-btn { flex: 1 1 100%; text-align: center; }
}