/*
 * cbd-reading-plans.css — Christian Book Digest Reading Plans Hub
 *
 * All selectors scoped under #cbd-rp to prevent any theme conflicts.
 * Enqueued via functions-snippet.php only on template: page-reading-plans.php
 *
 * Palette : cream/parchment · gold #B8952A · deep navy #0F1B2D
 * Fonts   : Lora (serif headings) · Lato (sans body)
 * Icons   : Tabler Icons webfont  (ti ti-*)
 */

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
#cbd-rp {
  --rp-gold:         #B8952A;
  --rp-gold-light:   #F5E6A3;
  --rp-gold-pale:    #FDFAF0;
  --rp-ink:          #1A1208;
  --rp-ink-mid:      #3D2E14;
  --rp-ink-muted:    #6B5740;
  --rp-cream:        #FBF7EF;
  --rp-cream-dark:   #F0E8D4;
  --rp-cream-border: #DDD0B5;
  --rp-parchment:    #E8DCC8;
  --rp-deep-navy:    #0F1B2D;
  --rp-navy-mid:     #1A2E46;
  --rp-red-accent:   #8B2015;
  --rp-serif:        'Lora', 'Playfair Display', Georgia, serif;
  --rp-sans:         'Lato', 'DM Sans', sans-serif;
  --rp-radius:       4px;
  --rp-radius-lg:    6px;
  --rp-shadow:       0 4px 20px rgba(184, 149, 42, 0.12);
  --rp-shadow-card:  0 8px 40px rgba(15, 27, 45, 0.10);

  font-family: var(--rp-sans);
  background:  var(--rp-cream);
  color:       var(--rp-ink);
  line-height: 1.7;
}
#cbd-rp *,
#cbd-rp *::before,
#cbd-rp *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Hide default WP content wrappers on this template only */
.cbd-reading-plans .site-main,
.cbd-reading-plans .entry-content,
.cbd-reading-plans #primary,
.cbd-reading-plans .page-content,
.cbd-reading-plans .post-content,
.cbd-reading-plans #content > article { display: none !important; }
#cbd-rp { display: block !important; }

.screen-reader-text {
  position:    absolute;
  width:       1px;  height: 1px;
  padding:     0;    margin: -1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
  border:      0;
}


/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.cbd-rp-hero {
  background:  var(--rp-deep-navy);
  padding:     3.5rem 2rem 3rem;
  text-align:  center;
  position:    relative;
  overflow:    hidden;
}
.cbd-rp-hero::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184,149,42,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cbd-rp-hero-eyebrow {
  font-family:    var(--rp-sans);
  font-size:      11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--rp-gold);
  margin-bottom:  1rem;
  font-weight:    500;
  position:       relative;
}
.cbd-rp-hero-title {
  font-family:   var(--rp-serif);
  font-size:     2.6rem;
  font-weight:   600;
  line-height:   1.2;
  color:         #FBF7EF;
  margin-bottom: 1rem;
  position:      relative;
}
.cbd-rp-hero-title em { color: var(--rp-gold); font-style: italic; }
.cbd-rp-hero-divider {
  width:        48px;
  height:       2px;
  background:   var(--rp-gold);
  margin:       0 auto 1.5rem;
  position:     relative;
}
.cbd-rp-hero-sub {
  font-family:   var(--rp-serif);
  font-style:    italic;
  font-size:     1.05rem;
  color:         #C4B49A;
  max-width:     480px;
  margin:        0 auto 1.5rem;
  line-height:   1.7;
  position:      relative;
}
.cbd-rp-hero-verse {
  font-family: var(--rp-serif);
  font-style:  italic;
  font-size:   0.85rem;
  color:       #8A7A62;
  max-width:   360px;
  margin:      0 auto;
  position:    relative;
}
.cbd-rp-hero-verse cite {
  display:        block;
  font-style:     normal;
  font-size:      0.75rem;
  color:          #665A46;
  margin-top:     0.4rem;
  letter-spacing: 0.05em;
}


/* ═══════════════════════════════════════════════════
   SEARCH & FILTER BAR
   ═══════════════════════════════════════════════════ */
