/* SSv5 Webpage Parser v2.5.4 */
/* ==========================================================================
   Branding CSS – colors, typography, visual identity
   ========================================================================== */

/* ---------- Color variables ---------- */
:root {
    --brand-primary: #0c0f39;
    --brand-primary-dark: #000029;
    --brand-primary-light: #2c2f59;
    --brand-bg: #ffffff;
    --brand-surface: #ffffff;
    --brand-text: #515151;
    --brand-text-muted: #818181;
    --brand-border: #36c6f4;
    /* Main content area */
    --content-heading: #515151;
    --content-table-text: #515151;
    --welcome-heading: #0c0f39;
    /* Main content table zebra stripes */
    --row-stripe-1: #ffffff;
    --row-stripe-2: #ffffff;
    --row-border: #36c6f4;
    --row-hover: #fff3cd;
    /* Sidebar table zebra stripes */
    --sidebar-row-stripe-1: #ffffff;
    --sidebar-row-stripe-2: #ffffff;
    --sidebar-row-border: #36c6f4;
    --sidebar-row-hover: #d4e8ff;
/* --    --sidebar-bg: #ffffff; -- */
    --sidebar-bg: #ffffff;
    --sidebar-text: #515151;
    --sidebar-table-text: #515151;
    --sidebar-link: #ed166f;
    --sidebar-heading: #515151;
    --sidebar-section-bg: #0c0f39;
    --header-bg: #0c0f39;
    --header-text: #ffffff;
    /* Session jumper widget */
    --jumper-bg: #f7f7f7;
    --jumper-border: #e5e5e5;
    --jumper-title: var(--sidebar-text);
    --jumper-btn-bg: var(--brand-primary);
    --jumper-btn-text: #ffffff;
    --jumper-toggle-bg: #f5f5f5;
    --jumper-day-bg: #f7f7f7;
    --jumper-day-label: var(--sidebar-text);
    /* Session TOP buttons */
    --top-btn-bg: #fafafa;
    --top-btn-text: var(--sidebar-text);
    --top-btn-border: #e0e0e0;
    /* Event header board */
    --ehb-bg: radial-gradient(circle at center top, #ffffffF2, #ffffffd6 38%, #f2f7fcf0), linear-gradient(#f9fbfe, #eaf2f8);
    --ehb-border: #166ba31f;
    --ehb-shadow: 0 16px 36px #00000014;
    --ehb-col-bg: #ffffffd9;
    --ehb-col-shadow: inset 0 0 0 1px #166ba31a;
    --ehb-label-color: #0d6b9e;
    --ehb-value-color: #16354b;
    --ehb-title-color: #16354b;
    /* Event header board – sub-headings (age groups) */
    --ehb-sub-bg: #ffffffd9;
    --ehb-sub-border: var(--brand-border);
    --ehb-sub-shadow: #00000008;
    --ehb-sub-col-bg: #ffffff;
    --ehb-sub-title-color: #000000;
    /* Live result enhancements */
    --badge-bg: var(--brand-primary);
    --badge-text: #ffffff;
    --podium-gold: #D4AF37;
    --podium-silver: #A8A9AD;
    --podium-bronze: #CD7F32;
}

/* ---------- Typography ---------- */
body {
    font-family: "Nunito", -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-table-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-table-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;
}

/* ---------- Session jumper branding ---------- */
.session-jumper-btn {
    background: var(--jumper-btn-bg);
    color: var(--jumper-btn-text) !important;
}

.session-jumper-btn:hover {
    color: var(--jumper-btn-text) !important;
}

.session-top-link {
    color: var(--top-btn-text) !important;
}

/* ---------- Live result branding ---------- */
.latest-result-badge {
    background: var(--badge-bg);
    color: var(--badge-text);
}

/* ---------- Event header board branding ---------- */
.event-header-board {
    background: var(--ehb-bg);
    border: 1px solid var(--ehb-border);
    box-shadow: var(--ehb-shadow);
}

.ehb-event,
.ehb-stage,
.ehb-title {
    background: var(--ehb-col-bg);
    box-shadow: var(--ehb-col-shadow);
}

.ehb-label {
    color: var(--ehb-label-color);
}

.ehb-value {
    color: var(--ehb-value-color);
}

.ehb-title-text {
    color: var(--ehb-title-color);
}

/* Sub-heading variant branding */
.ehb-sub {
    background: var(--ehb-sub-bg);
    border-color: var(--ehb-sub-border);
    box-shadow: 0 2px 8px var(--ehb-sub-shadow);
}

.ehb-sub .ehb-event,
.ehb-sub .ehb-stage {
    background: var(--ehb-sub-col-bg);
}

.ehb-sub .ehb-title-text {
    color: var(--ehb-sub-title-color);
}

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

.content h3 {
    color: var(--content-heading);
    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(--content-table-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(--content-table-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(--content-table-text) !important;
}

.content td.t6_left,
.content td.t6_centre,
.content td.t6_right {
    background: var(--row-stripe-2) !important;
    color: var(--content-table-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;
}

/* Loading shimmer bar – brand-tinted */
.content-loading::after {
    background: linear-gradient(90deg, var(--brand-border) 25%, var(--brand-primary-light) 50%, var(--brand-border) 75%);
    background-size: 400px 4px;
}

/* Welcome ripple – use brand color */
.welcome::before,
.welcome::after {
    border-color: var(--brand-primary);
}

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

.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;
}