/*
 Theme Name: The 4th Man Podcast
 Theme URI: 4thmanpodcast.com
 Author: socialmedia@4thmanpodcast.com
 Description: css
 Version: 1.3.3
 License: 
 Text Domain: 
*/
:root{ --c-bg:#0b0b0b; --c-text:#f2e9de; --c-accent:#f39a1e; --c-cream:#fff6ea }
html,body{ margin:0; padding:0; background:var(--c-bg); color:var(--c-text); font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif; line-height:1.6 }
a{ color:var(--c-accent); text-decoration:none } a:hover{text-decoration:underline}
.container{ width:min(1100px,92vw); margin:0 auto }
.site-header{ position:sticky; top:0; z-index:10; background:rgba(11,11,11,.9); border-bottom:1px solid #222; backdrop-filter:saturate(140%) blur(6px) }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800 } .brand img{height:40px;width:auto}
.menu a{ margin:0 10px; font-weight:600 }
.hero{ position:relative; padding:80px 0 40px; background: radial-gradient(800px 400px at 50% 0, rgba(243,154,30,.22), transparent 60%), linear-gradient(180deg,#161616,#0b0b0b 60%) }
.hero::after{ content:""; position:absolute; inset:-20% -5% auto -5%; height:140%; background:url('<?php echo get_template_directory_uri(); ?>/assets/img/flames.svg') center/cover no-repeat; opacity:.06; pointer-events:none }
.hero-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center }
.badge{ display:inline-block; padding:6px 10px; background:#151515; border:1px solid #2a2a2a; color:#ccc; border-radius:999px; font-size:12px; letter-spacing:.6px }
.hero h1{ font-size:clamp(32px,6vw,54px); margin:10px 0 6px; line-height:1.1 }
.tagline{ font-size:clamp(16px,2.6vw,22px); color:var(--c-cream); opacity:.9; margin-bottom:14px }
.verse{ font-style:italic; color:#e6dccf; opacity:.85; margin:.25rem 0 1rem }
.player{ background:#121212; border:1px solid #2a2a2a; border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:12px }
.player audio{ width:100% }
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.btn{ background:var(--c-accent); color:#1b1207; padding:10px 14px; border-radius:10px; font-weight:800; border:none; cursor:pointer }
.btn.secondary{ background:#171717; color:#e8e1d6; border:1px solid #2b2b2b }
.section{ padding:48px 0; background:linear-gradient(180deg,#0b0b0b,#0e0e0e) }
.section.alt{ background:#0d0d0d }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.card{ background:#121212; border:1px solid #232323; border-radius:16px; overflow:hidden }
.card .pad{ padding:14px } .card h3{ margin:6px 0 } .meta{ color:#cdbba4; font-size:12px; opacity:.8 }
footer{ background:#0a0a0a; border-top:1px solid #222; padding:28px 0 40px }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.subscribe a{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; background:#121212; border:1px solid #2a2a2a; border-radius:12px; margin:6px 8px 0 0 }
.small{ font-size:12px; opacity:.75 }