/*
Theme Name: ToolkitMadness
Author: Bill Decker
Description: A modern, tech-forward single-file-install theme — featuring a Google Drive resource dashboard, an embedded Lessons From The Road video, a Lemonade Radio episode player, and social/contact links.
Version: 1.3.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: toolkitmadness
*/

/* -----------------------------------------
   0. Variables — Modern Tech Palette
----------------------------------------- */
:root{
  --bg: #0a0e17;
  --bg-alt: #0f1524;
  --panel: #131a2b;
  --panel-border: #232c42;
  --text: #e7ecf7;
  --text-dim: #9aa5bd;
  --accent: #00d4ff;
  --accent-2: #7c5cff;
  --accent-grad: linear-gradient(135deg, #00d4ff 0%, #7c5cff 100%);
  --success: #2dd4a7;
  --radius: 16px;
  --maxw: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -----------------------------------------
   1. Reset & Base
----------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 15% -10%, #101a33 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.screen-reader-text{ position:absolute !important; left:-9999px; }

/* -----------------------------------------
   2. Header / Top Nav
----------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(10,14,23,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; gap:24px; flex-wrap:wrap;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding .logo-mark{
  width:38px; height:38px; border-radius:10px;
  background: var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#04101c; font-size:18px;
}
.site-title{ font-size:19px; font-weight:700; color:var(--text); margin:0; letter-spacing:-0.01em; }
.site-title a{ color:inherit; text-decoration:none; }
.site-tagline{ font-size:12px; color:var(--text-dim); margin:0; }

.primary-nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.primary-nav a{ color: var(--text-dim); font-weight:500; font-size:14px; }
.primary-nav a:hover{ color: var(--text); text-decoration:none; }

.topbar-actions{ display:flex; align-items:center; gap:10px; }
.social-menu{ list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.social-menu a{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--panel); border:1px solid var(--panel-border);
  color: var(--text-dim); transition: all .15s ease;
}
.social-menu a:hover{ color:#04101c; background: var(--accent-grad); border-color:transparent; text-decoration:none; transform: translateY(-2px); }
.social-menu svg{ width:18px; height:18px; fill:currentColor; }

.contact-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  background: var(--accent-grad); color:#04101c !important;
  font-weight:700; font-size:14px; white-space:nowrap;
}
.contact-btn:hover{ text-decoration:none; opacity:.9; }
.contact-btn svg{ width:16px; height:16px; fill:currentColor; }

.menu-toggle{ display:none; }

@media (max-width: 880px){
  .primary-nav{ order:3; width:100%; }
  .primary-nav ul{ flex-wrap:wrap; gap:14px; }
}

/* -----------------------------------------
   3. Hero
----------------------------------------- */
.hero{ padding: 72px 0 48px; }
.hero .container{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width: 760px;
}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--accent);
  background: rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.3);
  padding:6px 12px; border-radius:999px; margin-bottom:18px;
}
.hero h1{
  font-size: clamp(32px, 4vw, 48px); line-height:1.1; margin: 0 0 12px;
  font-weight:800; letter-spacing:-0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #b9c6e6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .site-caption{
  font-size:16px; font-weight:600; color: var(--accent-2);
  letter-spacing:.01em; margin:0 0 18px;
}
.hero p.lead{ font-size:17px; color: var(--text-dim); max-width:56ch; margin:0 auto 28px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:12px; font-weight:700; font-size:14px;
  border:1px solid var(--panel-border);
}
.btn-primary{ background: var(--accent-grad); color:#04101c; border-color:transparent; }
.btn-primary:hover{ text-decoration:none; opacity:.92; }
.btn-secondary{ color: var(--text); background: var(--panel); }
.btn-secondary:hover{ text-decoration:none; border-color: var(--accent); }

/* -----------------------------------------
   4. Section shell
----------------------------------------- */
.section{ padding: 56px 0; border-top:1px solid var(--panel-border); }
.section-head{ margin-bottom:28px; max-width:70ch; }
.section-kicker{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent-2);
}
.section h2{ font-size: clamp(24px,3vw,32px); margin:8px 0 10px; letter-spacing:-0.01em; }
.section .desc{ color: var(--text-dim); font-size:15px; }

.content-with-sidebar{
  display:grid; grid-template-columns: 1fr 320px; gap:40px; align-items:start;
}
@media (max-width: 900px){
  .content-with-sidebar{ grid-template-columns: 1fr; }
}

/* -----------------------------------------
   5. Video section
----------------------------------------- */
.video-wrap{ max-width:640px; margin:0 auto; }
.video-frame{
  position:relative; width:100%; padding-top:56.25%;
  border-radius: var(--radius); overflow:hidden;
  background:var(--panel); border:1px solid var(--panel-border);
  box-shadow: 0 20px 60px -20px rgba(0,212,255,0.15);
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* -----------------------------------------
   6. Dashboard (Google Drive)
----------------------------------------- */
.dashboard-panel{
  background: var(--panel); border:1px solid var(--panel-border);
  border-radius: var(--radius); overflow:hidden;
}
.dashboard-panel .drive-embed{ width:100%; height:520px; border:0; background:#fff; }
.dashboard-footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:16px 20px; border-top:1px solid var(--panel-border);
}
.dashboard-footer .hint{ font-size:13px; color: var(--text-dim); }
.dashboard-footer a{ font-weight:700; font-size:14px; }

/* -----------------------------------------
   7. Sidebar / Player
----------------------------------------- */
.widget-area{ display:flex; flex-direction:column; gap:24px; }
.widget{
  background: var(--panel); border:1px solid var(--panel-border);
  border-radius: var(--radius); padding:20px;
}
.widget h3{
  margin:0 0 4px; font-size:15px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--accent);
}
.widget .widget-sub{ color: var(--text-dim); font-size:13px; margin:0 0 14px; }
.podcast-player iframe{
  width:100%; height:175px; border:0; border-radius:12px; overflow:hidden;
}
.podcast-player .player-links{ margin-top:12px; display:flex; gap:14px; font-size:13px; }
.social-widget-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.social-widget-list a{ display:flex; align-items:center; gap:10px; color: var(--text); font-size:14px; }
.social-widget-list svg{ width:18px; height:18px; fill: var(--accent); flex-shrink:0; }

/* -----------------------------------------
   8. Episodes page
----------------------------------------- */
.episode-list{ display:flex; flex-direction:column; gap:16px; }
.episode-card{
  background: var(--panel); border:1px solid var(--panel-border);
  border-radius: 14px; padding:20px 22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.episode-card .ep-num{
  font-size:12px; font-weight:800; color:#04101c; background: var(--accent-grad);
  padding:3px 10px; border-radius:999px; display:inline-block; margin-bottom:10px;
}
.episode-card h3{ margin:0 0 6px; font-size:17px; }
.episode-meta{ font-size:12px; color: var(--text-dim); margin-bottom:8px; }
.episode-desc{ color: var(--text-dim); font-size:14px; max-width:60ch; }
.episode-links{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; justify-content:center; font-size:13px; font-weight:700; }

/* -----------------------------------------
   9. Footer
----------------------------------------- */
.site-footer{ border-top:1px solid var(--panel-border); padding:36px 0; margin-top:24px; }
.site-footer .container{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.site-footer p{ color: var(--text-dim); font-size:13px; margin:0; }
.footer-social{ list-style:none; display:flex; gap:10px; margin:0; padding:0; }
.footer-social a{
  width:32px; height:32px; border-radius:8px; background: var(--panel);
  border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center;
  color: var(--text-dim);
}
.footer-social svg{ width:15px; height:15px; fill:currentColor; }