/* ==============================================================
   FRB Ranking — Plugin Styles
   Aligned with the Newsphere theme: Roboto/Rubik typography,
   sharp corners, magazine-style accents, #ffbf3f gold brand.
   ============================================================== */

:root {
    --frb-gold:        #ffbf3f;
    --frb-gold-dark:   #b38600;
    --frb-black:       #000000;
    --frb-text:        #1c1c1c;
    --frb-text-muted:  #6b7280;
    --frb-link:        #1a5fa8;
    --frb-border:      #e2e6eb;
    --frb-border-soft: #eef0f4;
    --frb-bg:          #ffffff;
    --frb-bg-alt:      #f7f8fa;
    --frb-bg-row:      #fafbfc;
    --frb-bg-hover:    #fff8e6;
    --frb-shadow:      0 2px 8px rgba(0, 0, 0, 0.06);
    --frb-transition:  150ms ease;
}

/* ── Wrapper ─────────────────────────────────────────────── */

.frb-ranking-wrapper {
    max-width: 100%;
    color: var(--frb-text);
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.frb-ranking-wrapper h2,
.frb-ranking-wrapper h3,
.frb-ranking-wrapper .frb-title,
.frb-ranking-wrapper .frb-event-title {
    font-family: 'Rubik', sans-serif;
}

/* Hide WP default chrome on plugin pages */
.page:has(.frb-ranking-wrapper) .entry-title,
.page:has(.frb-ranking-wrapper) .af-breadcrumbs-wrapper {
    display: none;
}

/* Override link colors on dropdown nav */
.frb-menu-item a,
.frb-menu-item a:visited,
.frb-menu-item a:link,
.frb-menu-item a:hover {
    color: var(--frb-text) !important;
    opacity: 1 !important;
    background: none !important;
}

.frb-ranking-wrapper a:visited,
.frb-player-link:visited { color: var(--frb-link) !important; }
.frb-ranking-wrapper a:visited:hover,
.frb-player-link:visited:hover { color: var(--frb-gold-dark) !important; }

/* ── Errors ──────────────────────────────────────────────── */

.frb-error {
    background: #fff8e1;
    border: 1px solid #f6c344;
    border-left: 4px solid var(--frb-gold);
    color: #6e4a00;
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 14px;
    border-radius: 0;
}

/* ── Titles ──────────────────────────────────────────────── */

.frb-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--frb-black);
    margin: 18px 0 14px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.3;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--frb-gold);
}

.frb-title i {
    color: var(--frb-black);
    margin-right: 4px;
    font-size: 18px;
}

.frb-date-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--frb-text-muted);
    font-family: 'Roboto', sans-serif;
}

/* ── Selectors (snapshot + category) ─────────────────────── */

.frb-snapshot-selector,
.frb-category-selector {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px 16px 0;
    padding: 9px 14px;
    background: var(--frb-bg-alt);
    border: 1px solid var(--frb-border);
    border-radius: 0;
}

.frb-snapshot-selector label,
.frb-category-selector label {
    font-size: 13px;
    font-weight: 600;
    color: var(--frb-black);
    margin: 0;
    line-height: 1;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.frb-snapshot-selector label i,
.frb-category-selector label i {
    color: var(--frb-black);
    font-size: 13px;
}

.frb-snapshot-selector select,
.frb-category-selector select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 7px 32px 7px 12px;
    border: 1px solid var(--frb-border);
    border-radius: 0;
    background-color: var(--frb-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: var(--frb-text);
    cursor: pointer;
    transition: border-color var(--frb-transition), background var(--frb-transition);
    line-height: 1.3;
}

.frb-snapshot-selector select:hover,
.frb-category-selector select:hover {
    border-color: var(--frb-gold);
    background-color: #fffaf0;
}

.frb-snapshot-selector select:focus,
.frb-category-selector select:focus {
    outline: none;
    border-color: var(--frb-gold);
    box-shadow: inset 0 0 0 1px var(--frb-gold);
}

/* ── Tables ──────────────────────────────────────────────── */

.frb-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    background: var(--frb-bg);
    border-radius: 0;
    margin-bottom: 24px;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--frb-border);
}

.frb-table thead th {
    background: var(--frb-black);
    color: var(--frb-bg);
    padding: 11px 14px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 2px solid var(--frb-gold);
    white-space: nowrap;
    font-family: 'Rubik', sans-serif;
}

.frb-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--frb-border-soft);
    vertical-align: middle;
    transition: background var(--frb-transition);
}

.frb-table tbody tr:nth-child(even) td {
    background: var(--frb-bg-row);
}

.frb-table tbody tr:hover td {
    background: var(--frb-bg-hover);
}

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

