/* ==========================================================================
   Shared Reading, Study, Article & Search Templates (reading.css)
   Palette: Royal Sanctuary Navy, Warm Ivory/Alabaster, Deep Charcoal & Burnished/Champagne Gold
   ========================================================================== */
.reading-page h1,.reading-page h2,.reading-page h3{
  font-family:var(--site-serif);
  font-weight:500;
  line-height:1.14;
  color:var(--site-navy);
  letter-spacing:-0.025em;
}
.reading-page h1{
  font-size:var(--site-font-title,clamp(2.45rem,4.6vw,4.1rem));
  line-height:1.06;
  margin:0 0 18px;
}
.reading-page h2{
  font-size:clamp(1.8rem,3.2vw,2.4rem);
  margin:36px 0 16px;
}
.reading-page h3{
  font-size:clamp(1.38rem,2.4vw,1.55rem);
  margin:20px 0 10px;
}
.reading-page p{
  margin:0 0 18px;
  color:var(--site-charcoal);
  line-height:1.78;
}
.reading-page a{
  color:var(--site-primary,#142b47);
  text-underline-offset:4px;
}
.reading-page .hero{
  max-width:var(--site-width,1240px);
  margin:0 auto;
  padding:42px 24px 30px;
  text-align:center;
  border-bottom:1px solid var(--site-line);
}
.reading-page main{
  max-width:var(--site-width,1240px);
  width:100%;
  margin:0 auto;
  padding:28px 24px 76px;
}
.reading-page article{
  max-width:none;
  width:100%;
  margin:0 auto;
}
.reading-page .eyebrow,.reading-page .tag,.reading-page .num{
  display:block;
  font:600 0.74rem/1.5 var(--site-sans);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--site-gold);
  margin-bottom:10px;
}
.reading-page .hero-sub,.reading-page .lede{
  font-size:1.14rem;
  line-height:1.78;
  color:var(--site-charcoal);
  max-width:var(--site-reading);
  margin-inline:auto;
}
.reading-page strong{color:var(--site-navy)}

