/* ============================================================
   ARCHIVES.CSS — Devotional + Newsletter archive & single templates
   Loaded after style.css; uses the theme's existing CSS variables.
   ============================================================ */

/* =================== DEVOTIONAL ARCHIVE (v1: Today's Devotional + list) =================== */
.devo-hero { background:var(--espresso); background-image: radial-gradient(circle at 15% 20%, rgba(201,168,76,.14), transparent 45%); padding:90px 0 56px; text-align:center; position:relative; }
.devo-hero h1 { color:var(--cream); margin-bottom:18px; }
.devo-hero .hero-sub { font-family:var(--font-body); font-size:clamp(15px,1.6vw,18px); color:var(--silver-mist); max-width:600px; margin:0 auto 32px; line-height:1.75; }

.devo-featured { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; margin-top:36px; }
@media (max-width:820px){ .devo-featured{ grid-template-columns:1fr; } }
.devo-featured img { width:100%; height:100%; min-height:280px; object-fit:cover; display:block; }
.devo-featured-body { padding:48px 44px 44px; display:flex; flex-direction:column; justify-content:flex-start; }
.devo-daybadge { display:inline-flex; align-items:center; gap:8px; background:var(--cream); color:var(--crimson); font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-bottom:18px; width:fit-content; }
.devo-scripture-ref { font-family:var(--font-body); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm-gold); font-weight:700; margin-bottom:10px; }
.devo-featured-body h2 { font-size:clamp(24px,3vw,34px); margin-bottom:14px; }
.devo-verse-quote { font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--cognac); line-height:1.6; border-left:3px solid var(--gold); padding-left:18px; margin-bottom:22px; }

.devo-list-wrap { margin-top:64px; }
.devo-row-list { display:flex; flex-direction:column; border-top:1px solid var(--silver-mist); }
.devo-row { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:24px; padding:26px 4px; border-bottom:1px solid var(--silver-mist); transition:background var(--t); text-decoration:none; color:inherit; }
.devo-row:hover { background:var(--cream); opacity:1; }
.devo-row-date { text-align:center; }
.devo-row-date .num { display:block; font-family:var(--font-display); font-size:30px; color:var(--crimson); line-height:1; }
.devo-row-date .mon { display:block; font-family:var(--font-body); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cognac); margin-top:4px; }
.devo-row-mid .devo-scripture-ref { margin-bottom:6px; }
.devo-row-mid h3 { font-size:18px; margin-bottom:6px; }
.devo-row-mid p { font-size:14px; color:var(--text); line-height:1.6; }
.devo-row .btn { white-space:nowrap; }

/* =================== DEVOTIONAL SIDEBAR (calendar + CTA) — used on single-jr_devotional.php =================== */
.post-devo-layout { display:grid; grid-template-columns:280px 1fr; gap:56px; max-width:1180px; margin:0 auto; padding:0 24px 100px; align-items:start; }
@media (max-width:900px){ .post-devo-layout{ grid-template-columns:1fr; } }
.post-devo-sidebar { position:sticky; top:110px; display:flex; flex-direction:column; gap:20px; }

.devo-sidebar-box { background:var(--espresso); border-radius:var(--radius-lg); padding:32px 26px; }
.devo-sidebar-box h4 { font-family:var(--font-display); color:var(--cream); font-size:20px; margin-bottom:14px; }
.devo-sidebar-box p { color:var(--silver-mist); font-size:14px; line-height:1.7; margin-bottom:0; }
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-nav h4 { margin-bottom:0; }
.cal-nav-btn { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--warm-gold); display:flex; align-items:center; justify-content:center; font-size:12px; text-decoration:none; transition:background var(--t); flex-shrink:0; }
.cal-nav-btn:hover { background:rgba(201,168,76,.25); opacity:1; }
.month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:20px; }
.month-grid span, .month-grid a { display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:6px; font-size:11px; color:var(--silver-mist); text-decoration:none; font-family:var(--font-body); }
.month-grid a.done { background:rgba(201,168,76,.25); color:var(--warm-gold); font-weight:600; transition:background var(--t), color var(--t); }
.month-grid a.done:hover { background:var(--warm-gold); color:var(--espresso); opacity:1; }
.month-grid span.active, .month-grid a.active { background:var(--crimson); color:var(--white); font-weight:700; }

