/* ============================================================
   WATSON Creative Works — Devotional Study Guide
   css/devotional-study-guide.css | v1.0 | 2026-05-20
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.dsg-hero {
  background: linear-gradient(150deg, #2C1A2E 0%, #1A2B3C 55%, #2C1A2E 100%);
  padding: 7rem 2rem 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dsg-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201,160,95,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(201,160,95,0.09) 0%, transparent 55%);
  pointer-events: none;
}
.dsg-hero-content {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.dsg-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C9A05F;
  font-family: 'Inter', sans-serif;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
.dsg-eyebrow::before, .dsg-eyebrow::after {
  content: ''; flex: 1; max-width: 70px; height: 1px;
  background: rgba(201,160,95,0.4);
}
.dsg-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 600;
  color: #E8DCC4;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.dsg-lead {
  color: #C4A882;
  font-size: 1.0625rem;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Main Container ────────────────────────────────────────── */
.dsg-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}

/* ── Filter Bar ────────────────────────────────────────────── */
.dsg-filter-bar {
  display: flex; align-items: center;
  gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 2.75rem;
}
.dsg-filter-label {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #4A1F3D; margin-right: 0.25rem;
  font-family: 'Inter', sans-serif;
}
.dsg-filter-btn {
  padding: 0.45rem 1rem;
  border: 1.5px solid rgba(74,31,61,0.2);
  border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600;
  color: #1A2B3C; background: #FEFDFB;
  cursor: pointer; transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}
