/* =============================================================
   St. John's Christian Church — shared theme
   New header + footer for every page, plus the new homepage top.
   Link this AFTER styles.css on each page.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  --sj-brown: #2E1C12;
  --sj-brown-2: #3D2718;
  --sj-gold: #B98A3E;
  --sj-gold-light: #D9B56C;
  --sj-cream: #FBF7F0;
  --sj-ink: #2A1D14;
  --sj-text: #3B2B1F;
  --sj-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sj-script: 'Great Vibes', 'Dancing Script', cursive;
}

/* styles.css sets overflow-x:hidden on html and body, which quietly stops
   "sticky" headers from sticking. "clip" hides sideways overflow the same
   way without breaking sticky. */
html, body { overflow-x: clip; }

/* The old header/footer stay in each page's code (so app.js keeps
   working) but are hidden — theme.js draws the new ones. */
.site-header, .site-footer { display: none !important; }

/* =============================================================
   HEADER
   ============================================================= */
.sj-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--sj-cream);
  box-shadow: 0 1px 0 rgba(185, 138, 62, 0.35), 0 6px 18px rgba(46, 28, 18, 0.06);
}
.sj-header-inner {
  position: relative;
  max-width: 1240px; margin: 0 auto;
  height: 84px; padding: 0 24px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}

/* Round logo badge that hangs over the top of the page */
.sj-badge {
  position: absolute; left: 24px; top: 8px; z-index: 2;
  width: 128px; height: 128px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--sj-gold);
  box-shadow: 0 0 0 5px var(--sj-cream), 0 0 0 6px rgba(185, 138, 62, 0.5), 0 10px 26px rgba(46, 28, 18, 0.28);
  display: grid; place-items: center; overflow: hidden;
  transition: width .25s ease, height .25s ease, top .25s ease;
}
.sj-badge img { width: 84%; height: 84%; object-fit: contain; display: block; }
.sj-header.is-scrolled .sj-badge { width: 66px; height: 66px; top: 9px; }

.sj-nav { display: flex; align-items: center; }
.sj-nav a {
  position: relative;
  font-family: var(--sj-serif); font-weight: 700; font-size: 1.12rem;
  color: var(--sj-ink); text-decoration: none;
  padding: 8px 18px; border-radius: 3px;
  transition: color .15s ease, background .15s ease;
}
/* thin gold dividers between menu items */
.sj-nav a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--sj-gold);
}
.sj-nav a:hover { color: var(--sj-gold); }
.sj-nav a.is-active { background: var(--sj-brown); color: #fff; }
.sj-nav a.is-active::before, .sj-nav a.is-active + a::before { display: none; }
.sj-nav a.is-active::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -7px;
  height: 2px; background: var(--sj-gold);
}
.sj-nav a:focus-visible, .sj-lock:focus-visible, .sj-nav-toggle:focus-visible,
.sj-info-item:focus-visible, .sj-footer a:focus-visible {
  outline: 2px solid var(--sj-gold); outline-offset: 3px;
}

.sj-lock {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; margin-left: 10px; border-radius: 50%;
  border: 1.5px solid var(--sj-gold); color: var(--sj-brown);
  transition: background .15s ease, color .15s ease;
}
.sj-lock svg { width: 17px; height: 17px; }
.sj-lock:hover { background: var(--sj-brown); color: #fff; }

.sj-nav-toggle {
  display: none;
  width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  color: var(--sj-brown); border-radius: 8px;
}
.sj-nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 1240px) {
  .sj-nav a { padding: 8px 13px; font-size: 1.05rem; }
}

