/*
Theme Name: StreetsideCollage Mobile
Theme URI: https://www.streetsidecollage.com
Author: Alex
Description: Mobile-first sports content theme for StreetsideCollage — dark navy/cyan design system with music, videos, and events content types. World Cup 2026 ready.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: streetside-collage
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --bg:#0a0e1a;
  --bg-2:#0d1424;
  --card:#111a2e;
  --border:#1e2a42;
  --text:#f2f5fa;
  --text-2:#b7c2d6;
  --text-3:#7c8aa3;
  --brand:#00d4ff;
  --brand-2:#ff3b3b;
  --brand-soft:rgba(0,212,255,.12);
  --success:#2ee6a6;
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --max-w:520px;
  --topbar-h:56px;
  --bottomnav-h:64px;
  --font-display:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="light"]{
  --bg:#f5f7fb;
  --bg-2:#ffffff;
  --card:#ffffff;
  --border:#e3e8f2;
  --text:#0d1424;
  --text-2:#3d4a63;
  --text-3:#7c8aa3;
  --brand-soft:rgba(0,150,190,.10);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--bottomnav-h);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
input{font-family:inherit;}
ul{list-style:none;}
::selection{background:var(--brand);color:#00131a;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

.ssc-wrap{max-width:var(--max-w);margin:0 auto;position:relative;min-height:100vh;background:var(--bg);}

/* ==========================================================================
   3. TOP BAR
   ========================================================================== */
.ssc-topbar{
  position:sticky;top:0;z-index:40;
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  background:rgba(10,14,26,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
[data-theme="light"] .ssc-topbar{background:rgba(245,247,251,.86);}
.ssc-topbar-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-s);color:var(--text-2);}
.ssc-topbar-btn:active{background:var(--brand-soft);}
.ssc-logo{font-weight:800;font-size:17px;letter-spacing:-.02em;}
.ssc-logo span{color:var(--brand);}
.ssc-topbar-actions{display:flex;gap:2px;}

/* ==========================================================================
   4. CATEGORY CHIPS
   ========================================================================== */
