/* ========= Campfire Theme Tokens ========= */
:root {
  /* Brand palette */
  --camp-ember:        #ff8c00;   /* warm orange */
  --camp-ember-deep:   #ff4500;   /* deeper ember */
  --camp-ash:          #3b2a1a;   /* camp-brown text */
  --camp-bark:         #5a4636;   /* darker brown */
  --camp-wood:         #fbf5ef;   /* parchment bg */
  --camp-spark:        #ffd8a1;   /* highlight wash */
  --camp-smoke:        rgba(0,0,0,.06);

  /* Neutrals */
  --camp-white:        #ffffff;
  --camp-ink:          #111111;

  /* Radii & spacing */
  --camp-radius-sm:    8px;
  --camp-radius-md:    12px;
  --camp-radius-lg:    20px;

  --camp-space-1:      6px;
  --camp-space-2:      10px;
  --camp-space-3:      14px;
  --camp-space-4:      18px;
  --camp-space-5:      24px;

  /* Shadows */
  --camp-shadow-card:  0 2px 12px rgba(0,0,0,.06);
  --camp-shadow-raise: 0 10px 30px rgba(0,0,0,.10);

  /* Ember glow (reusable ring) */
  --camp-glow:         0 0 0 2px var(--camp-white),
                       0 0 22px color-mix(in srgb, var(--camp-ember) 60%, transparent),
                       0 0 44px color-mix(in srgb, var(--camp-ember-deep) 40%, transparent);

  /* Typography */
  --camp-font-base:    system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --camp-font-scale-1: 0.92rem;
  --camp-font-scale-2: 1rem;
  --camp-font-scale-3: 1.125rem;
  --camp-font-scale-4: 1.25rem;
}

/* Optional dark-mode tweaks */
@media (prefers-color-scheme: dark) {
  :root {
    --camp-wood:       #1e1a16;
    --camp-smoke:      rgba(255,255,255,.08);
    --camp-shadow-card: 0 2px 12px rgba(0,0,0,.35);
  }
}

/* ========= Small utilities ========= */
.camp-card {
  background: var(--camp-white);
  border: 1px solid var(--camp-smoke);
  border-radius: var(--camp-radius-md);
  box-shadow: var(--camp-shadow-card);
  padding: var(--camp-space-4);
}
.camp-row {
  display: flex; flex-wrap: wrap; gap: var(--camp-space-3);
}
.camp-glow {
  box-shadow: var(--camp-glow);
}
.camp-avatar {
  border-radius: 50%;
  background: transparent;
}
.camp-chip {
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--camp-spark);
  color: var(--camp-bark);
  font-size: var(--camp-font-scale-1);
}

/* ========= Example: Comments using tokens ========= */
.comments-area .comment {
  background: var(--camp-white);
  border: 1px solid var(--camp-smoke);
  border-radius: var(--camp-radius-md);
  padding: var(--camp-space-4);
  margin-bottom: var(--camp-space-3);
  box-shadow: var(--camp-shadow-card);
  font-family: var(--camp-font-base);
}
.comments-area .avatar {
  border-radius: 50%;
  background: transparent;
  box-shadow: var(--camp-glow);
}

/* “Comment as” select */
.comment-form-voice label { font-weight: 600; margin-right: var(--camp-space-2); }
#campfire_voice {
  border-radius: var(--camp-radius-sm);
  padding: 4px 8px;
  border: 1px solid rgba(0,0,0,.2);
}

/* ========= Example: Author cards using tokens ========= */
.ppma-author-boxes, .ppma-authors-wrap, .ppma-box, .ppma-authors-list {
  display: flex; flex-wrap: wrap; gap: var(--camp-space-3);
}
.ppma-author, .ppma-author-card, .ppma-box .author-box {
  flex: 1 1 260px;
  max-width: 360px;
  background: var(--camp-white);
  border: 1px solid var(--camp-smoke);
  border-radius: var(--camp-radius-md);
  padding: var(--camp-space-3);
  box-shadow: var(--camp-shadow-card);
}
.ppma-author-avatar img, .author-box .avatar {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--camp-glow);
}

/* ========= Example: Widget (Recent Voice Comments) ========= */
.cf-recent-voice-comments { list-style:none; margin:0; padding:0; }
.cf-rvc-item {
  display:grid; grid-template-columns: 28px 1fr; gap: var(--camp-space-2);
  align-items:start; padding: var(--camp-space-2) 0;
  border-bottom: 1px dotted var(--camp-smoke);
}
.cf-rvc-item:last-child { border-bottom: 0; }
.cf-rvc-avatar img { border-radius: 50%; box-shadow: var(--camp-glow); background: transparent; }
.cf-rvc-name { font-weight: 600; text-decoration: none; color: var(--camp-ash); }
.cf-rvc-snippet { font-size: var(--camp-font-scale-1); opacity:.85; line-height:1.3; }


