/* ============================================================
   CHRIST CONSCIOUSNESS MINISTRY — MODERN THEME
   "Illuminated" design language: manuscript serif headlines,
   candlelight gold, deep emerald ink, warm ivory paper, and a
   recurring "prayer cloud" motif drawn from the ministry's own
   teaching language ("your cloud is filling").
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700;800&family=Cormorant+Garamond:ital@1&display=swap');

:root{
  /* ---- palette ---- */
  --ink:            #0C2A20;   /* deep pine-emerald, near-black */
  --ink-soft:       #1C6B4A0f;
  --emerald:        #1C6B4A;   /* refined primary */
  --emerald-deep:   #0F4632;
  --emerald-light:  #2E8B63;
  --gold:           #C9A227;   /* antique gold accent */
  --gold-light:     #E4C65A;
  --gold-soft:      #F1E3B8;
  --paper:          #FBF7EF;   /* warm ivory */
  --paper-alt:      #F3EEE0;
  --sage:           #EDF3EC;   /* soft section tint */
  --white:          #FFFFFF;
  --line:           #E4DFCE;
  --text:           #23291F;
  --text-muted:     #5C6659;

  /* ---- type ---- */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- misc ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 10px 40px -12px rgba(12,42,32,0.18);
  --shadow-card: 0 4px 24px rgba(12,42,32,0.08);
  --ease: cubic-bezier(.22,.68,0,1);
}

/* ============ SITE LOADER ============ */
#cc-loader{
  position: fixed; inset: 0; z-index: 99999;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  transition: opacity .5s ease, visibility .5s ease;
  /* Fallback safety net: force-hide after 4.5s even if JS never runs */
  animation: cc-loader-fallback-hide 0s 4.5s forwards;
}
#cc-loader.cc-loader-hide{ opacity: 0; visibility: hidden; pointer-events: none; }
#cc-loader img{
  width: 64px; height: 64px; object-fit: contain;
  animation: cc-loader-pulse 1.4s ease-in-out infinite;
}
#cc-loader .cc-loader-ring{
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(228,198,90,.25); border-top-color: var(--gold-light);
  animation: cc-loader-spin 1s linear infinite;
}
@keyframes cc-loader-pulse{ 0%,100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.08); opacity:.85; } }
@keyframes cc-loader-spin{ to{ transform: rotate(360deg); } }
@keyframes cc-loader-fallback-hide{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
@media (prefers-reduced-motion: reduce){
  #cc-loader img, #cc-loader .cc-loader-ring{ animation: none !important; }
}

/* ============ base ============ */
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.cc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--emerald);
}
.cc-eyebrow::before{
  content:"";
  width: 26px;
  height: 1px;
  background: var(--gold);
  display:inline-block;
}

.cc-display{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cc-display em{
  font-style: italic;
  font-weight: 500;
  color: var(--emerald);
}

/* ============ NAVIGATION ============ */
#header{
  background: rgba(251,247,239,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(12,42,32,0.08);
  height: var(--header-height, 92px);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
  z-index: 1000;
}
#header.is-scrolled{
  box-shadow: 0 8px 30px -14px rgba(12,42,32,.25);
  background: rgba(251,247,239,0.96);
}
#header .container{ height:100%; }
#header .logo img{ max-height: 52px; width:auto; transition: transform .3s var(--ease); }

#navbar ul{
  display:flex;
  align-items:center;
  gap: 2px;
  list-style:none;
  margin:0; padding:0;
}
#navbar ul li{ position:relative; }
#navbar .nav-link, #navbar > ul > li > a{
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink) !important;
  padding: 10px 16px !important;
  border-radius: 999px;
  position: relative;
  transition: color .25s ease, background .25s ease;
  text-decoration:none;
}
#navbar > ul > li > a span{ margin-right:4px; }
#navbar .nav-link:hover, #navbar > ul > li > a:hover{
  color: var(--emerald) !important;
  background: var(--sage);
}
#navbar .nav-link.active, #navbar > ul > li.active > a{
  color: var(--emerald) !important;
  background: var(--sage);
}
#navbar .nav-link.active::after, #navbar > ul > li.active > a::after{
  content:"";
  position:absolute;
  left: 18px; right: 18px; bottom: 6px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
#navbar .dropdown ul{
  display:block;
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--white) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 8px;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: all .25s var(--ease);
}
#navbar .dropdown:hover > ul{
  opacity:1; visibility:visible; transform:translateY(0);
}
#navbar .dropdown ul li a{
  color: var(--ink) !important;
  padding: 9px 14px !important;
  border-radius: 10px;
  font-weight:500;
  font-size:.88rem;
}
#navbar .dropdown ul li a:hover, #navbar .dropdown ul li a.active{
  background: var(--sage);
  color: var(--emerald) !important;
}

