/*
 * Heart of Hope — Contact Page
 * Sanctuary‑Soft Edition
 * Scoped to: body.page-template-page-contact
 */

/* ============================================================
   GLOBAL SAFETY (Fixes mobile overflow + ensures consistency)
   ============================================================ */

body.page-template-page-contact {
  overflow-x: hidden;
}

body.page-template-page-contact *,
body.page-template-page-contact *::before,
body.page-template-page-contact *::after {
  box-sizing: border-box;
}

/* ============================================================
   CONTAINER (Prayer Wall Matching)
   ============================================================ */

body.page-template-page-contact .hoh-container {
  background: rgba(240, 235, 255, 0.65);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);

  border-radius: 36px;
  padding: 3.5rem 2.25rem 4rem;
  margin: 2.5rem auto;
  max-width: 900px;

  box-shadow:
    0 0 60px rgba(180, 150, 255, 0.28),
    0 0 140px rgba(200, 180, 255, 0.22),
    0 14px 48px rgba(0,0,0,0.06);

  position: relative;
  overflow: hidden;
}

/* Soft vignette halo */
body.page-template-page-contact .hoh-container::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(
    circle at top center,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above glow */
body.page-template-page-contact .hoh-page-inner,
body.page-template-page-contact .hoh-contact-card {
  position: relative;
  z-index: 2;
}

/* ============================================================
   HEADER
   ============================================================ */

body.page-template-page-contact .hoh-banner-title {
  font-family: var(--hoh-font-serif);
  font-size: 2.4rem;
  color: #472f85;
  text-align: center;
  margin-bottom: 0.75rem;
}

body.page-template-page-contact .hoh-banner-subtext {
  font-family: var(--hoh-font-serif);
  font-size: 1.2rem;
  text-align: center;
  color: var(--hoh-text-muted);
  opacity: 0.85;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

/* ============================================================
   CONTACT CARDS
   ============================================================ */

body.page-template-page-contact .hoh-contact-card {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: 2rem;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  max-width: 760px;
  margin: 2.5rem auto;
  position: relative;
}

/* Soft halo behind each card */
body.page-template-page-contact .hoh-contact-card::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    circle at center,
    rgba(128, 90, 160, 0.08),
    rgba(128, 90, 160, 0) 70%
  );
  z-index: -1;
}

/* Card titles */
body.page-template-page-contact .hoh-card-title {
  font-family: var(--hoh-font-serif);
  font-size: 1.6rem;
  color: #472f85;
  margin-bottom: 1rem;
  text-align: center;
}

/* ============================================================
   FORM
   ============================================================ */

body.page-template-page-contact .hoh-contact-form,
body.page-template-page-contact .hoh-contact-card form {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

body.page-template-page-contact .hoh-contact-form label {
  display: block;
  font-family: var(--hoh-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--hoh-purple-dark);
}

body.page-template-page-contact .hoh-contact-form input,
body.page-template-page-contact .hoh-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 1.25rem;

  border: 1px solid rgba(128, 90, 160, 0.25);
  border-radius: 12px;

  font-family: var(--hoh-font-sans);
  font-size: 1rem;

  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.page-template-page-contact .hoh-contact-form input:focus,
body.page-template-page-contact .hoh-contact-form textarea:focus {
  border-color: rgba(128, 90, 160, 0.55);
  box-shadow: 0 0 0 3px rgba(128, 90, 160, 0.15);
  outline: none;
}

body.page-template-page-contact .hoh-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* ============================================================
   SUCCESS MESSAGE
   ============================================================ */

body.page-template-page-contact .hoh-success-message {
  background: rgba(200, 255, 210, 0.55);
  border-left: 4px solid #4caf50;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 2rem;

  font-family: var(--hoh-font-sans);
  font-size: 1rem;
  color: #2e7d32;
}

/* ============================================================
   BUTTONS
   ============================================================ */

body.page-template-page-contact .hoh-button {
  background: linear-gradient(135deg, #bfcdf0, #8aa7d6);
  color: white;
  border: none;
  padding: 12px 26px;
  border-radius: 12px;

  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

body.page-template-page-contact .hoh-button:hover {
  background: linear-gradient(135deg, #aebee8, #7b97c4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

body.page-template-page-contact .hoh-button:active {
  transform: scale(0.96);
}

/* ============================================================
   ALTERNATE CONTACT TEXT
   ============================================================ */

body.page-template-page-contact .hoh-contact-alt {
  text-align: center;
  margin-top: 2rem;
  font-family: var(--hoh-font-sans);
  font-size: 0.95rem;
  color: var(--hoh-text-muted);
}

body.page-template-page-contact .hoh-contact-alt strong {
  color: var(--hoh-purple-dark);
}

/* ============================================================
   MOBILE (Matches Prayer Wall Rhythm)
   ============================================================ */

@media (max-width: 900px) {
  body.page-template-page-contact .hoh-container {
    padding: 2rem 1.25rem 2.75rem;
    border-radius: 28px;
    max-width: 100%;
    width: 100%;
    margin: 1.5rem auto;
  }

  body.page-template-page-contact .hoh-contact-card {
    max-width: 100%;
    margin: 1.75rem auto;
    padding: 1.5rem;
  }
}