/* Modern skin for the Worship sub-pages: devotions.php, songs.php, bible-study.php.
   Loaded only when $devotionsStyle / $songsStyle / $bibleStyle = 'modern' in the page (set to 'classic' to revert).
   Everything is scoped to body.wsp-modern so the original styles remain untouched. */

/* ================= shared hero ================= */
.wsp-hero {
  position: relative;
  padding: 7.5rem 1.5rem 4rem;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(155deg, #16322e 0%, #234e48 50%, #2f6a61 100%);
  isolation: isolate;
}
.wsp-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wsp-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.wsp-orb-1 { width: 380px; height: 380px; top: -140px; left: -100px; background: #7c5cbf; opacity: .28; }
.wsp-orb-2 { width: 380px; height: 380px; bottom: -160px; right: -100px; background: #ff7a52; opacity: .24; }
.wsp-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, transparent 70%);
}
.wsp-hero-inner { max-width: 760px; margin: 0 auto; animation: wsp-up .7s ease-out both; }
.wsp-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffd9c9;
}
.wsp-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #f57450; animation: wsp-pulse 2s ease-in-out infinite; }
.wsp-hero-title { margin: 1rem 0 .8rem; font-family: var(--font-display, 'Playfair Display', serif); font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 700; line-height: 1.05; color: #fff; }
.wsp-hero-title em {
  font-style: italic;
  display: inline-block;
  padding: 0 .06em .12em 0;
  background: linear-gradient(90deg, #ff8f6b, #ffd0a8 60%, #c9b6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wsp-hero-sub { margin: 0 auto; max-width: 600px; font-size: clamp(1.02rem, 2.4vw, 1.22rem); line-height: 1.6; color: rgba(255, 255, 255, .85); }

.wsp-verse {
  position: relative;
  max-width: 660px;
  margin: .4rem auto 0;
  padding: 1.1rem 1.5rem 1.2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wsp-verse-icon { display: block; margin-bottom: .4rem; font-size: 1.1rem; color: #ffb199; }
.wsp-verse blockquote { margin: 0; font-family: var(--font-display, 'Playfair Display', serif); font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-style: italic; line-height: 1.55; color: #fff; }
.wsp-verse cite { display: block; margin-top: .6rem; font-size: .9rem; font-style: normal; font-weight: 700; letter-spacing: .06em; color: #ffd0a8; }

/* ================= shared utilities ================= */
body.wsp-modern { background: #f5f7f2; }
body.wsp-modern .btn { border-radius: 999px; font-weight: 700; }
body.wsp-modern .btn.btn-primary { background: linear-gradient(135deg, #f57450, #e8431e); border: 0; color: #fff; box-shadow: 0 8px 20px rgba(245, 116, 80, .35); }
body.wsp-modern .btn.btn-outline { background: #fff; color: #234e48; border: 2px solid #234e48; }
body.wsp-modern .btn.btn-outline:hover { background: #234e48; color: #fff; }

/* ================= DEVOTIONS ================= */
body.wsp-devotions .todays-devotion {
  padding: 0 1.25rem 3rem;
  background: #f5f7f2;
  background-image: radial-gradient(rgba(35, 78, 72, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}
body.wsp-devotions .todays-devotion .container { max-width: none; padding: 0; }
body.wsp-devotions .devotion-featured {
  position: relative;
  top: -2.2rem;
  max-width: 920px;
  border-radius: 28px;
  border: 1px solid #e4eae1;
  box-shadow: 0 22px 54px rgba(35, 78, 72, .18);
}
body.wsp-devotions .devotion-date-badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .8rem;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(135deg, #16322e, #234e48 60%, #2f6a61);
}
body.wsp-devotions .badge-month { font-size: .95rem; font-weight: 700; letter-spacing: .18em; color: #ffd0a8; }
body.wsp-devotions .badge-day { font-size: 2.6rem; margin: 0; color: #fff; }
body.wsp-devotions .badge-year { font-size: .95rem; letter-spacing: .1em; color: rgba(255, 255, 255, .75); }
body.wsp-devotions .devotion-content { padding: 2.4rem 2.6rem 2.6rem; }
body.wsp-devotions .devotion-title { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.2; color: #1c3b36; margin-bottom: 1.5rem; }
body.wsp-devotions .devotion-scripture {
  position: relative;
  padding: 1.6rem 1.8rem 1.6rem 2rem;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff3ec, #fff9f5);
  box-shadow: inset 5px 0 0 #f57450;
}
body.wsp-devotions .scripture-text { font-family: var(--font-display, 'Playfair Display', serif); font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: #3a2a24; }
body.wsp-devotions .scripture-reference { color: #e8431e; font-weight: 700; letter-spacing: .05em; }
body.wsp-devotions .devotion-body p { color: #4d5d57; font-size: 1.05rem; line-height: 1.85; }
body.wsp-devotions .devotion-prayer,
body.wsp-devotions .devotion-reflection { padding: 1.5rem 1.7rem; border-radius: 20px; margin: 1.6rem 0; border: 1px solid transparent; }
body.wsp-devotions .devotion-prayer { background: linear-gradient(135deg, #eef4ff, #f6f9ff); border-color: #dde8fb; }
body.wsp-devotions .devotion-reflection { background: linear-gradient(135deg, #eaf6f2, #f4fbf8); border-color: #d6ece4; }
body.wsp-devotions .devotion-prayer h3 { color: #3b6cc4; }
body.wsp-devotions .devotion-reflection h3 { color: #1f7a64; }
body.wsp-devotions .devotion-prayer h3,
body.wsp-devotions .devotion-reflection h3 { font-family: var(--font-display, 'Playfair Display', serif); }
body.wsp-devotions .devotion-reflection li::before { color: #1f7a64; }
body.wsp-devotions .devotion-actions .btn { padding: .75rem 1.4rem; }

body.wsp-devotions .devotions-archive { padding: 3rem 1.25rem 4rem; background: transparent; }
body.wsp-devotions .devotions-archive .section-title { text-align: center; font-family: var(--font-display, 'Playfair Display', serif); color: #1c3b36; }
body.wsp-devotions .devotions-grid { max-width: 1180px; margin-left: auto; margin-right: auto; }
body.wsp-devotions .devotion-card {
  position: relative;
  padding: 1.6rem 1.5rem;
  border-radius: 22px;
  border: 1px solid #e4eae1;
  border-top: 0;
  box-shadow: 0 10px 28px rgba(35, 78, 72, .09);
  overflow: hidden;
}
body.wsp-devotions .devotion-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #f57450, #ffd0a8 60%, #3fb7a3); }
body.wsp-devotions .devotion-card:hover { border-color: #f57450; box-shadow: 0 20px 42px rgba(35, 78, 72, .16); }
body.wsp-devotions .devotion-card-date { background: #fff1ea; color: #c4401a; }
body.wsp-devotions .devotion-link { color: #e8431e; }

body.wsp-devotions .devotion-subscribe {
  position: relative;
  padding: 4rem 1.25rem;
  background: linear-gradient(155deg, #16322e 0%, #234e48 55%, #2b5c54 100%);
  overflow: hidden;
  isolation: isolate;
}
body.wsp-devotions .devotion-subscribe::before { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; border-radius: 50%; right: -100px; top: -140px; background: #f57450; opacity: .22; filter: blur(80px); }
body.wsp-devotions .subscribe-content h2 { font-family: var(--font-display, 'Playfair Display', serif); font-size: clamp(1.8rem, 4vw, 2.5rem); }
body.wsp-devotions .subscribe-input-group { border-radius: 999px; background: #fff; padding: .35rem; box-shadow: 0 16px 36px rgba(0, 0, 0, .3); }
body.wsp-devotions .subscribe-input-group input { border-radius: 999px; background: transparent; padding: .8rem 1.3rem; outline: none; }
body.wsp-devotions .subscribe-input-group button { border-radius: 999px; background: linear-gradient(135deg, #f57450, #e8431e); padding: .8rem 1.6rem; font-weight: 700; }
body.wsp-devotions .subscribe-input-group button:hover { background: linear-gradient(135deg, #f57450, #e8431e); filter: brightness(1.08); }

body.wsp-devotions .devotion-resources { padding: 4rem 1.25rem 4.5rem; background: #f5f7f2; }
body.wsp-devotions .devotion-resources .section-title { text-align: center; font-family: var(--font-display, 'Playfair Display', serif); color: #1c3b36; }
body.wsp-devotions .resources-grid { max-width: 1180px; margin-left: auto; margin-right: auto; }
body.wsp-devotions .resource-card {
  position: relative;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e4eae1;
  box-shadow: 0 10px 28px rgba(35, 78, 72, .08);
  overflow: hidden;
}
body.wsp-devotions .resource-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #7c5cbf, #3fb7a3); }
body.wsp-devotions .resource-card:hover { border-color: #f57450; box-shadow: 0 18px 38px rgba(35, 78, 72, .15); }
body.wsp-devotions .resource-link { color: #e8431e; font-weight: 700; }

/* ================= SONGS ================= */
body.wsp-songs .songs-links-section {
  padding: 3rem 1.25rem 5rem;
  background: #f5f7f2;
  background-image: radial-gradient(rgba(35, 78, 72, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}
body.wsp-songs .songs-intro h2 { color: #1c3b36; }
body.wsp-songs .songs-intro-icon { border-radius: 20px; box-shadow: 0 12px 28px rgba(245, 116, 80, .4); }
body.wsp-songs .songs-featured { border-radius: 28px; box-shadow: 0 24px 56px rgba(22, 50, 46, .3); }
body.wsp-songs .songs-search-form { border-radius: 999px; }
body.wsp-songs .songs-search-input { border-radius: 999px 0 0 999px; }
body.wsp-songs .songs-search-btn { border-radius: 0 999px 999px 0; }
body.wsp-songs .songs-section-label {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 2.4rem 0 1.1rem;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #1c3b36;
}
body.wsp-songs .songs-section-label::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #f57450, rgba(245, 116, 80, 0)); }
body.wsp-songs .song-link-card { border-radius: 20px; padding: 1.15rem 1.3rem; box-shadow: 0 10px 26px rgba(35, 78, 72, .08); }
body.wsp-songs .song-link-card:hover { border-color: #f57450; box-shadow: 0 18px 38px rgba(35, 78, 72, .16); }
body.wsp-songs .song-link-card::before { opacity: 1; width: 5px; }
body.wsp-songs .slc-icon { border-radius: 16px; box-shadow: 0 8px 18px rgba(0, 0, 0, .2); transition: transform .25s ease; }
body.wsp-songs .song-link-card:hover .slc-icon { transform: rotate(-6deg) scale(1.06); }
body.wsp-songs .slc-name { color: #1c3b36; font-weight: 700; }
body.wsp-songs .slc-arrow { color: #f57450; }

/* ================= BIBLE STUDY ================= */
body.wsp-bible .bs-section {
  padding: 0 1.25rem 3.5rem;
  background: #f5f7f2;
  background-image: radial-gradient(rgba(35, 78, 72, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}
body.wsp-bible .bs-grid { position: relative; top: -2.2rem; margin-bottom: -2.2rem; }
body.wsp-bible .bs-card {
  border-radius: 24px;
  border: 1px solid #e4eae1;
  box-shadow: 0 14px 36px rgba(35, 78, 72, .12);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.wsp-bible .bs-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(35, 78, 72, .2); }
body.wsp-bible .bs-card-banner { position: relative; overflow: hidden; }
body.wsp-bible .bs-card-banner::before,
body.wsp-bible .bs-card-banner::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .16); }
body.wsp-bible .bs-card-banner::before { width: 150px; height: 150px; top: -60px; right: -40px; }
body.wsp-bible .bs-card-banner::after { width: 90px; height: 90px; bottom: -40px; left: -20px; background: rgba(255, 255, 255, .12); }
body.wsp-bible .bs-card-title { font-family: var(--font-display, 'Playfair Display', serif); color: #1c3b36; }
body.wsp-bible .bs-card-link { border-radius: 999px; font-weight: 700; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }

body.wsp-bible .bs-section-alt {
  position: relative;
  padding: 4rem 1.25rem 4.5rem;
  background: linear-gradient(160deg, #16322e 0%, #234e48 55%, #2b5c54 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
body.wsp-bible .bs-section-alt::before { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; border-radius: 50%; left: -110px; top: -140px; background: #3fb7a3; opacity: .22; filter: blur(80px); }
body.wsp-bible .bs-section-alt .section-label { display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #ffd9c9; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.wsp-bible .bs-section-alt .section-label::before,
body.wsp-bible .bs-section-alt .section-label::after { display: none; }
body.wsp-bible .bs-section-alt .section-title { margin-top: .8rem; font-family: var(--font-display, 'Playfair Display', serif); color: #fff; }
body.wsp-bible .bs-section-alt .section-header p { color: rgba(255, 255, 255, .8) !important; }
body.wsp-bible .group-card {
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
  color: #fff;
  transition: transform .25s ease, border-color .25s ease;
}
body.wsp-bible .group-card:hover { transform: translateY(-6px); border-color: #ffb199; }
body.wsp-bible .group-title { font-family: var(--font-display, 'Playfair Display', serif); color: #fff; }
body.wsp-bible .group-meta-row,
body.wsp-bible .group-meta-row span { color: rgba(255, 255, 255, .85); }
body.wsp-bible .group-meta-row strong { color: #fff; }
body.wsp-bible .group-meta-row i { color: #ff9b7a; }
body.wsp-bible .group-join-btn { border-radius: 999px; background: linear-gradient(135deg, #f57450, #e8431e); color: #fff; font-weight: 700; box-shadow: 0 10px 22px rgba(245, 116, 80, .4); }
body.wsp-bible .bs-callout { border-radius: 24px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
body.wsp-bible .bs-callout blockquote { font-family: var(--font-display, 'Playfair Display', serif); color: #fff; }
body.wsp-bible .bs-callout cite { color: #ffd0a8; font-weight: 700; }

/* ================= dark theme ================= */
html[data-theme="dark"] body.wsp-modern { background: #121c1a; }
html[data-theme="dark"] body.wsp-devotions .todays-devotion,
html[data-theme="dark"] body.wsp-devotions .devotion-resources,
html[data-theme="dark"] body.wsp-songs .songs-links-section,
html[data-theme="dark"] body.wsp-bible .bs-section { background: #121c1a; background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 28px 28px; }
html[data-theme="dark"] body.wsp-devotions .devotion-featured,
html[data-theme="dark"] body.wsp-devotions .devotion-card,
html[data-theme="dark"] body.wsp-devotions .resource-card,
html[data-theme="dark"] body.wsp-songs .song-link-card,
html[data-theme="dark"] body.wsp-bible .bs-card { background: #1a2623; border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] body.wsp-devotions .devotion-title,
html[data-theme="dark"] body.wsp-devotions .devotions-archive .section-title,
html[data-theme="dark"] body.wsp-devotions .devotion-resources .section-title,
html[data-theme="dark"] body.wsp-devotions .devotion-card h3,
html[data-theme="dark"] body.wsp-devotions .resource-card h3,
html[data-theme="dark"] body.wsp-songs .songs-intro h2,
html[data-theme="dark"] body.wsp-songs .songs-section-label,
html[data-theme="dark"] body.wsp-songs .slc-name,
html[data-theme="dark"] body.wsp-bible .bs-card-title { color: #f1f6f3; }
html[data-theme="dark"] body.wsp-devotions .devotion-body p,
html[data-theme="dark"] body.wsp-devotions .devotion-excerpt,
html[data-theme="dark"] body.wsp-devotions .devotion-reflection li,
html[data-theme="dark"] body.wsp-devotions .resource-card p,
html[data-theme="dark"] body.wsp-songs .songs-intro p,
html[data-theme="dark"] body.wsp-songs .slc-desc,
html[data-theme="dark"] body.wsp-bible .bs-card-desc { color: #aebdb6; }
html[data-theme="dark"] body.wsp-devotions .devotion-scripture { background: rgba(245, 116, 80, .1); }
html[data-theme="dark"] body.wsp-devotions .scripture-text { color: #f1e4de; }
html[data-theme="dark"] body.wsp-devotions .devotion-prayer { background: rgba(59, 108, 196, .14); border-color: rgba(59, 108, 196, .3); }
html[data-theme="dark"] body.wsp-devotions .devotion-reflection { background: rgba(31, 122, 100, .16); border-color: rgba(31, 122, 100, .35); }
html[data-theme="dark"] body.wsp-devotions .devotion-card-date { background: rgba(245, 116, 80, .18); color: #ffb199; }
html[data-theme="dark"] body.wsp-modern .btn.btn-outline { background: transparent; color: #e6eee9; border-color: rgba(255, 255, 255, .4); }

/* ================= animation / responsive ================= */
@keyframes wsp-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wsp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }

@media (max-width: 640px) {
  .wsp-hero { padding: 6.8rem 1.25rem 3.4rem; }
  body.wsp-devotions .devotion-content { padding: 1.6rem 1.25rem 1.8rem; }
  body.wsp-devotions .devotion-featured { top: -1.6rem; border-radius: 22px; }
  body.wsp-devotions .todays-devotion { padding: 0 1rem 2rem; }
  body.wsp-devotions .subscribe-input-group { flex-direction: column; border-radius: 22px; gap: .35rem; }
  body.wsp-devotions .subscribe-input-group input,
  body.wsp-devotions .subscribe-input-group button { width: 100%; text-align: center; }
  body.wsp-songs .songs-links-section { padding: 2rem 1rem 3.5rem; }
  body.wsp-bible .bs-section { padding: 0 1rem 2.6rem; }
  body.wsp-bible .bs-section-alt { padding: 3rem 1rem 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wsp-hero-inner, .wsp-chip-dot { animation: none !important; }
  body.wsp-bible .bs-card, body.wsp-bible .group-card, body.wsp-songs .slc-icon { transition: none !important; }
}