/* ============================================================
   Saint Expedite — devotional site stylesheet
   Folk-Catholic aesthetic: deep red, gold, parchment.
   Body text is set large (19px+) and high-contrast for readability.
   ============================================================ */

:root {
  --red-deep: #5e101d;
  --red: #7e1a28;
  --red-soft: #a93242;
  --gold: #c9a227;
  --gold-light: #ecd27a;
  --gold-pale: #f6e7bd;
  --parchment: #f8f0dd;
  --parchment-dark: #eee0c2;
  --ink: #2a1c10;
  --ink-soft: #54402c;
  --white: #fffdf7;
  --shadow: 0 4px 18px rgba(60, 20, 10, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', 'Nimbus Roman', serif;
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  color: var(--red-deep);
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: 2.4rem; margin: 0 0 0.6em; }
h2 { font-size: 1.7rem; margin: 1.6em 0 0.5em; }
h3 { font-size: 1.3rem; margin: 1.3em 0 0.4em; }

p { margin: 0 0 1.1em; }

a { color: var(--red); }
a:hover { color: var(--red-deep); }

img { max-width: 100%; height: auto; }

/* ---------- Header & navigation ---------- */

.site-header {
  background: linear-gradient(180deg, var(--red-deep), var(--red));
  color: var(--gold-pale);
  padding: 1.1rem 1rem 0.9rem;
  text-align: center;
  border-bottom: 4px solid var(--gold);
  position: relative;
}

.lang-toggle {
  margin: 0;
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.95rem;
  background: rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.lang-toggle a {
  color: var(--gold-light);
  text-decoration: none;
}

.lang-toggle a:hover {
  text-decoration: underline;
}

.lang-toggle .on {
  color: var(--gold-pale);
  font-weight: bold;
}

.lang-toggle .sep {
  color: var(--gold);
  margin: 0 0.45rem;
  opacity: 0.7;
}

/* ---------- PWA install button (header, mirrors lang-toggle) ---------- */
.install-btn {
  margin: 0;
  position: absolute;
  top: 0.8rem;
  left: 0.9rem;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.95rem;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.18);
  color: var(--gold-light);
  cursor: pointer;
  white-space: nowrap;
}

.install-btn:hover {
  text-decoration: underline;
}

.site-header .brand {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.15rem;
}

.site-header .tagline {
  font-style: italic;
  font-size: 1.02rem;
  color: #f3e3c2;
  margin: 0 0 0.7rem;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.4rem;
  padding: 0.2rem 0 0.1rem;
}

.main-nav a {
  color: #f7ead0;
  text-decoration: none;
  font-size: 1.02rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.main-nav a:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--gold);
  color: var(--gold-light);
}

.main-nav a.active {
  background: rgba(201, 162, 39, 0.18);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ---------- Layout ---------- */

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.wrap.wide { max-width: 1080px; }

.lead {
  font-size: 1.22rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  text-align: center;
  background: #1c0d08;
}

.hero img {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: cover;
  object-position: center 30%;
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(20,8,6,0.05), rgba(20,8,6,0.35));
  margin-top: -9rem;
  position: relative;
  padding: 2.2rem 1.25rem 2.4rem;
}

.hero-overlay h1 {
  color: var(--gold-light);
  font-size: 2.9rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.2em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}

.hero-overlay .subtitle {
  color: #f7ead0;
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 0.9em;
}

.hero-overlay p {
  color: #f3e6cc;
  font-size: 1.15rem;
  font-style: italic;
  max-width: 640px;
  margin: 0 auto;
}

/* Hero sentence: a touch smaller and held to one line on computer
   screens so the last word ("today.") never wraps alone (Ez). */
.hero-overlay p.hero-line {
  font-size: 1rem;
  max-width: 700px;
}

@media (min-width: 900px) {
  .hero-overlay p.hero-line { white-space: nowrap; }
}

/* ---------- Scrolling patron line (EN homepage only) ---------- */

.scroll-strip {
  overflow: hidden;
  background: var(--red-deep);
  border-bottom: 2px solid var(--gold);
  padding: 0.45rem 0;
}

.scroll-track {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 1.02rem;
  letter-spacing: 0.35em;
  color: var(--gold-light);
  animation: patron-scroll 55s linear infinite;
  will-change: transform;
}

@keyframes patron-scroll {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}

.scroll-strip:hover .scroll-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-strip { text-align: center; }
  .scroll-track { animation: none; transform: none; }
}

/* ---------- Call-to-action cards ---------- */

.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin: 2.2rem 0;
}

.cta-card {
  background: var(--white);
  border: 1px solid var(--parchment-dark);
  border-top: 5px solid var(--gold);
  border-radius: 10px;
  padding: 1.5rem 1.3rem;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(60, 20, 10, 0.22);
  color: var(--ink);
}

