/* ============================================================
   Hongping Ministries · 生命之道
   Shared design system — used across all pages
   ============================================================ */

:root{
  --serif-en: "Cormorant Garamond", serif;
  --serif-cn: "Noto Serif SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", sans-serif;

  --gold: #d6b873;
  --gold-soft: #f3e6c4;
  --ink: #3a2e20;
  --ink-soft: #7a6a4a;
  --cream: #fffdf6;
  --cream-deep: #fdf6e8;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  line-height:1.9;
}
::selection{ background: var(--gold); color:#1c150f; }

/* ============ INNER PAGE BASE ============ */
body.page{
  background: linear-gradient(180deg, var(--cream-deep) 0%, var(--cream) 100%);
  color: var(--ink);
}

/* ============ NAV ============ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.4rem 6vw;
}
.logo{
  font-family: var(--serif-en); font-size:1.05rem; letter-spacing:3px;
  font-weight:500; text-decoration:none; display:flex; align-items:center; gap:0.4em;
}
.logo b{ font-family: var(--serif-cn); font-weight:700; font-style:normal; white-space:nowrap; flex-shrink:0; }

body.journey nav{ mix-blend-mode:difference; pointer-events:none; }
body.journey .logo{ color:#fff; pointer-events:all; }
body.journey .nav-menu a{ color:#fff; pointer-events:all; }
body.journey .nav-toggle{ color:#fff; pointer-events:all; }

body.page nav{
  background: rgba(255,253,246,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(58,46,32,0.06);
}
body.page .logo{ color: var(--ink); }
body.page .nav-menu a{ color: var(--ink); }
body.page .nav-toggle{ color: var(--ink); }

.nav-menu{ display:flex; align-items:center; gap:2.2rem; }
.nav-menu a{
  font-size:0.8rem; letter-spacing:3px; text-decoration:none;
  text-transform:uppercase; opacity:0.7; transition: opacity .3s ease, color .3s ease;
  position:relative; padding-bottom:4px;
}
.nav-menu a:hover{ opacity:1; }
.nav-menu a.nav-give{
  border:1px solid currentColor; padding:0.5rem 1.3rem; border-radius:999px; opacity:0.9;
}
.nav-menu a.nav-give:hover{ background: var(--gold); border-color: var(--gold); color:#1c150f; opacity:1; }
.nav-menu a.active{ opacity:1; }
.nav-menu a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background: var(--gold);
}

.nav-toggle{
  display:none; background:none; border:none; font-size:1.4rem; cursor:pointer;
  z-index:301; line-height:1; pointer-events:all;
}

/* ---- language toggle ---- */
.lang-toggle{
  margin-left:auto; margin-right:1.6rem;
  background:none; border:1px solid currentColor; color:inherit;
  font-family: var(--serif-en); font-size:0.72rem; font-weight:500; letter-spacing:2px;
  padding:0.35rem 0.9rem; border-radius:999px; cursor:pointer; line-height:1;
  opacity:0.75; transition: all .3s ease; pointer-events:all; z-index:301;
}
.lang-toggle:hover{ opacity:1; border-color: var(--gold); color: var(--gold); }
body.journey .lang-toggle{ color:#fff; }
body.page .lang-toggle{ color: var(--ink); }
@media (max-width: 860px){
  .lang-toggle{ margin-right:1.1rem; }
}

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:fixed; top:0; left:0; width:100%; height:100vh; flex-direction:column; justify-content:center; gap:2rem;
    background: var(--cream); transform: translateY(-100%); transition: transform .5s cubic-bezier(.2,.7,.2,1);
    pointer-events:all !important;
  }
  body.journey .nav-menu a{ color: var(--ink); }
  .nav-menu.open{ transform: translateY(0); }
  .nav-menu a{ font-size:1.2rem; opacity:1; }

  /* When the fullscreen menu is open on journey pages, drop the
     difference blend so the menu background is fully opaque and
     the toggle stays visible against the cream panel. */
  body.journey nav:has(.nav-menu.open){ mix-blend-mode: normal; }
  body.journey nav:has(.nav-menu.open) .nav-toggle,
  body.journey nav:has(.nav-menu.open) .lang-toggle{ color: var(--ink); }
}

