
/* 321 PRAY V89 — transparent prayer-needs review */
:root{
  --navy:#0f2f64;
  --navy2:#173c77;
  --gold:#b8780c;
  --rose:#cf476c;
  --ink:#17315f;
  --muted:#536884;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,249,238,.26)),
    url("theme-backgrounds/bright-gateway-world.webp") center 22%/cover no-repeat fixed,
    linear-gradient(180deg,#eaf6ff 0%,#fff9ee 48%,#e9f5ff 100%);
}
a{color:inherit}
.shell{max-width:1180px;margin:auto;padding:0 18px 38px}

/* completely transparent header */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:12px max(18px,calc((100vw - 1180px)/2 + 18px));
  background:transparent;
  border:0;box-shadow:none;backdrop-filter:none;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,.75)}
.brand .cross{font-size:2rem;color:var(--gold);line-height:1}
.brand strong{font-size:1.5rem;letter-spacing:.035em;color:var(--navy)}
.brand small{display:block;font:700 .54rem/1.1 Arial,sans-serif;letter-spacing:.16em;color:#5b6f91}
.topnav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.topnav a{
  font:800 .73rem Arial,sans-serif;text-decoration:none;
  padding:7px 9px;border-radius:999px;color:var(--navy);
  background:transparent;text-shadow:0 1px 2px rgba(255,255,255,.8)
}

/* headline sits directly on the 321 PRAY world */
.feature-hero{text-align:center;padding:24px 12px 4px}
.feature-hero .eyebrow{
  display:inline-block;
  font:900 .67rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:#956006;
  text-shadow:0 1px 2px rgba(255,255,255,.95)
}
.feature-hero h1{
  font-size:clamp(2rem,4.6vw,4.2rem);line-height:.98;
  margin:8px 0 9px;color:var(--navy);
  text-wrap:balance;text-shadow:0 2px 4px rgba(255,255,255,.9)
}
.feature-hero p{
  font-size:clamp(.98rem,1.8vw,1.18rem);max-width:760px;margin:0 auto;
  color:#2c4d7b;line-height:1.45;text-shadow:0 1px 3px rgba(255,255,255,.95)
}

/* MovaSpin-style compact icon carousel */
.shortcut-wrap{display:none!important}
.prayer-carousel-shell{
  position:relative;
  max-width:860px;
  margin:14px auto 6px;
  padding:0 28px;
  background:transparent!important;
}
.prayer-needs-carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:72px;
  gap:9px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 1px 7px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:transparent!important;
}
.prayer-needs-carousel::-webkit-scrollbar{display:none}
.prayer-topic-tile{
  scroll-snap-align:start;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  width:72px;
  min-width:72px;
  padding:0;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:var(--navy);
}
.prayer-topic-tile img{
  display:block!important;
  width:50px!important;
  height:50px!important;
  max-width:50px!important;
  max-height:50px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 4px 7px rgba(64,74,93,.16));
}
.prayer-topic-tile span{
  font:800 .61rem/1.08 Arial,sans-serif;
  text-align:center;color:#173a73;
  max-width:72px;
  min-height:1.25rem;
  display:grid;place-items:center;
  text-shadow:0 1px 2px rgba(255,255,255,.95);
}
.prayer-topic-tile.active img{filter:drop-shadow(0 0 7px rgba(206,142,33,.58))}
.prayer-topic-tile.active span{color:#bd365e}
.prayer-carousel-arrow{
  position:absolute;top:38%;transform:translateY(-50%);z-index:4;
  width:25px;height:25px;border:0;border-radius:999px;
  background:transparent;box-shadow:none;
  color:#173a73;font:900 1.35rem/1 Arial,sans-serif;
  display:grid;place-items:center;cursor:pointer;
  text-shadow:0 1px 3px rgba(255,255,255,.95)
}
.prayer-carousel-arrow.prev{left:0}
.prayer-carousel-arrow.next{right:0}

/* simple transparent topic heading */
.topic-hero{
  margin:16px auto 8px;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 92px;
  gap:16px;align-items:center;
  position:relative;overflow:visible;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
.topic-hero:before{display:none!important}
.topic-hero-copy{padding:10px 0;position:relative}
.topic-hero .topic-kicker{
  font-style:italic;color:#aa6b18;font-size:1rem;
  text-shadow:0 1px 2px rgba(255,255,255,.95)
}
.topic-hero h2{
  font-size:clamp(2.35rem,5vw,4.4rem);
  line-height:.92;margin:1px 0 9px;color:var(--rose);
  text-shadow:0 2px 4px rgba(255,255,255,.9)
}
.topic-hero p{
  font-size:1rem;line-height:1.48;max-width:720px;margin:0;
  color:#2c4d75;text-shadow:0 1px 3px rgba(255,255,255,.95)
}
.topic-hero-art{min-height:0!important;display:grid;place-items:center;background:transparent!important}
.topic-symbol-image{
  display:block!important;
  width:72px!important;height:72px!important;
  max-width:72px!important;max-height:72px!important;
  object-fit:contain!important;background:transparent!important;
  filter:drop-shadow(0 7px 14px rgba(133,92,32,.18))!important
}

/* no cards — all content floats on the common heavenly background */
.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:8px}
.panel,.panel.wide{
  padding:16px 0 18px;
  background:transparent!important;
  border:0!important;border-radius:0!important;
  box-shadow:none!important;backdrop-filter:none!important;
  border-top:1px solid rgba(151,104,24,.17)!important;
}
.panel.wide{grid-column:1/-1}
.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.panel-head .ico{font:700 1.25rem Arial,sans-serif;color:var(--gold);text-shadow:0 1px 2px rgba(255,255,255,.95)}
.panel-head h3{margin:0;font-size:1.32rem;color:#173a73;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.panel-head a{margin-left:auto;font:800 .7rem Arial,sans-serif;text-decoration:none;color:#1b4e91;text-shadow:0 1px 2px rgba(255,255,255,.95)}

.verse-list,.quote-list,.journey-list,.path-list{display:grid;gap:7px}
.verse,.saint-quote,.saint-card,.journey,.path,.related a{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.verse{
  display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:start;
  padding:7px 0;text-decoration:none;
  border-bottom:1px solid rgba(112,95,67,.10)!important
}
.verse .num{font:900 .65rem Arial,sans-serif;color:#966209;background:transparent!important;padding:2px 0}
.verse blockquote{margin:0;font-size:.95rem;line-height:1.4;color:#203e68;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.verse cite{display:block;margin-top:4px;font:800 .67rem Arial,sans-serif;color:#8e610e}
.go{font:900 1.1rem Arial,sans-serif;color:#1d518f}

.saint-quote{
  display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center;
  text-decoration:none;padding:5px 0
}
.saint-quote img,.saint-card img{
  object-fit:cover;border-radius:50%;
  background:transparent!important;
  box-shadow:0 4px 12px rgba(43,66,94,.13)
}
.saint-quote img{width:50px;height:50px}
.saint-quote blockquote{margin:0 0 3px;font-size:.92rem;line-height:1.33;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.saint-quote small{font:800 .65rem Arial,sans-serif;color:#805b14}
.saint-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.saint-card{text-decoration:none;text-align:center;padding:5px 2px}
.saint-card img{width:64px;height:64px;margin:auto}
.saint-card strong{display:block;margin-top:5px;font-size:.84rem;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.saint-card small{display:block;margin-top:2px;font:700 .59rem Arial,sans-serif;color:#5f7391}

.journey{display:block;text-decoration:none;padding:7px 0;border-bottom:1px solid rgba(112,95,67,.10)!important}
.journey strong{display:block;color:#173b72;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.journey small{display:block;font:800 .62rem Arial,sans-serif;color:#996910;margin:2px 0}
.journey span{display:block;font-size:.84rem;line-height:1.33;color:#4d6380;text-shadow:0 1px 2px rgba(255,255,255,.95)}

.path{display:flex;gap:9px;align-items:center;text-decoration:none;padding:6px 0}
.path b{color:#17457f;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.path small{display:block;color:#5e7290;font:600 .67rem/1.3 Arial,sans-serif;margin-top:2px}
.path .path-icon{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:transparent!important;color:#94600a;font:900 .9rem Arial,sans-serif;flex:none
}
.related{display:flex;flex-wrap:wrap;gap:8px}
.related a{
  text-decoration:underline;text-underline-offset:3px;
  padding:3px 1px;font:800 .7rem Arial,sans-serif;color:#224779
}
.source-note{font:600 .66rem/1.45 Arial,sans-serif;color:#657993;margin:10px 2px 0;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.footer{
  margin-top:16px;padding:18px;text-align:center;
  border:0;background:transparent!important;
  font:700 .66rem Arial,sans-serif;color:#536985;text-shadow:0 1px 2px rgba(255,255,255,.95)
}

/* landing page stays deliberately sparse */
.mockup-note{
  max-width:780px;margin:6px auto 0;padding:0;
  border:0!important;background:transparent!important;
  text-align:center;font:700 .63rem/1.35 Arial,sans-serif;color:#6a6f7a
}
.prayer-needs-showcase{display:none!important}
.home-grid,.home-topic{display:none!important}

.landing-intro{
  max-width:780px;margin:22px auto 8px;text-align:center;
  color:#294c79;text-shadow:0 1px 3px rgba(255,255,255,.95)
}
.landing-intro h2{font-size:clamp(1.5rem,3vw,2.25rem);margin:0 0 6px;color:#173a73}
.landing-intro p{margin:0;font-size:.94rem;line-height:1.5}

@media(max-width:900px){
  .topnav{display:none}
  .section-grid{grid-template-columns:1fr}
  .panel.wide{grid-column:auto}
  .topic-hero{grid-template-columns:1fr 76px}
  .topic-symbol-image{width:62px!important;height:62px!important;max-width:62px!important;max-height:62px!important}
}
@media(max-width:560px){
  body{background-attachment:scroll}
  .shell{padding:0 12px 28px}
  .topbar{padding:9px 12px;position:relative}
  .brand strong{font-size:1.22rem}.brand small{display:none}
  .feature-hero{padding-top:14px}
  .feature-hero h1{font-size:2.18rem}
  .feature-hero p{font-size:.9rem}
  .prayer-carousel-shell{max-width:100%;padding:0 22px;margin-top:11px}
  .prayer-needs-carousel{grid-auto-columns:62px;gap:7px}
  .prayer-topic-tile{width:62px;min-width:62px}
  .prayer-topic-tile img{
    width:44px!important;height:44px!important;
    max-width:44px!important;max-height:44px!important
  }
  .prayer-topic-tile span{font-size:.56rem;max-width:62px}
  .prayer-carousel-arrow{width:20px;height:20px;font-size:1rem}
  .topic-hero{grid-template-columns:1fr 64px;gap:8px;margin-top:10px}
  .topic-hero-copy{padding:6px 0}
  .topic-hero h2{font-size:2.7rem}
  .topic-hero p{font-size:.92rem}
  .topic-symbol-image{
    width:54px!important;height:54px!important;
    max-width:54px!important;max-height:54px!important
  }
  .panel{padding:13px 0 15px}
  .panel-head h3{font-size:1.16rem}
  .saint-row{gap:4px}
  .saint-card img{width:54px;height:54px}
  .saint-card strong{font-size:.72rem}.saint-card small{font-size:.54rem}
  .verse{grid-template-columns:auto 1fr}.verse .go{display:none}
}


/* V89 readability + brighter heavenly lock */
body{
  color:#102f5c!important;
  font-family:Arial,Helvetica,sans-serif!important;
  background:
    linear-gradient(180deg,
      rgba(249,253,255,.78) 0%,
      rgba(255,252,244,.74) 46%,
      rgba(249,253,255,.70) 100%),
    url("theme-backgrounds/bright-gateway-world.webp") center top/cover no-repeat fixed,
    #f6fbff!important;
}
.brand strong,.feature-hero h1,.topic-hero h2,.panel-head h3,
.landing-intro h2{
  font-family:Georgia,"Times New Roman",serif!important;
}
.feature-hero h1,.topic-hero h2,.panel-head h3,
.verse blockquote,.saint-quote blockquote,.journey strong,.path b,
.prayer-topic-tile span{
  text-shadow:none!important;
}
.feature-hero p,.topic-hero p,.verse blockquote,.journey span,
.path small,.source-note{
  color:#203e68!important;
}
.feature-hero p,.topic-hero p,.verse blockquote,.saint-quote blockquote,
.journey span,.path small{
  line-height:1.5!important;
}
.feature-hero p,.topic-hero p{font-family:Arial,Helvetica,sans-serif!important}
.verse blockquote,.saint-quote blockquote{font-family:Arial,Helvetica,sans-serif!important}

/* Full, uncropped compact icons */
.prayer-topic-tile img{
  width:52px!important;height:52px!important;
  max-width:52px!important;max-height:52px!important;
  object-fit:contain!important;
  overflow:visible!important;
  clip-path:none!important;
}
.prayer-topic-tile{
  overflow:visible!important;
  padding-top:3px!important;
}
.prayer-needs-carousel{
  padding-top:8px!important;
  padding-bottom:10px!important;
  overflow-y:visible!important;
}
.topic-symbol-image{
  width:70px!important;height:70px!important;
  max-width:70px!important;max-height:70px!important;
  object-fit:contain!important;
  clip-path:none!important;
  overflow:visible!important;
}

/* keep all content visually transparent */
.topbar,.feature-hero,.topic-hero,.topic-hero-copy,.topic-hero-art,
.panel,.panel.wide,.verse,.saint-quote,.saint-card,.journey,.path,
.footer,.prayer-carousel-shell,.prayer-needs-carousel,
.prayer-topic-tile,.landing-intro{
  background:transparent!important;
}

/* stronger simple text contrast */
.panel-head h3{color:#12376c!important}
.panel-head a,.go{color:#174b8b!important}
.verse cite,.saint-quote small,.journey small{color:#8a5c08!important}
.topic-hero .topic-kicker{color:#9a6109!important}
.topic-hero h2{color:#c43f66!important}

/* remove any remaining washed-out effects */
.panel,.panel.wide{
  opacity:1!important;
  filter:none!important;
}
@media(max-width:560px){
  body{background-attachment:scroll!important}
  .prayer-topic-tile img{
    width:48px!important;height:48px!important;
    max-width:48px!important;max-height:48px!important
  }
  .topic-symbol-image{
    width:58px!important;height:58px!important;
    max-width:58px!important;max-height:58px!important
  }
}
