/*
Theme Name: Best of YouTube
Theme URI: https://example.com/best-of-youtube
Author: ChatGPT for David
Author URI: https://example.com
Description: A fast, clean WordPress theme for curating and synthesizing the best YouTube videos. Includes a custom Video post type, playlist-style archives, SEO-friendly markup, and an email capture section.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: best-of-youtube
*/
:root{
  --bg:#0b0c10;
  --card:#111217;
  --muted:#b2b7c3;
  --text:#e6e8ee;
  --brand:#ff0033;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--text);
  background:linear-gradient(180deg,#0a0b0f 0%, #0f111a 100%);
  line-height:1.6;
}
a{color:var(--text); text-decoration:none}
a.button, .button{
  display:inline-block; padding:12px 18px; border-radius:999px; background:var(--brand); color:#fff; font-weight:600;
}
a.button:hover{opacity:.9}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid #1f2230}
.card .pad{padding:16px}
.header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(15,17,26,.7); border-bottom:1px solid #1f2230
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.logo-badge{width:34px; height:34px; border-radius:8px; background:var(--brand); display:grid; place-items:center; color:#fff; font-weight:900}
.nav a{margin-left:16px; opacity:.9}
.hero{padding:72px 0 36px}
.hero h1{font-size:clamp(28px,5vw,48px); margin:0 0 8px}
.hero p{color:var(--muted); margin:0 0 18px}
.section{padding:36px 0}
.section h2{font-size:clamp(22px,4vw,32px); margin:0 0 12px}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; color:#fff; background:#222634; border:1px solid #2a2e42; font-size:12px}
.footer{padding:36px 0; color:var(--muted); border-top:1px solid #1f2230; margin-top:48px}
.input, input[type="email"]{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #2a2e42; background:#0f111a; color:var(--text);
}
form.inline{display:flex; gap:10px; flex-wrap:wrap}
figure.thumb{aspect-ratio:16/9; background:#0e0f14; margin:0}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.video-embed{position:relative; padding-top:56.25%}
.video-embed iframe, .video-embed .placeholder{
  position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; overflow:hidden
}
.meta{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px}
.tag{padding:4px 8px; border:1px solid #2a2e42; border-radius:8px}
.pagination{display:flex; gap:8px; justify-content:center; margin:24px 0}
.pagination a, .pagination span{padding:8px 12px; background:#171a25; border-radius:8px; border:1px solid #2a2e42}
.searchbar{display:flex; gap:10px; margin:8px 0 18px}
.searchbar input{flex:1}
.hide{display:none}
@media (max-width:640px){
  .nav{display:none}
}