/*
  DESIGN PLAN — New Hope Church (Monochrome Edition)
  ------------------------------------------------------------
  Color (Strict Black & White)
    --ink         #000000  pure black, main background / high-contrast text
    --paper       #FFFFFF  pure white, surface / light background
    --ink-soft    #121212  deep off-black for subtle contrast surfaces
    --paper-soft  #F5F5F5  subtle off-white for muted backgrounds/cards
    --line        #E5E5E5  clean hairline border on light background
    --line-dark   #262626  clean hairline border on dark background
    --muted       #666666  mid-tone gray for secondary body text

  Type
    Display: 'Fraunces' — oversized stacked headlines
    UI/Body: 'Work Sans' — clean modern sans-serif
  
  Layout
    Oversized stacked display headlines, minimal structural grids,
    pill-shaped nav CTA, high-contrast monochrome aesthetic.

  Contrast notes
    The header and footer are solid black surfaces, so every element
    that lives inside them (logo mark, nav links, toggle, buttons) is
    explicitly flipped to white/paper here rather than inheriting the
    default ink-on-paper rules meant for the rest of the page. The
    mobile nav panel drops back onto a white surface, so its own text
    is flipped back to ink within that breakpoint.
  ------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink: #000000;
  --paper: #FFFFFF;
  --ink-soft: #121212;
  --paper-soft: #F5F5F5;
  --line: #E5E5E5;
  --line-dark: #262626;
  --muted: #666666;
  --max: 1600px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- hero entrance ---------- */

@keyframes rise-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero-in > *{
  opacity: 0;
  animation: rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-in > *:nth-child(1){ animation-delay: 0.05s; }
.hero-in > *:nth-child(2){ animation-delay: 0.2s; }
.hero-in > *:nth-child(3){ animation-delay: 0.35s; }
.hero-in > *:nth-child(4){ animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce){
  .hero-in > *{ animation: none; opacity: 1; }
}

/* ---------- header / nav (black bar, white content) ---------- */

.site-header{
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  max-width: var(--max);
  margin: 0 auto;
  gap: 24px;
}

.logo{
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--ink);
}

/* header logo sits on black, footer logo already sets its own inline color */
.site-header .logo{ color: var(--paper); }

.logo .mark{
  width: 40px;
  height: 50px;
  flex: none;
  position: relative;
  top: -4px; 
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}

.nav-links a{
  color: var(--paper);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.nav-links a:hover{ border-color: var(--paper); }

.nav-links a.active{ border-color: var(--paper); font-weight: 600; }

.nav-right{
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle{
  border: 1px solid var(--paper);
  background: transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-toggle:hover{
  background: var(--paper);
  color: var(--ink);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Work Sans', sans-serif;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:hover{ transform: translateY(-1px); }

.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--ink-soft); opacity: 0.85; }

.btn-ghost{ border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }

.btn-on-dark{ border-color: var(--paper); color: var(--paper); background: transparent; }
.btn-on-dark:hover{ background: var(--paper); color: var(--ink); }

/* nav buttons sit on the black header — flip both variants to stay visible */
.site-header .btn-primary{ background: var(--paper); color: var(--ink); }
.site-header .btn-primary:hover{ background: var(--paper-soft); }

.site-header .btn-ghost{ border-color: var(--paper); color: var(--paper); }
.site-header .btn-ghost:hover{ background: var(--paper); color: var(--ink); }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--paper);
  margin: 5px 0;
}

/* --------church maps--------- */
.church-item{
  display:flex; flex-direction:column; gap:4px; text-align:left;
  padding:14px 16px; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); cursor:pointer; font-family:'Work Sans', sans-serif;
  transition:border-color .15s ease, background .15s ease;
}
.church-item span{ font-size:13px; color:var(--muted); }
.church-item:hover{ border-color:var(--ink); }
.church-item.active{ border-color:var(--ink); background:var(--line); }

.map-picker{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.map-frame-wrap{
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-soft);
}

.map-frame-wrap iframe{
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

.church-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.church-item strong{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}

@media (max-width: 760px){
  .map-picker{ grid-template-columns:1fr !important; }
}


/* ---------- clickable-feel cards (visit / groups / online / events) ---------- */
#visit, #groups, #online, #events{
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Connect page card hover lift */
#visit:hover, #groups:hover, #online:hover, #events:hover{
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

#visit:active, #groups:active, #online:active, #events:active{
  transform: translateY(-1px);
}

/* ---------- footer ---------- */

.site-footer{
  background: var(--ink);
  color: var(--paper);
  padding: 64px 0 28px;
  margin-top: 120px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}

.footer-grid h4{
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--paper);
  margin: 0 0 14px;
}

.footer-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-grid li{ margin-bottom: 10px; font-size: 15px; }
.footer-grid a{ opacity: 0.7; transition: opacity 0.15s ease; }
.footer-grid a:hover{ opacity: 1; }

