/*
Theme Name: Telephonecat
Theme URI: https://reversephonepranks.com
Author: Reverse Phone Pranks
Description: Custom single-page theme for the Reverse Phone Pranks site — telemarketer prank calls, podcast episodes, and links.
Version: 1.0
Requires at least: 5.0
Requires PHP: 7.0
Text Domain: telephonecat
*/

:root{
  --bg:#0b0b10;
  --panel:#15151d;
  --panel2:#1c1c26;
  --text:#f2f1f6;
  --muted:#a4a2b3;
  --line:#2a2a36;
  --orange:#ff6b35;
  --orange-dim:#ff6b3522;
  --gold:#ffcf4d;
  --gold-dim:#ffcf4d22;
  --purple:#b48cff;
  --purple-dim:#b48cff22;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,16,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-0.02em;}
.brand svg{width:34px; height:34px;}
.navlinks{display:flex; gap:26px; font-size:0.92rem; font-weight:600; color:var(--muted);}
.navlinks a:hover{color:var(--orange);}
.navcta{display:flex; gap:10px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px; font-weight:700; font-size:0.88rem;
  border:1px solid var(--line); white-space:nowrap;
}
.btn-primary{background:var(--orange); color:#1a0a02; border-color:var(--orange);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent; color:var(--text);}
.btn-ghost:hover{border-color:var(--muted);}
.btn-gold{background:var(--gold); color:#241a00;}
.btn-purple{background:var(--purple); color:#1c0f33;}
.btn-blue{background:#0052ff; color:#fff;}
.side-card .full-btn + .full-btn{margin-top:10px;}
@media (max-width:820px){ .navlinks{display:none;} }

/* Hero */
.hero{
  padding:72px 0 56px;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, var(--orange-dim), transparent 60%);
}
.hero-art{width:220px; margin:0 auto 18px;}
.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.05;
  margin-bottom:16px;
}
.hero h1 span{color:var(--orange);}
.hero p{
  max-width:640px; margin:0 auto 30px;
  color:var(--muted); font-size:1.08rem;
}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* Layout: main + sidebar */
.layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:40px;
  padding:56px 0 80px;
  align-items:start;
}
@media (max-width:900px){ .layout{grid-template-columns:1fr;} }

section.block{margin-bottom:64px;}
.eyebrow{
  color:var(--orange); font-weight:800; font-size:0.8rem;
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:8px;
}
h2{font-size:1.8rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px;}
.section-sub{color:var(--muted); margin-bottom:28px; max-width:640px;}

/* Listen embed */
.listen-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; display:flex; align-items:center; gap:18px;
}
.listen-card .art{
  width:64px; height:64px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,var(--orange),#ff3d81);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
.listen-card .meta{flex:1;}
.listen-card .meta strong{display:block; font-size:1rem;}
.listen-card .meta span{color:var(--muted); font-size:0.9rem;}

/* Episodes */
.ep-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
.ep-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px; transition:border-color .15s, transform .15s;
}
.ep-card:hover{border-color:var(--orange); transform:translateY(-2px);}
.ep-top{display:flex; gap:12px; align-items:flex-start; margin-bottom:10px;}
.ep-thumb{
  width:52px; height:52px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--panel2),#000);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.ep-card h3{font-size:0.98rem; font-weight:700; line-height:1.3;}
.ep-date{color:var(--muted); font-size:0.78rem; margin-top:4px;}
.ep-desc{color:var(--muted); font-size:0.9rem;}
.ep-play{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  color:var(--orange); font-weight:700; font-size:0.85rem;
}

/* About */
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start;}
@media (max-width:700px){ .about-grid{grid-template-columns:1fr;} }
.stats{display:flex; gap:20px; margin:20px 0; flex-wrap:wrap;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; text-align:center; flex:1; min-width:110px;}
.stat b{display:block; font-size:1.35rem; color:var(--orange);}
.stat span{color:var(--muted); font-size:0.78rem;}
.why-list{list-style:none; display:flex; flex-direction:column; gap:12px;}
.why-list li{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; font-size:0.92rem; display:flex; gap:10px; align-items:flex-start;
}
.why-list li::before{content:"📞"; flex-shrink:0;}

/* Subscribe/Follow */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:700px){ .two-col{grid-template-columns:1fr;} }
.promo-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px;
}
.promo-card h3{font-size:1.1rem; margin-bottom:8px;}
.promo-card p{color:var(--muted); font-size:0.92rem; margin-bottom:16px;}

/* Sidebar */
.sidebar{position:sticky; top:90px; display:flex; flex-direction:column; gap:20px;}
.side-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px;
  position:relative; overflow:hidden;
}
.side-card .tag{
  display:inline-block; font-size:0.7rem; font-weight:800; letter-spacing:0.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:12px;
}
.tag-gold{background:var(--gold-dim); color:var(--gold);}
.tag-purple{background:var(--purple-dim); color:var(--purple);}
.album-cover{
  width:100%; aspect-ratio:1/1; border-radius:12px; margin-bottom:14px;
  background:radial-gradient(circle at 30% 20%, #ff9d5c, #ff3d81 55%, #5c1a8c 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.side-card h4{font-size:1.02rem; margin-bottom:6px;}
.side-card p{color:var(--muted); font-size:0.85rem; margin-bottom:14px;}
.coin-badge{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
}
.coin-badge .icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),#ff9a1f);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.coin-badge .ca{font-size:0.68rem; color:var(--muted); word-break:break-all; font-family:ui-monospace,monospace;}
.disclaimer{font-size:0.72rem; color:var(--muted); line-height:1.5; border-top:1px solid var(--line); padding-top:10px; margin-top:2px;}
.full-btn{display:block; text-align:center; width:100%;}

footer{
  border-top:1px solid var(--line); padding:36px 0; margin-top:20px;
}
.foot-wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.foot-links{display:flex; gap:20px; font-size:0.85rem; color:var(--muted); flex-wrap:wrap;}
.foot-links a:hover{color:var(--orange);}
.copyright{font-size:0.78rem; color:var(--muted); margin-top:18px;}