/*
Theme Name: Stream or Screen
Theme URI: https://streamorscreen.com
Author: Brittany
Description: A playful weekly what-to-watch guide theme. Pastel homepage with featured shows, picks, and premieres, plus a clean day-by-day weekly planner for listings. Add shows from the admin and the site builds itself.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: streamorscreen
*/

:root{
  --bg:#F4F8F4; --panel:#FFFFFF; --hero:#E4F3E8;
  --ink:#22322A; --body:#4C5F53; --muted:#7E9186;
  --green:#27995F; --green-deep:#0F7A48; --green-soft:#E1F4E8;
  --teal:#14A38C;
  --mint:#D4F2E4; --mint-deep:#0E6B44;
  --line:#DCE6DE;
  --amber-tint:#FFF3D6; --amber-deep:#9A6B10;
  --blue-tint:#E3F0FD; --blue-deep:#1B5FA8;
  --red-tint:#FCEBEB; --red-deep:#B03030;
  --pink-tint:#FDE4F1; --pink-deep:#D2418E;
  --purple-tint:#EFEAFD; --purple-deep:#5B48C7;
  --peach-tint:#FFEDE0; --peach-deep:#D2621E;
  --shadow:0 10px 28px rgba(30,120,80,.10);
  --radius:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none !important;} }