.ssc-chips{
  position:sticky;top:var(--topbar-h);z-index:30;
  display:flex;gap:8px;overflow-x:auto;padding:10px 14px;
  background:var(--bg);border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.ssc-chips::-webkit-scrollbar{display:none;}
.ssc-chip{
  flex:0 0 auto;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--text-2);
  background:var(--card);border:1px solid var(--border);
  white-space:nowrap;
}
.ssc-chip.is-active{background:var(--brand);color:#00131a;border-color:var(--brand);}

/* ==========================================================================
   5. HERO CARD
   ========================================================================== */
.ssc-section{padding:18px 14px 6px;}
.ssc-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.ssc-section-title{font-size:15px;font-weight:800;letter-spacing:-.01em;}
.ssc-section-link{font-size:12px;font-weight:600;color:var(--brand);}

.ssc-hero{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  aspect-ratio:16/11;background:var(--card);box-shadow:var(--shadow);
}
.ssc-hero img{width:100%;height:100%;object-fit:cover;}
.ssc-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(4,7,14,.92) 100%);
}
.ssc-hero-body{position:absolute;left:0;right:0;bottom:0;padding:16px;z-index:2;}
.ssc-hero-tag{
  display:inline-block;background:var(--brand-2);color:#fff;font-size:11px;
  font-weight:700;padding:3px 8px;border-radius:5px;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.04em;
}
.ssc-hero-title{color:#fff;font-size:19px;font-weight:800;line-height:1.25;margin-bottom:6px;}
.ssc-hero-meta{color:rgba(255,255,255,.75);font-size:12px;}

/* ==========================================================================
   6. RAIL (horizontal carousel)
   ========================================================================== */
.ssc-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.ssc-rail::-webkit-scrollbar{display:none;}
.ssc-rail-card{flex:0 0 220px;}
.ssc-rail-thumb{width:220px;height:124px;border-radius:var(--radius-m);overflow:hidden;background:var(--card);position:relative;}
.ssc-rail-thumb img{width:100%;height:100%;object-fit:cover;}
.ssc-rail-cat{position:absolute;top:8px;left:8px;background:rgba(4,7,14,.7);color:var(--brand);font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;text-transform:uppercase;}
.ssc-rail-title{font-size:13.5px;font-weight:700;margin-top:8px;line-height:1.35;}
.ssc-rail-meta{font-size:11.5px;color:var(--text-3);margin-top:3px;}

/* ==========================================================================
   7. LIST ROWS
   ========================================================================== */
.ssc-list{display:flex;flex-direction:column;}
.ssc-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.ssc-row-thumb{width:88px;height:64px;flex:0 0 88px;border-radius:var(--radius-s);overflow:hidden;background:var(--card);}
.ssc-row-thumb img{width:100%;height:100%;object-fit:cover;}
.ssc-row-body{flex:1;min-width:0;}
.ssc-row-cat{font-size:10.5px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.03em;}
.ssc-row-title{font-size:14px;font-weight:700;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ssc-row-meta{font-size:11.5px;color:var(--text-3);margin-top:5px;}

/* ==========================================================================
   8. TRACK ROWS (music)
   ========================================================================== */
.ssc-track{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.ssc-track-index{width:20px;font-size:13px;color:var(--text-3);font-weight:700;text-align:center;}
.ssc-track-art{width:48px;height:48px;border-radius:var(--radius-s);overflow:hidden;background:var(--card);flex:0 0 48px;}
.ssc-track-art img{width:100%;height:100%;object-fit:cover;}
.ssc-track-body{flex:1;min-width:0;}
.ssc-track-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssc-track-artist{font-size:12px;color:var(--text-3);margin-top:2px;}
.ssc-track-dur{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.ssc-play-btn{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 34px;}

/* ==========================================================================
   9. VIDEO GRID
   ========================================================================== */
.ssc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ssc-grid-tile{border-radius:var(--radius-m);overflow:hidden;background:var(--card);}
.ssc-grid-thumb{position:relative;aspect-ratio:1/1;}
.ssc-grid-thumb img{width:100%;height:100%;object-fit:cover;}
.ssc-grid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.ssc-grid-play span{width:38px;height:38px;border-radius:50%;background:rgba(4,7,14,.55);display:flex;align-items:center;justify-content:center;color:#fff;}
.ssc-grid-dur{position:absolute;bottom:6px;right:6px;background:rgba(4,7,14,.75);color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;}
.ssc-grid-title{font-size:12.5px;font-weight:700;padding:8px 8px 10px;line-height:1.3;}

/* ==========================================================================
   10. EVENT CARDS
   ========================================================================== */
.ssc-event{display:flex;gap:12px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-m);margin-bottom:10px;}
.ssc-event-date{flex:0 0 52px;text-align:center;background:var(--brand-soft);border-radius:var(--radius-s);padding:8px 4px;}
.ssc-event-day{font-size:18px;font-weight:800;color:var(--brand);line-height:1;}
.ssc-event-mon{font-size:10px;font-weight:700;color:var(--brand);text-transform:uppercase;margin-top:2px;}
.ssc-event-body{flex:1;min-width:0;}
.ssc-event-title{font-size:14px;font-weight:700;line-height:1.3;}
.ssc-event-loc{font-size:12px;color:var(--text-3);margin-top:4px;}
.ssc-event-cta{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#00131a;background:var(--brand);padding:6px 12px;border-radius:999px;}

/* ==========================================================================
   11. BOTTOM NAVIGATION
   ========================================================================== */
.ssc-bottomnav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:var(--max-w);height:var(--bottomnav-h);
  display:flex;background:rgba(10,14,26,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);z-index:50;
}
[data-theme="light"] .ssc-bottomnav{background:rgba(255,255,255,.92);}
.ssc-navitem{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-3);font-size:10.5px;font-weight:600;}
.ssc-navitem.is-active{color:var(--brand);}

/* ==========================================================================
   12. DRAWER / SEARCH SHEET / MODALS
   ========================================================================== */
.ssc-overlay{position:fixed;inset:0;background:rgba(4,7,14,.6);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s;}
.ssc-overlay.is-open{opacity:1;pointer-events:auto;}

.ssc-drawer{position:fixed;top:0;left:0;bottom:0;width:78%;max-width:320px;background:var(--bg-2);z-index:70;transform:translateX(-100%);transition:transform .28s ease;padding:18px;overflow-y:auto;}
.ssc-drawer.is-open{transform:translateX(0);}
.ssc-drawer-item{display:block;padding:12px 8px;font-size:14.5px;font-weight:600;border-bottom:1px solid var(--border);}

.ssc-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);width:100%;max-width:var(--max-w);max-height:80vh;background:var(--bg-2);border-radius:20px 20px 0 0;z-index:70;transition:transform .28s ease;padding:18px;overflow-y:auto;}
.ssc-sheet.is-open{transform:translate(-50%,0);}
.ssc-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:99px;margin:0 auto 14px;}
.ssc-search-input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-s);padding:11px 14px;font-size:14px;color:var(--text);}
.ssc-search-input::placeholder{color:var(--text-3);}

/* ==========================================================================
   13. FORMS / NEWSLETTER / FOOTER
   ========================================================================== */
