/* Iglesia Cristiana El Getsemani: site styles.
   From the approved redesign mockups (Website-Updates/2026-10-09-redesign). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.c940764593.woff2) format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/lora-latin.6b102ab35a.woff2) format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url(/assets/fonts/lora-italic-latin.3d536d4956.woff2) format("woff2");
}

:root {
  --olive-950: #16200F;
  --olive-900: #1F2A1C;
  --olive-700: #2E4520;
  --olive-600: #3B5323;
  --sage-500: #6B8E4E;
  --sage-100: #E6EDDD;
  --sage-50: #F2F5EC;
  --tan-500: #C4A46C;
  --tan-700: #7E6230;
  --tan-100: #F4ECDC;
  --cream: #FBF9F4;
  --ink: #1E241B;
  --muted: #596155;
  --line: #E3E0D6;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(31, 42, 28, .10);
  --shadow-lg: 0 24px 60px rgba(31, 42, 28, .20);
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tan-500); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--olive-900); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

.i { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-lg { width: 28px; height: 28px; }
.i-inline { vertical-align: -5px; }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
@media (min-width: 760px) { .wrap { width: min(1180px, 100% - 64px); } }

[lang="en"].soft, .pair [lang="en"], .cols2 [lang="en"] { color: var(--muted); }
.sep { opacity: .55; margin: 0 .35em; }
.nowrap { white-space: nowrap; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.p-0 { padding: 0 !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tan-700);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  border-radius: 999px; padding: 13px 22px; border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn .en { font-weight: 500; opacity: .85; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--olive-600); color: #fff; }
.btn-primary:hover { background: var(--olive-700); box-shadow: var(--shadow); }
.btn-ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-light { background: #fff; color: var(--olive-700); }
.btn-outline { border-color: var(--olive-600); color: var(--olive-700); background: transparent; }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }
/* On phones a long bilingual button wraps onto two centred lines instead of squeezing */
@media (max-width: 520px) {
  main .btn { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 2px; column-gap: .5em; border-radius: 18px; }
  main .btn .sep { display: none; }
  .announce a, .announce > .sep:last-of-type { display: none; }
}

/* Announcement bar */
.announce { background: var(--olive-600); color: #F5F1E6; font-size: 14px; text-align: center; padding: 9px 16px; }
.announce a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.announce [lang="en"] { opacity: .82; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 249, 244, .985);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; gap: 18px; height: 80px; }
.logo img { height: 60px; width: auto; }
.nav { display: none; gap: 20px; margin-left: auto; font-size: 14.5px; font-weight: 500; }
.nav a { text-decoration: none; padding: 6px 1px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { border-color: var(--tan-500); }
.nav a[aria-current="page"] { border-color: var(--olive-600); }
.header .btn { margin-left: auto; }
.header .btn[aria-current="page"] { box-shadow: 0 0 0 3px var(--tan-500); }
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.mnav { display: none; border-top: 1px solid var(--line); background: var(--cream); }
.header.open .mnav { display: block; }
.mnav a { display: block; padding: 14px 20px; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
.mnav a[aria-current="page"] { color: var(--olive-600); font-weight: 700; }
@media (max-width: 520px) { .header .btn .en, .header .btn .sep { display: none; } .logo img { height: 52px; } }
@media (min-width: 1080px) {
  .nav { display: flex; }
  .header .btn { margin-left: 6px; }
  .menu-btn, .mnav, .header.open .mnav { display: none; }
}

/* Hero with a photo */
.hero { position: relative; color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(16, 26, 11, .9) 0%, rgba(16, 26, 11, .72) 46%, rgba(16, 26, 11, .32) 100%);
}
.hero .wrap { padding: 72px 0 132px; }
@media (min-width: 900px) { .hero .wrap { padding: 104px 0 160px; } }
.hero .eyebrow { color: var(--tan-500); }
.hero h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(2.7rem, 7.6vw, 5.4rem); line-height: 1.02; margin: 18px 0 8px; max-width: 12ch;
}
.hero .h-en { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 3.1vw, 2.15rem); color: #E7DCC2; margin: 0 0 26px; }
.hero .lede { max-width: 560px; font-size: 18.5px; }
.hero .lede p { margin: 0 0 8px; }
.hero .lede [lang="en"] { color: rgba(255,255,255,.8); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Inner pages' photo hero */
.hero--page .wrap { padding: 64px 0 128px; }
@media (min-width: 900px) { .hero--page .wrap { padding: 88px 0 150px; } }
.hero--page .hero-media img { object-position: center 32%; }
.hero--page h1 { max-width: 14ch; }
.hero--short .wrap { padding-bottom: 72px; }
@media (min-width: 900px) { .hero--short .wrap { padding-bottom: 96px; } }
/* The weekly services' pages: the text pages' olive band, no photo */
.hero--plain { background: radial-gradient(ellipse at 15% 0%, #34522A 0%, var(--olive-900) 62%); }
.hero--plain::before { content: none; }
.facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.facts li { display: inline-flex; flex-wrap: wrap; row-gap: 2px; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 7px 14px; font-size: 14.5px; }
.facts li > span { white-space: nowrap; }
.facts li [lang="en"] { opacity: .8; }
.facts .i { width: 18px; height: 18px; }

/* Plain band for text pages (rules, policies) */
.band { background: radial-gradient(ellipse at 15% 0%, #34522A 0%, var(--olive-900) 62%); color: #F1EDE2; }
.band .wrap { padding: 56px 0 52px; }
@media (min-width: 900px) { .band .wrap { padding: 72px 0 64px; } }
.band .eyebrow { color: var(--tan-500); }
.band h1 { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 14px 0 6px; }
.band .h-en { color: #D8CDB3; margin: 0; }
.band .lede { max-width: 640px; margin-top: 14px; }
.band .lede p { margin: 0 0 6px; }
.band .lede [lang="en"] { color: #C9C3B3; }

/* Service-times card overlapping the hero */
.times-card {
  position: relative; z-index: 2; margin: -88px auto 0; max-width: 560px;
  background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg);
  padding: 10px 18px; display: grid;
}
.slot { display: flex; align-items: center; gap: 14px; padding: 14px 4px; }
.slot + .slot, .times-card .where { border-top: 1px solid var(--line); }
.slot .ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.ico--tan { background: var(--tan-500); }
.ico--olive { background: var(--olive-600); }
.ico--sage { background: var(--sage-500); }
.slot .day { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.slot .time { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--olive-900); }
.slot .what { font-size: 14px; white-space: nowrap; }
.times-card .where { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 4px 12px; font-size: 15px; }
.times-card .where address { font-style: normal; display: flex; gap: 10px; align-items: center; }
@media (min-width: 1160px) {
  .times-card { max-width: none; grid-template-columns: 1fr 1.18fr 1fr 1.2fr; align-items: center; padding: 14px 26px; }
  .slot + .slot, .times-card .where { border-top: 0; border-left: 1px solid var(--line); padding-left: 22px; }
  .times-card .where { flex-direction: column; align-items: flex-start; padding: 6px 0 6px 22px; }
}

/* Sections */
.section { padding: 96px 0; }
@media (max-width: 759px) { .section { padding: 68px 0; } }
.section--tight { padding-top: 64px; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--olive-900);
  font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.08; margin: 14px 0 4px;
}
.section-head.sm { margin-bottom: 16px; }
.section-head.md { margin-bottom: 26px; }
.h-en { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--muted); font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin: 0 0 18px; }
.pair p { margin: 0 0 10px; }

/* First time */
.welcome .grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .welcome .grid { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.expect { display: grid; gap: 16px; }
@media (min-width: 600px) { .expect { grid-template-columns: 1fr 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.expect .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--sage-100); color: var(--olive-600); display: grid; place-items: center; margin-bottom: 14px; }
.expect h3 { font-size: 17px; margin: 0; font-weight: 600; }
.expect h3 [lang="en"] { color: var(--muted); font-weight: 500; }
.expect p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; }
.expect p[lang="en"] { color: var(--muted); margin-top: 4px; }
.cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Services */
.services { background: var(--sage-50); }
.cards3 { display: grid; gap: 20px; max-width: 560px; margin-inline: auto; }
@media (min-width: 900px) { .cards3 { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.svc {
  --c: var(--olive-600);
  background: #fff; border-radius: 22px; padding: 28px 26px 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; border-top: 5px solid var(--c);
}
.svc--tan { --c: var(--tan-500); }
.svc--sage { --c: var(--sage-500); }
.svc .ico { width: 58px; height: 58px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.svc .day { font-weight: 600; color: var(--olive-900); }
.svc .day [lang="en"] { color: var(--muted); font-weight: 500; }
.svc .time { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--olive-900); line-height: 1.2; }
.svc h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 12px 0 0; color: var(--olive-700); }
.svc .h3-en { font-family: var(--font-display); font-style: italic; color: var(--muted); margin: 0 0 10px; }
.svc p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; }
.svc p[lang="en"] { color: var(--muted); }
.more { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--olive-600); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.svc-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: center; text-align: center; color: var(--muted); }

/* Story */
.story { background: var(--cream); }
.story .grid { display: grid; gap: 48px; }
@media (min-width: 980px) { .story .grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.cols2 { display: grid; gap: 24px; }
@media (min-width: 700px) { .cols2 { grid-template-columns: 1fr 1fr; gap: 36px; } }
.cols2 p { margin: 0 0 14px; }
.col-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-700); margin-bottom: 10px; }
.pull {
  margin: 30px 0 0; padding: 22px 26px; border-left: 4px solid var(--tan-500); background: var(--tan-100);
  border-radius: 0 16px 16px 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.35; color: var(--olive-900);
}
.pull [lang="en"] { display: block; margin-top: 6px; font-style: italic; font-size: .82em; color: var(--muted); }

/* Events */
.ev-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .ev-grid { grid-template-columns: repeat(3, 1fr); } }
.ev { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.ev:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ev img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ev .body { padding: 18px 20px 22px; }
.ev .when { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan-700); }
.ev h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 6px 0 2px; color: var(--olive-900); }
.ev .h3-en { color: var(--muted); font-style: italic; font-family: var(--font-display); margin: 0; }