/* Hamburger menu kicks in before the menu can run into the logo */
@media (max-width: 1080px) {
  .sj-header-inner { height: 68px; padding: 0 14px; }
  .sj-badge { left: 14px; top: 6px; width: 78px; height: 78px; }
  .sj-header.is-scrolled .sj-badge { width: 54px; height: 54px; top: 7px; }
  .sj-nav-toggle { display: grid; place-items: center; order: 3; }
  .sj-lock { order: 2; }

  .sj-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--sj-cream);
    border-top: 1px solid rgba(185, 138, 62, 0.35);
    box-shadow: 0 14px 24px rgba(46, 28, 18, 0.14);
    padding: 8px 14px 14px;
  }
  .sj-header.nav-open .sj-nav { display: flex; }
  .sj-nav a { padding: 13px 12px; font-size: 1.15rem; border-bottom: 1px solid rgba(185, 138, 62, 0.25); }
  .sj-nav a + a::before, .sj-nav a.is-active::after { display: none; }
  .sj-nav a.is-active { border-bottom-color: transparent; }
}

/* =============================================================
   HOMEPAGE HERO — church photo with the welcome + scripture
   over the sunlit right side
   ============================================================= */
section.sj-hero {
  position: relative; overflow: hidden;
  height: clamp(500px, 36vw, 660px);
  padding: 0; margin: 0;
  display: flex; align-items: center;
  background: #F6E7C4;
}
.sj-hero-media { position: absolute; inset: 0; }
.sj-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 85% 60%;   /* nudges the building left, away from the text */
  display: block;
}
/* light wash on the bright side so the dark lettering stays crisp */
.sj-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 247, 240, 0) 50%, rgba(251, 247, 240, 0.55) 64%, rgba(251, 247, 240, 0.8) 78%, rgba(251, 247, 240, 0.85) 100%);
}
.sj-hero-copy {
  position: relative;
  width: min(470px, 31vw);
  margin-left: auto;
  margin-right: clamp(20px, 3vw, 64px);   /* hug the right edge, clear of the building */
  padding: 28px 0 24px;
  text-align: center; color: var(--sj-brown);
}
.sj-hero .sj-welcome {
  font-family: var(--sj-script); font-weight: 400;
  font-size: clamp(3.6rem, 6.6vw, 6.4rem); line-height: 0.95;
  color: var(--sj-brown); margin: 0; letter-spacing: 0;
  text-shadow: 0 1px 12px rgba(255, 244, 214, 0.8);
}
.sj-hero .sj-hero-title {
  font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.5vw, 2.3rem); line-height: 1.12; letter-spacing: 0.03em;
  color: var(--sj-brown); margin: 4px 0 0;
}
.sj-ornament {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 16px auto 14px; max-width: 340px; color: var(--sj-gold);
}
.sj-ornament::before, .sj-ornament::after {
  content: ""; flex: 1; height: 1.5px; background: var(--sj-gold);
}
.sj-ornament svg { width: 22px; height: 22px; flex-shrink: 0; }
.sj-hero .sj-verse {
  font-family: var(--sj-serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.42;
  color: var(--sj-text); margin: 0 auto; max-width: 30ch;
}
.sj-hero .sj-verse-ref {
  font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.95rem; color: var(--sj-brown);
  margin: 12px 0 0;
}

/* Tablets & phones: photo on top, welcome + scripture on a warm sunlit panel below */
@media (max-width: 1100px) {
  section.sj-hero {
    display: block; height: auto;
    background: radial-gradient(ellipse 90% 70% at 70% 0%, #FBE7B8 0%, #F8EFDD 55%, var(--sj-cream) 100%);
  }
  .sj-hero-media { position: relative; inset: auto; height: clamp(240px, 46vw, 440px); }
  .sj-hero-media img { object-position: 30% 60%; }
  .sj-hero-glow { display: none; }
  .sj-hero-copy { width: auto; margin: 0 18px; padding: 26px 0 32px; }
}

/* =============================================================
   INFO STRIP (4 linked icons)
   ============================================================= */
section.sj-info { padding: 0; margin: 0; }
.sj-info { background: var(--sj-cream); border-bottom: 1px solid rgba(185, 138, 62, 0.3); }
.sj-info-grid {
  max-width: 1240px; margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.sj-info-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 10px 16px 12px; border-radius: 10px;
  color: var(--sj-ink); text-decoration: none;
  transition: background .2s ease;
}
.sj-info-item + .sj-info-item::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--sj-gold);
}
.sj-info-item:hover { background: rgba(185, 138, 62, 0.09); }
.sj-info-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--sj-gold); color: var(--sj-brown); background: #fff;
  margin-bottom: 10px;
}
.sj-info-icon svg { width: 26px; height: 26px; }
.sj-info-title {
  font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: 0.04em; color: var(--sj-brown);
}
.sj-info-sub {
  font-family: var(--sj-serif); font-style: italic; font-weight: 500;
  font-size: 1.08rem; line-height: 1.3; color: var(--sj-text); margin-top: 2px;
}

