/* ===========================================================
   Audiostreamen Song‑History  –  Elementor‑proof flex‑layout
   =========================================================== */

/* ---------- 1. UL‑container -------------------------------- */
.elementor-widget-container ul.as-song-history{
    /* Basistypografie van Elementor / het thema erven */
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-size:   var(--e-global-typography-primary-font-size,   inherit);
    line-height: var(--e-global-typography-primary-line-height, inherit);

    list-style:none;
    margin:0;
    padding:0;
}

/* Elementor voegt default 20 px margin & min‑height toe – neutraliseren */
.elementor-widget-container ul.as-song-history li{
    margin:0 !important;
    min-height:0 !important;
}

/* ---------- 2. Rij ----------------------------------------- */
.elementor-widget-container ul.as-song-history li.as-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:.45em 0;
    border-bottom:1px solid #e0e5ec;
    transition:background .2s ease;
}
.elementor-widget-container ul.as-song-history li.as-row:last-child{
    border-bottom:none;
}
.as-song-history .as-row:hover{
    background:rgba(14,159,221,.08);   /* zacht Team‑FM‑blauw */
    cursor:pointer;
}

/* ---------- 3. Cover --------------------------------------- */
.as-cover{
    flex:0 0 40px;      /* kolombreedte */
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:6px;  /* standaard zacht afgerond */
}
/* Optioneel volledig rond → voeg in Elementor “CSS Classes”: covers-round */
.covers-round .as-cover{border-radius:50%;}

/* ---------- 4. Metakolom ---------------------------------- */
.as-meta{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;  /* titel onder artiest → mobiel perfect */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;     /* twee regels mogelijk */
    line-height:1.25;
}
.as-title { font-weight:600;  color:var(--e-global-color-text,#1a1a1a);}   /* → Elementor Typography: “Titel” */
.as-artist{ font-size:.85em; color:var(--e-global-color-secondary,#6e7680);}/* → Elementor Typography: “Artiest” */

/* ---------- 5. Tijdkolom ---------------------------------- */
.as-played-at{
    flex:0 0 58px;
    text-align:right;
    font-size:.85em;
    color:#6e7680;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

/* ---------- 6. Separator (nu standaard verborgen) ---------- */
.as-song-history .as-sep{display:none;}

/* ---------- 7. Donkere header / dark‑mode ----------------- */
:root {--as-sep-color:#9aa0a9;}   /* licht thema */

.on-dark,
.elementor-section.elementor-section--dark{
    --as-sep-color:#ffffff;        /* wit op donker */
}
@media (prefers-color-scheme:dark){
    .elementor-widget-container ul.as-song-history li.as-row{border-color:#242729;}
    .as-title {color:#e0e3e6;}
    .as-artist{color:#9aa0a9;}
}

/* ---------- 8. Hover eenvoudig deactiveren ---------------- */
/* Voeg class “hover-none” aan widget als je geen hover wilt. */
.hover-none .as-row:hover{background:transparent;}