body{
  font-family:'Nunito', ui-rounded, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--bg); color:var(--body); line-height:1.55; font-size:16px;
}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit;}
button{font:inherit; cursor:pointer; border:none; background:none;}
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:8px;}
.wrap{max-width:1140px; margin:0 auto; padding:0 20px;}
.hidden{display:none !important;}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* ---------- Header ---------- */
.site-header{background:var(--panel); box-shadow:0 1px 0 rgba(30,120,80,.10); position:sticky; top:0; z-index:30;}
.head-row{display:flex; align-items:center; gap:24px; padding:14px 0;}
.logo{display:flex; align-items:center; gap:9px; font-size:22px; font-weight:800; letter-spacing:-.01em;}
.logo .mark{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#2FB56E,#14A38C); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.logo .word{background:linear-gradient(90deg,#1E9E58 0%,#14A38C 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.logo .word .light{font-weight:800;}
.main-nav ul{display:flex; gap:22px; list-style:none; font-size:15px; font-weight:700; color:var(--muted);}
.main-nav a{color:var(--muted);}
.main-nav .current-menu-item a, .main-nav .current_page_item a, .main-nav a.active{color:var(--green-deep); border-bottom:3px solid var(--green); padding-bottom:4px;}
.main-nav a:hover{color:var(--green-deep);}
.head-spacer{flex:1;}
.head-search{display:flex; align-items:center; gap:8px; background:var(--bg); border-radius:999px; padding:7px 14px;}
.head-search input{border:none; background:none; font:inherit; font-size:14px; color:var(--body); width:130px;}
.head-search input:focus{outline:none;}
.head-search button{color:var(--muted); display:flex;}
.menu-btn{display:none; color:var(--body); padding:6px;}
.nav-drop{display:none;}
.nav-drop.open{display:block; background:var(--panel); padding:6px 20px 14px; box-shadow:0 12px 20px rgba(30,120,80,.12);}
.nav-drop ul{list-style:none;}
.nav-drop a{display:block; padding:9px 4px; font-weight:800; color:var(--body);}

/* ---------- Date pills ---------- */
.date-row{display:flex; align-items:center; gap:10px; padding:20px 0 6px;}
.arrow-btn{width:38px; height:38px; border-radius:50%; background:var(--panel); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:var(--body); flex-shrink:0;}
.date-pills{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:6px 2px; flex:1;}
.date-pills::-webkit-scrollbar{display:none;}
.date-pill{flex-shrink:0; text-align:center; background:var(--panel); border-radius:14px; padding:10px 18px; box-shadow:var(--shadow); font-weight:700;}
.date-pill .d{display:block; font-size:14px; color:var(--ink);}
.date-pill .m{display:block; font-size:12px; color:var(--muted); font-weight:600;}
.date-pill.active{background:var(--green);}
.date-pill.active .d{color:#fff;}
.date-pill.active .m{color:#CDEEDB;}

/* ---------- Hero ---------- */
.hero{background:var(--hero); border-radius:24px; padding:30px 28px; margin-top:16px; display:grid; grid-template-columns:1fr 1.15fr; gap:26px; align-items:center; position:relative; overflow:hidden;}
.spark{position:absolute; color:#8FCEA8; opacity:.85;}
.eyebrow{display:inline-block; background:var(--panel); color:var(--green-deep); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:999px; box-shadow:var(--shadow);}
.hero h1{font-size:clamp(30px,4vw,44px); font-weight:800; color:var(--ink); line-height:1.12; margin-top:14px; letter-spacing:-.02em;}
.hero h1 .grad{background:linear-gradient(90deg,#1E9E58,#14A38C); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{font-size:16px; margin-top:12px; max-width:40ch;}
.filters{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.filter-pill{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:800; padding:10px 18px; border-radius:999px; background:var(--panel); color:var(--body); box-shadow:var(--shadow);}
.filter-pill[aria-pressed="true"][data-mode="streaming"]{background:var(--green); color:#fff;}
.filter-pill[aria-pressed="true"][data-mode="tv"]{background:var(--mint); color:var(--mint-deep);}
.filter-pill[aria-pressed="true"][data-mode="both"]{background:var(--ink); color:#fff;}
.featured{display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding:4px;}
.featured::-webkit-scrollbar{display:none;}
.feat-card{flex-shrink:0; width:186px; background:var(--panel); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; color:inherit; display:block;}
.feat-card .art{height:220px; position:relative; display:flex; align-items:center; justify-content:center; padding:14px; text-align:center; color:#fff; font-weight:800; font-size:17px; line-height:1.3; letter-spacing:.03em; background-size:cover; background-position:center;}
.feat-card .art.has-img{color:transparent;}
.feat-badge{position:absolute; left:10px; bottom:10px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; color:#fff; background:var(--green);}
.feat-badge.b-newep{background:#2A6AC8;} .feat-badge.b-finale{background:#C24040;} .feat-badge.b-movie{background:#D2871E;} .feat-badge.b-special{background:#7A5AC8;}
.feat-card .info{padding:10px 12px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.feat-card .when{font-size:12.5px; font-weight:800; color:var(--ink);}
.feat-card .genre{font-size:11.5px; color:var(--muted); font-weight:600;}
.svc{font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; white-space:nowrap; background:var(--green-soft); color:var(--green-deep);}

/* ---------- Home panels ---------- */
.panel{background:var(--panel); border-radius:20px; box-shadow:var(--shadow); padding:20px 22px; margin-top:22px;}
.panel-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.icon-chip{width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; align-self:center; flex-shrink:0;}
.panel-head h2{font-size:19px; font-weight:800; color:var(--ink);}
.panel-head .tag{font-size:13px; color:var(--muted); font-weight:600;}
.panel-head .view-all{margin-left:auto; font-size:13.5px; font-weight:800; color:var(--green-deep); white-space:nowrap;}
.card-row{display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding:4px 2px;}
.card-row::-webkit-scrollbar{display:none;}
.mini-card{flex-shrink:0; width:158px; color:inherit; display:block;}
.mini-card .art{height:110px; border-radius:14px; display:flex; align-items:flex-end; padding:10px; color:#fff; font-weight:800; font-size:14px; line-height:1.25; position:relative; background-size:cover; background-position:center;}
.mini-card .art.has-img{color:transparent;}
.mini-card .art .svc{position:absolute; right:8px; bottom:8px; background:#fff;}
.mini-card .when{font-size:12px; font-weight:800; color:var(--ink); margin-top:7px;}
.mini-card .genre{font-size:11.5px; color:var(--muted); font-weight:600;}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;}
.trio .panel{margin-top:0; padding:18px;}
.sq-row{display:flex; gap:10px;}
.sq-card{flex:1; min-width:0; color:inherit;}
.sq-card .art{aspect-ratio:1/1.05; border-radius:14px; display:flex; align-items:flex-end; padding:9px; color:#fff; font-weight:800; font-size:12.5px; line-height:1.25; background-size:cover; background-position:center;}
.sq-card .art.has-img{color:transparent;}
.sq-card .when{font-size:11px; font-weight:700; color:var(--muted); margin-top:5px;}
.empty-note{font-size:13.5px; color:var(--muted); font-weight:600; padding:6px 2px;}

/* ---------- Planner (weekly listings) ---------- */
.page-title{font-size:24px; font-weight:800; color:var(--ink); padding:24px 0 4px;}
.week-bar{display:flex; align-items:center; gap:16px; padding:14px 0 4px;}
.week-bar .label{font-size:15px; font-weight:800; color:var(--ink);}
.chips{display:flex; gap:8px; overflow-x:auto; padding:12px 0 4px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0; font-size:14px; font-weight:700; padding:7px 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--body);}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff;}
.day-section{padding:18px 0 4px;}
.day-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;}
.day-head h2{font-size:18px; font-weight:800; color:var(--ink);}
.day-head h2 span{font-weight:600; color:var(--muted); font-size:15px;}
.show-grid{display:grid; grid-template-columns:1fr; gap:12px;}
.show-card{display:flex; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; color:inherit;}
.show-card .poster{width:58px; min-height:80px; border-radius:10px; flex-shrink:0; display:flex; align-items:flex-end; padding:7px; color:#fff; font-size:11.5px; font-weight:800; line-height:1.25; background-size:cover; background-position:center;}
.show-card .poster.has-img{color:transparent;}
.badge{display:inline-block; font-size:12px; font-weight:800; padding:3px 9px; border-radius:6px;}
.b-premiere{background:var(--green-soft); color:var(--green-deep);}
.b-newep{background:var(--blue-tint); color:var(--blue-deep);}
.b-finale{background:var(--red-tint); color:var(--red-deep);}
.b-movie{background:var(--amber-tint); color:var(--amber-deep);}
.b-special{background:var(--purple-tint); color:var(--purple-deep);}
.show-card h3{font-size:16.5px; font-weight:800; color:var(--ink); margin-top:6px;}
.show-card .meta{font-size:13.5px; color:var(--muted); margin-top:2px; font-weight:600;}
.remind{display:inline-flex; align-items:center; gap:5px; color:var(--green-deep); font-size:13.5px; font-weight:800; margin-top:8px; padding:0;}
.remind.set{color:var(--mint-deep);}

/* ---------- Single show ---------- */
.single-card{background:var(--panel); border-radius:20px; box-shadow:var(--shadow); padding:24px; margin-top:24px; display:flex; gap:22px;}
.single-card .poster{width:180px; aspect-ratio:3/4; border-radius:16px; flex-shrink:0; display:flex; align-items:flex-end; padding:12px; color:#fff; font-weight:800; background-size:cover; background-position:center;}
.single-card .poster.has-img{color:transparent;}
.single-card h1{font-size:28px; font-weight:800; color:var(--ink); margin-top:8px;}
.single-card .meta{font-size:15px; color:var(--muted); font-weight:700; margin-top:4px;}
.single-body{margin-top:16px; font-size:15.5px;}
.single-body p{margin-bottom:12px;}

/* ---------- Generic content ---------- */
.content-panel{background:var(--panel); border-radius:20px; box-shadow:var(--shadow); padding:26px; margin-top:24px;}
.content-panel h1{font-size:26px; font-weight:800; color:var(--ink); margin-bottom:12px;}
.content-panel h2{font-size:20px; font-weight:800; color:var(--ink); margin:18px 0 8px;}
.content-panel p{margin-bottom:12px;}
.content-panel ul, .content-panel ol{margin:0 0 12px 22px;}
.post-list{display:grid; gap:14px; margin-top:20px;}
.post-list .item{background:var(--panel); border-radius:16px; box-shadow:var(--shadow); padding:18px 20px;}
.post-list .item h2{font-size:18px; font-weight:800; color:var(--ink);}
.post-list .item .meta{font-size:13px; color:var(--muted); font-weight:600; margin-top:2px;}

/* ---------- Footer & bottom nav ---------- */
.site-footer{padding:30px 0 100px; text-align:center; font-size:13px; color:var(--muted); font-weight:600;}
.site-footer a{color:var(--green-deep); font-weight:800;}
.bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; background:var(--panel); box-shadow:0 -4px 20px rgba(30,120,80,.12); padding:9px 0 max(10px, env(safe-area-inset-bottom));}
.bottom-nav a{flex:1; text-align:center; font-size:11px; font-weight:700; color:var(--muted);}
.bottom-nav svg{margin:0 auto 2px;}
.bottom-nav a.active{color:var(--green);}

/* ---------- Responsive ---------- */
@media (min-width:861px){
  .bottom-nav{display:none;}
  .site-footer{padding-bottom:34px;}
  .show-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:860px){
  .main-nav, .head-search{display:none;}
  .menu-btn{display:block;}
  .hero{grid-template-columns:1fr; padding:24px 18px;}
  .trio{grid-template-columns:1fr;}
  .single-card{flex-direction:column;}
  .single-card .poster{width:150px;}
}