/*
Theme Name: 1 Talk Show
Description: Unified stylesheet for the 1 Talk Show WordPress theme — covers Home, Episodes, and Ask a Question templates. All three pages share this one file so a single color/type change updates the whole site.
Author: Host4Asia
*/

/* ============ 1. TOKENS (colors, fonts) ============ */
:root{
  --bg:#F5F8FB; --card:#FFFFFF; --ink:#1E2430; --line:rgba(20,30,45,0.10);
  --navy:#0B5690; --health:#0F66C4; --legal:#D9971C; --finance:#0E9457; --social:#8034AA;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#12161D; --card:#1B212B; --ink:#EAEDF2; --line:rgba(234,237,242,0.12); }
}
:root[data-theme="dark"]{ --bg:#12161D; --card:#1B212B; --ink:#EAEDF2; --line:rgba(234,237,242,0.12); }

/* ============ 2. BASE / RESET ============ */
*{box-sizing:border-box;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Work Sans',system-ui,sans-serif; line-height:1.55;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:500; margin:0;}
a{color:inherit;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

/* ============ 3. HEADER / NAV (all pages) ============ */
header{position:sticky; top:0; top:env(safe-area-inset-top,0px); background:var(--bg); border-bottom:1px solid var(--line); z-index:10;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.nav img{height:38px; display:block;}
.nav-links{display:flex; gap:26px; font-size:0.95rem;}
.nav-links a{text-decoration:none; opacity:0.8;}
.nav-links a:hover{opacity:1;}

/* ============ 4. BUTTONS (all pages) ============ */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:4px; text-decoration:none; font-size:0.95rem; font-weight:600;}
.btn-yt{background:#CC1F1F; color:#fff;}
.btn-ghost{border:1px solid var(--line); color:var(--ink);}

/* ============ 5. FOOTER (all pages) ============ */
footer{padding:34px 24px; font-size:0.88rem; opacity:0.75;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ============ 6. KICKER / DOT (shared small elements) ============ */
.kicker{color:var(--finance); font-size:0.95rem; margin-bottom:14px;}
.dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}

/* ============ 7. HOME — HERO ============ */
.hero{padding:56px 24px; border-bottom:1px solid var(--line);}
.hero .wrap{display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center;}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr;} .hero{padding-top:32px;}}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.12; max-width:15ch;}
.hero p{max-width:50ch; font-size:1.05rem; opacity:0.85; margin-top:18px;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.portrait{border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.portrait img{width:100%; display:block;}

/* ============ 8. HOME — TOPICS STRIP ============ */
.topics{padding:36px 24px; border-bottom:1px solid var(--line); overflow-x:auto;}
.topics-row{display:flex; gap:36px; min-width:max-content;}
.topic{display:flex; align-items:center; gap:10px; font-size:0.98rem; font-weight:500;}

/* ============ 9. EPISODE CARDS (used on Home shelf AND Episodes page grid) ============ */
.episodes{padding:52px 24px;}
.episodes h2{font-size:1.8rem;}
.episodes .sub{opacity:0.75; margin:8px 0 26px;}
.shelf{display:flex; gap:20px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch;}
.ep-card{background:var(--card); border:1px solid var(--line); border-radius:5px; padding:20px;}
.ep-card{min-width:260px; max-width:260px; flex-shrink:0;} /* shelf-specific sizing; .grid below overrides */
.ep-tag{font-size:0.8rem; display:flex; align-items:center; gap:7px; margin-bottom:12px; font-weight:600;}
.ep-card h3{font-size:1.1rem; line-height:1.32; margin-bottom:10px;}
.ep-card p{font-size:0.88rem; opacity:0.7; margin:0 0 14px;}
.watch{font-size:0.88rem; text-decoration:none; font-weight:600;}

/* ============ 10. HOME — SUBSCRIBE PANEL ============ */
.subscribe-panel{margin:0 24px 52px; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:32px;
                  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.subscribe-panel h3{font-size:1.3rem; max-width:24ch;}

/* ============ 11. HOME — HOST BIO / QUOTE SECTION ============ */
.host-section{padding:56px 24px; border-top:1px solid var(--line);}
.host-section .wrap{display:grid; grid-template-columns:0.7fr 1.3fr; gap:40px; align-items:start;}
@media (max-width:720px){.host-section .wrap{grid-template-columns:1fr;}}
.host-portrait{border-radius:6px; overflow:hidden; border:1px solid var(--line); max-width:220px;}
.host-portrait img{width:100%; display:block;}
.host-heading{font-size:1.6rem; max-width:22ch;}
.host-intro{margin-top:14px; max-width:56ch; opacity:0.85;}
.host-quote{margin:20px 0 0; max-width:56ch; font-family:'Fraunces',Georgia,serif; font-size:1.15rem; line-height:1.75;
            border-left:3px solid var(--finance); padding-left:20px; font-style:normal;}
.host-credit{margin-top:14px; opacity:0.6; font-size:0.9rem;}

/* ============ 12. HOME — MISSION BAND ============ */
.mission{padding:56px 24px; background:var(--navy); color:#F5F8FB;}
.mission .wrap{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
@media (max-width:720px){.mission .wrap{grid-template-columns:1fr;}}
.mission h2{font-size:1.6rem; max-width:16ch;}
.mission p{opacity:0.85; margin-top:14px; max-width:44ch;}

/* ============ 13. EPISODES PAGE ============ */
.page-hero{padding:48px 24px 12px;}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.6rem); max-width:18ch;}
.page-hero p{max-width:60ch; opacity:0.8; margin-top:14px;}
.niche-block{padding:32px 24px; border-top:1px solid var(--line);}
.niche-head{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.niche-head h2{font-size:1.3rem;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px;}
.grid .ep-card{min-width:0; max-width:none;} /* override shelf sizing inside the grid layout */

/* ============ 14. ASK A QUESTION PAGE ============ */
.ask-panel{margin:32px 24px 56px; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:32px; max-width:640px;}
.ask-panel label{display:block; font-size:0.9rem; font-weight:600; margin:16px 0 6px;}
.ask-panel input, .ask-panel select, .ask-panel textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:4px;
  background:transparent; color:var(--ink); font-family:inherit; font-size:0.95rem;
}
.ask-panel textarea{min-height:100px; resize:vertical;}
.note{font-size:0.85rem; opacity:0.65; margin-top:10px;}

.screen-reader-response, .hidden-fields-container {display: none;}