/*
 * Beatlab Gig Guide — Frontend Styles
 *
 * DESIGN DECISIONS:
 *
 * 1. All selectors prefixed .blgg- or .beatlab-gig-guide to avoid
 *    conflicts with Uncode theme classes.
 *
 * 2. font-family: inherit throughout — Uncode already loads Inter and Barlow
 *    via Google Fonts. We inherit the theme's font stack and do NOT import
 *    fonts separately (would create duplicate HTTP requests).
 *
 * 3. Accent colour is #40c2d1 (Beatlab teal) confirmed from the site's
 *    Uncode Privacy plugin accent_color setting. NEVER USE PINK.
 *
 * 4. CONFIRMED LIVE (via real page HTML dump): both the gig list page and
 *    the single gig detail page render on Uncode's LIGHT theme style
 *    (style-light / xsdn-bg), NOT a dark section as originally assumed.
 *    White is the correct Beatlab brand background — this is NOT a bug to
 *    fight or override with a forced dark background. All components below
 *    are built for a LIGHT background with dark, readable text and teal
 *    accents. (An earlier revision of this file incorrectly forced solid
 *    dark panels everywhere to "fix" invisible white-on-white text — that
 *    was the wrong direction; the actual fix is dark text on light, not
 *    forcing the page dark. Corrected throughout this file.)
 *
 * 5. Centering: .beatlab-gig-guide uses display:block, width:100%, and
 *    margin:0 auto. If centering still does not work, the WPBakery row
 *    containing the shortcode must be set to Full Width with a 1/1 column.
 *    See Section 9 of the handover document for WPBakery setup instructions.
 */

/* ── Outer wrapper ───────────────────────────────────────────────────────── */

.beatlab-gig-guide {
    /* display:block ensures margin:auto works for centering.
       Uncode's flex layout on .uncoltable/.uncell can prevent this
       without explicit block declaration. */
    display: block;
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    /* Reset any inherited text-align from Uncode column settings */
    text-align: left;
    box-sizing: border-box;
    font-family: inherit;
    /* CHANGED from #ffffff — the page background is light (confirmed live),
       so body text needs to be dark, not white. */
    color: #111111;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
/* CORRECTED: originally used a translucent-on-dark scheme (assumed the
   surrounding page section was dark). Live HTML confirmed the actual
   background is light — this section now uses a light panel with dark
   text and teal focus/accent states instead of white-on-dark. */

.blgg-filters {
    background: #f4f5f6;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.blgg-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: end; /* aligns label+field pairs vertically */
}

/* On wider screens: from date | to date | venue | format.
   FIELD ORDER matches the explicit request: date range, then venue, then
   meeting format. The submit button column was removed — HTMX's
   hx-trigger already fires the search on every change, so an explicit
   submit button was redundant once venue became a dropdown (no free-text
   field left that would benefit from an Enter-to-submit affordance). */
@media (min-width: 640px) {
    .blgg-filter-form {
        grid-template-columns: 1fr 1fr 2fr 1fr;
    }
}

.blgg-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.blgg-filter-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    /* CHANGED from rgba(255,255,255,0.5) — dark, semi-transparent label text
       for a light panel background instead of near-white for a dark one. */
    color: rgba(0, 0, 0, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Shared styles for text, date, and select inputs.
   select is included here so the meeting-format and venue dropdowns get
   consistent styling instead of falling back to unstyled default browser
   chrome, which was part of why they looked broken/inconsistent earlier. */
.blgg-filter-field input[type="text"],
.blgg-filter-field input[type="date"],
.blgg-filter-field select {
    width: 100%;
    /* CHANGED from rgba(255,255,255,0.08) — solid white field on a light
       panel, with dark input text, instead of a translucent field meant
       for a dark surface. */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #111111;
    border-radius: 6px;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
    line-height: 1.4;
}

/* select-specific overrides. See fix history below: Uncode applies its own
   background-image (an icon sprite sheet) to every <select> site-wide,
   intended to isolate a single chevron via precise
   background-position/background-size/no-repeat. Simply setting
   appearance:none (removing the native arrow) without also resetting the
   background sub-properties caused the browser to tile the FULL sprite
   sheet across the box instead of showing one icon — visible as repeating
   rows of chevrons, scaling with box width (wider venue box = more repeats
   than the narrower format box), top and bottom since the sprite tiled
   vertically too. A later attempt to fix this with a background-image SVG
   data-URI also went wrong in the other direction (URI encoding mismatch
   caused it to silently fail to render, leaving NO chevron at all). This
   version uses a minimal, deliberately simple SVG data-URI (single-quotes
   throughout, only the truly special characters percent-encoded) to leave
   nothing else that can silently fail. */
.blgg-filter-field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-color: #ffffff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23111111" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 14px;
    /* box-sizing: border-box means padding is included inside the select's
       overall width rather than added on top of it. Without this, the
       right-padding below (added to clear the chevron) ate directly into
       the space available for the selected option's text, truncating "All
       Meeting Types" to "All Meeting Ty…" even though the box's outer
       width looked unchanged — the box wasn't too narrow, the text area
       inside it was shrunk by the padding. border-box makes padding and
       width cooperate instead of compete. */
    box-sizing: border-box;
    padding-right: 2.25rem;
}

.blgg-filter-field input:focus,
.blgg-filter-field select:focus {
    outline: none;
    border-color: #40c2d1;
    box-shadow: 0 0 0 2px rgba(64, 194, 209, 0.2);
}

.blgg-filter-field input::placeholder {
    /* CHANGED from rgba(255,255,255,0.3) — dark placeholder text for a
       white input field. */
    color: rgba(0, 0, 0, 0.35);
}

.blgg-filter-field input[type="date"] {
    /* color-scheme tells the browser to render its NATIVE form control
       chrome — including the calendar POP-UP WIDGET itself, not just the
       small icon glyph inside the box — in a given theme. This is
       different from a ::-webkit-calendar-picker-indicator filter, which
       only ever touches the tiny icon glyph and never the pop-up itself.
       Since the page is confirmed light, this is set to 'light' so the
       pop-up matches the rest of the UI. The date fields' native calendar
       icon glyph is already confirmed working correctly and consistent
       between From/To — no additional background-image or icon override
       is applied here, unlike the select fix above. */
    color-scheme: light;
}

/* Loading indicator: shown during HTMX request via htmx-request class */
.blgg-loading {
    font-size: 0.78rem;
    font-family: inherit;
    color: #40c2d1;
    margin-top: 0.75rem;
    display: none;
    letter-spacing: 0.05em;
}

/* htmx-indicator class is toggled by HTMX during requests */
.blgg-loading.htmx-request {
    display: block;
}

/* ── Section headings ─────────────────────────────────────────────────────── */

.blgg-section {
    margin-bottom: 3rem;
}

.blgg-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    /* CHANGED from rgba(255,255,255,0.45) — dark muted text for a light page. */
    color: rgba(0, 0, 0, 0.45);
    margin: 0 0 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 0.75rem;
    /* Override any Uncode heading styles that add borders/padding */
    border-left: none;
    border-right: none;
    border-top: none;
}

