/* ============================================
   Bethel Presbyterian Church /about/pca Mobile Stylesheet
   ============================================ */

/* ---------------------
   Inline Icons (Logo, Beliefs, History)
   --------------------- */
.pca-logo img,
.beliefs-icon img,
.history-icon img {
  width: 3.6rem;              /* larger for mobile */
  height: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  transform: translateY(-6px);
  animation: iconFadeIn 1s ease-out forwards;
  animation-delay: 0.2s;
}

@keyframes iconFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------
   Section Headings
   --------------------- */
.pca-intro h2,
.pca-beliefs h2,
.pca-history h2 {
  font-size: 3.6rem;
  color: var(--primary-green);
  margin-bottom: 1.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;    /* centered headings */
  gap: 1rem;
  position: relative;
}

.pca-intro h2::after,
.pca-beliefs h2::after,
.pca-history h2::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--primary-green),
    var(--primary-complement)
  );                          /* subtle complement accent */
  margin: 1rem auto 0;
  border-radius: 2px;
}

/* ---------------------
   Subheadings
   --------------------- */
.pca-intro h3,
.pca-beliefs h3,
.pca-history h3 {
  font-size: 2.4rem;
  color: var(--primary-complement); /* accent color for subheads */
  margin-bottom: 1.5rem;
  text-align: center;
}

/* ---------------------
   Paragraphs
   --------------------- */
.pca-intro p,
.pca-beliefs p,
.pca-history p {
  font-size: 2rem;
  color: #555;
  line-height: 3rem;
  margin-bottom: 2rem;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------------
   Action Buttons (Mobile)
   --------------------- */
.action-button {
  display: block;
  font-family: 'Goudos', serif;
  font-weight: 700;
  font-size: 2rem;                 /* larger text for mobile */
  border-radius: 40px;             /* pill shape */
  padding: 1.4rem 2.8rem;          /* generous tap target */
  margin: 2rem auto;
  background: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark));
  box-shadow: 0 6px 14px rgba(0,0,0,0.2),
              0 0 10px rgba(0,128,0,0.35); /* subtle green glow */
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  animation: buttonFadeIn 1s ease-out forwards;
  animation-delay: 0.6s;
  text-align: center;
  max-width: 90%;
}

.action-button a {
  color: var(--white);
  text-decoration: none;
  display: block;
}

/* Entrance animation */
@keyframes buttonFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}