.dsg-filter-btn:hover { border-color: #C9A05F; color: #4A1F3D; }
.dsg-filter-btn.active {
  background: #4A1F3D; color: #F8F6F1;
  border-color: #4A1F3D;
}

/* ── Loading / Error ───────────────────────────────────────── */
.dsg-loading {
  text-align: center;
  padding: 5rem 2rem;
  color: #8A9BB0;
}
.dsg-spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(201,160,95,0.2);
  border-top-color: #C9A05F;
  border-radius: 50%;
  animation: dsgSpin 0.9s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes dsgSpin { to { transform: rotate(360deg); } }
.dsg-error {
  text-align: center; padding: 4rem 2rem; color: #8A9BB0;
}
.dsg-error h3 { color: #2C1A2E; margin-bottom: 0.5rem; font-family: 'Cormorant Garamond', serif; }

/* ── Study Card ────────────────────────────────────────────── */
.dsg-card {
  background: #FEFDFB;
  border-radius: 16px;
  border: 1px solid rgba(74,31,61,0.11);
  box-shadow: 0 4px 24px rgba(44,26,46,0.07);
  margin-bottom: 3rem;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.dsg-card:hover {
  box-shadow: 0 10px 40px rgba(44,26,46,0.13);
}

/* ── Card Banner ───────────────────────────────────────────── */
.dsg-card-banner {
  background: linear-gradient(135deg, #2C1A2E 0%, #1A2B3C 100%);
  padding: 2rem 2.25rem 1.75rem;
  position: relative;
  overflow: hidden;
}
.dsg-card-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 90% 10%, rgba(201,160,95,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.dsg-card-banner::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #C9A05F 30%, #E8C98A 50%, #C9A05F 70%, transparent 100%);
}
.dsg-card-meta {
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; margin-bottom: 0.875rem;
}
.dsg-tag {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.25rem 0.7rem; border-radius: 999px;
}
.dsg-tag-series   { background: rgba(201,160,95,0.22); color: #C9A05F; }
.dsg-tag-standalone { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.65); }
.dsg-tag-date     { background: transparent; color: rgba(255,255,255,0.38); font-weight: 400; font-size: 0.7rem; }
.dsg-tag-session  { background: rgba(201,160,95,0.15); color: #C9A05F; }

.dsg-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  color: #E8DCC4;
  line-height: 1.15;
  margin-bottom: 0.6rem;
  position: relative;
}
.dsg-card-theme {
  font-size: 0.875rem;
  color: rgba(196,168,130,0.8);
  font-style: italic;
  position: relative;
}

/* ── Scripture Block ───────────────────────────────────────── */
.dsg-scripture {
  background: linear-gradient(135deg, #F9F5EE 0%, #F0E8D8 100%);
  border-left: 5px solid #C9A05F;
  padding: 1.5rem 2rem;
}
.dsg-scripture-label {
  font-size: 0.65rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8A6A3A;
  font-weight: 700; margin-bottom: 0.6rem;
  font-family: 'Inter', sans-serif;
}
.dsg-scripture-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: #2C1A2E;
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.dsg-scripture-ref {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #8A6A3A;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── Card Body ─────────────────────────────────────────────── */
.dsg-card-body { padding: 2rem 2.25rem; }

/* Section Label */
.dsg-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4A1F3D;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.dsg-section-label::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(74,31,61,0.12);
}

/* ── Outline ───────────────────────────────────────────────── */
.dsg-outline {
  display: flex; flex-direction: column;
  gap: 0.875rem; margin-bottom: 2.5rem;
}
.dsg-outline-point {
  display: flex; gap: 1.125rem; align-items: flex-start;
  padding: 1rem 1.125rem;
  background: rgba(74,31,61,0.025);
  border-radius: 10px;
  border: 1px solid rgba(74,31,61,0.07);
  transition: background 0.2s, border-color 0.2s;
}
.dsg-outline-point:hover {
  background: rgba(201,160,95,0.07);
  border-color: rgba(201,160,95,0.25);
}
.dsg-point-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem; font-weight: 600;
  color: #C9A05F; line-height: 1;
  min-width: 2rem; flex-shrink: 0;
  margin-top: 0.1rem;
}
.dsg-point-title {
  font-weight: 700; color: #4A1F3D;
  font-size: 0.9375rem; margin-bottom: 0.3rem;
  font-family: 'Inter', sans-serif;
}
.dsg-point-body {
  font-size: 0.9rem; color: #1A2B3C;
  line-height: 1.7; opacity: 0.82;
}

/* ── Devotional Body ───────────────────────────────────────── */
.dsg-devotional {
  margin-bottom: 2.5rem;
}
.dsg-devotional-text {
  font-size: 1rem;
  color: #1A2B3C;
  line-height: 2;
}
.dsg-devotional-text p {
  margin-bottom: 1.2rem;
}
.dsg-devotional-text p:last-child { margin-bottom: 0; }

/* Drop cap on first paragraph */
.dsg-devotional-text p:first-child::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem;
  font-weight: 600;
  color: #C9A05F;
  float: left;
  line-height: 0.75;
  margin: 0.15rem 0.15rem 0 0;
  padding-top: 0.1rem;
}

/* Pull quote style for emphasis lines */
.dsg-pull-quote {
  border-left: 4px solid #C9A05F;
  padding: 1rem 1.5rem;
  margin: 1.75rem 0;
  background: rgba(201,160,95,0.06);
  border-radius: 0 8px 8px 0;
}
.dsg-pull-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem !important;
  font-style: italic;
  color: #2C1A2E !important;
  margin-bottom: 0 !important;
  line-height: 1.65 !important;
}

/* ── Reflection Questions ──────────────────────────────────── */
.dsg-questions {
  background: linear-gradient(135deg, rgba(74,31,61,0.04), rgba(26,43,60,0.04));
  border-radius: 12px;
  border: 1px solid rgba(74,31,61,0.09);
  padding: 1.75rem;
  margin-bottom: 2.5rem;
}
.dsg-question-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 1rem; margin-top: 1rem;
}
.dsg-question-list li {
  display: flex; gap: 1rem; align-items: flex-start;
  font-size: 0.9375rem; line-height: 1.65; color: #1A2B3C;
}
.dsg-q-num {
  background: #4A1F3D; color: #F8F6F1;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 0.15rem;
}

/* ── Key Truth ─────────────────────────────────────────────── */
.dsg-key-truth {
  background: linear-gradient(135deg, #2C1A2E 0%, #1A2B3C 100%);
  border-radius: 12px;
  padding: 1.75rem 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}
.dsg-key-truth::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,160,95,0.1) 0%, transparent 70%);
}
.dsg-key-truth-label {
  font-size: 0.65rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: #C9A05F;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0.875rem;
  position: relative;
}
.dsg-key-truth-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: #E8DCC4;
  line-height: 1.65;
  font-style: italic;
  position: relative;
}

/* ── Closing Prayer ────────────────────────────────────────── */
.dsg-prayer {
  border-top: 1px solid rgba(74,31,61,0.1);
  padding-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.dsg-prayer-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.0625rem;
  color: #2C1A2E;
  line-height: 1.95;
  font-style: italic;
}
.dsg-prayer-text p { margin-bottom: 0.875rem; }
.dsg-prayer-text p:last-child { margin-bottom: 0; }

