/* =============================================================================
   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: 1024px;
    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; }

/* "Filter By Category" bar — pill toggles built from the live feed. Hidden until
   the categories are known (the [hidden] attribute), and never shown in the
   home-page preview embed. */
.filter-bar { margin: 22px 0 6px; text-align: center; }
.filter-bar[hidden] { display: none; }

.filter-label {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Outlined gold pill; the active category fills solid gold (like the maps button).
   Mirrors the .cal-button treatment so the page keeps one button vocabulary. */
.filter-btn {
    font: inherit;
    font-size: 15px;
    font-weight: bold;
    line-height: normal;
    padding: 10px 20px;
    color: var(--gold);
    background: transparent;
    /* Deselected outline is a darker, muted gold so unselected categories read as
       quieter; hover/active brighten it back up (below — those override only the
       border COLOR, so the 2px width stays consistent across every state). */
    border: 2px solid #766425;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

/* The "(n)" count beside each label — lighter and dimmed so it reads as secondary
   to the category name in every state (inherits the button's current text colour). */
.filter-count { margin-left: 5px; font-weight: normal; opacity: 0.65; }
.filter-btn:hover {
    background: rgba(246, 212, 73, 0.14);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}
.filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg);
}
.filter-btn.active:hover {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    color: var(--bg);
}

/* 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; }

/* Action buttons row: "Open in Google Maps" + "Add to my calendar". */
.job-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
}

/* Shared icon sizing for both action buttons. fill:currentColor matches the
   icon to whatever text colour its button uses. */
.job-buttons .btn-icon { width: 15px; height: 15px; fill: currentColor; flex: none; }
.job-buttons .btn-caret { width: 15px; height: 15px; fill: currentColor; flex: none; opacity: 0.85; }

/* "Open in Google Maps" — the primary (solid gold) action, with a map-pin icon. */
.job-location a.maps-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    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;
}

/* "Add to calendar" dropdown — deliberately the SECONDARY action: an outlined
   gold button (lighter weight than the solid maps button), with a calendar icon. */
.cal-wrap { position: relative; display: inline-block; }

.cal-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 1px border + 5px padding keeps the same outer height as the maps button. */
    padding: 5px 11px;
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    line-height: normal;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 6px;
    cursor: pointer;
}
.cal-button:hover {
    background: rgba(246, 212, 73, 0.14);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

/* Dropdown panel — sits below the button, above neighbouring cards. */
.cal-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    z-index: 20;
    background: var(--panel);
    border: 1px solid #393939;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.cal-menu[hidden] { display: none; }

/* Flip upward when there's no room below (e.g. the last card in the clipped
   home-page preview iframe). Toggled by the open handler in index.html. */
.cal-wrap.up .cal-menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.cal-menu .cal-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}

/* Brand glyphs in the dropdown. Google/Outlook keep their own fills; the Apple
   silhouette inherits the item's text colour (white, or gold on hover/suggested). */
.cal-menu .brand-icon { width: 16px; height: 16px; flex: none; }
.cal-menu .brand-apple { fill: currentColor; }
.cal-menu .cal-item:hover {
    background: #2a2a2a;
    color: var(--gold);
    text-decoration: none;
}
/* Suggested (best-match-for-device) option gets a subtle gold cue. */
.cal-menu .cal-item.suggested { color: var(--gold); font-weight: bold; }

/* 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; }

    /* Category pills: two equal columns that stretch to fill the row, so they use
       the full width instead of leaving ragged centered gaps. A lone last button
       (odd total) spans both columns so no row sits half-empty. Comfortable,
       tappable height for thumbs. */
    .filter-bar { margin-top: 18px; }
    .filter-label { font-size: 12px; margin-bottom: 14px; }
    .filter-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .filter-options .filter-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .filter-btn { font-size: 16px; padding: 11px 14px; }
    .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; }
}