/* =========================================================================
   ROOTED EXPANSION — CONTACT FORM (contact.html / contact-thank-you.html)
   Netlify Forms, plain HTML, no JavaScript required. Field styling
   matches the main v09.1 build's .form-field pattern exactly (see the
   main site's css/styles.css) for visual continuity across properties.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
input, button, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Base --------------------------------------------------------------*/
body {
  font-family: var(--font-body);
  background: var(--clouded-linen);
  color: var(--rooted-green);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---- Focus visibility (never remove) ----------------------------------*/
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Skip link ---------------------------------------------------------*/
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -60px;
  background: var(--deep-umber);
  color: var(--clouded-linen);
  padding: var(--space-2) var(--space-4);
  z-index: 200;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  transition: top var(--duration-fast) var(--ease-organic);
}
.skip-link:focus { top: var(--space-3); }

/* ---- Layout -------------------------------------------------------------*/
.form-page {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.back-link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--rooted-green);
  text-decoration: none;
  margin-bottom: var(--space-6);
}
.back-link:hover { color: var(--deep-umber); }

.form-page h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  color: var(--deep-umber);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-align: center;
  margin-bottom: var(--space-3);
}

.form-page__intro {
  text-align: center;
  color: var(--rooted-green);
  font-size: var(--text-md);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* =========================================================================
   THE FORM — matches the main site's .form-field pattern exactly.
   ========================================================================= */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-field { display: flex; flex-direction: column; gap: 0.4em; }
.form-field label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--deep-umber);
}
.form-field input,
.form-field textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85em 1em;
  background: #fff;
  font-size: var(--text-base);
  min-height: 44px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--focus-ring);
}

/* The honeypot — invisible to people and screen readers, present in the
   HTML for simple spam bots that fill in every field blindly. Netlify
   ignores any submission where this field isn't empty. Real anti-spam
   layer; the checkbox below is the human-facing, on-voice touch. */
.hp-field { display: none; }

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding-block: 0.5em;
  cursor: pointer;
}
.checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.checkbox-field span {
  font-size: var(--text-sm);
  color: var(--rooted-green);
}

.contact-form .btn {
  align-self: center;
  margin-top: var(--space-2);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  padding: 0.9em 1.9em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition: background var(--duration-fast) var(--ease-organic),
              color var(--duration-fast) var(--ease-organic),
              border-color var(--duration-fast) var(--ease-organic),
              transform var(--duration-fast) var(--ease-organic);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--accent);
  color: #FDF8EF;
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #FDF8EF; }

/* ---- Thank-you page -------------------------------------------------- */
.thank-you {
  text-align: center;
  padding-block: var(--space-4);
}
.thank-you h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  color: var(--deep-umber);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  margin-bottom: var(--space-4);
}
.thank-you p {
  color: var(--rooted-green);
  font-size: var(--text-md);
  max-width: 46ch;
  margin-inline: auto;
}
.thank-you__back {
  text-align: center;
  margin-top: var(--space-5);
}

/* ---- Footer — matches index.html exactly --------------------------------*/
.site-footer {
  padding-block: var(--space-6) var(--space-4);
  background: var(--bg-deep);
  border-top: 1px solid var(--line-on-dark);
  margin-top: var(--space-8);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-mark { width: 40px; height: auto; margin-bottom: var(--space-2); }
.footer-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink-on-dark);
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
.footer-copyright {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-on-dark-soft);
  opacity: 0.85;
}