/* =====================================
   LOCK SITE TO LIGHT MODE
===================================== */
html { color-scheme: light; }

body{
  background-color:#f1f1f1;
  color:#000;
}

/* =====================================
   BRAND COLORS
===================================== */
.vfim-gold{
  background-color:#d4af37 !important;
  color:#2b1b00 !important;
}

.vfim-purple{
  background-color:#4b0082 !important;
  color:#fff !important;
}

/* =====================================
   GLOBAL ROUNDING / CARDS
===================================== */
.section-card,
.w3-card{
  border-radius:20px !important;
}

.section-card{
  margin-top:16px;
  padding:16px;
  background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,0.08);
}

/* =====================================
   HEADER (RESPONSIVE LOGO + TITLE)
   Matches your About page layout
===================================== */
.global-header{
  padding-top:clamp(10px, 1.6vw, 20px) !important;
  padding-bottom:clamp(10px, 1.6vw, 20px) !important;
}

/* Logo badge stays WHITE and separated from purple */
.logo-badge{
  background:#fff;
  border:4px solid #d4af37;
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  border-radius:999px;

  width:clamp(110px, 12vw, 160px);
  height:clamp(110px, 12vw, 160px);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.header-logo{
  width:88%;
  height:auto;
  display:block;
}

.site-title{
  margin:0 !important;
  font-weight:800;
  line-height:1.1;
  text-shadow:2px 2px #333;
  font-size:clamp(1.6rem, 2.8vw, 3.1rem) !important;
}

.site-tagline{
  margin:10px 0 0 0 !important;
  font-weight:600;
  line-height:1.25;
  font-size:clamp(1rem, 1.6vw, 1.35rem) !important;
}

/* On desktop, title aligns left (optional—nice look) */
@media (min-width: 992px){
  .header-text{ text-align:left; }
}

/* =====================================
   SIDEBAR vs MAIN SPACING (DESKTOP GUTTER)
   Only works if your columns have:
   class="... sidebar-col" and class="... main-col"
===================================== */
@media (min-width: 992px){
  .sidebar-col{ padding-right:22px !important; }
  .main-col{ padding-left:22px !important; }
}

/* =====================================
   NAVBAR HOVER STATES
===================================== */
.w3-bar-item.w3-button.w3-hover-purple:hover{
  background-color:#4b0082 !important;
  color:#fff !important;
}

.w3-bar-item.w3-button.w3-hover-gold:hover{
  background-color:#d4af37 !important;
  color:#2b1b00 !important;
}

/* =====================================
   PASTOR IMAGE – CLASSIC FRAMED PORTRAIT
===================================== */
.pastor-large{
  width:100%;
  max-width:620px;
  height:auto;
  display:block;
  margin:32px auto;

  background:#fdfcf8;
  padding:14px;

  border:6px solid #5a2d82;
  outline:3px solid #d4af37;
  outline-offset:-10px;

  box-shadow:
    inset 0 0 0 3px #fff,
    0 10px 24px rgba(0,0,0,0.25);

  border-radius:10px;
}

/* =====================================
   FOOTER
===================================== */
footer{
  font-size:0.95em;
  letter-spacing:0.5px;
}
/* =====================================
   ABOUT PAGE: PASTOR PROFILE (smaller image)
===================================== */
.pastor-profile{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.pastor-profile img{
  width: 180px;        /* <<< controls size */
  max-width: 40vw;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

@media (max-width: 600px){
  .pastor-profile{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pastor-profile img{
    width: 220px;      /* a little bigger on phones */
    max-width: 85%;
  }
}
/* =====================================
   ABOUT PAGE: Meet Our Pastor (smaller image)
===================================== */
.pastor-profile{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.pastor-profile img{
  width: 180px !important;     /* <<< controls size */
  max-width: 40vw;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

@media (max-width: 700px){
  .pastor-profile{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pastor-profile img{
    width: 240px !important;
    max-width: 90%;
  }
}