/*
Theme Name: Radiololbroek
Theme URI: https://radiololbroek.nl
Author: MJSweb.nl
Author URI: https://mjsweb.nl
Description: Radiostation-thema voor Radiololbroek.nl, gebaseerd op een donker rood/zwart ontwerp met blokindeling voor programma, verzoekplaat, jukebox, webchat en DJ-status. Volledig widget-gestuurd (linker- en rechterkolom) met een custom menu voor de hoofdnavigatie.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: radiololbroek
*/

/* =========================================================
   1. VARIABELEN / RESET
   ========================================================= */
:root{
    --rlb-black:#0b0b0b;
    --rlb-black-soft:#161616;
    --rlb-red:#c8102e;
    --rlb-red-dark:#7a0c1c;
    --rlb-red-darker:#4d0812;
    --rlb-silver:#e7e7e7;
    --rlb-white:#ffffff;
    --rlb-text:#2b2b2b;
    --rlb-panel-bg:#f4f4f4;
    --rlb-border:#d8d8d8;
    --rlb-max-width:1536px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
    margin:0;
    background:var(--rlb-black);
    background-image:
        radial-gradient(circle at 50% 0%, rgba(200,16,46,.18), transparent 60%),
        repeating-linear-gradient(0deg, #0e0e0e 0 2px, #111 2px 4px);
    color:var(--rlb-text);
    font-family:"Arial Narrow", Arial, Helvetica, sans-serif;
    line-height:1.5;
}

a{ color:var(--rlb-red); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.rlb-wrap{
    max-width:var(--rlb-max-width);
    margin:0 auto;
    padding:0 16px;
}

/* =========================================================
   2. HEADER / BANNER
   ========================================================= */
.rlb-banner{
    position:relative;
    background:#060606;
    border-bottom:3px solid var(--rlb-red);
    line-height:0;
}

.rlb-banner-inner{
    max-width:var(--rlb-max-width);
    margin:0 auto;
}

.rlb-banner-link{
    display:block;
}

.rlb-banner-image{
    display:block;
    width:100%;
    height:clamp(110px, 16vw, 220px);
    object-fit:cover;
    object-position:center;
}

/* =========================================================
   3. HOOFDNAVIGATIE
   ========================================================= */
.rlb-nav{
    background:#141414;
    border-bottom:2px solid var(--rlb-red);
}

.rlb-nav ul{
    display:flex;
    flex-wrap:wrap;
    max-width:var(--rlb-max-width);
    margin:0 auto;
}

.rlb-nav li{ border-right:1px solid #262626; }

.rlb-nav a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 18px;
    color:var(--rlb-silver);
    font-weight:bold;
    letter-spacing:.5px;
    text-transform:uppercase;
    font-size:13px;
    text-decoration:none;
    white-space:nowrap;
}

.rlb-nav a:hover,
.rlb-nav .current-menu-item > a{
    background:var(--rlb-red);
    color:#fff;
}

.rlb-nav .menu-item-first > a{
    background:var(--rlb-red);
    color:#fff;
}

/* =========================================================
   4. LAYOUT: 3 KOLOMMEN
   ========================================================= */
.rlb-content{
    max-width:var(--rlb-max-width);
    margin:0 auto;
    padding:24px 16px 48px;
    display:grid;
    grid-template-columns:280px minmax(0,1fr) 280px;
    gap:24px;
    align-items:start;
}

@media (max-width: 1024px){
    .rlb-content{ grid-template-columns:1fr; }
}

/* =========================================================
   5. WIDGETS / BLOKKEN (linker- en rechterkolom)
   ========================================================= */
.rlb-widget{
    background:#111;
    border:1px solid #222;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:20px;
    box-shadow:0 6px 18px rgba(0,0,0,.45);
}

.rlb-widget-title{
    background:linear-gradient(180deg, var(--rlb-red) 0%, var(--rlb-red-dark) 100%);
    color:#fff;
    font-family:Impact, "Arial Black", sans-serif;
    letter-spacing:1px;
    font-size:16px;
    text-transform:uppercase;
    padding:10px 14px;
    margin:0;
}

.rlb-widget-body{
    padding:16px;
    color:var(--rlb-silver);
    font-size:14px;
}

.rlb-widget-body img{ border-radius:2px; }

.rlb-btn{
    display:inline-block;
    width:100%;
    text-align:center;
    padding:10px 12px;
    background:var(--rlb-red);
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    border-radius:3px;
    border:none;
    cursor:pointer;
    font-size:13px;
    margin-top:8px;
}
.rlb-btn:hover{ background:var(--rlb-red-dark); color:#fff; text-decoration:none; }

.rlb-onair{
    display:inline-block;
    background:var(--rlb-red);
    color:#fff;
    font-weight:bold;
    letter-spacing:1px;
    padding:4px 14px;
    border-radius:3px;
    margin-top:8px;
}

.rlb-nowplaying-art{
    width:56px; height:56px;
    background:#000;
    border:1px solid #333;
    border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    color:var(--rlb-red);
    flex:0 0 auto;
}

.rlb-nowplaying{
    display:flex;
    gap:12px;
    align-items:center;
}

.rlb-nowplaying .rlb-track{ font-weight:bold; color:#fff; }
.rlb-nowplaying .rlb-artist{ color:#999; font-size:13px; }

.rlb-progress{
    height:4px;
    background:#333;
    border-radius:2px;
    margin:10px 0 4px;
    overflow:hidden;
}
.rlb-progress span{
    display:block;
    height:100%;
    width:0%;
    background:var(--rlb-red);
}

.rlb-timecodes{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:#999;
}

.rlb-player-list li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #222;
    font-size:13px;
}
.rlb-player-list li:last-child{ border-bottom:none; }
.rlb-player-list .rlb-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--rlb-red); flex:0 0 auto;
}

.rlb-kiesplayer{ margin:0; }
.rlb-kiesplayer li{ border-bottom:1px solid #1e1e1e; }
.rlb-kiesplayer li:last-child{ border-bottom:none; }
.rlb-kiesplayer a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 16px;
    color:var(--rlb-red);
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    transition:background .15s ease;
}
.rlb-kiesplayer a:hover{
    background:rgba(200,16,46,.12);
    text-decoration:underline;
}
.rlb-kiesplayer a.is-playing,
.rlb-btn.is-playing{
    background:rgba(200,16,46,.18);
}
.rlb-btn.is-playing::after{
    content:" (speelt)";
    font-weight:normal;
    font-size:11px;
    opacity:.85;
}
.rlb-kiesplayer svg{ flex:0 0 auto; }
.rlb-picon{
    flex:0 0 auto;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.5);
}
.rlb-picon svg{ width:16px; height:16px; }
.rlb-kp-meta{
    margin-left:auto;
    color:#8a8a8a;
    font-weight:normal;
    font-size:12px;
    white-space:nowrap;
}

/* =========================================================
   6. MAIN CONTENT PANEEL
   ========================================================= */
.rlb-panel{
    background:var(--rlb-panel-bg);
    border-radius:4px;
    padding:32px;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
}

.rlb-panel h2{
    font-family:Impact, "Arial Black", sans-serif;
    color:var(--rlb-red);
    font-size:30px;
    letter-spacing:1px;
    margin:0 0 4px;
}

.rlb-panel .rlb-weeknr{
    color:#777;
    margin:0 0 18px;
}

.rlb-schedule{ margin-bottom:20px; }
.rlb-schedule li{
    display:flex;
    gap:14px;
    padding:6px 0;
    border-bottom:1px dashed var(--rlb-border);
    font-size:15px;
}
.rlb-schedule li:last-child{ border-bottom:none; }
.rlb-schedule .rlb-time{
    color:var(--rlb-red);
    font-weight:bold;
    width:140px;
    flex:0 0 auto;
}

.rlb-divider{
    border:none;
    border-top:1px solid var(--rlb-border);
    margin:28px 0;
}

.rlb-panel h3{
    font-family:Impact, "Arial Black", sans-serif;
    color:var(--rlb-red);
    font-size:24px;
    margin:0 0 14px;
}

.rlb-panel p{ margin:0 0 12px; }
.rlb-panel strong{ color:var(--rlb-text); }

/* =========================================================
   7. FOOTER
   ========================================================= */
.rlb-footer{
    background:#0a0a0a;
    border-top:3px solid var(--rlb-red);
    color:#999;
    padding:28px 16px;
    text-align:center;
    font-size:13px;
}
.rlb-footer a{ color:var(--rlb-red); }
.rlb-footer .rlb-footer-menu{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

/* =========================================================
   8. TOEGANKELIJKHEID / MOBIEL
   ========================================================= */
a:focus-visible,
button:focus-visible{
    outline:3px solid #fff;
    outline-offset:2px;
}

.rlb-menu-toggle{
    display:none;
    background:var(--rlb-red);
    color:#fff;
    border:none;
    padding:12px 16px;
    width:100%;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
}

@media (max-width: 780px){
    .rlb-menu-toggle{ display:block; }
    .rlb-nav ul{ display:none; flex-direction:column; }
    .rlb-nav.is-open ul{ display:flex; }
    .rlb-nav li{ border-right:none; border-bottom:1px solid #262626; }
    .rlb-content{ padding:16px; }
    .rlb-panel{ padding:20px; }
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}