/* CMS Study Hero & Reference Bar */
.reading-page .study-hero{
  background:linear-gradient(135deg, #ffffff 0%, #fffdf8 100%);
  border:1px solid var(--site-line);
  border-top:3px solid var(--site-gold-bright);
  border-radius:var(--site-radius-lg,24px);
  padding:clamp(28px,4.5vw,56px);
  margin-bottom:34px;
  box-shadow:var(--site-shadow);
}
.reading-page .study-hero h1{margin:4px 0 18px}
.reading-page .study-hero .lede{
  margin:0;
  max-width:65ch;
}
.reading-page .study-reference-bar{
  margin-top:24px;
  padding:16px 20px;
  background:var(--site-soft-gold);
  border:1px solid var(--site-gold-line);
  border-radius:var(--site-radius-sm);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
}
.reading-page .study-reference-text{
  font:0.95rem/1.55 var(--site-sans);
  color:var(--site-ink);
}
.reading-page .study-reference-text strong{
  color:var(--site-gold);
  text-transform:uppercase;
  font-size:0.78rem;
  letter-spacing:0.1em;
  margin-right:6px;
}
.reading-page .study-reference-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:8px 14px;
  background:var(--site-surface);
  border:1px solid var(--site-gold-line);
  border-radius:6px;
  font:600 0.86rem/1.4 var(--site-sans);
  color:var(--site-navy);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .15s ease,background-color .15s ease;
}
.reading-page .study-reference-link:hover{
  border-color:var(--site-gold-bright);
  color:var(--site-primary,#142b47);
  background:var(--site-soft);
}

/* Structured Study Sections (Understand / Reflect / Live) */
.reading-page .study-section{
  background:var(--site-surface);
  border:1px solid var(--site-line);
  border-radius:var(--site-radius,18px);
  padding:var(--site-card-space);
  margin-bottom:24px;
  box-shadow:var(--site-shadow);
}
.reading-page .study-section-head{
  border-bottom:1px solid var(--site-line);
  padding-bottom:14px;
  margin-bottom:22px;
}
.reading-page .study-section-head .site-eyebrow{margin-bottom:4px}
.reading-page .study-section-head h2{margin:0}
.reading-page .study-section p:last-child{margin-bottom:0}
.reading-page .study-response-grid.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.reading-page .study-reflect{
  background:var(--site-navy);
  border-color:var(--site-navy);
  color:#f5f1e6;
}
.reading-page .study-reflect .study-section-head{
  border-bottom-color:rgba(226,209,173,0.22);
}
.reading-page .study-reflect .site-eyebrow{color:var(--site-gold-champagne)}
.reading-page .study-reflect h2{color:#fffdf9}
.reading-page .study-reflect p{color:#e5e0d5}
.reading-page .study-live{
  background:var(--site-soft-gold);
  border-color:var(--site-gold-line);
}

/* Cross Divider & Verse Blockquotes */
.reading-page .cross-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-width:200px;
  margin:28px auto 0;
  color:var(--site-gold);
}
.reading-page .cross-divider::before,.reading-page .cross-divider::after{
  content:'';
  height:1px;
  width:64px;
  background:var(--site-gold-line);
}
.reading-page .verse{
  background:var(--site-soft-gold);
  border:1px solid var(--site-gold-line);
  border-inline-start:3px solid var(--site-gold-bright);
  padding:24px 28px;
  margin:28px 0;
  border-radius:0 var(--site-radius) var(--site-radius) 0;
  box-shadow:var(--site-shadow);
}
.reading-page .verse blockquote{
  margin:0 0 12px;
  font:italic 1.28rem/1.55 var(--site-serif);
  color:var(--site-navy);
}
.reading-page .verse cite,.reading-page .ref{
  font:600 0.8rem/1.4 var(--site-sans);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--site-gold);
  font-style:normal;
}

/* Romans Road Steps */
.reading-page .road{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:28px 0;
}
.reading-page .road-step{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:24px;
  background:var(--site-surface);
  border:1px solid var(--site-line);
  border-top:3px solid var(--site-gold-bright);
  border-radius:var(--site-radius,18px);
  box-shadow:var(--site-shadow);
}
.reading-page .road-step .marker{
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--site-soft-gold);
  border:1px solid var(--site-gold-line);
  color:var(--site-gold);
  font:600 0.95rem/1 var(--site-serif);
  display:flex;
  align-items:center;
  justify-content:center;
}
.reading-page .road-step h3{
  margin:0 0 8px;
  font-size:1.42rem;
}
.reading-page .road-step p{
  margin:0;
  font-size:0.96rem;
}