.cta-card .icon { font-size: 2rem; display: block; margin-bottom: 0.4rem; }
.cta-card h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.cta-card p { margin: 0; font-size: 1.02rem; color: var(--ink-soft); }

/* ---------- Prayer / quote blocks ---------- */

.prayer-block {
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1.8rem 1.6rem;
  margin: 1.8rem 0;
  box-shadow: var(--shadow);
  font-size: 1.12rem;
  line-height: 1.9;
}

.prayer-block .prayer-title {
  font-family: 'Cinzel', serif;
  color: var(--red-deep);
  font-size: 1.25rem;
  text-align: center;
  margin: 0 0 1rem;
}

.scripture-note {
  border-left: 4px solid var(--gold);
  background: var(--gold-pale);
  padding: 1rem 1.3rem;
  border-radius: 0 8px 8px 0;
  margin: 1.6rem 0;
  font-size: 1.05rem;
}

/* Pray Together — Wednesday prayer hour invitation on the chapel pages,
   in the quiet scripture-note style. */
.pray-together h2 { color: var(--red-deep); margin: 0 0 0.5rem; font-size: 1.2rem; }
.pray-together p { margin: 0 0 0.6rem; }
.pray-together p:last-child { margin-bottom: 0; }

/* ---------- Steps ---------- */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.6rem 0; }
.steps li {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--parchment-dark);
  border-radius: 10px;
  padding: 1.2rem 1.3rem 1.2rem 4.2rem;
  margin-bottom: 1rem;
  position: relative;
  box-shadow: var(--shadow);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--red);
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.steps li strong { color: var(--red-deep); }

/* ---------- Novena days ---------- */

.novena-day {
  background: var(--white);
  border: 1px solid var(--parchment-dark);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow);
}
.novena-day h3 { margin-top: 0; }
.novena-day .day-label {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  background: var(--red-deep);
  display: inline-block;
  padding: 0.15rem 0.9rem;
  border-radius: 20px;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

/* ---------- Novena tracker ---------- */

.novena-tracker {
  margin-top: 1.1rem;
  border-top: 1px dashed #d8c49a;
  padding-top: 1rem;
}
.novena-progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin-bottom: 0.7rem;
}
.novena-daycount {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--red-deep);
}
.ndots { display: inline-flex; gap: 0.3rem; }
.ndot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: transparent;
  display: inline-block;
}
.ndot.on { background: var(--red); border-color: var(--red-deep); }
.novena-prayedcount { color: var(--ink-soft); font-size: 0.98rem; }
.novena-prayed { margin: 0.3rem 0 0; }
.novena-complete {
  margin-top: 1rem;
  background: var(--gold-pale);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.3rem;
}
.novena-complete h3 { margin-top: 0; color: var(--red-deep); }
.novena-blessing { margin-top: 1rem; }
.novena-sent { color: var(--red-deep); font-weight: bold; }
.novena-again { margin-top: 0.9rem; }

/* ---------- Forms ---------- */

.devout-form {
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1.8rem 1.6rem;
  margin: 2rem 0;
  box-shadow: var(--shadow);
}
.devout-form h2, .devout-form h3 { margin-top: 0; }

.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.35rem;
  color: var(--red-deep);
  font-size: 1.05rem;
}
.field .hint { font-size: 0.98rem; color: var(--ink-soft); margin-top: 0.25rem; }

input[type="text"], input[type="email"], textarea, select {
  width: 100%;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid #d8c49a;
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
  outline: 3px solid var(--gold-light);
  border-color: var(--gold);
}
textarea { min-height: 130px; resize: vertical; }

.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  padding: 0.8rem 2rem;
  border: 2px solid var(--gold);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.btn:hover { transform: translateY(-2px); color: var(--gold-pale); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn.secondary {
  background: var(--white);
  color: var(--red-deep);
  border-color: var(--red);
}

/* ---------- Novena-reminder signup ---------- */

.subscribe-done { font-size: 1.08rem; color: var(--red-deep); }
.subscribe-error { color: var(--red-deep); font-weight: bold; margin-top: 1rem; }
.subscribe-compact { padding: 1.3rem 1.2rem; margin: 1.4rem 0; }
.subscribe-compact h3 { margin-top: 0; }

/* ---------- Petition & testimony walls ---------- */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0;
}

