/*
 * ═══════════════════════════════════════════════════════════════════
 *  PEBCAK PODCAST — Custom CSS for Podbean (Unlimited Plan)
 *  Theme: Cyberpunk Terminal / Dark InfoSec  — v2 FIXED
 *
 *  HOW TO USE:
 *  1. Podbean Dashboard → Distribution → Podcast Website → Customize
 *  2. Click "CSS Editor" (top-left of the editor)
 *  3. Paste this entire file → click "Save Now"
 * ═══════════════════════════════════════════════════════════════════
 */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap');

/* ── VARIABLES ── */
:root {
  --bg:      #080c10;
  --surface: #0d1218;
  --border:  #1a2533;
  --accent:  #00e5ff;
  --accent2: #ff3a5c;
  --text:    #c8d8e8;
  --muted:   #6a7f96;
  --mono:    'Share Tech Mono', monospace;
  --display: 'Bebas Neue', sans-serif;
  --body:    'DM Sans', sans-serif;
}

/* ══════════════════════════════════════════
   GLOBAL
══════════════════════════════════════════ */
body {
  background-color: #080c10 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ══════════════════════════════════════════
   TOP NAVIGATION BAR
   (the black bar with HOME, SUBSCRIBE, etc.)
══════════════════════════════════════════ */
.navbar,
.navbar-default,
.site-navbar,
#navbar,
nav.navbar {
  background-color: #080c10 !important;
  background-image: none !important;
  border-bottom: 1px solid #1a2533 !important;
}

/* Nav text links — make them visible */
.navbar a,
.navbar-nav > li > a,
.site-navbar a,
nav.navbar a {
  color: #6a7f96 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.navbar a:hover,
.navbar-nav > li > a:hover {
  color: #00e5ff !important;
  background-color: transparent !important;
}

/* SUBSCRIBE button — keep it visible and styled */
.navbar .btn,
.navbar .btn-default,
.navbar .subscribe,
a.subscribe,
.navbar-nav .subscribe > a,
[class*="subscribe"] {
  background-color: #00e5ff !important;
  color: #080c10 !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 6px 18px !important;
}

[class*="subscribe"]:hover {
  background-color: #ffffff !important;
  color: #080c10 !important;
}

/* Search icon */
.navbar .search-icon,
.navbar .fa-search,
.navbar [class*="search"] {
  color: #6a7f96 !important;
}

/* ══════════════════════════════════════════
   HERO / HEADER SECTION
   (the big white area with title + description)
══════════════════════════════════════════ */
.header-section,
.site-header,
.channel-header,
.hero-section,
.podcast-header,
#channel-header,
.header-wrap,
.pb-header,
.top-section,
.section-header {
  background-color: #080c10 !important;
  background-image:
    linear-gradient(180deg, rgba(0,229,255,0.05) 0%, transparent 100%) !important;
  border-bottom: 1px solid #1a2533 !important;
}

/* ── PODCAST TITLE — must be visible on dark bg ── */
.channel-title,
.podcast-title,
.site-title,
.header-title,
.channel-name,
.blog-title,
h1,
h1.title,
#channel-title {
  font-family: 'Bebas Neue', sans-serif !important;
  color: #ffffff !important;
  text-shadow:
    0 0 40px rgba(0,229,255,0.4),
    0 0 80px rgba(0,229,255,0.15) !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

/* ── PODCAST DESCRIPTION ── */
.channel-desc,
.podcast-description,
.site-description,
.header-desc,
.channel-tagline,
.blog-desc,
#channel-desc,
.description {
  font-family: 'DM Sans', sans-serif !important;
  color: #6a7f96 !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
}

/* ── "Listen on:" label ── */
.listen-on-label,
.platform-label,
.listen-label {
  font-family: 'Share Tech Mono', monospace !important;
  color: #6a7f96 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Platform icons — just add a hover glow */
.platform-icons a,
.listen-on a,
.subscribe-icons a {
  transition: transform 0.2s, filter 0.2s !important;
  display: inline-block !important;
}

.platform-icons a:hover,
.listen-on a:hover,
.subscribe-icons a:hover {
  transform: translateY(-3px) scale(1.08) !important;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.5)) !important;
}

/* ══════════════════════════════════════════
   EPISODE LIST AREA
══════════════════════════════════════════ */
.episode-list,
.post-list,
.episodes-section,
#episodes,
.content-wrap,
.main-content,
.content-area,
#content,
.section-content {
  background-color: #080c10 !important;
}

/* Episode cards */
.episode-item,
.post-item,
article.post,
.episode,
li.episode,
.ep-item {
  background-color: #0d1218 !important;
  border: 1px solid #1a2533 !important;
  border-radius: 0 !important;
  margin-bottom: 2px !important;
  transition: background-color 0.2s, border-color 0.2s !important;
}

.episode-item:hover,
.post-item:hover,
article.post:hover,
.ep-item:hover {
  background-color: rgba(0,229,255,0.04) !important;
  border-color: rgba(0,229,255,0.3) !important;
}

/* Episode title */
.episode-title,
.post-title,
h2.title,
h3.title,
.entry-title,
.item-title {
  font-family: 'DM Sans', sans-serif !important;
  color: #c8d8e8 !important;
  font-weight: 500 !important;
}

.episode-title a,
.post-title a,
h2.title a,
h3.title a,
.entry-title a {
  color: #c8d8e8 !important;
  text-decoration: none !important;
}

.episode-title a:hover,
.post-title a:hover,
h2.title a:hover {
  color: #00e5ff !important;
}

/* Episode date / meta */
.episode-date,
.post-date,
.entry-date,
time,
.episode-meta,
.post-meta,
.item-meta {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.7rem !important;
  color: #6a7f96 !important;
  letter-spacing: 0.08em !important;
}

/* Episode description */
.episode-desc,
.post-excerpt,
.entry-content p,
.item-desc {
  color: #6a7f96 !important;
  font-weight: 300 !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

/* Episode thumbnail */
.episode-thumb img,
.post-thumb img,
.item-image img {
  border: 1px solid #1a2533 !important;
  border-radius: 3px !important;
}

/* ══════════════════════════════════════════
   ACTION BUTTONS (Download, Share, Like)
══════════════════════════════════════════ */
.episode-actions a,
.post-actions a,
.action-links a,
.action-btn,
.btn-download,
.btn-share,
.download-btn,
.share-btn,
.like-btn {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6a7f96 !important;
  border: 1px solid #1a2533 !important;
  background: transparent !important;
  border-radius: 2px !important;
  padding: 4px 12px !important;
  transition: all 0.2s !important;
}

.episode-actions a:hover,
.post-actions a:hover,
.action-btn:hover,
.download-btn:hover,
.share-btn:hover {
  color: #00e5ff !important;
  border-color: #00e5ff !important;
  background: rgba(0,229,255,0.05) !important;
}

/* Download count / like count */
.download-count,
.like-count,
.ep-count {
  font-family: 'Share Tech Mono', monospace !important;
  color: #6a7f96 !important;
  font-size: 0.7rem !important;
}

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.pagination a,
.page-numbers a,
.pager a,
.load-more a {
  font-family: 'Share Tech Mono', monospace !important;
  background: transparent !important;
  color: #6a7f96 !important;
  border: 1px solid #1a2533 !important;
  border-radius: 2px !important;
  padding: 6px 14px !important;
  font-size: 0.72rem !important;
  transition: all 0.2s !important;
}

.pagination a:hover,
.pager a:hover,
.load-more a:hover {
  color: #00e5ff !important;
  border-color: #00e5ff !important;
  background: rgba(0,229,255,0.05) !important;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer,
.site-footer,
.footer,
#footer {
  background-color: #080c10 !important;
  border-top: 1px solid #1a2533 !important;
  color: #6a7f96 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.72rem !important;
}

footer a,
.site-footer a {
  color: #6a7f96 !important;
}

footer a:hover,
.site-footer a:hover {
  color: #00e5ff !important;
}

/* ══════════════════════════════════════════
   GENERAL TEXT / LINKS
══════════════════════════════════════════ */
p {
  color: #c8d8e8 !important;
  font-weight: 300 !important;
}

h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  color: #ffffff !important;
}

h3, h4 {
  font-family: 'DM Sans', sans-serif !important;
  color: #c8d8e8 !important;
}

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #080c10; }
::-webkit-scrollbar-thumb { background: #1a2533; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00e5ff; }

/* ══════════════════════════════════════════
   TEXT SELECTION
══════════════════════════════════════════ */
::selection {
  background: #00e5ff !important;
  color: #080c10 !important;
}

/* ══════════════════════════════════════════
   SUBTLE ANIMATIONS
══════════════════════════════════════════ */
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 30px rgba(0,229,255,0.3); }
  50%       { text-shadow: 0 0 60px rgba(0,229,255,0.6), 0 0 100px rgba(0,229,255,0.2); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.channel-title,
.podcast-title,
h1,
h1.title {
  animation: glow-pulse 4s ease-in-out infinite !important;
}

.episode-item:nth-child(1) { animation: fadeInUp 0.35s 0.05s both; }
.episode-item:nth-child(2) { animation: fadeInUp 0.35s 0.10s both; }
.episode-item:nth-child(3) { animation: fadeInUp 0.35s 0.15s both; }
.episode-item:nth-child(4) { animation: fadeInUp 0.35s 0.20s both; }
.episode-item:nth-child(5) { animation: fadeInUp 0.35s 0.25s both; }

/* ══════════════════════════════════════════
   END OF PEBCAK CUSTOM CSS v2
   Also do these in the Podbean Design panel:
   • Theme Mode → Dark
   • Player Color → #00e5ff
   • Upload a dark header banner image
══════════════════════════════════════════ */