/*
CHANGE LOG
File: /var/www/html/prohrhq.com/static/css/prohrhq_contact.css
Purpose: Styles for the rebuilt /contact page (2026-08-05), matching the
         iplan.nsgia.com contact form structure on prohrhq.com's ph-*
         design tokens. No inline styles/scripts per regression_check.py.
Main App: app.py
Used by: templates/contact.html
Version History:
  2026-08-05 v1.0 - Initial creation.
*/

.ph-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.ph-contact-sent {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius);
}

.ph-contact-errors {
  margin: 1rem 0;
  padding: 0.85rem 1.25rem;
  border: 1px solid #b3261e;
  background: #fdf0ef;
  border-radius: var(--radius);
  color: #b3261e;
}
.ph-contact-errors ul { margin: 0.4rem 0 0 1.2rem; }

.ph-contact-form { margin: 1.5rem 0; max-width: 640px; }

.ph-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

.ph-contact-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.ph-contact-wide { grid-column: 1 / -1; }

.ph-contact-grid input,
.ph-contact-grid select,
.ph-contact-grid textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

.ph-contact-grid textarea { resize: vertical; }

.ph-contact-submit-row { margin-top: 1rem; }

.ph-contact-submit-btn {
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}

@media (max-width: 640px) {
  .ph-contact-grid { grid-template-columns: 1fr; }
}

.ph-contact-warning {
  font-size: 0.85rem;
  color: #a86a14;
  background: #fdf6e8;
  border: 1px solid #eddcae;
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
}