/* Ember-glow variant */
.camp-card.camp-glow {
  background: var(--camp-wood);
  border: 1px solid color-mix(in srgb, var(--camp-ember-deep) 15%, var(--camp-smoke));
  box-shadow:
    0 0 0 2px var(--camp-white),
    0 0 20px color-mix(in srgb, var(--camp-ember) 40%, transparent),
    0 0 40px color-mix(in srgb, var(--camp-ember-deep) 25%, transparent);
  transition: box-shadow .3s ease, transform .2s ease;
}
.camp-card.camp-glow:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px var(--camp-white),
    0 0 28px color-mix(in srgb, var(--camp-ember) 60%, transparent),
    0 0 56px color-mix(in srgb, var(--camp-ember-deep) 40%, transparent);
}

.camp-card.parchment {
  background: radial-gradient(circle at 30% 20%, #fffef8, #f8f3ec);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset 0 0 12px rgba(0,0,0,.05), var(--camp-shadow-card);
}

/* CARD VARIANTS */

/* Base */
.camp-card {
  background: var(--camp-white);
  border: 1px solid var(--camp-smoke);
  border-radius: var(--camp-radius-md);
  box-shadow: var(--camp-shadow-card);
  padding: var(--camp-space-4);
  font-family: var(--camp-font-base);
}

/* Glow (ember aura) */
.camp-card.camp-glow {
  background: var(--camp-wood);
  border: 1px solid color-mix(in srgb, var(--camp-ember-deep) 15%, var(--camp-smoke));
  box-shadow:
    0 0 0 2px var(--camp-white),
    0 0 20px color-mix(in srgb, var(--camp-ember) 40%, transparent),
    0 0 40px color-mix(in srgb, var(--camp-ember-deep) 25%, transparent);
  transition: box-shadow .25s ease, transform .2s ease;
}
.camp-card.camp-glow:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px var(--camp-white),
    0 0 28px color-mix(in srgb, var(--camp-ember) 60%, transparent),
    0 0 56px color-mix(in srgb, var(--camp-ember-deep) 40%, transparent);
}

/* Parchment (paper feel) */
.camp-card.camp-parchment {
  background: radial-gradient(circle at 30% 20%, #fffef8, #f8f3ec);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset 0 0 12px rgba(0,0,0,.05), var(--camp-shadow-card);
}

/* OPTIONAL HEADERS */
/* Header band w/ icon slot */
.camp-card .camp-card__header {
  display:flex; align-items:center; gap: var(--camp-space-2);
  margin-bottom: var(--camp-space-3);
}
.camp-card .camp-card__icon {
  width:28px; height:28px; border-radius:50%;
  box-shadow: var(--camp-glow); background:transparent; object-fit:cover;
}
.camp-card .camp-card__title {
  font-size: var(--camp-font-scale-3);
  font-weight: 700; color: var(--camp-ash);
}

/* Footer row (chips / actions) */
.camp-card .camp-card__footer {
  display:flex; flex-wrap:wrap; gap: var(--camp-space-2);
  margin-top: var(--camp-space-3);
}

/* Tiny ember button */
.camp-btn-ember {
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: linear-gradient(180deg, var(--camp-ember), var(--camp-ember-deep));
  color: #fff; text-decoration:none; font-weight:600; font-size: var(--camp-font-scale-1);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--camp-ember) 35%, transparent);
  transition: transform .12s ease, box-shadow .2s ease;
}
.camp-btn-ember:hover { transform: translateY(-1px); }

/* CHIPS REUSABLE */
.camp-chip {
  display:inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--camp-spark); color: var(--camp-bark);
  font-size: var(--camp-font-scale-1); font-weight:600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--camp-ember) 25%, transparent) inset;
}


/* ========= Start of Regular Core ========= */


.interstitial-quote { margin: 24px 0; }
.interstitial-quote-block {
  background: #3b2a1a;
  color: #fff3e2;
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 0 10px rgba(255,255,255,.06);
  position: relative;
}
.interstitial-quote-block::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  box-shadow: inset 0 0 35px rgba(0,0,0,.25);
  pointer-events: none;
}
.interstitial-quote-block cite {
  display: block;
  margin-top: 10px;
  text-align: right;   /* voice on the right */
  font-style: normal;
  opacity: .9;
}

/* Interstitial Quotes – high-specificity overrides */
article.interstitial-quote blockquote.interstitial-quote-block {
  background: #3b2a1a;
  color: #fff3e2;
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 0 10px rgba(255,255,255,.06);
  position: relative;
  margin: 24px 0;
  border-left: none; /* neutralize theme blockquote stripe */
}

article.interstitial-quote blockquote.interstitial-quote-block > cite {
  display: block !important;     /* beat theme inline rules */
  width: 100%;
  margin-top: 10px;
  text-align: right !important;  /* force right alignment */
  font-style: normal;
  opacity: .9;
}