/* ── Card Footer ───────────────────────────────────────────── */
.dsg-card-footer {
  padding: 1.25rem 2.25rem;
  background: rgba(74,31,61,0.025);
  border-top: 1px solid rgba(74,31,61,0.08);
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.dsg-series-link {
  font-size: 0.8125rem; color: #4A1F3D;
  text-decoration: none; font-weight: 600;
  font-family: 'Inter', sans-serif;
  opacity: 0.75; transition: opacity 0.2s;
  display: flex; align-items: center; gap: 0.4rem;
}
.dsg-series-link:hover { opacity: 1; }
.dsg-save-btn {
  padding: 0.5rem 1.2rem;
  background: #C9A05F; color: #4A1F3D;
  font-weight: 700; font-size: 0.8125rem;
  border: none; border-radius: 6px;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}
.dsg-save-btn:hover { background: #D9B376; transform: translateY(-1px); }
.dsg-save-btn.saved { background: #2E7D32; color: #fff; transform: none; }

/* ── Small Group Tag ───────────────────────────────────────── */
.dsg-tag-sg {
  background: rgba(26,43,60,0.18);
  color: #A8C4D8;
}

/* ── Facilitator Note ──────────────────────────────────────── */
/* Appears at the top of Small Group cards — visible guide for
   the group leader before any content begins               */
.dsg-facilitator-note {
  background: linear-gradient(135deg, #1A2B3C 0%, #243547 100%);
  border-radius: 10px;
  border-left: 4px solid #4A8AAA;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}
.dsg-facilitator-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #A8C4D8;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.dsg-facilitator-text {
  font-size: 0.9375rem;
  color: #D8E8F0;
  line-height: 1.75;
  font-family: 'Inter', sans-serif;
}

/* ── Small Group Discussion Questions ─────────────────────── */
/* Distinct teal-navy tint to visually separate from personal
   study reflection questions                               */
.dsg-questions-sg {
  background: linear-gradient(135deg, rgba(26,43,60,0.07), rgba(26,43,60,0.04));
  border-color: rgba(26,43,60,0.15);
}
.dsg-questions-sg .dsg-q-num {
  background: #1A2B3C;
  color: #A8C4D8;
}

/* ── Print Button ──────────────────────────────────────────── */
.dsg-print-btn {
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: 1px solid rgba(74,31,61,0.25);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4A1F3D;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.dsg-print-btn:hover {
  background: rgba(74,31,61,0.07);
  border-color: #4A1F3D;
}

/* ── Print Styles ──────────────────────────────────────────── */
@media print {
  /* Hide everything except the card being printed */
  body > *:not(.dsg-print-target) { display: none !important; }
  .dsg-print-target { display: block !important; }

  .navbar, .dsg-hero, .dsg-filter-bar, .dsg-card-footer,
  .dsg-save-btn, .dsg-print-btn, #backToTop, .footer,
  .dsg-card:not(.dsg-printing) { display: none !important; }

  .dsg-card.dsg-printing { display: block !important; box-shadow: none !important; border: none !important; }

  .dsg-card-banner {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 2px solid #4A1F3D !important;
    padding: 1rem 0 !important;
  }

  .dsg-card-title { color: #000 !important; font-size: 1.5rem !important; }
  .dsg-card-theme { color: #333 !important; }

  .dsg-scripture {
    border-left: 3px solid #C9A05F !important;
    background: #f9f9f9 !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .dsg-scripture-text { color: #111 !important; }
  .dsg-scripture-ref  { color: #555 !important; }

  .dsg-section-label  { color: #4A1F3D !important; }
  .dsg-devotional-text p, .dsg-point-body { color: #222 !important; }
  .dsg-question-list li { color: #222 !important; }
  .dsg-key-truth { background: #f5f5f5 !important; border-color: #C9A05F !important; }
  .dsg-prayer { background: #f5f5f5 !important; }
  .dsg-pull-quote { border-left: 3px solid #C9A05F !important; background: #f9f9f9 !important; }

  /* Print header/footer */
  .dsg-print-header { display: block !important; }

  @page { margin: 1.5cm; }
}

/* Hidden print header — only shows when printing */
.dsg-print-header {
  display: none;
  text-align: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #666;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dsg-card-banner { padding: 1.5rem; }
  .dsg-card-body   { padding: 1.25rem 1.5rem; }
  .dsg-card-footer { padding: 1rem 1.5rem; }
  .dsg-scripture   { padding: 1.25rem 1.5rem; }
  .dsg-questions   { padding: 1.25rem; }
  .dsg-key-truth   { padding: 1.5rem; }
  .dsg-devotional-text p:first-child::first-letter {
    font-size: 2.75rem;
  }
}