/* ============================================ BandaWeb3 - Minimal Professional Theme Light/Dark Mode Support ============================================ *//* ===== CSS Variables - Dark Mode (Default) ===== */:root{/* Core Colors - Minimal Black */ --bg-primary:#0a0a0a;--bg-secondary:#141414;--bg-tertiary:#1a1a1a;--bg-card:#111111;/* Text Colors */ --text-primary:#fafafa;--text-secondary:#a1a1a1;--text-muted:#8b8b8b;/* Accent - Emerald */ --accent:#10b981;--accent-hover:#059669;--accent-light:#34d399;/* Borders */ --border:#262626;--border-hover:#404040;/* Shadows */ --shadow-sm:0 1px 2px rgba(0, 0, 0, 0.5);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.5);--shadow-lg:0 8px 24px rgba(0, 0, 0, 0.6);/* Navbar specific */ --navbar-bg:rgba(10, 10, 10, 0.95);/* Transitions */ --transition-fast:150ms ease;--transition-base:200ms ease;/* Sizing */ --container-max:1200px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px}/* ===== CSS Variables - Light Mode ===== */[data-theme="light"]{/* Core Colors - Clean White */ --bg-primary:#ffffff;--bg-secondary:#f5f5f5;--bg-tertiary:#e5e5e5;--bg-card:#fafafa;/* Text Colors */ --text-primary:#171717;--text-secondary:#525252;--text-muted:#737373;/* Accent - Emerald (slightly darker for light bg) */ --accent:#059669;--accent-hover:#047857;--accent-light:#10b981;/* Borders */ --border:#e5e5e5;--border-hover:#d4d4d4;/* Shadows */ --shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.08);--shadow-lg:0 8px 24px rgba(0, 0, 0, 0.12);/* Navbar specific */ --navbar-bg:rgba(255, 255, 255, 0.95)}/* ===== Reset & Base ===== */*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-light)}/* ===== Focus Visible (Accessibility) ===== */:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}/* Screen reader only helper */.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}img{max-width:100%;height:auto;display:block}/* ===== Container ===== */.container{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem}/* ===== Navbar ===== */.navbar{background-color:var(--navbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;padding:0.25rem 0}.navbar .container{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center}.logo img{height:40px;width:auto}.logo-text{font-size:1.5rem;font-weight:700;color:var(--text-primary)}/* Hamburger Menu - visible by default (mobile-first) */.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:none;cursor:pointer;padding:4px;z-index:110}.hamburger span{display:block;width:24px;height:2px;background-color:var(--text-primary);transition:transform var(--transition-base), opacity var(--transition-base)}.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px, -5px)}/* Nav Links - mobile-first (off-canvas menu) */.nav-links{position:fixed;top:0;right:-100%;width:280px;height:100vh;background-color:var(--bg-secondary);display:flex;flex-direction:column;padding:5rem 1.5rem 2rem;gap:0.25rem;transition:right var(--transition-base);border-left:1px solid var(--border);z-index:100}.nav-links.active{right:0}.nav-links a{color:var(--text-secondary);padding:0.875rem 1rem;border-radius:var(--radius-sm);font-size:1rem;font-weight:500;transition:all var(--transition-fast)}.nav-links a:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.nav-links a.active{color:var(--accent);background-color:rgba(16, 185, 129, 0.1)}/* ===== Hero Section ===== */.hero{background-color:var(--bg-primary);padding:2rem 0 1.5rem;text-align:center;border-bottom:1px solid var(--border)}.hero-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem;letter-spacing:-0.02em}.hero-subtitle{font-size:1rem;color:var(--text-secondary);margin-bottom:0.75rem}/* ===== Search ===== */.search-container{position:relative;max-width:400px;margin:1.5rem auto 0}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted);pointer-events:none}.search-input{width:100%;padding:0.75rem 1rem 0.75rem 2.75rem;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.9375rem;outline:none;transition:border-color var(--transition-fast)}.search-input:focus{border-color:var(--accent)}.search-input::placeholder{color:var(--text-muted)}/* ===== Controls ===== */.controls{display:flex;flex-direction:column;align-items:stretch;margin-bottom:1.5rem;gap:0.75rem}.sort-select{padding:0.5rem 2rem 0.5rem 0.875rem;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:0.875rem;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center}.sort-select:focus{border-color:var(--accent)}.results-count{color:var(--text-muted);font-size:0.875rem}/* ===== Episodes Grid ===== */.episodes-list{padding:2rem 0}.episodes-grid{display:grid;grid-template-columns:1fr;gap:1rem}/* ===== Episode Card ===== */.episode-card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition-base), border-color var(--transition-base)}.episode-card:hover{transform:translateY(-2px);border-color:var(--border-hover)}.card-link{display:block;text-decoration:none;color:inherit}.card-image{position:relative;aspect-ratio:1;overflow:hidden;background-color:var(--bg-tertiary)}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-base)}.episode-card:hover .card-image img{transform:scale(1.03)}.card-overlay{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-base)}.episode-card:hover .card-overlay{opacity:1}.play-icon{width:48px;height:48px;color:white}.placeholder-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary)}.episode-number-large{font-size:2.5rem;font-weight:700;color:var(--text-muted)}.card-content{padding:1rem}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}.episode-number{font-size:0.75rem;font-weight:600;color:var(--accent)}.episode-date{font-size:0.75rem;color:var(--text-muted)}.card-title{font-size:0.9375rem;font-weight:600;color:var(--text-primary);line-height:1.4;margin-bottom:0.625rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-topics{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.5rem}.topic-tag-small{font-size:0.6875rem;padding:0.25rem 0.5rem;background-color:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-sm)}.card-meta{display:flex;gap:0.75rem;font-size:0.75rem;color:var(--text-muted)}.meta-item{display:flex;align-items:center;gap:0.25rem}/* ===== No Results ===== */.no-results{text-align:center;padding:4rem 2rem;color:var(--text-muted)}.no-results.hidden{display:none}.no-results h3{margin-bottom:0.5rem;color:var(--text-secondary)}/* ===== Buttons ===== */.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.625rem 1.25rem;font-size:0.875rem;font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;border:none}.btn-primary{background-color:var(--accent);color:#000}.btn-primary:hover{background-color:var(--accent-hover);color:#000}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background-color:var(--bg-secondary);border-color:var(--border-hover);color:var(--text-primary)}.button{display:inline-block;padding:0.5rem 1rem;background-color:var(--bg-tertiary);color:var(--text-primary) !important;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.875rem;font-weight:500;text-decoration:none;transition:all var(--transition-fast)}.button:hover{background-color:var(--accent);border-color:var(--accent);color:#000 !important}/* ===== Episode Detail Page ===== */.episode-detail{padding:2rem 0}.episode-full{max-width:900px;margin:0 auto}/* ===== Episode Page (Individual) - Mobile First ===== */.episode-page{padding:1.5rem 0 2rem}.episode-badge{display:inline-block;font-size:0.875rem;font-weight:600;color:var(--accent);margin-bottom:0.75rem}.episode-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);line-height:1.3;margin-bottom:1rem}/* Content Grid - single column, centered */.content-grid{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.flyer-container{width:100%;max-width:400px;margin:0 auto}.flyer-container img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}.audio-player-container{text-align:center}.audio-player-container h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:0.75rem}.audio-player{width:100%;max-width:400px}/* Episode Sections */.episode-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}.episode-section:last-of-type{border-bottom:none}.episode-section h2{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}.episode-description p{color:var(--text-secondary);line-height:1.7}/* Speakers & Guests Lists */.speakers-list,.guests-list{list-style:none;display:flex;flex-wrap:wrap;gap:0.75rem}.speaker-item,.guest-item{display:inline-flex;align-items:center;padding:0.5rem 1rem;background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:0.875rem}.speaker-item a,.guest-item a{color:var(--accent)}/* Topics Tags */.topics-tags{display:flex;flex-wrap:wrap;gap:0.5rem}.topic-tag{display:inline-block;padding:0.375rem 0.75rem;background-color:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:0.8125rem}/* Episode Navigation */.episode-nav{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;margin-top:1rem;border-top:1px solid var(--border);gap:1rem}.episode-nav a{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1rem;background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);font-size:0.875rem;transition:all var(--transition-fast)}.episode-nav a:hover{background-color:var(--bg-secondary);border-color:var(--border-hover);color:var(--text-primary)}/* Icon small for meta items */.icon-small{width:16px;height:16px;flex-shrink:0}.episode-header{margin-bottom:2rem}.episode-title-large{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem;line-height:1.3}.episode-number-large{display:inline-block;font-size:0.875rem;color:var(--accent);font-weight:600;margin-bottom:1rem}.episode-meta{display:flex;flex-wrap:wrap;gap:1rem;color:var(--text-secondary);font-size:0.9375rem}.episode-meta span{display:inline-flex;align-items:center;gap:0.375rem}.episode-meta a{color:var(--text-secondary)}.episode-meta a:hover{color:var(--accent)}/* Status Badge */.status-badge{display:inline-block;padding:0.25rem 0.625rem;background-color:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:0.8125rem;font-weight:500}.status-badge.cohosted{background-color:rgba(16, 185, 129, 0.15);color:var(--accent)}/* Episode Content Grid */.episode-content{display:grid;gap:2rem}.episode-flyer{width:100%;border-radius:var(--radius-lg);border:1px solid var(--border)}/* Sections */.description h3,.topics h3,.speakers h3,.links h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:0.75rem}.description p{color:var(--text-secondary);line-height:1.7}.topics .card-topics{gap:0.5rem}.topics .topic-tag-small{font-size:0.8125rem;padding:0.375rem 0.75rem}/* Links Section */.links{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.5rem}/* ===== Back to Top ===== */.back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:50}.back-to-top svg{width:20px;height:20px;color:var(--text-secondary)}.back-to-top:hover{background-color:var(--accent);border-color:var(--accent)}.back-to-top:hover svg{color:#000}.back-to-top.visible{opacity:1;visibility:visible}/* ===== Footer ===== */.footer{background-color:var(--bg-secondary);border-top:1px solid var(--border);padding:2rem 0;margin-top:3rem}.footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.footer p{color:var(--text-muted);font-size:0.875rem}.footer-links{display:flex;gap:1.5rem}.footer-links a{color:var(--text-muted);font-size:0.875rem}.footer-links a:hover{color:var(--accent)}/* ===== Spoken Table ===== */.spoken-table-container{overflow-x:auto}.spoken-table{width:100%;border-collapse:collapse;font-size:0.875rem}.spoken-table th,.spoken-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}.spoken-table th{font-weight:600;color:var(--text-secondary);background-color:var(--bg-secondary);cursor:pointer}.spoken-table th:hover{color:var(--text-primary)}.spoken-table tbody tr:hover{background-color:var(--bg-secondary)}.spoken-table td{color:var(--text-secondary)}.spoken-table a{color:var(--accent)}/* ===== Responsive (Mobile-First) ===== *//* Tablet (480px+) - 2 columns */@media (min-width:480px){.episodes-grid{grid-template-columns:repeat(2, 1fr)}}/* Tablet Large (768px+) - 3 columns, inline nav */@media (min-width:768px){.hamburger{display:none}.nav-links{position:static;width:auto;height:auto;background-color:transparent;flex-direction:row;padding:0;gap:0.25rem;border-left:none}.nav-links a{padding:0.5rem 0.875rem;font-size:0.875rem}.episodes-grid{grid-template-columns:repeat(3, 1fr);gap:1.25rem}/* Episode page tablet+ */ .episode-title{font-size:2rem}.episode-section h2{font-size:1.25rem}.hero{padding:3rem 0 2rem}.hero-title{font-size:2.5rem}.controls{flex-direction:row;align-items:center}}/* Desktop (1024px+) - 4 columns */@media (min-width:1024px){.episodes-grid{grid-template-columns:repeat(4, 1fr)}}/* ===== Episode Detail Layout (simple_build.py) ===== */.episode-detail-grid{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}.episode-detail-grid .flyer-column{width:100%}.episode-detail-grid .flyer-column img{width:100%;max-width:400px;margin:0 auto;border-radius:var(--radius-lg)}.episode-detail-grid .info-column{width:100%}@media (min-width:768px){.episode-detail-grid{display:grid;grid-template-columns:minmax(280px, 400px) 1fr;gap:2rem}.episode-detail-grid .flyer-column img{margin:0}}.transcript-links{margin-top:0.5rem}.participant-history{margin-top:2rem}.participant-history h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:0.75rem}.participant-history img{width:100%;border-radius:var(--radius-lg)}/* ===== Episode Navigation (responsive) ===== */.episode-detail-nav{display:flex;flex-direction:column;gap:1rem;align-items:center;margin-top:3rem;padding:1.5rem 0;border-top:1px solid var(--border)}@media (min-width:480px){.episode-detail-nav{flex-direction:row;justify-content:space-between}}/* ===== Spoken Page Filters (responsive) ===== */.spoken-filters{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.25rem}.spoken-filters > div{display:flex;flex-direction:column;gap:0.5rem}.spoken-filters label{font-weight:600;color:var(--text-secondary);font-size:0.875rem}.spoken-filters select{padding:0.5rem 0.75rem;border-radius:var(--radius-sm);border:1px solid var(--border);background-color:var(--bg-secondary);color:var(--text-primary);font-size:0.875rem}@media (min-width:480px){.spoken-filters{flex-direction:row;flex-wrap:wrap;gap:1.25rem}.spoken-filters > div{flex-direction:row;align-items:center;gap:0.625rem}}/* ===== Audio Player ===== */audio{width:100%;border-radius:var(--radius-md);background-color:var(--bg-tertiary)}audio::-webkit-media-controls-panel{background-color:var(--bg-tertiary)}/* ===== Theme Toggle ===== */.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;color:var(--text-secondary);transition:all var(--transition-fast);flex-shrink:0}.theme-toggle:hover{background-color:var(--bg-tertiary);border-color:var(--border-hover);color:var(--text-primary)}.theme-toggle svg{width:20px;height:20px}/* Sun icon (visible in dark mode) */.theme-toggle .icon-sun{display:block}.theme-toggle .icon-moon{display:none}/* Moon icon (visible in light mode) */[data-theme="light"] .theme-toggle .icon-sun{display:none}[data-theme="light"] .theme-toggle .icon-moon{display:block}/* Smooth theme transition */body,.navbar,.episode-card,.btn,.button,input,select{transition:background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base)}/* Nav controls wrapper */.nav-controls{display:flex;align-items:center;gap:0.75rem}@media (min-width:768px){.nav-controls{gap:1rem}}/* ===== Logo Theme Switching ===== */.logo-dark{display:block}.logo-light{display:none}[data-theme="light"] .logo-dark{display:none}[data-theme="light"] .logo-light{display:block}