.cbd-rp-search-bar {
  background:      var(--rp-cream);
  border-top:      3px solid var(--rp-gold);
  padding:         1.5rem 2rem;
  display:         flex;
  gap:             0.75rem;
  align-items:     center;
  flex-wrap:       wrap;
  justify-content: center;
}
.cbd-rp-search-input {
  font-family:   var(--rp-sans);
  font-size:     14px;
  padding:       0.6rem 1rem;
  border:        1px solid var(--rp-cream-border);
  border-radius: var(--rp-radius);
  background:    #fff;
  color:         var(--rp-ink);
  flex:          1;
  min-width:     200px;
  max-width:     320px;
  outline:       none;
  transition:    border-color 0.2s;
}
.cbd-rp-search-input:focus { border-color: var(--rp-gold); }
.cbd-rp-pills {
  display:         flex;
  gap:             0.5rem;
  flex-wrap:       wrap;
  justify-content: center;
}
.cbd-rp-pill {
  font-family:    var(--rp-sans);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.04em;
  padding:        0.4rem 0.9rem;
  border-radius:  20px;
  cursor:         pointer;
  border:         1px solid var(--rp-cream-border);
  background:     #fff;
  color:          var(--rp-ink-muted);
  transition:     all 0.2s;
}
.cbd-rp-pill:hover,
.cbd-rp-pill.active { background: var(--rp-gold); color: #fff; border-color: var(--rp-gold); }


/* ═══════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════ */
.cbd-rp-breadcrumb {
  font-size:  12px;
  color:      var(--rp-ink-muted);
  padding:    1rem 1.5rem 0;
  max-width:  860px;
  margin:     0 auto;
}
.cbd-rp-breadcrumb a { color: var(--rp-ink-muted); text-decoration: none; }
.cbd-rp-breadcrumb a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════
   MAIN CONTAINER
   ═══════════════════════════════════════════════════ */
.cbd-rp-main {
  padding:   2.5rem 1.5rem;
  max-width: 860px;
  margin:    0 auto;
}


/* ═══════════════════════════════════════════════════
   SHARED HELPERS
   ═══════════════════════════════════════════════════ */
.cbd-rp-label {
  font-family:    var(--rp-sans);
  font-size:      10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--rp-gold);
  font-weight:    500;
  margin-bottom:  0.4rem;
}
.cbd-rp-section-title {
  font-family:  var(--rp-serif);
  font-size:    1.5rem;
  font-weight:  600;
  color:        var(--rp-ink);
  line-height:  1.3;
}


/* ═══════════════════════════════════════════════════
   FEATURED PLAN CARD
   ═══════════════════════════════════════════════════ */
.cbd-rp-featured {
  background:    var(--rp-deep-navy);
  border-radius: var(--rp-radius-lg);
  padding:       2rem;
  margin-bottom: 3rem;
  position:      relative;
  overflow:      hidden;
}
.cbd-rp-featured::after {
  content:        '';
  position:       absolute;
  bottom:         0;
  right:          0;
  width:          140px;
  height:         140px;
  background:     radial-gradient(circle, rgba(184,149,42,0.22), transparent 70%);
  pointer-events: none;
}
.cbd-rp-featured-badge {
  display:        inline-block;
  font-size:      10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background:     var(--rp-gold);
  color:          var(--rp-ink);
  padding:        3px 10px;
  border-radius:  2px;
  font-weight:    500;
  margin-bottom:  1.2rem;
}
.cbd-rp-featured-title {
  font-family:   var(--rp-serif);
  font-size:     1.65rem;
  font-weight:   600;
  color:         #FBF7EF;
  line-height:   1.3;
  margin-bottom: 0.75rem;
}
.cbd-rp-featured-desc {
  font-size:     14px;
  color:         #A09278;
  line-height:   1.75;
  margin-bottom: 1.5rem;
  max-width:     600px;
}
.cbd-rp-featured-meta {
  display:   flex;
  gap:       1.5rem;
  flex-wrap: wrap;
}
.cbd-rp-meta-chip {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   12px;
  color:       #7A6A54;
}
.cbd-rp-meta-chip i   { color: var(--rp-gold); font-size: 15px; line-height: 1; }
.cbd-rp-meta-chip span { line-height: 1; }
.cbd-rp-cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     var(--rp-sans);
  font-size:       13px;
  font-weight:     500;
  background:      var(--rp-gold);
  color:           var(--rp-ink);
  padding:         0.65rem 1.5rem;
  border-radius:   var(--rp-radius);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  margin-top:      1.5rem;
  transition:      opacity 0.2s, transform 0.2s;
  position:        relative;
  z-index:         1;
}
.cbd-rp-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.cbd-rp-cta-btn i     { font-size: 14px; }


