/* ==========================================================================
   Contact page — page-specific styles.
   Loaded after design-system.css and homepage.css; reuses their tokens and
   shared components (disclaimer, placeholder-note, footer, hero-ctas)
   rather than redefining them.
   Prototype only, not committed, not deployed.

   FORM BACKEND, added 2026-07-30: the actual submission mechanism is
   Netlify Forms (data-netlify="true" in the markup, no JS required for it
   to function). This was chosen because it is the one contact-form option
   that needs no separate third-party account beyond hosting itself, which
   the founder already named Netlify as an example of when resolving the
   hosting question. If the final host ends up being something other than
   Netlify (Cloudflare Pages, etc.), this form will not submit anywhere and
   needs to be re-pointed at a different form service instead, one that
   would require the founder's own account with that service, not
   something built here. See docs/paula-todo.md.
   ========================================================================== */

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-form {
  max-width: 560px;
  margin-top: var(--space-6);
}
.form-group {
  margin-bottom: var(--space-5);
}
.form-group label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-input);
  padding: 12px 14px;
  transition: border-color var(--duration-base) var(--ease-conservatory);
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-forest);
}
.form-group textarea { resize: vertical; min-height: 140px; }

/* Hidden spam trap, not CAPTCHA, per the founder's direct answer to
   "CAPTCHA, when a contact form exists": a real human never sees or fills
   this field. aria-hidden and tabindex="-1" keep it invisible to screen
   readers too, so it's not a confusing stray field read aloud; a bot that
   fills every field it finds will trip it. Positioned off-screen rather
   than display:none, since some bots specifically skip display:none
   fields. */
.contact-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: 15px;
}
.form-status--success { color: var(--color-forest); }
.form-status--error { color: var(--color-pink-deep); }

/* Same small bulleted-list pattern already defined per-page in
   nutrition.css, shop.css, and about.css — redefined locally rather than
   cross-loading another page's stylesheet for one component. */
.fit-list {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .fit-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
.fit-list li {
  position: relative;
  padding-left: 1.3em;
  font-size: 16px;
}
.fit-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}