@media (max-width: 760px) {
  .sj-info-grid { grid-template-columns: 1fr 1fr; padding: 14px 10px; row-gap: 6px; }
  .sj-info-item + .sj-info-item::before { display: none; }
  .sj-info-item:nth-child(even) { border-left: 1px solid rgba(185, 138, 62, 0.5); border-radius: 0; }
  .sj-info-item:nth-child(-n+2) { border-bottom: 1px solid rgba(185, 138, 62, 0.35); border-radius: 0; }
  .sj-info-title { font-size: 0.98rem; }
  .sj-info-sub { font-size: 1rem; }
}

/* =============================================================
   "WE'RE SO GLAD YOU'RE HERE"
   ============================================================= */
section.sj-glad {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--sj-cream); padding: 0; margin: 0;
}
.sj-glad-photo { position: relative; min-height: 440px; background: #e8dcc6; }
.sj-glad-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%; display: block;
}
.sj-glad-copy {
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 700px;
}
.sj-glad .sj-glad-script {
  font-family: var(--sj-script); font-weight: 400; color: var(--sj-gold);
  font-size: clamp(2.8rem, 4.6vw, 3.8rem); line-height: 1; margin: 0;
}
.sj-glad .sj-glad-title {
  font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: 0.1em; line-height: 1.1;
  color: var(--sj-brown); margin: 2px 0 18px;
}
.sj-glad .sj-glad-copy p {
  font-family: var(--sj-serif); font-weight: 500;
  font-size: 1.24rem; line-height: 1.6; color: var(--sj-text); margin: 0; max-width: 58ch;
}

@media (max-width: 760px) {
  section.sj-glad { grid-template-columns: 1fr; }
  .sj-glad-photo { min-height: 0; aspect-ratio: 4 / 3; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.sj-footer { background: var(--sj-brown); color: #EFE3CF; font-family: var(--sj-serif); }
.sj-footer-grid {
  max-width: 1240px; margin: 0 auto; padding: 38px 24px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
}
.sj-footer-col { padding: 6px 28px; text-align: center; position: relative; }
.sj-footer-col + .sj-footer-col::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--sj-gold);
}

.sj-footer-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  justify-items: center; max-width: 320px; margin: 0 auto;
}
.sj-footer a { color: #EFE3CF; text-decoration: none; }
.sj-footer-links a { font-weight: 600; font-size: 1.08rem; padding: 2px 0; }
.sj-footer-links a:hover, .sj-footer-info a:hover { color: var(--sj-gold-light); }

.sj-footer-name { font-weight: 700; font-size: 1.3rem; color: #fff; margin: 0 0 4px; }
.sj-footer-info p { margin: 0; font-size: 1.08rem; line-height: 1.45; }
.sj-footer-info .sj-footer-pastor { font-style: italic; margin-top: 4px; }

.sj-footer-social { display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; }
.sj-footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--sj-brown); transition: background .15s ease;
}
.sj-footer-social a:hover { background: var(--sj-gold-light); }
.sj-footer-social svg { width: 20px; height: 20px; }
.sj-footer-motto { font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; margin: 0; }
.sj-footer-motto span { color: var(--sj-gold); padding: 0 8px; }

.sj-footer-bottom {
  border-top: 1px solid rgba(185, 138, 62, 0.35);
  text-align: center; padding: 14px 20px; font-size: 0.95rem; color: #CDBB9C;
}
.sj-footer-bottom p { margin: 0; }

