/* LyricsSangrah — This Day in Music — Frontend CSS */

.lstd-wrap { font-family: 'Inter', sans-serif; color: #1C1408; }
.lstd-wrap * { box-sizing: border-box; }

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.lstd-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px }
.lstd-header-left { display:flex;align-items:center;gap:12px }
.lstd-cal-icon { font-size:28px;flex-shrink:0 }
.lstd-title { font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:700;color:#1C1408;line-height:1.1 }
.lstd-subtitle { font-size:12px;color:#9A7C50;margin-top:2px }
.lstd-see-all { font-size:12px;font-weight:500;color:#A0701A;border:1px solid #C9A86A;padding:6px 16px;border-radius:20px;text-decoration:none;transition:all .2s }
.lstd-see-all:hover { background:#A0701A;color:#fff }

/* ════════════════════════════════════════
   CARD GRID
════════════════════════════════════════ */
.lstd-cards { display:flex;flex-direction:column;gap:10px }

/* Window divider */
.lstd-window-divider { display:flex;align-items:center;gap:10px;margin:8px 0;color:#9A7C50;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em }
.lstd-window-divider::before,.lstd-window-divider::after { content:'';flex:1;height:1px;background:#E2D5BC }

/* Base card */
.lstd-card { display:flex;position:relative;background:#fff;border:1px solid #E2D5BC;border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s }
.lstd-card:hover { box-shadow:0 4px 20px rgba(160,112,26,.1);border-color:#C9A86A }

/* TODAY card — highlighted gold */
.lstd-card--today {
    border-color: #C9A86A;
    border-width: 2px;
    background: #FEFBF4;
    box-shadow: 0 2px 12px rgba(160,112,26,.12);
}
.lstd-card--birthday.lstd-card--today { border-left: 5px solid #A0701A }
.lstd-card--death.lstd-card--today    { border-left: 5px solid #9A7C50 }
.lstd-card--release.lstd-card--today  { border-left: 5px solid #C9933A }

/* WINDOW card — muted */
.lstd-card--window { opacity: 0.72 }
.lstd-card--window:hover { opacity: 1 }
.lstd-card--birthday:not(.lstd-card--today) { border-left: 4px solid #A0701A }
.lstd-card--death:not(.lstd-card--today)    { border-left: 4px solid #9A7C50 }
.lstd-card--release:not(.lstd-card--today)  { border-left: 4px solid #C9933A }

/* TODAY badge */
.lstd-today-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #A0701A;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Thumb */
.lstd-card-thumb { width:90px;min-height:90px;flex-shrink:0;background:#F5F0E8;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden }
.lstd-card-thumb img { width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0 }
.lstd-thumb-letter { font-family:'Cormorant Garamond',Georgia,serif;font-size:36px;font-weight:700;color:#A0701A;opacity:.5 }
.lstd-card-type-icon { position:absolute;bottom:5px;right:5px;font-size:16px;background:rgba(255,255,255,.85);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center }

/* Body */
.lstd-card-body { flex:1;padding:14px 16px;min-width:0 }
.lstd-card-event-label { font-size:10px;font-weight:700;color:#A0701A;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px }
.lstd-card-name { font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:700;color:#1C1408;margin-bottom:3px;line-height:1.2 }
.lstd-card--window .lstd-card-name { font-size:15px }
.lstd-card-name a { color:#1C1408;text-decoration:none }
.lstd-card-name a:hover { color:#A0701A }
.lstd-card-meta { font-size:11px;color:#9A7C50;margin-bottom:8px }

/* Song chips — only on today cards */
.lstd-card-songs { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px }
.lstd-song-chip { display:inline-block;padding:3px 10px;background:#F5F0E8;border:1px solid #E2D5BC;border-radius:12px;font-size:11px;color:#5A4020;text-decoration:none;transition:all .18s;white-space:nowrap }
.lstd-song-chip:hover { background:#FEF3DC;border-color:#C9A86A;color:#A0701A }
.lstd-song-chip--more { color:#A0701A;border-color:#C9A86A;font-weight:600 }

/* Offset label */
.lstd-offset { font-size:9px;color:#9A7C50;font-weight:400;text-transform:none;letter-spacing:0;margin-left:4px;font-style:italic }

/* ════════════════════════════════════════
   COMPACT LIST
════════════════════════════════════════ */
.lstd-compact-header { font-size:13px;font-weight:600;color:#1C1408;padding:10px 14px;background:#F5F0E8;border-radius:10px 10px 0 0;border:1px solid #E2D5BC;border-bottom:none }
.lstd-compact-list { list-style:none;margin:0;padding:0;border:1px solid #E2D5BC;border-radius:0 0 10px 10px;background:#fff;overflow:hidden }
.lstd-compact-item { display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #F5F0E8;transition:background .15s;position:relative }
.lstd-compact-item:last-child { border-bottom:none }
.lstd-compact-item:hover { background:#FEF8EE }

/* Window items — muted */
.lstd-compact-item--window { opacity:.65 }
.lstd-compact-item--window:hover { opacity:1 }

.lstd-compact-icon { font-size:18px;flex-shrink:0 }
.lstd-compact-info { flex:1;min-width:0 }
.lstd-compact-info a,.lstd-compact-info strong { font-size:13px;font-weight:500;color:#1C1408;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lstd-compact-info a:hover { color:#A0701A }
.lstd-compact-info small { font-size:10px;color:#9A7C50;display:block;margin-top:1px }
.lstd-compact-info small em { color:#B0956A;font-style:normal }

/* Today dot */
.lstd-compact-today-dot { width:8px;height:8px;border-radius:50%;background:#A0701A;flex-shrink:0;box-shadow:0 0 0 2px rgba(160,112,26,.2) }

/* ════════════════════════════════════════
   BANNER
════════════════════════════════════════ */
.lstd-banner { background:#F5F0E8;border:1px solid #E2D5BC;border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap }
.lstd-banner-label { font-size:11px;font-weight:700;color:#A0701A;text-transform:uppercase;letter-spacing:.1em;flex-shrink:0 }
.lstd-banner-events { display:flex;gap:10px;flex-wrap:wrap;flex:1 }

/* Today banner event — gold box */
.lstd-banner-event--today {
    background: #FEF3DC;
    border: 1.5px solid #C9A86A;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Window banner event — muted, no box */
.lstd-banner-event--window {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .65;
    padding: 4px 6px;
}
.lstd-banner-event--window:hover { opacity: 1 }
.lstd-banner-event--window .lstd-banner-name { font-size:12px !important }
.lstd-banner-event--window .lstd-banner-meta { font-size:9px !important }

.lstd-banner-icon { font-size:18px;flex-shrink:0 }
.lstd-banner-content { display:flex;flex-direction:column }
.lstd-banner-type { font-size:9px;font-weight:700;color:#9A7C50;text-transform:uppercase;letter-spacing:.08em }
.lstd-banner-event--today .lstd-banner-type { color:#A0701A }
.lstd-banner-offset { font-size:8px;color:#B0956A;font-weight:400;font-style:italic;display:block;margin-top:1px }
.lstd-banner-name { font-size:13px;font-weight:600;color:#1C1408;text-decoration:none;line-height:1.2 }
.lstd-banner-name:hover { color:#A0701A }
.lstd-banner-meta { font-size:10px;color:#9A7C50 }
.lstd-banner-more { font-size:11px;font-weight:600;color:#A0701A;text-decoration:none;flex-shrink:0;border:1px solid #C9A86A;padding:5px 14px;border-radius:12px;transition:all .18s;white-space:nowrap }
.lstd-banner-more:hover { background:#A0701A;color:#fff }

/* ════════════════════════════════════════
   FULL PAGE (/on-this-day/)
════════════════════════════════════════ */
.lstd-page-section { margin-bottom:44px }
.lstd-page-section-title { font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:700;color:#1C1408;margin:0 0 20px;padding-bottom:10px;border-bottom:2px solid #E2D5BC;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px }
.lstd-page-section-title--today { border-bottom-color:#A0701A;color:#A0701A }
.lstd-page-section-title--window { border-bottom-color:#E2D5BC;color:#5A4020 }
.lstd-page-section-count { font-size:12px;font-weight:400;color:#9A7C50;font-family:Inter,sans-serif }
.lstd-page-section-count--window { color:#B0956A }
.lstd-window-note { font-size:12px;color:#9A7C50;margin:-14px 0 16px;font-style:italic }

.lstd-page-cards { display:flex;flex-direction:column;gap:16px }

/* Base page card */
.lstd-page-card { display:flex;gap:0;background:#fff;border:1px solid #E2D5BC;border-radius:14px;overflow:hidden;transition:box-shadow .2s;position:relative }
.lstd-page-card:hover { box-shadow:0 4px 20px rgba(160,112,26,.1) }

/* TODAY page cards */
.lstd-page-card--birthday:not(.lstd-page-card--window) { border-left:5px solid #A0701A;border-color:#C9A86A;border-width:2px;background:#FEFBF4 }
.lstd-page-card--death:not(.lstd-page-card--window)    { border-left:5px solid #9A7C50;border-color:#C9A86A;border-width:2px;background:#FEFBF4 }
.lstd-page-card--release:not(.lstd-page-card--window)  { border-left:5px solid #C9933A;border-color:#C9A86A;border-width:2px;background:#FEFBF4 }

/* WINDOW page cards — muted */
.lstd-page-card--window { opacity:.72;background:#FAFAF8 }
.lstd-page-card--window:hover { opacity:1 }
.lstd-page-card--birthday.lstd-page-card--window { border-left:4px solid #A0701A }
.lstd-page-card--death.lstd-page-card--window    { border-left:4px solid #9A7C50 }
.lstd-page-card--release.lstd-page-card--window  { border-left:4px solid #C9933A }

/* TODAY badge on page card */
.lstd-page-card-today-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #A0701A;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}

.lstd-page-card-media { width:110px;flex-shrink:0;background:#F5F0E8;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:110px;position:relative }
.lstd-page-card-media img { width:100%;height:100%;object-fit:cover;display:block }
.lstd-page-card-letter { font-family:'Cormorant Garamond',Georgia,serif;font-size:44px;font-weight:700;color:#A0701A;opacity:.5 }
.lstd-page-card-content { flex:1;padding:16px 20px 16px 16px;min-width:0 }
.lstd-page-card-event-label { font-size:11px;font-weight:700;color:#A0701A;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px }
.lstd-page-card-name { font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:700;color:#1C1408;margin-bottom:4px }
.lstd-page-card--window .lstd-page-card-name { font-size:18px }
.lstd-page-card-name a { color:#1C1408;text-decoration:none }
.lstd-page-card-name a:hover { color:#A0701A }
.lstd-page-card-meta { font-size:12px;color:#9A7C50;margin-bottom:12px }
.lstd-page-songs-label { font-size:10px;font-weight:700;color:#9A7C50;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px }
.lstd-page-songs { display:flex;flex-direction:column;gap:6px }
.lstd-page-song-row { display:flex;align-items:center;gap:10px;padding:8px 12px;background:#FAFAF8;border:1px solid #E2D5BC;border-radius:8px;text-decoration:none;transition:all .18s }
.lstd-page-song-row:hover { background:#FEF3DC;border-color:#C9A86A }
.lstd-page-song-thumb { width:36px;height:36px;border-radius:6px;background:#F5F0E8;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;overflow:hidden }
.lstd-page-song-thumb img { width:100%;height:100%;object-fit:cover;display:block }
.lstd-page-song-info { flex:1;min-width:0 }
.lstd-page-song-title { display:block;font-size:13px;font-weight:500;color:#1C1408;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lstd-page-song-movie { display:block;font-size:10px;color:#9A7C50 }
.lstd-page-song-arrow { font-size:14px;color:#C9A86A;flex-shrink:0 }
.lstd-page-song-more { display:block;font-size:12px;color:#A0701A;padding:6px 12px;text-decoration:none;font-weight:500 }

/* Empty */
.lstd-empty { padding:60px 20px;text-align:center;color:#9A7C50 }
.lstd-empty-icon { font-size:48px;margin-bottom:14px }
.lstd-empty h3 { font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:700;color:#1C1408;margin-bottom:8px }
.lstd-empty p { font-size:13px;max-width:440px;margin:0 auto;line-height:1.6 }

/* ════════════════════════════════════════
   UPCOMING WIDGET
════════════════════════════════════════ */
.lstd-upcoming { font-family:'Inter',sans-serif }
.lstd-upcoming-header { font-size:13px;font-weight:600;color:#1C1408;padding:10px 14px;background:#F5F0E8;border-radius:10px 10px 0 0;border:1px solid #E2D5BC;border-bottom:none }
.lstd-upcoming-list { list-style:none;margin:0;padding:0;border:1px solid #E2D5BC;background:#fff;overflow:hidden }
.lstd-upcoming-item { display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #F5F0E8;transition:background .15s;position:relative }
.lstd-upcoming-item:last-child { border-bottom:none }
.lstd-upcoming-item:hover { background:#FEF8EE }
.lstd-upcoming-date { width:36px;height:36px;flex-shrink:0;background:#FEF3DC;border:1px solid #C9A86A;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center }
.lstd-upcoming-day { font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:700;color:#A0701A;line-height:1 }
.lstd-upcoming-month { font-size:8px;color:#A0701A;text-transform:uppercase;letter-spacing:.04em }
.lstd-upcoming-icon { font-size:16px;flex-shrink:0 }
.lstd-upcoming-info { flex:1;min-width:0 }
.lstd-upcoming-info a,.lstd-upcoming-info strong { font-size:12px;font-weight:500;color:#1C1408;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lstd-upcoming-info a:hover { color:#A0701A }
.lstd-upcoming-info small { font-size:10px;color:#9A7C50 }
.lstd-upcoming-more { display:block;font-size:11px;color:#A0701A;padding:8px 14px;text-align:center;text-decoration:none;border-top:1px solid #E2D5BC;background:#FAFAF8;border-radius:0 0 10px 10px;transition:background .18s }
.lstd-upcoming-more:hover { background:#FEF3DC }

/* ════════════════════════════════════════
   SOCIAL SHARE BAR
════════════════════════════════════════ */
.lstd-share-bar { display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;background:#F5F0E8;border:1px solid #E2D5BC;border-radius:10px;margin-bottom:24px }
.lstd-share-label { font-size:12px;font-weight:600;color:#5A4020;flex-shrink:0 }
.lstd-share-btns { display:flex;gap:8px;flex-wrap:wrap }
.lstd-share-btn { display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;text-decoration:none;transition:all .2s;cursor:pointer;border:1px solid;background:none;font-family:'Inter',sans-serif }
.lstd-share-btn--wa { color:#25D366;border-color:#25D366 } .lstd-share-btn--wa:hover { background:#25D366;color:#fff }
.lstd-share-btn--tw { color:#1DA1F2;border-color:#1DA1F2 } .lstd-share-btn--tw:hover { background:#1DA1F2;color:#fff }
.lstd-share-btn--fb { color:#4267B2;border-color:#4267B2 } .lstd-share-btn--fb:hover { background:#4267B2;color:#fff }
.lstd-share-btn--copy { color:#A0701A;border-color:#C9A86A } .lstd-share-btn--copy:hover { background:#A0701A;color:#fff }

/* ════════════════════════════════════════
   SONG PAGE BANNER
════════════════════════════════════════ */
.lstd-song-banner { display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:10px;margin-bottom:20px;flex-wrap:wrap;border:1px solid }
.lstd-song-banner--birthday { background:#FEF3DC;border-color:#C9A86A }
.lstd-song-banner--death    { background:#F5F0E8;border-color:#E2D5BC }
.lstd-song-banner--release  { background:#FFF8EE;border-color:#C9933A }
.lstd-song-banner-icon { font-size:24px;flex-shrink:0 }
.lstd-song-banner-text { flex:1;min-width:0 }
.lstd-song-banner-text strong { display:block;font-size:14px;font-weight:600;color:#1C1408 }
.lstd-song-banner-text span { font-size:11px;color:#9A7C50 }
.lstd-song-banner-link,.lstd-song-banner-otd { font-size:11px;font-weight:500;color:#A0701A;border:1px solid #C9A86A;padding:4px 12px;border-radius:8px;text-decoration:none;transition:all .18s;white-space:nowrap;flex-shrink:0 }
.lstd-song-banner-link:hover,.lstd-song-banner-otd:hover { background:#A0701A;color:#fff;border-color:#A0701A }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:600px) {
    .lstd-card-thumb { width:60px;min-height:60px }
    .lstd-card-name { font-size:15px }
    .lstd-banner { flex-direction:column;align-items:flex-start;gap:12px }
    .lstd-banner-events { flex-direction:column;gap:8px }
    .lstd-banner-event--window { display:none } /* hide window events on mobile banner */
    .lstd-page-card { flex-direction:column }
    .lstd-page-card-media { width:100%;height:100px }
    .lstd-page-card-content { padding:14px }
    .lstd-today-badge,.lstd-page-card-today-badge { top:auto;bottom:8px;right:8px }
}