:root{
  --bg:#080604;
  --panel:#1b120a;
  --panel2:#2a1c11;
  --text:#f4e7cf;
  --muted:#cdbfa8;
  --gold:#c8a85a;
  --line:rgba(244,231,207,.14);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
}

body{
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}


*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  color:var(--text);
  font-family:Georgia, "Times New Roman", Times, serif;
  line-height:1.65;
  background:
    radial-gradient(920px 560px at 16% 8%, rgba(200,168,90,.10), transparent 60%),
    radial-gradient(860px 560px at 74% 18%, rgba(138,90,43,.10), transparent 60%),
    url("assets/images/mountain-ridge.svg"),
    var(--bg);
  background-repeat:no-repeat, no-repeat, repeat-x, no-repeat;
  background-position:0 0, 0 0, 0 100%, 0 0;
  background-size:auto, auto, 1400px 160px, auto;
}

a{color:var(--text); text-decoration:none}
a:hover{color:var(--gold)}

.container{
  width:min(980px, calc(100% - 32px));
  margin:0 auto;
}

.site-header{
  background:rgba(27,18,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}

.brand img{
  width:44px;
  height:44px;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(0,0,0,.55);
}

.brand span{
  font-weight:700;
  letter-spacing:.4px;
}

.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav button{
  background:none;
  border:none;
  color:var(--muted);
  font-size:.98rem;
  cursor:pointer;
  padding:6px 10px;
  border-radius:6px;

  transition:all .25s ease;
}

/* Glow */
.nav button:hover{
  color:var(--gold);
  box-shadow:0 0 10px rgba(200,168,90,.25);
}

/* Click feedback */
.nav button:active{
  transform:scale(.96);
}

/* Active page */
.nav button.active{
  background:rgba(200,168,90,.10);
  color:var(--gold);
}

.hero{
  min-height:64vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:70px 16px 78px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)),
    url("assets/images/appalachian-hero.jpg");
  background-size:cover;
  background-position:center;
  position:relative;
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:120px;
  background:url("assets/images/mountain-ridge.svg") repeat-x;
  background-size:1400px 160px;
  opacity:.55;
  pointer-events:none;
}

.hero-inner{
  max-width:860px;
  background:rgba(27,18,10,.58);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 22px;
}

.hero-small{
  min-height:220px;
  padding:40px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)),
    url("assets/images/appalachian-hero.jpg");
  background-size:cover;
  background-position:center;
}

.logo-hero{
  width:260px;
  max-width:82%;
  height:auto;
  display:block;
  margin:0 auto 16px;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.65));
}

.h1{
  margin:0 0 8px;
  font-size:clamp(2.0rem, 4.2vw, 3.0rem);
  letter-spacing:.2px;
}

.tagline{
  margin:0;
  color:var(--muted);
}

.grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(12, 1fr);
  padding:24px 0 70px;
}

.panel{
  grid-column:span 12;
  background:linear-gradient(180deg, rgba(200,168,90,.06), transparent 55%), var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  overflow:hidden;
}

.card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}

.card h3{
  margin:0 0 8px;
  font-size:1.2rem;
}

.card p{
  margin:0 0 10px;
  color:var(--muted);
}

.meta{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 12px;
}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(200,168,90,.60);
  color:var(--text);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease;
  max-width:100%;
  white-space:normal;
}

.btn:hover{
  border-color:rgba(200,168,90,.92);
  color:var(--gold);
  box-shadow:0 0 14px rgba(200,168,90,.30);
}

.card,
.panel{
  transition:transform .35s ease, box-shadow .35s ease;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 35px rgba(200,168,90,.14);
}

.divider{
  width:100%;
  height:40px;
  background:url("assets/images/mountain-divider.svg") center/cover no-repeat;
  opacity:.95;
  margin:18px 0;
}

.prose p{margin:0 0 14px}

.prose blockquote{
  margin:18px 0;
  padding:12px 16px;
  border-left:4px solid rgba(200,168,90,.70);
  background:rgba(200,168,90,.06);
}

.footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  padding:22px 0;
  background:
    url("assets/images/mountain-ridge.svg") repeat-x,
    rgba(27,18,10,.92);
  background-size:1400px 160px, auto;
  background-position:0 0, 0 0;
}

/* Devotion and Story cards behave the same */

.devotion-card,
.story-card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:transform .35s ease, box-shadow .35s ease;
}

.devotion-card:hover,
.story-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 35px rgba(200,168,90,.14);
}

/* CATEGORY CARDS (visually distinct from devotions) */



.category-badge{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--gold);
  margin-bottom:10px;
}

.category-desc{
  color:var(--muted);
  margin-bottom:14px;
}

.category-actions .btn{
  border-color:rgba(200,168,90,.9);
}

.category-card{
background: linear-gradient(
    180deg,
    rgba(200,168,90,.10),
    rgba(200,168,90,.02)
  ), var(--panel2);

  border:1px solid rgba(200,168,90,.5);
  border-top:3px solid var(--gold);

  border-radius:14px;
  padding:22px; /* 👈 slightly larger than devotions */

  box-shadow:0 14px 40px rgba(200,168,90,.18);

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  transition:transform .35s ease, box-shadow .35s ease;
}

.chapters .devotion-grid {
  margin-top: 10px;
}

.chapters .devotion-grid {
  margin-top: 10px;
}

.category-card h3{
  font-size:1.4rem;
}

.category-desc{
  font-size:15px;
}

.category-badge{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--gold);
  margin-bottom:6px; /* tightened */
}

.category-card h3{
  margin:6px 0;
}

.category-desc{
  color:var(--muted);
  margin-bottom:10px;
  font-size:14px;
  line-height:1.4;
}

.category-actions{
  margin-top:6px;
}

.category-sub{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  opacity:.7;
}

.grid-break{
  grid-column: 1 / -1;
  height: 10px;
}

/* Devotion index layout */

.devotion-index .devotion-grid{
  display:grid;
  gap:20px;
  margin-top:20px;
  grid-template-columns:1fr;

  grid-auto-flow: row; /* 🔥 forces clean row stacking */
}

.devotion-card h3{
  font-size:1.1rem;
  line-height:1.35;
}

.devotion-card h3 {
  font-weight: 600;
}

.devotion-card{
  cursor:pointer;
}

.devotion-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.devotion-index{
  padding-bottom:60px;
}

.devotion-content{
  user-select:none;
}

