/* ==========================================================================
   Branding CSS – colors, typography, visual identity
   ========================================================================== */

/* ---------- Color variables ---------- */
:root {
    --brand-primary: #b51c25;
    --brand-primary-dark: #8e151c;
    --brand-primary-light: #d4434b;
    --brand-bg: #ffffff;
    --brand-surface: #f5f5f5;
    --brand-text: #333333;
    --brand-text-muted: #666666;
    --brand-border: #e0e0e0;
    /* Main content table zebra stripes */
    --row-stripe-1: #ffffff;
    --row-stripe-2: #f9f9f9;
    --row-border: #e0e0e0;
    --row-hover: #fff3cd;
    /* Sidebar table zebra stripes */
    --sidebar-row-stripe-1: #f0f0f0;
    --sidebar-row-stripe-2: #e8e8e8;
    --sidebar-row-border: #dddddd;
    --sidebar-row-hover: #d4e8ff;
/* --    --sidebar-bg: #1a1a2e; -- */
    --sidebar-bg: #f0f0f0;
    --sidebar-text: #000000;
    --sidebar-link: #000000;
    --sidebar-heading: #000000;
    --sidebar-section-bg: var(--brand-primary);
    --header-bg: var(--brand-primary);
    --header-text: #ffffff;
}

/* ---------- Typography ---------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--brand-text);
    background: var(--brand-surface);
}

h1 { font-size: 1.1rem; font-weight: 600; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }

/* ---------- Header branding ---------- */
.site-header {
    background: var(--header-bg);
    color: var(--header-text);
    box-shadow: 0 2px 8px #00000026;
}

/* Event title in the header bar – style independently of other h1 tags */
.event-title {
    color: var(--header-text);
    font-size: 1.1rem;
    font-weight: 600;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    background-color: var(--header-text);
}

.nav-toggle:hover {
    background: #ffffff26;
}

/* ---------- Sidebar branding ---------- */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid #ffffff14;
}

.sidebar a {
    color: var(--sidebar-link);
    transition: color 0.15s ease;
}

.sidebar a:hover {
    color: var(--brand-primary-light);
}

.sidebar h2, .sidebar h3 {
    color: var(--sidebar-heading);
    margin: 0.75rem 0 0.25rem;
    font-size: 1rem;
}

.sidebar h5 {
    color: var(--sidebar-text);
    opacity: 0.6;
    font-weight: 400;
    font-size: 0.75rem;
}

/* Sidebar table section headers (t2 class inside sidebar) */
.sidebar td.t2 {
    background: var(--brand-primary) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Rounded corners on sidebar header rows */
.sidebar tr:first-child td.t2:first-child {
    border-top-left-radius: 0.4rem;
}
.sidebar tr:first-child td.t2:last-child {
    border-top-right-radius: 0.4rem;
}
.sidebar tr:first-child td.t2[colspan] {
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
}

/* Bottom rounded corners on last row of sidebar tables */
.sidebar table tr:last-child td:first-child {
    border-bottom-left-radius: 0.4rem;
}
.sidebar table tr:last-child td:last-child {
    border-bottom-right-radius: 0.4rem;
}

/* Sidebar data rows */
.sidebar td.t1_left,
.sidebar td.t1_centre,
.sidebar td.t1_right,
.sidebar td.t1_split {
    background: var(--sidebar-row-stripe-1) !important;
    color: var(--sidebar-text) !important;
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--sidebar-row-border);
}

.sidebar td.t4_left,
.sidebar td.t4_centre,
.sidebar td.t4_right,
.sidebar td.t4_split {
    background: var(--sidebar-row-stripe-2) !important;
    color: var(--sidebar-text) !important;
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--sidebar-row-border);
}

.sidebar td a {
    text-decoration: none;
}

.sidebar td a:hover {
    text-decoration: underline;
}

.sidebar tr {
    height: auto;
}

/* ---------- Main content branding ---------- */
.content {
    background: var(--brand-bg);
}

.content h3 {
    color: var(--brand-text);
    margin: 1rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-primary);
}

/* Result / start list table styling */
.content td.t2 {
    background: var(--brand-primary) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0.5rem 0.625rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.content td.t1_left,
.content td.t1_centre,
.content td.t1_right,
.content td.t1_split {
    background: var(--row-stripe-1) !important;
    color: var(--brand-text) !important;
    padding: 0.4rem 0.625rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--row-border);
}

.content td.t4_left,
.content td.t4_centre,
.content td.t4_right,
.content td.t4_split {
    background: var(--row-stripe-2) !important;
    color: var(--brand-text) !important;
    padding: 0.4rem 0.625rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--row-border);
}

/* Smaller split-time columns */
.content td.t5_left,
.content td.t5_centre,
.content td.t5_right,
.content td.t6_left,
.content td.t6_centre,
.content td.t6_right {
    padding: 0.4rem 0.5rem;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--row-border);
}

.content td.t5_left,
.content td.t5_centre,
.content td.t5_right {
    background: var(--row-stripe-1) !important;
    color: var(--brand-text) !important;
}

.content td.t6_left,
.content td.t6_centre,
.content td.t6_right {
    background: var(--row-stripe-2) !important;
    color: var(--brand-text) !important;
}

.content tr {
    height: auto;
    transition: background 0.1s ease;
}

/* Hover highlight on result rows */
.content table tr:hover td.t1_left,
.content table tr:hover td.t1_centre,
.content table tr:hover td.t1_right,
.content table tr:hover td.t1_split,
.content table tr:hover td.t4_left,
.content table tr:hover td.t4_centre,
.content table tr:hover td.t4_right,
.content table tr:hover td.t4_split {
    background: var(--row-hover) !important;
}

/* Hover highlight on sidebar rows */
.sidebar table tr:hover td.t1_left,
.sidebar table tr:hover td.t1_centre,
.sidebar table tr:hover td.t1_right,
.sidebar table tr:hover td.t1_split,
.sidebar table tr:hover td.t4_left,
.sidebar table tr:hover td.t4_centre,
.sidebar table tr:hover td.t4_right,
.sidebar table tr:hover td.t4_split {
    background: var(--sidebar-row-hover) !important;
}

/* Podium highlights for top 3 */
.content table tr:first-of-type + tr td.t1_centre:first-child,
.content table tr:first-of-type + tr + tr + tr td.t1_centre:first-child {
    font-weight: 700;
}

/* Welcome state */
.welcome h2 {
    color: var(--brand-primary);
}

.welcome p {
    color: var(--brand-text-muted);
    font-size: 1rem;
}

/* ---------- Links in content ---------- */
.content a {
    color: var(--brand-primary);
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
    color: var(--brand-primary-dark);
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 767px) {
    .event-title {
        font-size: 0.9rem;
    }

    .content h3 {
        font-size: 0.95rem;
    }

    .content td {
        font-size: 0.78rem !important;
        padding: 0.3rem 0.4rem !important;
    }
}

/* ---------- Scrollbar styling (sidebar) ---------- */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #ffffff33;
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #ffffff59;
}