/* ============================================================
   TWIZT — inline SVG-iconen (Lucide + Simple Icons)
   Vervangt het Bootstrap Icons-webfont. De iconen schalen mee met
   de tekstgrootte (1em) en nemen de tekstkleur over (currentColor).
   ============================================================ */

.tz-ico{width:1em;height:1em;vertical-align:-.125em;flex:none;}

/* Kleuraccenten die eerder als inline style in de HTML stonden */
.ico-spotify{color:var(--green);}
.ico-youtube{color:#FF0000;}
.ico-2x{font-size:2rem;}

/* --- Compatibiliteit met bestaande regels in twizt.css --------
   Die selectors mikten op <i>; hier staan ze opnieuw voor de SVG,
   zodat twizt.css zelf ongewijzigd kan blijven. */
.vc-thumb .play .tz-ico{
    width:54px;height:54px;padding:15px;box-sizing:border-box;border-radius:50%;
    background:rgba(255,255,255,.92);color:var(--magenta);
    box-shadow:0 4px 12px rgba(0,0,0,.3);transition:.2s;
}
.vc-card:hover .vc-thumb .play .tz-ico{transform:scale(1.12);background:#fff;}
.ag-hero .ag-meta .tz-ico{color:var(--yellow);margin-right:6px;}

/* --- Footer: icoon en tekst netjes naast elkaar ---------------
   In de smalle informatiekolom sprong een lange regel (zoals een
   website-adres) onder het icoon. Met een flexrij blijft het icoon
   links staan en loopt de tekst er netjes naast door. */
.tz-footer li > a,
.tz-footer li > span{display:flex;align-items:flex-start;gap:8px;overflow-wrap:anywhere;}
.tz-footer li .tz-ico{margin-right:0 !important;margin-top:.25em;}