/* ═══════════════════════════════════════════════════
   PLANS GRID
   ═══════════════════════════════════════════════════ */
.cbd-rp-section-head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  margin-bottom:   1.4rem;
  gap:             1rem;
  flex-wrap:       wrap;
}
.cbd-rp-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:                   1.25rem;
  margin-bottom:         3rem;
}

/* ── Individual plan card ── */
.cbd-rp-card {
  background:    #fff;
  border:        1px solid var(--rp-cream-border);
  border-radius: var(--rp-radius);
  padding:       1.4rem 1.25rem 1.25rem;
  transition:    all 0.2s;
  position:      relative;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
}
.cbd-rp-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: var(--rp-cream-border);
  transition: background 0.2s;
}
.cbd-rp-card:not(.cbd-rp-card--soon):hover {
  border-color: var(--rp-gold);
  box-shadow:   var(--rp-shadow);
  transform:    translateY(-2px);
}
.cbd-rp-card:not(.cbd-rp-card--soon):hover::before { background: var(--rp-gold); }
.cbd-rp-card--soon { opacity: 0.62; cursor: default; }

.cbd-rp-card-icon {
  font-size:     22px;
  color:         var(--rp-gold);
  margin-bottom: 0.8rem;
  display:       block;
}
.cbd-rp-card-title {
  font-family:   var(--rp-serif);
  font-size:     1rem;
  font-weight:   600;
  color:         var(--rp-ink);
  line-height:   1.4;
  margin-bottom: 0.5rem;
}
.cbd-rp-card-desc {
  font-size:     12.5px;
  color:         var(--rp-ink-muted);
  line-height:   1.65;
  margin-bottom: 1rem;
  flex:          1;
}
.cbd-rp-tags {
  display:   flex;
  gap:       0.4rem;
  flex-wrap: wrap;
}
.cbd-rp-tag {
  font-size:      10.5px;
  letter-spacing: 0.04em;
  padding:        2px 7px;
  border-radius:  2px;
  background:     var(--rp-cream-dark);
  color:          var(--rp-ink-muted);
}
.cbd-rp-tag--hl { background: var(--rp-gold-light); color: #7A5C00; }
.cbd-rp-card-days {
  position:    absolute;
  top:         1rem;
  right:       1rem;
  font-size:   11px;
  font-weight: 500;
  color:       var(--rp-ink-muted);
}
.cbd-rp-card-link {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  font-size:       12px;
  font-weight:     500;
  color:           var(--rp-gold);
  text-decoration: none;
  margin-top:      0.85rem;
  transition:      opacity 0.2s;
}
.cbd-rp-card-link:hover { opacity: 0.75; }

.cbd-rp-no-results {
  text-align:    center;
  color:         var(--rp-ink-muted);
  font-style:    italic;
  padding:       2rem 0;
  font-family:   var(--rp-serif);
  margin-bottom: 3rem;
}


/* ═══════════════════════════════════════════════════
   SCRIPTURE CALLOUT
   ═══════════════════════════════════════════════════ */
.cbd-rp-verse-callout {
  border-left:   3px solid var(--rp-gold);
  padding:       1.2rem 1.5rem;
  background:    var(--rp-gold-pale);
  border-radius: 0 var(--rp-radius) var(--rp-radius) 0;
  margin-bottom: 3rem;
}
.cbd-rp-verse-callout blockquote p {
  font-family:   var(--rp-serif);
  font-style:    italic;
  font-size:     1.05rem;
  color:         var(--rp-ink-mid);
  line-height:   1.85;
  margin-bottom: 0.5rem;
}
.cbd-rp-verse-callout cite {
  font-size:      12px;
  color:          var(--rp-ink-muted);
  letter-spacing: 0.05em;
  font-style:     normal;
}


/* ═══════════════════════════════════════════════════
   DEEPEN YOUR STUDY — related posts
   ═══════════════════════════════════════════════════ */
.cbd-rp-related {
  margin-bottom: 3rem;
}
.cbd-rp-related-head {
  margin-bottom: 2rem;
}
.cbd-rp-related-intro {
  font-size:   14px;
  color:       var(--rp-ink-muted);
  line-height: 1.75;
  max-width:   620px;
  margin-top:  0.6rem;
}
.cbd-rp-related-groups {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   1.25rem;
}
.cbd-rp-related-group {
  background:    #fff;
  border:        1px solid var(--rp-cream-border);
  border-radius: var(--rp-radius);
  padding:       1.4rem 1.25rem;
  position:      relative;
}
.cbd-rp-related-group::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: var(--rp-gold);
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
.cbd-rp-related-group-header {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  margin-bottom: 0.3rem;
}
.cbd-rp-related-group-header i {
  font-size: 18px;
  color:     var(--rp-gold);
  line-height: 1;
}
.cbd-rp-related-group-header h3 {
  font-family:  var(--rp-serif);
  font-size:    1rem;
  font-weight:  600;
  color:        var(--rp-ink);
  line-height:  1.3;
}
.cbd-rp-related-group-note {
  font-size:     11px;
  color:         var(--rp-ink-muted);
  font-style:    italic;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.cbd-rp-related-links {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        0.5rem;
}
.cbd-rp-related-links li a {
  display:         flex;
  align-items:     flex-start;
  gap:             7px;
  font-size:       13px;
  color:           var(--rp-ink-mid);
  text-decoration: none;
  line-height:     1.45;
  transition:      color 0.15s;
}
.cbd-rp-related-links li a:hover { color: var(--rp-gold); }
.cbd-rp-related-links li a i {
  font-size:  14px;
  color:      var(--rp-cream-border);
  flex-shrink: 0;
  margin-top:  2px;
  transition:  color 0.15s;
}
.cbd-rp-related-links li a:hover i { color: var(--rp-gold); }


/* ═══════════════════════════════════════════════════
   HOW TO USE — STEPS
   ═══════════════════════════════════════════════════ */
.cbd-rp-how {
  background:    var(--rp-deep-navy);
  border-radius: var(--rp-radius-lg);
  padding:       2rem;
  margin-bottom: 3rem;
}
.cbd-rp-how .cbd-rp-label { color: var(--rp-gold); }
.cbd-rp-how-title {
  font-family:   var(--rp-serif);
  font-size:     1.4rem;
  font-weight:   600;
  color:         #FBF7EF;
  margin-bottom: 1.5rem;
  line-height:   1.3;
}
.cbd-rp-steps {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:                   1.2rem;
}
.cbd-rp-step      { text-align: center; padding: 0 0.5rem; }
.cbd-rp-step-num {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          1px solid var(--rp-gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 0.75rem;
  font-family:     var(--rp-serif);
  font-size:       1rem;
  color:           var(--rp-gold);
}
.cbd-rp-step-title {
  font-family:   var(--rp-serif);
  font-size:     0.9rem;
  color:         #E8DCC8;
  margin-bottom: 0.4rem;
  font-weight:   600;
}
.cbd-rp-step p { font-size: 12px; color: #7A6A54; line-height: 1.6; }


/* ═══════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════ */
.cbd-rp-email {
  background:    #fff;
  border:        1px solid var(--rp-cream-border);
  border-radius: var(--rp-radius);
  padding:       2rem;
  margin-bottom: 3rem;
  text-align:    center;
}
.cbd-rp-email h2 {
  font-family:   var(--rp-serif);
  font-size:     1.3rem;
  margin-bottom: 0.5rem;
  color:         var(--rp-ink);
}
.cbd-rp-email > p {
  font-size:     13px;
  color:         var(--rp-ink-muted);
  line-height:   1.75;
  margin-bottom: 1.2rem;
}
.cbd-rp-email-form {
  display:         flex;
  gap:             0.5rem;
  justify-content: center;
  flex-wrap:       wrap;
}
.cbd-rp-email-input {
  font-family:   var(--rp-sans);
  font-size:     13px;
  padding:       0.55rem 1rem;
  border:        1px solid var(--rp-cream-border);
  border-radius: var(--rp-radius);
  min-width:     210px;
  background:    #fff;
  color:         var(--rp-ink);
  outline:       none;
  transition:    border-color 0.2s;
}
.cbd-rp-email-input:focus { border-color: var(--rp-gold); }
.cbd-rp-subscribe-btn {
  font-family:   var(--rp-sans);
  font-size:     13px;
  font-weight:   500;
  background:    var(--rp-red-accent);
  color:         #fff;
  border:        none;
  border-radius: var(--rp-radius);
  padding:       0.55rem 1.2rem;
  cursor:        pointer;
  transition:    opacity 0.2s;
}
.cbd-rp-subscribe-btn:hover { opacity: 0.88; }
.cbd-rp-email-fine {
  font-size:  11px;
  color:      var(--rp-ink-muted);
  margin-top: 0.6rem;
}

/* mc4wp plugin form styling — matches our design when active */
.cbd-rp-email .mc4wp-form-fields { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.cbd-rp-email .mc4wp-form input[type="email"] {
  font-family:   var(--rp-sans);
  font-size:     13px;
  padding:       0.55rem 1rem;
  border:        1px solid var(--rp-cream-border);
  border-radius: var(--rp-radius);
  min-width:     210px;
  outline:       none;
}
.cbd-rp-email .mc4wp-form input[type="email"]:focus { border-color: var(--rp-gold); }
.cbd-rp-email .mc4wp-form input[type="submit"] {
  font-family:   var(--rp-sans);
  font-size:     13px;
  font-weight:   500;
  background:    var(--rp-red-accent);
  color:         #fff;
  border:        none;
  border-radius: var(--rp-radius);
  padding:       0.55rem 1.2rem;
  cursor:        pointer;
  transition:    opacity 0.2s;
}
.cbd-rp-email .mc4wp-form input[type="submit"]:hover { opacity: 0.88; }


/* ═══════════════════════════════════════════════════
   CLOSING
   ═══════════════════════════════════════════════════ */
.cbd-rp-divider-cross {
  text-align:     center;
  margin:         2rem 0;
  color:          var(--rp-cream-border);
  font-size:      18px;
  font-family:    var(--rp-serif);
  letter-spacing: 0.5em;
}
.cbd-rp-closing {
  font-family:   var(--rp-serif);
  font-style:    italic;
  font-size:     0.95rem;
  color:         var(--rp-ink-muted);
  text-align:    center;
  line-height:   1.95;
  margin-bottom: 2.5rem;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — 768px
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cbd-rp-hero           { padding: 2.5rem 1.25rem 2rem; }
  .cbd-rp-hero-title     { font-size: 2rem; }
  .cbd-rp-search-bar     { padding: 1.25rem 1rem; flex-direction: column; }
  .cbd-rp-search-input   { max-width: 100%; }
  .cbd-rp-main           { padding: 2rem 1rem; }
  .cbd-rp-featured       { padding: 1.5rem; }
  .cbd-rp-featured-title { font-size: 1.35rem; }
  .cbd-rp-grid           { grid-template-columns: 1fr; }
  .cbd-rp-related-groups { grid-template-columns: 1fr 1fr; }
  .cbd-rp-steps          { grid-template-columns: repeat(2, 1fr); }
  .cbd-rp-how            { padding: 1.5rem; }
  .cbd-rp-email          { padding: 1.5rem; }
  .cbd-rp-closing br     { display: none; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — 480px
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .cbd-rp-hero-title     { font-size: 1.7rem; }
  .cbd-rp-featured-meta  { gap: 0.75rem; }
  .cbd-rp-related-groups { grid-template-columns: 1fr; }
  .cbd-rp-steps          { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .cbd-rp-email-form     { flex-direction: column; align-items: stretch; }
  .cbd-rp-email-input    { min-width: 100%; }
  .cbd-rp-subscribe-btn  { width: 100%; }
}