/* Sign-up form, on top of the landing page style (site/styles.css). */

.signup {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--white);
}

.signup .field {
  margin: 0 0 16px;
}

.signup label {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
}

.signup input,
.signup select,
.signup textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #9AA4B2;
  border-radius: 6px;
  background-color: var(--white);
  color: var(--navy);
  font: inherit;
}

.signup small {
  display: block;
  margin-top: 4px;
  color: #4A5568;
  font-size: 15px;
}

.signup button {
  padding: 12px 20px;
  border: 0;
  border-radius: 6px;
  background-color: var(--green, #2E7D32);
  color: var(--white, #FFFFFF);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.signup button:hover,
.signup button:focus {
  background-color: #256628;
}

.has-error input,
.has-error select,
.has-error textarea {
  border-color: #B42318;
}

.field-error,
.form-errors {
  margin: 6px 0 0;
  color: #B42318;
  font-weight: 700;
}

.form-errors ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

/* Honeypot, kept out of sight and out of the keyboard path. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fine-print {
  color: #4A5568;
  font-size: 15px;
}

/* Inviting neighbours (invite_neighbours.html): large type and wide targets, for
   readers of every age. */

.lead {
  font-size: 21px;
}

.invite {
  font-size: 20px;
}

.invite input {
  padding: 14px;
  border-width: 2px;
  font-size: 20px;
}

.invite small {
  font-size: 17px;
}

.invite .neighbour {
  margin: 0 0 20px;
  padding: 12px 16px 0;
  border: 2px solid var(--line);
  border-radius: 8px;
}

.invite legend {
  padding: 0 6px;
  font-weight: 700;
}

.invite button,
.button-link {
  display: block;
  width: 100%;
  padding: 18px 20px;
  font-size: 22px;
  text-align: center;
}

.button-link {
  border-radius: 6px;
  background-color: var(--green, #2E7D32);
  color: var(--white, #FFFFFF);
  font-weight: 700;
  text-decoration: none;
}

.button-link:hover,
.button-link:focus {
  background-color: #256628;
}

/* A checkbox and its label on one line (openings/declare.html). */
.signup .check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.signup .check input {
  width: auto;
  margin: 4px 0 0;
}

.signup .check label {
  font-weight: 400;
}

/* The advertiser's form (advertising/write.html): the launch offer, a counter under each
   limited field, and the preview of the ad, drawn like « Partenaire de la semaine » in
   the issue (issues/_sponsor.html). */

.launch-offer {
  margin: 24px 0;
  padding: 16px 20px;
  border-radius: 8px;
  background-color: var(--yellow);
}

.launch-offer p {
  margin: 0;
}

.launch-offer .launch-offer-title {
  margin: 0 0 6px;
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
}

.ad-form h2 {
  margin: 8px 0 16px;
}

.ad-form h2:not(:first-of-type) {
  margin-top: 32px;
}

.signup textarea {
  resize: vertical;
}

.signup .counter {
  margin-top: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.signup .counter.full {
  color: #B42318;
  font-weight: 700;
}

.ad-preview-frame {
  margin: 8px 0 8px;
  padding: 16px;
  border-radius: 8px;
  background-color: #F4F1EA;
}

.ad-preview-caption {
  margin: 0 0 10px;
  color: #4A5568;
  font-size: 15px;
  font-weight: 700;
}

.ad-preview {
  padding: 20px 22px;
  border: 2px solid var(--yellow);
  border-radius: 10px;
  background-color: var(--cream);
  overflow-wrap: anywhere;
}

.ad-preview p {
  margin: 0 0 8px;
}

.ad-preview .ad-preview-label {
  color: #4A5568;
  font-size: 13px;
  font-weight: 700;
}

.ad-preview .ad-preview-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.ad-preview .ad-preview-text {
  font-size: 15px;
  line-height: 1.5;
}

.ad-preview .ad-preview-details {
  margin-bottom: 14px;
  color: #3B4658;
  font-size: 14px;
  line-height: 1.5;
}

.ad-preview .placeholder {
  color: #8A96A3;
  font-style: italic;
}

.ad-preview .ad-preview-button-row {
  margin: 0;
}

.ad-preview-button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  background-color: var(--navy);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
}

/* Sharing the advertiser's sign-up link (advertising/thanks.html). */

.share h2 {
  margin: 0 0 12px;
}

.share input[readonly] {
  background-color: #F4F1EA;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

.share-button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 6px;
  background-color: var(--navy);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

.share-button:hover,
.share-button:focus {
  background-color: #24344F;
}