/* ============================================================
   uheard.live — public website styles
   Direction: "after dark" — a venue letterboard at night.
   Time-led listing rows; the day header is the marquee signature.
   ============================================================ */

:root {
    --bg:        #0a0a0b;   /* near-black, cool-neutral */
    --bg-raised: #161618;   /* row hover / cards */
    --line:      #2a2a2e;   /* hairlines */
    --ink:       #ffffff;   /* primary text — band name, crisp white */
    --ink-dim:   #d8d8dc;   /* secondary — venue/city, near-white & legible */
    --ink-faint: #9a9aa2;   /* tertiary — genre, soft but readable (was the old --ink-dim level) */
    --ink-hint:  #6f6f77;   /* quaternary — doors/notes, intentionally quiet */
    --amber:     #e8a13c;   /* marquee accent */
    --amber-dim: #8a6526;
    --free:      #6cc08f;   /* "Free" green — the ONLY green; keep it semantic */
    --alert:     #e2655a;   /* cancelled / postponed */
    --maxw:      860px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---- masthead ---- */
.masthead {
    border-bottom: 1px solid var(--line);
    padding: 22px 0 18px;
    margin-bottom: 8px;
}
.masthead .wrap {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
}
.logo {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink);
}
.logo .live { color: var(--amber); }
.tagline { color: var(--ink-dim); font-size: 14px; }
.nav-venues { color: var(--ink-dim); font-size: 14px; }
.nav-venues:hover { color: var(--amber); }

/* ---- date controls ---- */
.datebar {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 0; flex-wrap: wrap;
}
.datebar form { display: flex; align-items: center; gap: 8px; }
.datebar a.step, .datebar button, .datebar input[type=date] {
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 7px 12px; font-size: 14px; cursor: pointer;
    font-family: inherit;
}
.datebar a.step:hover, .datebar button:hover { border-color: var(--amber-dim); color: var(--amber); }
.datebar input[type=date] { color-scheme: dark; }
.datebar .today-link { margin-left: auto; color: var(--ink-dim); font-size: 13px; }
.datebar .today-link:hover { color: var(--amber); }

/* category filter: pushed to the right end of the datebar, styled to match
   the calendar trigger / step controls (transparent, hairline border) */
.type-filter { margin-left: auto; display: inline-flex; }
.type-filter select {
    background: var(--bg-raised); color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 7px 12px; font-size: 14px; font-family: inherit; cursor: pointer;
    color-scheme: dark;
}
.type-filter select:hover { border-color: var(--amber-dim); }
/* native popup list: dark bg + light text so options aren't white-on-white */
.type-filter select option { background: var(--bg-raised); color: var(--ink); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- day header: the marquee signature ---- */
.daymark {
    display: flex; align-items: baseline; gap: 12px;
    margin: 28px 0 4px; padding-bottom: 8px;
    border-bottom: 2px solid var(--amber);
}
.daymark .rel {
    font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--amber);
}
.daymark .date {
    font-size: 20px; font-weight: 600; color: var(--ink);
}
.daymark .count { margin-left: auto; color: var(--ink-faint); font-size: 13px; }

/* ---- show row ---- */
.show {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    gap: 16px; align-items: baseline;
    padding: 14px 8px; border-bottom: 1px solid var(--line);
    transition: background 0.12s;
}
.show:hover { background: var(--bg-raised); }

.show .time {
    font-variant-numeric: tabular-nums;
    color: var(--amber); font-size: 15px; font-weight: 600;
    white-space: nowrap;
}
.show .time .doors { display: block; color: var(--ink-hint); font-size: 11px; font-weight: 400; }

.show .band {
    font-size: 19px; font-weight: 700; color: var(--ink);
    line-height: 1.2;
}
.show .band a:hover { color: var(--amber); }

/* venue/city — primary tap target (→ venue page). Bigger + brighter than genre,
   with a widened hit area padded DOWN/SIDEWAYS so it won't crowd the band name
   above it once the band becomes its own (artist) link. */
.show .meta { font-size: 14.5px; margin-top: 4px; }
.show .meta .venue {
    color: #eaeaee;
    display: inline-block;
    padding: 4px 6px 5px 0;   /* top right bottom left — no left/top pad into the band */
    margin: -4px 0 -5px 0;    /* pull layout back so spacing looks unchanged */
}
.show .meta .venue:hover { color: var(--amber); text-decoration: underline; }

/* genre on its own line — stays smaller + dimmer than venue so the ALL-CAPS
   genres don't out-weigh the venue. Also the home for a future category chip. */
.show .genre-line { font-size: 13px; margin-top: 3px; }
.show .genre-line .genre { color: var(--ink-faint); }
.show .genre-line .sep { color: var(--ink-hint); margin: 0 7px; }

.show .note { color: var(--ink-hint); font-size: 12.5px; margin-top: 3px; font-style: italic; }

.show .right { text-align: right; white-space: nowrap; }
.show .cover { font-size: 14px; color: var(--ink-dim); }
.show .cover.free { color: var(--free); }
.show .tix {
    display: inline-block; margin-top: 6px;
    font-size: 12px; color: var(--amber);
    border: 1px solid var(--amber-dim); border-radius: 5px;
    padding: 3px 9px;
}
.show .tix:hover { background: var(--amber); color: var(--bg); }

/* status flags */
.flag {
    display: inline-block; font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--alert); border: 1px solid var(--alert);
    border-radius: 4px; padding: 1px 6px; margin-right: 8px;
    vertical-align: 2px;
}
.flag.muted { color: var(--ink-faint); border-color: var(--line); }

/* category chip (Open Mic / Jam) — a quiet info tag on the genre line.
   Deliberately muted: ink-faint text + hairline border, no accent color. */