.wall-card {
  background: var(--white);
  border: 1px solid var(--parchment-dark);
  border-top: 5px solid var(--red);
  border-radius: 10px;
  padding: 1.3rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.wall-card .who {
  font-family: 'Cinzel', serif;
  color: var(--red-deep);
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.wall-card .when {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 0.7rem;
}
.wall-card .text {
  font-size: 1.08rem;
  flex-grow: 1;
  white-space: pre-wrap;
}
.wall-card .card-actions {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.pray-btn {
  background: var(--gold-pale);
  border: 2px solid var(--gold);
  color: var(--red-deep);
  border-radius: 24px;
  padding: 0.45rem 1.1rem;
  font-size: 1.02rem;
  font-family: Georgia, serif;
  cursor: pointer;
}
.pray-btn:hover:not(:disabled) { background: var(--gold-light); }
.pray-btn:disabled { opacity: 0.6; cursor: default; }
.pray-count { font-size: 1rem; color: var(--ink-soft); }

.empty-state {
  text-align: center;
  background: var(--white);
  border: 2px dashed var(--gold);
  border-radius: 12px;
  padding: 2.4rem 1.6rem;
  margin: 1.8rem 0;
  color: var(--ink-soft);
}
.empty-state .big { font-size: 2.4rem; display: block; margin-bottom: 0.6rem; }
.empty-state p { font-size: 1.12rem; max-width: 560px; margin-left: auto; margin-right: auto; }

.featured-testimony {
  background: linear-gradient(180deg, #fffdf7, var(--gold-pale));
  border: 3px solid var(--gold);
  border-radius: 14px;
  padding: 2rem 1.8rem;
  margin: 2rem 0;
  box-shadow: var(--shadow);
  text-align: center;
}
.featured-testimony h2 { margin-top: 0; }
.featured-testimony .placeholder-note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

/* ---------- Virtual chapel ---------- */

.chapel-intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.6rem;
  align-items: center;
  margin: 1.6rem 0 2rem;
}
.chapel-intro img {
  border-radius: 12px;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow);
}

.candle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.6rem 1rem;
  margin: 2rem 0;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at center, #2a1410 0%, #170b08 75%);
  border-radius: 14px;
  border: 2px solid var(--gold);
}

.candle {
  text-align: center;
  color: #f3e6cc;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.candle .flame-wrap { height: 64px; display: flex; align-items: flex-end; justify-content: center; }

.flame {
  width: 26px;
  height: 52px;
  background: radial-gradient(ellipse at 50% 75%, #fff6c8 0%, #ffd23e 30%, #ff9a1f 60%, #e2571b 82%, rgba(226,87,27,0) 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 100%;
  animation: flicker 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 180, 60, 0.85));
}
.flame::after {
  content: "";
  display: block;
  width: 10px;
  height: 22px;
  margin: 20px auto 0;
  background: radial-gradient(ellipse at center, #ffffff 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
}

@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-1.5deg); }
  25% { transform: scale(1.06, 0.94) rotate(2deg); }
  50% { transform: scale(0.95, 1.05) rotate(-2.5deg); }
  75% { transform: scale(1.03, 0.97) rotate(1deg); }
}

.candle .wick {
  width: 4px;
  height: 10px;
  background: #2b1a10;
  margin: 0 auto;
}

