/* ==========================================================================
   Contact Page — Cereble AI
   ========================================================================== */

/* -- Section 1: Contact Hero ---------------------------------------------- */

.contact-hero {
  background-color: var(--surface-mist);
  padding-block: var(--space-section);
  text-align: center;
}

.contact-hero__container {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.contact-hero__badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  /* --cereble-blue-accessible on --surface-mist is 4.16:1 — fails AA at small size.
     Using --text-primary (~17:1) for reliable contrast, matching home hero badge. */
  color: var(--text-primary);
  margin-block-end: var(--space-md);
}

.contact-hero__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading-h1);
  color: var(--text-primary);
  margin-block-end: var(--space-xl);
}

.contact-hero__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
  color: var(--color-text-light);
}

/* -- Section 2: Contact Methods ------------------------------------------- */

.contact-methods {
  background-color: var(--page-white);
  padding-block: var(--space-section);
}

.contact-methods__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.contact-methods__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading-h2);
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 var(--space-2xl);
}

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

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

.contact-methods__card {
  background-color: var(--surface-mist);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

a.contact-methods__card {
  cursor: pointer;
  display: block;
}

a.contact-methods__card:hover,
a.contact-methods__card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

a.contact-methods__card:focus-visible {
  outline: 2px solid var(--cereble-blue-accessible);
  outline-offset: 2px;
}

.contact-methods__icon {
  color: var(--cereble-blue-accessible);
  margin: 0 auto var(--space-md);
  display: block;
  font-size: var(--icon-md);
}

.contact-methods__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading-h3);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.contact-methods__card-detail {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text-light);
  margin: 0;
}

.contact-methods__card-link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  /* --cereble-blue-accessible (#3479C0) on --surface-mist (#F0F6FF) is 4.16:1 — fails AA.
     --cereble-blue-on-mist (#2b6299, ~5.2:1) is used for reliable contrast on mist cards. */
  color: var(--cereble-blue-on-mist);
  text-decoration: underline;
  margin: 0 0 var(--space-xs);
  transition: color var(--transition-fast);
}

.contact-methods__card-link:hover {
  color: var(--cereble-lilac);
}

.contact-methods__card-link:focus-visible {
  outline: 2px solid var(--cereble-blue-accessible);
  outline-offset: 2px;
  border-radius: 2px;
}

.contact-methods__card-action {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  /* Darkened to --cereble-blue-on-mist for WCAG AA on --surface-mist cards — same override as card-link */
  color: var(--cereble-blue-on-mist);
  margin-top: var(--space-sm);
}

/* Contact Methods — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contact-methods__card,
  .contact-methods__card-link {
    transition: none;
  }

  a.contact-methods__card:hover,
  a.contact-methods__card:focus-visible {
    transform: none;
  }
}

/* -- Section 3: Contact Map (last section) -------------------------------- */

.contact-map {
  background-color: var(--surface-blue);
  padding-block: var(--space-section);
}

.contact-map__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.contact-map__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading-h2);
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 var(--space-2xl);
}

.contact-map__frame-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.contact-map__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.contact-map__address {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text-light);
  text-align: center;
  margin: var(--space-lg) 0 0;
}

/* -- Section 4: Contact Form (inside Contact Methods section) ------------- */

.contact-methods__form-wrapper {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-start: var(--space-2xl);
  padding: var(--space-2xl) var(--space-xl);
  background-color: var(--surface-mist);
  border-radius: var(--radius-md);
}

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

.contact-methods__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-methods__form-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.contact-methods__form-input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--page-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), outline var(--transition-fast);
}

.contact-methods__form-input:focus {
  outline: 2px solid var(--cereble-blue-accessible);
  outline-offset: 2px;
  border-color: var(--cereble-blue-accessible);
}

textarea.contact-methods__form-input {
  resize: vertical;
  min-height: 120px;
}

.contact-methods__form-submit {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-on-dark);
  background-color: var(--cereble-blue-accessible);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.contact-methods__form-submit:hover {
  opacity: 0.88;
}

.contact-methods__form-submit:focus-visible {
  outline: 2px solid var(--cereble-blue-accessible);
  outline-offset: 3px;
}

.contact-methods__form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-methods__form-message {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

.contact-methods__form-message.is-success {
  color: var(--color-success);
  background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}

.contact-methods__form-message.is-error {
  color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
}

/* Contact Form — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contact-methods__form-input,
  .contact-methods__form-submit {
    transition: none;
  }
}

/* Contact Form — mobile single-column (already column by default; ensure padding scales) */
@media (max-width: 767px) {
  .contact-methods__form-wrapper {
    padding: var(--space-xl) var(--space-md);
  }

  .contact-methods__form-submit {
    align-self: stretch;
    text-align: center;
  }
}