.devo-cta-box { background:var(--espresso); border-radius:var(--radius-lg); padding:28px 24px; text-align:center; }
.devo-cta-box .icn { width:48px; height:48px; border-radius:50%; background:rgba(201,168,76,.15); color:var(--warm-gold); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:18px; }
.devo-cta-box h4 { font-family:var(--font-display); color:var(--cream); font-size:20px; margin-bottom:8px; }
.devo-cta-box p { color:var(--silver-mist); font-size:13px; line-height:1.6; margin-bottom:18px; }

/* =================== NEWSLETTER — shared =================== */
.nl-cta-band { background:var(--crimson); padding:18px 0; }
.nl-cta-band .container { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; text-align:center; }
.nl-cta-band p { color:var(--cream); font-size:14px; margin:0; }
.nl-cta-band strong { color:var(--white); }
.nl-issue-badge { display:inline-flex; align-items:center; gap:8px; background:var(--espresso); color:var(--warm-gold); font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; border-radius:4px; }

.nl-featured { display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-top:36px; }
@media (max-width:820px){ .nl-featured{ grid-template-columns:1fr; } }
.nl-featured img { width:100%; height:100%; min-height:300px; object-fit:cover; }
.nl-featured-body { padding:48px 44px 44px; display:flex; flex-direction:column; justify-content:flex-start; }
.nl-featured-body h2 { font-size:clamp(24px,3vw,32px); margin:14px 0; }

.nl-layout { display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; margin-top:56px; }
@media (max-width:960px){ .nl-layout{ grid-template-columns:1fr; } }
.nl-row { display:grid; grid-template-columns:220px 1fr; gap:26px; padding:28px 0; border-bottom:1px solid var(--silver-mist); text-decoration:none; color:inherit; }
@media (max-width:640px){ .nl-row{ grid-template-columns:1fr; } }
.nl-row img { width:100%; height:140px; object-fit:cover; border-radius:var(--radius-md); }
.nl-row h3 { font-size:19px; margin:8px 0 8px; }
.nl-row p { font-size:14px; color:var(--text); line-height:1.65; }
.nl-meta { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--cognac); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.nl-sidebar-box { background:var(--cream); border-radius:var(--radius-lg); padding:32px 26px; position:sticky; top:110px; text-align:center; }
.nl-sidebar-box .env { width:52px; height:52px; border-radius:50%; background:var(--crimson); color:var(--white); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:20px; }
.nl-sidebar-box h4 { font-family:var(--font-display); font-size:22px; margin-bottom:10px; }
.nl-sidebar-box p { font-size:13px; color:var(--text); line-height:1.7; margin-bottom:20px; }
.nl-sidebar-box input[type="email"] { width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--silver-mist); font-family:var(--font-body); font-size:14px; margin-bottom:12px; }

/* =================== POST PAGES — shared (devotional single + newsletter single) =================== */
.post-share-top { display:flex; align-items:center; justify-content:center; gap:12px; margin:22px 0 0; }
.post-share-top a, .post-share-top button { width:38px; height:38px; border-radius:50%; background:var(--cream); color:var(--espresso); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition:background var(--t), color var(--t); font-size:14px; text-decoration:none; }
.post-share-top a:hover, .post-share-top button:hover { background:var(--crimson); color:var(--white); opacity:1; }