.ssc-newsletter{margin:18px 14px;padding:18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-l);}
.ssc-newsletter-title{font-size:15px;font-weight:800;margin-bottom:4px;}
.ssc-newsletter-sub{font-size:12.5px;color:var(--text-3);margin-bottom:12px;}
.ssc-newsletter-row{display:flex;gap:8px;}
.ssc-newsletter-row input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-s);padding:10px 12px;color:var(--text);font-size:13px;}
.ssc-newsletter-row button{background:var(--brand);color:#00131a;font-weight:700;font-size:13px;padding:0 16px;border-radius:var(--radius-s);}

.ssc-footer{padding:24px 14px 30px;border-top:1px solid var(--border);margin-top:10px;}
.ssc-footer-logo{font-weight:800;font-size:15px;margin-bottom:8px;}
.ssc-footer-social{display:flex;gap:10px;margin:12px 0;}
.ssc-footer-social a{width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-2);}
.ssc-footer-links{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:12px;color:var(--text-3);margin-bottom:10px;}
.ssc-footer-copy{font-size:11.5px;color:var(--text-3);}

.ssc-widgets{padding:18px 14px 0;}
.ssc-widget{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-l);padding:18px;margin-bottom:14px;}
.ssc-widget ul{list-style:none;}
.ssc-widget li{padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-2);}
.ssc-widget li:last-child{border-bottom:none;}
.ssc-widget a{color:var(--text-2);}
.ssc-widget a:hover{color:var(--brand);}
.ssc-widget img{border-radius:var(--radius-s);max-width:100%;}
.ssc-widget p{font-size:13.5px;color:var(--text-2);margin-bottom:10px;}
.ssc-widget p:last-child{margin-bottom:0;}

/* ==========================================================================
   14. SINGLE POST / PAGE
   ========================================================================== */
.ssc-article{padding:16px 14px 30px;}
.ssc-article-cat{font-size:11.5px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.03em;}
.ssc-article-title{font-size:22px;font-weight:800;line-height:1.3;margin:8px 0 10px;}
.ssc-article-meta{font-size:12.5px;color:var(--text-3);margin-bottom:14px;}
.ssc-share-btn{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);color:var(--text-2);font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px;margin-bottom:16px;}
.ssc-share-btn:active{background:var(--brand-soft);color:var(--brand);}
.ssc-article-cover{border-radius:var(--radius-m);overflow:hidden;margin-bottom:16px;aspect-ratio:16/10;background:var(--card);}
.ssc-article-cover img{width:100%;height:100%;object-fit:cover;}
.ssc-article-body{font-size:15.5px;line-height:1.75;color:var(--text-2);}
.ssc-article-body p{margin-bottom:16px;}
.ssc-article-body h2{font-size:19px;font-weight:800;color:var(--text);margin:22px 0 10px;}
.ssc-article-body h3{font-size:16.5px;font-weight:700;color:var(--text);margin:18px 0 8px;}
.ssc-article-body img{border-radius:var(--radius-m);margin:14px 0;}
.ssc-article-body blockquote{border-left:3px solid var(--brand);padding-left:14px;color:var(--text-2);font-style:italic;margin:16px 0;}
.ssc-article-body a{color:var(--brand);text-decoration:underline;}

/* ==========================================================================
   15. SEARCH / 404 / SKELETONS
   ========================================================================== */
.ssc-empty{padding:60px 20px;text-align:center;}
.ssc-empty-title{font-size:17px;font-weight:800;margin-bottom:6px;}
.ssc-empty-sub{font-size:13.5px;color:var(--text-3);margin-bottom:18px;}
.ssc-empty-btn{display:inline-block;background:var(--brand);color:#00131a;font-weight:700;font-size:13.5px;padding:10px 20px;border-radius:999px;}

.ssc-skel{background:linear-gradient(90deg,var(--card) 25%,var(--border) 50%,var(--card) 75%);background-size:200% 100%;animation:ssc-shimmer 1.4s infinite;border-radius:var(--radius-s);}
@keyframes ssc-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */
.ssc-hide{display:none!important;}
.ssc-scroll-top{position:fixed;right:14px;bottom:calc(var(--bottomnav-h) + 14px);width:40px;height:40px;border-radius:50%;background:var(--brand);color:#00131a;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:45;opacity:0;pointer-events:none;transition:opacity .2s;}
.ssc-scroll-top.is-visible{opacity:1;pointer-events:auto;}

@media (min-width:521px){
  body{background:var(--bg-2);}
  .ssc-wrap{box-shadow:var(--shadow);}
}

/* ==========================================================================
   17. RESPONSIVE — TABLET & DESKTOP
   Mobile (below 768px) is completely unchanged. These widen the layout
   in steps instead of just centering the same 520px column, so the app
   actually uses the extra space on tablets, laptops, and desktops.
   ========================================================================== */
@media (min-width:768px){
  :root{ --max-w:700px; }
  .ssc-grid{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:1024px){
  :root{ --max-w:980px; }
  .ssc-grid{grid-template-columns:repeat(4,1fr);}
  .ssc-hero{aspect-ratio:21/9;}
  .ssc-hero-slider .ssc-hero{aspect-ratio:21/9;}
  .ssc-article{max-width:680px;margin-left:auto;margin-right:auto;}
  .ssc-newsletter{max-width:680px;margin-left:auto;margin-right:auto;}
}