.blgg-count {
    font-weight: 400;
    /* CHANGED from rgba(255,255,255,0.25) — dark muted text for a light page. */
    color: rgba(0, 0, 0, 0.3);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
}

/* Past gigs section heading is more muted */
.blgg-past-title {
    /* CHANGED from rgba(255,255,255,0.2) — dark muted text for a light page. */
    color: rgba(0, 0, 0, 0.25);
}

/* ── Gig grid ─────────────────────────────────────────────────────────────── */

.blgg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 580px) {
    .blgg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .blgg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Past gigs visually de-emphasised */
.blgg-grid--past {
    opacity: 0.55;
}

/* ── Gig card ─────────────────────────────────────────────────────────────── */
/* CORRECTED: originally a translucent-white overlay meant to sit on a dark
   page — on the confirmed light page this became near-invisible white-on-
   white text on a barely-there background. Now a solid white card with a
   light border and subtle shadow, which is the correct light-theme
   treatment and also fixes the invisible date/venue text on cards. */

.blgg-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.blgg-card:hover {
    border-color: #40c2d1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Image wrapper — fixed 16:9 aspect ratio */
.blgg-card-image-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* CHANGED from rgba(255,255,255,0.04) — light placeholder background
       behind images while they load, for a light page. */
    background: #f4f5f6;
}

.blgg-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blgg-card:hover .blgg-card-img {
    transform: scale(1.04);
}

/* Placeholder shown when no image is available */
.blgg-card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.5rem;
    /* CHANGED from rgba(255,255,255,0.1) — visible-but-subtle placeholder
       glyph on a light background. */
    color: rgba(0, 0, 0, 0.12);
}

.blgg-card-body {
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1; /* ensures footer stays at bottom even in short cards */
}

.blgg-card-title {
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    /* CHANGED from #ffffff, and !important added — the theme's own generic
       text-color rules for headings inside .post-body/.entry-content can
       otherwise win by specificity and silently override this. This was
       part of why card titles/dates looked blank against the light page. */
    color: #111111 !important;
    margin: 0;
    line-height: 1.35;
    /* Override Uncode heading padding/borders */
    border: none;
    padding: 0;
}

