/* ==========================================================================
   reidEXA — forms.css
   Styling for contact.html and speaking.html. Loaded after site.css.

   Sections:
       1. Form hero — Midnight base with atmospheric wash + grid overlay
       2. Form body shell (paper background + two-column grid)
       3. Form card — primary surface with elevation
       4. Form fields (input, textarea, select) + label + row layouts
       5. Submit button (matches site.css .cta-primary dimensional treatment)
       6. Sidebar — context column beside the form
       7. Success state (shown after form submit)
       8. Honeypot utility — visually hidden, still in DOM for spam bots
       9. Mobile (≤900px)
      10. Reduced motion overrides
   ========================================================================== */


/* ==========================================================================
   1. Form hero — Midnight atmospheric base, similar pattern to other heroes
   ========================================================================== */

.form-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 50px;
  background:
    radial-gradient(900px 620px at 8% 0%,
      hsl(var(--electric-hsl) / 0.10), transparent 60%),
    radial-gradient(800px 540px at 100% 100%,
      hsl(var(--midnight-3-hsl) / 0.82), transparent 55%),
    var(--midnight);
}
.form-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-image:
    linear-gradient(hsl(var(--electric-hsl) / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--electric-hsl) / 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.form-hero-inner {
  position: relative;
  max-width: 760px;
}
.form-hero-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--electric);
}
.form-hero-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--electric);
}
.form-hero-title {
  margin-bottom: 24px;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--white);
}
.form-hero-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--electric);
}
.form-hero-sub {
  max-width: 620px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--slate-dim);
}
/* Byline row — avatar + name above the mono label */
.form-hero-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.form-hero-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid hsl(var(--electric-hsl) / 0.40);
  box-shadow: var(--elev-dark-2);
  flex-shrink: 0;
}
.form-hero-author {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--slate-dim);
}


/* ==========================================================================
   2. Form body — paper background with subtle ambient wash, two-column grid
   ========================================================================== */

.form-section {
  padding: 80px 0 120px;
  background:
    radial-gradient(800px 500px at 100% 0%,
      hsl(var(--electric-hsl) / 0.04), transparent 60%),
    radial-gradient(700px 460px at 0% 100%,
      hsl(var(--cloud-hsl) / 0.6), transparent 60%),
    var(--paper);
}
.form-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}


/* ==========================================================================
   3. Form card — primary surface of the page (heavy elevation by design)
   The form is THE primary tile, not a card among many — uses --elev-3
   so it reads as the most important surface even at rest.
   ========================================================================== */

.form-card {
  padding: 44px 48px;
  background: var(--white);
  border-top: 2px solid var(--electric);
  border-radius: 12px;
  box-shadow: var(--elev-3), var(--bevel-dark);
}
.form-card-title {
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--midnight);
}
.form-card-sub {
  margin-bottom: 32px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--slate);
}


/* ==========================================================================
   4. Form fields — input, textarea, select; label + row layouts
   ========================================================================== */

.form-row { margin-bottom: 24px; }
.form-row.form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.form-label .required {
  margin-left: 2px;
  color: var(--electric);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--midnight);
  border: 1px solid var(--cloud);
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
  /* Subtle pressed-in feel at rest, focus ring layered on top via :focus. */
  box-shadow: inset 0 1px 2px hsl(var(--midnight-hsl) / 0.04);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--electric);
  /* Compose the inner shadow + 3px focus halo. */
  box-shadow:
    inset 0 1px 2px hsl(var(--midnight-hsl) / 0.04),
    0 0 0 3px hsl(var(--electric-hsl) / 0.18);
}
.form-input::placeholder,
.form-textarea::placeholder {
  font-weight: 300;
  color: var(--slate-light);
}
.form-textarea {
  min-height: 140px;
  line-height: 1.6;
  resize: vertical;
}
.form-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D4F63' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}


/* ==========================================================================
   5. Submit button — same dimensional treatment as site.css .cta-primary,
   so the form's primary action reads identically to the homepage CTA.
   ========================================================================== */

.form-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: linear-gradient(
    180deg,
    hsl(var(--electric-soft-hsl)) 0%,
    hsl(var(--electric-hsl)) 100%
  );
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--white);
  border: 1px solid var(--electric);
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 hsl(var(--white-hsl) / 0.18),
    inset 0 -1px 0 hsl(var(--midnight-hsl) / 0.18);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.form-submit:hover {
  background: linear-gradient(
    180deg,
    hsl(var(--electric-soft-hsl)) 0%,
    hsl(var(--electric-soft-hsl)) 100%
  );
  border-color: var(--electric-soft);
  box-shadow:
    var(--elev-3),
    inset 0 1px 0 hsl(var(--white-hsl) / 0.22),
    inset 0 -1px 0 hsl(var(--midnight-hsl) / 0.18);
}
.form-submit:active {
  transform: translateY(1px);
  box-shadow: var(--elev-1);
}
.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-fallback {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate);
}
.form-fallback a {
  color: var(--electric);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   6. Sidebar — context + direct contact details
   ========================================================================== */

.form-sidebar {
  position: sticky;
  top: 100px;
}
.sidebar-card {
  padding: 12px 0;
  background: transparent;
}
.sidebar-title {
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--midnight);
}
.sidebar-text {
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--slate);
}
.sidebar-contact-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--cloud);
}
.sidebar-contact-item { display: block; }
.sidebar-contact-label {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.sidebar-contact-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--midnight);
}
.sidebar-contact-value a {
  color: var(--electric);
  text-decoration: none;
  transition: text-decoration var(--dur-fast) var(--ease-out);
}
.sidebar-contact-value a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   7. Success state — shown after form submit (same elevation as form-card
   so the swap feels seamless — the user sees the same surface on which they
   typed, just with different content).
   ========================================================================== */

.form-success {
  display: none;
  padding: 60px 48px;
  background: var(--white);
  text-align: center;
  border-top: 2px solid var(--electric);
  border-radius: 12px;
  box-shadow: var(--elev-3), var(--bevel-dark);
}
.form-success.visible { display: block; }
.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  background: hsl(var(--electric-hsl) / 0.1);
  color: var(--electric);
  border-radius: 50%;
}
.form-success-title {
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--midnight);
}
.form-success-text {
  max-width: 440px;
  margin: 0 auto 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--slate);
}
.form-success-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--electric);
  text-decoration: none;
  transition: gap var(--dur-fast) var(--ease-out);
}
.form-success-link:hover { gap: 14px; }


/* ==========================================================================
   8. Honeypot — visually hidden, still in DOM and tabbable=-1.
   Spam bots auto-fill all visible fields; the honeypot field is the
   tripwire. Bots don't render CSS, so display:none is safe — the input
   stays in the form's DOM regardless.
   ========================================================================== */

.honeypot {
  display: none !important;
}


/* ==========================================================================
   9. Mobile — ≤900px breakpoint
   ========================================================================== */

@media (max-width: 900px) {
  .form-hero-title         { font-size: 38px; }
  .form-hero-avatar {
    width: 48px;
    height: 48px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .form-card               { padding: 32px 28px; }
  .form-row.form-row-pair  { grid-template-columns: 1fr; }
  .form-sidebar            { position: static; }
}


/* ==========================================================================
   10. Reduced motion — site.css already nukes most transitions globally,
   but the .form-submit:active transform deserves an explicit override
   so it stays still under prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .form-submit:active { transform: none; }
}