/* style/contact.css */
:root {
  --primary-color: #11A84E;
  --secondary-color: #22C768;
  --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --card-bg: #11271B;
  --background-dark: #08160F;
  --text-main: #F2FFF6;
  --text-secondary: #A7D9B8;
  --border-color: #2E7A4E;
  --glow-color: #57E38D;
  --gold-color: #F2C14E;
  --divider-color: #1E3A2A;
  --deep-green-color: #0A4B2C;
}

.page-contact {
  font-family: Arial, sans-serif;
  color: var(--text-main); /* Default text color for dark background */
  background-color: var(--background-dark); /* Assuming body background is dark from shared.css */
  line-height: 1.6;
}

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

.page-contact__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 60px 0; /* Small top padding, larger bottom padding */
  background-color: var(--background-dark);
  color: var(--text-main);
  text-align: center;
}

.page-contact__hero-image-wrapper {
  width: 100%;
  max-height: 600px; /* Limit height of hero image */
  overflow: hidden;
}

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

.page-contact__hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  padding: 40px 20px;
  margin-top: -100px; /* Overlap with image slightly for visual effect */
  background: rgba(17, 39, 27, 0.8); /* Semi-transparent card-bg for text readability */
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.page-contact__main-title {
  font-size: clamp(2em, 3.5vw, 3em); /* Responsive font size for H1 */
  font-weight: bold;
  color: var(--gold-color);
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-contact__hero-description {
  font-size: 1.1em;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.page-contact__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.page-contact__btn-primary,
.page-contact__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: all 0.3s ease;
  box-sizing: border-box;
  max-width: 100%; /* Ensure buttons are responsive */
  white-space: normal;
  word-wrap: break-word;
}

.page-contact__btn-primary {
  background: var(--button-gradient);
  color: var(--text-main);
  border: 2px solid transparent;
}

.page-contact__btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(42, 209, 111, 0.4);
}

.page-contact__btn-secondary {
  background: transparent;
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}

.page-contact__btn-secondary:hover {
  background: var(--secondary-color);
  color: var(--background-dark);
  transform: translateY(-3px);
}

.page-contact__section-title {
  font-size: 2.5em;
  color: var(--gold-color);
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-contact__section-description {
  font-size: 1.1em;
  color: var(--text-secondary);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.page-contact__info-section,
.page-contact__form-section,
.page-contact__commitment-section,
.page-contact__why-choose-us-section {
  padding: 80px 0;
}

.page-contact__dark-bg {
  background-color: var(--card-bg);
}

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

.page-contact__card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-contact__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-contact__card-title {
  font-size: 1.5em;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-weight: bold;
}

.page-contact__card-text {
  color: var(--text-secondary);
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-contact__text-link {
  color: var(--gold-color);
  text-decoration: none;
}

.page-contact__text-link:hover {
  text-decoration: underline;
}

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

.page-contact__social-icon {
  display: inline-block;
  width: 48px; /* Larger icons for visibility */
  height: 48px;
  line-height: 48px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--text-main);
  font-size: 1.5em;
  transition: background-color 0.3s ease;
}

.page-contact__social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Ensure white icon on colored background */
}

.page-contact__social-icon:hover {
  background-color: var(--secondary-color);
}

.page-contact__contact-form {
  max-width: 700px;
  margin: 40px auto 0 auto;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

.page-contact__form-label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-main);
  font-weight: bold;
  font-size: 1.1em;
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--background-dark);
  color: var(--text-main);
  font-size: 1em;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.page-contact__form-input::placeholder,
.page-contact__form-textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

.page-contact__form-textarea {
  resize: vertical;
  min-height: 120px;
}

.page-contact__faq-section {
  padding: 80px 0;
}

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

.page-contact__faq-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  color: var(--text-main);
  font-weight: bold;
  font-size: 1.15em;
  transition: background-color 0.3s ease;
  list-style: none;
}

.page-contact__faq-item summary::-webkit-details-marker {
  display: none;
}

.page-contact__faq-question:hover {
  background-color: rgba(var(--primary-color), 0.1);
}

.page-contact__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s ease;
  color: var(--primary-color);
}

.page-contact__faq-item[open] .page-contact__faq-toggle {
  transform: rotate(45deg);
}

.page-contact__faq-answer {
  padding: 0 25px 20px 25px;
  color: var(--text-secondary);
  font-size: 1em;
}

.page-contact__faq-answer p {
  margin-bottom: 10px;
}

.page-contact__commitment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
  text-align: center;
}

.page-contact__commitment-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-contact__commitment-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 5px var(--glow-color));
}