.blgg-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.blgg-card-title a:hover {
    color: #40c2d1;
    text-decoration: none;
}

.blgg-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.blgg-meta-item {
    font-size: 0.8rem;
    font-family: inherit;
    /* CHANGED from rgba(255,255,255,0.5) — dark muted text on light cards. */
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.4;
}

/* Belt-and-suspenders: forces date/venue text color explicitly with
   !important, since these were the exact fields reported invisible on the
   live site — theme content-area text rules were likely winning by
   specificity against the plain .blgg-meta-item rule above alone. */
.blgg-card-meta,
.blgg-card-meta .blgg-meta-item,
.blgg-card-meta time {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Card footer: posted-by left, CTA button right */
.blgg-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.875rem;
    /* CHANGED from rgba(255,255,255,0.07) — light separator line on a light card. */
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: auto;
}

.blgg-posted-by {
    font-size: 0.72rem;
    font-family: inherit;
    /* CHANGED from rgba(255,255,255,0.3) — dark muted text on light cards. */
    color: rgba(0, 0, 0, 0.4);
}

/* ── Genre tags ───────────────────────────────────────────────────────────── */
/* NOTE: genre tags were removed from the plugin's data layer entirely (not
   a real Mighty Networks field). These .blgg-tag/.blgg-tags classes are
   now reused for the Meeting Format badge (Online / In-Person) instead —
   kept the original class names to avoid touching every template file. */

.blgg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.blgg-tag {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: inherit;
    background: rgba(64, 194, 209, 0.12);
    color: #2a9aa6;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    border: 1px solid rgba(64, 194, 209, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.blgg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1;
    /* Reset WordPress/Uncode button styles that may apply */
    appearance: none;
    -webkit-appearance: none;
    background-clip: padding-box;
}

/* Primary: teal fill, inverts to teal outline on hover.
   Text stays #0a0a0a (near-black) on the teal fill — this was already
   correct for a light theme and needed no change. */
.blgg-btn--primary {
    background: #40c2d1;
    color: #0a0a0a;
    border-color: #40c2d1;
}

.blgg-btn--primary:hover,
.blgg-btn--primary:focus {
    background: transparent;
    color: #2a9aa6;
    border-color: #40c2d1;
    text-decoration: none;
}

/* Secondary: ghost style */
.blgg-btn--secondary {
    background: transparent;
    /* CHANGED from rgba(255,255,255,0.6) — dark ghost-button text on light page. */
    color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.2);
}

.blgg-btn--secondary:hover,
.blgg-btn--secondary:focus {
    border-color: rgba(0, 0, 0, 0.4);
    color: #000000;
    text-decoration: none;
}

/* Large variant for detail page CTA */
.blgg-btn--large {
    padding: 0.75rem 1.75rem;
    font-size: 0.875rem;
    border-radius: 5px;
}

/* Filter submit button styles — kept in the file even though the button
   itself was removed from the shortcode markup (HTMX's hx-trigger fires
   on every change already, making an explicit submit redundant once venue
   became a dropdown). Harmless to leave here since nothing references
   these classes anymore; safe to delete if you want to tidy up later. */
.blgg-filter-submit {
    justify-content: flex-end;
}

.blgg-btn--filter-submit {
    padding: 0.55rem 1.25rem;
    width: 100%;
}

