/* ==========================================================================
   Hawley Memorial Presbyterian Church — theme for Bootstrap 5.3
   Option 4: option 2 ("Stone & Trim") recolored from the wedding photo of the
   church front (white siding, sage gable trim, gray shingles, fieldstone,
   the groom's walnut-brown suit).
   ========================================================================== */

:root {
  /* Wedding-photo palette: five colors */
  --hm-walnut: #3A2F29;       /* groom's suit: text, top bar, footer */
  --hm-porch: #F7F6F2;        /* white siding and porch columns */
  --hm-gable: #5E7356;        /* sage gable trim, deepened for contrast (primary) */
  --hm-shingle: #A9A59A;      /* gray roof shingles */
  --hm-stone: #B3A07F;        /* fieldstone porch wall and chimneys */

  /* Tints of the above (not extra colors) */
  --hm-sage-tint: #ECEFE8;
  --hm-stone-tint: #F3EFE7;

  --hm-font-display: "Alegreya", Georgia, "Times New Roman", serif;
  --hm-font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;

  /* Bootstrap overrides */
  --bs-primary: var(--hm-gable);
  --bs-primary-rgb: 94, 115, 86;
  --bs-secondary: var(--hm-shingle);
  --bs-secondary-rgb: 169, 165, 154;
  --bs-warning: var(--hm-stone);
  --bs-warning-rgb: 179, 160, 127;
  --bs-dark: var(--hm-walnut);
  --bs-dark-rgb: 58, 47, 41;
  --bs-light: var(--hm-porch);
  --bs-light-rgb: 247, 246, 242;

  --bs-body-font-family: var(--hm-font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--hm-walnut);
  --bs-body-color-rgb: 58, 47, 41;
  --bs-body-bg: var(--hm-porch);
  --bs-emphasis-color: var(--hm-walnut);
  --bs-heading-color: var(--hm-walnut);
  --bs-secondary-color: #645D52;
  --bs-link-color: var(--hm-gable);
  --bs-link-color-rgb: 94, 115, 86;
  --bs-link-hover-color: #44553E;
  --bs-link-hover-color-rgb: 68, 85, 62;
  --bs-border-color: #DFDAD0;
  --bs-focus-ring-color: rgba(179, 160, 127, .5);

  /* Patterns (inline SVG): the bracket fan over the side door, and fieldstone */
  --hm-fan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cg fill='none' stroke='%23B3A07F' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 16H44M76 16H120'/%3E%3Cpath d='M60 16C55 12 50 7 47 2M60 16V2M60 16C65 12 70 7 73 2'/%3E%3Cpath d='M46 16H74' stroke='%235E7356' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --hm-fieldstone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90' viewBox='0 0 140 90'%3E%3Cg fill='none' stroke='%235E7356' stroke-width='1.3'%3E%3Cpath d='M4 6c10-4 28-3 34 2s-2 14-16 14S-2 12 4 6z'/%3E%3Cpath d='M48 4c14-2 30 0 34 6s-6 10-20 10-18-12-14-16z'/%3E%3Cpath d='M92 8c12-6 38-4 42 4s-10 12-26 11-22-10-16-15z'/%3E%3Cpath d='M10 32c16-3 34-1 36 7s-12 11-26 10-14-15-10-17z'/%3E%3Cpath d='M58 30c10-3 22-2 26 5s-4 13-16 13-16-14-10-18z'/%3E%3Cpath d='M96 34c12-4 34-2 36 6s-10 10-24 10-18-12-12-16z'/%3E%3Cpath d='M2 62c12-4 26-2 30 5s-8 12-20 11-14-13-10-16z'/%3E%3Cpath d='M42 60c16-3 36-2 38 6s-14 12-28 11-14-14-10-17z'/%3E%3Cpath d='M92 62c10-3 26-3 30 4s-6 13-18 13-18-13-12-17z'/%3E%3C/g%3E%3C/svg%3E");
}

body {
  font-size: var(--bs-body-font-size);
  -webkit-font-smoothing: antialiased;
}

/* Typography ------------------------------------------------------------ */

h1, h2, h3, h4, .display-font {
  font-family: var(--hm-font-display);
  font-weight: 600;
  line-height: 1.15;
}
h2 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.375rem, 1.3rem + .3vw, 1.5rem); }

.eyebrow {
  display: inline-block;
  font-family: var(--hm-font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-gable);
  margin-bottom: .5rem;
}
.text-bg-dark .eyebrow,
.on-dark .eyebrow { color: var(--hm-stone); }