.frb-center { text-align: center; }
.frb-left   { text-align: left; }

/* ── Player Links ────────────────────────────────────────── */

.frb-player-link {
    color: var(--frb-link);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color var(--frb-transition), border-color var(--frb-transition);
}

.frb-player-link:hover {
    color: var(--frb-gold-dark);
    border-bottom-color: var(--frb-gold);
}

/* ── Summary Table (player page) ─────────────────────────── */

.frb-summary-table {
    width: auto;
    min-width: 320px;
    margin-bottom: 28px;
}

.frb-summary-table tbody td:first-child {
    text-align: left;
    font-weight: 500;
}

/* ── Event Sections ──────────────────────────────────────── */

.frb-event-section {
    margin-bottom: 28px;
}

.frb-event-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--frb-black);
    margin: 0 0 12px;
    padding: 6px 12px 6px 14px;
    border-left: 4px solid var(--frb-gold);
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.frb-event-title a,
.frb-event-title a:link,
.frb-event-title a:visited {
    color: var(--frb-black) !important;
    text-decoration: none;
    transition: color var(--frb-transition);
}

.frb-event-title a:hover {
    color: var(--frb-gold-dark) !important;
}

/* ── History Table ───────────────────────────────────────── */

.frb-history-table {
    width: auto;
}

.frb-history-table tbody td:first-child {
    text-align: left;
}

.frb-top-n td:first-child {
    font-weight: 700;
}

.frb-total-row td {
    border-bottom: none !important;
    border-top: 2px solid var(--frb-black);
    text-align: right;
    padding-top: 11px;
    padding-bottom: 4px;
    font-size: 14px;
    color: var(--frb-black);
    background: transparent !important;
    font-family: 'Rubik', sans-serif;
}

.frb-total-row strong {
    font-weight: 700;
    font-size: 14.5px;
}

/* ── Tournament Table ────────────────────────────────────── */

.frb-tournament-table thead th.frb-col-name { text-align: center; }

.frb-tournament-table td:first-child {
    text-align: left;
    white-space: nowrap;
}

/* ── Meta info (tournament details) ──────────────────────── */

.frb-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 8px 0 20px;
    padding: 12px 14px;
    background: var(--frb-bg-alt);
    border: 1px solid var(--frb-border);
    border-left: 4px solid var(--frb-gold);
    border-radius: 0;
    font-size: 13.5px;
    color: var(--frb-text);
}

.frb-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.frb-meta i { color: var(--frb-black); }

/* ── Legend ──────────────────────────────────────────────── */

.frb-legend {
    font-size: 12px;
    color: var(--frb-text-muted);
    margin: -4px 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
}

.frb-legend::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--frb-gold);
    border-radius: 50%;
}

/* ── Breadcrumb ──────────────────────────────────────────── */

.frb-breadcrumb {
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--frb-text-muted);
}

.frb-breadcrumb a {
    color: var(--frb-link);
    text-decoration: none;
    transition: color var(--frb-transition);
}

.frb-breadcrumb a:hover {
    color: var(--frb-gold-dark);
}

/* ── Category Navigation (legacy) ────────────────────────── */

.frb-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding: 14px;
    background: var(--frb-bg-alt);
    border: 1px solid var(--frb-border);
    border-radius: 0;
}

.frb-cat-group { min-width: 140px; }

.frb-cat-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--frb-black);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    font-family: 'Rubik', sans-serif;
}

.frb-cat-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.frb-cat-link {
    font-size: 13px;
    color: #555;
    padding: 3px 8px;
    text-decoration: none;
    transition: background var(--frb-transition), color var(--frb-transition);
}

.frb-cat-link:hover {
    background: #fff3c8;
    color: var(--frb-black);
}

.frb-cat-link.frb-active {
    background: var(--frb-gold);
    color: var(--frb-black);
    font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .frb-title { font-size: 19px; }
    .frb-date-subtitle { font-size: 13px; }

    .frb-snapshot-selector,
    .frb-category-selector {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: 6px 10px;
        margin: 0 0 14px;
    }

    .frb-snapshot-selector label,
    .frb-category-selector label {
        flex: 0 0 auto;
        font-size: 12px;
    }

    .frb-snapshot-selector select,
    .frb-category-selector select {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        text-overflow: ellipsis;
    }

    .frb-category-nav {
        flex-direction: column;
        gap: 10px;
    }

    .frb-table { font-size: 13px; }

    .frb-table thead th,
    .frb-table tbody td { padding: 7px 10px; }

    .frb-event-section,
    .frb-ranking-wrapper { overflow-x: auto; }

    .frb-meta {
        flex-direction: column;
        gap: 6px;
    }
}