/* City Tech – Recreation & Fitness Schedules
   Works for:
   - Group Fitness grid:          .gf  (+ modifier: .ct-table--days-as-columns)
   - Recreation/Game/Quiet lists: .rec-table (+ modifier: .ct-table--list)
   - Generic hook:                .ct-table
   You can theme any section by putting it inside .gf-wrap / .rec-wrap / .ct-wrap
*/

/* -------- Theme tokens (override on a wrapper if needed) -------- */
.gf-wrap, .rec-wrap, .ct-wrap {
    --ink: #000; /* main text */
    --bg: #fff; /* table background */
    --line: #e6ecf2; /* borders */
    --header: #0e2940; /* deep blue header cells */
    --accent: #1f5fbf; /* accent for small sublines/links */
    --phase-bg: #e8eef7; /* pill background */
    --phase-text: #0e2940; /* pill text */
}

/* -------- Base table styles (shared) -------- */
.gf, .rec-table, .ct-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.45;
    border: 1px solid var(--line);
    overflow: hidden; /* ensure header bg and borders clip cleanly */
}

    .gf caption, .rec-table caption, .ct-table caption {
        text-align: center;
        font-weight: 700;
        padding: .9rem 1rem;
        background: #f4f8ff;
        border-bottom: 1px solid var(--line);
    }

    .gf thead th, .rec-table thead th, .ct-table thead th {
        background: var(--header);
        color: #fff;
        padding: .75rem;
        text-align: center;
        font-weight: 700;
    }

    .gf td, .rec-table td, .ct-table td,
    .gf th, .rec-table th, .ct-table th {
        padding: .75rem;
        border-top: 1px solid var(--line);
        text-align: center;
        vertical-align: top;
    }

/* -------- Content helpers (compatible with your markup) -------- */
.c-title, .ct-title {
    display: block;
    font-weight: 700;
}

.c-time, .ct-time {
    display: block;
    margin-top: .1rem;
    color: inherit; /* high-contrast; no muted */
}

.phase, .ct-phase {
    display: block;
    margin: .25rem auto 0;
    background: var(--phase-bg);
    color: var(--phase-text);
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
    width: max-content;
}

.empty, .ct-empty {
    color: #9aa7b5;
    font-style: italic;
}

/* -------- Text blocks used on the Recreation page -------- */
.rec-subline, .ct-subline {
    text-align: center;
    color: var(--header);
    padding: 1rem 0 .25rem 0;
    font-weight: 700;
}

.rec-muted, .ct-muted {
    text-align: center;
    padding: .5rem 0 .25rem 0;
    color: inherit; /* readable */
}

.rec-office, .ct-office {
    text-align: center;
    font-weight: 700;
    margin: 1.25rem 0 .25rem 0;
}

.rec-change, .ct-change {
    text-align: center;
    color: var(--accent);
    margin: .25rem 0 0;
}
.fit-location-desc {
    text-align: center;
    padding:10px 10px;
}


/* -------- Mobile: list-style tables (Recreation/Game/Quiet or any .ct-table--list) -------- */
@media (max-width: 820px) {
    .rec-table, .ct-table--list {
        border: 0;
    }

        .rec-table thead, .ct-table--list thead {
            display: none;
        }

        .rec-table, .rec-table tbody, .rec-table tr, .rec-table td,
        .ct-table--list, .ct-table--list tbody, .ct-table--list tr, .ct-table--list td {
            display: block;
            width: 100%;
        }

            .rec-table tr, .ct-table--list tr {
                border: 1px solid var(--line);
                margin: .75rem 0;
                overflow: hidden;
            }

            .rec-table td, .ct-table--list td {
                border: 0;
                border-top: 1px solid var(--line);
                text-align: left;
                padding: .65rem 1rem;
            }

                .rec-table td:first-child, .ct-table--list td:first-child {
                    border-top: 0;
                }

                /* Show column label using data-label on each <td> */
                .rec-table td::before, .ct-table--list td::before {
                    display: inline-block;
                    font-weight: 700;
                    color: inherit; /* high-contrast labels */
                    margin-right: .25rem;
                }
}

/* -------- Mobile: days-as-columns (Group Fitness grid) -------- */
@media (max-width: 820px) {
    .gf, .ct-table--days-as-columns {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

        .gf th, .gf td,
        .ct-table--days-as-columns th, .ct-table--days-as-columns td {
            min-width: 10rem; /* ensures readable columns when scrolled */
        }
}

/* -------- Print tweaks -------- */
@media print {
    .gf caption, .rec-table caption, .ct-table caption {
        background: #fff;
    }

    .phase, .ct-phase {
        border: 1px solid currentColor;
        background: #fff;
    }
}

/* -------- Utility: visually hidden (for aria-labelledby targets) -------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}