/* Article CTA & Invite Boxes */
.reading-page .cta,.reading-page .invite:not(p){
  margin-top:44px;
  padding:32px 34px;
  background:var(--site-surface);
  border:1px solid var(--site-gold-line);
  border-top:3px solid var(--site-gold-bright);
  border-radius:var(--site-radius-lg,24px);
  box-shadow:var(--site-shadow-lg);
}
.reading-page .cta h2{margin-top:0}
.reading-page .cta .invite{margin:0 0 20px;padding:0;border:0;box-shadow:none}
.reading-page .prayer{
  font:italic 1.28rem/1.65 var(--site-serif);
  color:var(--site-navy);
  background:var(--site-soft-gold);
  padding:24px;
  border-radius:12px;
  border:1px solid var(--site-gold-line);
}
.reading-page .assurance{font-size:0.95rem;margin:22px 0 0;color:var(--site-muted)}
.reading-page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:20px;
  padding:12px 22px;
  border:1px solid var(--site-primary,#142b47);
  border-radius:var(--site-radius-sm,10px);
  background:var(--site-primary,#142b47);
  color:#ffffff!important;
  font:600 0.94rem/1.4 var(--site-sans);
  text-decoration:none!important;
  box-shadow:0 4px 14px rgba(15,34,57,0.16);
}
.reading-page .btn:hover{
  background:var(--site-primary-hover,#0b192c);
  border-color:var(--site-primary-hover,#0b192c);
  color:#ffffff!important;
}

/* Articles Index Cards */
.reading-page .cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:34px 0;
}
.reading-page .acard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:28px;
  background:var(--site-surface);
  border:1px solid var(--site-line);
  border-top:3px solid var(--site-gold-bright);
  border-radius:var(--site-radius,18px);
  color:var(--site-ink);
  text-decoration:none;
  box-shadow:var(--site-shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.reading-page .acard:hover{
  border-color:var(--site-gold-bright);
  transform:translateY(-2px);
  box-shadow:var(--site-shadow-lg);
}
.reading-page .acard h2{font-size:1.65rem;margin:4px 0 12px}
.reading-page .acard p{font-size:0.96rem;color:var(--site-muted)}
.reading-page .verse-line{
  font:italic 1.15rem/1.55 var(--site-serif);
  color:var(--site-navy);
  padding-inline-start:16px;
  border-inline-start:3px solid var(--site-gold-bright);
  margin-block:8px 16px;
}
.reading-page .go{
  display:inline-flex;
  align-items:center;
  margin-top:auto;
  padding-top:14px;
  min-height:44px;
  color:var(--site-primary,#142b47);
  font:600 0.92rem/1.4 var(--site-sans);
}
.reading-page .go::after{content:' →';margin-left:6px;color:var(--site-gold)}
.reading-index main{padding-top:28px}
.reading-index main>h1,.reading-index main>.eyebrow,.reading-index main>.lede{text-align:center}
.reading-index .invite{text-align:center}

/* 404 Error Page */
.error-page main{max-width:680px;padding-block:64px;text-align:center}
.error-page main>picture img{height:80px;width:auto;margin:0 auto 16px}
.error-page .verse{font:italic 1.28rem/1.58 var(--site-serif);text-align:left}

/* Search Page */
.search-form{
  margin:24px 0 34px;
  padding:28px;
  background:var(--site-surface);
  border:1px solid var(--site-line);
  border-top:3px solid var(--site-gold-bright);
  border-radius:var(--site-radius,18px);
  box-shadow:var(--site-shadow);
}
.search-form label{
  display:block;
  margin-bottom:10px;
  font-size:1rem;
  font-weight:600;
  color:var(--site-navy);
}
.search-controls{display:flex;gap:12px;flex-wrap:wrap}
.search-controls input{
  flex:1;
  min-width:0;
  min-height:48px;
  padding:12px 16px;
  border:1px solid var(--site-line-strong);
  border-radius:var(--site-radius-sm);
  background:#ffffff;
  color:var(--site-ink);
  font:1rem/1.5 var(--site-sans);
}
.search-results{
  list-style:none;
  margin:24px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.search-results>li{
  padding:24px 26px;
  background:var(--site-surface);
  border:1px solid var(--site-line);
  border-top:3px solid var(--site-gold-bright);
  border-radius:var(--site-radius,18px);
  box-shadow:var(--site-shadow);
}
.search-results h2{margin:0 0 8px;font-size:1.5rem}
.search-results h2 a{text-decoration:none;color:var(--site-navy)}
.search-results h2 a:hover{color:var(--site-primary,#142b47);text-decoration:underline}
.search-results p{margin:6px 0 0;font-size:0.96rem;color:var(--site-muted)}
.search-status{font-size:0.95rem;font-weight:600;color:var(--site-muted)}
.search-error{padding:16px;border:1px solid var(--site-error);border-radius:var(--site-radius-sm,10px);color:var(--site-error)!important;background:#fff4ed}
.empty-state{
  padding:28px;
  background:var(--site-surface);
  border:1px solid var(--site-line);
  border-radius:var(--site-radius,18px);
  box-shadow:var(--site-shadow);
}

@media(max-width:768px){
  .reading-page .study-response-grid.two-col,
  .reading-page .cards,
  .reading-page .road,
  .search-results{
    grid-template-columns:1fr;
  }
}
@media(max-width:720px){
  .reading-page .hero{padding:28px 18px 20px}
  .reading-page main{padding:20px 18px 48px}
  .reading-page .study-hero{padding:26px 22px}
  .reading-page .verse{padding:20px}
  .reading-page .cta,.reading-page .invite:not(p){padding:24px 20px}
  .search-controls{flex-direction:column}
  .search-form{padding:20px}
}
@media print{
  .reading-page main,.reading-page article{max-width:none;padding:0}
  .reading-page .hero,.reading-page .study-hero{padding:0;border:0;box-shadow:none}
  .reading-page .study-section{border:1px solid #777;box-shadow:none;background:#fff;color:#000}
  .reading-page .study-reflect h2,.reading-page .study-reflect p{color:#000}
  .reading-page .verse{break-inside:avoid;border:1px solid #777;box-shadow:none}
  .reading-page .cta{box-shadow:none}
}