/* Components. Each block is one reusable piece. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 0; border-radius: var(--r-md); padding: .75rem 1.15rem;
  font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: #D4A65A; color: var(--navy-deep); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-soft); color: #fff; }
.btn--line { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--line:hover { background: var(--cream); color: var(--navy); }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--live { background: var(--live); color: #fff; }
.btn--lg { padding: .9rem 1.4rem; font-size: var(--fs-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Chips / tags ---------- */
.chip { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); background: var(--gold); color: var(--navy-deep); }
.chip--navy { background: var(--navy); color: #fff; }
.chip--live { background: var(--live); color: #fff; }
.chip--soft { background: #F3ECE0; color: var(--gold-dark); }

/* ---------- Announcement bar ---------- */
.announce { background: var(--gold); color: var(--navy-deep); text-align: center; font-weight: 600; font-size: var(--fs-sm); padding: .55rem var(--gutter); }
.announce a { color: inherit; }

/* ---------- Site header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header__bar { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--navy); flex: none; }
.brand__mark { width: 34px; height: 34px; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.1; display: block; }
.brand__tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); display: block; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: .5rem .65rem; border-radius: var(--r-sm); font-size: var(--fs-sm); color: #333; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--cream); color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.menu-toggle { display: none; background: none; border: 0; padding: .4rem; color: var(--navy); }
.menu-toggle svg { width: 26px; height: 26px; }

/* Watch Live button: three states, set by data-state="idle | soon | live" */
.live-btn { display: inline-flex; align-items: center; gap: 0; border: 0; border-radius: var(--r-pill); padding: .5rem .95rem; font-weight: 700; font-size: var(--fs-xs); text-decoration: none; white-space: nowrap; }
.live-btn__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: .45rem; flex: none; }
.live-btn[data-state="idle"] { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.live-btn[data-state="soon"] { background: var(--navy); color: #fff; }
.live-btn[data-state="soon"] .live-btn__dot { background: var(--gold); }
.live-btn[data-state="live"] { background: var(--live); color: #fff; animation: live-pulse 2s infinite; }
.live-btn .live-btn__long { display: inline; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(198,40,40,.5); } 70% { box-shadow: 0 0 0 10px rgba(198,40,40,0); } 100% { box-shadow: 0 0 0 0 rgba(198,40,40,0); } }

@media (max-width: 1180px) {
  .menu-toggle { display: block; margin-left: auto; order: 3; }
  .header-actions { order: 2; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); display: none; margin: 0; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: var(--sp-2) var(--gutter) var(--sp-4); }
  .nav a { padding: .8rem .5rem; font-size: var(--fs-base); border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none !important; }
  .brand__tag { display: none; }
}
@media (max-width: 640px) {
  /* Phones: row 1 = name + menu icon, row 2 = Give + Watch Live, always visible */
  .site-header__bar { flex-wrap: wrap; gap: 8px 12px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .brand { flex: 1 1 0; min-width: 0; }
  .brand__name { font-size: 1rem; }
  .menu-toggle { order: 2; margin-left: 0; }
  .header-actions { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .header-actions .btn, .header-actions .live-btn { justify-content: center; width: 100%; padding: .7rem .8rem; font-size: var(--fs-sm); }
}

/* ---------- Sections ---------- */
.section { padding: var(--sp-8) 0; }
.section--alt { background: #fff; }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.section__head p { color: var(--charcoal); margin: 0; }
.link-arrow { font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " →"; }
@media (max-width: 640px) { .section { padding: var(--sp-7) 0; } }

/* Page header (inner pages) */
.page-head { position: relative; color: #fff; background: var(--navy); padding: var(--sp-7) 0 var(--sp-6); overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; background: var(--head-img, none) center/cover; opacity: .35; }
.page-head > .container { position: relative; }
.page-head h1 { color: #fff; }
.page-head p { color: #D6DEEA; max-width: 60ch; margin: 0; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.card--center { text-align: center; }
.service-card .service-card__time { display: block; font-size: var(--fs-xl); font-weight: 700; color: var(--navy); }
.service-card h3 { margin-bottom: var(--sp-1); }
.service-card .service-card__icon { font-size: 1.6rem; color: var(--gold-dark); }

.event-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.event-card__img { position: relative; height: 110px; background: linear-gradient(135deg, var(--navy), var(--navy-soft)); }
.event-card__img .chip { position: absolute; top: 10px; left: 10px; }
.event-card__body { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
.event-card h3 { font-size: 1rem; margin-bottom: 4px; }
.date-chip { flex: none; width: 48px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 0; background: var(--cream); }
.date-chip small { display: block; font-size: 12px; letter-spacing: .12em; color: var(--gold-dark); font-weight: 700; }
.date-chip b { font-family: var(--font-head); font-size: 1.4rem; color: var(--navy); line-height: 1; }

.sermon-card { text-decoration: none; color: inherit; display: block; }
.sermon-card:hover { color: inherit; }
.sermon-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 7%; background: linear-gradient(135deg, var(--navy), #34557F); container-type: inline-size; }
.sermon-thumb__series { font-size: max(12px, 4.6cqw); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold-soft); }
.sermon-thumb__title { font-family: var(--font-head); font-size: max(18px, 9cqw); line-height: 1.1; margin: 2cqw 0; font-weight: 600; }
.sermon-thumb__ref { font-size: max(12px, 4.6cqw); opacity: .92; }
.sermon-thumb__len { position: absolute; right: 5%; bottom: 6%; background: rgba(0,0,0,.6); font-size: max(12px, 4.4cqw); padding: .6cqw 2cqw; border-radius: 1.5cqw; }
.sermon-card h3 { font-size: 1rem; margin: var(--sp-3) 0 2px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field input, .field select, .field textarea { width: 100%; background: #fff; border: 1px solid #C9C2B1; border-radius: var(--r-md); padding: .7rem .8rem; min-height: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--navy); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #C8D1DE; padding: var(--sp-7) 0 var(--sp-5); font-size: var(--fs-sm); }
.site-footer h2 { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-3); }
.site-footer a { color: #C8D1DE; text-decoration: none; display: block; margin-bottom: 6px; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand, .site-footer .brand__name { color: #fff; }
.site-footer__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-5); }
.site-footer__copy { border-top: 1px solid #2A3B57; margin-top: var(--sp-5); padding-top: var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); }
@media (max-width: 800px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__cols { grid-template-columns: 1fr; } }

/* ---------- Icons ---------- */
.icon { display: inline-block; width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.17em; flex: none; }
.icon-badge { width: 46px; height: 46px; border-radius: 50%; background: var(--cream); color: var(--gold-dark); display: inline-grid; place-items: center; margin-bottom: var(--sp-3); }
.icon-badge .icon { width: 22px; height: 22px; }
.card--center .icon-badge { margin-left: auto; margin-right: auto; }
.life-card h3 { margin-bottom: var(--sp-1); }
.life-card p { margin: 0; }
.service-card .meta { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; background: var(--navy-deep); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,34,58,.94) 24%, rgba(19,34,58,.5) 68%, rgba(19,34,58,.2)), var(--hero-img) center/cover; }
.hero > .container { position: relative; padding-top: clamp(3.5rem, 9vw, 7rem); padding-bottom: clamp(3.5rem, 9vw, 7rem); }
.hero h1 { color: #fff; max-width: 13ch; }
.hero p { max-width: 48ch; color: #E6ECF4; font-size: 1.0625rem; margin: var(--sp-4) 0 var(--sp-5); }
@media (max-width: 700px) { .hero::before { background: linear-gradient(rgba(19,34,58,.82), rgba(19,34,58,.82)), var(--hero-img) center/cover; } }

/* ---------- Split / latest / pastor / believe ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.split__img { border-radius: var(--r-lg); min-height: 280px; background-size: cover; background-position: center; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .split__img { min-height: 220px; } }

.latest { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-6); align-items: center; }
@media (max-width: 760px) { .latest { grid-template-columns: 1fr; } }
.latest h2 { margin-bottom: var(--sp-2); }

.pastor { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-6); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.pastor img { width: 100%; border-radius: var(--r-md); aspect-ratio: 4/5; object-fit: cover; }
.pastor__quote { margin: var(--sp-2) 0 var(--sp-4); font-family: var(--font-head); font-size: var(--fs-lg); line-height: 1.55; color: var(--navy); }
@media (max-width: 700px) { .pastor { grid-template-columns: 1fr; } .pastor img { max-width: 220px; } }

.believe { position: relative; color: #fff; background: var(--navy-deep); padding: var(--sp-8) 0; overflow: hidden; }
.believe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,34,58,.93) 30%, rgba(19,34,58,.35) 75%, rgba(19,34,58,.15)), var(--believe-img) center/cover; }
@media (max-width: 700px) { .believe::before { background: linear-gradient(rgba(19,34,58,.78), rgba(19,34,58,.78)), var(--believe-img) center/cover; } }
.believe > .container { position: relative; }
.believe h2 { color: #fff; }
.believe p { max-width: 60ch; color: #D6DEEA; margin-bottom: var(--sp-5); }

/* ---------- Event card variants and sermon thumb variants ---------- */
.event-card__img { background: linear-gradient(135deg, rgba(27,45,69,.88), rgba(52,85,127,.82)), url(../images/church-exterior-day.jpg) center/cover; }
.event-card__img--youth   { background-image: linear-gradient(135deg, rgba(34,56,74,.9), rgba(63,122,140,.8)), url(../images/church-exterior-day.jpg); }
.event-card__img--women   { background-image: linear-gradient(135deg, rgba(74,46,62,.9), rgba(134,86,110,.8)), url(../images/church-exterior-day.jpg); }
.event-card__img--worship { background-image: linear-gradient(135deg, rgba(58,42,30,.9), rgba(138,100,41,.8)), url(../images/sanctuary.jpg); }
.event-card__img--study   { background-image: linear-gradient(135deg, rgba(27,45,69,.9), rgba(52,85,127,.8)), url(../images/sanctuary.jpg); }
.event-card__img--men     { background-image: linear-gradient(135deg, rgba(47,59,42,.9), rgba(92,112,80,.8)), url(../images/church-exterior-day.jpg); }
.event-card__img--fellowship { background-image: linear-gradient(135deg, rgba(74,46,42,.9), rgba(160,100,62,.8)), url(../images/church-exterior-day.jpg); }
.event-card__img { background-size: cover; background-position: center; }
.sermon-thumb { background: linear-gradient(135deg, rgba(27,45,69,.92), rgba(52,85,127,.82)), url(../images/sanctuary.jpg) center/cover; }
.sermon-thumb--john15 { background-image: linear-gradient(135deg, rgba(74,46,42,.92), rgba(138,90,60,.82)), url(../images/sanctuary.jpg); background-size: cover; background-position: center; }
.sermon-thumb--titus  { background-image: linear-gradient(135deg, rgba(46,43,69,.92), rgba(90,82,133,.82)), url(../images/sanctuary.jpg); background-size: cover; background-position: center; }
.sermon-thumb--pm     { background-image: linear-gradient(135deg, rgba(35,57,47,.92), rgba(76,107,85,.82)), url(../images/sanctuary.jpg); background-size: cover; background-position: center; }
.event-card .meta .icon, .meta .icon { width: 1em; height: 1em; }

/* Background photos live here, because url() in a CSS variable resolves from the stylesheet's folder */
.hero--dusk { --hero-img: url(../images/church-exterior-dusk.jpg); }
.believe--steeple { --believe-img: url(../images/steeple-sunset.jpg); }
.page-head--day { --head-img: url(../images/church-exterior-day.jpg); }
.page-head--dusk { --head-img: url(../images/church-exterior-dusk.jpg); }
.page-head--sanctuary { --head-img: url(../images/sanctuary.jpg); }
.page-head--steeple { --head-img: url(../images/steeple-sunset.jpg); }

.site-footer .brand { display: flex; margin-bottom: var(--sp-3); }
.site-footer address a { display: inline; margin: 0; }

/* The header holds the church name, seven links, Give, and the live button (widest when it says "LIVE · Watch now"), so it gets a little more room than the page body. */
.site-header .container { max-width: 1240px; }
.nav { min-width: 0; }