/* Tablet */
@media (min-width:600px){
  .devotion-index .devotion-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Small desktop */
@media (min-width:900px){
  .devotion-index .devotion-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* Large screens – four across */
@media (min-width:1200px){
  .devotion-index .devotion-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* Media safety */
img, svg{
  max-width:100%;
  height:auto;
}

/* Breakpoints for devotion cards */


@media (max-width:768px){
  .hero{padding:52px 16px 66px; min-height:56vh}
  .hero-inner{padding:20px 16px}
  .logo-hero{width:190px}
  .panel{padding:18px}
}
/* Navigation layout on smaller screens */
@media (max-width:820px){
  .header-container{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav{
    justify-content:flex-start;
  }
}

/* Hero spacing on smaller screens */
@media (max-width:768px){
  .hero{padding:52px 16px 66px; min-height:56vh}
  .hero-inner{padding:20px 16px}
  .logo-hero{width:190px}
  .panel{padding:18px}
}

/* Container breathing room on small screens */
@media (max-width:480px){
  .container{ width:calc(100% - 24px); }
}

/* Media safety */
.store-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:18px;
  align-items:start;
}

.store-cover{
  grid-column:span 12;
}

.store-details{
  grid-column:span 12;
}

.store-cover-img{
  width:100%;
  max-width:420px;
  height:auto;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:block;
}

img{
  pointer-events:none;
  -webkit-user-drag:none;
}

.store-title{
  margin:0 0 10px;
  font-size:1.6rem;
}

.store-note{
  margin:0 0 12px;
  color:var(--muted);
}

.store-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 16px;
}

.store-badge{
  border:1px solid rgba(200,168,90,.60);
  color:var(--gold);
  border-radius:999px;
  padding:6px 12px;
  font-size:.95rem;
}

.store-actions{
  margin:0 0 12px;
}

.store-fineprint{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
@media (min-width:900px){
  .store-cover{ grid-column:span 5; }
  .store-details{ grid-column:span 7; }
}


body[style*="background: #ffffff"] .hero-small {
  background: none !important;
  padding: 0;
  text-align: center;
}

body[style*="background: #ffffff"] .hero-inner h1 {
  color: #111;
  font-size: 32px;
}

body[style*="background: #ffffff"] .tagline {
  color: #555;
}

.chapter-intro {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 10px auto 30px;
  color: var(--muted);
  line-height: 1.7;
}

.chapter-intro p {
  margin-bottom: 12px;
}

.devotion-card .btn {
  margin-top: auto;
}

.back-link {
  margin-top: 20px;
  margin-bottom: 10px;
}

.devotion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(200,168,90,.18);
}

/* Fix spacing for single devotion pages */
main.container .panel{
  margin-bottom:30px;
}

main.container{
  min-height:70vh;
  padding-top:30px;
  padding-bottom:30px;
}
.devotion-card h3,
.story-card h3{
  margin-top:0;
}
.panel h3:first-child{
  margin-top:0;
}

/* =========================
   PRAYER EXPERIENCE LAYER
========================= */

#prayer-experience{
  text-align:center;
  max-width:520px;
  margin:0 auto;
}

/* textarea matches your aesthetic */
#prayer-experience textarea{
  width:100%;
  height:130px;
  padding:12px;

  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  border-radius:10px;

  color:var(--text);
  font-family:inherit;
  line-height:1.5;

  box-shadow:inset 0 0 12px rgba(0,0,0,.45);
}

#prayer-experience textarea::placeholder{
  color:var(--muted);
  opacity:.7;
}

/* buttons feel like your existing system */
#prayer-experience button{
  margin-top:10px;
  padding:10px 16px;

  border-radius:999px;
  border:1px solid rgba(200,168,90,.6);

  background:transparent;
  color:var(--text);

  cursor:pointer;

  transition:all .3s ease;
}

#prayer-experience button:hover{
  color:var(--gold);
  border-color:rgba(200,168,90,.9);
  box-shadow:0 0 12px rgba(200,168,90,.25);
}

/* reveal flow spacing */
#prayer-experience > div{
  margin-top:18px;
}

/* hidden state */
.hidden{
  display:none;
}

/* fade effect for "release prayer" */
.fade-out{
  opacity:0;
  transition:opacity 2s ease;
}

/* timer text */
#timer{
  margin-top:10px;
  color:var(--muted);
  font-size:.95rem;
}

/* soften tone of final message */
#end{
  color:var(--muted);
}

/* Contact page button fix */
button.btn {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(200,168,90,.60);
  border-radius: 999px;

  padding: 10px 14px;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

button.btn:hover {
  color: var(--gold);
  border-color: rgba(200,168,90,.92);
  box-shadow: 0 0 14px rgba(200,168,90,.30);
}

/* Contact + Prayer text areas */

textarea {
  width: 100%;
  min-height: 160px; /* 👈 bigger */
  padding: 14px;

  background: rgba(0,0,0,.35);
  border: 1px solid var(--line);
  border-radius: 12px;

  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;

  box-shadow: inset 0 0 14px rgba(0,0,0,.45);

  resize: vertical; /* user can expand */
}

textarea::placeholder {
  color: var(--muted);
  opacity: .7;
}

textarea:focus {
  outline: none;
  border-color: rgba(200,168,90,.7);
  box-shadow: 0 0 10px rgba(200,168,90,.25);
}