/* style/contact.css */
/* Body background color is var(--background) which is #08160F (dark). 
   Therefore, text colors should be light (#F2FFF6 for main, #A7D9B8 for secondary). */

.page-contact {
  background-color: var(--background, #08160F);
  color: var(--text-main, #F2FFF6);
  font-family: Arial, sans-serif;
  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;
  justify-content: center;
  padding-top: 10px; /* Small top padding, body handles --header-offset */
  padding-bottom: 60px;
  text-align: center;
  overflow: hidden;
}

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

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

.page-contact__hero-content {
  max-width: 800px;
  padding: 0 20px;
  z-index: 1;
}

.page-contact__main-title {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  font-weight: 700;
  color: var(--text-main, #F2FFF6);
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-contact__hero-description {
  font-size: 1.125rem;
  color: var(--text-secondary, #A7D9B8);
  margin-bottom: 30px;
}

.page-contact__section-title {
  font-size: clamp(1.8rem, 3.5vw + 1rem, 2.8rem);
  font-weight: 700;
  color: var(--text-main, #F2FFF6);
  text-align: center;
  margin-bottom: 20px;
}

.page-contact__section-description {
  font-size: 1rem;
  color: var(--text-secondary, #A7D9B8);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.page-contact__methods-section,
.page-contact__form-section,
.page-contact__benefits-section,
.page-contact__faq-section,
.page-contact__cta-section {
  padding: 60px 0;
}

.page-contact__method-grid,
.page-contact__benefits-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, #11271B);
  border: 1px solid var(--border, #2E7A4E);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: var(--text-main, #F2FFF6);
}

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

.page-contact__method-icon,
.page-contact__benefit-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-contact__method-title,
.page-contact__benefit-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-main, #F2FFF6);
  margin-bottom: 15px;
}

.page-contact__method-text,
.page-contact__benefit-text {
  font-size: 1rem;
  color: var(--text-secondary, #A7D9B8);
  margin-bottom: 20px;
}

.page-contact__contact-info {
  color: var(--gold, #F2C14E);
  font-weight: bold;
}

.page-contact__btn-primary,
.page-contact__btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-contact__btn-primary {
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 15px rgba(42, 209, 111, 0.4);
}

.page-contact__btn-primary:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
  box-shadow: 0 6px 20px rgba(42, 209, 111, 0.6);
}

.page-contact__btn-secondary {
  background: transparent;
  color: var(--glow, #57E38D);
  border: 2px solid var(--border, #2E7A4E);
}

.page-contact__btn-secondary:hover {
  background: rgba(87, 227, 141, 0.1);
  color: #ffffff;
  border-color: var(--glow, #57E38D);
}

.page-contact__cta-button {
  margin-top: 20px;
}

.page-contact__contact-form {
  max-width: 600px;
  margin: 40px auto 0 auto;
  background-color: var(--card-bg, #11271B);
  border: 1px solid var(--border, #2E7A4E);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

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

.page-contact__form-label {
  display: block;
  font-size: 1.1rem;
  color: var(--text-main, #F2FFF6);
  margin-bottom: 8px;
  font-weight: 600;
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--divider, #1E3A2A);
  border-radius: 8px;
  background-color: var(--background, #08160F);
  color: var(--text-main, #F2FFF6);
  font-size: 1rem;
  box-sizing: border-box;
}

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

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  border-color: var(--glow, #57E38D);
  outline: none;
  box-shadow: 0 0 0 3px rgba(87, 227, 141, 0.3);
}

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

.page-contact__submit-button {
  width: 100%;
  margin-top: 20px;
}

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

.page-contact__faq-item {
  background-color: var(--card-bg, #11271B);
  border: 1px solid var(--border, #2E7A4E);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main, #F2FFF6);
  background-color: var(--deep-green, #0A4B2C);
  transition: background-color 0.3s ease;
}

.page-contact__faq-question:hover {
  background-color: var(--main-color, #11A84E);
}

.page-contact__faq-item[open] .page-contact__faq-question {
  background-color: var(--main-color, #11A84E);
}

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

.page-contact__faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  margin-left: 15px;
  color: var(--glow, #57E38D);
}

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

.page-contact__faq-answer {
  padding: 20px 25px;
  font-size: 1rem;
  color: var(--text-secondary, #A7D9B8);
  border-top: 1px solid var(--divider, #1E3A2A);
}

.page-contact__faq-answer p {
  margin: 0;
}

.page-contact__dark-section {
  background-color: var(--deep-green, #0A4B2C);
  color: #ffffff;
  padding: 80px 0;
}

.page-contact__dark-section .page-contact__section-title,
.page-contact__dark-section .page-contact__section-description {
  color: #ffffff;
}

/* Responsive styles */
@media (max-width: 1024px) {
  .page-contact__hero-image-wrapper {
    max-height: 500px;
  }
}

@media (max-width: 768px) {
  .page-contact__hero-image-wrapper {
    max-height: 400px;
    margin-bottom: 20px;
  }
  
  .page-contact__hero-content {
    padding: 0 15px;
  }

  .page-contact__main-title {
    font-size: clamp(1.8rem, 7vw + 1rem, 2.5rem);
    margin-bottom: 15px;
  }

  .page-contact__hero-description {
    font-size: 1rem;
    margin-bottom: 25px;
  }

  .page-contact__section-title {
    font-size: clamp(1.6rem, 6vw + 1rem, 2.2rem);
    margin-bottom: 15px;
  }

  .page-contact__section-description {
    margin-bottom: 30px;
    padding: 0 15px;
  }

  .page-contact__methods-section,
  .page-contact__form-section,
  .page-contact__benefits-section,
  .page-contact__faq-section,
  .page-contact__cta-section {
    padding: 40px 0;
  }

  .page-contact__method-grid,
  .page-contact__benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-contact__card {
    padding: 25px;
  }

  .page-contact__method-icon,
  .page-contact__benefit-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
  }

  .page-contact__method-title,
  .page-contact__benefit-title {
    font-size: 1.3rem;
  }

  .page-contact__contact-form {
    padding: 30px 20px;
    margin: 20px auto 0 auto;
  }

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

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

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

  .page-contact__faq-answer {
    padding: 15px 20px;
    font-size: 0.95rem;
  }

  .page-contact__btn-primary,
  .page-contact__btn-secondary,
  .page-contact a[class*="button"],
  .page-contact a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .page-contact__cta-buttons,
  .page-contact__button-group,
  .page-contact__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap !important;
    gap: 10px;
  }

  .page-contact__cta-buttons {
    display: flex;
    flex-direction: column;
  }

  .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 {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-contact__dark-section {
    padding: 60px 0;
  }
}

/* Ensure all images in content areas are at least 200px wide */
.page-contact__method-icon,
.page-contact__benefit-icon {
  min-width: 100px; /* Small icons are forbidden, but these are decorative. The overall rule is for content images. */
  min-height: 100px;
}

/* Global image size enforcement for content images */
.page-contact__hero-image,
.page-contact__method-card img,
.page-contact__benefit-card img {
  min-width: 200px; /* Enforcing minimum size for content images */
  min-height: 200px;
  width: auto; /* Allow natural sizing if larger, or be constrained by container */
  height: auto;
}

/* Override for specific small icons that are decorative, if any, to allow them to be smaller than 200px, 
   but the prompt explicitly forbids small icons universally. So all images must be >= 200px. 
   The icons above are set to 100x100 for visual design, but the prompt's global rule for all images is >= 200x200. 
   I will adjust the icon sizes to meet the 200x200 minimum. */

.page-contact__method-icon,
.page-contact__benefit-icon {
  width: 200px; /* Adjusted to meet minimum size requirement */
  height: 200px; /* Adjusted to meet minimum size requirement */
  object-fit: contain; /* Ensure icons fit without cropping */
}

/* Text contrast fixes for safety if needed, though colors are predefined */
.page-contact__contrast-fix {
  background: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #e0e0e0 !important;
}

.page-contact__text-contrast-fix {
  color: #333333 !important;
  text-shadow: none !important;
}