/* optional inner glow to match prototype */
article.interstitial-quote blockquote.interstitial-quote-block::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  box-shadow: inset 0 0 35px rgba(0,0,0,.25);
  pointer-events: none;
}

/* === Campfire-style accent for interstitial quotes === */
article.interstitial-quote blockquote.interstitial-quote-block {
  position: relative;
  background: #3b2a1a;
  color: #fff3e2;
  border-radius: 14px;
  padding: 18px 20px 18px 24px;   /* a little extra on left for the bar */
  border-left: 5px solid #e58a24; /* campfire orange accent */
  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    inset 0 0 10px rgba(255,255,255,.06);
}

article.interstitial-quote blockquote.interstitial-quote-block cite {
  display: block !important;
  margin-top: 10px;
  text-align: right !important;
  font-style: italic;
  font-weight: 500;
  color: #f4a652;                 /* warm orange author text */
  opacity: 1;
}

article.interstitial-quote blockquote.interstitial-quote-block::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  box-shadow:
    inset 0 0 35px rgba(0,0,0,.25),
    inset 0 0 15px rgba(229,138,36,.25); /* soft orange glow */
  pointer-events: none;
}


/* COMMENT CARD FORMATTING */


/* Comment card */
.commentlist .comment,
.comments-area .comment {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

/* Avatar ring with ember glow */
.comment .avatar {
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #fff,              /* white ring */
    0 0 22px rgba(255,140,0,.30),/* warm glow */
    0 0 44px rgba(255,69,0,.12); /* deeper ember */
  background: transparent !important;
}

/* “Comment as” selector tidy */
.comment-form-voice {
  margin: 8px 0 10px;
}
.comment-form-voice label {
  margin-right: 8px; font-weight: 600;
}
#campfire_voice {
  border-radius: 8px; padding: 4px 8px;
  border: 1px solid rgba(0,0,0,.2);
}


/* Recent Voice Comments widget */
.cf-recent-voice-comments {
  list-style: none; margin: 0; padding: 0;
}
.cf-rvc-item { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px dotted rgba(0,0,0,.1); }
.cf-rvc-item:last-child { border-bottom: 0; }
.cf-rvc-avatar img { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,140,0,.25); }
.cf-rvc-name { font-weight: 600; text-decoration: none; }
.cf-rvc-snippet { font-size: .92em; opacity: .8; line-height: 1.2; }

/* SONGS AND ALBUMS */
.cf-song__hero { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.cf-song__art { width:160px; border-radius:8px; }
.cf-song__player, .cf-song__interview, .cf-song__lyrics,
.cf-song__demos, .cf-song__live, .cf-song__artgallery, .cf-song__story { margin:16px 0; }
.cf-song__lyrics img { max-width:100%; height:auto; border-radius:6px; }
.cf-album__hero { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.cf-album__cover { width:180px; border-radius:10px; }
.cf-album__tracks audio { display:block; margin-top:8px; }
.cf-album-grid { display:grid; gap:16px; }
.cf-album-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.cf-album-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.cf-album-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.cf-album-card { display:block; text-align:center; padding:8px; border-radius:10px; background:#fbf5ef; }
.cf-album-card img { width:100%; height:auto; border-radius:8px; }

// ------- Minimal CSS for Testing Books
.cf-grid { display:grid; gap:16px; }
.cf-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:800px){ .cf-grid.cols-3 { grid-template-columns: 1fr; } }

.cf-book-card, .cf-part-card, .cf-chapter, .cf-voice-note {
  background:#fbf5ef; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; padding:12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.cf-chapter-reading.is-spacer .cf-spacer-chat {
  background:#fff3e6; border-left:4px solid #ff8c00; padding:12px; border-radius:8px;
}

.cf-chapter-nav { display:flex; gap:12px; justify-content:space-between; margin-top:16px; }
.cf-chapter-nav a, .cf-chapter-nav span { padding:8px 12px; border-radius:8px; }
.cf-chapter-nav.style-buttons a { background:#3b2a1a; color:#fff; text-decoration:none; }
.cf-chapter-nav .disabled { opacity:.5; }

/*------------------ Campfire Radio */
#cf-radio-dial.campfire-dial { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
#cf-radio-dial .dial-btn { padding:6px 10px; border:1px solid rgba(0,0,0,.15); border-radius:999px; text-decoration:none; }
#cf-radio-dial .dial-btn.active { font-weight:600; box-shadow:0 0 0 2px rgba(0,0,0,.06) inset; }

.cf-radio-list { display:grid; gap:20px; }
.cf-radio-item { background:#fbf5ef; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:16px; }
.cf-radio-title { margin:0 0 6px; }
.cf-radio-meta { opacity:.85; font-size:.9rem; margin-bottom:8px; }
.cf-radio-thumb { margin:10px 0; }
.cf-radio-player { margin:8px 0 10px; }
.cf-radio-excerpt { margin-top:8px; }
.cf-radio-empty { opacity:.8; }