/* =============================================================================
   schedule.css — styles for schedule.html ONLY.
   This file is intentionally self-contained and is not referenced by any other
   page. The site-wide look (black bg, gold #f6d449 accent) is mirrored here so
   the prototype feels at home, but tweak freely without touching other pages.
   ============================================================================= */

:root {
    --bg: #000000;
    --panel: #141414;
    --panel-2: #1e1e1e;
    --border: #2a2a2a;
    --gold: #f6d449;
    --gold-bright: #FFD700;
    --text: #FFFFFF;
    --muted: #9a9a9a;
    --private: #777777;
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg);
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text);
    margin: 0;
    padding: 0;
}

.wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* Header */
.page-head {
    text-align: center;
    padding: 8px 0 4px;
}

.page-head h1 {
    font-size: 40px;
    margin: 0 0 8px;
}

.page-head p {
    color: var(--muted);
    margin: 0;
    font-size: 16px;
}

/* Embedded mode (index.html iframe, ?embed=1): drop our own header and tighten
   the top padding so the schedule sits flush inside the host page. */
html.embed .page-head { display: none; }
html.embed .wrap { padding-top: 12px; }

/* Preview mode (home-page embed): show one day, no scrolling on any device. The
   host page sizes the iframe to our content height, so there's nothing to scroll;
   overflow:hidden guarantees no scrollbars and lets touch pass through to the host.
   Tighter padding keeps the single-day card from leaving dead space. */
html.preview, html.preview body { overflow: hidden; }
html.preview .wrap { padding-top: 4px; padding-bottom: 12px; }

/* Status / loading / error */
.status {
    text-align: center;
    padding: 40px 16px;
    color: var(--muted);
    font-size: 18px;
}

.status.error { color: #ff8080; }

/* Day grouping */
.day-group { margin-top: 28px; }

.day-heading {
    font-size: 26px;
    color: var(--gold);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin: 0 0 14px;
}

.today-badge {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    padding: 2px 9px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--gold);
    border-radius: 999px;
}

/* Job card */
.job {
    display: flex;
    gap: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 5px solid var(--gold);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

/* Private events use the same full-width row + time column + divider as public
   stops (so the separator lines up and nothing stands out), but the serving
   time is small and all on one row, and the body is just the "Private Event"
   label — the whole thing stays one row so it doesn't clutter the schedule. */
.job.private {
    border-left-color: #444444;
    padding: 6px 16px;
}

/* Serving-time column (the only time the public sees). */
.job-time {
    flex: 0 0 152px;
    line-height: 1.25;
    text-align: center;
    padding: 4px 18px 4px 1px;
    border-right: 1px solid var(--border);
}

/* The inline (in-body) time copy is mobile-only; hidden on desktop where the
   left-hand time column is used instead. */
.job-time-inline { display: none; }

.job-time .serving-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.job-time .serving-start {
    font-size: 22px;
    font-weight: bold;
    color: var(--text);
}

.job-time .serving-end {
    font-size: 16px;
    color: #b1b1b1;
}

/* Private events: dim the serving time so it reads as secondary, and shrink it
   to a small time that sits all on one row (start and end inline together). */
.job.private .job-time .serving-start { display: inline; font-size: 13px; font-weight: normal; color: var(--muted); }
.job.private .job-time .serving-end { display: inline; font-size: 13px; color: #6a6a6a; }

.job-body { flex: 1 1 auto; min-width: 0; }

.job-title {
    font-size: 22px;
    font-weight: normal;
    color: var(--text);
    margin: 0 0 4px;
}

/* "City, State" line directly ABOVE the event name — bold and gold. */
.job-citystate {
    font-size: 24px;
    font-weight: bold;
    color: var(--gold);
    margin: 0 0 2px;
}

.job.private .job-title {
    color: #6a6a6a;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    margin-top: 6px;
}

.job.private .job-title .lock-icon svg { width: 13px; height: 13px; }

.job-title .lock-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

/* Inherit the title's (gray) color so the lock matches the font exactly. */
.job-title .lock-icon svg { fill: currentColor; display: block; }

.job-meta {
    color: var(--muted);
    font-size: 14px;
    margin: 2px 0;
}

.job-location { color: var(--text); font-size: 14px; margin: 4px 0; }
.job-location .location-name { font-weight: bold; color: var(--muted); }

.job-address {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 2px;
}

.job-location a { color: var(--gold); text-decoration: none; }
.job-location a:hover { color: var(--gold-bright); text-decoration: underline; }

/* "Open in Google Maps" button — same destination as the name link. */
.job-location a.maps-button {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: bold;
    color: var(--bg);
    background: var(--gold);
    border-radius: 6px;
    text-decoration: none;
}
.job-location a.maps-button:hover {
    background: var(--gold-bright);
    color: var(--bg);
    text-decoration: none;
}

/* Bus chips */
.buses { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }

.bus-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 9px;
    border-radius: 999px;
    background: #2a2a2a;
    border: 1px solid #393939;
    color: #d0d0d0;
}

.bus-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-block;
}

/* Private events: dim the bus label text. */
.job.private .bus-chip { color: #afafaf; }

/* Back to Home (matches terms.html). Hidden when embedded in another page. */
.back-link {
    display: block;
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
    color: var(--gold);
    text-decoration: none;
}

.back-link:hover { color: var(--gold-bright); text-decoration: underline; }

/* Top instance sits just under the header, so it needs less space above. */
.back-link-top { margin-top: 8px; margin-bottom: 8px; }

html.embed .back-link { display: none; }

/* Mobile */
@media (max-width: 600px) {
    .page-head h1 { font-size: 30px; }
    .day-heading { font-size: 16px; }
    .today-badge { font-size: 10px; }
    .job { flex-direction: column; gap: 8px; }
    .job-time {
        flex-basis: auto;
        text-align: left;
        padding: 0 0 8px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .job-time .serving-label { margin-bottom: 2px; }
    .job-time .serving-start { font-size: 18px; display: inline-block; margin-right: 6px; }
    .job-time .serving-end { display: inline-block; }

    /* Public stops: drop the left-hand time column and use the inline copy that
       sits between the title and the location block, with a divider above AND
       below it. (Private events keep their compact single-row layout below.) */
    .job:not(.private) .job-time-col { display: none; }
    .job-time-inline {
        display: block;
        flex-basis: auto;
        text-align: left;
        padding: 8px 0;
        margin: 8px 0;
        border-right: none;
        border-top: 1px solid #6d5d34;
        border-bottom: 1px solid #6d5d34;
    }

    /* On mobile, keep private events as a single compact row (small time +
       vertical divider + label), with the font and padding shrunk so the row
       fits within the page width without running off the right edge. */
    .job.private { flex-direction: row; align-items: center; padding: 6px 10px; }
    .job.private .job-time {
        flex: 0 0 auto;
        text-align: left;
        padding: 0 8px 0 0;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }
    .job.private .job-time .serving-start,
    .job.private .job-time .serving-end { font-size: 11px; }
    .job.private .job-title { white-space: nowrap; font-size: 13px; margin: 0; }
}