/* ===== Support the Mission Page (Page ID 1697) ===== */

/* Full background */
body.page-id-1697 {
  background: url('https://parttexas.com/wp-content/uploads/2025/08/hero-painscale-1920x900-4.png') no-repeat center center fixed;
  background-size: cover;
}

/* Main page spacing */
.support-mission-root {
  padding: 10px 20px 120px;
  transform: translateY(-120px);
}

/* Center content */
.page-section-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* White content card */
.page-section-card {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  padding: 60px 60px 70px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* Normal heading rules */
.page-section-card h1 {
  margin: 0 0 30px;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
}

/* Title plaque wrapper */
.support-mission-title-wrap {
  text-align: center;
  margin: 0 0 30px;
}

/* Title plaque */
.support-mission-title {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 12px 28px;
  border-radius: 20px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, #2fb34a 0%, #d7c94a 48%, #c94a43 100%);
  color: #fffdf7;
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,0.28),
    inset 0 -3px 8px rgba(0,0,0,0.10),
    0 8px 18px rgba(0,0,0,0.18);
}

/* Glossy shimmer */
.support-mission-title::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -35%;
  width: 18%;
  height: 160%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-24deg);
  animation: supportMissionTitleShimmer 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes supportMissionTitleShimmer {
  0% { left: -35%; opacity: 0; }
  10% { opacity: 1; }
  24% { left: 115%; opacity: 0; }
  100% { left: 115%; opacity: 0; }
}

/* Paragraphs */
.page-section-card p {
  font-size: 20px;
  line-height: 1.7;
  margin: 0 0 24px;
  text-align: center;
}

/* Button wrap */
.support-mission-button-wrap {
  text-align: center;
  margin: 38px 0 28px;
}

/* Gradient button */
.support-mission-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 20px 40px;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  color: #111;
  border-radius: 24px;
letter-spacing: 0.3px;
  background: linear-gradient(90deg, #34d399 0%, #facc15 50%, #fb7185 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
background-size: 200% 100%;
animation: buttonGradientShift 6s ease infinite;
}

.support-mission-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(255, 255, 255, 0.5);
}

/* Button shimmer */
.support-mission-button::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -30%;
  width: 22%;
  height: 140%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.18) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-22deg);
  animation: supportMissionShimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes supportMissionShimmer {
  0% { left: -32%; opacity: 0; }
  8% { opacity: 1; }
  22% { left: 112%; opacity: 0; }
  100% { left: 112%; opacity: 0; }
}
@keyframes buttonGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Form area */
.support-mission-form-area {
  margin-top: 36px;
  text-align: center;
}

/* Mobile */
@media (max-width: 768px) {
  .support-mission-root {
    padding: 90px 16px 90px;
    transform: none;
  }

  .page-section-card {
    padding: 38px 22px 46px;
    border-radius: 22px;
  }

  .page-section-card p {
    font-size: 18px;
  }

  .support-mission-button {
    padding: 18px 26px;
    font-size: 20px;
  }

  .support-mission-title {
    padding: 8px 14px;
    font-size: clamp(15px, 4.8vw, 20px);
    white-space: normal;
  }
}