.chip {
    display: inline-block; font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 4px;
    padding: 0 6px; vertical-align: 1px;
}

/* ---- empty state ---- */
.empty {
    padding: 48px 8px; color: var(--ink-dim); text-align: center;
}
.empty strong { color: var(--ink); display: block; margin-bottom: 6px; font-size: 17px; }

/* ---- venue page header ---- */
.venue-head { padding: 26px 0 6px; }
.venue-head h1 { font-size: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; }
.venue-head .sub { color: var(--ink-dim); font-size: 14px; }
.venue-head .sub a:hover { color: var(--amber); }
.venue-head .back { color: var(--ink-faint); font-size: 13px; }
.venue-head .back:hover { color: var(--amber); }

/* on venue pages the date column shows the date, not just time */
.show.venue-row { grid-template-columns: 96px 1fr auto; }
.show.venue-row .date {
    color: var(--ink-dim); font-size: 13px; font-weight: 600;
}
.show.venue-row .date .t { display: block; color: var(--amber); font-weight: 600; margin-top: 2px; }

/* ---- venue index ---- */
.venue-list { list-style: none; padding: 0; margin: 8px 0 40px; }
.venue-list li { border-bottom: 1px solid var(--line); }
.venue-list a {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 8px; font-size: 17px;
}
.venue-list a:hover { background: var(--bg-raised); color: var(--amber); }
.venue-list .city { color: var(--ink-faint); font-size: 13px; }

/* ---- footer ---- */
footer {
    border-top: 1px solid var(--line); margin-top: 40px;
    padding: 26px 0 40px; color: var(--ink-faint); font-size: 13px;
}
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
footer a:hover { color: var(--amber); }

/* ---- responsive ---- */
@media (max-width: 560px) {
    .show { grid-template-columns: 64px 1fr; }
    .show .right { grid-column: 2; text-align: left; margin-top: 6px; }
    .show.venue-row { grid-template-columns: 80px 1fr; }
    .logo { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .show { transition: none; }
}

/* ============================================================
   Single-calendar range picker (popover)
   ============================================================ */
.cal-wrap { position: relative; }

.cal-trigger {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 8px 14px; font-size: 14px; font-family: inherit; cursor: pointer;
    min-width: 180px;
}
.cal-trigger:hover { border-color: var(--amber-dim); }
.cal-trigger .cal-icon { font-size: 13px; opacity: 0.8; }
.cal-trigger .cal-label { font-weight: 600; color: var(--amber); white-space: nowrap; }
.cal-trigger .cal-caret { margin-left: auto; color: var(--ink-faint); font-size: 11px; }

.cal-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
    background: var(--bg-raised); border: 1px solid var(--line);
    border-radius: 10px; padding: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    width: 308px; box-sizing: border-box;
}
.cal-pop * { box-sizing: border-box; }
.cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.cal-month { font-weight: 600; font-size: 15px; color: var(--ink); }
.cal-nav {
    flex: 0 0 auto;
    background: transparent; color: var(--ink-dim); border: 1px solid var(--line);
    border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 14px;
    font-family: inherit; display: flex; align-items: center; justify-content: center;
}
.cal-nav:hover { border-color: var(--amber-dim); color: var(--amber); }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
}
.cal-dow {
    text-align: center; font-size: 11px; color: var(--ink-faint);
    padding: 4px 0; font-weight: 600;
    height: 24px; line-height: 16px;
    min-width: 0;
}
.cal-cell {
    height: 34px; width: 100%; min-width: 0;
    border: none; background: transparent; color: var(--ink-dim);
    border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}
.cal-cell:hover:not(.empty) { background: var(--line); color: var(--ink); }
.cal-cell.empty { cursor: default; }
.cal-cell.today { color: var(--amber); font-weight: 700; box-shadow: inset 0 0 0 1px var(--amber-dim); }
.cal-cell.in-range { background: rgba(232,161,60,0.15); color: var(--ink); border-radius: 0; }
.cal-cell.sel {
    background: var(--amber); color: var(--bg); font-weight: 700;
}
.cal-cell.sel:hover { background: var(--amber); color: var(--bg); }

.cal-hint {
    margin-top: 10px; font-size: 11.5px; color: var(--ink-faint);
    line-height: 1.4; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .cal-cell { transition: none; }
}

/* ============================================================
   Festival support — collapsed feed row + festival.php page
   ============================================================ */

/* main feed: the collapsed "🎪 Festival Name" row's location line
   (plain text, not a link — the festival name above already links out) */
.venue-plain { color: var(--ink-faint); }
.festival-flag { margin-right: 2px; }

/* festival.php: day heading reuses .daymark; this is the per-stage group */
.stage-group { margin: 18px 0 26px; }
.stage-title {
    font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--amber);
    margin: 0 0 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.festival-act {
    display: grid; grid-template-columns: 70px 1fr; gap: 12px;
    padding: 8px 8px; border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.festival-act:last-child { border-bottom: none; }
.fa-time {
    font-variant-numeric: tabular-nums; color: var(--amber);
    font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.fa-band { color: var(--ink); font-size: 15.5px; font-weight: 600; }
.fa-note {
    display: block; color: var(--ink-hint); font-size: 12px;
    font-style: italic; margin-top: 2px; grid-column: 2;
}
.festival-notice {
    background: var(--bg-raised); border: 1px solid var(--amber-dim);
    border-radius: 8px; padding: 10px 14px; margin: 12px 0 20px;
    color: var(--ink-dim); font-size: 13.5px; line-height: 1.5;
}

@media (max-width: 560px) {
    .festival-act { grid-template-columns: 56px 1fr; }
}