/* Pray Over Your Worry - version one stylesheet. Built 2026-09-30 (Forge).
 *
 * WHO IT IS FOR: people over 50, on a phone, often with reading glasses on or off.
 * So: big text (20px base), high contrast, wide tap targets, one column, no animation,
 * no web fonts (system fonts only - nothing is fetched from anywhere else), no scripts.
 *
 * .draft marks a PLACEHOLDER for words nobody has approved yet. It is bright on purpose, so a
 * page with placeholders left in it cannot be mistaken for a finished one. The push script
 * refuses to upload any page that still contains a placeholder, so this yellow can never reach
 * the live site.
 */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 125%; -webkit-text-size-adjust: 100%; }   /* 125% of 16px = 20px */

body {
  margin: 0;
  background: #fbf7ef;                 /* warm cream */
  color: #1d2733;                      /* near-black blue: 14:1 on the cream */
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

.wrap { max-width: 40rem; margin: 0 auto; padding: 1.25rem 1rem; }

header.wrap { text-align: center; padding-top: 2rem; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; color: #1f3a63; }
h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; color: #1f3a63; }
h3 { font-size: 1.2rem; margin: 1.25rem 0 .25rem; color: #1f3a63; }

p { margin: 0 0 1rem; }

section { padding: 1.5rem 0; border-top: 1px solid #d9cfba; }

a { color: #17427f; text-decoration: underline; }
a:focus, input:focus, textarea:focus, button:focus {
  outline: 3px solid #b8860b;
  outline-offset: 2px;
}

/* ---- the sign-up form ---- */
form { margin: 0; }
label { display: block; font-weight: bold; margin: 1.25rem 0 .35rem; }

input[type="email"], textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.1rem;                   /* 22px: also stops iPhones zooming in on the box */
  padding: .7rem .8rem;
  color: #1d2733;
  background: #ffffff;
  border: 2px solid #6b7785;
  border-radius: 6px;
}
textarea { min-height: 9rem; resize: vertical; }

.check { display: flex; gap: .75rem; align-items: flex-start; margin: 1.25rem 0 0; font-weight: normal; }
.check input { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; margin-top: .2rem; }

button {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  min-height: 3.5rem;                  /* a big, easy thumb target */
  font: inherit;
  font-size: 1.15rem;
  font-weight: bold;
  color: #ffffff;
  background: #1f3a63;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
button:hover { background: #17294a; }

/* The honeypot: a box real people never see and never reach with Tab. Bots fill it in.
   Moved off-screen rather than display:none, because some bots skip display:none boxes. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- placeholders ---- */
.draft { background: #fff176; color: #3b3000; padding: 0 .25em; border-radius: 3px; font-family: Arial, sans-serif; font-size: .9em; }

.hint { margin: 0 0 .5rem; font-size: .95rem; color: #3a4654; }

/* Help lines on the safety page (process-signup.php) - a plain list, easy to tap a number in. */
ul.help { padding-left: 1.25rem; margin: 0 0 1rem; }
ul.help li { margin-bottom: .9rem; }

footer.wrap { border-top: 1px solid #d9cfba; font-size: .9rem; text-align: center; color: #3a4654; }

@media (min-width: 40rem) {
  html { font-size: 137.5%; }          /* 22px on bigger screens */
  button { width: auto; min-width: 16rem; }
}