@media (min-width: 640px) {
    .blgg-btn--filter-submit {
        width: auto;
    }
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.blgg-empty {
    text-align: center;
    padding: 4rem 1rem;
    /* CHANGED from rgba(255,255,255,0.35) — dark muted text on light page. */
    color: rgba(0, 0, 0, 0.35);
}

.blgg-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.blgg-empty h3 {
    /* CHANGED from rgba(255,255,255,0.55) — dark text on light page. */
    color: rgba(0, 0, 0, 0.6);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    margin: 0 0 0.5rem;
    border: none;
    padding: 0;
}

.blgg-empty p {
    font-size: 0.85rem;
    font-family: inherit;
    margin: 0;
}

/* ── Back link (detail page) ──────────────────────────────────────────────── */

.blgg-back-link {
    display: inline-block;
    /* CHANGED from rgba(255,255,255,0.45) — teal on light page reads clearly
       without needing a translucent white base color. */
    color: #2a9aa6;
    text-decoration: none;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
    transition: color 0.15s;
}

.blgg-back-link:hover {
    color: #40c2d1;
    text-decoration: none;
}

/* ── Detail page ──────────────────────────────────────────────────────────── */

/* Narrow container for single gig detail — more readable long-form content */
.blgg-container--narrow {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.blgg-detail-image {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
    aspect-ratio: 16 / 9;
}

.blgg-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Two-column meta grid on wider screens */
.blgg-detail-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 480px) {
    .blgg-detail-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CORRECTED: originally translucent-white-on-dark; live page is light, so
   this is now a light grey panel with dark text, matching the filter bar
   treatment above. This directly fixes the reported invisible Date & Time
   / Venue fields on the detail page. */
.blgg-detail-meta-card {
    background: #f4f5f6;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

/* Teal label above the value — matches Uncode's detail section style.
   !important added since this is one of the fields specifically reported
   as invisible, so we guard against theme content-area rules winning by
   specificity. Slightly deepened to #2a9aa6 from brand #40c2d1 for small
   label-sized text on white/light-grey, since full-brightness teal is
   borderline for WCAG AA contrast at this size — full #40c2d1 is kept for
   buttons and larger accents where contrast is less critical. */
.blgg-meta-label {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #2a9aa6 !important;
    margin-bottom: 0.4rem;
}

.blgg-meta-value {
    font-weight: 700;
    font-family: inherit;
    /* CHANGED from #ffffff, !important added for the same reason as
       .blgg-meta-label above — this is the exact field reported blank. */
    color: #111111 !important;
    font-size: 0.95rem;
    line-height: 1.3;
}

.blgg-meta-sub {
    font-size: 0.8rem;
    font-family: inherit;
    /* CHANGED from rgba(255,255,255,0.45), !important added for the same
       reason as above. */
    color: rgba(0, 0, 0, 0.55) !important;
    margin-top: 0.25rem;
}

/* Event description from Mighty Networks.
   CORRECTED: no longer given its own dark panel background — it now sits
   directly on the page (transparent), which is the correct light-theme
   treatment, with dark text forced via !important since the theme's own
   post-content paragraph/list styles were likely winning by specificity
   and causing the reported "empty-looking" description, plus the
   text-align reset below fixes the "centered but also justified" alignment
   oddity reported on the first paragraph — that was Uncode's own content
   typography rules leaking through; every element inside the synced
   description is now forced to inherit our explicit left alignment and
   color rather than us needing to know Uncode's exact selector for it. */
.blgg-detail-description {
    margin-bottom: 2rem;
    color: rgba(0, 0, 0, 0.8) !important;
    line-height: 1.75;
    font-family: inherit;
}

.blgg-detail-description,
.blgg-detail-description * {
    text-align: left !important;
}

.blgg-detail-description p,
.blgg-detail-description li,
.blgg-detail-description ul,
.blgg-detail-description strong,
.blgg-detail-description em {
    color: inherit !important;
}

.blgg-detail-description h2,
.blgg-detail-description h3 {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    /* CHANGED from rgba(255,255,255,0.4) — dark heading text on light page. */
    color: #111111 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.875rem;
    /* Override Uncode heading borders/padding */
    border: none;
    padding: 0;
}

/* CTA button row with bottom border separator */
.blgg-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    /* CHANGED from rgba(255,255,255,0.08) — light separator on light page. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Attribution line at bottom of detail page */
.blgg-detail-footer {
    font-size: 0.78rem;
    font-family: inherit;
    /* CHANGED from rgba(255,255,255,0.3) — dark muted text on light page. */
    color: rgba(0, 0, 0, 0.4) !important;
}

/* ── Breadcrumb / duplicate title removal (detail page) ─────────────────── */
/* CONFIRMED via live HTML dump that Uncode renders its own breadcrumb bar
   AND its own duplicate <h1 class="post-title"> above our injected content
   on singular beatlab_gig views (since these posts have no WPBakery
   page-settings meta, Uncode falls back to its default single-post
   template chrome). Exact class names confirmed from that dump — no
   guessing involved. Our own <h1> inside gig-detail-body.php remains as
   the one visible title. */
body.single-beatlab_gig .row-breadcrumb,
body.single-beatlab_gig .post-title-wrapper {
    display: none !important;
}

/* ── Uncode theme resets ──────────────────────────────────────────────────── */

/* Prevent Uncode's global link underline from affecting our cards and buttons */
.beatlab-gig-guide a:hover,
.blgg-card a:hover {
    text-decoration: none;
}

/* Reset any Uncode heading bottom margin/border inside our components */
.blgg-section-title,
.blgg-card-title {
    border-left: none;
    border-right: none;
    border-top: none;
}