.lead { font-size: 1.1875rem; }

a { text-underline-offset: .2em; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  background: var(--hm-walnut); color: #fff; padding: .5rem 1rem; border-radius: .25rem;
}
.skip-link:focus { top: 1rem; color: #fff; }

:focus-visible { outline: 3px solid var(--hm-stone); outline-offset: 2px; }

/* Buttons --------------------------------------------------------------- */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-padding-y: .65rem;
  --bs-btn-border-radius: 2rem;
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(179, 160, 127, .45);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .4rem; }
.btn-primary {
  --bs-btn-bg: var(--hm-gable);
  --bs-btn-border-color: var(--hm-gable);
  --bs-btn-hover-bg: #506349;
  --bs-btn-hover-border-color: #506349;
  --bs-btn-active-bg: #44553E;
  --bs-btn-active-border-color: #44553E;
}
.btn-stone {
  --bs-btn-color: var(--hm-walnut);
  --bs-btn-bg: var(--hm-stone);
  --bs-btn-border-color: var(--hm-stone);
  --bs-btn-hover-color: var(--hm-walnut);
  --bs-btn-hover-bg: #C1AE8D;
  --bs-btn-hover-border-color: #C1AE8D;
  --bs-btn-active-bg: #9E8B6B;
  --bs-btn-active-border-color: #9E8B6B;
}
.btn-outline-primary {
  --bs-btn-color: var(--hm-gable);
  --bs-btn-border-color: var(--hm-gable);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hm-gable);
  --bs-btn-hover-border-color: var(--hm-gable);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #506349;
  --bs-btn-active-border-color: #506349;
}
.btn-outline-light {
  --bs-btn-hover-color: var(--hm-walnut);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(179, 160, 127, .25); }

.live-dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: #E5484D; margin-right: .4rem; vertical-align: .05em;
  box-shadow: 0 0 0 0 rgba(229, 72, 77, .6);
  animation: hm-pulse 2s infinite;
}
@keyframes hm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); }
  70% { box-shadow: 0 0 0 .5rem rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

/* Top bar + header ------------------------------------------------------ */

.topbar {
  background: var(--hm-walnut);
  color: #E9E4DC;
  font-size: .875rem;
}
.topbar a { color: #E9E4DC; text-decoration: none; }
.topbar a:hover { color: var(--hm-stone); }
.topbar .bi { color: var(--hm-stone); }
.topbar .social a { font-size: 1.05rem; margin-left: .85rem; }

.site-header {
  background: rgba(247, 246, 242, .97);
  border-bottom: 1px solid var(--bs-border-color);
  /* no backdrop-filter here: it would trap the fixed offcanvas menu inside the header */
}
.navbar-brand { line-height: 1; padding: .35rem 0; }
.brand-name {
  display: block;
  font-family: var(--hm-font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  color: var(--hm-walnut);
}
.brand-sub {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hm-gable);
  margin-top: .3rem;
}

.site-header .nav-link {
  font-weight: 600;
  color: var(--hm-walnut);
  padding: .5rem .9rem !important;
  position: relative;
}
.site-header .nav-link:hover { color: var(--hm-gable); }
.site-header .nav-link.active { color: var(--hm-walnut); }
.site-header .nav-link.active::after,
.site-header .nav-link:hover::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .2rem;
  height: 3px; border-radius: 2px; background: var(--hm-stone);
}
.site-header .nav-link:hover::after { opacity: .5; }
.site-header .nav-link.active::after { opacity: 1; }
.navbar-toggler { border: 0; font-size: 1.75rem; color: var(--hm-walnut); }
.offcanvas { background: var(--hm-porch); }
@media (max-width: 991.98px) {
  .site-header .nav-link.active::after,
  .site-header .nav-link:hover::after { left: 0; right: auto; width: 2rem; bottom: 0; }
  .site-header .nav-link { padding-left: 0 !important; font-size: 1.125rem; }
}

/* Gable fan divider + trim edge decorations --------------------------------------- */

.gable-divider {
  height: 18px;
  width: 120px;
  background: var(--hm-fan) no-repeat center / 120px 18px;
  margin: .6rem 0 1.5rem;
}
.text-center .gable-divider,
.gable-divider.mx-auto { margin-left: auto; margin-right: auto; }

.trim-edge {
  height: 8px;
  background: linear-gradient(180deg,
    var(--hm-gable) 0 5px, var(--hm-porch) 5px 6px, var(--hm-stone) 6px 8px);
}

.pattern-stone { position: relative; isolation: isolate; }
.pattern-stone::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hm-fieldstone) repeat;
  opacity: .09;
  pointer-events: none;
}

/* Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  /* Height follows the photo's shape so the spire tip and the couple both stay in frame */
  min-height: clamp(480px, 42vw, 660px);
  display: flex;
  align-items: flex-start;
  color: #fff;
  /* Text sits over the sky at upper left; the church, spire and couple stay clear on the right and below */
  background:
    radial-gradient(ellipse 55% 85% at 12% 40%, rgba(58, 47, 41, .78) 0%, rgba(58, 47, 41, .5) 45%, rgba(58, 47, 41, 0) 100%),
    linear-gradient(180deg, rgba(58, 47, 41, .25) 0%, rgba(58, 47, 41, 0) 30%, rgba(58, 47, 41, 0) 82%, rgba(58, 47, 41, .35) 100%),
    var(--hero-img, url("../images/hero.jpg")) 50% 0 / cover no-repeat,
    var(--hm-walnut);
  padding: clamp(2.5rem, 4.5vw, 4.5rem) 0 6rem;
}
.hero .container { max-width: 1320px; }
.hero-copy { max-width: 34rem; }
/* Phones: photo on top, welcome text below on walnut so neither covers the other */
@media (max-width: 767.98px) {
  .hero {
    min-height: 0;
    display: block;
    background: var(--hm-walnut);
    padding: calc(min(92vw, 420px) - 2rem) 0 5.5rem;
  }
  .hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: min(92vw, 420px);
    background:
      linear-gradient(180deg, rgba(58, 47, 41, 0) 0%, rgba(58, 47, 41, 0) 72%, var(--hm-walnut) 100%),
      var(--hero-phone-img, url("../images/hero-phone.jpg")) 50% 0 / cover no-repeat;
  }
  .hero .container { position: relative; }
}
.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
@media (min-width: 576px) { .hero h1 { white-space: nowrap; } }
.hero .mission {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  max-width: 38rem;
  color: #F5F3EE;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.hero .eyebrow { color: #E6D9C2; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.hero + .trim-edge { position: relative; z-index: 1; }

/* Worship times strip */
.times-strip { margin-top: -3rem; position: relative; z-index: 2; }

/* Window card ------------------------------------------------------------ */

.window-card {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-top: 4px solid var(--hm-gable);
  border-radius: 14px 14px 6px 6px;
  box-shadow: 0 10px 30px -18px rgba(58, 47, 41, .45);
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.window-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(179, 160, 127, .45);
}
.window-card.accent-stone { border-top-color: var(--hm-stone); }
.window-card.accent-sage { border-top-color: var(--hm-shingle); }
.window-card h3 { margin-bottom: .35rem; }

.time-card .icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--hm-sage-tint); color: var(--hm-gable);
  font-size: 1.35rem; margin-bottom: 1rem;
}
.time-card .time {
  font-family: var(--hm-font-display);
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--hm-gable);
}
.time-card .label { font-weight: 600; margin-top: .4rem; }
@media (max-width: 767.98px) {
  .time-card {
    display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem;
    text-align: left !important; padding: 1.1rem 1.25rem;
  }
  .time-card .icon { grid-row: span 3; margin: 0; }
  .time-card .time { font-size: 1.6rem; }
  .time-card .label { margin-top: .15rem; }
}

/* Sections -------------------------------------------------------------- */

.section { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; }
.bg-sage { background-color: var(--hm-sage-tint); }
.bg-stone { background-color: var(--hm-stone-tint); }
.bg-charcoal { background-color: var(--hm-walnut); color: #F1EEE8; }
.bg-charcoal h2, .bg-charcoal h3 { color: #fff; }

/* Gable-shaped image frame (echoes the porch roofline) */
.gable-frame {
  --gable: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%);
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 8px 8px 0;
  background: var(--hm-gable);
  clip-path: var(--gable);
}
.gable-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: polygon(50% 1.5%, 100% 25%, 100% 100%, 0 100%, 0 25%);
}
.gable-frame::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--hm-stone);
  box-shadow: inset 0 3px 0 var(--hm-porch);
}
.gable-frame.gable-sm { aspect-ratio: 3 / 4; padding: 5px 5px 0; }
.gable-frame.gable-sm::after { height: 8px; box-shadow: inset 0 2px 0 var(--hm-porch); }

