:root{
  --ink: #1B2740;
  --gold: #C99A44;
  --gold-light: #E4BE7A;
  --cream: #F6F1E7;
  --sage: #5C7A6B;
  --sage-dark: #4A6355;
  --grey: #8B8D97;
  --dusk-grad: linear-gradient(90deg, #1B2740 0%, #4A3F5C 35%, #A87A4F 70%, #C99A44 100%);
}
*{box-sizing:border-box; margin:0; padding:0;}
/* Sticky-header clearance for in-page anchors. js/main.js sets the
   precise value dynamically (the sticky header's real height changes with
   language and viewport width) — this 90px is only the fallback used
   before that script runs, or if JavaScript is unavailable. */
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "PingFang TC", "Microsoft JhengHei", Helvetica, sans-serif;
  line-height:1.6;
}
h1,h2,h3,.serif{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:700;
}
html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3, html[data-lang="zh"] .serif{
  font-family: "Songti SC", "STSong", "SimSun", Georgia, serif;
}
html[data-lang="zh"] body, html[data-lang="zh"] p, html[data-lang="zh"] a, html[data-lang="zh"] button, html[data-lang="zh"] input, html[data-lang="zh"] li{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[data-lang="zt"] h1, html[data-lang="zt"] h2, html[data-lang="zt"] h3, html[data-lang="zt"] .serif{
  font-family: "Songti TC", "PMingLiU", Georgia, serif;
}
html[data-lang="zt"] body, html[data-lang="zt"] p, html[data-lang="zt"] a, html[data-lang="zt"] button, html[data-lang="zt"] input, html[data-lang="zt"] li{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", sans-serif;
}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
button{cursor:pointer;}

/* Signature divider: thin dusk-to-gold horizon line */
.divider{
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-light) 50%, transparent);
  margin:0;
}

/* Logo badge */
.logo-badge{
  background:#fff;
  border-radius:9px;
  padding:5px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.18);
  flex-shrink:0;
}
.logo-badge img{display:block; width:100%; height:100%; object-fit:contain;}

/* Nav */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(27,39,64,0.97);
  backdrop-filter:blur(6px);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; cursor:pointer;}
.logo-badge.nav-logo{width:42px; height:42px;}
.brand-text{color:var(--cream); min-width:0;}
.brand-text .name{
  font-size:14.5px; font-weight:600; line-height:1.25;
  font-family: Georgia, "Times New Roman", serif;
  display:block;
}
html[data-lang="zh"] .brand-text .name{font-family: "Songti SC", "STSong", "SimSun", Georgia, serif;}
html[data-lang="zt"] .brand-text .name{font-family: "Songti TC", "PMingLiU", Georgia, serif;}
.brand-text small{display:block; font-size:11.5px; color:var(--gold-light); font-weight:400; letter-spacing:0.05em; margin-top:2px;}
.navlinks{display:flex; gap:24px; align-items:center;}
.navlinks a{
  color:var(--cream);
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.02em;
  opacity:0.85;
  transition:opacity 0.2s;
  white-space:nowrap;
}
.navlinks a:hover{opacity:1; color:var(--gold-light);}
/* V4.5: top-navigation Watch Live entry point. A small sage pill (the
   site's existing secondary-action colour, already used for "Watch Live"
   elsewhere e.g. the floating Beliefs-page back link) rather than the
   plain nav-link treatment, so it reads as an action rather than a page
   section. Full opacity overrides the base .navlinks a rule above. */
