/*
 * Game Leaderboard — Frontend Styles
 * Version: 1.0.0
 *
 * Zebra striping, medal highlights for top 3, responsive table.
 * All selectors scoped to .gl-leaderboard to avoid conflicts with Divi 5.
 *
 * Colour palette:
 *   --gl-accent     #06354b   Deep teal — matches On Yer Bike brand
 *   --gl-gold       #c8972a   Gold medal row
 *   --gl-silver     #8a9baa   Silver medal row
 *   --gl-bronze     #a0673a   Bronze medal row
 *   --gl-even       #f7f3ee   Warm off-white — even rows
 *   --gl-odd        #ffffff   White — odd rows
 *   --gl-head-bg    #06354b   Header background
 *   --gl-head-text  #ffffff   Header text
 */

.gl-leaderboard {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: sans-serif;
    margin: 1em 0 2em;
}

/* ── Heading ───────────────────────────────────────────────── */

.gl-heading {
    font-size: 1.25em;
    font-weight: bold;
    color: #06354b;
    margin: 0 0 0.75em;
    padding-bottom: 0.4em;
    border-bottom: 3px solid #06354b;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Scroll wrapper — lets table scroll horizontally on mobile ── */

.gl-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* ── Table base ─────────────────────────────────────────────── */

.gl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97em;
    min-width: 320px;   /* Prevents text from squashing too far on tiny screens */
}

/* ── Header row ─────────────────────────────────────────────── */

.entry-content .gl-leaderboard .gl-table thead th {
    background-color: var(--gcid-primary-color, #06354b);
    color: var(--gcid-secondary-color, #f7b84b);
    font-weight: bold;
    padding: 12px 16px;
    text-transform: uppercase;
    font-size: 0.82em;
    letter-spacing: 0.06em;
    border: none;
    white-space: nowrap;
}

/* ── Body rows — zebra striping ─────────────────────────────── */

.gl-table tbody .gl-row-even {
    background-color: #f7f3ee;
}

.gl-table tbody .gl-row-odd {
    background-color: #ffffff;
}

.gl-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── All body cells ──────────────────────────────────────────── */

.gl-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid #e8e2da;
    color: var(--gcid-text-color);
    vertical-align: middle;
}

/* ── Top-3 medal rows ───────────────────────────────────────── */

/* Gold — 1st */
.gl-table .gl-top-1 td {
    background-color: #fdf6e3;
    color: #6b4e0a;
    font-weight: bold;
}

/* Silver — 2nd */
.gl-table .gl-top-2 td {
    background-color: #f2f4f6;
    color: #3a4a56;
    font-weight: bold;
}

/* Bronze — 3rd */
.gl-table .gl-top-3 td {
    background-color: #faf1ea;
    color: #6b3d1a;
    font-weight: bold;
}

/* ── Column widths ───────────────────────────────────────────── */

.gl-table .gl-col-rank {
    width: 70px;
    text-align: center;
    white-space: nowrap;
    font-size: 1.05em;
}

.gl-table .gl-col-team {
    /* Takes remaining space */
}

.gl-table .gl-col-game {
    font-size: 0.88em;
    color: #666;
    max-width: 220px;
}

.gl-table .gl-col-points {
    width: 90px;
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 20px;
    font-variant-numeric: tabular-nums;
}

/* Points header aligned right to match cells */
.gl-table thead th.gl-col-points {
    text-align: right;
    padding-right: 20px;
}

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

.gl-empty {
    color: #777;
    font-style: italic;
    margin: 1em 0;
}

/* ── Hover effect — subtle feedback ─────────────────────────── */

.gl-table tbody tr:hover td {
    background-color: #eaf3f7;
    transition: background-color 0.15s ease;
}

/* Don't override medal rows on hover */
.gl-table .gl-top-1:hover td { background-color: #fdf0c8; }
.gl-table .gl-top-2:hover td { background-color: #e8ecf0; }
.gl-table .gl-top-3:hover td { background-color: #f5e8da; }

/* ── Responsive — stack rank + team on very small screens ─── */

@media ( max-width: 480px ) {
    .gl-table thead th,
    .gl-table tbody td {
        padding: 9px 10px;
    }

    .gl-table .gl-col-points {
        padding-right: 10px;
        width: 70px;
    }

    .gl-table .gl-col-rank {
        width: 52px;
        font-size: 0.95em;
    }

    .gl-heading {
        font-size: 1.05em;
    }
}

@media print {
    .gl-table-wrap {
        box-shadow: none;
    }
    .gl-table tbody tr:hover td {
        background-color: inherit;
    }
}