/* MECCA — CSS extracted from page-champions.php (Session 4) */

/* block 0 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* Editorial warm newspaper design */
.mrchamps-page { background: #F5F3EE !important; color: #1A1A1A; min-height: 80vh; }
.mrchamps-hero {
    background: #F5F3EE;
    padding: 60px 24px 52px;
    text-align: center;
    border-bottom: 2px solid #1A1A1A;
    overflow: hidden;
}
.mrchamps-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 400;
    letter-spacing: -0.5px;
    color: #1A1A1A;
    margin: 0 auto 14px;
    line-height: 1.1;
    max-width: 900px;
}
.mrchamps-hero p {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: #444444;
    max-width: 520px;
    margin: 0 auto 24px;
    line-height: 1.6;
}
.mrchamps-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #1A1A1A;
    padding: 10px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #444444;
}
.mrchamps-hero-stat strong { color: #D9500A; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; }

.mrchamps-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

/* LINEAGE TABS */
.mrchamps-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.mrchamps-tab {
    padding: 10px 24px;
    border: 1px solid #CCCCCC;
    background: transparent;
    color: #444444;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    white-space: nowrap;
}
.mrchamps-tab:hover { background: #1A1A1A; color: #F5F3EE; border-color: #1A1A1A; }
.mrchamps-tab.active { background: #D9500A; color: #fff; border-color: #D9500A; }

/* LINEAGE SECTIONS */
.mrchamps-lineage { display: none; }
.mrchamps-lineage.active { display: block; }

.mrchamps-lineage-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1A1A1A;
    margin: 0 0 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1A1A1A;
}
.mrchamps-lineage-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #888888;
    margin-bottom: 28px;
    margin-top: 8px;
}

/* ERA SECTIONS */
.mrchamps-era-block {
    margin-bottom: 32px;
}
.mrchamps-era-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #CCCCCC;
}
.mrchamps-era-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mrchamps-era-dot.modern  { background: #D9500A; }
.mrchamps-era-dot.mx1era  { background: #1A1A1A; }
.mrchamps-era-dot.pre2004 { background: #888888; }
.mrchamps-era-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444444;
}
.mrchamps-era-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: #888888;
    margin-left: auto;
}

/* CHAMPIONS TABLE */
.mrchamps-table-wrap { overflow-x: auto; border: none; }
.mrchamps-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    border: none !important;
}
.mrchamps-table thead th {
    background: transparent !important;
    color: #888888 !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 14px !important;
    text-align: left;
    border: none !important;
    border-bottom: 2px solid #1A1A1A !important;
    white-space: nowrap;
}
.mrchamps-table tbody tr {
    border: none !important;
    transition: background .1s;
}
.mrchamps-table tbody tr:hover { background: rgba(217,80,10,0.04) !important; }
.mrchamps-table td {
    padding: 12px 14px !important;
    vertical-align: middle;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    color: #1A1A1A;
    background-image: linear-gradient(to right, #1A1A1A 24%, transparent 0%) !important;
    background-size: 4px 1px !important;
    background-repeat: repeat-x !important;
    background-position: bottom !important;
}
.mrchamps-table tbody tr:last-child td {
    background-image: none !important;
}
.mrchamps-table a { color: #1A1A1A !important; text-decoration: none !important; }
.mrchamps-table a:hover { color: #D9500A !important; }
.mrchamps-year {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
    white-space: nowrap;
    width: 70px;
}
.mrchamps-class {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    color: #888888;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mrchamps-rider {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 15px;
    color: #1A1A1A;
}
.mrchamps-nat {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #444444;
}
.mrchamps-bike {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #888888;
    font-style: italic;
}

/* Rider name links */
.mrchamps-rider-link {
    color: #1A1A1A;
    text-decoration: none;
    transition: color .1s;
}
.mrchamps-rider-link:hover { color: #D9500A; }

@media (max-width: 640px) {
    .mrchamps-nat, .mrchamps-bike { display: none; }
    .mrchamps-tab { font-size: 11px; padding: 8px 10px; }
}

/* The class column became links on 17 Aug 2026, when the historical classes got
   their own pages. It stays the muted secondary column it was designed as, and
   follows the same idiom as .mrchamps-rider-link in the neighbouring cell: no
   underline, accent on hover. Colour is inherited rather than set, so the cell
   keeps whatever .mrchamps-class defines and this rule never has to track it. */
.mrchamps-class-link {
    color: inherit;
    text-decoration: none;
    transition: color .1s;
}
.mrchamps-class-link:hover { color: #D9500A; }
.mrchamps-class-link:focus-visible {
    outline: 2px solid #D9500A;
    outline-offset: 2px;
}