.footer-brand p{
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  max-width: 32ch;
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- generic section utilities ---------- */

section{ padding: 96px 0; }
section.tight{ padding: 64px 0; }

.section-head{
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head h2{ font-size: clamp(32px, 4vw, 44px); }

.section-head p{
  margin-top: 14px;
  font-size: 17px;
  color: var(--muted);
}

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card .tag{
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.card h3{ font-size: 22px; }

.card p{ color: var(--muted); font-size: 15px; margin-bottom: 0; }

.card .btn{ margin-top: auto; align-self: flex-start; }

.art-block{
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-soft);
  border: 1px solid var(--line);
}

/* ---------- mobile nav ---------- */

@media (max-width: 900px){
  .nav-links{
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 32px;
    gap: 20px;
    font-size: 20px;
    display: none;
    overflow-y: auto;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ color: var(--ink); }
  .nav-links a:hover{ border-color: var(--ink); }
  .nav-links a.active{ border-color: var(--ink); }
  .nav-toggle{ display: block; }
  .nav-right .btn-ghost{ display: none; }
  .two-col, .card-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  section{ padding: 64px 0; }
}

@media (max-width: 560px){
  .wrap{ padding: 0 20px; }
  .nav{ padding: 16px 20px; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/*GROUPS PAGE*/

/* ── Hero: light background, text left / art-block right ── */
.groups-hero { 
  padding: 96px 0;
}

.groups-hero h1 { color: var(--ink-soft) }

.groups-hero p {
  color: var(--ink-soft);
  line-height: 1.65;
}

.groups-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.groups-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Group types section ── */
.group-types {
  padding: 96px 0;
  background: var(--paper);
}

.group-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  align-items: stretch; 
  margin-top: 52px;
}

.group-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.group-card h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.group-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

/* ── Dark square button (group cards) ── */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Work Sans', sans-serif;
  border-radius: 4px;
  text-decoration: none;
  align-self: flex-start;
  margin-top: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
  border: none;
  cursor: pointer;
}

.btn-dark:hover {
  background: #333;
  transform: translateY(-1px);
}

/* ── Groups responsive ── */
@media (max-width: 900px) {
  .groups-hero  { padding: 64px 0; }
  .group-cards  { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 600px) {
  .groups-hero .two-col { grid-template-columns: 1fr; }
  .group-cards           { grid-template-columns: 1fr; }
  .group-types           { padding: 64px 0; }
}

/*GIVE PAGE — giving options*/

.giving{ background: var(--ink); color: var(--paper); }
.giving-in{ max-width: 860px; text-align: center; }
.giving h2, .giving h3{ color: var(--paper); }
.giving h2{ font-size: clamp(30px, 4vw, 44px); }
.giving :focus-visible{ outline-color: var(--paper); }

.giving-sub{ font-size: clamp(24px, 3vw, 32px); margin: 56px 0 24px; }

.seg{
  display: grid;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  overflow: hidden;
  margin: 32px 0 0;
  background: var(--ink-soft);
}
.seg-2{ grid-template-columns: 1fr 1fr; }
.seg-3{ grid-template-columns: repeat(3, 1fr); margin-top: 0; }

.seg-btn{
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: none;
  border-right: 1px solid var(--line-dark);
  padding: 22px 12px;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-btn:last-child{ border-right: none; }
.seg-btn:hover{ background: #1c1c1c; color: var(--paper); }
.seg-btn.active{ background: #333; color: var(--paper); }

.giving-desc{
  margin: 24px auto 0;
  max-width: 52ch;
  font-size: 18px;
  color: rgba(255,255,255,0.85);
}

/* fund toggle: show only the text that matches the chosen fund */
.giving[data-fund="tithe"] [data-fund-only="special"],
.giving[data-fund="special"] [data-fund-only="tithe"]{ display: none; }

.giving-panel{
  text-align: left;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  background: var(--ink-soft);
  padding: 32px;
}
.giving-panel[hidden]{ display: none; }

.panel-lead{ font-size: 18px; color: var(--paper); margin-bottom: 8px; }
.panel-sub{ color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.panel-note{ font-size: 14px; color: rgba(255,255,255,0.6); margin: 16px 0 0; }

.detail-list{ margin-top: 20px; border-top: 1px solid var(--line-dark); }
.detail-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}
.detail-label{
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
}
.detail-value{ display: block; font-size: 18px; font-weight: 600; word-break: break-all; }
.detail-value[data-placeholder]{ color: rgba(255,255,255,0.4); font-style: italic; font-weight: 500; }

.copy-btn{
  flex: none;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.copy-btn:hover:not(:disabled){ background: var(--paper); color: var(--ink); }
.copy-btn:disabled{ opacity: 0.3; cursor: not-allowed; }

.chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 24px; }
.chip{
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover{ border-color: var(--paper); color: var(--paper); }
.chip.active{ background: var(--paper); color: var(--ink); border-color: var(--paper); }

.wallet-body{ display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
.wallet-body[hidden]{ display: none; }
.qr-box{
  aspect-ratio: 1 / 1;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}
.wallet-body img{ width: 100%; border-radius: 12px; background: var(--paper); }
.wallet-help{ color: rgba(255,255,255,0.75); font-size: 15px; }
.wallet-info .detail-row:first-of-type{ border-top: 1px solid var(--line-dark); }

@media (max-width: 600px){
  .seg-btn{ font-size: 13px; padding: 18px 6px; }
  .giving-panel{ padding: 22px; }
  .wallet-body{ grid-template-columns: 1fr; }
  .qr-box{ max-width: 200px; }
}

.panel-lead + .wallet-body{ margin-top: 24px; }

/* PHOTO STRIP (home page) — continuous, seamless loop*/

.marquee{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  height: clamp(220px, 38vw, 420px);
  background: var(--paper-soft);
  contain: layout paint;
  isolation: isolate;
}

.marquee-track{
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation: marquee-run var(--dur, 60s) linear infinite;
  animation-play-state: paused;
  opacity: 0;                       
  transition: opacity 0.1s linear;
}

.marquee.ready .marquee-track{ animation-play-state: running; opacity: 1; }
.marquee.offscreen .marquee-track{ animation-play-state: paused; }  
@keyframes marquee-run{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(var(--shift, -50%), 0, 0); }
}

.marquee-item{
  flex: none;
  height: 100%;
  margin: 0;            
}

.marquee-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* faded photo layer behind the hero text */
.hero-photo-section{ position: relative; overflow: hidden; }
.hero-photo-section > .wrap{ position: relative; z-index: 1; }

.marquee-bg{
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  background: none;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none !important; }
  .marquee{ overflow-x: auto; }
}