/* ============================================================
   St. Peter's UCC — "The Hilltop" theme (Option A)
   Built on top of Bootstrap 5's grid/breakpoint system.
   ============================================================ */

:root{
  --stone:#EDE6D6;
  --parchment:#FAF7F0;
  --ink:#2B2A28;
  --green:#35472E;
  --brick:#8C3B2E;
  --brass:#B08D57;
}

body{
  background:var(--parchment);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}

h1, h2, h3, .display-serif{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
}

a{ color:var(--brick); }
a:hover{ color:#6f2e21; }

/* ---------- Navbar ---------- */
.navbar{
  background:var(--parchment);
  border-bottom:1px solid rgba(43,42,40,.1);
}
.navbar .navbar-brand{
  font-family:'Fraunces',serif;
  font-size:1.2rem;
  color:var(--ink);
}
.navbar .nav-link{
  color:var(--ink);
  font-size:.9rem;
  font-weight:500;
}
.navbar .nav-link.active,
.navbar .nav-link:hover{
  color:var(--brick);
}

.service-badge{
  background:var(--brick);
  color:var(--parchment);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:600;
  padding:.45rem 1rem;
  border-radius:3px;
  white-space:nowrap;
}

/* ---------- Hero (homepage) ---------- */
.hero{
  position:relative; overflow:hidden; min-height:72vh;
  display:flex; align-items:flex-end;
}
.hero img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(.85) contrast(1.02);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,20,16,.78) 0%, rgba(20,20,16,.25) 55%, rgba(20,20,16,.05) 100%);
}
.hero-content{ position:relative; z-index:2; color:var(--parchment); padding:4rem 0 3.5rem; }
.hero-content h1{ font-size:clamp(2.4rem,5vw,4rem); line-height:1.05; max-width:15ch; }
.hero-content p{ max-width:46ch; opacity:.9; font-size:1.05rem; }

/* ---------- Page header (interior pages) ---------- */
.page-header{
  background:var(--ink);
  color:var(--parchment);
  padding:4.5rem 0 3.5rem;
}
.page-header h1{ color:#fff; font-size:clamp(2rem,4vw,3rem); }
.page-header p{ color:var(--stone); opacity:.85; max-width:60ch; }

.divider{
  height:3px;
  background:linear-gradient(90deg, var(--brass), transparent 60%);
  width:80px;
  margin:1.25rem 0;
}

/* ---------- Buttons ---------- */
.btn-brick{ background:var(--brick); color:var(--parchment); border:none; padding:.7rem 1.6rem; font-weight:600; }
.btn-brick:hover{ background:#6f2e21; color:var(--parchment); }
.btn-outline-parchment{ border:1.5px solid var(--parchment); color:var(--parchment); padding:.7rem 1.6rem; font-weight:600; }
.btn-outline-parchment:hover{ background:var(--parchment); color:var(--ink); }

/* ---------- Sections ---------- */
section.band{ padding:5rem 0; }
.band-stone{ background:var(--stone); }

.card-mission{
  background:var(--parchment);
  border:1px solid rgba(43,42,40,.1);
  border-radius:2px;
  padding:2rem;
  height:100%;
}
.card-mission .num{ font-family:'Fraunces',serif; font-size:1.1rem; color:var(--brass); }

.feature-img{ aspect-ratio:4/5; object-fit:cover; width:100%; border-radius:2px; }
.feature-card h3{ font-size:1.3rem; margin-top:1rem; }

/* ---------- Activity listings ---------- */
.activity-card{
  background:var(--stone);
  border-radius:2px;
  padding:2rem;
  margin-bottom:1.5rem;
}
.activity-card .meta{
  font-size:.85rem;
  color:var(--green);
  font-weight:600;
  letter-spacing:.03em;
}
.activity-card .meta + .meta{ margin-top:.15rem; }
.activity-card h3{ font-size:1.4rem; margin:.5rem 0 .75rem; }

/* ---------- Calendar embed ---------- */
.calendar-frame-wrap{
  background:var(--stone);
  border-radius:4px;
  padding:1.25rem;
}
.calendar-frame-wrap iframe{
  width:100%;
  min-height:600px;
  border:0;
  border-radius:2px;
  background:#fff;
}

/* ---------- Upcoming event ---------- */
.event-card{
  background:var(--stone);
  border-radius:4px;
  padding:2.5rem;
}
.event-date{
  background:var(--brick);
  color:var(--parchment);
  border-radius:4px;
  min-width:96px;
  text-align:center;
  padding:1rem;
  flex-shrink:0;
}
.event-date .month{ display:block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.event-date .day{ display:block; font-family:'Fraunces',serif; font-size:2.4rem; line-height:1; margin-top:.15rem; }
.event-meta{ color:var(--green); font-weight:600; font-size:.92rem; }
.event-meta .bi{ margin-right:.3rem; color:var(--brick); }
.event-icons{ display:flex; flex-wrap:nowrap; align-items:center; gap:.75rem; margin:1rem 0; }
.event-icons svg{ width:20px; height:20px; flex-shrink:0; color:var(--brass); }
.activity-card.activity-featured{
  background:var(--brick);
  color:var(--parchment);
}
.activity-card.activity-featured .meta{ color:var(--stone); }
.activity-card.activity-featured h3{ color:#fff; }
.activity-card.activity-featured p{ color:var(--stone); }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:var(--stone); padding:3.5rem 0 2rem; }
footer a{ color:var(--stone); text-decoration:none; }
footer a:hover{ color:var(--brass); }
footer h5{ font-family:'Fraunces',serif; color:var(--parchment); }
footer .bi{ color:var(--brass); margin-right:.5rem; }