/* Traditional Music Events — Heritage Tunes dark theme + three-panel browse layout
   Enqueued by class-tme-event-filters.php on music-event archive pages only.
   Requires Tunebook frontend.css to also be loaded (rails use Tunebook classes).
   ============================================================================= */

/* =============================================================
   TRADITIONAL MUSIC EVENTS — Dark Theme Override
   Scoped to post-type-archive-music-event body class.
   These are bridge styles — inline styles in the PHP require
   !important throughout. Long-term fix: add CSS classes to
   the PHP output in class-tme-display.php and
   class-tme-event-filters.php and remove inline styles.
   ============================================================= */

/* ── Page background ─────────────────────────────────────── */
.post-type-archive-music-event .wp-site-blocks,
.post-type-archive-music-event .wp-block-post-content,
.post-type-archive-music-event .entry-content {
    background: #082028;
    color: #c8dde3;
}

/* Page title and subtitle — rendered by FSE template above the
   shortcode/Query Loop block */
.post-type-archive-music-event h1,
.post-type-archive-music-event h2.wp-block-heading {
    color: #e8f4f6;
}

.post-type-archive-music-event p {
    color: rgba(200, 221, 227, 0.75);
}

/* ── Filter bar ───────────────────────────────────────────
   The outer div has only inline styles, no class. Target it
   via the inner form's action URL or the known child structure.
   The most reliable selector available without PHP changes:    */
.post-type-archive-music-event form[action*="music-event"] {
    /* form itself has no bg, parent div does */
}

/* This targets the wrapping div by its known first child */
.post-type-archive-music-event form[action*="music-event"]:first-child {
    background: transparent;
}

/* One-line PHP fix that unlocks clean CSS targeting:
   In class-tme-event-filters.php line 68, change:
   <div style="background: #ffffff; border: 1px solid #e9ecef; ...">
   to:
   <div class="tme-filter-bar" style="...">
   Then the rules below will work WITHOUT !important.
   Until then, we use the attribute selector approach above.   */

/* If the PHP edit has been made, these apply cleanly: */
.tme-filter-bar {
    background: #082028 !important;
    border: none !important;
    border-bottom: 1px solid rgba(92, 194, 204, 0.14) !important;
    border-radius: 0 !important;
    padding: 16px 28px !important;
    margin: 0 !important;
}

/* Filter bar text labels */
.post-type-archive-music-event span[style*="text-transform: uppercase"] {
    color: rgba(200, 221, 227, 0.5) !important;
}

/* Filter bar count */
.post-type-archive-music-event div[style*="font-size: 14px; color: #666"] {
    color: rgba(200, 221, 227, 0.4) !important;
}

/* Filter bar inputs and selects */
.post-type-archive-music-event input[type="date"],
.post-type-archive-music-event select[name="filter_state"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(92, 194, 204, 0.2) !important;
    border-radius: 5px !important;
    color: #e8f4f6 !important;
    font-family: inherit !important;
}

.post-type-archive-music-event input[type="date"]:focus,
.post-type-archive-music-event select[name="filter_state"]:focus {
    outline: none !important;
    border-color: #5CC2CC !important;
}

/* Checkboxes */
.post-type-archive-music-event input[type="checkbox"] {
    accent-color: #5CC2CC !important;
}

/* Filter bar checkbox labels */
.post-type-archive-music-event label[style*="display: flex; align-items: center"] {
    color: rgba(200, 221, 227, 0.7) !important;
}

/* Search button */
.post-type-archive-music-event button[style*="background: #1C728E"] {
    background: #1C728E !important;
    border-color: #1C728E !important;
    color: #fff !important;
    border-radius: 5px !important;
    font-family: inherit !important;
}

.post-type-archive-music-event button[style*="background: #1C728E"]:hover {
    background: #5CC2CC !important;
    border-color: #5CC2CC !important;
    color: #082028 !important;
}

/* Clear All link */
.post-type-archive-music-event a[style*="background: white"][style*="color: #666"] {
    background: transparent !important;
    color: rgba(200, 221, 227, 0.55) !important;
    border: 1px solid rgba(92, 194, 204, 0.2) !important;
    border-radius: 5px !important;
}

/* ── Event cards ──────────────────────────────────────────── */

/* The Query Loop block wraps cards — give it dark bg */
.post-type-archive-music-event .wp-block-post-template {
    background: #082028;
}

.post-type-archive-music-event .wp-block-post {
    background: #082028;
}

/* Card: transparent, hairline bottom border */
.post-type-archive-music-event .tme-archive-event-card {
    background: transparent !important;
    border-bottom: 1px solid rgba(92, 194, 204, 0.14) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 0 !important;
    margin-bottom: 0 !important;
    gap: 12px !important;
}

.post-type-archive-music-event .tme-archive-event-card:hover {
    background: rgba(92, 194, 204, 0.04) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Calendar icon — dark background, teal month bar */
.post-type-archive-music-event .tme-calendar-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(92, 194, 204, 0.2) !important;
    box-shadow: none !important;
}

.post-type-archive-music-event .tme-cal-month {
    background: #1C728E !important;
    color: #fff !important;
}

.post-type-archive-music-event .tme-cal-day {
    background: transparent !important;
    color: #5CC2CC !important;
}

/* Event title */
.post-type-archive-music-event .tme-event-title,
.post-type-archive-music-event .tme-event-title strong {
    color: #e8f4f6 !important;
    font-weight: 600 !important;
}

/* Date — teal accent */
.post-type-archive-music-event .tme-event-date {
    color: #5CC2CC !important;
}

/* Venue and location — muted */
.post-type-archive-music-event .tme-event-venue,
.post-type-archive-music-event .tme-event-location {
    color: rgba(200, 221, 227, 0.55) !important;
}