/* ============ FOOTER ============ */
footer.site-footer{
  text-align:center; padding:3rem 6vw; font-size:0.75rem; letter-spacing:2px;
  color:#8a7958; background: var(--cream);
  border-top: 1px solid rgba(58,46,32,0.06);
}
footer.site-footer .foot-links{
  display:flex; justify-content:center; gap:2rem; margin-bottom:1.2rem; flex-wrap:wrap;
}
footer.site-footer .foot-links a{ color:#8a7958; text-decoration:none; letter-spacing:2px; transition: color .3s ease; }
footer.site-footer .foot-links a:hover{ color: var(--ink); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:1rem 2.6rem; border-radius:999px; font-size:0.85rem; letter-spacing:3px;
  text-decoration:none; text-transform:uppercase; transition: all .35s cubic-bezier(.2,.7,.2,1);
  border:1px solid currentColor; cursor:pointer; background:none; font-family:inherit;
}
.btn-fill{ background:#2e2415; color:#fdf6e8; border-color:#2e2415; }
.btn-fill:hover{ background:#5c4827; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(46,36,21,0.25); }
.btn-ghost{ color:#5c4d35; }
.btn-ghost:hover{ background:#2e2415; color:#fdf6e8; transform: translateY(-3px); }
.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.cta-row.center{ justify-content:center; }

/* ============ TAGS ============ */
.tags{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:1rem; }
.tag{
  border:1px solid currentColor; opacity:0.55; border-radius:999px;
  padding:0.45rem 1.3rem; font-size:0.8rem; letter-spacing:2px;
  transition: all .3s ease;
}
.tag:hover{ opacity:1; }

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform: translateY(0); }
.d1{ transition-delay:.05s; } .d2{ transition-delay:.18s; } .d3{ transition-delay:.32s; } .d4{ transition-delay:.46s; } .d5{ transition-delay:.6s; }

/* ============ PAGE HEADER (inner pages) ============ */
.page-header{
  min-height:48vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding: 14vh 6vw 6vh; position:relative; overflow:hidden;
}
.page-header .glow{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(214,184,115,0.35), transparent 70%);
  filter: blur(70px); top:-15%; right:-10%; pointer-events:none;
}
.eyebrow{
  font-size:0.72rem; letter-spacing:5px; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom:1.6rem; display:flex; align-items:center; gap:0.8rem;
  position:relative; z-index:1;
}
.eyebrow .ln{ display:inline-block; width:36px; height:1px; background:currentColor; opacity:0.5; }
.page-header h1{
  font-family: var(--serif-cn); font-weight:700; letter-spacing:6px;
  font-size: clamp(2.6rem, 7vw, 5rem); color: var(--ink); position:relative; z-index:1;
}
.page-header h1 small{
  display:block; font-family: var(--serif-en); font-style:italic; font-weight:400;
  font-size: clamp(1rem, 2.2vw, 1.5rem); letter-spacing:3px; color: var(--ink-soft);
  margin-top:1rem;
}
.page-header p{
  max-width:600px; margin-top:1.6rem; font-size:1.02rem; color: var(--ink-soft);
  position:relative; z-index:1;
}

/* ============ GENERIC SECTION ============ */
.section{ padding: 6rem 6vw; max-width:1280px; margin:0 auto; }
.section-head{ margin-bottom:3rem; max-width:640px; }
.section-head h2{
  font-family: var(--serif-cn); font-weight:700; letter-spacing:3px;
  font-size: clamp(2rem, 4.5vw, 3rem); color: var(--ink); margin-bottom:0.6rem;
}
.section-head h3{
  font-family: var(--serif-en); font-style:italic; font-weight:400;
  font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing:2px; color: var(--ink-soft);
}
.section p.body-text{ max-width:640px; font-size:1.02rem; color: var(--ink-soft); margin-bottom:1.2rem; }

.grid2{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:4vw; align-items:center; }
.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:2rem; }
.grid4{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.6rem; }
@media (max-width: 900px){
  .grid2{ grid-template-columns:1fr; gap:2.5rem; }
  .grid3{ grid-template-columns: 1fr 1fr; gap:1.4rem; }
  .grid4{ grid-template-columns: 1fr 1fr; gap:1.2rem; }
}
@media (max-width: 560px){
  .grid3, .grid4{ grid-template-columns: 1fr; }
}

/* ============ CARDS ============ */
.card{
  background: rgba(255,255,255,0.55);
  border:1px solid rgba(58,46,32,0.08);
  border-radius:18px; padding:2rem;
  transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(58,46,32,0.08); }

/* team card */
.team-card{ text-align:center; }
.team-photo{
  width:120px; height:120px; border-radius:50%; margin:0 auto 1.2rem;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif-cn); font-size:2.2rem; color:#fff; font-weight:700;
}
.team-card h4{ font-family: var(--serif-cn); font-size:1.2rem; margin-bottom:0.3rem; color: var(--ink); }
.team-card .role{ font-size:0.8rem; letter-spacing:2px; color: var(--gold); text-transform:uppercase; margin-bottom:0.8rem; }
.team-card p{ font-size:0.92rem; color: var(--ink-soft); }

/* event card */
.event-card{ display:flex; gap:1.6rem; align-items:flex-start; }
.event-date{
  flex-shrink:0; width:74px; height:74px; border-radius:14px;
  background: linear-gradient(160deg, var(--gold), #c9a86a);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--serif-en);
}
.event-date .d{ font-size:1.6rem; font-weight:600; line-height:1; }
.event-date .m{ font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; margin-top:2px; }
.event-card h4{ font-family: var(--serif-cn); font-size:1.25rem; margin-bottom:0.4rem; color: var(--ink); }
.event-meta{ font-size:0.82rem; color: var(--gold); letter-spacing:1px; margin-bottom:0.6rem; }
.event-card p{ font-size:0.92rem; color: var(--ink-soft); }

/* give card */
.give-card h4{ font-family: var(--serif-cn); font-size:1.3rem; margin-bottom:0.6rem; color: var(--ink); }
.give-card .icon{ font-size:1.8rem; margin-bottom:1rem; display:block; }
.give-card p{ font-size:0.92rem; color: var(--ink-soft); margin-bottom:0.4rem; }
.give-card .field{
  display:flex; justify-content:space-between; font-size:0.9rem; padding:0.5rem 0;
  border-bottom:1px dashed rgba(58,46,32,0.12);
}
.give-card .field span:first-child{ color: var(--ink-soft); }
.give-card .field span:last-child{ font-weight:600; color: var(--ink); }
.give-card .qr-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:160px; height:160px; margin:0.6rem auto 1rem;
  border:1px dashed rgba(58,46,32,0.25); border-radius:12px;
  font-size:0.85rem; color: var(--ink-soft); background: rgba(58,46,32,0.04);
  padding:1rem;
}

/* ============ YOUTUBE EMBED (click-to-play) ============ */
.yt-embed{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  cursor:pointer; background: linear-gradient(145deg, #2e2415, #5c4827);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.yt-embed img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease; opacity:0.85;
}
.yt-embed:hover img{ transform: scale(1.04); }
.yt-embed::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,15,10,0.1) 40%, rgba(20,15,10,0.55) 100%);
}
.yt-play{
  position:relative; z-index:2; width:64px; height:64px; border-radius:50%;
  background: rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.5);
  color:#fff; font-size:1.4rem; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px); transition: all .3s ease;
}
.yt-embed:hover .yt-play{ background: var(--gold); border-color: var(--gold); color:#1c150f; transform: scale(1.08); }
.yt-caption{
  position:absolute; left:1.2rem; bottom:1rem; z-index:2; color:#fff;
  font-size:0.8rem; letter-spacing:3px; text-transform:uppercase; opacity:0.9;
}
.yt-embed.playing{ cursor:default; background:#000; }
.yt-embed.playing::after, .yt-embed.playing .yt-play, .yt-embed.playing .yt-caption, .yt-embed.playing img{ display:none; }
.yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.yt-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.6rem; }
@media (max-width: 760px){ .yt-list{ grid-template-columns:1fr; } }