/* Banner photos per page (2400 x 600 each; see README) */
.banner-about { --banner-img: url("../images/about-banner.jpg"); }
.banner-contact { --banner-img: url("../images/contact-banner.jpg"); }

/* Facebook feed inside the gable frame (homepage) */
.gable-frame.gable-feed { max-width: 400px; aspect-ratio: 3 / 4; }
.gable-feed-inner {
  height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  clip-path: polygon(50% 1.5%, 100% 25%, 100% 100%, 0 100%, 0 25%);
  padding-bottom: 14px; /* clears the fieldstone base */
}
.gable-feed-head {
  flex: 0 0 25%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; line-height: 1.2; padding-bottom: .6rem;
  background: var(--hm-sage-tint);
  border-bottom: 1px solid var(--bs-border-color);
}
.gable-feed-head .bi { font-size: 1.35rem; color: var(--hm-gable); margin-bottom: .2rem; }
.gable-feed-title { font-family: var(--hm-font-display); font-weight: 700; font-size: 1.2rem; color: var(--hm-walnut); }
.gable-feed-body { flex: 1; overflow: hidden; padding: .5rem; }
.gable-feed-body .fb-page, .gable-feed-body .fb-page span, .gable-feed-body iframe { width: 100% !important; }
.fb-page > .fb-xfbml-parse-ignore { margin: 0; }
.gable-feed-body .fb-xfbml-parse-ignore, .gable-feed-body .fb-fallback { min-height: 100%; height: 100%; }

/* Contact page */
.contact-card .icon {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--hm-sage-tint); color: var(--hm-gable);
  font-size: 1.2rem; margin-bottom: .85rem;
}
.contact-card h3 { font-size: 1.3rem; }
.contact-card p:last-child { margin-bottom: 0; }
.office-hours { list-style: none; padding: 0; margin: 0; }
.office-hours li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .85rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.office-hours li:last-child { border-bottom: 0; }
.office-hours strong { color: var(--hm-walnut); }

/* Event card */
.event-card { padding: 0; overflow: hidden; }
.event-card .event-date {
  background: var(--hm-walnut); color: #fff;
  text-align: center; padding: 1rem .75rem; min-width: 6.5rem;
}
.event-card .event-date .month {
  font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--hm-stone);
}
.event-card .event-date .day { font-family: var(--hm-font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.event-card .event-body { padding: 1.5rem; }

.badge-live {
  display: inline-flex; align-items: center;
  background: #FDECEC; color: #A3262A; font-weight: 600; font-size: .8125rem;
  border-radius: 2rem; padding: .3rem .75rem;
}

/* Verse card */
.verse-card {
  position: relative;
  background: #fff;
  border-left: 5px solid var(--hm-stone);
  border-radius: 6px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 10px 30px -18px rgba(58, 47, 41, .45);
}
.verse-card .bi-quote { font-size: 2.5rem; color: var(--hm-stone); line-height: 1; }
.verse-card .dbv-widget { font-family: var(--hm-font-display); font-size: 1.35rem; line-height: 1.45; }
.verse-card .dbv-widget a { color: var(--hm-gable); }
.verse-card .credit { font-size: .8125rem; color: #645D52; }
.verse-card .credit a { color: inherit; }

/* Facebook feed */
.fb-wrap {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  padding: .75rem;
  min-height: 300px;
  overflow: hidden;
}
.fb-wrap .fb-page, .fb-wrap .fb-page span, .fb-wrap .fb-page iframe { width: 100% !important; }
.fb-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .5rem; min-height: 280px; color: #645D52;
}
.fb-fallback .bi { font-size: 2.25rem; color: #1877F2; }

/* Map */
.map-frame { border-radius: 10px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 10px 30px -18px rgba(58, 47, 41, .5); }
.map-frame iframe { border: 0; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: .85rem; margin-bottom: 1rem; }
.contact-list .bi { color: var(--hm-gable); font-size: 1.25rem; line-height: 1.5; }

/* Interior page banner --------------------------------------------------- */

.page-banner {
  position: relative;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(58, 47, 41, .92) 0%, rgba(58, 47, 41, .7) 45%, rgba(58, 47, 41, .35) 100%),
    var(--banner-img, url("../images/contact-banner.jpg")) 50% 45% / cover no-repeat,
    var(--hm-walnut);
  padding: 4.5rem 0 3.5rem;
}
.page-banner h1 { color: #fff; font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); margin-bottom: .5rem; }
.page-banner .breadcrumb {
  --bs-breadcrumb-divider-color: #C4BDB2;
  --bs-breadcrumb-item-active-color: #F1EEE8;
  margin: 0; font-size: .9375rem;
}
.page-banner .breadcrumb a { color: var(--hm-stone); text-decoration: none; }
.page-banner .breadcrumb a:hover { text-decoration: underline; }

/* Interior content */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1.15rem; }

.pull-quote {
  border-left: 4px solid var(--hm-stone);
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--hm-font-display);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--hm-gable);
  border-radius: 0 6px 6px 0;
}
.pull-quote cite {
  display: block; font-family: var(--hm-font-body); font-style: normal;
  font-size: .875rem; color: #645D52; margin-top: .5rem;
}

