/* ============================================================
   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; }
}

/* ============================================================
   NO-ANIMATION PAGES (JotForm consult/request pages)
   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);
}

/* ============================================================
   GUTENBERG BUTTONS BLOCK -> BRAND BUTTONS
   Lets anyone add a CTA button inside blog/newsletter/devotional
   content (or any WYSIWYG field) using WordPress's built-in
   "Buttons" block, no code or shortcode needed. Default style
   matches .btn--primary; the block's built-in "Outline" style
   variation matches .btn--outline.
   ============================================================ */
body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid var(--crimson);
  background: var(--crimson);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  white-space: nowrap;
}
body .wp-block-button__link:hover {
  background: var(--crimson-dk);
  border-color: var(--crimson-dk);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(187,0,15,.3);
}
body .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--crimson);
  border-color: var(--crimson);
}
body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--crimson);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: none;
}
/* A second built-in style variation, "Fill", mapped to the site's
   gold accent button for a CTA that needs to stand out differently
   from the primary crimson (e.g. a secondary action in the same post). */
body .wp-block-button.is-style-fill-gold .wp-block-button__link {
  background: var(--warm-gold);
  color: var(--espresso);
  border-color: var(--warm-gold);
}
body .wp-block-button.is-style-fill-gold .wp-block-button__link:hover {
  background: #b8943c;
  border-color: #b8943c;
  color: var(--espresso);
  transform: translateY(-2px);
  box-shadow: none;
}

/* ============================================================
   GUTENBERG SOCIAL ICONS BLOCK — RESTORE CORRECT LAYOUT
   The base theme has an older rule (style.css) that forces every
   <ul> inside article/prose content to plain bulleted display:block,
   with !important — written before the Social Icons block existed
   on this site. That rule wins against WordPress's own block CSS
   (which has no !important), collapsing the icon row into a plain,
   nearly-invisible bullet list. This restores the block's intended
   flex layout and removes the bullet markers, without touching the
   older rule itself (still correct for genuine bullet/numbered lists
   in article content).
   ============================================================ */
body .wp-block-social-links {
  list-style: none !important;
  display: flex !important;
}
body .wp-block-social-links .wp-social-link {
  list-style: none !important;
  display: inline-block !important;
}

/* ============================================================
   RESPONSIVE VIDEO EMBEDS IN POST CONTENT
   A pasted YouTube (or similar) embed code carries hardcoded
   width/height HTML attributes (e.g. width="560" height="315").
   Without an override, that forces the iframe — and everything
   around it — wider than the viewport on mobile, cutting off
   surrounding text. aspect-ratio keeps the video's proportions
   correct as it scales down, rather than just squishing it.
   Covers every post type through .post-body (blog, devotional,
   newsletter, and Books & Resources, which shares single.php).
   ============================================================ */
.post-body iframe,
.post-body video {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  margin: 16px 0;
}

/* Same overflow risk, different sources: a pasted table wider than the
   screen, or a long unbroken string (URL, etc.) with no natural break
   point. Both can force horizontal scroll on mobile the same way the
   video embed did. Cheap insurance against the same bug recurring. */
.post-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.post-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================================
   EMOJI IMAGE SIZING — DEFENSIVE OVERRIDE
   WordPress converts certain emoji characters (e.g. the love-letter
   emoji used across this site's copy) into an <img class="emoji">
   pointing to an SVG, and ships its own inline stylesheet sizing
   that image to 1em (matching surrounding text). That rule is
   present on the page but was observed not holding in at least one
   context (the newsletter archive's featured excerpt), where the
   emoji rendered large and stretched instead of small and inline.
   This re-asserts the same intended sizing with maximum specificity
   so it can't depend on WordPress's own rule taking effect.
   ============================================================ */
body img.emoji,
body img.wp-smiley {
  display: inline !important;
  height: 1em !important;
  width: 1em !important;
  max-width: 1em !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 0.07em !important;
  padding: 0 !important;
  vertical-align: -0.1em !important;
  background: none !important;
}