/* FORM PAGE: the look of the pages with a form (Sign the Manifesto, and the newsletter) */

/* The whole page: Page 1's soft blue background, with the white box in the middle */
.form-page {
  min-height: 100vh;
  display: grid;
  place-items: center;          /* puts the box in the middle, both across and up-down */
  padding: 24px 16px;
  background: linear-gradient(180deg, #f8f9fd 0%, #eef1fa 55%, #e3e9f7 100%);
}

/* The white box with the form */
.form-box {
  width: 100%;
  max-width: 520px;             /* never wider than 520px, narrower on phones */
  padding: 40px 32px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 20px 50px rgba(10, 0, 51, 0.08);
}

.form-back { font-size: 13px; color: var(--indigo); }
.form-box h1 { font-size: 32px; font-weight: 400; margin: 18px 0 8px; }
.form-intro { margin: 0 0 24px; color: rgba(10, 0, 51, 0.7); }

/* Each field: {{ form.as_p }} puts every field in its own <p>, with a <label> (the text) and an <input> (the box) */
.form-box form p { margin: 0 0 18px; }
.form-box label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }

/* The boxes you type in */
.form-box input[type="text"],
.form-box input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lavender);
  border-radius: 8px;
  font: inherit;                /* the same font as the page (Poppins); input boxes don't do that by themselves */
  color: var(--navy);
}
.form-box input:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }  /* a blue edge on the box you're typing in */

/* The newsletter tick box: the box first, then its text, on one line */
.form-box p:has(input[type="checkbox"]) {
  display: flex;
  flex-direction: row-reverse;  /* Django writes the text first and the box second; this swaps them */
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.form-box p:has(input[type="checkbox"]) label { margin: 0; font-weight: 400; }
.form-box input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }

/* Django's error messages, e.g. "Enter a valid email address." */
.errorlist { list-style: none; margin: 0 0 6px; padding: 0; color: #c62828; font-size: 13px; }

/* The send button: full width */
.form-box button { width: 100%; padding: 15px; margin-top: 8px; }