.page-contact__commitment-title {
  font-size: 1.3em;
  color: var(--primary-color);
  margin-bottom: 10px;
  font-weight: bold;
}

.page-contact__commitment-text {
  color: var(--text-secondary);
}

.page-contact__advantages-list {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 40px auto 40px auto;
  color: var(--text-secondary);
}

.page-contact__advantages-list li {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-contact__advantages-list li::before {
  content: '✅';
  font-size: 1.2em;
  line-height: 1;
}

/* Responsive styles */
@media (max-width: 768px) {
  .page-contact__container {
    padding: 0 15px; /* Add padding for mobile */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-contact__hero-section {
    padding: 10px 0 40px 0;
  }

  .page-contact__hero-content {
    margin-top: -60px;
    padding: 20px 15px;
  }

  .page-contact__main-title {
    font-size: clamp(1.8em, 8vw, 2.5em);
  }

  .page-contact__hero-description {
    font-size: 1em;
  }

  .page-contact__cta-buttons {
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px;
  }

  .page-contact__btn-primary,
  .page-contact__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1em;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-contact__section-title {
    font-size: 2em;
  }

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

  .page-contact__info-section,
  .page-contact__form-section,
  .page-contact__commitment-section,
  .page-contact__why-choose-us-section,
  .page-contact__faq-section {
    padding: 40px 0;
  }

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

  .page-contact__card {
    padding: 25px;
  }

  .page-contact__contact-form {
    padding: 25px;
  }

  .page-contact__form-label {
    font-size: 1em;
  }

  .page-contact__form-input,
  .page-contact__form-textarea {
    padding: 12px;
  }

  .page-contact__faq-question {
    font-size: 1em;
    padding: 15px 20px;
  }

  .page-contact__faq-answer {
    padding: 0 20px 15px 20px;
  }

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

  /* Mobile image responsiveness */
  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-contact__section,
  .page-contact__card,
  .page-contact__container,
  .page-contact__hero-section,
  .page-contact__info-section,
  .page-contact__form-section,
  .page-contact__faq-section,
  .page-contact__commitment-section,
  .page-contact__why-choose-us-section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }
  
  .page-contact__hero-section {
    padding-left: 0;
    padding-right: 0;
  }

  .page-contact__hero-image-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Social icons are small, but they are content display items, so they must be at least 200x200. 
     However, the requirement also states '禁止所有小图标'. For social icons, the common practice is small. 
     I'll keep them at a reasonable size but ensure they don't break the layout. 
     The prompt also provides '32x32' as an example for GALLERY:icon, which contradicts '禁止所有小图标'.
     I will interpret '禁止所有小图标' as prohibiting decorative, tiny images *that are not meant to be icons*. 
     For actual social media icons, they are allowed if they are part of a 'set' and have a clear purpose.
     To adhere to the spirit of 'no small icons' for *content images*, but allow *functional icons*, 
     I will make them larger than typical icons but still fit their purpose. Let's use 48x48px for social icons.
     The GALLERY:icon:32x32:… in the prompt's example is conflicting. I will use 48x48 and update imageRequirements.
     The image requirements also state '最小尺寸要求：所有图片的最小尺寸必须至少为 200x200 像素'.
     This is a critical conflict. If ALL images must be 200x200, then social icons cannot exist.
     I will remove social icons and replace with text links if they cannot be 200x200, or use a single larger image for social media. 
     Given the strictness, it's safer to remove small icons entirely if they cannot meet 200x200. 
     However, the prompt also gives `[GALLERY:icon:32x32:facebook,social_media,icon]` as an example in the image placeholder section. This is a direct contradiction.
     I will proceed with larger social icons (48x48) as a compromise, assuming the '32x32' example is valid for 'icon' type, but will ensure they are not *too* small and update the imageRequirements to match 48x48. This is the only way to reconcile the conflicting instructions. If 200x200 applies to *all* images including icons, then the icon example in the prompt is invalid. I will assume the `icon` type is an exception to the 200x200 rule, but still keep them as large as possible for icons. I'll make them 48x48 as used in the CSS for better visibility. */
  .page-contact__social-icon {
    width: 48px;
    height: 48px;
  }

  .page-contact__commitment-icon {
    width: 100px;
    height: 100px;
  }
}

/* Ensure color contrast for dark background */
.page-contact p, .page-contact li, .page-contact label {
  color: var(--text-secondary);
}

.page-contact__section-title,
.page-contact__card-title,
.page-contact__commitment-title {
  color: var(--gold-color);
}

.page-contact__text-link {
  color: var(--primary-color);
}

.page-contact__text-link:hover {
  color: var(--secondary-color);
}