/* style/contact.css */

/* Base Styles for .page-contact */
.page-contact {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333333; /* Dark text for light body background */
  background-color: var(--secondary-color); /* #FFFFFF */
}

.page-contact__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-contact__section-title {
  font-size: 36px;
  color: var(--primary-color); /* #017439 */
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
}

.page-contact__section-description {
  font-size: 18px;
  color: #555555;
  text-align: center;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* HERO Section */
.page-contact__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  padding-top: var(--header-offset, 120px); /* Fixed header offset */
  background: linear-gradient(135deg, #017439, #029d4c); /* Brand colors gradient */
  color: #ffffff;
  overflow: hidden;
}

.page-contact__hero-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.page-contact__hero-image {
  width: 100%;
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-contact__hero-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.page-contact__hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

.page-contact__hero-title {
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.page-contact__hero-description {
  font-size: 20px;
  margin-bottom: 30px;
  color: #e0e0e0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons */
.page-contact__cta-button,
.page-contact__btn-primary,
.page-contact__btn-secondary {
  display: inline-block;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-contact__btn-primary {
  background: #C30808; /* Custom Register/Login color */
  color: #FFFFFF; /* WCAG AA compliant text color */
  border: 2px solid #C30808;
}

.page-contact__btn-primary:hover {
  background: #a50707;
  border-color: #a50707;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.page-contact__btn-secondary {
  background: #ffffff;
  color: var(--primary-color); /* #017439 */
  border: 2px solid var(--primary-color);
}

.page-contact__btn-secondary:hover {
  background: var(--primary-color); /* #017439 */
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* Contact Methods Section */
.page-contact__contact-methods {
  padding: 80px 0;
  background-color: var(--secondary-color);
}

.page-contact__methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-contact__method-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.page-contact__method-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.page-contact__method-card img {
  width: 100%;
  max-width: 200px; /* Ensure images are not too large */
  height: auto;
  margin-bottom: 20px;
  border-radius: 8px;
  object-fit: cover;
}

.page-contact__card-title {
  font-size: 24px;
  color: var(--primary-color); /* #017439 */
  margin-bottom: 15px;
  font-weight: 600;
}

.page-contact__method-card p {
  font-size: 16px;
  color: #666666;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-contact__contact-info {
  font-weight: bold;
  color: #333333;
  font-size: 17px;
}

.page-contact__social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.page-contact__social-icon img {
   /* Small icons are forbidden, but these are for social media, so I will ensure they are at least 200x200 if they were content images. For social icons, I will use a reasonable size. However, the rule states 'any width or height less than 200px is forbidden'. This applies to all images. I will set the placeholder to 200x200 and set display size to 48x48, which is a contradiction. I will follow the 200x200 minimum for the image placeholder and HTML width/height, and rely on CSS to scale them down if they are visually icons. The prompt also states '禁止所有小图标'. So, I need to remove these social media icons or make them large content images. Let's remove the social media icons, as they are likely to be small. I'll adjust the content to remove the social media card and focus on the other three methods. If social media is critical, I need to make them large content images. For now, I'll remove it to strictly follow the image size rule. The original request had `64x64`, which is forbidden. */
  
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.page-contact__social-icon:hover img {
  transform: scale(1.1);
}

/* Contact Form Section */
.page-contact__contact-form-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #017439, #029d4c);
  color: #ffffff;
}

.page-contact__form {
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.page-contact__form-group {
  margin-bottom: 25px;
}

.page-contact__form-label {
  display: block;
  font-size: 16px;
  color: #333333;
  margin-bottom: 8px;
  font-weight: 600;
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  color: #333333;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  border-color: var(--primary-color); /* #017439 */
  box-shadow: 0 0 0 3px rgba(1, 116, 57, 0.2);
  outline: none;
}

.page-contact__form-textarea {
  resize: vertical;
}

/* FAQ Section */
.page-contact__faq-section {
  padding: 80px 0;
  background-color: var(--secondary-color);
}

.page-contact__faq-list {
  max-width: 900px;
  margin: 40px auto 0 auto;
}

/* FAQ item styles */
.page-contact__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background: #ffffff;
}

/* FAQ default state - answer hidden */
.page-contact__faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, opacity 0.4s ease;
  padding: 0 20px;
  opacity: 0;
  color: #444444;
}

/* FAQ expanded state - 🚨 Use!important and sufficiently large max-height */
.page-contact__faq-item.active .page-contact__faq-answer {
  max-height: 2000px !important; /* 🚨 Use!important ensure priority, value large enough to accommodate any content */
  padding: 20px !important;
  opacity: 1;
  background: #f9f9f9;
  border-radius: 0 0 5px 5px;
}

/* Question styles */
.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
  position: relative;
}

.page-contact__faq-item.active .page-contact__faq-question {
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.page-contact__faq-question:hover {
  background: #f5f5f5;
}

.page-contact__faq-question:active {
  background: #eeeeee;
}

/* Question title style */
.page-contact__faq-question h3 {
  margin: 0;
  padding: 0;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none; /* Prevent h3 tag from blocking click events */
  color: var(--primary-color); /* #017439 */
}

/* Toggle icon */
.page-contact__faq-toggle {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  color: #666;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 15px;
  pointer-events: none; /* Prevent icon from blocking click events */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.page-contact__faq-item.active .page-contact__faq-toggle {
  color: #333;
  transform: rotate(45deg); /* Rotate for 'x' effect from '+' */
}

/* Commitment Section */
.page-contact__commitment-section {
  padding: 80px 0;
  text-align: center;
  background: linear-gradient(135deg, #017439, #029d4c);
  color: #ffffff;
}

.page-contact__commitment-section .page-contact__section-title {
  color: #ffffff;
}

.page-contact__commitment-section .page-contact__section-description {
  color: #e0e0e0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Dark/Light Background Helpers */
.page-contact__dark-section .page-contact__section-title,
.page-contact__dark-section .page-contact__section-description {
  color: #ffffff;
}

.page-contact__light-bg .page-contact__section-title,
.page-contact__light-bg .page-contact__section-description {
  color: var(--primary-color);
}

/* General Image Styling */
.page-contact img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-contact__hero-section {
    padding-top: var(--header-offset, 120px) !important;
    padding-bottom: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-contact__hero-title {
    font-size: 32px;
  }

  .page-contact__hero-description {
    font-size: 16px;
  }

  .page-contact__cta-button,
  .page-contact__btn-primary,
  .page-contact__btn-secondary {
    padding: 12px 30px;
    font-size: 16px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto;
    margin-right: auto;
  }

  .page-contact__section-title {
    font-size: 28px;
  }

  .page-contact__section-description {
    font-size: 15px;
    margin-bottom: 30px;
  }

  .page-contact__contact-methods,
  .page-contact__contact-form-section,
  .page-contact__faq-section,
  .page-contact__commitment-section {
    padding: 40px 0;
  }

  .page-contact__methods-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-contact__method-card {
    padding: 25px;
  }

  .page-contact__method-card img {
    
  }

  .page-contact__card-title {
    font-size: 20px;
  }

  .page-contact__form {
    padding: 25px;
  }

  .page-contact__form-label,
  .page-contact__form-input,
  .page-contact__form-textarea {
    font-size: 15px;
    padding: 12px;
  }

  .page-contact__faq-question {
    padding: 15px;
    flex-wrap: wrap;
  }
  
  .page-contact__faq-question h3 {
    font-size: 16px;
    margin-bottom: 0;
    width: calc(100% - 40px);
  }
  
  .page-contact__faq-toggle {
    margin-left: 10px;
    width: 24px;
    height: 24px;
    font-size: 20px;
  }
  
  .page-contact__faq-answer {
    padding: 0 15px;
  }
  
  .page-contact__faq-item.active .page-contact__faq-answer {
    padding: 15px !important;
  }

  /* Ensure all images are responsive */
  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .page-contact__hero-image,
  .page-contact__methods-grid,
  .page-contact__method-card,
  .page-contact__form,
  .page-contact__faq-list,
  .page-contact__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}