.timeline { list-style: none; padding: 0; margin: 1.5rem 0 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 3.6rem; top: .4rem; bottom: .4rem; width: 2px;
  background: linear-gradient(var(--hm-gable), var(--hm-stone));
}
.timeline li { display: grid; grid-template-columns: 3.1rem 1fr; gap: 1.6rem; padding-bottom: 1.4rem; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: 3.2rem; top: .45rem; width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--hm-porch); border: 3px solid var(--hm-stone);
}
.timeline .year { font-family: var(--hm-font-display); font-weight: 700; font-size: 1.25rem; color: var(--hm-gable); line-height: 1.4; }

.pastor-card {
  display: flex; gap: 1.5rem; align-items: center;
  background: var(--hm-sage-tint);
  border-radius: 12px; padding: 1.5rem; margin: 2.5rem 0;
}
.pastor-card .gable-frame { width: 140px; flex: none; }
@media (max-width: 575.98px) { .pastor-card { flex-direction: column; text-align: center; } }

.eco-badge { display: flex; gap: 1.25rem; align-items: center; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 1.25rem; }
.eco-badge img { width: 120px; height: auto; flex: none; }

.sidebar > * + * { margin-top: 1.5rem; }
.sidebar .window-card { padding: 1.5rem; }
.sidebar .window-card h3 { font-size: 1.375rem; }
.times-list { list-style: none; padding: 0; margin: 0; }
.times-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.times-list li:last-child { border-bottom: 0; }
.times-list strong { color: var(--hm-gable); white-space: nowrap; }

/* CTA band -------------------------------------------------------------- */

.cta-band {
  background: var(--hm-gable);
  color: #fff;
  padding: 3.5rem 0;
}
.cta-band::before { opacity: .14; filter: brightness(0) invert(1); }
.cta-band h2 { color: #fff; margin: 0; }

/* Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--hm-walnut);
  color: #D9D3CA;
  border-top: 4px solid var(--hm-stone);
  font-size: .9375rem;
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.site-footer a { color: #F1EEE8; text-decoration: none; }
.site-footer a:hover { color: var(--hm-stone); text-decoration: underline; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: var(--hm-stone); }
.site-footer .footer-nav li { margin-bottom: .45rem; }
.site-footer .social a {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); margin-right: .4rem; font-size: 1.1rem;
}
.site-footer .social a:hover { background: var(--hm-stone); color: var(--hm-walnut); border-color: var(--hm-stone); text-decoration: none; }
.site-footer .eco img { width: 110px; border-radius: 4px; background: #fff; padding: 4px; }
.site-footer .copyright { border-top: 1px solid rgba(255, 255, 255, .12); color: #ADA59A; font-size: .8125rem; }

/* Motion preferences ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .window-card:hover { transform: none; }
}

/* Fixes */
.sidebar .window-card { height: auto; }
.page-banner .eyebrow { color: #E6D9C2; }
.prose .eyebrow + h2 { margin-top: 0; }
@media (max-width: 575.98px) { .eco-badge { flex-direction: column; text-align: center; } }

/* Contact map: taller on phones, wide on larger screens */
.map-wide { --bs-aspect-ratio: 75%; }
@media (min-width: 768px) { .map-wide { --bs-aspect-ratio: calc(9 / 21 * 100%); } }
.gable-feed-body .fb-page { height: 100%; }

/* CMS additions ---------------------------------------------------------- */

/* Rich text from the editor inside the verse widget and prose blocks */
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.prose ul, .prose ol:not(.timeline) { margin-bottom: 1.15rem; }
.pastor-bio p:last-child, .eco-badge p:last-child { margin-bottom: 0; }