.navlinks a.nav-watch-live{
  opacity:1; background:var(--sage); color:#fff;
  padding:7px 16px; border-radius:20px; font-size:13px; font-weight:600;
  transition:background 0.2s;
}
.navlinks a.nav-watch-live:hover{background:var(--sage-dark); color:#fff; opacity:1;}
.langtoggle{
  display:flex; border:1px solid var(--gold); border-radius:20px; overflow:hidden; flex-shrink:0;
}
.langtoggle button{
  background:transparent; border:none; color:var(--cream);
  padding:6px 12px; font-size:12.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "PingFang TC", "Microsoft JhengHei", Helvetica, sans-serif;
  letter-spacing:0.02em;
}
.langtoggle button.active{background:var(--gold); color:var(--ink); font-weight:600;}
.navtoggle{
  display:none; background:none; border:1px solid rgba(246,241,231,0.4); border-radius:6px;
  color:var(--cream); font-size:20px; width:42px; height:42px; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* Mobile panel */
.mobile-panel{display:none; background:var(--ink); border-top:1px solid rgba(228,190,122,0.22);}
.mobile-panel.open{display:block;}
.mobile-panel .wrap{padding:8px 24px 24px; display:flex; flex-direction:column;}
.mobile-panel a.mp-link{
  color:var(--cream); text-decoration:none; padding:14px 4px; font-size:15.5px;
  border-bottom:1px solid rgba(255,255,255,0.08); opacity:0.92;
}
.mobile-panel .mp-lang{display:flex; gap:8px; margin-top:16px;}
.mobile-panel .mp-lang button{
  flex:1; padding:11px 4px; border-radius:6px; border:1px solid var(--gold);
  background:transparent; color:var(--cream); font-size:13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "PingFang TC", "Microsoft JhengHei", Helvetica, sans-serif;
}
.mobile-panel .mp-lang button.active{background:var(--gold); color:var(--ink); font-weight:600;}

/* Hero */
.hero{
  background:var(--dusk-grad);
  color:var(--cream);
  padding:64px 0 56px;
  text-align:center;
}
.hero .logo-badge{width:64px; height:64px; margin:0 auto 22px;}
.hero .eyebrow{
  text-transform:uppercase; letter-spacing:0.16em; font-size:12px;
  color:var(--gold-light); margin-bottom:16px; font-weight:600;
}
.hero h1{font-size:38px; max-width:660px; line-height:1.25; margin:0 auto 18px;}
.hero p.lede{font-size:16.5px; max-width:560px; color:#E8E3D8; margin:0 auto 12px;}
.hero .lang-note{font-size:13px; color:var(--gold-light); letter-spacing:0.02em; margin-bottom:26px;}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.btn{
  display:inline-block; padding:13px 26px; border-radius:4px;
  text-decoration:none; font-size:14px; font-weight:600; letter-spacing:0.02em;
  cursor:pointer; border:1px solid transparent;
  font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "PingFang TC", "Microsoft JhengHei", Helvetica, sans-serif;
}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-light);}
.btn-sage{background:var(--sage); color:#fff;}
.btn-sage:hover{background:var(--sage-dark);}
.hero-meta{
  margin-top:24px; font-size:13px; color:var(--gold-light); letter-spacing:0.03em;
}

/* Scripture strip */
.scripture-strip{
  background:var(--cream);
  border-top:1px solid rgba(201,154,68,0.35);
  border-bottom:1px solid rgba(201,154,68,0.35);
  padding:34px 0;
  text-align:center;
}
.scripture-text{
  font-family: Georgia, "Times New Roman", serif;
  font-style:italic; font-size:18px; max-width:620px; margin:0 auto 8px;
  color:var(--ink); line-height:1.55;
}
html[data-lang="zh"] .scripture-text{font-family: "Songti SC", "STSong", "SimSun", Georgia, serif; font-style:normal;}
html[data-lang="zt"] .scripture-text{font-family: "Songti TC", "PMingLiU", Georgia, serif; font-style:normal;}
.scripture-ref{font-size:13px; color:var(--sage); font-weight:600; letter-spacing:0.02em;}
.scripture-copyright{font-size:11px; color:var(--grey); margin-top:10px;}
/* No confirmed Chinese scripture copyright/confirmation line yet — hide
   this element for zh/zt so nothing displays beneath the reference until
   the official wording is confirmed with church leadership. The English
   NKJV notice is unaffected. */
html[data-lang="zh"] .scripture-copyright,
html[data-lang="zt"] .scripture-copyright{display:none;}

section{padding:64px 0;}
.eyebrow-dark{
  text-transform:uppercase; letter-spacing:0.16em; font-size:12px;
  color:var(--sage); font-weight:600; margin-bottom:10px;
}
.section-title{font-size:28px; margin-bottom:14px;}
.section-lede{color:#4A5266; max-width:600px; margin-bottom:36px; font-size:15.5px;}
/* Beliefs-specific override (not a change to the shared .section-lede
   rule): the six-card grid below this paragraph runs the section's full
   content width, so the default 600px cap made the intro wrap much sooner
   than the grid and left an odd empty gap on the right at desktop widths.
   Removing the cap lets it use the same content width as everything else
   inside .wrap; every other .section-lede paragraph (Service Times,
   Events, Resources) is unaffected. On tablet and mobile, .wrap itself is
   narrower, so the paragraph still shrinks with the viewport exactly like
   the base rule does. */
.beliefs-lede{max-width:100%;}

/* Service-Times-specific override, same principle as .beliefs-lede above
   (not a change to the shared .section-lede rule): the worship photo and
   the three time cards beneath this paragraph run the section's full
   content width, so the default 600px cap made the intro wrap much sooner
   than everything below it. Removing the cap here lets it share the same
   content width as the photo and cards; on tablet and mobile .wrap itself
   narrows, so the paragraph still wraps naturally there, same as before. */
.times-lede{max-width:100%;}

/* Service times */
.times-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.time-card{
  background:#fff; border:1px solid #E7E0D2; border-radius:6px; padding:26px;
  border-top:3px solid var(--gold);
}
.time-card h3{font-size:17.5px; margin-bottom:8px;}
.time-card .when{color:var(--sage); font-weight:600; font-size:14px; margin-bottom:10px;}
.time-card p{font-size:14px; color:#565B6B;}
.times-lang-note{
  margin-top:16px; font-size:13px; color:#6B7186; line-height:1.6; max-width:640px;
}

/* Two-column layout on desktop — Watch Live link on
   the left, Watch Past Sermons on the right. */
.watch-live-note{
  margin-top:28px; padding:20px 24px; background:#fff; border:1px solid #E7E0D2; border-radius:6px;
}
.watch-live-layout{display:flex; align-items:flex-start; gap:32px;}
.watch-live-primary{flex:1 1 auto; min-width:0;}
.watch-live-note p{font-size:14.5px; color:#3A4257; margin:0 0 16px;}
.watch-live-secondary{
  flex:0 0 240px; padding-left:28px; border-left:1px solid #E7E0D2;
  margin-top:28px; /* roughly aligns the link with the primary column's button */
}
.watch-past-link{
  font-size:12.5px; font-weight:600; color:var(--sage-dark);
  text-decoration:none; white-space:nowrap; display:inline-block;
}
.watch-past-link:hover, .watch-past-link:focus-visible{text-decoration:underline;}
.watch-past-note{font-size:12.5px; color:#6B7186; margin-top:6px; max-width:220px;}
/* V4.5.1: a deliberate compact single-column version for mobile, rather
   than only letting the desktop two-column layout wrap on its own — the
   divider and left column padding read as leftover desktop styling once
   stacked, and the primary column's button-then-divider spacing needs
   its own comfortable vertical rhythm instead. */
@media(max-width:640px){
  .watch-live-layout{flex-direction:column; gap:0;}
  .watch-live-secondary{
    flex-basis:auto; border-left:none; padding-left:0; margin-top:20px;
  }
  .watch-past-note{max-width:none;}
}

/* About */
.about{background:#fff;}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr 0.85fr; gap:36px; align-items:start;}
.about p{margin-bottom:16px; font-size:15.5px; color:#3A4257;}
/* On desktop the facts column is nudged down roughly level with the
   "About Us" heading (rather than the small eyebrow above it), for a
   better three-column balance (photo / heading + paragraph / facts)
   without needing exact baseline alignment. Reset to 0 below for the
   stacked single-column mobile/tablet layout, where the facts list simply
   follows the paragraph in natural order. */
.fact-list{list-style:none; margin-top:30px;}
.fact-list li{
  padding:14px 0; border-bottom:1px solid #EFE9DC;
  display:flex; justify-content:space-between; gap:12px; font-size:14.5px;
}
.fact-list li span:first-child{color:var(--sage); font-weight:600; flex-shrink:0;}
.fact-list li span:last-child{text-align:right;}

/* Events */
.events-grid{display:grid; grid-template-columns:1fr; gap:22px;}
@media(min-width:640px){
  .events-grid{grid-template-columns:repeat(auto-fit, minmax(300px,1fr));}
}
.event-card{
  background:#fff; border:1px solid #E7E0D2; border-radius:8px; overflow:hidden;
  box-shadow:0 2px 10px rgba(27,39,64,0.05);
  display:flex; flex-direction:column;
}
.event-card-accent{height:6px; background:linear-gradient(90deg, var(--sage) 0%, var(--gold) 100%);}
.event-card-body{padding:28px 26px;}
.event-date{
  display:inline-block; background:rgba(92,122,107,0.12); color:var(--sage-dark);
  font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px; margin-bottom:14px;
}
.event-title{font-size:21px; margin-bottom:8px;}
.event-location{font-size:14px; color:var(--sage-dark); font-weight:600; margin-bottom:12px;}
.event-desc{font-size:14.5px; color:#4A5266; margin-bottom:18px;}
/* Standard event contact line — every event card has one. Deliberately
   understated (not a button) so it reads as contact info, not a CTA. */
.event-contact{
  font-size:14px; color:#4A5266; padding-top:14px; border-top:1px solid #EFE9DC;
}
.event-contact a{
  color:var(--ink); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--gold-light); text-underline-offset:2px;
}
.event-contact a:hover{color:var(--sage-dark); text-decoration-color:var(--sage-dark);}
/* Optional event-specific link (Register / Poster / etc.) — secondary to
   the contact line above, only shown when a real destination exists. */
.event-link{
  display:inline-block; margin-top:12px; color:var(--gold); font-weight:600; font-size:14px;
  text-decoration:none; border-bottom:1.5px solid var(--gold-light); padding-bottom:2px;
  transition:color 0.2s, border-color 0.2s;
}
.event-link:hover{color:var(--sage-dark); border-color:var(--sage-dark);}

/* Event card language visibility: follows the same html[data-lang] switch
   used for the rest of the site, so no JavaScript changes are needed
   when an editor adds a new event card. */
.event-lang{display:none;}
html[data-lang="en"] .event-lang-en{display:block;}
html[data-lang="zh"] .event-lang-zh{display:block;}
html[data-lang="zt"] .event-lang-zt{display:block;}

/* Location */
.location{background:#fff;}
.loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.loc-item{margin-bottom:20px;}
.loc-item .label{color:var(--sage); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;}
.loc-item .placeholder-val{color:#B4713A; font-style:italic; font-size:14.5px;}
.visit-info-list{list-style:none; padding:0; margin:0;}
.visit-info-list li{
  font-size:14.5px; color:#4A5266; line-height:1.5; padding-left:14px; position:relative; margin-bottom:6px;
}
.visit-info-list li::before{content:"\2013"; position:absolute; left:0; color:var(--sage);}
.visit-info-list li:last-child{margin-bottom:0;}
.map-box{
  border:1px solid #E7E0D2; border-radius:6px; overflow:hidden; height:280px;
}
.map-box iframe{width:100%; height:100%; border:0; display:block;}

footer{background:var(--ink); color:#C9CBD6; padding:44px 0 30px;}
.foot-top{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:30px;}
.foot-grid h4{color:var(--cream); font-size:15px; margin-bottom:12px; font-family: Georgia, "Times New Roman", serif;}
.foot-grid p, .foot-grid a{font-size:13.5px; color:#A9ACBC; text-decoration:none; display:block; margin-bottom:6px;}
.foot-grid a:hover{color:var(--gold-light);}
.foot-bottom{font-size:12.5px; color:#7A7D8C; border-top:1px solid #333D52; padding-top:20px;}

/* ============================================================
   Photography, Beliefs summary, and Resources module styles
   ============================================================ */

/* Hero photograph layer (sits under the existing dusk-grad tint) */
.hero{position:relative; overflow:hidden;}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block;}
/* Gradient overlay tint over the hero photo, darkest at the top and
   lightest at the bottom, tuned so the church-building watermark is still
   visible through it while hero text (cream/gold) keeps comfortable
   contrast at every stop. */
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(27,39,64,0.80) 0%, rgba(27,39,64,0.72) 40%, rgba(74,63,92,0.70) 72%, rgba(168,122,79,0.64) 100%);
}
.hero .wrap{position:relative; z-index:2;}

/* About Us photograph. Uses aspect-ratio (4:3, matching the source photo)
   rather than min-height + a percentage-height image: a percentage height
   only resolves against a container with an explicit height, so
   min-height alone would leave the browser falling back to the image's
   natural scaled height — which comes out short at this column's
   narrower desktop width and leaves a blank gap. aspect-ratio keeps the
   box height always well-defined, so object-fit:cover fills it completely
   at every width with no need to touch the source image. */
.about-media{border-radius:8px; overflow:hidden; box-shadow:0 6px 20px rgba(27,39,64,0.12); aspect-ratio:4/3;}
.about-media img{width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block;}

/* Service Times supporting photograph */
.worship-banner{border-radius:8px; overflow:hidden; height:230px; margin-bottom:32px;}
.worship-banner img{width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block;}

/* Visit Us photograph */
.visit-media{border-radius:6px; overflow:hidden; height:200px; margin-bottom:16px;}
.visit-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block;}

/* Restrained atmospheric night feature, lower part of the page. The
   source photo is portrait (1216x1396) but this band is wide and short,
   so plain object-fit:cover would only ever show a narrow horizontal
   slice of it, cropping the roof apex or the illuminated cross depending
   on viewport width. Instead, .night-media is locked to a fixed crop
   (aspect-ratio 1216:1010, object-position center 27.46%) verified to
   keep the whole apex-to-cross span in frame, so it's identical at every
   width — mobile, tablet or desktop — with nothing to re-tune per device.
   Width is capped at 1032px (the same content width every other section's
   text and grids use inside .wrap: 1080px minus its 24px side padding), so
   the photo lines up with the rest of the page's content edge instead of
   floating narrower in the middle of a wide dark band. The outer
   .night-feature keeps a near-black backdrop (sampled from the photo's
   own night sky) so the letterboxed edges above that cap blend in rather
   than reading as empty space. No source image file has been edited —
   this is a CSS-only crop. */
.night-feature{background:radial-gradient(ellipse at center, #10182a 0%, #05070d 100%); padding:36px 24px;}
.night-media{position:relative; width:min(100%, 1032px); aspect-ratio:1216/1010; margin:0 auto; overflow:hidden; border-radius:3px;}
.night-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 27.46%;}
.night-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 24px;
  background:linear-gradient(180deg, rgba(27,39,64,0.42) 0%, rgba(27,39,64,0.68) 100%);
}
.night-caption{color:var(--cream); max-width:420px;}
.night-caption .serif{font-size:19px; font-style:italic; line-height:1.5; margin-bottom:8px;}
html[data-lang="zh"] .night-caption .serif, html[data-lang="zt"] .night-caption .serif{font-style:normal;}
.night-caption small{color:var(--gold-light); text-transform:uppercase; letter-spacing:0.1em; font-size:11px; font-weight:600;}
/* Subtle "more below" cue at the bottom of the night band, inside
   .night-feature's own dark backdrop, well clear of .night-caption
   (top-anchored) — does not alter .night-media's height, crop or
   position. Kept small and muted, not a promotional CTA. */
.night-continue{
  display:block; text-align:center; margin-top:14px;
  color:rgba(246,241,231,0.6); text-decoration:none;
  font-size:12.5px; letter-spacing:0.04em;
  transition:color 0.2s;
}
.night-continue:hover, .night-continue:focus-visible{color:var(--gold-light);}

/* ---- BELIEFS HOMEPAGE SUMMARY styling (full 28-belief accordion styling
   now lives on beliefs.html instead) ---- */
.beliefs{background:#fff;}
.beliefs-cats-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; margin-top:8px;}
/* Each card is a full-card link to that category on beliefs.html (not just
   the heading), so the whole surface needs its own hover/focus treatment
   rather than relying on default link styling. */
.belief-cat-card{
  display:block; background:var(--cream); border:1px solid #E7E0D2; border-radius:8px; padding:20px 20px 22px;
  text-decoration:none; color:inherit; transition:box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.belief-cat-card:hover{box-shadow:0 4px 14px rgba(27,39,64,0.08); border-color:var(--gold-light); transform:translateY(-2px);}
.belief-cat-card:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.belief-cat-card h3{
  font-family:Georgia, "Times New Roman", serif; font-size:16px; font-weight:700;
  color:var(--ink); margin-bottom:8px;
}
.belief-cat-card p{font-size:13.5px; color:#5A6178; line-height:1.6;}
.beliefs-cta{margin-top:30px; text-align:center;}

/* ---- EXTERNAL RESOURCES MODULE styling ---- */
.resources{background:var(--cream);}
.resources-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px;}
.resource-card{
  background:#fff; border:1px solid #E7E0D2; border-radius:8px; padding:22px 20px;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:6px;
  transition:box-shadow 0.2s, border-color 0.2s;
}
.resource-card:hover{box-shadow:0 4px 14px rgba(27,39,64,0.08); border-color:var(--gold-light);}
.resource-card .rname{font-family:Georgia, "Times New Roman", serif; font-weight:700; font-size:15.5px;}
.resource-card .rdesc{font-size:13px; color:#6B7186;}
.resource-card .rlink{font-size:12.5px; color:var(--gold); font-weight:600; margin-top:6px;}

@media(max-width:1000px){
  .navlinks{display:none;}
  .navtoggle{display:flex;}
}
@media(max-width:860px){
  .times-grid, .about-grid, .loc-grid{grid-template-columns:1fr;}
  .hero h1{font-size:29px;}
  .hero{padding:48px 0 44px;}
  .worship-banner{height:190px;}
  /* Stacked single-column layout: let the facts list simply follow the
     photo and paragraph in natural document order, with no desktop-only
     downward nudge. */
  .fact-list{margin-top:0;}
}
@media(max-width:600px){
  .night-feature{padding:24px 16px;}
  .night-caption .serif{font-size:17px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .resource-card, .belief-cat-card, .night-continue, .beliefs-float-back{transition:none;}
  .belief-cat-card:hover{transform:none;}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ============================================================
   BELIEFS PAGE (beliefs.html) — accordion & detail-page-specific
   styles. index.html does not use any of the classes below.
   ============================================================ */
.beliefs-page-header{background:var(--cream); padding:52px 0 20px; text-align:center;}

/* Persistent floating return control — restrained (small, sage secondary
   colour already used elsewhere for secondary actions like "Watch Live",
   not the gold primary-CTA colour), bottom-left so it never sits over a
   belief's +/- toggle (right-aligned) or the sticky header's controls. */
.beliefs-float-back{
  position:fixed; left:16px; bottom:16px; z-index:55;
  display:inline-flex; align-items:center;
  background:var(--sage); color:#fff;
  padding:9px 16px; border-radius:6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "PingFang TC", "Microsoft JhengHei", Helvetica, sans-serif;
  font-size:12.5px; font-weight:600;
  text-decoration:none; letter-spacing:0.01em;
  box-shadow:0 2px 10px rgba(27,39,64,0.28);
  transition:background 0.2s;
}
.beliefs-float-back:hover{background:var(--sage-dark);}
.beliefs-float-back:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
@media(max-width:600px){
  .beliefs-float-back{font-size:12px; padding:8px 14px; left:12px; bottom:14px;}
}

.beliefs-intro-note{font-size:13px; color:#6B7186; margin-top:-18px; margin-bottom:30px; max-width:640px;}
/* Category headings don't set their own scroll-margin-top: the global
   html{scroll-padding-top} (set dynamically by updateHeaderScrollOffset()
   in js/beliefs.js) already accounts for the sticky header, so adding a
   second offset here would push headings too far down. */
.belief-category{margin-bottom:32px;}
.belief-category:last-child{margin-bottom:0;}
/* Rendered by renderBeliefs() (js/beliefs.js) as an <a href="#<category-id>">
   rather than a plain heading — on desktop/tablet this looks identical to a
   plain heading (colour/underline are overridden below); it only becomes a
   functional control at the mobile breakpoint below. */
.belief-category-title{
  display:block; text-decoration:none; cursor:default;
  font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--sage-dark);
  font-weight:700; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid #EFE9DC;
}
.belief-item{border:1px solid #E7E0D2; border-radius:6px; margin-bottom:10px; overflow:hidden; background:#fff;}
.belief-item summary{
  cursor:pointer; padding:14px 18px; font-size:15px; font-weight:600; list-style:none;
  display:flex; align-items:baseline; gap:10px; -webkit-tap-highlight-color:transparent; min-height:24px;
}
.belief-item summary::-webkit-details-marker{display:none;}
.belief-item summary .belief-num{color:var(--gold); font-family: Georgia, "Times New Roman", serif; flex-shrink:0;}
.belief-item summary .belief-num-title{flex:1;}
.belief-item summary .belief-toggle{margin-left:auto; font-size:20px; color:var(--sage); flex-shrink:0; transition:transform 0.2s;}
.belief-item[open] summary .belief-toggle{transform:rotate(45deg);}
.belief-item[open] summary{border-bottom:1px solid #EFE9DC;}
.belief-body{padding:16px 18px 20px; font-size:14.5px; color:#3A4257;}
.belief-body p{margin-bottom:12px;}
.belief-refs{font-size:12.5px; color:var(--sage-dark); line-height:1.6;}
/* Per-belief category-return link. Lives inside .belief-body, so it's only
   visible once a visitor has actually opened that belief — nothing extra
   shows on the closed accordion. Points to the matching category CARD on
   the homepage (index.html#cat-<id>), not an in-page heading — see
   renderBeliefs() in js/beliefs.js. Small, muted, not a primary action. */
.belief-return{
  display:inline-block; margin-top:4px;
  font-size:12.5px; font-weight:600; color:var(--sage-dark);
  text-decoration:none;
}
.belief-return:hover, .belief-return:focus-visible{text-decoration:underline;}

/* Mobile Beliefs navigation. On phones, a long category (e.g. Church, 7
   beliefs) can put a visitor several screens deep with the category name
   scrolled out of sight — the only way back was to scroll all the way up,
   or use the floating "Back to Our Beliefs" control, which returns to the
   homepage rather than to that category. Pinning the category title under
   the site header as visitors scroll through its beliefs keeps that
   context visible, and because the title (.belief-category-title above) is
   an <a href="#<category-id>"> pointing at its own category's container,
   tapping it re-scrolls straight back to the top of that same category —
   a native in-page anchor click, using the --header-h value
   updateHeaderScrollOffset() already calculates (js/beliefs.js) so it
   lands correctly clear of the sticky header in any language, on any phone
   width. Desktop/tablet are unaffected. */
@media(max-width:600px){
  .belief-category-title{
    position:sticky; top:var(--header-h, 60px); z-index:40;
    background:#fff; cursor:pointer;
  }
}