/* ==========================================================================
   PlayGuitar v3 — Contact page body (blog theme)
   Ported from courses/assets/css/contact.css. Scoped under body.pg-contact.
   ========================================================================== */

.pg-contact .reading { max-width: var(--width-content); margin: 0 auto; }

.pg-contact .hero { background: var(--paper); padding: var(--space-20) 0 var(--space-16); border-bottom: 1px solid var(--hairline); }
.pg-contact .hero h1 { font-size: var(--h1); font-weight: var(--weight-semibold); margin: 0 0 var(--space-8) 0; }
.pg-contact .hero-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-6); align-items: start; }
.pg-contact .hero-headshot { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--paper-deep); box-shadow: var(--shadow-sm); flex-shrink: 0; }
.pg-contact .hero-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pg-contact .hero-intro { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); margin: 0; max-width: 56ch; }

.pg-contact .redirect { background: var(--paper-hero); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--space-12) 0; }
.pg-contact .redirect h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4) 0; }
.pg-contact .redirect p { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-body); max-width: 60ch; margin: 0; }

.pg-contact .form-section { padding: var(--space-20) 0 var(--space-16); background: var(--paper); }
.pg-contact .form-section h2 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-10) 0; }
.pg-contact .contact-form { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; }
.pg-contact .field { display: flex; flex-direction: column; gap: var(--space-2); }
.pg-contact .field label { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--ink-heading); line-height: var(--leading-snug); }
.pg-contact .field input, .pg-contact .field textarea { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-body); background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-height: 48px; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -webkit-appearance: none; appearance: none; }
.pg-contact .field input:hover, .pg-contact .field textarea:hover { border-color: var(--ink-light); }
.pg-contact .field input:focus-visible, .pg-contact .field textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.pg-contact .field textarea { min-height: 180px; resize: vertical; line-height: var(--leading-loose); }
.pg-contact .honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pg-contact .submit-row { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.pg-contact .btn-submit { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--on-dark); background: var(--brand); border: 0; border-radius: var(--radius-md); padding: var(--space-4) var(--space-8); min-height: 52px; cursor: pointer; transition: background-color var(--transition-fast); }
.pg-contact .btn-submit:hover { background: var(--brand-hover); }
.pg-contact .btn-submit:disabled { opacity: 0.65; cursor: default; }
.pg-contact .btn-submit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pg-contact .trust-line { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.pg-contact .form-error { font-size: var(--text-sm); color: var(--error); margin: 0; }

.pg-contact .success-card { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start; }
.pg-contact .success-tick { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pg-contact .success-body { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-heading); margin: 0; }

.pg-contact .mailing { padding: var(--space-12) 0 var(--space-20); background: var(--paper); }
.pg-contact .mailing h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-muted); margin: 0 0 var(--space-3) 0; }
.pg-contact .mailing address { font-style: normal; font-size: var(--text-base); line-height: var(--leading-loose); color: var(--ink-muted); }
.pg-contact .mailing-divider { height: 1px; background: var(--hairline); border: 0; margin: 0 auto var(--space-10); max-width: var(--width-content); }

@media (max-width: 768px) {
  .pg-contact .hero { padding: var(--space-12) 0; }
  .pg-contact .hero h1 { font-size: var(--text-3xl); }
  .pg-contact .hero-row { grid-template-columns: 1fr; gap: var(--space-5); }
  .pg-contact .hero-headshot { width: 72px; height: 72px; }
  .pg-contact .hero-intro { font-size: var(--text-base); }
  .pg-contact .redirect { padding: var(--space-10) 0; }
  .pg-contact .redirect h2 { font-size: var(--text-xl); }
  .pg-contact .redirect p { font-size: var(--text-base); }
  .pg-contact .form-section { padding: var(--space-16) 0 var(--space-12); }
  .pg-contact .form-section h2 { font-size: var(--text-2xl); margin-bottom: var(--space-8); }
  .pg-contact .btn-submit { width: 100%; }
  .pg-contact .mailing { padding: var(--space-10) 0 var(--space-16); }
}
@media (max-width: 480px) {
  .pg-contact .hero h1 { font-size: var(--text-2xl); }
}