/* Winamp core (Option B rev) */
/* Typography + colors */
:root{
    --wa-bg:#0b0b0b; --wa-fg:#eaeaea; --wa-ink:#d7d7d7;
    --wa-glass:#111; --wa-border:#1e1e1e;
    --wa-dial:#2b2b2b; --wa-led:#28f; --wa-led-off:#0a2540;
    --wa-accent:#ffd400; --wa-muted:#8b8b8b;
}

html,body{
    background:#0b0b0b;
    color:var(--wa-fg);
    margin:0;
    -webkit-font-smoothing:antialiased;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
    line-height:1.45;
    font-size:16px;
}
a{color:#b7d6ff;text-decoration:none}
a:hover{text-decoration:underline}

/* Header chrome (sticky top bar) */
.winamp-chrome{
    background:var(--wa-glass);
    border-bottom:1px solid var(--wa-border);
    position:sticky; top:0; z-index:1000;
}
.winamp-bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:8px 16px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .home-url{color:var(--wa-ink); text-decoration:none; letter-spacing:.02em}
.brand small{color:var(--wa-muted)}
.dial{
    width:12px;height:12px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#5a5a5a,#1f1f1f 60%);
    border:1px solid #000; box-shadow:inset 0 0 2px rgba(255,255,255,.15),0 0 0 1px rgba(0,0,0,.6);
}
.promo{display:flex;align-items:center;gap:8px}
.led{
    width:10px;height:10px;border-radius:2px;
    background:linear-gradient(180deg,var(--wa-led),#0c49ad);
    box-shadow:0 0 8px rgba(0,136,255,.65);
}
.promo .label{font-size:12px;color:#cfe2ff;letter-spacing:.08em}

/* MENU button — kept visible on desktop too */
.menu-btn{
    display:inline-block;
    border:1px solid #2a2a2a; background:#181818; color:#eaeaea;
    padding:6px 12px; border-radius:8px; cursor:pointer;
    font-weight:600; letter-spacing:.04em;
}
.menu-btn:focus{outline:2px solid #2e82ff; outline-offset:2px}

/* Pop nav (mobile closed by default; JS toggles .open) */
.winamp-chrome .nav-pop {display:none; background:#0f0f0f; border-top:1px solid var(--wa-border); }
.winamp-chrome .nav-pop.open {display:block; }
.menu-items{list-style:none; margin:0; padding:6px 10px; display:flex; flex-direction:column; gap:2px}
.menu-items>li>a{
    display:block; padding:10px 12px; border-radius:6px; color:#eaeaea
}
.menu-items>li.current-menu-item>a,
.menu-items>li>a:hover{background:#151515}

/* Desktop: show menu horizontally, keep button visible */
@media (min-width:900px){
    .menu-items{flex-direction:row; gap:6px; padding:8px 16px; }
    .menu-items>li>a{padding:8px 10px;}
    /* keep button; just tone it down a bit on wide screens */
    .menu-btn{padding:5px 10px; border-radius:6px;}
}

/* Shell + panels */
.winamp-shell{max-width:1200px; margin:0 auto; padding:16px}
.panel{
    background:#0f0f0f; border:1px solid var(--wa-border);
    border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.35); overflow:hidden
}
.content-window{border-bottom:1px solid var(--wa-border)}
.window-title{padding:10px 14px; background:#121212; border-bottom:1px solid #202020}
.window-title h2{margin:0; font-size:14px; letter-spacing:.04em; color:#dcdcdc}
.window-body{padding:14px}

/* Divider */
.hr-line{height:1px; background:linear-gradient(90deg,transparent,#2a2a2a,transparent)}

/* VJ listing */
.vj-section .vj-header{padding:10px 14px}
.vj-section .vj-header h3{margin:0; font-size:15px}
.vj-vjs-grid{display:grid; gap:16px}
@media (min-width:700px){.vj-vjs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.vj-vjs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vj-vj-card{border:1px solid var(--wa-border); border-radius:10px; background:#111; overflow:hidden}
.vj-vj-card img{width:100%; height:auto; display:block}
.vj-vj-card h3{margin:0 0 8px}
.vj-vj-card a{color:#d9e7ff}

/* Footer (legacy Winamp footer style — not used by your theme) */
.winamp-footer{
    margin-top:24px; border-top:1px solid var(--wa-border); background:#0f0f0f
}
.winamp-footer-bar{
    max-width:1200px; margin:0 auto; padding:12px 16px; color:#a6a6a6; font-size:12px
}

/* ===========================================================
   NEW: REAL FOOTER RULES FOR YOUR THEME (site-footer-winamp)
   Makes entire footer one line: copyright + links
   =========================================================== */

.site-footer-winamp .footer-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.vj-footer-links {
    list-style: none;
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.vj-footer-links li { display: inline-block; }
.vj-footer-links a { text-decoration: none; white-space: nowrap; }