.candle .wax {
  width: 54px;
  margin: 0 auto;
  background: linear-gradient(90deg, #b8323f 0%, #e0575f 35%, #f2837f 50%, #e0575f 65%, #b8323f 100%);
  border-radius: 7px 7px 4px 4px;
  min-height: 14px;
  transition: height 1s linear;
  box-shadow: inset -6px 0 10px rgba(0,0,0,0.18);
}

.candle .dish {
  width: 76px;
  height: 12px;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, var(--gold-light) 0%, #8a6d1f 70%);
  border-radius: 50%;
}

.candle .candle-label {
  margin-top: 0.7rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #f3e6cc;
}
.candle .candle-label .cname { font-weight: bold; color: var(--gold-light); display: block; }
.candle .candle-label .cintent { font-style: italic; font-size: 0.92rem; display: block; }
.candle .candle-label .ctime { font-size: 0.85rem; color: #c9b48a; display: block; margin-top: 0.2rem; }

/* "I prayed for you" tap (growth batch 2, #6): a quiet button under each
   burning candle on the petition wall, with the count of prayers offered. */
.candle .pray-row {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.candle .pray-btn {
  font: inherit;
  font-size: 0.88rem;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.candle .pray-btn:hover:not(:disabled),
.candle .pray-btn:focus-visible:not(:disabled) {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold);
}
.candle .pray-btn.prayed {
  color: #c9b48a;
  border-color: rgba(201, 180, 138, 0.35);
  background: transparent;
  cursor: default;
}
.candle .pray-count { font-size: 0.82rem; color: #c9b48a; }

.candle.burned-out .flame { display: none; }
.candle.burned-out .wax { background: linear-gradient(90deg, #6d6d6d 0%, #9a9a9a 50%, #6d6d6d 100%); }
.candle.burned-out .candle-label .ctime { color: #9db38a; }

/* Candle colours (growth idea #22): the devotee may choose the
   colour of the candle they light in the chapel. The wax takes
   the colour; the flame stays natural. Red is the site's
   traditional wax and remains the default. */
.candle-colour-red .wax { background: linear-gradient(90deg, #b8323f 0%, #e0575f 35%, #f2837f 50%, #e0575f 65%, #b8323f 100%); }
.candle-colour-white .wax { background: linear-gradient(90deg, #c9c0ac 0%, #efe8d8 35%, #fdfaf1 50%, #efe8d8 65%, #c9c0ac 100%); }
.candle-colour-gold .wax { background: linear-gradient(90deg, #a97b12 0%, #dcb13e 35%, #f7e08a 50%, #dcb13e 65%, #a97b12 100%); }
.candle-colour-blue .wax { background: linear-gradient(90deg, #274b8f 0%, #4a74c9 35%, #7ea2e8 50%, #4a74c9 65%, #274b8f 100%); }
.candle-colour-green .wax { background: linear-gradient(90deg, #1f6b34 0%, #3f9e57 35%, #74c489 50%, #3f9e57 65%, #1f6b34 100%); }
/* A burned-out candle is grey, whatever colour it burned in. */
.candle[class*="candle-colour-"].burned-out .wax { background: linear-gradient(90deg, #6d6d6d 0%, #9a9a9a 50%, #6d6d6d 100%); }

/* The colour picker in the light-a-candle form: one simple row of
   candle-glass swatches, in the form's own parchment-and-gold
   language. */
.colour-picker { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.colour-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  flex: 1 1 8.5rem; max-width: 11rem;
  font-family: Georgia, serif; color: var(--ink);
  background: #fffdf7; border: 2px solid #d8c49a; border-radius: 8px;
  padding: 0.8rem 0.5rem 0.6rem; cursor: pointer; text-align: center;
}
.colour-swatch:hover, .colour-swatch:focus-visible { border-color: var(--gold); }
.colour-swatch.is-selected { border-color: var(--red-deep); box-shadow: 0 0 0 2px var(--gold-light); }
.swatch-glass {
  position: relative; width: 26px; height: 36px;
  border-radius: 6px 6px 3px 3px;
  box-shadow: inset -4px 0 7px rgba(0,0,0,0.18);
}
.swatch-glass::before {
  content: ""; position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
  width: 8px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 75%, #fff6c8 0%, #ffd23e 45%, rgba(255,154,31,0) 100%);
}
.sw-red { background: linear-gradient(90deg, #b8323f, #f2837f 50%, #b8323f); }
.sw-white { background: linear-gradient(90deg, #c9c0ac, #fdfaf1 50%, #c9c0ac); }
.sw-gold { background: linear-gradient(90deg, #a97b12, #f7e08a 50%, #a97b12); }
.sw-blue { background: linear-gradient(90deg, #274b8f, #7ea2e8 50%, #274b8f); }
.sw-green { background: linear-gradient(90deg, #1f6b34, #74c489 50%, #1f6b34); }
.swatch-name { font-weight: bold; color: var(--red-deep); font-size: 1rem; }
.swatch-meaning { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.3; }

/* Newly-lit candle, scrolled to from the "come see it burn" link. */
.candle.highlight {
  outline: 3px solid var(--gold);
  outline-offset: 8px;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.06);
}

/* ---------- Keeper's petition + 7-day candle ---------- */
.keeper-petition {
  margin: 2rem 0;
  padding: 1.8rem 1.6rem;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: linear-gradient(180deg, #241019 0%, #170b08 100%);
}
.keeper-petition h2 { margin-top: 0; }
.keeper-note { color: #e8d9b8; font-size: 1.05rem; }
.keeper-text {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #f7ecd4;
  border-left: 4px solid var(--gold);
  margin: 1.2rem 0 0.4rem;
  padding: 0.6rem 0 0.6rem 1.2rem;
  font-style: italic;
}
.keeper-by { text-align: right; color: var(--gold-light); font-weight: bold; margin: 0 0 0.4rem; }
.keeper-candle-panel {
  margin-top: 1.2rem;
  padding: 1.6rem 1rem 1.2rem;
  background: radial-gradient(ellipse at center, #2a1410 0%, #170b08 75%);
  border-radius: 12px;
  text-align: center;
}
.keeper-candle-panel .candle { min-height: 0; }
#keeper-wax { height: 150px; }
.keeper-candle-caption { color: #f3e6cc; margin: 0.9rem 0 0; font-size: 1.08rem; }

/* ---------- Donate ---------- */

.donate-box {
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1.8rem 1.6rem;
  margin: 1.8rem 0;
  box-shadow: var(--shadow);
}
.donate-box ul { font-size: 1.08rem; }
.donate-box li { margin-bottom: 0.5rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--red-deep);
  color: #e9d9b8;
  text-align: center;
  padding: 2rem 1.25rem;
  border-top: 4px solid var(--gold);
  font-size: 1.02rem;
}
.site-footer .footer-brand {
  font-family: 'Cinzel', serif;
  color: var(--gold-light);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.site-footer nav { margin: 0.8rem 0; }
.site-footer nav a { color: #f3e6cc; margin: 0 0.55rem; text-decoration: none; font-size: 1rem; }
.site-footer nav a:hover { color: var(--gold-light); text-decoration: underline; }
.site-footer .fine { font-size: 0.92rem; color: #c9b48a; font-style: italic; margin-top: 0.8rem; }
.site-footer .follow { margin: 0.6rem 0 0.2rem; font-size: 1rem; }
.site-footer .follow a { color: var(--gold-light); text-decoration: none; margin: 0 0.3rem; }
.site-footer .follow a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  body { font-size: 18px; }
  h1 { font-size: 1.9rem; }
  .hero-overlay h1 { font-size: 2.1rem; }
  .hero-overlay .subtitle { font-size: 1rem; letter-spacing: 0.18em; }
  .chapel-intro { grid-template-columns: 1fr; text-align: center; }
  .chapel-intro img { max-width: 220px; margin: 0 auto; }
  .main-nav a { font-size: 0.98rem; padding: 0.4rem 0.6rem; }
  .prayer-block { padding: 1.3rem 1.1rem; }
}

/* ---------- Photo walls (Shared Light, Brazil) ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.photo-grid figure {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--parchment-dark);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--parchment-dark);
}

.photo-grid figcaption {
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Watch and Pray — embedded Shorts */
.video-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.video-card {
  background: var(--white);
  border: 1px solid var(--parchment-dark);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: var(--shadow);
  flex: 1 1 220px;
  max-width: 300px;
}
.video-card iframe {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 6px;
}
.video-card p {
  text-align: center;
  font-size: 0.95rem;
  margin: 0.6rem 0 0;
}

/* ---------- Phones: stack the header cleanly, no floating pill over the brand ---------- */
@media (max-width: 640px) {
  .site-header .brand { font-size: 1.35rem; letter-spacing: 0.08em; }
  .site-header .tagline { font-size: 0.9rem; }
  .lang-toggle {
    position: static;
    display: inline-block;
    margin: 0.1rem auto 0.55rem;
    font-size: 0.82rem;
    padding: 0.32rem 0.75rem;
  }
  .lang-toggle a { padding: 0.5rem 0.55rem; }
  .lang-toggle .on { opacity: 0.55; }
  .install-btn {
    position: static;
    display: inline-block;
    margin: 0.1rem auto 0.55rem 0.35rem;
    font-size: 0.82rem;
    padding: 0.32rem 0.75rem;
  }
}

/* ---------- Live candle counter (subtle corner badge, all pages) ---------- */
.candle-counter {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  background: rgba(248, 240, 221, 0.94);
  border: 1px solid var(--gold);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.candle-counter.show { display: inline-flex; opacity: 1; }
.candle-counter:hover { border-color: var(--gold-light); color: var(--ink); }
.candle-counter .cc-count { font-weight: bold; color: var(--red-deep); }
@media (max-width: 640px) {
  .candle-counter { right: 0.6rem; bottom: 0.6rem; font-size: 0.75rem; padding: 0.35rem 0.7rem; }
}

/* ---------- Saint's blink (devotional portrait) ---------- */
.saint-blink { position: relative; display: inline-block; line-height: 0; }
.saint-blink img { display: block; }
.saint-blink-closed {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 12px; opacity: 0; pointer-events: none;
  transition: opacity 70ms ease-in;
}
.saint-blink.blinking .saint-blink-closed { opacity: 1; }

/* Hymn playlist — wide 16:9 player */
.video-card.wide { flex: 1 1 340px; max-width: 560px; }
.video-card.wide iframe { aspect-ratio: 16 / 9; }

/* ---------- Share-your-flame (after candle lighting) ---------- */
.share-flame { display: block; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--gold, #c9a227); }
.share-flame .share-title { display: block; margin-bottom: 0.55rem; font-weight: bold; }
.btn-share { display: inline-block; margin: 0.15rem 0.35rem 0.15rem 0; padding: 0.5rem 1.1rem; border-radius: 999px;
  background: var(--red-deep, #8b1a1a); color: #fff; text-decoration: none; font-size: 0.95rem; }
.btn-share:hover { filter: brightness(1.15); color: #fff; }
.home-candle-section { margin-bottom: 2.2rem; }

/* ---------- For-you page + dedicate step ---------- */
.foryou-intro { text-align: center; margin-top: 2.2rem; }
.foryou-greeting { font-size: 1.28rem; line-height: 1.55; max-width: 34em; margin: 0.8rem auto 0; }
.dedicate-box { display: block; margin: 0.1rem 0 0.7rem; text-align: left; }
.dedicate-box .ded-label { display: block; font-size: 0.95rem; font-weight: normal; margin-bottom: 0.5rem; color: var(--ink-soft); }
.dedicate-box .ded-input { width: 100%; max-width: 280px; font-size: 1rem; padding: 0.5rem 0.65rem; margin-top: 0.25rem; }

/* ---------- Radiant glow on the saint's face (homepage hero) ---------- */
.hero-img-wrap { position: relative; display: block; }
.hero-rays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-rays::before {
  content: ''; position: absolute; top: -22%; left: 50%; width: 62%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,244,214,0.8), rgba(255,244,214,0) 70%);
  filter: blur(18px);
  animation: face-radiance 8s ease-in-out infinite alternate;
}
@keyframes face-radiance {
  from { opacity: 0.55; transform: translateX(-50%) scale(1); }
  to { opacity: 0.95; transform: translateX(-50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rays::before { animation: none; }
}

/* ============ Flame Keepers game (PWA) ============ */

/* Install banner */
.install-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
  display: flex; align-items: center; gap: 0.8rem; justify-content: space-between;
  background: linear-gradient(135deg, #2a0d12, #4a1420);
  color: var(--gold-pale); border: 1px solid var(--gold);
  border-radius: 14px; padding: 0.85rem 1rem; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s;
}
.install-banner.show { opacity: 1; transform: none; }
.install-banner .ib-text { font-size: 0.92rem; line-height: 1.35; }
.install-banner .ib-ios { font-size: 0.82rem; opacity: 0.9; }
.install-banner .ib-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.ib-later { background: none; border: none; color: var(--gold-pale); opacity: 0.75;
  font-size: 0.9rem; cursor: pointer; padding: 0.4rem 0.6rem; }
.ib-later:hover { opacity: 1; text-decoration: underline; }

/* Dedication banner on the wall */
.dedication-banner {
  background: linear-gradient(135deg, var(--gold-pale), #fff8e6);
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 1rem 1.2rem; margin: 0 0 1.2rem; text-align: center;
  font-size: 1.05rem; color: var(--ink); box-shadow: var(--shadow);
}
.dedication-banner .btn-share { margin-top: 0.6rem; }

/* My Flames page */
.flame-list { display: grid; gap: 1rem; margin: 1rem 0 2rem; }
.flame-card {
  background: var(--white); border: 1px solid var(--gold);
  border-radius: 14px; padding: 1rem 1.2rem; box-shadow: var(--shadow);
}
.flame-card.done { opacity: 0.75; }
.flame-card-top { display: flex; gap: 0.9rem; align-items: flex-start; }
.flame-emoji { font-size: 2.2rem; line-height: 1; animation: flameflicker 2.4s ease-in-out infinite; }
@keyframes flameflicker {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.92; }
}
.flame-intent { font-weight: bold; font-size: 1.05rem; color: var(--ink); }
.flame-ded { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
.flame-day { color: var(--red-deep); font-size: 0.92rem; margin-top: 0.25rem; font-weight: bold; }
.flame-card-actions { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.8rem; flex-wrap: wrap; }
.tend-btn { font-size: 0.95rem; padding: 0.55rem 1.2rem; }
.streak-badge {
  display: inline-block; background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: var(--gold-pale); border-radius: 999px; padding: 0.35rem 0.9rem;
  font-size: 0.9rem; font-weight: bold;
}
/* Prayer streak (My Flames) — one quiet line at the top of the page,
   counted only on the devotee's own device. */
.prayer-streak {
  text-align: center; max-width: 640px; margin: 0.2rem auto 1.3rem;
  padding: 0.55rem 1rem; background: var(--gold-pale);
  border: 1px solid var(--gold); border-radius: 999px;
  color: var(--red-deep); font-size: 1rem;
}
.flames-empty { text-align: center; padding: 2rem 1rem; }
.flame-note {
  margin-top: 0.7rem; padding: 0.6rem 0.8rem;
  background: var(--gold-pale); border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; font-size: 0.98rem; white-space: pre-wrap;
}
.flame-note-label { display: block; font-weight: bold; color: var(--red-deep); font-size: 0.85rem; margin-bottom: 0.2rem; }

/* Petition companion (Variant A) — one quiet, optional block that
   fades in under the thank-you once a candle is lit. */
.companion-block {
  margin-top: 1.4rem; padding: 1.1rem 1.2rem;
  border: 1px dashed var(--gold); border-radius: 10px;
  background: #fffdf7; text-align: left;
}
.companion-block.show { animation: companionFade 0.9s ease both; }
@keyframes companionFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.companion-block h3 { color: var(--red-deep); margin: 0 0 0.5rem; font-size: 1.12rem; }
.companion-block p { margin: 0 0 0.7rem; }
.companion-input { min-height: 84px; }
.companion-actions { margin: 0.7rem 0 0.3rem; }
.companion-save { font-size: 1rem; padding: 0.6rem 1.4rem; }
.companion-skip {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--ink-soft); cursor: pointer; text-decoration: underline;
}
.companion-reflection { font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.companion-reflection .comp-return { font-style: italic; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .companion-block.show { animation: none; }
}

/* Middle path (2026-10-21): the honor pledge line inside the
   petition / home candle forms — quiet italic gold, no input,
   no gating — and the standing confide-invitation blocks that
   make the companion moment visible before a candle is lit. */
.pledge-line {
  font-style: italic; text-align: center;
  color: #8a6d1f; font-size: 1rem; line-height: 1.5;
  margin: 0.2rem 0 0.9rem;
}
.confide-invite {
  margin: 1.6rem 0; padding: 1.05rem 1.2rem;
  border: 1px dashed var(--gold); border-radius: 10px;
  background: #fffdf7; text-align: center;
}
.confide-invite h3 { color: var(--red-deep); margin: 0 0 0.5rem; font-size: 1.12rem; }
.confide-invite p { margin: 0 0 0.6rem; }
.confide-invite .btn { margin-top: 0.15rem; }

/* Confide box (2026-10-21): the confidential write-to-the-keeper
   page — badge, the crisis line shown before the form, and the
   honeypot field kept off-screen for humans. */
.confide-badge {
  display: inline-block; margin: 0 0 1rem; padding: 0.3rem 0.9rem;
  border: 1px solid var(--gold); border-radius: 999px;
  background: #fffdf7; color: var(--red-deep);
  font-weight: bold; font-size: 0.95rem;
}
.crisis-note {
  margin: 1.2rem 0; padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--red-deep); border-radius: 0 8px 8px 0;
  background: #fdf3f0; font-size: 1rem; line-height: 1.55;
}
.honeypot-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}
.confide-error { color: var(--red-deep); font-weight: bold; margin-top: 1rem; }
.confide-thanks { font-size: 1.08rem; color: var(--red-deep); margin-top: 1rem; }
.rank-card {
  background: linear-gradient(135deg, #fffdf7, var(--gold-pale));
  border: 1px solid var(--gold); border-radius: 14px;
  padding: 1.2rem 1.4rem; margin: 0 0 1.6rem; box-shadow: var(--shadow);
}
.rank-card h2 { margin-top: 0; }
.thanks-install { display: block; margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px dashed var(--gold, #c9a227); }

/* Tend modal */
.tend-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(20, 8, 8, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.tend-modal {
  background: var(--white); border: 2px solid var(--gold); border-radius: 16px;
  max-width: 26rem; width: 100%; padding: 1.6rem; text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
}
.tend-flame { font-size: 3rem; animation: flameflicker 2.4s ease-in-out infinite; }
.tend-modal h3 { color: var(--red-deep); margin: 0.4rem 0 0.8rem; }
.tend-prayer { font-style: italic; color: var(--ink); line-height: 1.5; }
.tend-intent { font-size: 0.95rem; color: var(--ink-soft); margin: 0.8rem 0 1.2rem; }
.tend-confirm { width: 100%; margin-bottom: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .flame-emoji, .tend-flame { animation: none; }
  .install-banner { transition: none; }
}

/* Header "Get the App" button */
.install-cta { margin: 0.35rem 0 0; text-align: center; }
.btn-install {
  display: inline-block; padding: 0.42rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--gold); cursor: pointer;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: var(--gold-pale); font-size: 0.92rem; font-weight: bold;
  box-shadow: var(--shadow);
}
.btn-install:hover { filter: brightness(1.15); color: #fff; }

/* Feedback footer line (added 2026-10-21) */
.site-footer .feedback-line{margin:.35rem 0;}

/* Donate page: the Zelle address / Cash App tag a giver must copy exactly.
   The class was used in the markup with no rule defined (UX audit 2026-10-21/23). */
.zelle-address {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  margin: 0.6rem auto 1.1rem;
  overflow-wrap: anywhere;
}

/* ---------- TV pray-along (growth #63, Oct 28, 2026) ---------- */
body.tv { background:#1a0f0f; color:#f7ead9; margin:0; }
.tv-corner { position:fixed; top:1rem; right:1.4rem; font-size:1rem; opacity:.75; z-index:5; }
.tv-corner a { color:#f7ead9; margin-left:1rem; }
.tv-screen { display:none; min-height:92vh; padding:6vh 8vw; text-align:center;
             flex-direction:column; justify-content:center; align-items:center; }
.tv-screen.on { display:flex; }
.tv-kicker { font-size:1.3rem; letter-spacing:.25em; text-transform:uppercase; opacity:.8; }
.tv-title { font-family:Cinzel,serif; font-size:3.4rem; line-height:1.15; margin:.4em 0; color:#ffd98a; }
.tv-line  { font-size:2.1rem; line-height:1.5; max-width:26em; margin:.35em auto; }
.tv-verse { font-size:2.3rem; font-style:italic; line-height:1.45; max-width:24em; }
.tv-ref   { font-size:1.4rem; opacity:.8; margin-top:.8em; }
.tv-flame { font-size:5rem; margin:.2em 0; }
.tv-nav   { position:fixed; bottom:1.2rem; left:0; right:0; text-align:center; }
.tv-btn   { font-size:1.4rem; padding:.6em 1.6em; margin:0 .4em; border-radius:2em;
            border:2px solid #ffd98a; background:transparent; color:#ffd98a; cursor:pointer; }
.tv-btn.main { background:#7a1f1f; border-color:#7a1f1f; color:#fff; font-size:1.6rem; }
.tv-count { font-size:1.1rem; opacity:.7; margin-top:.8rem; }
/* Quiet chrome (Ez, Oct 30, 2026): the Back/Next controls and the screen counter
   are wayfinding, not the message — they must stay small and muted next to the
   prayer, on every screen size. */
.tv-nav .tv-btn { font-size:.95rem; padding:.45em 1.15em; border-width:1px; opacity:.75; }
.tv-nav .tv-count { font-size:.85rem; margin-top:.55rem; }
/* Phone scale for the pray-along: the type was sized for a TV. On a phone the
   prayer should read like a prayer, not a billboard, and no screen content
   should hide under the fixed bottom nav. */
@media (max-width:640px) {
  .tv-screen { min-height:0; padding:2.5rem 6vw 1rem; }
  .tv-title { font-size:2.1rem; }
  .tv-line  { font-size:1.35rem; }
  .tv-verse { font-size:1.5rem; }
  .tv-kicker { font-size:1rem; }
  .tv-ref   { font-size:1.05rem; }
  .tv-flame { font-size:3.2rem; }
  /* The floating candles-lit pill parks itself over the step counter on a
     phone - on the pray-along screens it steps aside entirely (the corner
     Home/Chapel links remain). */
  body.tv .candle-counter { display:none; }
  /* Hardened Oct 30, 2026 (second pass): Ez's phone STILL showed the giant
     overlay pills after the ?v=24 deploy — a resumed app page keeps its old
     in-memory CSS, and rem sizing lets Android's enlarged system font scale
     the buttons back up. So on phones the nav leaves the fixed overlay
     entirely and sits in the normal document flow under the prayer (overlap
     is then structurally impossible), and the buttons are sized in px with
     hard caps and text scaling pinned. */
  .tv-nav { position:static; margin:1.25rem 0 0; padding:0 .5rem 1.5rem;
            -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .tv-nav .tv-btn { font-size:14px; line-height:1.2; padding:6px 14px;
                    margin:0 4px; max-height:34px; border-radius:17px; }
  .tv-nav .tv-count { font-size:12px; margin-top:8px; }
  /* Third pass (Oct 30, 2026): cap EVERY .tv-btn on phones, not just the nav
     ones and .main — this generic rule is (0,1,0), so the nav rule (0,2,0,
     14px) and the .main rule (0,2,1, 16px) still win where they apply, while
     any other .tv-btn outside the nav (today only the screen-7 candle CTA,
     which is .main, but future ones included) can no longer render at the
     base 1.4rem. Text scaling pinned on the buttons themselves as well. */
  .tv-btn { font-size:16px; padding:9px 20px;
            -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body.tv .tv-btn.main { font-size:16px; padding:9px 20px; }
}

/* ---------- chapel "Who is this candle for?" chooser (Nov 10, 2026) ----------
   Two calm cards, side by side on desktop, stacked on a phone. Tapping
   one reveals only that door's flow (site.js: initCandleChoose). */
.candle-choose h2 { text-align: center; }
.candle-choose-cards {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.choose-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1.1rem 0.9rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow);
}
.choose-card:hover { transform: translateY(-2px); }
.choose-card.is-chosen { border-color: var(--red); background: #fdf3e3; }
.choose-card-title { font-weight: 700; font-size: 1.12rem; }
.choose-card-sub { font-size: 0.95rem; opacity: 0.85; }
@media (max-width: 640px) {
  .candle-choose-cards { flex-direction: column; }
}

.fundraiser-banner a, .prayer-hour-banner a { white-space: nowrap; }
@media (max-width: 700px) { .fundraiser-banner a, .prayer-hour-banner a { white-space: normal; } }