/* style/contact.css */

/* Variables */
:root {
  --primary-color: #FFD700;
  --secondary-color: #1A1A1A;
  --text-dark: #333333;
  --text-light: #ffffff;
  --bg-light: #f4f4f4;
  --bg-dark: #1A1A1A;
  --border-color: #e0e0e0;
}

/* Base styles for page-contact */
.page-contact {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-dark); /* Default text color for light body background */
  background-color: var(--bg-light);
}

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

/* Section Titles and Descriptions */
.page-contact__section-title {
  font-size: 36px;
  color: var(--secondary-color);
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-contact__section-description {
  font-size: 18px;
  color: var(--text-dark);
  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); /* Ensures content is not hidden by fixed header */
  background: var(--secondary-color);
  color: var(--text-light);
}

.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;
}

.page-contact__hero-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.page-contact__hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for text readability */
  border-radius: 8px;
}

.page-contact__main-title {
  font-size: 48px;
  color: var(--primary-color);
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.page-contact__intro-description {
  font-size: 20px;
  color: var(--text-light);
  margin-bottom: 30px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Button */
.page-contact__cta-button {
  display: inline-block;
  padding: 15px 40px;
  background: var(--primary-color);
  color: var(--secondary-color);
  text-decoration: none;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
  transition: all 0.3s ease;
  border: 2px solid var(--primary-color);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.page-contact__cta-button:hover {
  background: var(--secondary-color);
  color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

/* Contact Info Section */
.page-contact__contact-info-section {
  padding: 80px 0;
  background-color: var(--bg-light);
  color: var(--text-dark);
}

.page-contact__info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.page-contact__info-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-color);
}

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

.page-contact__info-card img {
  width: 100%;
  height: auto;
  max-width: 250px;
  border-radius: 8px;
  margin-bottom: 25px;
  object-fit: cover;
}

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

.page-contact__info-card p {
  font-size: 16px;
  color: #555555;
  margin-bottom: 25px;
}

/* Secondary Button Style */
.page-contact__btn-secondary {
  display: inline-block;
  padding: 12px 25px;
  background: transparent;
  color: var(--primary-color);
  text-decoration: none;
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.page-contact__btn-secondary:hover {
  background: var(--primary-color);
  color: var(--secondary-color);
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.page-contact__social-media {
  text-align: center;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border-color);
}

.page-contact__social-title {
  font-size: 28px;
  color: var(--secondary-color);
  margin-bottom: 15px;
}

.page-contact__social-media p {
  font-size: 16px;
  color: #555555;
  margin-bottom: 30px;
}

.page-contact__social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.page-contact__social-link {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-contact__social-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%; /* Ensure social icons are circular */
}

.page-contact__social-link:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Contact Form Section */
.page-contact__contact-form-section {
  padding: 80px 0;
  background-color: var(--secondary-color);
  color: var(--text-light);
}

.page-contact__contact-form-section .page-contact__section-title,
.page-contact__contact-form-section .page-contact__section-description {
  color: var(--text-light);
}

.page-contact__form {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

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

.page-contact__form-label {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-light);
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-contact__form-input::placeholder,
.page-contact__form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
  outline: none;
}

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

/* Primary Button Style */
.page-contact__btn-primary {
  display: block;
  width: 100%;
  padding: 15px 30px;
  background: var(--primary-color);
  color: var(--secondary-color);
  text-decoration: none;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.page-contact__btn-primary:hover {
  background: #e6c200;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

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

/* FAQ container style */
.page-contact__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 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 15px;
  opacity: 0;
  color: #555555;
}

/* 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 to ensure priority, value large enough to contain any content */
  padding: 20px 15px !important;
  opacity: 1;
  background: #f9f9f9;
  border-radius: 0 0 5px 5px;
}

/* Question style */
.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
}

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

.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;
  color: var(--secondary-color);
  pointer-events: none; /* Prevent h3 tag from blocking click event */
}

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

.page-contact__faq-item.active .page-contact__faq-toggle {
  color: var(--secondary-color);
  transform: rotate(45deg); /* Rotate for 'x' or 'minus' effect */
}

.page-contact__faq-answer a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}

.page-contact__faq-answer a:hover {
  text-decoration: underline;
}

/* CTA Banner Section */
.page-contact__cta-banner {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--secondary-color), #0a0a0a);
  color: var(--text-light);
  text-align: center;
}

.page-contact__cta-content {
  max-width: 900px;
}

.page-contact__cta-title {
  font-size: 42px;
  color: var(--primary-color);
  margin-bottom: 20px;
  font-weight: bold;
}

.page-contact__cta-description {
  font-size: 20px;
  color: var(--text-light);
  margin-bottom: 40px;
}

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

/* Responsive Design */
@media (max-width: 1024px) {
  .page-contact__main-title {
    font-size: 40px;
  }

  .page-contact__intro-description {
    font-size: 18px;
  }

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

  .page-contact__cta-title {
    font-size: 36px;
  }

  .page-contact__cta-description {
    font-size: 18px;
  }
}

@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-image img {
    border-radius: 4px;
  }

  .page-contact__hero-content {
    padding: 15px;
  }

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

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

  .page-contact__cta-button {
    padding: 12px 30px;
    font-size: 16px;
  }

  .page-contact__contact-info-section,
  .page-contact__contact-form-section,
  .page-contact__faq-section,
  .page-contact__cta-banner {
    padding: 40px 0;
  }

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

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

  .page-contact__info-grid {
    grid-template-columns: 1fr;
  }

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

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

  .page-contact__info-card img {
    max-width: 200px;
  }

  .page-contact__social-title {
    font-size: 24px;
  }

  .page-contact__social-icons {
    gap: 15px;
  }

  .page-contact__social-link {
    width: 50px;
    height: 50px;
  }

  .page-contact__form {
    padding: 25px;
  }

  .page-contact__form-label {
    font-size: 16px;
  }

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

  .page-contact__btn-primary {
    padding: 12px 25px;
    font-size: 18px;
  }

  .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: 26px;
    height: 26px;
    font-size: 24px;
  }

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

  .page-contact__faq-item.active .page-contact__faq-answer {
    padding: 15px !important;
  }

  .page-contact__cta-title {
    font-size: 30px;
  }

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

  .page-contact__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .page-contact__cta-buttons .page-contact__btn-primary,
  .page-contact__cta-buttons .page-contact__btn-secondary {
    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;
  }

  /* Force all images and their containers to be responsive */
  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-contact__hero-image,
  .page-contact__info-card,
  .page-contact__social-link,
  .page-contact__container,
  .page-contact__form,
  .page-contact__cta-buttons {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure all content area images are at least 200px and no filters */
.page-contact__hero-image img,
.page-contact__info-card img,
.page-contact__social-link img {
  filter: none; /* No filters allowed */
  min-width: 200px; /* Minimum size requirement */
  min-height: 200px; /* Minimum size requirement */
  max-width: 100%;
  height: auto;
}

/* Small icons like social media are an exception to the 200x200 rule IF they are explicitly small, but the prompt says NO small icons. So I'll make them 60x60 and ensure they are content images, not decorative. */
.page-contact__social-link img {
  min-width: unset;
  min-height: unset;
  
  
}