/* Shared styles for every prayer page (bibecheck.com/prayer/<address>/).
   The pages are made by tools/bibecheck/prayer_pages.py in the Luke vault; a change
   here reaches every page with no rebuild. Each page sets its look on <html data-look>;
   the colours and backgrounds match the looks on the homepage (index.html). */

:root {
  --btn-ink: #1b1403; --gold-strong: #ffc94d;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", Verdana, sans-serif;
}
html[data-look="morning"] { --page: #fbf3e4; --panel: #ffffff; --line: #e6d3ad; --accent: #9a5b00; --ink: #17203d; --soft: #3d4763; --ring: #e0a93b; --band: #f8ead0; --rgb: 251,243,228; --tint: 60,40,10; --bg: url("/img/bg-morning-2.webp"); --bg-y: 20%; }
html[data-look="sky"]     { --page: #f1f7fc; --panel: #ffffff; --line: #c9dcec; --accent: #1f5f99; --ink: #14294a; --soft: #3a4d6b; --ring: #8fb9dc; --band: #e3f0f9; --rgb: 241,247,252; --tint: 20,50,90; --bg: url("/img/bg-sky-3.webp"); --bg-y: 35%; }
html[data-look="sage"]    { --page: #f3f6ee; --panel: #ffffff; --line: #cfdcc2; --accent: #2c5a2a; --ink: #10241a; --soft: #2b4034; --ring: #9dbb8c; --band: #e6efdc; --rgb: 243,246,238; --tint: 30,60,30; --bg: url("/img/bg-sage-7.webp"); --bg-y: 88%; }
html[data-look="dusk"]    { --page: #faf1f3; --panel: #ffffff; --line: #e6cfd8; --accent: #8a3f66; --ink: #33203f; --soft: #55405f; --ring: #d9a3b8; --band: #f4e3ea; --rgb: 250,241,243; --tint: 70,30,60; --bg: url("/img/bg-dusk-2.webp"); --bg-y: 25%; }
html[data-look="linen"]   { --page: #fdfcf9; --panel: #ffffff; --line: #e4ded2; --accent: #7a5a1e; --ink: #22262e; --soft: #474d57; --ring: #cdb98f; --band: #f6f2ea; --rgb: 253,252,249; --tint: 40,35,25; --bg: url("/img/bg-linen-1.webp"); --bg-y: 78%; }
html[data-look="night"]   { --page: #070c1c; --panel: #111a35; --line: #2a3760; --accent: #ffd27a; --ink: #fff4e0; --soft: #d3dcf5; --ring: #ffd27a; --band: #0b1226; --rgb: 7,12,28; --tint: 0,0,0; --bg: url("/img/sky.webp"); --bg-y: top; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--body); font-size: 20px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--accent); }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

.sky {
  background:
    linear-gradient(180deg, rgba(var(--rgb),.10) 0, rgba(var(--rgb),.40) 260px, var(--page) 520px),
    var(--bg) center var(--bg-y) / cover no-repeat, var(--page);
}
.top { display: flex; justify-content: center; padding: 22px 0 6px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 21px; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.crumb { text-align: center; margin: 18px 0 6px; font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--accent); }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6vw, 60px); line-height: 1.08; text-align: center; margin: 0 0 18px; }
/* a soft glow behind the top words so they read on any background (dark glow on night) */
html:not([data-look="night"]) .brand, html:not([data-look="night"]) .crumb, html:not([data-look="night"]) h1 { text-shadow: 0 0 14px rgba(255,255,255,.9); }
html[data-look="night"] .brand, html[data-look="night"] .crumb, html[data-look="night"] h1 { text-shadow: 0 0 14px rgba(0,0,0,.8); }

/* video + the gold "Tap for sound" label on its top edge (never covers the card's words) */
.vwrap { position: relative; width: min(100%, 300px); margin: 30px auto 0; }
.card-video { position: relative; cursor: pointer; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #06101e; box-shadow: 0 0 0 1px var(--line), 0 26px 50px rgba(var(--tint),.28); }
.card-video video { width: 100%; height: 100%; object-fit: cover; }
.card-video.sound-on { box-shadow: 0 0 0 3px #ffc94d, 0 0 40px rgba(255,201,77,.55), 0 26px 50px rgba(var(--tint),.28); }
.sound {
  position: absolute; left: 50%; top: -17px; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; white-space: nowrap;
  font: 700 14px/1 var(--body); color: #1b1403; background: #ffc94d;
  border: 0; border-radius: 999px; padding: 8px 14px; min-height: 34px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.sound[aria-pressed="false"] { animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 0 rgba(255,201,77,.6); } 55% { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 10px rgba(255,201,77,0); } }
.sound[aria-pressed="true"] { background: #10151f; color: #ffd27a; }
.sound:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* sound bars: five bars, each with its own speed and pattern, so they move like real music */
.bars { display: inline-flex; align-items: center; gap: 3px; height: 14px; margin-left: 4px; }
.bars i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; opacity: .45; }
.bars i:nth-child(1) { transform: scaleY(.35); } .bars i:nth-child(2) { transform: scaleY(.6); }
.bars i:nth-child(3) { transform: scaleY(.45); } .bars i:nth-child(4) { transform: scaleY(.7); } .bars i:nth-child(5) { transform: scaleY(.3); }
.sound[aria-pressed="true"] .bars i { opacity: 1; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.sound[aria-pressed="true"] .bars i:nth-child(1) { animation-name: b1; animation-duration: .9s; }
.sound[aria-pressed="true"] .bars i:nth-child(2) { animation-name: b2; animation-duration: .7s; animation-delay: -.2s; }
.sound[aria-pressed="true"] .bars i:nth-child(3) { animation-name: b3; animation-duration: 1.1s; animation-delay: -.5s; }
.sound[aria-pressed="true"] .bars i:nth-child(4) { animation-name: b2; animation-duration: .8s; animation-delay: -.35s; }
.sound[aria-pressed="true"] .bars i:nth-child(5) { animation-name: b1; animation-duration: 1s; animation-delay: -.65s; }
@keyframes b1 { 0%, 100% { transform: scaleY(.25); } 30% { transform: scaleY(.9); } 60% { transform: scaleY(.45); } 80% { transform: scaleY(.7); } }
@keyframes b2 { 0%, 100% { transform: scaleY(.5); } 25% { transform: scaleY(.2); } 50% { transform: scaleY(1); } 75% { transform: scaleY(.35); } }
@keyframes b3 { 0%, 100% { transform: scaleY(.8); } 40% { transform: scaleY(.3); } 70% { transform: scaleY(.95); } }

/* the prayer and the verse, exactly as on the card */
.prayer { margin: 40px 0 0; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 30px 32px; box-shadow: 0 6px 20px rgba(var(--tint),.07); }
.prayer h2, .text h2, .related h2, .follow h2, .how h2 { font-family: var(--display); font-weight: 600; font-size: 32px; margin: 0 0 12px; }
.prayer p { font-family: var(--display); font-size: 27px; line-height: 1.4; margin: 0 0 14px; }
.prayer p.amen { font-style: italic; margin: 0; }
.verse { margin: 26px 0 0; padding: 24px 28px; background: var(--band); border-radius: 22px; text-align: center; }
.verse blockquote { margin: 0 0 8px; font-family: var(--display); font-style: italic; font-size: 26px; line-height: 1.35; }
.verse cite { font-style: normal; font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--accent); }

/* send this prayer to someone */
.share { margin: 26px 0 0; text-align: center; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  font: 700 19px/1.2 var(--body); color: var(--ink); background: var(--panel);
  border: 2px solid var(--ink); border-radius: 999px; padding: 14px 26px; min-height: 56px;
}
.share-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.share-more[hidden] { display: none; }
.share-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 0; }
.share-more a, .share-more button { font: 700 17px/1.2 var(--body); border-radius: 999px; padding: 12px 20px; min-height: 48px; cursor: pointer; text-decoration: none; }
.share-more .fb { background: #1877f2; color: #fff; border: 0; }
.share-more .copy { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }

.text { margin: 40px 0 0; }
.text p { margin: 0 0 14px; }

/* buy box + how it works (on the page, so the buyer never has to leave it) */
.gift { margin: 44px 0 0; padding: 34px 28px; text-align: center; background: var(--panel); border: 2px solid var(--ring); border-radius: 22px; }
.gift h2 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4.5vw, 40px); line-height: 1.15; margin: 0 0 10px; }
.gift > p { margin: 0 0 24px; color: var(--soft); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap;
  background: linear-gradient(180deg, #ffe09a 0%, var(--gold-strong) 100%); color: var(--btn-ink);
  text-decoration: none; font-weight: 700; font-size: 22px; padding: 18px 32px; border-radius: 999px; min-height: 64px;
  box-shadow: 0 0 0 1px rgba(184,120,10,.35), 0 12px 30px rgba(var(--tint),.22);
}
.btn .price { background: var(--btn-ink); color: #ffd27a; border-radius: 999px; padding: 4px 14px; font-size: 19px; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.how { margin: 30px 0 0; text-align: left; }
.how h2 { font-size: 26px; text-align: center; }
.how ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px; }
.how li { counter-increment: s; display: flex; align-items: center; gap: 14px; font-size: 18px; line-height: 1.35; }
.how li::before {
  content: counter(s); flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--ring); font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--accent);
}
.how .note { margin: 16px 0 0; font-size: 16px; color: var(--soft); text-align: center; }

.related { margin: 44px 0 0; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* each related prayer: small card picture, title, arrow, so it clearly reads as a link */
.related a { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; text-decoration: none; font-weight: 700; color: var(--ink); box-shadow: 0 4px 14px rgba(var(--tint),.08); transition: border-color .15s ease, transform .15s ease; }
.related a:hover, .related a:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.related img { width: 48px; height: 85px; object-fit: cover; border-radius: 8px; flex: none; background: #06101e; }
.related span:not(.go) { flex: 1; line-height: 1.35; }
.related .go { flex: none; font-size: 34px; line-height: 1; color: var(--accent); }

.follow { margin: 44px 0 0; text-align: center; }
.follow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 14px 26px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 19px; color: #fff; background: #1877f2; }
.follow-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

footer { margin-top: 60px; border-top: 1px solid var(--line); padding: 30px 0 44px; text-align: center; font-size: 17px; }
footer nav { display: flex; justify-content: center; gap: 24px; }
footer a { color: var(--soft); }

@media (max-width: 600px) {
  body { font-size: 19px; }
  .prayer { padding: 24px 22px; }
  .prayer p { font-size: 24px; }
  .btn, .follow-btn, .share-btn { width: 100%; }
  .btn { padding: 16px 20px; }
}
/* keep the buy button on one line, even on small phones (360 px) */
@media (max-width: 400px) {
  .gift { padding: 28px 14px; }
  .btn { font-size: 19px; gap: 10px; padding-left: 16px; padding-right: 16px; }
  .btn .price { font-size: 17px; padding: 3px 11px; }
  .share-btn { font-size: 17px; padding: 14px 14px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .sound[aria-pressed="false"] { animation: none; }
  .bars i { animation: none !important; }
}

/* Questions (FAQ): tap a question to open its answer */
.faq { margin: 44px 0 0; }
.faq h2 { font-family: var(--display); font-weight: 600; font-size: 32px; margin: 0 0 12px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; margin: 0 0 10px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style-position: inside; }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.faq details p { margin: 0 0 14px; }

/* "See all prayers" under the related list */
.related .all { margin: 14px 0 0; text-align: center; }
.related .all a { display: inline; border: 0; padding: 0; box-shadow: none; background: none; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* gallery page: bibecheck.com/prayers/ */
.gal-wrap { max-width: 1080px; }
.gal-search { max-width: 560px; margin: 8px auto 0; }
.gal-search label { display: block; font-weight: 700; margin: 0 0 6px; }
.gal-search input {
  width: 100%; font: 400 20px/1.3 var(--body); color: var(--ink); background: var(--panel);
  border: 2px solid var(--line); border-radius: 999px; padding: 14px 20px; min-height: 56px;
}
.gal-search input:focus { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 26px; }
.chips button {
  font: 700 16px/1.2 var(--body); cursor: pointer; border-radius: 999px; padding: 10px 16px; min-height: 44px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
}
.chips button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.chips button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.gal-count { margin: 18px 0 10px; color: var(--soft); font-size: 17px; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gallery li[hidden] { display: none; }
.gallery a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(var(--tint),.08); transition: transform .15s ease, border-color .15s ease;
}
.gallery a:hover, .gallery a:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.gallery a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gallery img { width: 100%; aspect-ratio: 9 / 16; height: auto; object-fit: cover; background: #06101e; }
.gallery span { padding: 12px 14px 14px; font-weight: 700; font-size: 17px; line-height: 1.3; }
.gal-none { text-align: center; margin: 20px 0; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gallery span { font-size: 16px; } }

/* gallery groups (one per topic) + "Show N more" (extra prayers load from prayers/more.json) */
.gal-group { margin: 0 0 34px; }
.gal-group[hidden] { display: none; }
.gal-group h2 { font-family: var(--display); font-weight: 600; font-size: 30px; margin: 8px 0 14px; }
.gallery small { display: block; padding: 0 14px 14px; margin-top: -6px; font-size: 14px; font-weight: 700; color: var(--accent); }
.more {
  display: block; width: 100%; max-width: 520px; margin: 16px auto 0; cursor: pointer;
  font: 700 18px/1.3 var(--body); color: var(--ink); background: var(--panel);
  border: 2px solid var(--accent); border-radius: 999px; padding: 14px 20px; min-height: 56px;
}
.more[hidden] { display: none; }
.more:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.chips button { min-height: 48px; padding: 12px 18px; }

/* "‹ All prayers" at the top of every prayer page (goes back to the gallery spot when you came from it) */
.back { margin: 4px 0 0; text-align: center; }
.back a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  font-weight: 700; font-size: 18px; text-decoration: none; color: var(--ink);
  background: rgba(255,255,255,.75); border: 1px solid var(--line);
}
html[data-look="night"] .back a { background: rgba(17,26,53,.75); }
.back a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* gallery: the top area is shorter than on a prayer page, so fade by its own height
   (a fixed 520px fade left a visible edge on some phones) */
html[data-page="prayers"] .sky, html[data-page="not-found"] .sky {
  padding-bottom: 28px;
  background:
    linear-gradient(180deg, rgba(var(--rgb),.10) 0%, rgba(var(--rgb),.45) 55%, var(--page) 100%),
    var(--bg) center var(--bg-y) / cover no-repeat, var(--page);
}
.more { white-space: nowrap; }
/* gallery: tighter gap between the topic buttons and the list */
html[data-page="prayers"] .sky { padding-bottom: 14px; }
html[data-page="prayers"] .chips { margin-bottom: 4px; }
html[data-page="prayers"] .gal-count { margin-top: 10px; }

/* ---------- motion: quick, snappy feedback (not slow and floaty) ---------- */
/* every button and tile gives a quick "press" when tapped */
.btn, .share-btn, .more, .chips button, .sound, .follow-btn, .back a, .related a, .gallery a, .share-more a, .share-more button {
  transition: transform .12s cubic-bezier(.2,.9,.3,1.4), box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:active, .share-btn:active, .more:active, .chips button:active, .sound:active, .follow-btn:active,
.back a:active, .share-more a:active, .share-more button:active { transform: scale(.94); }
.related a:active, .gallery a:active { transform: scale(.97); }
.sound.edge:active, .sound:active { transform: translateX(-50%) scale(.94); }
/* a topic button that becomes selected pops once */
.chips button[aria-pressed="true"] { animation: chipPop .22s cubic-bezier(.2,.9,.3,1.5); }
@keyframes chipPop { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* tiles snap in when they appear (search, topic, "Show more") */
.gallery li { animation: tileIn .28s cubic-bezier(.2,.9,.3,1.2) both; }
.gallery li:nth-child(2n) { animation-delay: .04s; }
.gallery li:nth-child(3n) { animation-delay: .08s; }
@keyframes tileIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* a section that comes back after filtering fades in */
.gal-group { animation: groupIn .2s ease-out both; }
@keyframes groupIn { from { opacity: 0; } to { opacity: 1; } }
/* the buy button gives a soft pulse now and then to draw the eye */
.gift .btn { animation: buyPulse 3.2s ease-in-out 1.5s infinite; }
@keyframes buyPulse { 0%, 86%, 100% { transform: scale(1); } 90% { transform: scale(1.05); } 94% { transform: scale(.98); } }
.gift .btn:active { animation: none; transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .gallery li, .gal-group, .chips button[aria-pressed="true"], .gift .btn { animation: none !important; }
  .btn, .share-btn, .more, .chips button, .sound, .follow-btn, .back a, .related a, .gallery a { transition: none; }
}
/* search: say what is shown, and highlight the searched word */
.gal-count strong { color: var(--ink); }
.gallery mark { background: #ffe08a; color: inherit; border-radius: 4px; padding: 0 2px; }