/* CONTACT US PAGE SPECIFIC STYLES */

.section-intro {
  background-image: url('../images/mayan-temple-sun-jungle-landscape-7921.webp');
  background-size: cover;
  background-position: center;
  border-left: 6px solid var(--color-primary);
}

.card.section-form {
  background: linear-gradient(120deg, #221e2b 80%, #2d2047 100%);
  box-shadow: 0 8px 40px rgba(69,38,7,0.20);
}
.contact-form {
  display: grid;
  gap: var(--space-4);
  max-width: 520px;
  margin: 0 auto;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-row label {
  font-family: var(--font-family-heading);
  font-weight: 600;
  color: var(--color-primary);
}
.form-info,
.form-accessibility {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
  margin-bottom: var(--space-1);
}
.form-accessibility {
  font-style: italic;
}
.form-success,
.form-error {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: bold;
}
.form-success { background: var(--color-success); color: #fff; }
.form-error   { background: var(--color-danger); color: #fff; }

.section-helpline {
  background: linear-gradient(120deg, #211d2a 80%, #2e233f 100%);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.contact-label {
  font-weight: bold;
  color: var(--color-primary);
}
.contact-meta { color: var(--color-gray-300); font-size: var(--font-size-sm); }
.chatbot-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.chatbot-launch {
  background: linear-gradient(90deg,#b5852b 70%, #77672f 100%);
  color: #fff;
  font-family: var(--font-family-heading);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  cursor: pointer;
}
.chatbot-launch:hover,
.chatbot-launch:focus-visible {
  background: linear-gradient(90deg,#c6a140 70%, #504124 100%);
  box-shadow: var(--shadow-md);
  outline: 2px solid var(--color-primary);
}
.myth-bot-icon {
  font-size: 1.4em;
  vertical-align: -0.1em;
}

.section-faq {
  background: linear-gradient(120deg, #221e2b 85%, #342a4b 100%);
}
.faq-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.faq-list details {
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(34,30,43,.09);
  cursor: pointer;
  border: none;
}
.faq-list summary {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  outline: none;
  cursor: pointer;
  list-style: none;
}
.faq-list details[open] > summary {
  color: var(--color-success);
}
.faq-answer {
  color: var(--color-gray-100);
  font-size: var(--font-size-md);
  margin-top: var(--space-2);
  padding-left: var(--space-2);
}

.section-map {
  background: linear-gradient(120deg, #1f1930 100%, #251930 100%);
  padding-bottom: var(--space-6);
}
.map-contact-outer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.map-contact-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.company-address {
  font-style: normal;
  color: var(--color-gray-100);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
}
.address-meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
}
.mini-map {
  min-width: 300px;
  max-width: 100%;
}

.section-community {
  background: linear-gradient(120deg, #211d2a 90%, #37296c 100%);
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
}
.social-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: var(--font-size-lg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.social-links a:hover, .social-links a:focus-visible {
  background: var(--color-primary);
  color: #fff;
}
.social-icon {
  width: 1.6em;
  height: 1.6em;
  display: inline-flex;
}

.section-press {
  background: linear-gradient(120deg, #27213d 80%, #382a50 100%);
  font-size: var(--font-size-md);
}
.section-press a {
  text-decoration: underline;
  color: var(--color-primary);
  font-weight: bold;
}
.section-press a:hover, .section-press a:focus-visible {
  color: var(--color-success);
}

@media (max-width: 900px) {
  .map-contact-inner {
    flex-direction: column;
    gap: var(--space-5);
    align-items: stretch;
  }
  .mini-map {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 700px) {
  .section-intro, .section-form, .section-helpline, .section-faq, .section-map, .section-community, .section-press {
    padding: var(--space-4) var(--space-2);
  }
  .contact-form {
    max-width: 100%;
  }
  .map-contact-inner {
    flex-direction: column;
    gap: var(--space-3);
  }
  .mini-map {
    width: 100%;
    min-width: unset;
    max-width: 100vw;
  }
  .social-links {
    flex-direction: column;
    gap: var(--space-2);
  }
}

.contact-title {
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
  text-align: center;
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
}