/* =====================================================
   CONTACT PAGE STYLES
   Used by: page-contact.php
   Extends: archive-styles.css (reuses .archive-* classes)
===================================================== */

/* ── Contact hero gradient overlay (same as single-hero-banner) ── */
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(179deg,
      rgba(15, 77, 179, 1) 0%,
      rgba(255, 255, 255, 0) 80%);
  z-index: 1;
  pointer-events: none;
  height: 200px;
}

.contact-hero .archive-hero-overlay,
.contact-hero .container-xl {
  position: relative;
  z-index: 2;
}

/* ── Hero — SVG wave divider as ::after pseudo-element ── */
/*
 * Matches the same technique used by .astrology-section::after
 * so the devider.svg wave sits at the bottom of the hero,
 * overlapping the contact form section below it.
 */
.contact-hero {
  overflow: visible;
  /* allow ::after to peek out below */
}

.contact-hero::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 100px;
  background-image: url('../images/devider.svg');
  background-size: contain;
  background-position: center bottom;
  background-repeat: repeat-x;
  z-index: 10;
  pointer-events: none;
}

/* ── Contact Form Section ───────────────────────────── */
/*
 * Sits below the hero ::after wave — z-index 5 keeps the
 * yellow box behind the wave tip but above page content.
 */
.contact-form-section {
  position: relative;
  z-index: 10;
  margin-top: -110px;
  padding-bottom: 60px;
}

.contact-main-box {
  /* inherits .archive-contact-box styles */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
}

/* Address value — smaller font to fit multi-line Sinhala text */
.contact-address-value {
  font-size: clamp(0.85rem, 1.4vw, 1rem) !important;
  line-height: 1.7;
}

/* ── Map Section ─────────────────────────────────────── */
.contact-map-section {
  padding: 0 0 80px;
}

.contact-map-box {
  /* inherits .archive-contact-box — yellow bg, border, radius */
}

.contact-map-embed {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  line-height: 0;
}

.contact-map-embed iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1200px) {
  .contact-form-section {
    margin-top: 20px;
  }
}

@media (max-width: 991.98px) {
  .contact-hero::after {
    height: 150px;
  }

  .contact-map-embed iframe {
    height: 300px;
  }
}

@media (max-width: 767.98px) {
  .contact-hero::after {
    height: 100px;
  }

  .contact-map-embed iframe {
    height: 260px;
  }
}

@media (max-width: 575.98px) {
  .contact-hero::after {
    height: 80px;
  }

  .contact-form-section {
    padding-bottom: 40px;
  }

  .contact-map-section {
    padding-bottom: 60px;
  }

  .contact-map-embed iframe {
    height: 220px;
  }
}