/* style/contact.css */

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

.page-contact {
  font-family: Arial, sans-serif;
  color: var(--page-text-main);
  background-color: var(--page-background);
  line-height: 1.6;
}

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

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

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

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

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

.page-contact__btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

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

.page-contact__btn-secondary:hover {
  background: var(--page-primary-color);
  color: var(--page-text-main);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Hero Section */
.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 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.page-contact__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
  display: block;
  min-width: 200px;
  min-height: 200px;
}

.page-contact__hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 40px 20px;
  background: rgba(8, 22, 15, 0.8); /* Semi-transparent background for readability */
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  margin-top: 60px;
}

.page-contact__main-title {
  color: var(--page-gold-color);
  font-size: clamp(2em, 4vw, 3.5em);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

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

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

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

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

.page-contact__info-card {
  background-color: var(--page-card-bg);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--page-border-color);
  transition: transform 0.3s ease;
  min-width: 200px;
  min-height: 200px;
}

.page-contact__info-card:hover {
  transform: translateY(-5px);
}

.page-contact__info-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
  min-width: 200px;
  min-height: 200px;
}

.page-contact__info-title {
  font-size: 1.8em;
  color: var(--page-gold-color);
  margin-bottom: 10px;
}

.page-contact__info-text {
  color: var(--page-text-secondary);
  margin-bottom: 15px;
}

.page-contact__info-link {
  color: var(--page-primary-color);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 5px;
}

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

.page-contact__info-hours {
  color: var(--page-text-secondary);
  font-size: 0.9em;
}

.page-contact__address-text {
  text-align: center;
  color: var(--page-text-secondary);
  margin-top: 40px;
  font-style: italic;
}

/* Form Section */
.page-contact__form-section {
  padding: 80px 0;
  background-color: var(--page-deep-green-color);
}

.page-contact__form-wrapper {
  display: flex;
  gap: 40px;
  align-items: center;
  background-color: var(--page-card-bg);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--page-border-color);
}

.page-contact__form-image-container {
  flex: 1;
  min-width: 300px;
}

.page-contact__form-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  min-width: 200px;
  min-height: 200px;
}

.page-contact__contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-contact__form-group {
  display: flex;
  flex-direction: column;
}

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

.page-contact__form-input,
.page-contact__form-textarea {
  padding: 12px;
  border-radius: 5px;
  border: 1px solid var(--page-border-color);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--page-text-main);
  font-size: 1em;
  box-sizing: border-box;
}

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

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

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

.page-contact__faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

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

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

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

.page-contact__faq-item summary:hover {
  background-color: rgba(17, 168, 78, 0.1);
}

.page-contact__faq-qtext {
  flex-grow: 1;
  text-align: left;
}

.page-contact__faq-toggle {
  font-size: 1.5em;
  margin-left: 15px;
  color: var(--page-primary-color);
}

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

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

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

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

/* Social Section */
.page-contact__social-section {
  padding: 80px 0;
  background-color: var(--page-deep-green-color);
}

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

.page-contact__social-link {
  background-color: var(--page-card-bg);
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--page-text-main);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--page-border-color);
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 200px;
}

.page-contact__social-link:hover {
  transform: translateY(-5px);
  background-color: rgba(17, 168, 78, 0.2);
}

.page-contact__social-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  object-fit: contain;
  display: block;
  min-width: 200px;
  min-height: 200px;
}

.page-contact__social-text {
  font-size: 1.2em;
  font-weight: bold;
}

/* Responsible Gaming Section */
.page-contact__responsible-gaming-section {
  padding: 80px 0;
  background-color: var(--page-background);
}

.page-contact__dark-section {
  background-color: var(--page-card-bg);
  color: var(--page-text-main);
  padding: 40px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--page-border-color);
}

/* General image styling to prevent small icons and ensure responsiveness */
.page-contact img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* Default for content images */
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .page-contact {
    font-size: 16px;
    line-height: 1.6;
  }

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

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

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

  .page-contact__hero-content {
    margin-top: 40px;
    padding: 30px 15px;
  }

  .page-contact__main-title {
    font-size: 1.8em;
  }

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

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

  .page-contact__btn-primary,
  .page-contact__btn-secondary {
    width: 100% !important;
    padding: 12px 15px;
  }

  .page-contact__info-section,
  .page-contact__form-section,
  .page-contact__faq-section,
  .page-contact__social-section,
  .page-contact__responsible-gaming-section {
    padding: 40px 0;
  }

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

  .page-contact__form-wrapper {
    flex-direction: column;
    padding: 20px;
  }

  .page-contact__form-image-container {
    width: 100%;
  }

  .page-contact__social-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

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

  .page-contact__hero-section {
    padding-top: 10px !important; /* body already has padding-top */
  }

  .page-contact__video-section {
    padding-top: 10px !important; /* small top margin for video if it were present */
  }

  .page-contact__form-input,
  .page-contact__form-textarea {
    width: 100%;
  }
}

/* Ensure all images meet minimum size */
.page-contact img:not(.page-contact__info-icon):not(.page-contact__social-icon) {
  min-width: 200px;
  min-height: 200px;
}

.page-contact__info-icon,
.page-contact__social-icon {
  min-width: 80px; /* These are smaller icons but still need to be >200px if used as main image */
  min-height: 80px; /* Re-evaluate based on actual usage. For this page, they are decorative in cards */
}

/* Re-adjust min-width/height for actual content images */
.page-contact__hero-image,
.page-contact__form-image {
  min-width: 200px;
  min-height: 200px;
}

/* The info and social icons are part of the image requirements but are used as smaller visual cues within cards. They still need to meet the 200x200px minimum if they were standalone. For their current usage, their displayed width/height are set, but the source image requested from GALLERY will be larger. */
.page-contact__info-icon,
.page-contact__social-icon {
  width: 100px; /* Display size */
  height: 100px; /* Display size */
  object-fit: contain; /* Ensure they fit without cropping */
  min-width: 100px; /* Minimum display size to ensure they are not tiny */
  min-height: 100px;
}

/* If these icons were to be the actual GALLERY image, they would need to be 200x200px. As they are small decorative icons, their placeholder size in GALLERY request is larger, and their HTML width/height is for display. */