.donate-btn{
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 11px 24px !important;
  border-radius: 999px !important;
  font-size: .88rem !important;
  box-shadow: 0 8px 20px -8px rgba(201,162,39,.6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.donate-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(201,162,39,.75);
  color: var(--ink) !important;
}

@media (max-width: 991px){
  #navbar ul{
    background: var(--paper);
  }
  #navbar.navbar-mobile ul{
    position:fixed; inset:0; top:0;
    flex-direction:column;
    align-items:flex-start;
    padding: 100px 30px 30px;
    gap: 6px;
    overflow-y:auto;
  }
  #navbar.navbar-mobile{
    position:fixed; inset:0; background: var(--paper); z-index:2000;
  }
  #navbar .mobile-nav-toggle{
    position: relative; z-index: 2001; font-size: 1.6rem; color: var(--ink);
    cursor:pointer;
  }
  #navbar.navbar-mobile .dropdown ul{
    position:static; box-shadow:none; opacity:1; visibility:visible; transform:none;
    display:none; margin-left: 10px;
  }
  #navbar.navbar-mobile .dropdown ul.dropdown-active{ display:block; }
}

/* ============ HERO ============ */
.cc-hero{
  position:relative;
  min-height: 92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: radial-gradient(120% 100% at 50% 0%, #123b2b 0%, var(--ink) 60%);
  margin-top: var(--header-height, 92px);
}
.cc-hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
}
.cc-hero .cc-hero-veil{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,42,32,.55) 0%, rgba(12,42,32,.78) 55%, var(--ink) 100%);
}
.cc-cloud{
  position:absolute;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(circle, rgba(228,198,90,.35), transparent 70%);
  animation: cc-drift 18s ease-in-out infinite;
  pointer-events:none;
}
.cc-cloud.c1{ width:420px; height:420px; top:-80px; left:-60px; animation-delay:0s; }
.cc-cloud.c2{ width:320px; height:320px; bottom:-60px; right:5%; background: radial-gradient(circle, rgba(46,139,99,.4), transparent 70%); animation-delay:3s; }
.cc-cloud.c3{ width:260px; height:260px; top:30%; right:20%; animation-delay:6s; }
@keyframes cc-drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-24px) scale(1.08); }
}

.cc-hero-content{ position:relative; z-index:2; }
.cc-hero .cc-eyebrow{ color: var(--gold-light); }
.cc-hero .cc-eyebrow::before{ background: var(--gold-light); }
.cc-hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05;
  color: var(--paper);
  font-weight: 600;
  margin: .5em 0 .4em;
  max-width: 15ch;
}
.cc-hero h1 em{ font-style:italic; color: var(--gold-light); font-weight:500; }
.cc-hero p.lede{
  color: rgba(251,247,239,.82);
  font-size: 1.18rem;
  max-width: 46ch;
  line-height:1.6;
}
.cc-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 2rem; }
.cc-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  transition: all .3s var(--ease);
  border: 1px solid transparent;
}
.cc-btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(201,162,39,.6);
}
.cc-btn-gold:hover{ transform: translateY(-3px); color:var(--ink); box-shadow: 0 16px 34px -10px rgba(201,162,39,.75);}
.cc-btn-outline{
  border-color: rgba(251,247,239,.4);
  color: var(--paper);
}
.cc-btn-outline:hover{ background: rgba(251,247,239,.1); color: var(--paper); border-color: rgba(251,247,239,.7); }
.cc-btn-emerald{
  background: var(--emerald);
  color:#fff;
  box-shadow: 0 10px 24px -10px rgba(28,107,74,.6);
}
.cc-btn-emerald:hover{ background: var(--emerald-deep); color:#fff; transform: translateY(-3px); }

.cc-scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  color: rgba(251,247,239,.7); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
}
.cc-scroll-cue span{
  width:1px; height:36px; background: linear-gradient(var(--gold-light), transparent);
  animation: cc-scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes cc-scroll-pulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ============ SECTIONS ============ */
.cc-section{ padding: 6.5rem 0; position:relative; }
.cc-section.tint{ background: var(--sage); }
.cc-section-head{ max-width: 640px; margin: 0 auto 3.2rem; text-align:center; }
.cc-section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: .4em 0; }
.cc-section-head p{ color: var(--text-muted); font-size: 1.05rem; }

