/* ============================================================
   contact.css
   Styles scoped to .page--contact (contact/index.html).
   Shares the space-background layout foundation from about.css
   (html.has-space-bg rules for scrolling, dark background, and
   site-wrapper z-stacking). This file covers only the
   contact-specific hero and form components.

   Sections:
     .contact-hero        — hero card with eyebrow, h1, body
     .contact-form__card  — frosted-glass card containing the form
     .contact-form        — form layout, fields, and submit button
   ============================================================ */

/* ── Shared card shell ─────────────────────────────────────────────────── */

.contact-hero__card,
.contact-form__card {
  background: var(--overlay-card-bg);
  border: 1px solid var(--overlay-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* ── Hero section ─────────────────────────────────────────────────────── */

.contact-hero__card {
  text-align: center;
}

.contact-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--overlay-accent);
  margin-bottom: var(--space-sm);
}

.contact-hero__heading {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--overlay-text);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.contact-hero__body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--overlay-text-dim);
  max-width: 36rem;
  margin-inline: auto;
}

/* ── Screen-reader-only utility ───────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Form card ────────────────────────────────────────────────────────── */

.contact-form-section {
  width: 100%;
}

.contact-form__card {
  width: 100%;
}

/* ── Form layout ──────────────────────────────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ── Field group ──────────────────────────────────────────────────────── */

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-form__label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--overlay-text-dim);
}

/* ── Input & textarea shared styles ───────────────────────────────────── */

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--overlay-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--overlay-card-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--overlay-text-dim);
  opacity: 0.5;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--overlay-accent);
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.2);
}

/* ── Textarea specifics ───────────────────────────────────────────────── */

.contact-form__textarea {
  resize: vertical;
  min-height: 8rem;
}

/* ── Submit button ────────────────────────────────────────────────────── */

.contact-form__submit {
  width: 100%;
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--overlay-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background: var(--overlay-accent-hover);
  transform: scale(1.03);
  outline: none;
}

/* ── Invalid-field flash ──────────────────────────────────────────────── */

/* Two slow white pulses on the border when a required field is empty at
   submit time. Applied via JS (contact-form.js) and auto-removed on
   animationend.                                                          */
@keyframes contact-flash {
  0%   { border-color: var(--overlay-card-border); }
  12%  { border-color: rgba(255, 255, 255, 0.85); }
  25%  { border-color: var(--overlay-card-border); }
  50%  { border-color: var(--overlay-card-border); }
  62%  { border-color: rgba(255, 255, 255, 0.85); }
  75%  { border-color: var(--overlay-card-border); }
  100% { border-color: var(--overlay-card-border); }
}

.contact-form__flash {
  animation: contact-flash 1.6s ease;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .contact-hero__card,
  .contact-form__card {
    padding: var(--space-lg);
  }

}