/*
Theme Name: YSN Neo Broadcast
Theme URI: https://yoursportsnation.com
Author: Your Sports Nation
Description: Custom 2026 news/video theme for Your Sports Nation. Bento-grid magazine layout with light and dark modes, electric-blue accents, 3D hover effects, responsive video embeds, AdSense-ready ad slots, and WooCommerce support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ysn-neobroadcast
*/

/* ============ TOKENS ============ */
:root{
  --bg:#f4f5f2; --card:#ffffff; --ink:#101418; --mut:#5d6670;
  --line:#d7dade; --blue:#1d5eff; --blue-hot:#0042e0; --steel:#e8eaee;
  --shadow:#10141822; --hard:#101418;
}
html[data-theme="dark"]{
  --bg:#0a0c10; --card:#13161d; --ink:#f5f7fa; --mut:#8e97a6;
  --line:#262b35; --blue:#2f7bff; --blue-hot:#5ea0ff; --steel:#1b2029;
  --shadow:#00000088; --hard:#000000;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,'Segoe UI',system-ui,sans-serif;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.ysn-wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ============ TICKER ============ */
.ysn-ticker{background:var(--blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;overflow:hidden;white-space:nowrap}
.ysn-ticker .tk{display:inline-block;padding:8px 0;animation:ysn-tick 30s linear infinite}
@keyframes ysn-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ysn-ticker b{margin:0 28px;font-weight:500}
.ysn-ticker b::before{content:'●';margin-right:10px;font-size:8px;vertical-align:2px;color:#ffffffaa}

/* ============ HEADER ============ */
.ysn-header{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:3px solid var(--blue);position:sticky;top:0;z-index:500}
.admin-bar .ysn-header{top:32px}
.ysn-nav{display:flex;align-items:center;min-height:70px;gap:26px;flex-wrap:wrap}
.ysn-logo{font-size:26px;font-weight:900;letter-spacing:-1px;color:var(--ink)}
.ysn-logo em{font-style:normal;color:var(--blue)}
.ysn-logo img{max-height:46px;width:auto}
.ysn-menu{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.ysn-menu a{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;padding:6px 2px;border-bottom:3px solid transparent;color:var(--mut)}
.ysn-menu a:hover,.ysn-menu .current-menu-item a{border-color:var(--blue);color:var(--ink)}
.ysn-menu .sub-menu{display:none;position:absolute;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;list-style:none;z-index:600;box-shadow:0 12px 30px var(--shadow)}
.ysn-menu li{position:relative}
.ysn-menu li:hover>.sub-menu{display:block}
.ysn-menu .sub-menu a{display:block;padding:6px 4px;border:none;text-transform:none;letter-spacing:0}
.ysn-tools{margin-left:auto;display:flex;align-items:center;gap:12px}
.ysn-toggle{cursor:pointer;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:8px 14px;font-weight:800;font-size:13px;line-height:1;transition:border-color .2s}
.ysn-toggle:hover{border-color:var(--blue)}
.ysn-search-form{display:flex;gap:6px}
.ysn-search-form input{background:var(--card);border:2px solid var(--line);color:var(--ink);border-radius:99px;padding:8px 16px;font-size:13px;width:150px}
.ysn-search-form button{background:var(--blue);border:none;color:#fff;border-radius:99px;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer}

/* ============ CARDS / BENTO ============ */
.ysn-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:16px;padding:28px 0;perspective:1400px}
.ysn-card{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:22px;position:relative;overflow:hidden;display:block;
  box-shadow:6px 6px 0 var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s;transform-style:preserve-3d}
.ysn-card:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--shadow);border-color:var(--blue)}
.ysn-card .tag{font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--blue)}
.ysn-card h2{font-size:28px;font-weight:900;line-height:1.1;letter-spacing:-.5px;margin-top:8px}
.ysn-card h3{font-size:17px;font-weight:800;line-height:1.25;margin-top:6px}
.ysn-card p{font-size:13px;margin-top:8px;color:var(--mut)}
.ysn-card .go{position:absolute;right:16px;bottom:12px;font-size:22px;font-weight:900;color:var(--blue)}
.ysn-card.cover{grid-column:span 2;grid-row:span 2;background:linear-gradient(140deg,#1746a8,var(--blue) 70%,#5ea0ff);color:#fff;border-color:#0d2b6e;display:flex;flex-direction:column;justify-content:flex-end}
.ysn-card.cover .tag,.ysn-card.cover p{color:#cfe2ff}
.ysn-card.cover .go{color:#fff}
.ysn-card.cover .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.ysn-card.invert{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:6px 6px 0 var(--blue)}
.ysn-card.invert .tag{color:var(--blue-hot)}
.ysn-card.invert p{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.ysn-card.steel{background:var(--steel)}
.ysn-thumb{height:130px;border-radius:12px;background:var(--steel) center/cover no-repeat;margin-bottom:14px}

/* ============ SECTION STRIPS ============ */
.ysn-strip{display:flex;align-items:center;gap:12px;margin:26px 0 6px}
.ysn-strip h2{font-size:26px;font-weight:900;letter-spacing:-.5px}
.ysn-strip .bar{flex:1;height:3px;background:linear-gradient(90deg,var(--blue),transparent)}
.ysn-strip a{font-weight:800;font-size:13px;color:var(--blue)}
.ysn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 0}
.ysn-grid .ysn-card{grid-row:auto}

/* ============ VIDEO ============ */
.ysn-vid .vthumb{aspect-ratio:16/9;border-radius:12px;margin-bottom:12px;background:linear-gradient(135deg,#0d1320,#1746a8) center/cover no-repeat;display:grid;place-items:center;position:relative}
.ysn-vid .vthumb::after{content:'▶';font-size:38px;color:#fff;text-shadow:0 2px 18px #000}
.entry-content iframe,.entry-content embed,.entry-content object,.entry-content video,
.wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:14px;border:2px solid var(--line)}
.wp-block-embed{margin:1.6em 0}

/* ============ SINGLE / PAGE ============ */
.ysn-article{max-width:760px;margin:0 auto;padding:42px 24px}
.ysn-article .cat a{font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--blue)}
.ysn-article h1.entry-title{font-size:40px;font-weight:900;line-height:1.1;letter-spacing:-1px;margin:12px 0 14px}
.ysn-article .meta{font-size:13.5px;color:var(--mut);margin-bottom:24px;display:flex;gap:14px;flex-wrap:wrap}
.ysn-article .feat img{border-radius:16px;border:2px solid var(--line);margin-bottom:26px}
.entry-content{font-size:17.5px;line-height:1.75}
.entry-content>*+*{margin-top:1.15em}
.entry-content h2{font-size:27px;font-weight:900;letter-spacing:-.4px;margin-top:1.5em}
.entry-content h3{font-size:21px;font-weight:800;margin-top:1.4em}
.entry-content a{color:var(--blue);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--blue) 40%,transparent);text-underline-offset:3px}
.entry-content blockquote{border-left:4px solid var(--blue);padding:6px 0 6px 20px;color:var(--mut);font-style:italic}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content img{border-radius:12px}
.entry-content pre{background:var(--steel);padding:16px;border-radius:10px;overflow:auto;font-size:14px}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content td,.entry-content th{border:1px solid var(--line);padding:8px 10px}
.ysn-tags{margin-top:30px;display:flex;gap:8px;flex-wrap:wrap}
.ysn-tags a{font-size:12px;font-weight:700;border:1.5px solid var(--line);border-radius:99px;padding:5px 13px;color:var(--mut)}
.ysn-tags a:hover{border-color:var(--blue);color:var(--blue)}
.ysn-related{border-top:1px solid var(--line);margin-top:40px;padding-top:10px}

/* ============ ADS ============ */
.ysn-ad{margin:28px auto;text-align:center;color:var(--mut)}
.ysn-ad .ad-label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;color:var(--mut)}
.ysn-ad-placeholder{border:2px dashed var(--line);border-radius:14px;padding:22px;font-size:11px;letter-spacing:2px;text-transform:uppercase;background:var(--card)}

/* ============ ARCHIVE HEADER / PAGINATION ============ */
.ysn-archive-head{padding:34px 0 0}
.ysn-archive-head h1{font-size:34px;font-weight:900;letter-spacing:-.5px}
.ysn-archive-head p{color:var(--mut);margin-top:6px}
.ysn-pagination{display:flex;gap:8px;justify-content:center;padding:26px 0}
.ysn-pagination .page-numbers{border:2px solid var(--line);border-radius:10px;padding:8px 14px;font-weight:800;font-size:14px}
.ysn-pagination .page-numbers.current,.ysn-pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}

/* ============ FOOTER ============ */
.ysn-footer{background:var(--hard);color:#8e97a6;margin-top:48px;padding:42px 0;font-size:14px;border-top:3px solid var(--blue)}
.ysn-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.ysn-footer h4{color:#fff;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.ysn-footer a{display:block;padding:3px 0;color:#8e97a6}
.ysn-footer a:hover{color:#5ea0ff}
.ysn-footer ul{list-style:none}
.ysn-footer .flogo{font-size:22px;font-weight:900;color:#fff;margin-bottom:8px}
.ysn-footer .flogo em{font-style:normal;color:#5ea0ff}
.ysn-copy{border-top:1px solid #ffffff1a;margin-top:30px;padding-top:18px;font-size:12.5px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ============ WOOCOMMERCE BASICS ============ */
.woocommerce .ysn-article{max-width:1100px}
.woocommerce button.button,.woocommerce a.button{background:var(--blue)!important;color:#fff!important;border-radius:99px!important}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .ysn-bento{grid-template-columns:1fr 1fr}
  .ysn-card.cover{grid-column:span 2}
  .ysn-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .ysn-bento,.ysn-grid,.ysn-footer-grid{grid-template-columns:1fr}
  .ysn-card.cover{grid-column:span 1}
  .ysn-card h2{font-size:22px}
  .ysn-article h1.entry-title{font-size:28px}
  .ysn-nav{padding:10px 0}
  .ysn-search-form input{width:110px}
}
@media (prefers-reduced-motion: reduce){
  .ysn-ticker .tk{animation:none}
  .ysn-card,.ysn-card:hover{transition:none;transform:none}
}