/* Events page (/eventos, filled in by the websiteEventos function) */
.svc .next { margin: auto 0 0; padding-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--olive-700); }
.svc .next [lang="en"] { color: var(--muted); font-weight: 500; }
.svc .where, .ev .where { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.svc p.where, .ev p.where { line-height: 1.45; }
.ev--info:hover { transform: none; box-shadow: none; }
.ev--info .body p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; }
.ev--info .body p[lang="en"] { color: var(--muted); margin-top: 4px; }
.ev--info .h3-en { margin-bottom: 4px; }
.ev--info .body p.ev-time { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--olive-900); margin-top: 6px; }
.events-updated { text-align: center; margin: 32px auto 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.head-row .section-head { margin-bottom: 0; }

/* Watch */
.watch { background: radial-gradient(ellipse at 15% 0%, #34522A 0%, var(--olive-900) 62%); color: #F1EDE2; }
.watch .grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .watch .grid { grid-template-columns: 1fr 1.15fr; } }
.watch .eyebrow { color: var(--tan-500); }
.watch .section-head h2 { color: #fff; }
.watch .h-en { color: #D8CDB3; }
.watch .pair [lang="en"] { color: #C9C3B3; }
.watch .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.video-card { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.video-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%); }
.play { position: absolute; z-index: 2; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.95); color: #C4302B; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .15s ease; }
.video-card:hover .play { transform: scale(1.06); }
.play .i { width: 34px; height: 34px; margin-left: 4px; }
.video-card .cap { position: absolute; z-index: 2; left: 20px; bottom: 16px; color: #fff; font-weight: 600; font-size: 15px; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; margin-right: 8px; box-shadow: 0 0 0 4px rgba(229,72,77,.25); }

/* App */
.app { background: var(--tan-100); }
.app .grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .app .grid { grid-template-columns: auto 1fr; gap: 56px; } }
.app-icon { width: 168px; height: 168px; border-radius: 38px; box-shadow: var(--shadow-lg); }
.features { list-style: none; padding: 0; margin: 4px 0 26px; display: grid; gap: 12px; }
@media (min-width: 700px) { .features { grid-template-columns: 1fr 1fr; } }
.features li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.75); border-radius: 14px; padding: 13px 15px; font-size: 15.5px; line-height: 1.45; }
.features li .i { color: var(--olive-600); margin-top: 1px; }
.features [lang="en"] { display: block; color: var(--muted); font-size: 14.5px; }
/* The stores' official badges, unaltered: the same height on screen (Google asks for at least
   Apple's), with a quarter of that clear around each. Google's PNG carries its own clear space
   above and below: the badge is 192 of its 250 px. */
.stores { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.store { display: inline-flex; border-radius: 8px; }
.store img { display: block; width: auto; height: 48px; }
.store--play img { height: 62.5px; }
.stores-en { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.stores-en a { text-decoration: underline; text-underline-offset: 3px; }
.stores-en a:hover { color: var(--olive-600); }
.stores-legal { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }

/* Give */
.give { background: var(--olive-600); color: #fff; }
.give .grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .give .grid { grid-template-columns: 1.2fr 1fr; } }
.give .eyebrow { color: #E2CFA3; }
.give .section-head h2 { color: #fff; }
.give .h-en { color: #DDE5D2; }
.give .pair [lang="en"] { color: #DDE5D2; }
.funds { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.funds li { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.funds [lang="en"] { opacity: .78; }
.give-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; padding: 28px; }
.give-card .btn { width: 100%; justify-content: center; }
.give-card p { margin: 0 0 16px; }
.give-card p[lang="en"] { color: #DDE5D2; }

/* Visit and contact */
.visit .grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .visit .grid { grid-template-columns: 1fr 1.2fr; align-items: stretch; } }
.contact { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 18px; }
.contact li { display: flex; gap: 14px; align-items: flex-start; }
.contact .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--sage-100); color: var(--olive-600); display: grid; place-items: center; flex: none; }
.contact b { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.contact a { text-decoration: none; font-weight: 500; }
.contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.map { border-radius: 22px; overflow: hidden; min-height: 380px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--sage-100); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map--wide { min-height: 420px; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--olive-900); color: #fff; text-decoration: none; font: 700 17px/1 var(--font-body); transition: background .15s ease; }
.social a:hover { background: var(--olive-600); }
.social .i { width: 20px; height: 20px; }

/* Visit page */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 600px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px; }
.step .num { width: 42px; height: 42px; border-radius: 50%; background: var(--olive-600); color: #fff; display: grid; place-items: center; font: 600 19px/1 var(--font-display); margin-bottom: 14px; }
.step h3 { font-size: 18px; margin: 0; font-weight: 600; }
.step h3 [lang="en"] { color: var(--muted); font-weight: 500; }
.step p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; }
.step p[lang="en"] { color: var(--muted); margin-top: 4px; }

.here { background: var(--sage-50); }
.here .grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 980px) { .here .grid { grid-template-columns: 1.3fr 1fr; } }
.visitor-map { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #fff; }
.visitor-map figcaption { padding: 12px 16px; font-size: 13.5px; color: var(--muted); }
.here .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary [lang="en"] { color: var(--muted); font-weight: 500; }
.faq .pm { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sage-100); color: var(--olive-600); display: grid; place-items: center; font-size: 22px; line-height: 1; transition: transform .2s ease; }
.faq details[open] .pm { transform: rotate(45deg); }
.faq .ans { padding: 0 0 18px; }
.faq .ans p { margin: 0 0 6px; font-size: 15.5px; }
.faq .ans p[lang="en"] { color: var(--muted); }
.faq .ans a { color: var(--olive-600); font-weight: 600; }

.pastor-strip { background: #fff; }
.ws { display: grid; gap: 30px; align-items: center; }
@media (min-width: 860px) { .ws { grid-template-columns: 300px 1fr; gap: 56px; } }
.ws img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow-lg); margin-inline: auto; border: 6px solid #fff; outline: 2px solid var(--tan-500); }

/* Forms */
.connect .grid { display: grid; gap: 32px; }
@media (min-width: 980px) { .connect .grid { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow); }
.form-card h2, .form-card h3 { font-family: var(--font-display); font-size: 26px; margin: 12px 0 0; color: var(--olive-900); }
.form-card .h-en { font-size: 1.1rem; margin-bottom: 18px; }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.field label [lang="en"] { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; font: 16px/1.4 var(--font-body); color: var(--ink); background: var(--cream);
  border: 1px solid #D6D2C5; border-radius: 12px; padding: 12px 14px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(196, 164, 108, .45); border-color: var(--tan-500); }
.req { color: #9A3B2E; }
.form-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* The Visit and Contact forms' help at 988 and 911 (site.js), in /necesitas's crisis box */
.nd-crisis.form-crisis { margin-top: 18px; box-shadow: none; }
.form-crisis p[lang="en"] { color: var(--muted); }
.form-card .form-crisis .nd-ai-title { margin: 0 0 8px; font: 700 12.5px/1.3 var(--font-body); }
.form-card .nd-crisis-title { color: #B71C1C; }
.form-note { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }
.form-status { display: none; margin-top: 14px; background: var(--sage-100); color: var(--olive-700); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.form-status.show { display: block; }
.form-status.error { background: #F8E3DF; color: #7A2B1F; }
.form-recaptcha { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.form-recaptcha a { color: inherit; }
.grecaptcha-badge { visibility: hidden; }
/* Giving page (/give) */
.give-layout { display: grid; gap: 28px; }
@media (min-width: 980px) { .give-layout { grid-template-columns: 1.45fr 1fr; align-items: start; } }
.give-step > * + * { margin-top: 18px; }
.give-step[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin-inline: 0; padding: 0; min-width: 0; }
.chips legend { width: 100%; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; padding: 0; }
.chips legend [lang="en"] { color: var(--muted); font-weight: 500; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip > span { display: inline-block; padding: 10px 16px; border: 1px solid #D6D2C5; border-radius: 999px; background: var(--cream); font-weight: 600; font-size: 15px; cursor: pointer; }
.chip > span [lang="en"] { font-weight: 500; opacity: .8; }
.chip input:checked + span { background: var(--olive-600); border-color: var(--olive-600); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--tan-500); outline-offset: 2px; }
#g-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 96px)); }
#g-amounts .chip > span { display: block; text-align: center; padding-inline: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--olive-600); }
.check [lang="en"] { color: var(--muted); }
.give-disclosure { font-size: 14.5px; color: var(--ink); background: var(--sage-50); border-radius: 12px; padding: 12px 14px; }
.give-disclosure [lang="en"] { color: var(--muted); }
.give-summary { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--olive-900); margin: 0; }
.give-summary [lang="en"] { color: var(--muted); font-style: italic; }
#payment-element { min-height: 120px; }
.give-side { display: grid; gap: 16px; }
.give-side .card p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }
.give-side .card p[lang="en"] { color: var(--muted); margin-top: 2px; }
.give-side .card .btn, .give-side .card .more { margin-top: 12px; }
.give-side .btn, .give-side .more { flex-wrap: wrap; row-gap: 2px; }
.give-side .btn { justify-content: center; text-align: center; border-radius: 18px; }
.give-side .btn > [lang], .give-side .more > [lang="es"] { flex-basis: 100%; }
.give-side .sep { display: none; }
.give-side-title { font-family: var(--font-display); font-size: 19px; color: var(--olive-900); margin: 0; }
.give-side-title [lang="en"] { color: var(--muted); font-weight: 500; }
/* Zelle on /give: the tag, the email (with copy buttons) and the QR code for bank apps */
.zelle-ids { display: grid; gap: 10px; margin: 14px 0 0; }
.zelle-ids dt { font-size: 13.5px; font-weight: 600; }
.zelle-ids dt [lang="en"] { color: var(--muted); font-weight: 500; }
.zelle-ids dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.zelle-ids code { font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--olive-900); background: var(--sage-50); border-radius: 8px; padding: 4px 8px; overflow-wrap: anywhere; }
.copy-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--olive-700); background: transparent; border: 1px solid var(--olive-600); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.copy-btn:hover { background: var(--sage-50); }
.copy-btn:focus-visible { outline: 3px solid var(--tan-500); outline-offset: 2px; }
.zelle-qr { margin: 16px 0 4px; text-align: center; }
.zelle-qr img { display: block; width: 168px; max-width: 100%; height: auto; aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; }
.zelle-qr figcaption { font-size: 13.5px; margin-top: 8px; }
.zelle-qr figcaption [lang] { display: block; }
.zelle-qr figcaption [lang="en"] { color: var(--muted); }
#give-thanks h2 { font-family: var(--font-display); font-size: 28px; color: var(--olive-900); margin: 0; }
.form-card.gate { max-width: 560px; margin-inline: auto; }
.form-card.gate + .cta-row { max-width: 560px; margin-inline: auto; }
.form-card.gate p { margin: 0 0 8px; }
.form-card.gate p[lang="en"] { color: var(--muted); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.side h2, .side h3 { font-family: var(--font-display); font-size: 24px; margin: 4px 0 0; color: var(--olive-900); }
.side .h-en { margin-bottom: 20px; }

/* Contact page */
.contact-page .grid { display: grid; gap: 36px; }
@media (min-width: 980px) { .contact-page .grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.intro { max-width: 760px; }
.intro p { margin: 0 0 10px; font-size: 18px; }
.intro p[lang="en"] { color: var(--muted); }

/* About page */
.about-story { max-width: 1000px; }
.invite { display: grid; gap: 24px; align-items: center; background: var(--tan-100); border-radius: 24px; padding: 28px; }
@media (min-width: 860px) { .invite { grid-template-columns: 1fr auto; padding: 36px 40px; } }
.invite h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--olive-900); margin: 10px 0 2px; line-height: 1.15; }
.invite .h-en { margin: 0; }
.invite .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pastor-feature { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .pastor-feature { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.pastor-feature img { width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }
.pastor-feature h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--olive-900); margin: 10px 0 14px; line-height: 1.25; }

/* Member rules: entry page */
.doc-groups { display: grid; gap: 28px; }
@media (min-width: 900px) { .doc-groups { grid-template-columns: 1fr 1fr; } }
.doc-group h2 { font-family: var(--font-display); font-size: 24px; color: var(--olive-900); margin: 0 0 14px; }
.doc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.doc-links a { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; text-decoration: none; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease; }
.doc-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.doc-links .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sage-100); color: var(--olive-600); display: grid; place-items: center; flex: none; }
.doc-links .go { margin-left: auto; color: var(--olive-600); }
.lock-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 30px; padding: 16px 18px; border-radius: 16px; background: var(--tan-100); color: var(--olive-900); font-size: 15.5px; }
.lock-note p { margin: 0; }
.lock-note p[lang="en"] { color: var(--muted); }

/* Long text: policies and member documents */
.prose { max-width: 780px; margin-inline: auto; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.25; color: var(--olive-900); margin: 2.1em 0 .6em; }
.prose h3 { font-size: 1.12rem; line-height: 1.35; color: var(--olive-700); margin: 1.8em 0 .5em; }
.prose h4 { font-size: 1rem; color: var(--olive-700); margin: 1.5em 0 .4em; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol:not(.doc-list) { padding-left: 1.4em; margin: 0 0 1em; }
.prose li { margin: 0 0 .45em; }
.prose a { color: var(--olive-600); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose blockquote { margin: 1.2em 0; padding: 14px 20px; border-left: 4px solid var(--tan-500); background: var(--tan-100); border-radius: 0 12px 12px 0; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { background: var(--sage-50); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--sage-50); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }
.prose .center { text-align: center; }
.prose .right { text-align: right; }
.prose .indent-1 { margin-left: 1.5em; }
.prose .indent-2 { margin-left: 3em; }
.prose .indent-3 { margin-left: 4.5em; }
.prose .indent-4 { margin-left: 6em; }
@media (max-width: 600px) {
  .prose .indent-2 { margin-left: 2em; }
  .prose .indent-3, .prose .indent-4 { margin-left: 2.6em; }
}
.paper { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 22px; box-shadow: var(--shadow); }
@media (min-width: 760px) { .paper { padding: 48px 56px; } }

/* Numbered and bulleted lists in the member documents (numbers kept exactly) */
.doc-list { list-style: none; margin: 0 0 1em; padding: 0; }
.doc-list .doc-list { margin: .5em 0 .2em; }
.doc-list li { display: grid; grid-template-columns: 2.2em 1fr; gap: .2em; margin: 0 0 .55em; }
.doc-list .mk { font-weight: 600; color: var(--olive-700); text-align: right; padding-right: .5em; font-variant-numeric: tabular-nums; }
.doc-bullets .mk { color: var(--tan-700); }
.doc-list .doc-list li { grid-template-columns: 2em 1fr; }

/* Member document navigation */
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 22px; font-size: 14px; }
.doc-nav .lbl { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; color: var(--tan-500); margin-right: 4px; }
.doc-nav a { color: #F1EDE2; text-decoration: none; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 12px; }
.doc-nav a:hover { background: rgba(255,255,255,.12); }
.doc-nav a[aria-current="page"] { background: #fff; color: var(--olive-900); border-color: #fff; font-weight: 600; }
.doc-nav .break { flex-basis: 100%; height: 0; }

/* Notices */
.notice { max-width: 760px; margin-inline: auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); text-align: center; }
.notice p { margin: 0 0 8px; }
.notice p[lang="en"] { color: var(--muted); }
.notice .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.banner { display: none; background: var(--sage-100); color: var(--olive-900); border-bottom: 1px solid var(--line); }
.banner.show { display: block; }
.banner .wrap { display: flex; gap: 14px; align-items: center; padding: 14px 0; }
.banner p { margin: 0; }
.banner [lang="en"] { color: var(--muted); }
.banner button { margin-left: auto; background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--olive-700); padding: 4px 8px; }
.updated { color: var(--muted); font-size: 14.5px; margin-top: 10px; }

/* Footer */
.footer { background: var(--olive-950); color: #D7D2C3; padding: 64px 0 30px; font-size: 15px; }
.footer .grid { display: grid; gap: 34px; }
@media (min-width: 600px) { .footer .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer .grid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } }
.footer img { width: 96px; height: 96px; }
.footer .tag { font-family: var(--font-display); font-size: 19px; color: #fff; margin: 14px 0 2px; }
.footer .tag-en { font-family: var(--font-display); font-style: italic; color: #A9A493; margin: 0; }
.footer h2 { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 6px 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { color: #D7D2C3; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer [lang="en"] { color: #A9A493; }
.legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; color: #A9A493; }
.legal .grow { flex: 1 1 260px; }

/* 404 */
.lost { text-align: center; }
.lost .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* The Bible's words stay on the page (scripture-guard.js, which keeps the same list): no
   selecting, no long-press menu, and no printing. */
.bb-text, .bb-card-text, .vd-verse, .vh-verse, .nd-verse { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media print {
  .announce, .header, .footer, .doc-nav, .banner, .skip { display: none !important; }
  .bb-text, .bb-card-text, .vd-verse, .vh-verse, .nd-verse { display: none !important; }
  body:has(.bb-text, .vd-verse, .vh-verse, .nd-verse)::after { content: "El texto bíblico de este sitio no se imprime. Léelo en iglesiaelgetsemani.org/biblia. · The Bible text on this site doesn't print. Read it at iglesiaelgetsemani.org/biblia."; display: block; margin: 24px 0; font-size: 12pt; }
  body { background: #fff; font-size: 12pt; }
  .band { background: none; color: #000; }
  .band h1, .band .h-en, .band .eyebrow { color: #000; }
  .paper { box-shadow: none; border: 0; padding: 0; }
  .prose a { color: #000; }
}

/* Helpers added for the inner pages */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.invite--small { margin-top: 28px; padding: 20px 22px; }
@media (min-width: 860px) { .invite--small { grid-template-columns: 1fr; padding: 22px 26px; } }
.invite-text { margin: 8px 0 0; }
.invite-text [lang="en"] { color: var(--muted); }
.contact-page .eyebrow { margin: 8px 0 4px; }
.hero--about .hero-media img { object-position: 72% 30%; }
@media (max-width: 600px) {
  .paper { padding: 24px 16px; border-radius: 18px; }
  .doc-list li { grid-template-columns: 1.9em 1fr; }
  .doc-list .doc-list li { grid-template-columns: 1.7em 1fr; }
}

/* Home: our vision, with a photo mosaic */
.vision-section { background: #fff; }
.vision-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .vision-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; } }
.vision-text { max-width: 640px; }
.vision-text .pair p[lang="es"] { font-size: 18px; color: var(--ink); }
.vision-text .cta-row { margin-top: 22px; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 12px; width: 100%; max-width: 620px; margin-inline: auto; }
@media (min-width: 600px) { .mosaic { grid-auto-rows: 170px; gap: 16px; } }
.tile { position: relative; margin: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); background: var(--sage-100); }
.tile.tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile figcaption {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  background: rgba(22, 32, 15, .72); color: #fff; border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.tile figcaption [lang="en"] { color: #DDE5D2; font-weight: 500; }

/* Address links (every mention of the address opens the church's Google Maps listing).
   Same look everywhere: like the text around them, underlined only on hover or keyboard focus. */
a.addr, .faq .ans a.addr, .prose a.addr, .contact a.addr, .footer a.addr, .facts a.addr {
  color: inherit; font-weight: inherit; text-decoration: none;
}
a.addr:hover, a.addr:focus-visible, .faq .ans a.addr:hover, .prose a.addr:hover, .contact a.addr:hover, .footer a.addr:hover, .facts a.addr:hover {
  text-decoration: underline; text-underline-offset: 3px;
}

/* Tablet and phone header: menu on the left, logo centred, Visit button on the right */
@media (max-width: 1079px) {
  .header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .header .menu-btn { grid-column: 1; grid-row: 1; justify-self: start; }
  .header .logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .header .wrap > .btn { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
  .header .theme-btn { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 56px; }  /* beside the menu */
}

/* Footer: logo links home; review link */
.footer .home-link { display: inline-block; border-radius: 18px; }
.legal .review { display: inline-flex; align-items: center; gap: 6px; }
.legal .review .i { width: 16px; height: 16px; color: var(--tan-500); }

/* Embedded map: the page keeps scrolling over it until someone clicks to use the map */
.map { position: relative; }
.map-cover {
  position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; margin: 0; padding: 14px;
  background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: center;
}
.map-cover .hint {
  background: rgba(22, 32, 15, .8); color: #fff; border-radius: 999px; padding: 7px 14px;
  font: 600 13px/1.3 var(--font-body); opacity: 0; transition: opacity .15s ease;
}
.map-cover:hover .hint, .map-cover:focus-visible .hint { opacity: 1; }
@media (hover: none) { .map-cover .hint { opacity: 1; } }
.map.active .map-cover { display: none; }
.map-cover .hint [lang="en"] { color: #DDE5D2; font-weight: 500; }
.hero--contact .hero-media img { object-position: 57% 62%; }

/* Versículo del día (/versiculo and /versiculo/<slug>): the verse image under the title band,
   its text as real text in Spanish or English, Download and Share (each asks which format),
   and the days before. */
.i-flip { transform: scaleX(-1); }
[data-lang-block][hidden], .vd-langs[hidden], .vd-share[hidden], [data-dialog-mode][hidden] { display: none !important; }
.vd-date {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: 20px 0 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 22px;
  padding: 7px 16px; font-size: 15px; font-weight: 500; color: #fff;
}
.vd-date .i { width: 18px; height: 18px; color: var(--tan-500); }
.vd-today-chip { display: inline-flex; align-items: center; background: var(--tan-500); color: var(--olive-950); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; line-height: 1.45; }
.vd-today-chip .sep { margin: 0 .3em; opacity: .7; }
.vd-today-chip [lang="en"] { font-weight: 600; }

/* Español / English: a two-option segmented control */
.vd-langs { display: flex; width: fit-content; gap: 4px; margin: 14px auto 0; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); }
.vd-lang-btn {
  min-height: 44px; min-width: 104px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: #fff; font: 600 15px/1.2 var(--font-body);
}
.vd-lang-btn:hover { background: rgba(255,255,255,.12); }
.vd-lang-btn[aria-pressed="true"] { background: #fff; color: var(--olive-900); }

.vd-image { margin: 0; }
.vd-image img { width: 100%; border-radius: 18px; background: var(--sage-100); }
.vd-ref { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.4vw, 2.8rem); line-height: 1.1; color: var(--olive-900); margin: 0; }
.vd-verse { margin: 14px 0 0; padding: 0; }
.vd-verse p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.5; color: var(--ink); }
.vd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.vd-actions .btn { min-height: 48px; }
.vd-share { background: transparent; }  /* a <button>: no browser grey behind the outline style */
.vd-status { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--olive-700); overflow-wrap: anywhere; }
.vd-status:empty { margin: 0; }
.vd-status [lang="en"] { font-weight: 500; }
.vd-status a { color: inherit; }
.vd-source { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }

/* Previous and next day, and today's verse */
.vd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; max-width: 440px; margin: 20px auto 0; }
.vd-pager .btn { min-height: 44px; justify-content: center; }
.vd-pager .vd-next { grid-column: 2; }
.vd-today {
  grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: 15px; font-weight: 600; color: #E7DCC2; text-decoration: none;
}
.vd-today:hover { text-decoration: underline; text-underline-offset: 4px; }
.vd-today [lang="en"] { font-weight: 500; opacity: .85; }

/* The image under the title band, overlapping it */
.vd-band { text-align: center; }
.vd-band .wrap { padding: 44px 0 150px; }
@media (min-width: 900px) { .vd-band .wrap { padding: 60px 0 178px; } }
.vd-band .eyebrow { justify-content: center; }
.vd--a { padding-bottom: 72px; }
@media (min-width: 900px) { .vd--a { padding-bottom: 96px; } }
.vd--a .vd-image { position: relative; z-index: 2; max-width: 560px; margin: -110px auto 0; }
@media (min-width: 900px) { .vd--a .vd-image { margin-top: -138px; } }
.vd--a .vd-image img { box-shadow: var(--shadow-lg); }
.vd--a .vd-body { max-width: 680px; margin: 34px auto 0; text-align: center; }
.vd--a .vd-actions { justify-content: center; }

/* Which format: a modal dialog for Download and Share */
.vd-dialog {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; margin: auto;
  border: 0; border-radius: 22px; padding: 24px; background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); text-align: left;
}
.vd-dialog::backdrop { background: rgba(22, 32, 15, .6); }
.vd-dialog-title { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; color: var(--olive-900); margin: 0; }
.vd-dialog-en { display: block; font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--muted); margin-top: 2px; }
.vd-dialog-desc { margin: 10px 0 16px; font-size: 15px; }
.vd-dialog-desc [lang="en"] { color: var(--muted); }
.vd-formats { display: grid; gap: 10px; }
.vd-format {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 12px 16px; text-align: left; cursor: pointer;
  background: var(--cream); border: 1px solid #D6D2C5; border-radius: 16px; color: var(--ink); font: 15px/1.4 var(--font-body);
}
.vd-format:hover { border-color: var(--olive-600); background: var(--sage-50); }
.vd-shape { flex: none; display: block; border: 2px solid var(--olive-600); border-radius: 4px; background: var(--sage-100); }
.vd-shape--square { width: 34px; height: 34px; }
.vd-shape--wide { width: 46px; height: 24px; }
.vd-format-text { display: grid; gap: 2px; }
.vd-format-name { font-weight: 700; color: var(--olive-900); }
.vd-format-name [lang="en"] { font-weight: 600; color: var(--muted); }
.vd-format-size { font-weight: 500; color: var(--muted); white-space: nowrap; }
.vd-format-note { font-size: 14px; color: var(--ink); }
.vd-format-note [lang="en"] { color: var(--muted); }
.vd-dialog-cancel { margin-top: 16px; width: 100%; justify-content: center; background: transparent; min-height: 48px; }

/* Phones: the two buttons full width, one under the other; Previous, Next and the Hoy mark keep
   to one line (Spanish only there, like the header's Visit button) */
@media (max-width: 520px) {
  .vd-actions .btn { flex: 1 1 100%; }
  .vd-pager .btn { flex-wrap: nowrap; }
  .vd-pager .btn .en, .vd-pager .btn .sep { display: none; }
  .vd-dialog { padding: 20px 18px; }
  .vd-date { gap: 6px 8px; padding: 6px 13px; font-size: 14.5px; }
  .vd-today-chip { padding: 2px 9px; font-size: 12px; }
  .vd-today-chip .en, .vd-today-chip .sep { display: none; }
}

/* The days before */
.vd-archive { background: var(--sage-50); }
.vd-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .vd-days { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .vd-days { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vd-day a {
  display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.vd-day a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.vd-thumb { display: block; }
.vd-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.vd-day-text { display: grid; gap: 2px; padding: 10px 12px 12px; }
.vd-day .when { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.vd-day .ref { font: 600 15.5px/1.3 var(--font-display); color: var(--olive-700); }

/* Focus: the site's tan ring on the dark band, olive on light backgrounds (3:1 or better) */
.vd--a :focus-visible, .vd-archive :focus-visible, .vd-dialog :focus-visible { outline-color: var(--olive-700); }

/* Under the credit line: how the images may be used (follows the language switch) */
.vd-usage { margin: 6px auto 0; max-width: 640px; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.vd-usage p { margin: 0; }

/* The app section on the verse pages: the home page's block, plus the app's help page */
.app .vd-app-help { min-height: 44px; margin-top: 14px; padding-top: 0; flex-wrap: wrap; }

/* Home page: today's verse, after the services (sage) and before the vision section (white),
   on the page's cream. versiculo-hoy.js fills it in and adds .vh-ready; until then (or without
   JavaScript) it's one column: the introduction and the link. */
.verse-home { background: var(--cream); }
.verse-home .grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .verse-home.vh-ready .grid { grid-template-columns: 300px 1fr; gap: 56px; } }
.vh-figure[hidden], [data-vh-verse][hidden], .vh-intro[hidden] { display: none !important; }
.vh-image { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; border-radius: 18px; box-shadow: var(--shadow-lg); background: var(--sage-100); }
.vh-intro { margin: 10px 0 0; max-width: 620px; font-size: 17px; }
.vh-intro [lang="en"] { color: var(--muted); }
.vh-date { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.vh-date .i { width: 18px; height: 18px; color: var(--tan-700); }
.vh-ref { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; color: var(--olive-900); margin: 14px 0 0; }
.vh-verse { margin: 10px 0 0; padding: 0; max-width: 620px; }
.vh-verse p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; color: var(--ink); }
.vh-source { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.verse-home .cta-row { margin-top: 22px; }
.verse-home :focus-visible { outline-color: var(--olive-700); }

/* The verse pages: a holiday's name under the date, and a verse that has no page yet */
.vd-holiday { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: #E7DCC2; }
.vd-holiday [lang="en"] { font-weight: 500; opacity: .85; }
.vd-missing { max-width: 640px; margin: 0 auto; text-align: center; }
.vd-missing p { margin: 0 0 6px; }
.vd-missing [lang="en"] { color: var(--muted); }
.vd-missing .btn { margin-top: 18px; }

/* ¿Qué necesitas de Dios hoy? (/necesitas): the ten needs as buttons, then the chosen need's
   word for the day (its verse, reflection and prayer) in Spanish or English, Otra palabra and
   Share as an image. Without JavaScript each button is a link that shows its need (:target). */
.nd-band { text-align: center; }
.nd-band .eyebrow { justify-content: center; }
.nd-lede { max-width: 620px; margin: 16px auto 0; }
.nd-lede [lang="en"] { display: block; color: #C9C3B3; }
.nd [hidden] { display: none !important; }
.nd-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 900px; margin: 0 auto; }
@media (min-width: 600px) { .nd-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .nd-needs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.nd-need {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--olive-900);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.nd-need:hover { border-color: var(--olive-600); background: var(--sage-50); transform: translateY(-1px); }
.nd-need .i { color: var(--olive-600); }
.nd-need-name { display: grid; min-width: 0; line-height: 1.25; }
.nd-need-name [lang="es"] { font-weight: 700; }
.nd-need-name [lang="en"] { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.nd-need[aria-current="true"] { background: var(--olive-600); border-color: var(--olive-600); color: #fff; }
.nd-need[aria-current="true"] .i, .nd-need[aria-current="true"] [lang="en"] { color: #DDE5D2; }
.nd-hint { margin: 26px 0 0; text-align: center; color: var(--muted); }
.nd-hint [lang="es"] { color: var(--ink); font-weight: 600; }
.nd-groups, .nd-foot { max-width: 760px; margin-inline: auto; }
.nd-group { display: none; margin-top: 34px; }
.nd:not(.nd-js) .nd-group:target, .nd-group.is-open { display: block; }
.nd-group-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 700 12.5px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tan-700);
}
.nd-group-title .i { width: 20px; height: 20px; }
.nd-word { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 22px; box-shadow: var(--shadow); }
@media (min-width: 760px) { .nd-word { padding: 40px 48px; } }
.nd-draft { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: var(--tan-100); color: var(--tan-700); font-size: 13.5px; font-weight: 600; }
.nd-ref { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; color: var(--olive-900); }
.nd-verse { margin: 14px 0 0; padding: 2px 0 2px 18px; border-left: 4px solid var(--tan-500); }
.nd-verse p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 2.3vw, 1.45rem); line-height: 1.55; color: var(--ink); }
.nd-label { margin: 26px 0 6px; font: 700 12.5px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tan-700); }
.nd-reflection, .nd-prayer { margin: 0; }
.nd-prayer { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; line-height: 1.6; color: var(--olive-900); }
.nd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.nd-actions .btn { min-height: 48px; }
.nd-share { background: transparent; }  /* a <button>: no browser grey behind the outline style */
.nd-share-label { display: contents; }
.nd-credit { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.nd-pray { max-width: 760px; margin: 40px auto 0; text-align: center; }
.nd-pray .more { flex-wrap: wrap; justify-content: center; }
.nd :focus-visible { outline-color: var(--olive-700); }
@media (max-width: 520px) { .nd-actions .btn { flex: 1 1 100%; } }

/* La Biblia (/biblia, biblia.py): the books, each book's chapters, and the chapter verse by verse
   in Spanish (RV1909), English (KJV) or both side by side (data-mode on .bb), the words of Jesus
   in red. The switch, the text size and Go to come with biblia.js. */
.bb-band { text-align: center; }
.bb-band .eyebrow { justify-content: center; }
.bb-band [hidden], .bb [hidden] { display: none !important; }
.bb-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-size: 14.5px; font-weight: 600; }
.bb-crumbs a { color: var(--tan-500); text-decoration: none; }
.bb-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bb-crumbs .sep { color: #A9A493; }
.bb-band--chapter .wrap { padding-bottom: 40px; }
.bb-lede, .bb-count { max-width: 640px; margin: 14px auto 0; color: #E7DCC2; }
.bb-lede [lang="en"] { display: block; color: #C9C3B3; }
.bb-count [lang="en"] { color: #C9C3B3; }
.bb-goto { max-width: 520px; margin: 22px auto 0; text-align: left; }
.bb-goto-label { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 600; color: #F1EDE2; }
.bb-goto-label [lang="en"] { font-weight: 500; color: #C9C3B3; }
.bb-goto-row { display: flex; gap: 10px; }
.bb-goto-input {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4); background: #fff; color: var(--ink); font: 500 16px/1.2 var(--font-body);
}
.bb-goto-input:focus-visible { outline-color: var(--tan-500); }
.bb-goto-msg { margin: 8px 0 0; font-size: 14.5px; font-weight: 600; color: #F4D9A6; }
.bb-goto-msg:empty { margin: 0; }
.bb-goto-msg [lang="en"] { font-weight: 500; }

.bb-testament { margin: 0 0 16px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--olive-900); }
.bb-testament [lang="en"] { font-style: italic; font-weight: 500; color: var(--muted); }
.bb-books { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .bb-books { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .bb-books { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bb-book {
  display: grid; align-content: center; min-height: 58px; padding: 10px 14px; line-height: 1.3;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none;
}
.bb-book [lang="es"] { font-weight: 700; color: var(--olive-900); }
.bb-book [lang="en"] { font-size: 13.5px; color: var(--muted); }
/* English chosen on the books' page: the English name first */
.bb-index[data-lang="en"] .bb-book [lang="en"] { order: -1; font-size: inherit; font-weight: 700; color: var(--olive-900); }
.bb-index[data-lang="en"] .bb-book [lang="es"] { font-size: 13.5px; font-weight: 400; color: var(--muted); }
.bb-book:hover, .bb-chapters a:hover { border-color: var(--olive-600); background: var(--sage-50); }
.bb-chapters { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.bb-chapters a {
  display: grid; place-items: center; min-height: 52px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-weight: 700; color: var(--olive-900); text-decoration: none; font-variant-numeric: tabular-nums;
}

.bb-wrap { max-width: 760px; }
.bb[data-mode="both"] .bb-wrap { max-width: 1120px; }
/* The bar above the text: the book and chapter menus (as in the app's reader), Listen, dark
   mode and the text size */
.bb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -28px 0 18px; }
.bb-nav { display: flex; flex: 1 1 280px; gap: 8px; min-width: 0; }
.bb-actions { display: flex; gap: 8px; margin-left: auto; }
.bb-select {
  min-width: 0; min-height: 44px; padding: 0 38px 0 14px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A1C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  color: var(--olive-900); font: 600 15.5px/1.2 var(--font-body); text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.bb-select--book { flex: 0 1 240px; }
.bb-select--chapter { flex: none; width: 88px; font-variant-numeric: tabular-nums; }
.bb-tool, .bb-size {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--olive-900); cursor: pointer;
}
.bb-tool { font: 600 15px/1 var(--font-body); }
.bb-tool .i { width: 20px; height: 20px; }
.bb-tool[aria-pressed="true"] { background: var(--olive-900); border-color: var(--olive-900); color: #fff; }
.bb-tool-label .sep { margin: 0 .3em; opacity: .55; }
.bb-tool-label [lang="en"] { font-weight: 500; }
.bb-size { padding: 0; font: 600 15px/1 var(--font-display); }
.bb-size--up { font-size: 22px; }
.bb-select:hover, .bb-tool:hover, .bb-size:hover { border-color: var(--olive-600); }
.bb-size[disabled] { opacity: .45; cursor: default; }
.bb-listen-msg { flex-basis: 100%; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--tan-700); text-align: right; }
.bb-listen-msg:empty { display: none; }
.bb-listen-msg [lang="en"] { font-weight: 500; }
@media (max-width: 640px) { .bb-tool-label .sep, .bb-tool-label .en { display: none; } }
@media (max-width: 520px) {
  .bb-nav { flex-basis: 100%; }
  .bb-select--book { flex: 1 1 auto; }
}
.bb-text { --bb-scale: 1; font-family: var(--font-display); font-size: calc(1.18rem * var(--bb-scale)); line-height: 1.75; color: var(--ink); }
.bb-row { margin: 0 -8px; padding: 2px 8px; border-radius: 8px; scroll-margin-top: 16px; }
.bb-row p { margin: 0 0 .5em; }
.bb-n { margin-right: .1em; font: 700 .62em/1 var(--font-body); color: var(--tan-700); vertical-align: .45em; }
.bb-red p { color: #B71C1C; }  /* the app's red letters on its cream theme */
.bb-row:target { background: var(--tan-100); }
.bb[data-mode="es"] .bb-en, .bb[data-mode="en"] .bb-es, .bb[data-mode="both"] .bb-pager .bb-en { display: none; }
@media (min-width: 760px) {
  .bb[data-mode="both"] .bb-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .bb[data-mode="both"] .bb-row .bb-es { grid-column: 1; }
  .bb[data-mode="both"] .bb-row .bb-en { grid-column: 2; }
}
@media (max-width: 759px) {
  .bb[data-mode="both"] .bb-row .bb-en { color: var(--muted); }
  .bb[data-mode="both"] .bb-red .bb-en { color: #B4524D; }
}
/* The titles between the verses (biblia.py), as the apps show them, each in its language's
   column like the verses: the headings in the site's sans, the other titles quieter. The bar's
   titles switch hides them all (data-titles on .bb). */
.bb-titles { scroll-margin-top: 16px; }
.bb-titles > div { margin: 1.5em 0 .45em; }
.bb-text > .bb-titles:first-child > div { margin-top: .2em; }
.bb-titles--after > div { margin: .9em 0 .4em; }
.bb-t { margin: 0 0 .3em; color: var(--muted); }
.bb-t--book { margin: 0 0 .6em; text-align: center; font-weight: 600; font-size: 1.4em; line-height: 1.25; color: var(--olive-900); }
.bb-t--over { margin-bottom: .2em; font-size: .8em; letter-spacing: .08em; }
.bb-t--division { margin: 1em 0 .5em; text-align: center; font: 700 .72em/1.4 var(--font-body); letter-spacing: .14em; color: var(--tan-700); }
.bb-t--section { margin: 0 0 .15em; font: 700 .9em/1.35 var(--font-body); color: var(--olive-900); }
.bb-t--subsection { margin: .25em 0 .15em; font: 600 .8em/1.35 var(--font-body); color: var(--olive-700); }
.bb-t--parallel { font: italic 400 .74em/1.4 var(--font-body); }
.bb-t--psalm { margin-top: .35em; font-style: italic; font-size: .9em; line-height: 1.55; }
.bb-t--stanza { margin-top: .5em; font: 700 .78em/1.4 var(--font-body); letter-spacing: .12em; color: var(--tan-700); }
.bb-t--ending { font-style: italic; font-size: .88em; line-height: 1.55; }
@media (min-width: 760px) {
  .bb[data-mode="both"] .bb-titles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .bb[data-mode="both"] .bb-titles .bb-es { grid-column: 1; }
  .bb[data-mode="both"] .bb-titles .bb-en { grid-column: 2; }
}
@media (max-width: 759px) {
  .bb[data-mode="both"] .bb-titles > div + div { margin-top: .4em; }
}
.bb[data-titles="off"] .bb-titles { display: none; }
.bb-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.bb-pager .bb-prev { justify-self: start; }
.bb-pager .bb-next { justify-self: end; }
.bb-all { font-weight: 600; color: var(--olive-700); text-align: center; text-underline-offset: 4px; }
.bb-all [lang="en"] { font-weight: 500; }
.bb-credit { margin: 26px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.bb :focus-visible, .bb-index :focus-visible { outline-color: var(--olive-700); }
@media (max-width: 520px) {
  .bb-pager { grid-template-columns: 1fr 1fr; }
  .bb-pager .bb-all { grid-column: 1 / -1; grid-row: 2; }
}
.nd-read { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font-weight: 600; color: var(--olive-600); text-decoration: none; }
.nd-read .i { width: 20px; height: 20px; }
.nd-read:hover { text-decoration: underline; text-underline-offset: 4px; }
.bb-modes .vd-lang-btn { min-width: 0; padding: 0 16px; white-space: nowrap; }
@media (max-width: 380px) { .bb-modes .vd-lang-btn { padding: 0 12px; font-size: 14px; } }

/* The preview link: its forms are off (build.py forms_off) */
.preview-off { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--tan-100); color: var(--tan-700); font-size: 15px; font-weight: 600; }
.preview-off [lang="en"] { font-weight: 500; }
.preview-off a { color: inherit; }
form[inert], form[inert] * { cursor: not-allowed; }

/* The 988 card (the Visit and Contact forms' .form-crisis), and /necesitas's help at 988 and 911
   under every word */
.nd-crisis { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.nd-crisis { border-left: 4px solid #B71C1C; }
.nd-ai-title { margin: 0 0 8px; font: 700 12.5px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tan-700); }
.nd-crisis-title { color: #B71C1C; }
.nd-crisis p { margin: 0 0 12px; }
.nd-crisis .nd-crisis-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.nd-crisis .btn { min-height: 48px; }
.nd-help { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--sage-50); }
.nd-help-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 1rem/1.35 var(--font-body); color: var(--olive-900); }
.nd-help-title .i { width: 20px; height: 20px; color: var(--olive-600); }
.nd-help p { margin: 0 0 12px; font-size: 14.5px; color: var(--muted); }
.nd-help .nd-help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.nd-help .btn { min-height: 44px; }

/* The Bible section (build.py SECTION_PARTS): the bar under each part's title, Hoy at the top of
   the books, today's verse marked in its chapter (palabra.js), and verses chosen to share (biblia.js) */
.pal-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 16px auto 0; }
.pal-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.2;
}
.pal-link .i { width: 18px; height: 18px; color: var(--tan-500); }
.pal-link [lang="en"] { font-weight: 500; opacity: .8; }
.pal-link:hover { background: rgba(255,255,255,.16); }
.pal-link[aria-current="true"] { background: #fff; border-color: #fff; color: var(--olive-900); }
.pal-link[aria-current="true"] .i { color: var(--olive-600); }
@media (max-width: 640px) { .pal-link .sep, .pal-link .en { display: none; } }
@media (max-width: 420px) {
  .pal-link { padding: 6px 11px; font-size: 13.5px; }
  .pal-link .i, .pal-more { display: none; }
}
.bb-band .pal-bar, .nd-band .pal-bar, .vd-band .pal-bar { margin-bottom: 4px; }
.bb-hoy { margin: 0 0 40px; }
.bb-hoy .bb-testament .sep { margin: 0 .3em; }
.bb-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bb-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.bb-card-kicker { margin: 0; font: 700 12px/1.35 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tan-700); }
.bb-card-kicker [lang="en"] { font-weight: 600; color: var(--muted); }
.bb-card-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.bb-card-title a { color: var(--olive-900); text-decoration: none; }
.bb-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bb-card-text { margin: 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.bb-card-text [lang="en"] { color: var(--muted); }
.bb-card-more { display: block; margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--olive-600); text-decoration: none; }
.bb-card-more .i { width: 18px; height: 18px; margin-left: 4px; vertical-align: -4px; }
.bb-card-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.bb-card-more [lang="en"] { font-weight: 500; }
.bb-hoy [hidden] { display: none !important; }
.bb-needs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.bb-needs a { display: inline-flex; min-height: 36px; align-items: center; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--sage-50); color: var(--olive-900); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.bb-needs a:hover { border-color: var(--olive-600); }
.pal-today { grid-column: 1 / -1; display: inline-flex; width: fit-content; margin: 4px 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--tan-500); color: var(--olive-950); font: 700 12.5px/1.5 var(--font-body); text-decoration: none; }
.pal-today [lang="en"] { font-weight: 600; }
.bb-row.pal-today-verse { background: var(--tan-100); }
.bb-row { cursor: pointer; }
.bb-row.is-chosen { background: var(--sage-100); box-shadow: inset 3px 0 0 var(--olive-600); }
.bb-row.is-reading { background: var(--tan-100); box-shadow: inset 3px 0 0 var(--tan-500); }
.bb-n[role="button"] { border-radius: 4px; }
.bb-share {
  position: fixed; left: 50%; bottom: 14px; z-index: 40; transform: translateX(-50%);
  width: min(720px, calc(100% - 24px)); padding: 12px 14px; border-radius: 18px;
  background: var(--olive-900); color: #F1EDE2; box-shadow: var(--shadow-lg);
  display: grid; gap: 8px 12px; grid-template-columns: auto 1fr; align-items: center;
}
.bb-share[hidden] { display: none; }
.bb-share-ref { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; white-space: nowrap; }
.bb-share-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.bb-share .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.bb-share-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.bb-share-status { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 600; color: #F4D9A6; }
.bb-share-status:empty { display: none; }
.bb-share-status [lang="en"] { font-weight: 500; }
.bb-share :focus-visible { outline-color: var(--tan-500); }
@media (max-width: 600px) {
  .bb-share { grid-template-columns: 1fr; }
  .bb-share-ref { white-space: normal; }
  .bb-share-actions { justify-content: flex-start; }
  .bb-share .btn .sep, .bb-share .btn .en { display: none; }
}
/* The menu with the Bible section's item (seven items): tighter between 1080 and 1239 px, so the
   logo and the Visit button keep their room */
.header .logo { flex: none; }
@media (min-width: 1080px) and (max-width: 1239px) {
  .header:has(.nav > a:nth-child(7)) .nav { gap: 12px; font-size: 13.5px; }
  .header:has(.nav > a:nth-child(7)) .wrap > .btn .sep,
  .header:has(.nav > a:nth-child(7)) .wrap > .btn .en { display: none; }
}

/* The switch in the header, and the notice on a first visit (site.js) */
.theme-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.theme-btn:hover { border-color: var(--olive-600); }
.site-notice { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 0 12px 12px; pointer-events: none; }
.site-notice-card {
  pointer-events: auto; max-width: 980px; margin-inline: auto; display: grid; gap: 14px 24px; align-items: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) { .site-notice-card { grid-template-columns: 1fr auto; } }
.site-notice-title { margin: 0 0 4px; font: 700 1rem/1.35 var(--font-body); color: var(--olive-900); }
.site-notice-title [lang="en"] { color: var(--muted); font-weight: 600; }
.site-notice p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; }
.site-notice p[lang="en"] { color: var(--muted); }
.site-notice a { color: var(--olive-600); font-weight: 600; }
.site-notice-side { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 900px) { .site-notice-side { justify-items: end; } }
.theme-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.theme-choices legend { float: left; margin-right: 4px; padding: 0; font-size: 14px; font-weight: 600; }
.theme-choices legend [lang="en"] { color: var(--muted); font-weight: 500; }
.theme-choice { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid #D6D2C5; border-radius: 999px; background: var(--cream); color: var(--ink); font: 600 14px/1.2 var(--font-body); cursor: pointer; }
.theme-choice .i { width: 18px; height: 18px; }
.theme-choice [lang="en"] { font-weight: 500; opacity: .8; }
.theme-choice[aria-pressed="true"] { background: var(--olive-600); border-color: var(--olive-600); color: #fff; }
.site-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* On a phone it keeps to the bottom of the screen: smaller words, and each pair of buttons side
   by side, their two languages one under the other. */
@media (max-width: 520px) {
  .site-notice { padding: 0 8px 8px; }
  .site-notice-card { gap: 10px; padding: 14px 14px 12px; border-radius: 18px; }
  .site-notice p { font-size: 13.5px; line-height: 1.42; }
  .site-notice-side, .theme-choices, .site-notice-actions { width: 100%; }
  .theme-choices legend { float: none; width: 100%; margin: 0 0 2px; }
  .theme-choice, .site-notice-actions .btn { flex: 1 1 0; flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 0; column-gap: 6px; border-radius: 16px; padding: 8px 10px; }
  .theme-choice .sep, .site-notice-actions .btn .sep { display: none; }
  .site-notice-actions .btn .en { flex-basis: 100%; font-size: 13px; }
  .theme-choice [lang="en"] { flex-basis: 100%; font-size: 13px; }
}

/* A map loads only with the visitor's leave (Google may set its cookies): Accept all in the
   notice, or Show the map here. */
.map-consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; }
.map-consent p { margin: 0; max-width: 34ch; font-size: 15px; }
.map-consent p [lang="en"] { display: block; color: var(--muted); }
.map-consent .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.map.loaded .map-consent, .map:not(.loaded) .map-cover { display: none; }

/* Dark mode, for the whole site: the visitor's choice (the notice or the header's switch), set
   before the page is drawn (theme.js). Light, the site's own colors, is the default and doesn't
   change. Mostly the colors' meanings change: the page, the text, the borders and the tints go
   dark; headings and green words go light. The few places that use those colors as a fill keep
   their own. The olive bands, the footer and the announcement bar are dark already. Print is
   always light. The logo keeps a light plate, since its lettering is dark. */
@media screen {
html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #121510;      /* the page */
  --ink: #F1EDE2;        /* text: the site's warm white (15.7:1 on the page) */
  --muted: #CFCABC;      /* the other language, notes (11.2:1; A9A493 read too gray) */
  --line: #343B2F;       /* borders */
  --sage-50: #171C14;    /* tinted sections */
  --sage-100: #232A1E;   /* tinted fills */
  --tan-100: #262116;    /* warm sections */
  --tan-700: #D4B87C;    /* eyebrows and labels */
  --olive-900: #F1EDE2;  /* headings */
  --olive-700: #B9D29C;  /* green words */
  --surface: #1C2118;    /* cards */
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .header { background: rgba(24, 28, 21, .985); border-bottom-color: #2D3328; }
html[data-theme="dark"] .header .logo img { padding: 3px 6px; border-radius: 12px; background: #FBF9F4; }
html[data-theme="dark"] .nav a[aria-current="page"] { border-color: var(--tan-500); }
html[data-theme="dark"] .mnav { border-top-color: #2D3328; }
html[data-theme="dark"] .mnav a { border-bottom-color: #2D3328; }
html[data-theme="dark"] .mnav a[aria-current="page"] { color: var(--tan-500); }

/* Cards and boxes: white in light mode */
html[data-theme="dark"] :is(.menu-btn, .theme-btn, .times-card, .card, .svc, .ev, .step, .visitor-map, .faq details,
  .pastor-strip, .form-card, .doc-links a, .prose .table-wrap, .paper, .notice, .vision-section, .vd-dialog,
  .vd-day a, .nd-need, .nd-word, .nd-crisis, .site-notice-card) { background-color: var(--surface); }
html[data-theme="dark"] .features li { background: rgba(255, 255, 255, .05); }
/* The olive fills that were the headings' color, and the green button's hover */
html[data-theme="dark"] :is(.band, .watch, .hero--plain) { background: radial-gradient(ellipse at 15% 0%, #34522A 0%, #1F2A1C 62%); }
html[data-theme="dark"] :is(.skip, .bb-share) { background: #1F2A1C; }
html[data-theme="dark"] .social a { background: #2E4520; }
html[data-theme="dark"] .social a:hover { background: var(--olive-600); }
html[data-theme="dark"] .btn-primary:hover { background: #2E4520; }
html[data-theme="dark"] .btn-light { color: #2E4520; }
/* White pills on the dark bands keep dark words */
html[data-theme="dark"] :is(.vd-lang-btn[aria-pressed="true"], .pal-link[aria-current="true"], .doc-nav a[aria-current="page"]) { color: #1F2A1C; }
/* Green words and icons: the site's olive is too dark on a dark page */
html[data-theme="dark"] :is(.expect .ico, .more, .features li .i, .stores-en a:hover, .contact .ico, .faq .pm, .faq .ans a,
  .doc-links .ico, .doc-links .go, .prose a, .nd-need .i, .nd-read, .nd-help-title .i,
  .site-notice a, .bb-all, .bb-card-more) { color: #B9D29C; }
html[data-theme="dark"] .btn-outline { border-color: #7BA358; color: #B9D29C; }
html[data-theme="dark"] :is(.copy-btn, .vd-shape) { border-color: #7BA358; }
html[data-theme="dark"] :is(.vd-format:hover, .nd-need:hover, .bb-needs a:hover, .theme-btn:hover) { border-color: var(--sage-500); }
html[data-theme="dark"] .check input { accent-color: #7BA358; }
html[data-theme="dark"] :is(.chip > span, .theme-choice, .pal-link, .funds) [lang="en"] { opacity: 1; }
/* Forms */
html[data-theme="dark"] :is(.field input, .field select, .field textarea, .chip > span, .vd-format, .theme-choice:not([aria-pressed="true"])) { border-color: #4A5244; }
html[data-theme="dark"] .form-status.error { background: #3A1E1A; color: #F2B8B5; }
html[data-theme="dark"] .req { color: #F28B82; }
/* The crisis box's red, light enough for a dark page */
html[data-theme="dark"] .nd-crisis { border-left-color: #F28B82; }
html[data-theme="dark"] .nd-crisis-title { color: #F28B82; }

/* The Bible's pages */
html[data-theme="dark"] .bb-text,
html[data-theme="dark"] .bb-card-text { color: #E5E2D8; }
html[data-theme="dark"] .bb-n,
html[data-theme="dark"] .bb-card-kicker { color: var(--tan-500); }
html[data-theme="dark"] .bb-red p { color: #F28B82; }  /* the red letters, light enough for a dark page */
html[data-theme="dark"] .bb-row:target,
html[data-theme="dark"] .bb-row.pal-today-verse,
html[data-theme="dark"] .bb-row.is-reading { background: rgba(196, 164, 108, .16); }
html[data-theme="dark"] .bb-row.is-chosen { background: rgba(107, 142, 78, .24); box-shadow: inset 3px 0 0 #8FB36A; }
html[data-theme="dark"] .bb-select,
html[data-theme="dark"] .bb-tool,
html[data-theme="dark"] .bb-size,
html[data-theme="dark"] .bb-book,
html[data-theme="dark"] .bb-chapters a,
html[data-theme="dark"] .bb-card { background-color: #1C2118; border-color: #343B2F; color: #E5E2D8; }
html[data-theme="dark"] .bb-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5E2D8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .bb-select:hover,
html[data-theme="dark"] .bb-tool:hover,
html[data-theme="dark"] .bb-size:hover,
html[data-theme="dark"] .bb-book:hover,
html[data-theme="dark"] .bb-chapters a:hover { border-color: var(--sage-500); background-color: #232A1E; }
/* after hover, so a pressed button keeps its look under the pointer */
html[data-theme="dark"] .bb-tool[aria-pressed="true"] { background: var(--tan-500); border-color: var(--tan-500); color: var(--olive-950); }
html[data-theme="dark"] .bb-testament,
html[data-theme="dark"] .bb-book [lang="es"],
html[data-theme="dark"] .bb-index[data-lang="en"] .bb-book [lang="en"],
html[data-theme="dark"] .bb-chapters a,
html[data-theme="dark"] .bb-card-title a { color: #F1EDE2; }
html[data-theme="dark"] .bb-testament [lang="en"],
html[data-theme="dark"] .bb-book [lang="en"],
html[data-theme="dark"] .bb-index[data-lang="en"] .bb-book [lang="es"],
html[data-theme="dark"] .bb-card-kicker [lang="en"],
html[data-theme="dark"] .bb-card-text [lang="en"],
html[data-theme="dark"] .bb-credit { color: #CFCABC; }
html[data-theme="dark"] .bb-needs a { background: #232A1E; border-color: #343B2F; color: #E5E2D8; }
html[data-theme="dark"] .bb-pager { border-top-color: #2D3328; }
html[data-theme="dark"] .bb-pager .btn-outline { border-color: #5E6B52; color: #E5E2D8; }
html[data-theme="dark"] .bb-listen-msg { color: var(--tan-500); }
html[data-theme="dark"] :focus-visible { outline-color: var(--tan-500); }
}
@media screen and (max-width: 759px) {
  html[data-theme="dark"] .bb[data-mode="both"] .bb-row .bb-en { color: #B8B3A4; }
  html[data-theme="dark"] .bb[data-mode="both"] .bb-red .bb-en { color: #E8A39C; }
}