.post-wide-layout { display:grid; grid-template-columns:220px 1fr; gap:56px; max-width:1180px; margin:0 auto; padding:0 24px 100px; }
@media (max-width:900px){ .post-wide-layout{ grid-template-columns:1fr; } }
.post-wide-toc { position:sticky; top:110px; }
.inline-subscribe { background:var(--cream); border-radius:var(--radius-lg); padding:32px; text-align:center; margin:44px 0; }
.inline-subscribe h4 { font-family:var(--font-display); font-size:22px; margin-bottom:10px; }
.inline-subscribe-form { display:flex; gap:10px; max-width:400px; margin:18px auto 0; }
.inline-subscribe-form input { flex:1; padding:12px 16px; border-radius:var(--radius); border:1px solid var(--silver-mist); font-family:var(--font-body); font-size:14px; }

.post-standard-header { background:var(--cream); padding:60px 0 0; text-align:left; }
.post-standard-header .container--sm { max-width:760px; }
.post-standard-img { max-width:900px; margin:36px auto 0; border-radius:var(--radius-lg); overflow:hidden; }
.post-standard-img img { width:100%; height:340px; object-fit:cover; display:block; }
.archive-strip-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:12px; }
.archive-strip-head a { font-size:13px; font-weight:600; color:var(--crimson); }

/* ============================================================
   AUTHOR AVATARS (get_avatar / gravatar fallback)
   WordPress's get_avatar() ignores a "style" array key, so any
   inline border-radius passed that way is silently dropped —
   target its default "avatar" class instead. Fixes any author
   photo that falls back to Gravatar instead of a custom ACF photo.
   ============================================================ */
img.avatar { border-radius: 50%; object-fit: cover; }

/* ============================================================
   MOBILE-ONLY FIXES
   Desktop layouts are unchanged — these only apply under 900px.
   ============================================================ */

/* Devotional single: content was rendering above the calendar/CTA
   sidebar in the markup, but the sidebar showed first visually on
   mobile once the columns stacked. Reorder so the actual devotional
   content is what a visitor sees first; calendar + CTA follow after,
   like a footer rather than a wall in front of the content. */
@media (max-width: 900px) {
  .post-devo-content { order: 1; }
  .post-devo-sidebar { order: 2; position: static; }
}

/* Newsletter single: hide the "In This Issue" table of contents on
   mobile — desktop keeps it. */
@media (max-width: 900px) {
  .post-wide-toc { display: none; }
}

/* Blog single: the gap between the featured image and the article
   body was too tall on mobile (40px top padding on .blog-layout-3col).
   Cut it well over half, without touching the desktop styles. */
@media (max-width: 767px) {
  .blog-layout-3col { padding-top: 16px; }
}
   Everything shows instantly — no fade/slide-in — so nothing looks
   "missing" while the JotForm embed is still loading.
   ============================================================ */
body.jr-no-anim .anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   JOTFORM SUBSCRIBE POPUP
   Triggered by any element with class "jotform-popup-btn".
   The JotForm script is only injected the first time the popup
   opens, so it doesn't add load weight to every page visit.
   ============================================================ */
.jotform-popup {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(44,24,16,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.jotform-popup.active { opacity: 1; pointer-events: all; }
.jotform-popup-inner {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-lg);
}
.jotform-popup-image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}
.jotform-popup-content { padding: 0 24px 12px; }
.jotform-popup-header { text-align: center; padding-top: 20px; }
.jotform-popup-header .label { display: block; margin-bottom: 8px; }
.jotform-popup-header h3 { font-family: var(--font-display); font-size: 26px; margin-bottom: 10px; }
.jotform-popup-header p { font-size: 14px; color: var(--text); line-height: 1.65; max-width: 520px; margin: 0 auto 8px; }
.jotform-popup-close {
  position: absolute;
  top: 10px; right: 14px;
  background: var(--white); border: none;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 20px; color: var(--cognac);
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: color var(--t);
  z-index: 2;
}
.jotform-popup-close:hover { color: var(--crimson); }
.jotform-popup-body { min-height: 320px; }
.jotform-popup-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; color: var(--cognac); font-size: 14px;
  font-family: var(--font-body);
}