/**
 * Contact page styles
 * Mobile-first design with responsive enhancements
 * 
 * Note: Form controls, checkboxes, and card styles are now in
 * /static/css/components/forms.css (global component)
 */

/* Base styles (mobile) */
.contact-page {
  min-height: calc(100vh - 200px);
}

/* Material Icons alignment fix */
.contact-page .material-icons {
  font-size: 20px;
  line-height: 1;
  vertical-align: -4px;
}

/* Primary color override - use GeoFazendas green */
.contact-page .text-primary {
  color: var(--gf-color-primary, #14651e) !important;
}

.contact-header h1 {
  color: var(--bs-dark);
}

.contact-header .lead {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Card headers with icons */
.contact-page h2,
.contact-page h3 {
  display: flex;
  align-items: center;
}

.contact-page h2 .material-icons,
.contact-page h3 .material-icons {
  font-size: 22px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Contact info list */
.contact-info-list li {
  padding: 8px 0;
  display: flex;
  align-items: flex-start;
}

.contact-info-list li .material-icons {
  font-size: 20px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 12px;
  /* Align icon baseline with strong text */
  line-height: 24px;
  text-align: center;
}

.contact-info-list li > div {
  flex: 1;
  min-width: 0;
}

.contact-info-list strong {
  display: block;
  color: var(--bs-dark);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}

.contact-info-list a {
  color: var(--gf-color-primary, #14651e);
}

.contact-info-list a:hover {
  color: var(--gf-color-primary-hover, #2e8439);
}

.contact-info-list .text-muted {
  font-size: 0.9rem;
}

/* FAQ Preview - Uses global gf-accordion component */
/* See /static/css/components/accordion.css */

/* Success page styles */
.contact-success-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}

.success-card {
  border-radius: 16px;
}

.success-icon .material-icons {
  animation: pulse 2s ease-in-out infinite;
  color: var(--gf-color-primary, #14651e);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Button styles are now in base.css (gf-btn-outline, gf-btn-outline-primary) */

/* Desktop enhancements */
@media (min-width: 768px) {
  .contact-header h1 {
    font-size: 2.5rem;
  }

  .contact-info-list li {
    padding: 12px 0;
  }
}

/* reCAPTCHA badge positioning - visible in bottom right corner */
.grecaptcha-badge {
  visibility: visible !important;
  z-index: 1000;
}

/* Show privacy info for reCAPTCHA */
.recaptcha-notice {
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.5rem;
}