@media (max-width: 760px) {
  .sj-footer-grid { grid-template-columns: 1fr; padding: 28px 18px; }
  .sj-footer-col { padding: 22px 8px; }
  .sj-footer-col + .sj-footer-col::before { left: 20%; right: 20%; top: 0; bottom: auto; width: auto; height: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .sj-badge, .sj-nav a, .sj-info-item { transition: none; }
}


/* =============================================================
   SITE-WIDE RESTYLE — brown, cream & gold with Cormorant + Great Vibes
   -------------------------------------------------------------
   styles.css builds everything from color/font variables, so
   redefining them here recolors every page at once. The rules
   after that catch the few spots that had purple/navy typed in
   directly.
   ============================================================= */
:root {
  /* purples/navies → browns & golds */
  --ink: #2E1C12;
  --navy: #2E1C12;
  --navy-deep: #1F130C;
  --harbor: #8E6A2E;
  --harbor-deep: #6E5021;
  --lavender: #B98A3E;
  --lavender-deep: #8E6A2E;
  --lavender-light: #E8D5A8;
  --eggplant: #5A3A22;
  --brass: #8E6A2E;
  --brass-light: #D9B56C;
  --foam: #F1E4C8;
  --blush: #F1E4C8;

  /* backgrounds + text */
  --parchment: #FBF7F0;
  --parchment-alt: #F3EADB;
  --bar-cream: #F3EADB;
  --charcoal: #2A1D14;
  --charcoal-soft: #5A4636;
  --line: rgba(46, 28, 18, 0.14);
  --shadow: 0 8px 20px rgba(46, 28, 18, 0.12);
  --shadow-soft: 0 10px 24px rgba(46, 28, 18, 0.08);

  /* fonts */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-condensed: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script: 'Great Vibes', cursive;
}

/* Cormorant runs small, so everything is nudged up a size to stay easy to read */
html { font-size: 112.5%; }
body { font-weight: 500; color: var(--charcoal); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; }
.script-word + h2 { font-weight: 700; letter-spacing: 0.08em; }

/* Great Vibes has one weight; stop browsers faking a heavy bold */
.script-word, .verse-text, .page-hero h1, .modal-article-title { font-weight: 400; }
.script-word { color: var(--sj-gold); font-size: clamp(2.6rem, 5.4vw, 3.4rem); }
.modal-article-title { font-size: clamp(2.2rem, 4vw, 2.8rem); color: var(--sj-brown); }
.page-hero h1 { font-size: clamp(2.8rem, 9vw, 5.2rem); color: #F3E3BE; }
.page-hero p { letter-spacing: 0.08em; font-weight: 600; }

/* Long quotes read better in italic serif than in script */
.article-quote {
  font-family: var(--sj-serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem); color: var(--sj-brown);
}

/* Photo page banners: warm brown wash instead of the purple one */
.page-hero-overlay {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(217, 181, 108, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(31, 19, 12, 0.5) 0%, rgba(31, 19, 12, 0.6) 55%, rgba(31, 19, 12, 0.84) 100%);
}
.page-hero .eyebrow { color: #E8D5A8; }

/* Buttons */
.btn { font-family: var(--sj-serif); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; }
.btn-primary:hover { background: var(--harbor); box-shadow: 0 8px 18px rgba(142, 106, 46, 0.3); }

/* Three big tiles at the bottom of the homepage */
.cta-tile { font-family: var(--sj-serif); font-weight: 700; letter-spacing: 0.02em; }
.cta-tile:nth-child(1) { background: #7B5431; }   /* walnut — stands apart from the dark calendar band */
.cta-tile:nth-child(2) { background: #5A3A22; }
.cta-tile:nth-child(3) { background: var(--harbor); }

/* Small text that was hard-coded in blue-grey or purple */
.about-copy p { color: var(--charcoal-soft); }
.form-grid label { color: var(--sj-brown); }
.gallery-tab.active { background: var(--sj-brown); border-color: var(--sj-brown); }
.band-navy .checkbox-grid label { color: rgba(255, 255, 255, 0.9); }
p[style*="#4c3a5c"] { color: var(--sj-text) !important; }   /* I'm New belief quote */

/* ---- Contact page (its own styles had navy + purple typed in) ---- */
body .pc-banner {
  background: radial-gradient(ellipse at 50% 0%, #4A3020 0%, var(--sj-brown) 70%);
}
body .pc-banner h1 { font-family: var(--sj-script); font-weight: 400; font-size: clamp(3rem, 8vw, 4.6rem); color: #F3E3BE; }
body .pc-action { color: var(--sj-brown); border-color: var(--sj-gold); background: #fff; }
body .pc-action:hover, body .pc-action:focus-visible { background: var(--sj-brown); border-color: var(--sj-brown); color: #fff; }
body .pc-action:focus-visible { outline-color: var(--sj-gold); }
body .pc-action strong { font-family: var(--sj-serif); }
body .pc-wall-card { background: var(--parchment-alt); }
body .pc-wall-card b, body .pc-modal h3, body .pc-field label { color: var(--sj-brown); }
body .pc-modal .pc-lead, body .pc-hint, body .pc-done p { color: var(--charcoal-soft); }
body .pc-field input:focus, body .pc-field textarea:focus, body .pc-field select:focus {
  outline-color: rgba(185, 138, 62, 0.35); border-color: var(--sj-gold);
}
body .pc-backdrop { background: rgba(31, 19, 12, 0.62); }

/* ---- Church-photo hero on inner pages ---- */
.sj-hero .sj-welcome--sm { font-size: clamp(3.2rem, 5.4vw, 5.2rem); line-height: 1.05; }
.sj-hero .sj-hero-note {
  font-family: var(--sj-serif); font-style: italic; font-weight: 600;
  font-size: 1.05rem; color: var(--sj-text); margin: 6px 0 0;
}
/* Ministries' pill menu used to tuck under the old banner; give it room now */
.sj-hero + .subnav { margin-top: 28px; }

/* =============================================================
   PHOTO SLIDERS — keep the arrows on screen on phones
   -------------------------------------------------------------
   A grid column grows to fit its widest content, so a long row of
   photos stretched the ministry column past the screen edge and
   pushed the arrows out of view. min-width:0 lets it shrink back.
   ============================================================= */
.ministry-block > *, .ministry-copy, .photo-slider, .photo-slider .photo-strip { min-width: 0; }
.photo-slider { max-width: 100%; }
@media (max-width: 600px) {
  .photo-slider { gap: 6px; }
  .slider-arrow { width: 36px; height: 36px; }
}

/* =============================================================
   COMMUNITY PAGE — three doorways
   ============================================================= */
.sj-paths {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 36px;
}
.sj-path {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid rgba(185, 138, 62, 0.35); border-top: 4px solid var(--sj-gold);
  border-radius: 12px; padding: 34px 26px 28px;
  text-decoration: none; color: var(--sj-ink);
  box-shadow: 0 10px 24px rgba(46, 28, 18, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sj-path:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(46, 28, 18, 0.14); }
.sj-path:focus-visible { outline: 2px solid var(--sj-gold); outline-offset: 4px; }
.sj-path .sj-info-icon { width: 64px; height: 64px; margin-bottom: 16px; }
.sj-path .sj-info-icon svg { width: 30px; height: 30px; }
.sj-path h3 {
  font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 1.35rem; color: var(--sj-brown); margin: 0 0 10px;
}
.sj-path p { font-size: 1.08rem; line-height: 1.55; color: var(--charcoal-soft); margin: 0 0 20px; }
.sj-path-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sj-serif); font-weight: 700; font-size: 1.05rem; color: var(--sj-gold);
}
.sj-path-go svg { width: 18px; height: 18px; transition: transform .2s ease; }
.sj-path:hover .sj-path-go svg { transform: translateX(4px); }
@media (max-width: 860px) { .sj-paths { grid-template-columns: 1fr; } }

/* =============================================================
   YOUR NEXT STEP — baptism section
   ============================================================= */
.sj-baptism-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 34px 0 30px;
}
.sj-baptism-card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--sj-gold);
  border-radius: 10px; padding: 26px 24px;
}
.sj-baptism-card h3 {
  font-family: var(--sj-serif); font-weight: 700; font-size: 1.25rem; color: var(--sj-brown); margin: 0 0 8px;
}
.sj-baptism-card p { font-size: 1.05rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }
.sj-center { text-align: center; }
@media (max-width: 860px) { .sj-baptism-grid { grid-template-columns: 1fr; } }

/* Sub-page pill menu (Gatherings & Events, Ministries) sits under the hero */
.sj-hero + .subnav { margin-top: 28px; margin-bottom: 8px; }

/* Jump links (#visit-connect, #calendar, etc.) land below the sticky header */
section[id] { scroll-margin-top: 100px; }

/* Baptism photos under the "Ask About Baptism" button */
.sj-baptism-photos { margin-top: 44px; }
.sj-baptism-photos h3 {
  font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.3rem; color: var(--sj-brown); margin: 0 0 4px;
}

/* =============================================================
   YOUR NEXT STEP — salvation (John 3:16)
   ============================================================= */
.sj-scripture { margin: 30px auto 26px; max-width: 760px; text-align: center; }
.sj-scripture .sj-ornament { margin: 0 auto 16px; }
.sj-scripture blockquote {
  margin: 0; font-family: var(--sj-serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.4; color: var(--sj-brown);
}
.sj-scripture figcaption {
  margin-top: 14px; font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.95rem; color: var(--sj-gold);
}
.sj-lead {
  max-width: 720px; margin: 0 auto; text-align: center;
  font-size: 1.15rem; line-height: 1.7; color: var(--charcoal-soft);
}
.sj-step-num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sj-brown); color: #fff; font-family: var(--sj-serif); font-weight: 700;
  margin-bottom: 10px;
}
.sj-callout {
  display: flex; gap: 22px; align-items: flex-start;
  max-width: 860px; margin: 8px auto 0; padding: 28px 30px;
  background: #fff; border: 1px solid rgba(185, 138, 62, 0.4); border-left: 5px solid var(--sj-gold);
  border-radius: 12px; box-shadow: 0 10px 24px rgba(46, 28, 18, 0.06);
}
.sj-callout .sj-callout-icon { flex-shrink: 0; width: 60px; height: 60px; margin: 0; }
.sj-callout h3 { font-family: var(--sj-serif); font-weight: 700; font-size: 1.4rem; color: var(--sj-brown); margin: 0 0 8px; }
.sj-callout p { font-size: 1.08rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0 0 18px; }
.sj-callout strong { color: var(--sj-brown); }
@media (max-width: 600px) {
  .sj-callout { flex-direction: column; padding: 24px 20px; }
  .sj-callout .btn { width: 100%; }
}

/* =============================================================
   MERCHANDISE — Streamlabs store shown inside the site
   ============================================================= */
.sj-store-frame {
  margin-top: 30px; background: #fff;
  border: 1px solid rgba(185, 138, 62, 0.4); border-top: 4px solid var(--sj-gold);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(46, 28, 18, 0.08);
}
.sj-store-frame iframe { display: block; width: 100%; height: 1100px; border: 0; }
.sj-store-help {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 0; text-align: center; color: var(--charcoal-soft); font-size: 1.05rem;
}
@media (max-width: 760px) {
  .sj-store-frame iframe { height: 80vh; min-height: 560px; }
  .sj-store-help .btn { width: 100%; }
}

/* =============================================================
   FULL-SIZE PHOTO VIEWER on phones
   -------------------------------------------------------------
   The photo plus both arrows were wider than a phone screen, so
   the arrows got pushed off the edges. On small screens the arrows
   now float over the left and right sides of the photo instead.
   ============================================================= */
@media (max-width: 760px) {
  .lightbox-backdrop { padding: 60px 0 24px; }
  .lightbox-stage { max-width: 100vw; width: 100%; }
  .lightbox-stage img { max-width: 100vw; max-height: 74vh; border-radius: 0; }
  .lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px; margin: 0 !important;
    background: rgba(31, 19, 12, 0.6); border-color: rgba(255, 255, 255, 0.5);
  }
  .lightbox-nav:hover { transform: translateY(-50%); }
  .lightbox-nav.lightbox-prev { left: 10px; }
  .lightbox-nav.lightbox-next { right: 10px; }
  .lightbox-close { top: 12px; right: 12px; z-index: 5; }
}

/* Merchandise: shop card (Streamlabs can't be shown inside the site) */
.sj-shop-card {
  max-width: 620px; margin: 30px auto 0; text-align: center;
  background: #fff; border: 1px solid rgba(185, 138, 62, 0.4); border-top: 4px solid var(--sj-gold);
  border-radius: 12px; padding: 40px 32px 30px;
  box-shadow: 0 10px 24px rgba(46, 28, 18, 0.08);
}
.sj-shop-card .sj-shop-icon { width: 72px; height: 72px; margin: 0 auto 16px; }
.sj-shop-card .sj-shop-icon svg { width: 34px; height: 34px; }
.sj-shop-card h3 {
  font-family: var(--sj-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1.5rem; color: var(--sj-brown); margin: 0 0 10px;
}
.sj-shop-card p { font-size: 1.1rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0 auto 22px; max-width: 46ch; }
.sj-shop-btn { font-size: 1.15rem; padding: 15px 38px; }
.sj-shop-btn svg { width: 18px; height: 18px; }
.sj-shop-card .sj-shop-note { font-size: 0.95rem; margin: 16px 0 0; }
@media (max-width: 600px) { .sj-shop-btn { width: 100%; } .sj-shop-card { padding: 32px 20px 24px; } }

/* =============================================================
   HERO, "split" version (Our Pastor page)
   The photo fills the left side and fades into a cream panel on the
   right where the text sits, so busy photos keep everyone visible.
   ============================================================= */
@media (min-width: 1101px) {
  section.sj-hero--split { background: var(--sj-cream); }
  .sj-hero--split .sj-hero-media { right: 30%; }
  .sj-hero--split .sj-hero-media img { object-position: center 35%; }
  .sj-hero--split .sj-hero-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 247, 240, 0) 72%, rgba(251, 247, 240, 0.85) 92%, var(--sj-cream) 100%);
  }
  .sj-hero--split .sj-hero-glow {
    background: radial-gradient(ellipse 40% 70% at 86% 50%, rgba(246, 231, 196, 0.55), transparent 70%);
  }
  .sj-hero--split .sj-welcome { text-shadow: none; }
}
@media (max-width: 1100px) {
  .sj-hero--split .sj-hero-media img { object-position: center 35%; }
}

/* =============================================================
   CHURCH CALENDAR cards
   The calendar sits on a dark band that turns text white, but the
   event cards are white — so titles need their own dark color.
   ============================================================= */
.calendar-item .cal-info .title {
  color: var(--sj-brown);
  font-family: var(--sj-serif); font-weight: 700; font-size: 1.15rem; line-height: 1.3;
}
.calendar-item .cal-info .meta { color: var(--charcoal-soft); }
.calendar-item .cal-date .month { color: var(--harbor); font-weight: 700; }
.calendar-item .cal-date .day { color: var(--sj-brown); font-weight: 700; }

/* =============================================================
   MINISTRIES — schedule box + closing verse (Friends of Jesus)
   ============================================================= */
.ministry-when {
  margin: 4px 0 18px; padding: 14px 18px;
  background: #fff; border: 1px solid rgba(185, 138, 62, 0.4); border-left: 4px solid var(--sj-gold);
  border-radius: 10px; font-size: 1.05rem; line-height: 1.6; color: var(--charcoal);
}
.ministry-when strong { color: var(--sj-brown); }
.ministry-verse {
  margin: 6px 0 22px; padding: 0 0 0 18px; border-left: 3px solid var(--sj-gold);
  font-family: var(--sj-serif); font-style: italic; font-weight: 600;
  font-size: 1.2rem; line-height: 1.5; color: var(--sj-brown);
}
.ministry-verse cite {
  display: block; margin-top: 6px; font-style: normal; font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sj-gold);
}