/* ==========================================================================
   CONTACT INTRO SECTION
   ==========================================================================
   BUG FIX: this section previously used class="about-section", a class
   only ever defined in about.css — which this page never loads. That
   meant the section's padding rhythm silently did nothing this whole
   time; the class name matched no rule in scope. Self-contained here
   instead, following the same page-prefixed naming convention already
   used everywhere else in this file (.contact-*), specifically to
   avoid this exact class-scoping mistake happening again. Same value
   as about.css's version, so the visual output is unchanged.
   ========================================================================== */

.contact-intro-section {
  padding-block: var(--space-5xl);
}


/* ==========================================================================
   CONTACT PAGE STYLES
   ==========================================================================
   Styles specific to contact.html. Two small patterns here
   (the inline placeholder marker, the icon+text trust list) already
   exist elsewhere on the site — in faq.css and about.css respectively.
   Normally, a pattern needed by a second page gets promoted into
   components.css (that's exactly what happened earlier with .page-hero
   and .placeholder-note). This time, that refactor would mean editing
   about.css and faq.css to remove the duplicated rules — touching two
   already-finished, unrelated pages. Since the brief for this page was
   explicit about not touching unrelated pages, this file intentionally
   keeps small, self-contained versions of those two patterns instead.
   It's a few duplicated lines of CSS in exchange for a strictly
   contained change — a reasonable trade worth naming rather than
   quietly doing a wider refactor than was asked for.
   ========================================================================== */


/* ==========================================================================
   CONTACT OPTIONS — five cards, each pointing to the right inbox for a
   specific kind of message. Reuses the existing .card component
   directly; only the grid wrapper and the card's internal layout are
   new here.
   ========================================================================== */

.contact-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.contact-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  color: var(--color-brand-blue);
  margin-bottom: var(--space-lg);
}

.contact-option-icon svg {
  width: 22px;
  height: 22px;
}

.contact-option-card h3 {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-sm);
}

.contact-option-card p {
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-lg);
}

/* Small dashed-underline marker for information that hasn't been
   finalized yet — same visual idea as .answer-placeholder in faq.css,
   kept local here for the reason explained at the top of this file. */
.contact-placeholder-text {
  display: inline-block;
  font-size: var(--text-body-sm);
  font-family: var(--font-mono);
  color: var(--color-amber);
  border-bottom: 1.5px dashed var(--color-amber);
}

.contact-option-card a.contact-option-link {
  display: inline-block;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-brand-blue);
  text-decoration: underline;
}

@media (min-width: 640px) {
  .contact-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-options-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   CONTACT FORM
   ========================================================================== */

.contact-form-section {
  padding-block: var(--space-5xl);
  background: var(--color-sand);
}

.contact-form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4xl);
}

.contact-form-wrap {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
}

.form-group {
  margin-bottom: var(--space-xl);
}

.form-group:last-of-type {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.form-required {
  color: var(--color-error);
  margin-left: 2px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

textarea.form-input {
  resize: vertical; /* lets the user make the box taller if they're
                        writing a longer message, but never narrower —
                        preserves the form's layout width */
  min-height: 140px;
}

/* Native <select> elements can't be restyled as thoroughly as text
   inputs across all browsers without extra markup, so this keeps the
   shared border/padding/radius from .form-input and only adjusts what's
   safe to touch consistently — the base look already matches the rest
   of the form without needing a custom-built dropdown. */
select.form-input {
  cursor: pointer;
}

/* Applied by JavaScript to a field's wrapper when validation fails */
.form-group.has-error .form-input {
  border-color: var(--color-error);
}

.form-error-message {
  display: none; /* shown only when .form-group has .has-error */
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-error);
}

.form-group.has-error .form-error-message {
  display: flex;
}

.form-submit-row {
  margin-top: var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.form-privacy-note {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
}


/* ==========================================================================
   POST-SUBMIT CONFIRMATION STATE
   ==========================================================================
   Shown by JavaScript in place of the form once validation passes.
   Deliberately NOT styled or worded like a real "message sent"
   confirmation — see the honesty note inside the HTML comment on this
   element in contact.html for why.
   ========================================================================== */

.contact-confirmation {
  display: none; /* JS toggles this to flex when the form validates successfully */
  flex-direction: column;
  gap: var(--space-lg);
  text-align: center;
  padding: var(--space-2xl) 0;
}

.contact-confirmation.is-visible {
  display: flex;
}

.contact-confirmation-icon {
  width: 48px;
  height: 48px;
  margin-inline: auto;
  color: var(--color-success);
}

.contact-confirmation h3 {
  font-size: var(--text-heading-sm);
}

.contact-confirmation-summary {
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: left;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.contact-confirmation-summary strong {
  color: var(--color-text-primary);
}


/* ==========================================================================
   TRUST SECTION — small local version of the icon+text list pattern
   (see the file-level note at the top for why this isn't imported from
   about.css instead)
   ========================================================================== */

.trust-section {
  padding-block: var(--space-5xl);
}

.trust-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.trust-item {
  display: flex;
  gap: var(--space-lg);
}

.trust-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  color: var(--color-brand-blue);
}

.trust-item-icon svg {
  width: 18px;
  height: 18px;
}

.trust-item h3 {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-xs);
}

.trust-item p {
  font-size: var(--text-body-md);
}

@media (min-width: 768px) {
  .trust-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact-form-layout {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}