/* reveal on scroll — VISIBLE BY DEFAULT. JS adds .cc-priming just before
   triggering the entrance animation; if JS never runs, content simply
   stays at its natural, fully-visible state. Content visibility must
   never depend on JavaScript executing successfully. */
.cc-reveal{ opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cc-reveal.cc-priming{ opacity: 0; transform: translateY(22px); }

/* welcome / scripture-scroll card */
.cc-welcome-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.6rem;
  box-shadow: var(--shadow-card);
  position:relative;
}
.cc-welcome-card::before{
  content:"\201C";
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--gold-soft);
  position:absolute; top:6px; left:22px; line-height:1;
}
.cc-welcome-card .scroll-text p{ font-size:1.08rem; line-height:1.75; color: var(--text); }

.cc-video-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-soft);
  border: 6px solid var(--white);
}
.cc-video-frame::after{
  content:""; position:absolute; inset:0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(12,42,32,.08);
  pointer-events:none;
}

/* ministry cards */
.cc-card{
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: 2.2rem 1.9rem;
  height:100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
  position:relative;
  overflow:hidden;
}
.cc-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(var(--gold), var(--emerald));
  transform: scaleY(0); transform-origin:bottom;
  transition: transform .4s var(--ease);
}
.cc-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: transparent; }
.cc-card:hover::before{ transform: scaleY(1); }
.cc-card h5{ font-family: var(--font-display); font-size:1.3rem; color: var(--ink); }
.cc-card p{ color: var(--text-muted); }
.cc-card .cc-link{
  color: var(--emerald); font-weight:700; font-size:.88rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.cc-card .cc-link i{ transition: transform .25s ease; }
.cc-card .cc-link:hover i{ transform: translateX(4px); }

/* bible grid */
.cc-bible-card{
  background: var(--white); border-radius: var(--radius-md); padding: 1.8rem 1.2rem;
  text-align:center; border:1px solid var(--line);
  transition: all .3s var(--ease);
  height:100%;
}
.cc-bible-card i{ color: var(--emerald); font-size:1.8rem; margin-bottom:.7rem; display:block; }
.cc-bible-card:hover{ background: var(--ink); border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.cc-bible-card:hover i, .cc-bible-card:hover h6{ color: var(--gold-light) !important; }
.cc-bible-card h6{ color: var(--ink); font-family: var(--font-body); font-weight:700; font-size:.92rem; }

/* contact */
.cc-contact-card{
  background: var(--white); border-radius: var(--radius-md); padding: 1.9rem;
  border: 1px solid var(--line); text-align:center; height:100%;
  transition: transform .3s var(--ease);
}
.cc-contact-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.cc-contact-card .icon-wrapper{
  width:56px; height:56px; border-radius:50%;
  background: var(--sage); color: var(--emerald);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto; font-size:1.3rem;
}
.cc-form input.form-control, .cc-form textarea.form-control{
  border-radius: 12px; border: 1px solid var(--line); padding: .8rem 1rem;
  background: var(--white);
}
.cc-form input.form-control:focus, .cc-form textarea.form-control:focus{
  border-color: var(--emerald); box-shadow: 0 0 0 4px rgba(28,107,74,.12);
}

/* ============ FOOTER ============ */
.cc-footer{
  background: var(--ink);
  color: rgba(251,247,239,.82);
  padding-top: 4.5rem;
  position:relative;
}
.cc-footer h5{
  font-family: var(--font-display); font-weight:600; color: var(--gold-light);
  font-size:1.05rem; letter-spacing:.02em; margin-bottom:1.2rem;
}
.cc-footer .footer-link{ color: rgba(251,247,239,.75) !important; transition: color .2s ease, padding-left .2s ease; }
.cc-footer .footer-link:hover{ color: var(--gold-light) !important; padding-left:4px; }
.cc-footer .footer-input{ background: rgba(251,247,239,.06); border:1px solid rgba(251,247,239,.18); color:#fff; }
.cc-footer .footer-input::placeholder{ color: rgba(251,247,239,.5); }
.cc-footer .footer-btn{ background: var(--gold); color: var(--ink); font-weight:700; border-radius:10px; }
.cc-footer .footer-btn:hover{ background: var(--gold-light); }
.cc-footer .social-icon{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(251,247,239,.08); color: var(--gold-light) !important;
  transition: all .25s var(--ease);
}
.cc-footer .social-icon:hover{ background: var(--gold); color: var(--ink) !important; transform: translateY(-3px); }
.cc-footer-bottom{ background: rgba(0,0,0,.25); }

.back-to-top{
  background: var(--emerald) !important; color:#fff !important; border-radius:50% !important;
}
.back-to-top i{ color:#fff !important; }

/* ============ LIBRARY / DEVOTIONAL HERO (Prayers, Confessions) ============ */
.cc-prayer-hero{
  position:relative;
  background: radial-gradient(120% 140% at 50% -10%, #123b2b 0%, var(--ink) 65%);
  padding: 9rem 0 5rem;
  margin-top: var(--header-height, 92px);
  overflow:hidden;
  text-align:center;
}
.cc-prayer-hero .cc-eyebrow{ color: var(--gold-light); justify-content:center; }
.cc-prayer-hero .cc-eyebrow::before{ background:var(--gold-light); }
.cc-prayer-hero h1{
  font-family: var(--font-display); color: var(--paper);
  font-size: clamp(2.4rem, 5vw, 3.6rem); margin:.4em auto; max-width:18ch;
}
.cc-prayer-hero h1 em{ color: var(--gold-light); font-style:italic; }
.cc-prayer-hero p{ color: rgba(251,247,239,.78); max-width:56ch; margin:0 auto; font-size:1.08rem; }

/* ============ STICKY SECTION TABS ============ */
.cc-tab-nav-wrap{
  position: sticky; top: var(--header-height, 92px); z-index: 40;
  background: rgba(251,247,239,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.cc-tab-nav{
  max-width: 1100px; margin: 0 auto; padding: 14px 1.2rem;
  display:flex; gap: 8px; overflow-x:auto; scrollbar-width: thin;
}
.cc-tab-nav::-webkit-scrollbar{ height:4px; }
.cc-tab-nav::-webkit-scrollbar-thumb{ background: var(--line); border-radius:10px; }
.cc-tab-nav a{
  flex-shrink:0; padding: 9px 18px; border-radius:999px; font-weight:600; font-size:.86rem;
  color: var(--text-muted); text-decoration:none; white-space:nowrap;
  border: 1px solid transparent; transition: all .2s ease;
}
.cc-tab-nav a:hover{ background: var(--sage); color: var(--ink); }
.cc-tab-nav a.active{ background: var(--emerald); color:#fff; }
.cc-tab-nav a.gold.active{ background: var(--gold); color: var(--ink); }

/* ============ CONTENT WRAPPER ============ */
.cc-library-wrap{ max-width: 880px; margin: 0 auto; padding: 3.5rem 1.4rem 5rem; }

.cc-collection-heading{ margin-bottom: 2.4rem; text-align:center; }
.cc-collection-heading h2{ font-family: var(--font-display); font-size: clamp(1.6rem,2.8vw,2.2rem); color: var(--ink); }
.cc-collection-heading p{ color: var(--text-muted); margin-top:.4rem; }

.cc-lib-section{ scroll-margin-top: calc(var(--header-height, 92px) + 70px); margin-bottom: 3.4rem; }
.cc-lib-section-head{ display:flex; align-items:baseline; gap: .9rem; margin-bottom: 1.6rem; }
.cc-lib-section-head .num{
  font-family: var(--font-display); font-size:1.6rem; color: var(--gold-soft);
  -webkit-text-stroke: 1px var(--gold); line-height:1; flex-shrink:0;
}
.cc-lib-section-head h3{ font-family: var(--font-display); font-size: 1.45rem; color: var(--ink); margin:0; display:flex; align-items:center; }
.cc-lib-section-intro{ color: var(--text-muted); margin: -1rem 0 1.6rem; }

/* ============ ACCORDION COMPONENT (reused for prayers + confessions) ============ */
.cc-accordion-item{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cc-accordion-item:hover{ box-shadow: var(--shadow-card); }
.cc-accordion-item.is-open{ border-color: var(--emerald); box-shadow: var(--shadow-soft); }

.cc-accordion-head{
  cursor:pointer; padding: 1.3rem 1.5rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.cc-accordion-head .txt h4{ font-family: var(--font-display); font-size:1.14rem; color: var(--ink); margin:0 0 .25rem; }
.cc-accordion-head .txt small{ color: var(--text-muted); font-style:italic; display:block; margin-bottom:.4rem; }
.cc-accordion-head .txt .preview{ color: var(--text-muted); font-size:.92rem; margin:0; }
.cc-accordion-item.is-open .txt .preview{ display:none; }

.cc-accordion-toggle{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  background: var(--sage); color: var(--emerald); border:none;
  font-size:.78rem; font-weight:700; padding:8px 14px; border-radius:999px;
  transition: all .25s var(--ease); white-space:nowrap;
}
.cc-accordion-toggle i{ transition: transform .3s var(--ease); }
.cc-accordion-item.is-open .cc-accordion-toggle{ background: var(--emerald); color:#fff; }
.cc-accordion-item.is-open .cc-accordion-toggle i{ transform: rotate(180deg); }

.cc-accordion-body{ max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.cc-accordion-body-inner{
  padding: 0 1.5rem 1.6rem;
  border-top: 1px dashed var(--line);
  margin-top: -1px;
  padding-top: 1.3rem;
  color: var(--text);
  line-height: 1.85;
  font-size: 1.01rem;
  white-space: pre-line;
}
.cc-accordion-body-inner::first-letter{
  font-family: var(--font-display); font-size: 2.3rem; color: var(--gold);
  float:left; line-height:.8; margin: 6px 8px 0 0; font-weight:600;
}
.cc-accordion-actions{ margin-top:1.1rem; padding: 0 1.5rem 1.6rem; }
.cc-mini-btn{
  border:1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size:.78rem; font-weight:700; padding:7px 14px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; transition: all .2s ease;
}
.cc-mini-btn:hover{ background: var(--emerald); color:#fff; border-color:var(--emerald); }

/* toolkit strip */
.cc-toolkit{
  background: var(--ink); border-radius: var(--radius-lg); padding: 2.6rem;
  color: var(--paper); position:relative; overflow:hidden;
}
.cc-toolkit::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(228,198,90,.25), transparent 70%);
  top:-100px; right:-80px; filter: blur(30px);
}
.cc-toolkit-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1.5rem; position:relative; z-index:1; }
.cc-toolkit-card{
  background: rgba(251,247,239,.06); border:1px solid rgba(251,247,239,.14);
  border-radius: var(--radius-md); padding: 1.6rem;
}
.cc-toolkit-card h4{ font-family: var(--font-display); color: var(--gold-light); font-size:1.1rem; margin-bottom:.6rem; }
.cc-toolkit-card .body{ color: rgba(251,247,239,.82); font-size:.92rem; line-height:1.75; white-space:pre-line; max-height:220px; overflow:auto; }
.cc-toolkit-card .body::-webkit-scrollbar{ width:5px; }
.cc-toolkit-card .body::-webkit-scrollbar-thumb{ background: rgba(251,247,239,.25); border-radius:10px; }

/* ============ CONFESSION / MONTHLY PRAYER CARDS ============ */
.cc-datepicker-wrap{ max-width: 340px; margin: 0 auto 2rem; position:relative; }
.cc-datepicker-wrap input{
  width:100%; text-align:center; font-weight:600; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px;
  background: var(--white); cursor:pointer;
}
.cc-datepicker-wrap input:focus{ outline:none; border-color: var(--emerald); box-shadow: 0 0 0 4px rgba(28,107,74,.12); }
.cc-datepicker-wrap i{ position:absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--emerald); pointer-events:none; }

.cc-scripture-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow:hidden; margin-bottom: 1.4rem;
  transition: box-shadow .3s ease;
}
.cc-scripture-card:hover{ box-shadow: var(--shadow-soft); }
.cc-scripture-card .card-top{
  background: linear-gradient(135deg, var(--emerald-deep), var(--emerald));
  color: var(--paper); padding: 1.6rem 1.8rem; text-align:center; position:relative;
}
.cc-scripture-card .card-top::before{
  content:"\201C"; font-family: var(--font-display); font-size: 3.2rem; color: rgba(251,247,239,.25);
  position:absolute; top:0; left:16px; line-height:1;
}
.cc-scripture-card .card-top h4{ font-family: var(--font-display); font-size:1.3rem; margin:0 0 .3rem; }
.cc-scripture-card .card-top .meta{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color: var(--gold-light); font-weight:700; }
.cc-scripture-card .card-body{ padding: 1.8rem; color: var(--text); line-height:1.85; font-size:1.02rem; white-space:pre-line; }

.cc-archive-pills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.cc-archive-pills a{
  padding: 8px 16px; border-radius:999px; background: var(--white); border:1px solid var(--line);
  color: var(--ink); text-decoration:none; font-size:.85rem; font-weight:600; transition: all .2s ease;
}
.cc-archive-pills a:hover{ background: var(--emerald); color:#fff; border-color: var(--emerald); }

.cc-empty-note{
  text-align:center; color: var(--text-muted); background: var(--sage);
  border-radius: var(--radius-md); padding: 2rem; font-size: .95rem;
}

@media (max-width: 767px){
  .cc-prayer-hero{ padding: 7rem 0 3.5rem; }
  .cc-toolkit{ padding: 2rem 1.4rem; }
  .cc-library-wrap{ padding-top: 2.4rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .cc-cloud, .cc-scroll-cue span{ animation: none !important; }
  .cc-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}