/* Meta text (Paid | Festival | Camp) */
.post-type-archive-music-event .tme-event-meta-text {
    color: rgba(200, 221, 227, 0.45) !important;
}

/* Visit Event Website link */
.post-type-archive-music-event .tme-event-link a {
    color: #5CC2CC !important;
    font-size: 13px !important;
}

.post-type-archive-music-event .tme-event-link a:hover {
    color: #e8f4f6 !important;
    text-decoration: none !important;
}

/* External link icon — teal */
.post-type-archive-music-event .tme-event-link a::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%235CC2CC'%3E%3Cpath d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/%3E%3C/svg%3E") !important;
}

/* ── No events message ────────────────────────────────────── */
.post-type-archive-music-event .tme-no-events {
    color: rgba(200, 221, 227, 0.45) !important;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .post-type-archive-music-event .tme-archive-event-card {
        padding: 16px 0 !important;
    }
}

/* =============================================================
   TME BROWSE — Events three-panel layout
   Same grid proportions as tune collection/browse.
   Right rail is search-only (no Try These Next for events).
   ============================================================= */

.tme-browse-wrap {
    background: #082028;
}

.tme-browse-body {
    display: grid;
    grid-template-columns: 240px 1fr 300px;
    align-items: stretch;
    min-height: calc(100vh - 80px);
}

/* Left rail wrapper */
.tme-browse-rail {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-right: 1px solid rgba(92, 194, 204, 0.14);
}

.tme-browse-rail .tunebook-rail {
    flex: 1;
    border-right: none;
}

/* Main content */
.tme-browse-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #082028;
}

/* Event list */
.tme-browse-results {
    flex: 1;
    padding: 0 28px;
}

.tme-browse-event-list {
    padding: 0;
}

/* Event cards in browse — override tme-display.php inline styles */
.tme-browse-wrap .tme-archive-event-card {
    border-bottom: 1px solid rgba(92, 194, 204, 0.14) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 20px 0 !important;
    margin-bottom: 0 !important;
}

.tme-browse-wrap .tme-archive-event-card:last-child {
    border-bottom: none !important;
}

.tme-browse-wrap .tme-archive-event-card:hover {
    background: rgba(92, 194, 204, 0.04) !important;
    transform: none !important;
    box-shadow: none !important;
}

.tme-browse-wrap .tme-calendar-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(92, 194, 204, 0.2) !important;
    box-shadow: none !important;
}

.tme-browse-wrap .tme-cal-month {
    background: #1C728E !important;
    color: #fff !important;
}

.tme-browse-wrap .tme-cal-day {
    background: transparent !important;
    color: #5CC2CC !important;
}

.tme-browse-wrap .tme-event-title,
.tme-browse-wrap .tme-event-title strong {
    color: #e8f4f6 !important;
}

.tme-browse-wrap .tme-event-date {
    color: #5CC2CC !important;
}

.tme-browse-wrap .tme-event-venue,
.tme-browse-wrap .tme-event-location {
    color: rgba(200, 221, 227, 0.55) !important;
}

.tme-browse-wrap .tme-event-meta-text {
    color: rgba(200, 221, 227, 0.45) !important;
}

.tme-browse-wrap .tme-event-link a {
    color: #5CC2CC !important;
    margin-left: 85px;
}

.tme-browse-wrap .tme-event-link a:hover {
    color: #e8f4f6 !important;
    text-decoration: none !important;
}

.tme-browse-wrap .tme-event-link a::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%235CC2CC'%3E%3Cpath d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/%3E%3C/svg%3E") !important;
}

/* No results */
.tme-browse-no-results {
    padding: 40px 0;
    color: rgba(200, 221, 227, 0.5);
    font-size: 14px;
}

/* Right rail wrapper */
.tme-browse-right-rail {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-left: 1px solid rgba(92, 194, 204, 0.14);
}

/* Right rail aside — reuses tunebook-right-rail shell styles */
.tme-right-rail {
    background: #082028;
    color: #c8dde3;
    flex: 1;
    padding: 28px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tme-right-rail-search {
    /* search input reuses .tunebook-right-rail-search-wrap styles */
}

/* Pagination */
.tme-browse-pagination {
    padding: 24px 28px;
    border-top: 1px solid rgba(92, 194, 204, 0.14);
}

.tme-browse-pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tme-browse-pagination .page-numbers li { margin: 0; }

.tme-browse-pagination .page-numbers a,
.tme-browse-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    color: rgba(200, 221, 227, 0.6);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.tme-browse-pagination .page-numbers a:hover {
    color: #5CC2CC;
    border-color: rgba(92, 194, 204, 0.3);
}

.tme-browse-pagination .page-numbers .current {
    background: rgba(92, 194, 204, 0.12);
    color: #5CC2CC;
    border-color: rgba(92, 194, 204, 0.3);
}

/* Filter bar inside tme-browse — same dark treatment as tunebook filter bar */
.tme-browse-wrap .tme-filter-bar {
    background: #082028 !important;
    border: none !important;
    border-bottom: 1px solid rgba(92, 194, 204, 0.14) !important;
    border-radius: 0 !important;
    padding: 16px 28px !important;
    margin: 0 !important;
}

.tme-browse-event-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tme-browse-body {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .tme-browse-rail {
        border-right: none;
        border-top: 1px solid rgba(92, 194, 204, 0.14);
        order: 3;
    }

    .tme-browse-main {
        order: 1;
    }

    .tme-browse-right-rail {
        order: 2;
        border-left: none;
        border-top: 1px solid rgba(92, 194, 204, 0.14);
    }

    .tme-browse-results {
        padding: 0 16px;
    }
}