/* ======================================================
   GLOBAL
====================================================== */

:root{
    --bg-dark: #0e0e0e;
    --card-dark: #111;
    --border-dark: #222;
    --accent-red: #c00000;

    /* REGION COLORS */
    --region-west: #c00000;
    --region-central: #ffffff;
    --region-east: #1e5eff;
    --region-joker: #00b140;
    --region-koh: #ff7a00;
    --region-nationals: #ff7a00;
}

body{
  
    color:#fff;
    font-family:'Oswald', sans-serif;
}

/* ======================================================
   DRIVERS HERO
====================================================== */

.u4-drivers-hero{
    text-align:center;
    margin-bottom:80px;
}

.u4-drivers-hero h1{
    font-size:80px;
    letter-spacing:6px;
    text-transform:uppercase;
    margin:0;
    display:inline-block;
    position:relative;
}

.u4-drivers-hero h1::after{
    content:'';
    display:block;
    width:90px;
    height:4px;
    background:var(--accent-red);
    margin:20px auto 0;
}

.u4-drivers-hero p{
    margin-top:20px;
    font-size:14px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#777;
}

/* ======================================================
   COLLAPSIBLE CLASS SECTIONS
====================================================== */

.u4-class-section{
    background:var(--card-dark);
    border:1px solid var(--border-dark);
    border-radius:8px;
    margin-bottom:40px;
    overflow:hidden;
}

.u4-class-title{
    padding:22px 30px;
    font-size:28px;
    letter-spacing:2px;
    text-transform:uppercase;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    border-left:6px solid var(--accent-red);
    background:linear-gradient(90deg,#151515,#1c1c1c);
}
/* ======================================================
   CLASS HEADER COLOR GRADIENTS
====================================================== */

/* 4400 – Red */
.u4-class-4400 .u4-class-title{
    border-left-color:#c40000;
    background:linear-gradient(90deg,#2a0000,#1c1c1c);
}

/* 4500 – Blue */
.u4-class-4500 .u4-class-title{
    border-left-color:#0066cc;
    background:linear-gradient(90deg,#001a33,#1c1c1c);
}

/* 4600 – Green */
.u4-class-4600 .u4-class-title{
    border-left-color:#2ea800;
    background:linear-gradient(90deg,#0d1f00,#1c1c1c);
}

/* 4800 – Orange */
.u4-class-4800 .u4-class-title{
    border-left-color:#ff7a00;
    background:linear-gradient(90deg,#2a1400,#1c1c1c);
}

/* 4900 UTV – Stock */
.u4-class-4900-utv-stock .u4-class-title{
    border-left-color:#009999;
    background:linear-gradient(90deg,#002020,#1c1c1c);
}

/* 4900 UTV – Modified */
.u4-class-4900-utv-modified .u4-class-title{
    border-left-color:#00d9ff;
    background:linear-gradient(90deg,#001f26,#1c1c1c);
}

/* 4900 UTV – Open */
.u4-class-4900-utv-open .u4-class-title{
    border-left-color:#7fff00;
    background:linear-gradient(90deg,#102600,#1c1c1c);
}

/* Youth 1000 */
.u4-class-utv-youth-1000 .u4-class-title{
    border-left-color:#ffd400;
    background:linear-gradient(90deg,#2a2600,#1c1c1c);
}

/* 170 Stock */
.u4-class-utv-170-stock .u4-class-title{
    border-left-color:#3a7bd5;
    background:linear-gradient(90deg,#101a30,#1c1c1c);
}

/* 170 Limited */
.u4-class-utv-170-limited .u4-class-title{
    border-left-color:#ff9900;
    background:linear-gradient(90deg,#2a1a00,#1c1c1c);
}

/* 170 Modified */
.u4-class-utv-170-modified .u4-class-title{
    border-left-color:#ff00aa;
    background:linear-gradient(90deg,#2a0020,#1c1c1c);
}

.u4-toggle-indicator{
    transition:transform .3s ease;
}

.u4-class-section.closed .u4-toggle-indicator{
    transform:rotate(-90deg);
}

.u4-driver-grid{
    padding:30px;
    transition:max-height .4s ease, opacity .3s ease;
}

.u4-class-section.closed .u4-driver-grid{
    max-height:0;
    opacity:0;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
}
.u4-class-section{
    transition:box-shadow .3s ease;
}

.u4-class-4400:hover{ box-shadow:0 0 0 1px rgba(196,0,0,.2); }
.u4-class-4500:hover{ box-shadow:0 0 0 1px rgba(0,102,204,.2); }
.u4-class-4600:hover{ box-shadow:0 0 0 1px rgba(46,168,0,.2); }
/* ======================================================
   DRIVER GRID
====================================================== */

.u4-driver-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(520px,1fr));
    gap:40px;
}

/* ======================================================
   DRIVER CARD
====================================================== */

.u4-driver-card{
    display:flex;
    height:230px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--border-dark);
    background:var(--card-dark);
    text-decoration:none;
    color:#fff;
    transition:.25s ease;
    position:relative;
}

.u4-driver-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.6);
}

.u4-driver-photo{
    width:45%;
}

.u4-driver-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.u4-driver-info{
    width:55%;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

/* =================================
   CONTAIN CLASS SECTIONS
================================= */

.u4-drivers-page{
    max-width:100%;
    margin:0 auto;
    padding:100px 5%;
}

.u4-class-section{
    margin-left:auto;
    margin-right:auto;
}
/* ======================================================
   DRIVER CLASS COLOR SYSTEM
====================================================== */

/* 4400 – Deep Red */
.u4-class-4400 .u4-driver-info{
    background:linear-gradient(135deg,#2a0000,#b30000);
}

/* 4500 – Blue */
.u4-class-4500 .u4-driver-info{
    background:linear-gradient(135deg,#001a33,#0066cc);
}

/* 4600 – Green */
.u4-class-4600 .u4-driver-info{
    background:linear-gradient(135deg,#001a00,#2ea800);
}

/* 4800 – Orange */
.u4-class-4800 .u4-driver-info{
    background:linear-gradient(135deg,#2a1400,#ff7a00);
}

/* 4900 UTV Stock */
.u4-class-4900-utv-stock .u4-driver-info{
    background:linear-gradient(135deg,#002020,#009999);
}

/* 4900 UTV Modified */
.u4-class-4900-utv-modified .u4-driver-info{
    background:linear-gradient(135deg,#001f26,#00d9ff);
}

/* 4900 UTV Open */
.u4-class-4900-utv-open .u4-driver-info{
    background:linear-gradient(135deg,#102600,#7fff00);
}

/* Youth 1000 */
.u4-class-utv-youth-1000 .u4-driver-info{
    background:linear-gradient(135deg,#2a2600,#ffd400);
}

/* 170 Stock */
.u4-class-utv-170-stock .u4-driver-info{
    background:linear-gradient(135deg,#101a30,#3a7bd5);
}

/* 170 Limited */
.u4-class-utv-170-limited .u4-driver-info{
    background:linear-gradient(135deg,#2a1a00,#ff9900);
}

/* 170 Modified */
.u4-class-utv-170-modified .u4-driver-info{
    background:linear-gradient(135deg,#2a0020,#ff00aa);
}
/* DRIVER NAME */

.u4-driver-info h3{
    font-family:'Racing Sans One', sans-serif;
    font-size:30px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin:0 0 14px 0;
    position:relative;
}

.u4-driver-info h3 span{
    display:block;
}
.u4-driver-info{
    background-size:200% 200%;
    transition:background-position .6s ease;
}

.u4-driver-card:hover .u4-driver-info{
    background-position:100% 0%;
}
/* UNDERLINE ANIMATION */

.u4-driver-info h3::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#fff;
    transition:width .25s ease;
}

.u4-driver-card:hover h3::after{
    width:100%;
}

.u4-driver-location{
    font-family:'Racing Sans One', sans-serif;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#ccc;
}
/* =================================
   SUBTLE GRID TEXTURE
================================= */

.u4-driver-info{
    position:relative;
    overflow:hidden;
}

.u4-driver-info::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size:6px 6px;
    pointer-events:none;
}


/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:900px){

    .u4-driver-grid{
        grid-template-columns:1fr;
    }

    .u4-driver-card{
        flex-direction:column;
        height:auto;
    }

    .u4-driver-photo{
        width:100%;
        height:260px;
    }

    .u4-driver-info{
        width:100%;
    }

    .u4-event-row{
        flex-direction:column;
    }

    .u4-event-row-logo{
        width:100%;
    }

}
/* Kill Elementor link hover color */
.u4-drivers-page a,
.u4-drivers-page a:visited,
.u4-drivers-page a:hover,
.u4-drivers-page a:focus{
    color:inherit !important;
    text-decoration:none !important;
}
/* Kill Elementor link hover color */
.u4-events-page a,
.u4-events-page a:visited,
.u4-events-page a:hover,
.u4-events-page a:focus{
    color:inherit !important;
    text-decoration:none !important;
}
/* ======================================
   STANDINGS LAYOUT
====================================== */

.u4-standings{
    max-width:1400px;
    margin:80px auto;
    padding:0 5%;
}

/* Tabs */

.u4-standings-tabs{
    display:flex;
    gap:20px;
    margin-bottom:50px;
}

.u4-tab-btn{
    background:#151515;
    border:1px solid #333;
    padding:14px 30px;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor:pointer;
    color:#aaa;
    transition:.25s ease;
}

.u4-tab-btn.active,
.u4-tab-btn:hover{
    background:#c00000;
    border-color:#c00000;
    color:#fff;
}

/* Views */

.u4-standings-view{
    display:none;
}

.u4-standings-view.active{
    display:block;
}

/* Class Section */

.u4-standings-class{
    margin-bottom:60px;
}

.u4-standings-class-title{
    font-size:26px;
    text-transform:uppercase;
    border-left:6px solid #c00000;
    padding-left:16px;
    margin-bottom:20px;
}

/* Table */

.u4-standings-table{
    width:100%;
    border-collapse:collapse;
    background:#151515;
}

.u4-standings-table th{
    background:#1f1f1f;
    padding:14px;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:2px;
}

.u4-standings-table td{
    padding:14px;
    border-bottom:1px solid #222;
}

.u4-standings-table tr:hover{
    background:#1a1a1a;
}

.u4-points{
    font-weight:700;
}
/* ===========================
   RESULTS TAB VISIBILITY
=========================== */

.u4-results-view {
    display: none;
}

.u4-results-view.active {
    display: block;
}

/* ===========================
   RESULTS TABS STYLE
=========================== */

.u4-results-tabs {
    margin-bottom:40px;
}

.u4-tab-btn {
    background:#1a1a1a;
    color:#aaa;
    border:1px solid #222;
    padding:12px 22px;
    margin-right:10px;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:.25s ease;
}

.u4-tab-btn:hover {
    background:#2a2a2a;
}

.u4-tab-btn.active {
    background:#c00000;
    color:#fff;
    border-color:#c00000;
}

/* ===============================
   RESULTS PAGE BASE
=============================== */

.u4-results-page{
    background:#000;
    padding:100px 8%;
    color:#fff;
    font-family:'Oswald', sans-serif;
}

/* ===============================
   HERO
=============================== */

.u4-results-hero{
    text-align:center;
    margin-bottom:60px;
}

.u4-results-hero h1{
    font-size:80px;
    letter-spacing:6px;
    text-transform:uppercase;
    margin:0;
    display:inline-block;
    position:relative;
}
.u4-results-hero p{
    margin-top:15px;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}
/* ===============================
   ACCORDION BASE
=============================== */

.u4-event-accordion,
.u4-class-accordion{
    border:1px solid #1f1f1f;
    margin-bottom:25px;
    background:#141414;
    overflow:hidden;
    transition:.3s ease;
}

/* Header */

.u4-accordion-header,
.u4-class-header{
    padding:18px 30px;
    font-size:20px;
    letter-spacing:2px;
    text-transform:uppercase;
    cursor:pointer;
    background:linear-gradient(90deg,#151515,#1f1f1f);
    border-left:5px solid #c00000;
    transition:.25s ease;
}

.u4-accordion-header:hover,
.u4-class-header:hover{
    background:#1f1f1f;
}

/* Body */
/* Smooth accordion */
.u4-accordion-body,
.u4-class-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease, opacity .3s ease;
    opacity:0;
}

.u4-accordion-body.open,
.u4-class-body.open{
    max-height:2000px;
    opacity:1;
}
/* ===============================
   TABS
=============================== */

.u4-results-tabs{
    margin-bottom:50px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.u4-tab-btn{
    background:#1a1a1a;
    border:1px solid #222;
    color:#aaa;
    padding:12px 26px;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:.25s ease;
}

.u4-tab-btn:hover{
    background:#252525;
}

.u4-tab-btn.active{
    background:#c00000;
    border-color:#c00000;
    color:#fff;
}
/* ===============================
   RESULTS TABLE
=============================== */

.u4-results-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.u4-results-table th{
    background:#c00000;
    color:#fff;
    text-align:left;
    padding:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:12px;
}

.u4-results-table td{
    padding:14px 12px;
    border-bottom:1px solid #1f1f1f;
}

.u4-results-table tr:nth-child(even){
    background:#151515;
}

/* Hover */

.u4-results-table tr:hover{
    background:#1c1c1c;
}

/* ===============================
   RANK EMPHASIS
=============================== */

.u4-results-table td:first-child{
    font-weight:700;
    font-size:15px;
}

/* Leader row */
.u4-results-table tr:first-child{
    background:linear-gradient(90deg,#2a0000,#151515);
    font-weight:600;
}
.u4-results-table a{
    color:#fff;
    text-decoration:none;
    transition:.2s ease;
}

.u4-results-table a:hover{
    text-decoration:underline;
}
/* ===============================
   PODIUM STYLING
=============================== */

/* Gold */
.u4-results-table tr:nth-child(2){
    background:linear-gradient(90deg,#3a2a00,#151515);
}

/* Silver */
.u4-results-table tr:nth-child(3){
    background:linear-gradient(90deg,#2a2a2a,#151515);
}

/* Bronze */
.u4-results-table tr:nth-child(4){
    background:linear-gradient(90deg,#3a1e00,#151515);
}

/* Rank number emphasis */
.u4-results-table tr:nth-child(-n+4) td:first-child{
    font-size:16px;
    font-weight:700;
}
.u4-results-table th{
    position:sticky;
    top:0;
    z-index:2;
}
/* Leader glow */
.u4-results-table tr:nth-child(2){
    box-shadow:0 0 15px rgba(255,215,0,.15);
}

/* Championship leader in national tab */
.u4-results-view[data-view="national"] 
.u4-results-table tr:nth-child(2){
    box-shadow:0 0 25px rgba(255,0,0,.25);
}
/* West */
.u4-results-view[data-view="west"] .u4-class-header{
    border-left-color:#c00000;
}

/* Central */
.u4-results-view[data-view="central"] .u4-class-header{
    border-left-color:#ffffff;
}

/* East */
.u4-results-view[data-view="east"] .u4-class-header{
    border-left-color:#1e5eff;
}

/* National */
.u4-results-view[data-view="national"] .u4-class-header{
    border-left-color:#ff7a00;
}
/* ===============================
   HIERARCHY INDENT SYSTEM
=============================== */

/* Class accordion container */
.u4-class-accordion{
    margin-left:30px;                 /* indent class under event */
    border-left:3px solid #333;
}

/* Class header */
.u4-class-header{
    padding-left:20px;
    font-size:18px;
    background:linear-gradient(90deg,#131313,#1a1a1a);
}

/* Results table wrapper */
.u4-class-body{
    margin-left:25px;                /* further indent */
    background:#0f0f0f;
    border-left:2px solid #222;
    padding-left:20px;
}

/* Event level stronger bar */
.u4-accordion-header{
    border-left:5px solid #c00000;
}

/* Class level softer bar */
.u4-class-header{
    border-left:4px solid #444;
}

/* When class open */
.u4-class-body.open{
    border-left-color:#c00000;
}

/* Accordion arrow */
.u4-accordion-header::after,
.u4-class-header::after{
    content:'›';
    float:right;
    transition:transform .3s ease;
}

/* Rotate when open */
.u4-accordion-body.open + *,
.u4-class-body.open + *{
    transform:rotate(90deg);
}
/* ===============================
   EVENT DATE STYLE
=============================== */

.u4-accordion-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

.u4-event-title{
    font-size:20px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.u4-event-date{
    font-size:13px;
    letter-spacing:1px;
    color:#888;
    text-transform:uppercase;
}

/* ===============================
   HIGH-END MOTORSPORT HEADER
=============================== */
/* ===============================
   GLASS TIMING HEADER
=============================== */

.u4-results-table th{
    background:rgba(15,15,15,0.85);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    color:#ffffff;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700;
    font-size:12px;

    padding:16px 14px;

    border-bottom:3px solid #c00000;
    border-top:1px solid #2a2a2a;

    position:sticky;
    top:0;
    z-index:3;
}

/* Subtle metallic top highlight */
.u4-results-table th::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(
        90deg,
        #333 0%,
        #555 50%,
        #333 100%
    );
}

/* Vertical column separators */
.u4-results-table th + th{
    border-left:1px solid #1f1f1f;
}

/* Strong separation from rows */
.u4-results-table tr:first-child td{
    border-top:1px solid #1f1f1f;
}
/* So header stands out cleanly */
.u4-results-table tr:nth-child(2){
    background:linear-gradient(90deg,#2a1c00,#151515);
}

.u4-results-table tr:nth-child(3){
    background:linear-gradient(90deg,#2a2a2a,#151515);
}

.u4-results-table tr:nth-child(4){
    background:linear-gradient(90deg,#2a1200,#151515);
}

/* ===============================
   TIMING SOFTWARE GRIDLINES
=============================== */

.u4-results-table{
    border-collapse:collapse;
}

/* Horizontal lines */
.u4-results-table td{
    border-bottom:1px solid rgba(255,255,255,0.06);
}

/* Vertical gridlines */
.u4-results-table td + td,
.u4-results-table th + th{
    border-left:1px solid rgba(255,255,255,0.05);
}

/* Subtle row separation */
.u4-results-table tr{
    transition:background .2s ease;
}
.u4-results-table td{
    padding:12px 12px;
    font-size:13px;
}

/* Right align numeric columns */
.u4-results-table td:nth-child(n+3),
.u4-results-table th:nth-child(n+3){
    text-align:right;
    font-variant-numeric: tabular-nums;
}

/* Slight fade for non-leaders */
.u4-results-table tr:not(:nth-child(-n+4)) td{
    opacity:0.85;
}

/* Emphasize Total column */
.u4-results-table td:last-child,
.u4-results-table th:last-child{
    font-weight:700;
}

/* Championship leader accent */
.u4-results-table tr:nth-child(2) td:first-child{
    color:#ffd700;
}
/* ===============================
   EVENT HEADER – LEFT LAYOUT
=============================== */

.u4-accordion-header{
    display:flex;
    align-items:center;
    gap:50px;
    padding:40px 60px;
}

/* LOGO */

.u4-event-logo{
    width:260px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.u4-event-logo img{
    max-width:100%;
    max-height:150px;
    width:auto;
    height:auto;
    object-fit:contain;
}

/* TEXT BLOCK */

.u4-event-meta{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.u4-event-title{
    font-size:34px;
    letter-spacing:3px;
    text-transform:uppercase;
    line-height:1.1;
}

.u4-event-date{
    margin-top:10px;
    font-size:13px;
    letter-spacing:2px;
    color:#c00000;
}

/* =====================================
   FORCE LEFT HORIZONTAL EVENT HEADER
===================================== */

.u4-results-page .u4-accordion-header{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;

    gap:50px;
    padding:40px 60px;
}

/* LOGO BLOCK */

/* =====================================
   EVENT LOGO NORMALIZATION
===================================== */

.u4-results-page .u4-event-logo{
    width:240px;              /* fixed width */
    height:160px;             /* fixed height */
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#0f0f0f;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:6px;

    padding:20px;
}

/* Normalize image scaling */
.u4-results-page .u4-event-logo img{
    max-width:100%;
    max-height:200px;         /* controls visual consistency */
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}

/* Ensure header layout stays aligned */
.u4-results-page .u4-accordion-header{
    display:flex;
    align-items:center;
    gap:50px;
}

/* META BLOCK */

.u4-results-page .u4-event-meta{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
}

.u4-results-page .u4-event-title{
    font-family:'Racing Sans One', sans-serif !important;
    font-size:34px !important;
    letter-spacing:3px !important;
    text-transform:uppercase !important;
    text-align:left !important;
}

.u4-results-page .u4-event-date{
    margin-top:10px !important;
    font-size:13px !important;
    letter-spacing:2px !important;
    color:#c00000 !important;
    text-align:left !important;
}

/* ========================================
   SLIM GLOBAL COUNTDOWN BAR
======================================== */

.u4-global-countdown{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;

    padding:10px 30px;   /* smaller height */
    min-height:60px;

    background:#0f0f0f;
    border-bottom:1px solid #1f1f1f;
}

/* Logo */

.u4-countdown-logo{
    width:120px;
}

.u4-countdown-logo img{
    max-height:50px;
    object-fit:contain;
}

/* Text block */

.u4-countdown-info{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:25px;
}

/* Event title */

.u4-countdown-title{
    font-family:'Racing Sans One', sans-serif;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* Timer */

.u4-countdown-timer{
    display:flex;
    gap:18px;
    font-weight:600;
    font-size:13px;
}

.u4-countdown-timer span{
    color:#c00000;
}

/* LIVE state */

.u4-live{
    color:#ff0000;
    font-weight:700;
}

.u4-page-hero{
background:url('https://jgkhxloz.elementor.cloud/wp-content/uploads/2026/03/00HF1910-scaled.png') center/cover no-repeat;
padding:140px 20px 80px;
text-align:center;
position:relative;
overflow:hidden;
}

.u4-page-hero:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,.6) 0%,
rgba(0,0,0,.85) 60%,
rgba(0,0,0,1) 100%
);
}

.u4-hero-inner{
position:relative;
z-index:2;
}

.u4-page-hero h1{
color:#fff;
font-size:80px;
letter-spacing:6px;
font-weight:800;
text-transform:uppercase;
margin-bottom:12px;
}

.u4-page-hero p{
color:#bbb;
letter-spacing:4px;
font-size:14px;
}

.u4-page-hero h1{
position:relative;
}

.u4-page-hero h1:after{
content:'';
display:block;
width:70px;
height:3px;
background:#e10600;
margin:18px auto;
}

.u4-sponsor-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;
align-items:center;
}

.u4-sponsor-card img{
max-height:80px;
width:auto;
margin:auto;
display:block;
opacity:.8;
transition:.3s;
}

.u4-sponsor-card img:hover{
opacity:1;
transform:scale(1.05);
}


.u4-leaderboard{
    width:100%;
    max-width:600px;
    margin:auto;
    font-family:Oswald,Arial;
}

.u4-leader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    margin-bottom:8px;
    background:#111;
    border-left:4px solid #e10600;
}

.u4-rank{
    font-size:22px;
    font-weight:700;
    width:40px;
}

.u4-driver{
    flex:1;
    font-size:18px;
    padding-left:10px;
}

.u4-points{
    font-weight:700;
    color:#fff;
}
.u4-driver-filters{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr auto;
    gap:12px;

    max-width:1400px;
    margin:40px auto 30px auto;
    padding:0 20px;
}

#u4Search{

    background:#111;
    border:1px solid #333;
    color:#fff;

    padding:14px 16px;
    font-size:14px;

    border-radius:6px;
}

#u4Search::placeholder{
    color:#777;
}

.u4-driver-filters select{

    background:#111;
    border:1px solid #333;
    color:#fff;

    padding:14px 16px;
    font-size:14px;

    border-radius:6px;
    cursor:pointer;

}

#u4ResetFilters{

    background:#c00000;
    border:none;
    color:white;

    padding:14px 18px;
    border-radius:6px;

    font-weight:600;
    cursor:pointer;

    transition:all .2s ease;
}

#u4ResetFilters:hover{
    background:#ff0000;
}

.u4-driver-filters select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='white'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
}

@media (max-width:900px){

.u4-driver-filters{

grid-template-columns:1fr 1fr;

}

#u4Search{
grid-column:span 2;
}

}

.u4-driver-filters{
    position:sticky;
    top:80px;
    z-index:50;
    background:#0e0e0e;
    padding:15px;
}
.u4-driver-info h3{

display:flex;
flex-direction:column;
line-height:1.1;
margin:6px 0;

}

.u4-driver-info h3 span:first-child{

font-size:34px;
font-weight:400;
color:#aaa;

}

.u4-driver-info h3 span:last-child{

font-size:38px;
font-weight:700;
letter-spacing:.5px;

}

/* MOBILE MENU PANEL */

.elementor-nav-menu--dropdown{
    background:#0e0e0e !important;
    border-top:1px solid #222;
}

/* MOBILE MENU LINKS */

.elementor-nav-menu--dropdown a{
    color:#ffffff !important;
    font-family:'Oswald', sans-serif;
    letter-spacing:1px;
}

/* HOVER STATE */

.elementor-nav-menu--dropdown a:hover{
    background:#1a1a1a;
    color:#e10600 !important;
}

/* ACTIVE PAGE */

.elementor-nav-menu--dropdown .current-menu-item > a{
    color:#e10600 !important;
}

/* MOBILE MENU DIVIDERS */

.elementor-nav-menu--dropdown li{
    border-bottom:1px solid #1f1f1f;
}

/* HAMBURGER ICON */

.elementor-menu-toggle{
    color:#ffffff !important;
}

/* HAMBURGER HOVER */

.elementor-menu-toggle:hover{
    color:#e10600 !important;
}

/* ===============================
   HOMEPAGE NEWS MOBILE FIX
=============================== */

@media (max-width: 768px){

    /* Make the news container stack */
    .u4-news-grid,
    .u4-news-feed,
    .u4-home-news{
        display:flex !important;
        flex-direction:column !important;
        gap:25px;
    }

    /* Prevent cards from overlapping */
    .u4-news-card,
    .u4-news-item{
        position:relative !important;
        width:100% !important;
        height:auto !important;
    }

    /* Fix images */
    .u4-news-card img,
    .u4-news-item img{
        width:100% !important;
        height:auto !important;
        object-fit:cover;
    }

    /* Ensure text stays below images */
    .u4-news-content{
        position:relative !important;
        padding:15px 0;
    }

}

/* =================================
   HOMEPAGE NEWS MOBILE FIX
================================= */

@media (max-width:768px){

    /* Force vertical layout */
    .u4-news-grid,
    .u4-home-news{
        display:flex !important;
        flex-direction:column !important;
        gap:30px;
    }

    /* Each news card */
    .u4-news-card{
        width:100% !important;
        position:relative !important;
        height:auto !important;
    }

    /* Image */
    .u4-news-card img{
        width:100% !important;
        height:220px !important;
        object-fit:cover;
        border-radius:8px;
    }

    /* Text container */
    .u4-news-content{
        position:relative !important;
        padding:15px 0;
    }

}

/* Featured news story */

@media (max-width:768px){

.u4-news-card:first-child img{
    height:280px !important;
}

.u4-news-card:first-child h3{
    font-size:28px !important;
}

}

@media (max-width:768px){

.u4-news-card{
    padding-bottom:10px;
}

.u4-news-card a{
    display:block;
}

}
/* ===============================
   HOMEPAGE HERO MOBILE FIX
=============================== */

@media (max-width:768px){

    /* Allow the hero section to grow */
    .elementor-section,
    .elementor-container,
    .elementor-widget-wrap{
        height:auto !important;
        min-height:unset !important;
    }

    /* Fix overlapping buttons */
    .elementor-button-wrapper{
        position:relative !important;
        margin-bottom:12px;
    }

    /* Prevent text overlay stacking */
    .elementor-heading-title{
        position:relative !important;
        transform:none !important;
    }

    /* Ensure hero content stacks */
    .elementor-widget-heading,
    .elementor-widget-button{
        width:100% !important;
    }

}

/* CHAMPIONSHIP TITLE */

.u4-champ-title{
text-align:center;
font-size:42px;
font-weight:900;
letter-spacing:2px;
margin-bottom:30px;
}

/* CLASS BUTTONS */

.u4-champ-tabs{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:30px;
flex-wrap:wrap;
}

.u4-champ-tab{
background:#111;
border:1px solid #333;
color:#bbb;
padding:10px 18px;
font-weight:700;
cursor:pointer;
transition:.3s;
border-radius:6px;
}

.u4-champ-tab:hover{
background:#1c1c1c;
}

.u4-champ-tab.active{
background:#ff0000;
color:#fff;
border-color:#ff0000;
}

/* LEADER PANEL */

.u4-champ-leader{
display:flex;
align-items:center;
gap:20px;
background:#111;
padding:20px;
margin-bottom:20px;
border-left:5px solid #ff0000;
}

.u4-champ-leader img{
width:120px;
height:120px;
object-fit:cover;
border-radius:8px;
}

.u4-champ-leader h2{
margin:0;
font-size:26px;
}

.u4-champ-leader h2 a{
color:#fff;
text-decoration:none;
}

.u4-champ-leader-points{
color:#ff0000;
font-weight:700;
margin-top:5px;
}

/* BATTLE ROW */

.u4-champ-row{
display:grid;
grid-template-columns:40px 40px 1fr 1fr 90px;
align-items:center;
gap:12px;
padding:12px 10px;
border-bottom:1px solid #222;
}

.u4-champ-rank{
font-weight:700;
opacity:.6;
}

/* DRIVER PHOTO */

.u4-champ-photo{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
}

/* DRIVER NAME */

.u4-champ-driver a{
color:#fff;
text-decoration:none;
font-weight:600;
}

.u4-champ-driver a:hover{
color:#ff0000;
}

/* BAR */

.u4-champ-bar{
background:#222;
height:6px;
border-radius:3px;
overflow:hidden;
}

.u4-champ-fill{
width:0;
height:6px;
background:#ff0000;
transition:width .8s ease;
}

/* POINTS */

.u4-champ-points{
text-align:right;
font-weight:700;
color:#bbb;
}

/* MOBILE */

@media(max-width:700px){

.u4-champ-row{
grid-template-columns:30px 30px 1fr;
}

.u4-champ-bar,
.u4-champ-points{
display:none;
}
}
/* CLASS PANELS */

.u4-champ-class{
display:none;
}

.u4-champ-class.active{
display:block;
}
.u4-champ-fill{
width:0;
height:6px;
background:#ff0000;
border-radius:3px;
transition:width .8s ease;
}

/* HEADER BAR */

/* HEADER BAR */

.u4-header-bar{
background:#000;
border-bottom:2px solid #c00000;
overflow:hidden;
}



/* ======================================================
SPONSOR SCROLL STRIP
====================================================== */

.u4-sponsor-track{
    width:100%;
    overflow:hidden;
    background:#000;
    border-top:1px solid #1a1a1a;
    border-bottom:1px solid #1a1a1a;
    padding:12px 0;
}

/* Moving container */

.u4-sponsor-row{

    display:flex;
    align-items:center;

    gap:70px;

    width:max-content;

    animation:u4SponsorScroll 45s linear infinite;

}

/* Logo size */

.u4-sponsor-row img{

    height:28px;
    width:auto;

    max-width:160px;

    object-fit:contain;

    filter:grayscale(100%);
    opacity:.7;

    transition:.25s ease;

}

/* Hover */

.u4-sponsor-row img:hover{
    filter:none;
    opacity:1;
    transform:scale(1.05);
}

/* Scroll animation */

@keyframes u4SponsorScroll{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}


/* NEXT EVENT BAR */

.u4-next-event-bar{

background:#0a0a0a;
border-bottom:1px solid #1a1a1a;

display:flex;
justify-content:center;
align-items:center;

gap:12px;

padding:6px 20px;

font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;

}

.u4-event-label{
color:#777;
}

.u4-event-name{
color:#fff;
font-weight:600;
}

.u4-event-venue{
color:#aaa;
}

.u4-event-countdown{
color:#c00000;
font-weight:700;
}

.u4-sponsor-track{
background:#000;
overflow:hidden;
border-top:1px solid #222;
border-bottom:1px solid #222;
}

.u4-sponsor-row{
display:flex;
gap:60px;
align-items:center;
animation:u4SponsorScroll 45s linear infinite;
}

.u4-sponsor-row img{
height:28px;
opacity:.5;
filter:grayscale(100%);
transition:.3s;
}

.u4-sponsor-row img:hover{
opacity:1;
filter:none;
transform:scale(1.1);
}

@keyframes u4SponsorScroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* =========================
   SPONSOR STRIP
========================= */

.u4-sponsor-track{
    width:100%;
    overflow:hidden;
    background:#000;
    border-top:1px solid #222;
    border-bottom:1px solid #222;
}

.u4-sponsor-row{
    display:flex;
    align-items:center;
    gap:60px;
    width:max-content;
    animation:u4-scroll 40s linear infinite;
    padding:12px 0;
}

.u4-sponsor-row a{
    display:flex;
    align-items:center;
}

.u4-sponsor-row img{
    height:30px;
    opacity:.6;
    filter:grayscale(100%);
    transition:.3s ease;
}

.u4-sponsor-row img:hover{
    opacity:1;
    filter:none;
}

/* smooth infinite scroll */
@keyframes u4-scroll{
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}

.u4-header-spacer{
    height:0px;
}

.u4-next-event-bar{
    width:100%;
    background:#000;
    color:#fff;
    text-align:center;
    padding:14px 10px;
    font-family:'Oswald', sans-serif;
    letter-spacing:1px;
    border-bottom:2px solid #c00000;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

/* LABEL */
.u4-event-label{
    color:#c00000;
    font-weight:700;
    font-size:14px;
}

/* EVENT NAME */
.u4-event-name{
    font-size:20px;
    font-weight:700;
    text-transform:uppercase;
}

/* VENUE */
.u4-event-venue{
    font-size:14px;
    opacity:.7;
}

/* COUNTDOWN (MAKE THIS POP) */
.u4-event-countdown{
    font-size:20px;
    font-weight:700;
    color:#ff3b3b;
}

/* HEADER NAV PUSH DOWN */
.site-header,
header{
    position:relative;
    z-index:10;
}

/* SPONSOR STRIP (FORCED BELOW NAV) */
.u4-sponsor-track{
    position:relative;
    z-index:5;
    margin-top:0;
}

/* GRID */
.u4-sponsor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    padding:50px 20px;
}

/* CARD */
.u4-sponsor-card{
    background:#111;
    border:1px solid #1c1c1c;
    padding:30px 20px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:420px;
    transition:.3s ease;
}

.u4-sponsor-card:hover{
    border-color:#c00000;
    transform:translateY(-5px);
}

/* LOGO */
.u4-sponsor-logo img{
    max-height:60px;
    margin-bottom:20px;
    
    opacity:.8;
}

.u4-sponsor-card:hover img{
    filter:none;
    opacity:1;
}

/* DESCRIPTION */
.u4-sponsor-desc{
    font-size:13px;
    line-height:1.6;
    color:#ccc;
    margin-bottom:20px;
}

/* BUTTON */
.u4-sponsor-btn{
    display:inline-block;
    background:#c00000;
    color:#fff;
    padding:10px 18px;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    transition:.2s;
}

.u4-sponsor-btn:hover{
    background:#ff0000;
}


/* ===== PAGE ===== */
.u4-results{
    color:#fff;
    padding:60px 40px;
    font-family:'Oswald', sans-serif;
}

/* TITLE */
.u4-results-title{
    text-align:center;
    font-size:64px;
    letter-spacing:8px;
    margin-bottom:5px;
}

.u4-results-sub{
    text-align:center;
    font-size:12px;
    letter-spacing:3px;
    opacity:.5;
    margin-bottom:40px;
}

/* ===== TABS ===== */
.u4-tabs{
    display:flex;
    gap:10px;
    margin-bottom:30px;
}

.u4-tab{
    background:#1a1a1a;
    border:1px solid #333;
    padding:10px 18px;
    font-size:12px;
    letter-spacing:1px;
    cursor:pointer;
    transition:.2s;
}

.u4-tab:hover{
    background:#222;
}

.u4-tab.active{
    background:#c00000;
    border-color:#c00000;
}

/* ===== CLASS BLOCK ===== */
.u4-class-block{
    margin-bottom:20px;
}

/* HEADER (accordion bar) */
.u4-class-header{
    background:linear-gradient(to right,#111,#1a1a1a,#111);
    padding:16px;
    font-size:16px;
    letter-spacing:2px;
    border-left:4px solid #ff8c00;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* arrow */
.u4-class-header::after{
    content:'›';
    font-size:20px;
    opacity:.6;
}

/* TABLE WRAPPER */
.u4-class-table{
    display:none;
    background:#0b0b0b;
    border-left:2px solid #c00000;
}

.u4-class-table.open{
    display:block;
}

/* ===== TABLE ===== */
.u4-class-table table{
    width:100%;
    border-collapse:collapse;
}

/* HEADER */
.u4-class-table th{
    background:linear-gradient(to right,#3a0000,#1a0000);
    color:#fff;
    font-size:12px;
    letter-spacing:2px;
    padding:12px;
    text-align:left;
}

/* ROWS */
.u4-class-table td{
    padding:12px;
    border-bottom:1px solid #1a1a1a;
    font-size:13px;
}

/* ROW STRIPING */
.u4-class-table tr:nth-child(even){
    background:#111;
}

/* HOVER */
.u4-class-table tr:hover{
    background:#1a1a1a;
}

/* TOP 3 HIGHLIGHT */
.u4-class-table tr:nth-child(1){
    background:linear-gradient(to right,#5a3a00,#2a1a00);
    font-weight:700;
}

.u4-class-table tr:nth-child(2){
    background:rgba(255,255,255,0.05);
}

.u4-class-table tr:nth-child(3){
    background:rgba(255,255,255,0.03);
}

.u4-tab[data-region="west"].active { background:#c00000; }
.u4-tab[data-region="central"].active { background:#ffffff; color:#000; }
.u4-tab[data-region="east"].active { background:#1e5eff; }


.u4-event-panel{
    padding-top:20px;
}

.u4-event-panel select{
    background:#111;
    color:#fff;
    border:1px solid #333;
    padding:10px 15px;
    margin-bottom:20px;
}

.u4-section-title{
    font-size:22px;
    margin-bottom:10px;
}

.u4-results-table a,
.u4-standings-table a,
.u4-driver a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.u4-results-table a:hover,
.u4-standings-table a:hover,
.u4-driver a:hover {
    color: #c00000;
}

/* ===============================
   TOP TABS (NATIONAL / WEST / ETC)
=============================== */

.u4-tabs{
    display:flex;
    gap:10px;
    margin-bottom:25px;
    flex-wrap:wrap;
}

.u4-tab{
    background:#111;
    color:#fff;
    border:1px solid #333;
    padding:10px 18px;
    font-weight:600;
    letter-spacing:1px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.u4-tab:hover{
    background:#c00000;
    border-color:#c00000;
}

.u4-tab.active{
    background:#c00000;
    border-color:#c00000;
    box-shadow:0 0 10px rgba(192,0,0,0.6);
}

.u4-class-header{
    font-size:22px;
    font-weight:700;
    padding:12px 15px;
    background:#111;
    border-left:5px solid #c00000;
    margin-top:25px;
    cursor:pointer;
    letter-spacing:1px;
}

.u4-class-table table{
    width:100%;
    border-collapse:collapse;
    background:#0e0e0e;
}

.u4-class-table th{
    text-align:left;
    padding:12px;
    background:#1a1a1a;
    font-size:14px;
    letter-spacing:1px;
    border-bottom:2px solid #c00000;
}

.u4-class-table td{
    padding:12px;
    border-bottom:1px solid #222;
    font-size:15px;
}

.u4-class-table tr{
    transition:all 0.15s ease;
}

.u4-class-table tr:hover{
    background:#1a1a1a;
}

/* 🥇 1st */
.u4-class-table tbody tr:nth-child(1){
    background:linear-gradient(90deg,#3a2a00,#1a1a1a);
    font-weight:700;
}

/* 🥈 2nd */
.u4-class-table tbody tr:nth-child(2){
    background:linear-gradient(90deg,#2a2a2a,#1a1a1a);
}

/* 🥉 3rd */
.u4-class-table tbody tr:nth-child(3){
    background:linear-gradient(90deg,#3a1f00,#1a1a1a);
}

.u4-total{
    font-weight:700;
    color:#00b140;
    font-size:16px;
}

.u4-class-table a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.u4-class-table a:hover{
    color:#c00000;
}

.u4-results-title{
    font-size:42px;
    letter-spacing:3px;
    margin-bottom:5px;
}

.u4-results-sub{
    color:#aaa;
    margin-bottom:20px;
}

.u4-tabs{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.u4-tab{
    background:#111;
    color:#fff;
    border:1px solid #333;
    padding:10px 20px;
    cursor:pointer;
}

.u4-tab.active{
    background:#c00000;
    border-color:#c00000;
}

.u4-class-title{
    margin-top:40px;
    font-size:24px;
}

.u4-table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}

.u4-table th{
    background:#c00000;
    color:#fff;
    padding:10px;
}

.u4-table td{
    padding:10px;
    border-bottom:1px solid #222;
}

.u4-table tr:hover{
    background:#111;
}

.u4-class-filter{
    text-align:center;
    margin:20px 0;
}

#u4-class-filter{
    background:#111;
    color:#fff;
    border:1px solid #333;
    padding:10px 16px;
    font-size:16px;
    text-transform:uppercase;
}

.u4-table tbody tr:first-child{
    background: linear-gradient(90deg, rgba(255,0,0,0.25), transparent);
    font-weight: bold;
    border-left: 3px solid #ff0000;
}

.u4-table tbody tr:nth-child(-n+5){
    background: rgba(255,255,255,0.03);
}

.col-total{
    color:#00ff88;
    font-weight:700;
}

.u4-tabs, .u4-class-filter{
    position: sticky;
    top: 0;
    background: #000;
    z-index: 10;
    padding: 10px 0;
}

.u4-table tbody tr:hover{
    background: rgba(255,0,0,0.08);
    cursor:pointer;
}

.u4-tab img{
    height: 110px;
    width: auto;
    display: block;
}

.u4-tab{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
}

/* WRAPPER */
.u4-event-tabs-wrapper{
    display: block;
    width: 100%;
}

/* TABS ROW */
.u4-event-tabs{
    display: flex;
    justify-content: center; /* CENTER THEM */
    gap: 12px;
    margin-bottom: 30px;
}

/* CONTENT AREA */
.u4-event-content{
    width: 100%;
}

.u4-event-container{
    display: block !important;
}

/* ONLY EVENT PAGE */
.single-u4_event .u4-tabs{
    display:block !important;
}

.single-u4_event .u4-event-container{
    display:block !important;
}

/* RESULTS PAGE (restore layout) */
.u4-results .u4-tabs{
    display:flex;
    align-items:flex-start;
    gap:20px;
}
.u4-results .u4-tab img{
    width:auto;
    height:110px; /* 🔥 control size here */
    max-width:100%;
    object-fit:contain;
}

.u4-results .u4-tabs{
    justify-content:flex-start;
}

/* TAB CONTAINER */
.u4-results .u4-tabs{
    display:flex;
    justify-content:center;
    gap:clamp(10px, 2vw, 20px);
    flex-wrap:wrap;
}

/* TAB BUTTON */
.u4-results .u4-tab{
    flex:0 0 auto;
    padding:clamp(10px, 1.5vw, 16px);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* LOGO IMAGE */
.u4-results .u4-tab img{
    width:auto;
    height:clamp(50px, 6vw, 90px); /* 🔥 MAGIC LINE */
    object-fit:contain;
    display:block;
}

@media (max-width:600px){

    .u4-results .u4-tabs{
        justify-content:center;
        gap:10px;
    }

    .u4-results .u4-tab{
        padding:8px;
    }

    .u4-results .u4-tab img{
        height:55px;
    }
}

/* WRAP TABLE */
.u4-table{
    width:100%;
    border-collapse:collapse;
}

/* SCROLL CONTAINER */
.u4-class-block{
    overflow-x:auto;
}

/* PREVENT SQUISH */
.u4-table th,
.u4-table td{
    white-space:nowrap;
    padding:10px;
}

.u4-class-block{ overflow-x:auto; }
.u4-table td, .u4-table th{ white-space:nowrap; }


/* GRID */
.u4-driver-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap:30px;
}

/* WRAP */
.u4-driver-grid-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

/* CARD */
.u4-driver-row{
    display:flex;
    align-items:center;
    gap:20px;

    padding:20px 22px;
    min-height:110px;

    border-radius:10px;
    text-decoration:none;
    color:#fff;

    position:relative;
    overflow:hidden;

    background: linear-gradient(145deg, #111, #0b0b0b);
    border: 1px solid rgba(255,255,255,0.05);

    box-shadow: 0 4px 12px rgba(0,0,0,0.4);

    transition: all .2s ease;
}

/* HOVER */
.u4-driver-row:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    border-color: rgba(192,0,0,0.6);
}

/* EDGE GLOW */
.u4-driver-row::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:10px;
    padding:1px;
    background: linear-gradient(135deg, transparent, rgba(192,0,0,0.4));
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* TEXTURE */
.u4-driver-row::after{
    content:'';
    position:absolute;
    inset:0;
    background-image: url('/wp-content/uploads/texture.png');
    background-size: cover;
    opacity:0.08;
    mix-blend-mode: overlay;
    pointer-events:none;
}

/* IMAGE */
.u4-driver-left{
    width:110px;
    height:110px;
    flex-shrink:0;
    border-radius:8px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
}

.u4-driver-left img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform .3s ease;
}

.u4-driver-row:hover .u4-driver-left img{
    transform: scale(1.05);
}

/* CONTENT */
.u4-driver-middle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
}

/* NAME */
.u4-driver-name{
    display:flex;
    flex-direction:column;
    font-size:30px;
    line-height:1.1;
}

.u4-driver-name .first{
    font-weight:300;
}

.u4-driver-name .last{
    font-weight:700;
}

/* HOMETOWN */
.u4-driver-hometown{
    font-size:18px;
    color:#aaa;
    margin-top:4px;
}

/* NUMBER */
.u4-driver-number{
    position:absolute;
    top:10px;
    right:14px;

    font-size:28px;
    font-weight:900;

    color:rgba(255,255,255,0.08);

    pointer-events:none;
}
.u4-az-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.u4-az-nav a{
    padding:6px 10px;
    background:#111;
    border:1px solid #222;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    border-radius:4px;
}

.u4-az-nav a:hover{
    border-color:#c00000;
}
.u4-letter-heading{
    font-size:28px;
    margin:40px 0 15px;
    border-bottom:1px solid #222;
    padding-bottom:5px;
}
.u4-az-nav{
    position:sticky;
    top:80px;
    background:#000;
    z-index:10;
    padding:10px 0;
}

html{
    scroll-behavior:smooth;
}

.u4-az-nav a.active{
    background:#c00000;
    color:#fff;
    border-color:#c00000;
}

.u4-az-nav{
    position:sticky;
    top:80px;
    background:#000;
    z-index:20;
    padding:10px 0;
}

.u4-hero{
    position:relative;
    height:420px;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:30px;
}

.u4-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(0.6);
}

.u4-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.u4-hero-content{
    position:absolute;
    bottom:30px;
    left:30px;
    right:30px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}

.u4-hero-number{
    font-size:90px;
    font-weight:900;
    color:rgba(255,255,255,0.15);
}

.u4-stat{
    background:linear-gradient(145deg,#111,#0b0b0b);
    border-radius:10px;
    padding:25px;
    text-align:center;
    border:1px solid rgba(255,255,255,0.05);
}

.u4-number{
    font-size:42px;
    font-weight:900;
}

.u4-results-table tr:hover{
    background:rgba(255,255,255,0.03);
}

.u4-results-table td{
    padding:12px;
    border-bottom:1px solid #222;
}
@media (max-width:768px){

    .u4-hero{
        height:260px;
    }

    .u4-hero-content{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        bottom:20px;
        left:20px;
        right:20px;
    }

    .u4-name{
        font-size:28px;
    }

    .u4-hero-number{
        font-size:48px;
        align-self:flex-end;
    }

}
@media (max-width:768px){

    .u4-stats{
        grid-template-columns: 1fr;
    }

}
@media (max-width:768px){

 
    .u4-summary-grid{
        grid-template-columns: 1fr 1fr;
    }

}

}
.u4-results-table{
    width:100%;
}

@media (max-width:768px){

    .u4-results-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}
@media (max-width:768px){

    .u4-vehicle-box{
        grid-template-columns:1fr;
    }

}
@media (max-width:768px){

    .u4-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .u4-headshot img{
        width:140px;
        height:140px;
        object-fit:cover;
        border-radius:10px;
    }

}
@media (max-width:768px){

    .u4-wrapper{
        padding:15px;
    }

    .u4-card{
        padding:18px;
    }

}
*,
*::before,
*::after{
    box-sizing: border-box;
}
.u4-card{
    width:100%;
    max-width:100%;
}
@media (max-width:768px){

    .u4-summary-grid{
        grid-template-columns: 1fr;
    }

}
@media (max-width:768px){

    .u4-stats{
        grid-template-columns: 1fr;
    }

    .u4-summary-grid{
        grid-template-columns: 1fr;
    }

}
.u4-stat,
.u4-summary-item{
    width:100%;
    min-width:0;
}
.u4-card{
    overflow:hidden;
}
.u4-stat.red{
    width:100%;
}

.u4-card{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.u4-stats,
.u4-summary-grid{
    display:grid;
    width:100%;
    max-width:100%;
    grid-template-columns: repeat(3, 1fr);
    gap:16px;
}

.u4-stat,
.u4-summary-item{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

@media (max-width:768px){

    .u4-stats,
    .u4-summary-grid{
        display:flex;
        flex-direction:column;
        gap:14px;
    }

}

.u4-stats,
.u4-summary-grid{
    width:100%;
    overflow:hidden;
}

.u4-stat,
.u4-summary-item{
    width:100%;
    min-width:0;
    padding:20px; /* reduce from 25px */
}

.u4-stats,
.u4-summary-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 🔥 KEY CHANGE */
    gap:16px;
}

@media (max-width:768px){

    .u4-stats,
    .u4-summary-grid{
        display:grid;
        grid-template-columns: 1fr;
        gap:14px;
    }

}

.u4-event-row-logo img{
    width:100%;
    height:auto;
    max-height:140px;
    object-fit:contain;
}
.u4-event-hero{
    position:relative;
    height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}

/* BACKGROUND IMAGE */
.u4-event-hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    z-index:1;
}

/* DARK OVERLAY */
.u4-event-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.85)
    );
    z-index:2;
}

/* CONTENT */
.u4-event-hero-content{
    position:relative;
    z-index:3;
    color:#fff;
}

/* REGION */
.u4-event-region{
    color:#c00000;
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:10px;
    text-transform:uppercase;
}

/* TITLE */
.u4-event-title{
    font-size:52px;
    font-weight:800;
    margin:0;
    letter-spacing:1px;
}

/* DATE */
.u4-event-date{
    margin-top:10px;
    font-size:18px;
    color:#ccc;
}

/* MOBILE */
@media(max-width:768px){

    .u4-event-hero{
        height:300px;
        padding:0 20px;
    }

    .u4-event-title{
        font-size:28px;
    }

}
.u4-event-hero::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:120px;
    background:linear-gradient(to bottom, transparent, #000);
    z-index:2;
}
.u4-event-hero-content{
    position:relative;
    z-index:3;
    color:#fff;

    display:flex;
    flex-direction:column;
    align-items:center;   /* 👈 centers horizontally */
    justify-content:center;
    text-align:center;    /* 👈 centers text */

    max-width:900px;
    margin:0 auto;
}
.u4-event-title{
    font-size:52px;
    font-weight:800;
    margin:10px 0;
}

.u4-event-date{
    font-size:18px;
    color:#ccc;
    margin-bottom:15px;
}

#u4-countdown{
    margin:15px 0;
}


@media(max-width:768px){
    .u4-event-hero-logo{
        max-width:160px;
    }
}
.u4-event-top-card{
    max-width:900px;
    margin:-60px auto 40px; /* 👈 pulls it up slightly into hero */
    padding:25px;
    background:#111;
    border:1px solid #222;
    text-align:center;
    position:relative;
    z-index:5;
}

@media(max-width:768px){
    .u4-event-top-card{
        margin:-40px 15px 30px;
    }
}
.u4-event-hero-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    text-align:center;
}


@media(max-width:768px){
    .u4-event-hero-logo{
        max-width:160px;
    }
}
.u4-event-top-card{
    max-width:900px;
    margin:-80px auto 40px;
    padding:35px 25px;

    background:linear-gradient(145deg, #111, #0c0c0c);
    border:1px solid #222;

    text-align:center;
    position:relative;
    z-index:5;

    box-shadow:0 20px 50px rgba(0,0,0,0.6);
}

.u4-event-title{
    font-size:36px;
    letter-spacing:2px;
    margin-bottom:10px;
}

.u4-event-date{
    color:#aaa;
    margin-bottom:20px;
}

.u4-event-region{
    color:#c00000;
    font-size:12px;
    letter-spacing:2px;
    margin-bottom:8px;
}

@media(max-width:768px){
    .u4-event-top-card{
        margin:-50px 15px 30px;
        padding:25px 15px;
    }

    .u4-event-title{
        font-size:24px;
    }
}
.u4-event-hero-logo{
    width:clamp(280px, 30vw, 520px);
    max-width:90%;
    transform: translateY(-10px);
    filter: drop-shadow(0 15px 40px rgba(0,0,0,0.9));
}
.u4-wrapper,
.u4-card,
.u4-header{
    transform: none !important;
}
/* =========================
   SOCIAL ICON ROW
========================= */

.u4-social-row{
    display:flex;
    gap:16px;
    margin-top:20px;
}

/* =========================
   ICON BOX
========================= */

.u4-social-icon{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#111;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:6px;

    position:relative;
    z-index:2;

    transition:all 0.2s ease;
}

/* =========================
   ICON IMAGE
========================= */

.u4-social-icon img{
    width:28px;
    height:28px;
    object-fit:contain;

    /* makes PNGs look crisp on dark */
    filter:brightness(1.2) contrast(1.1);

    pointer-events:none;
}

/* =========================
   HOVER EFFECT
========================= */

.u4-social-icon:hover{
    transform:translateY(-3px);
    border-color:#c00000;
    background:#181818;
}

.u4-social-icon:hover img{
    filter:brightness(1.4) contrast(1.2);
}

/* =========================
   TOOLTIP
========================= */

.u4-social-icon::after{
    content:attr(data-tooltip);
    position:absolute;

    bottom:60px;
    left:50%;
    transform:translateX(-50%);

    background:#111;
    color:#fff;

    padding:6px 10px;
    font-size:11px;
    letter-spacing:1px;

    border:1px solid #333;
    border-radius:3px;

    white-space:nowrap;

    opacity:0;
    pointer-events:none;

    transition:opacity 0.2s ease;
}

/* tooltip arrow */
.u4-social-icon::before{
    content:"";
    position:absolute;

    bottom:52px;
    left:50%;
    transform:translateX(-50%);

    border:6px solid transparent;
    border-top-color:#111;

    opacity:0;
}

/* show tooltip */
.u4-social-icon:hover::after,
.u4-social-icon:hover::before{
    opacity:1;
}

/* =========================================
   EVENTS GRID (PRO LEVEL)
========================================= */

.u4-events-page{
    max-width:1400px;
    margin:0 auto;
    padding:40px 20px 80px;
}

.u4-event-section-title{
    font-size:32px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin:60px 0 25px;
    border-left:5px solid #c00000;
    padding-left:15px;
    font-weight:800;
}

/* GRID */

.u4-event-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    gap:25px;
}

/* CARD */

.u4-event-card{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:12px;
    background:#111;
    transition:all .3s ease;
}

/* IMAGE */

.u4-event-card-img img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

/* OVERLAY */

.u4-event-card-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:18px;
    background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2));
}

/* TOP TAG */

.u4-event-card-top{
    display:flex;
    justify-content:flex-end;
}

.u4-event-card-region{
    font-size:12px;
    padding:4px 10px;
    border-radius:20px;
    background:#c00000;
    color:#fff;
    font-weight:600;
    text-transform:uppercase;
}

/* BOTTOM INFO */

.u4-event-card-bottom h3{
    font-size:20px;
    margin:0 0 6px;
}

.u4-event-card-date{
    font-size:14px;
    color:#ddd;
}

.u4-event-card-location{
    font-size:13px;
    color:#bbb;
    margin-top:4px;
    display:flex;
    align-items:center;
    gap:6px;
}

/* HOVER */

.u4-event-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(0,0,0,.6);
}

.u4-event-card:hover img{
    transform:scale(1.08);
}

.u4-event-card:hover .u4-event-card-location{
    color:#fff;
}

/* =========================================
   FEATURED EVENT (FINAL CLEAN)
========================================= */

.u4-featured-event{
    margin-bottom:50px;
    border-radius:14px;
    overflow:hidden;
    position:relative;

    transition:transform .5s ease, box-shadow .5s ease;
}

.u4-featured-event:hover{
    transform:scale(1.02);
    box-shadow:0 20px 60px rgba(0,0,0,.7);
}

/* IMAGE */

.u4-featured-img{
    width:100%;
    height:420px;
    object-fit:cover;

    transition:filter .5s ease;
}

/* ONLY brightness — NO scale */

.u4-featured-event:hover .u4-featured-img{
    filter:brightness(1.1);
}

/* OVERLAY */

.u4-featured-overlay{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:30px;
    background:linear-gradient(to top, rgba(0,0,0,.9), transparent);

    transition:transform .4s ease;
}

.u4-featured-event:hover .u4-featured-overlay{
    transform:translateY(-4px);
}
.u4-featured-overlay h2{
    font-size:48px;
    font-weight:700;
    line-height:1.1;
    letter-spacing:1px;
    text-transform:uppercase;
    margin:0 0 10px;
}
.u4-featured-date{
    font-size:16px;
    opacity:.85;
    letter-spacing:1px;
}
@media (max-width:768px){
    .u4-featured-overlay h2{
        font-size:28px;
    }
}
.u4-featured-overlay h2{
    font-size:52px;
    font-weight:800;
    letter-spacing:2px;
}
.u4-featured-overlay h2{
    text-shadow:0 4px 20px rgba(0,0,0,.9);
}

.u4-region-west{ background:#c00000; }
.u4-region-east{ background:#1e5eff; }
.u4-region-central{ background:#ffffff; color:#000; }
.u4-region-joker{ background:#00b140; }

/* =========================================
   DRIVER HUB GRID
========================================= */

/* =========================================
   DRIVER CLASS HUB (UPGRADED)
========================================= */

.u4-driver-hub{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    gap:30px;
    margin-top:40px;
}

/* CARD */

.u4-driver-class-card{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    display:block;
    height:260px;

    background:#111;

    transition:transform .4s ease, box-shadow .4s ease;
}

.u4-driver-class-card:hover{
    transform:scale(1.04);
    box-shadow:0 25px 70px rgba(0,0,0,.8);
}

/* IMAGE */

.u4-driver-class-img{
    position:absolute;
    inset:0;
}

.u4-driver-class-img img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .6s ease, filter .6s ease;
}

/* OVERLAY */

.u4-driver-class-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:25px;

    background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.2), transparent);

    transition:background .4s ease;
}

/* TITLE */

.u4-driver-class-overlay h2{
    font-size:30px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin:0;

    color:#fff; /* 🔥 CHANGE THIS */
    text-shadow:0 6px 25px rgba(0,0,0,.9);
}

/* SUBTEXT */

.u4-driver-class-overlay p{
    font-size:14px;
    opacity:.8;
    margin-top:6px;
}

/* HOVER EFFECTS */

.u4-driver-class-card:hover img{
    transform:scale(1.1);
    filter:brightness(1.15);
}
/* HIDE DEFAULT PAGE TITLES */
.entry-title,
.page-title{
    display:none !important;
}
.u4-driver-class-card:hover .u4-driver-class-overlay{
    background:linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.4), transparent);
}

.u4-driver-class-card{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    height:260px;

    transition:transform .4s ease, box-shadow .4s ease;
}

.u4-driver-class-card::after{
    content:'';
    position:absolute;
    inset:0;
    border:1px solid rgba(255,255,255,.05);
    border-radius:14px;
}

.u4-driver-class-card:hover{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 30px 80px rgba(0,0,0,.9);
}

.u4-driver-class-card:hover img{
    transform:scale(1.1);
    filter:brightness(1.15);
}

.u4-driver-hub{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.u4-driver-class-card:first-child{
    grid-column:span 2;
    height:320px;
}

@media (max-width:768px){

    /* FEATURED IMAGE HEIGHT */
    .u4-featured-img{
        height:260px;
    }

    /* OVERLAY PADDING */
    .u4-featured-overlay{
        padding:18px;
    }

    /* TITLE FIX (BIG ONE) */
    .u4-featured-overlay h2{
        font-size:24px;
        line-height:1.1;
        letter-spacing:1px;
    }

    /* DATE */
    .u4-featured-date{
        font-size:13px;
        opacity:.85;
    }

}

@media (max-width:768px){

    .u4-featured-overlay h2{
        word-break:normal;
        max-width:90%;
    }

}

@media (max-width:768px){

    .u4-featured-event{
        border-radius:10px;
    }

    .u4-featured-overlay{
        background:linear-gradient(
            to top,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,.7) 40%,
            transparent 100%
        );
    }

}

@media (max-width:768px){

/* =========================================
   DRIVER HUB GRID
========================================= */

.u4-driver-hub{
    grid-template-columns:1fr;
    gap:16px;
}


/* =========================================
   CARD SIZE + SHAPE
========================================= */

.u4-driver-class-card{
    height:180px;
    border-radius:10px;
}


/* =========================================
   IMAGE ZOOM (LESS AGGRESSIVE)
========================================= */

.u4-driver-class-card:hover img{
    transform:scale(1.05);
}


/* =========================================
   OVERLAY SPACING
========================================= */

.u4-driver-class-overlay{
    padding:16px;
}


/* =========================================
   TITLE FIX (BIGGEST ISSUE)
========================================= */

.u4-driver-class-overlay h2{
    font-size:20px;
    letter-spacing:1px;
    line-height:1.1;
}


/* =========================================
   SUBTEXT
========================================= */

.u4-driver-class-overlay p{
    font-size:12px;
}


/* =========================================
   TAG (IF USING)
========================================= */

.u4-class-tag{
    font-size:10px;
    margin-bottom:4px;
}


/* =========================================
   FEATURED (4400 BIG CARD FIX)
========================================= */

.u4-driver-class-card:first-child{
    grid-column:span 1; /* remove big desktop layout */
    height:200px;
}

}

@media (max-width:768px){

    .site-logo img,
    .custom-logo,
    .custom-logo-link img{
        max-height:50px;
        width:auto;
    }

}

@media (max-width:768px){

    header,
    .site-header{
        padding:10px 15px;
    }

}

@media (max-width:768px){

    .site-header .header-inner,
    .site-header .site-branding{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

}

@media (max-width:768px){

    .menu-toggle,
    .elementor-menu-toggle{
        font-size:22px;
        margin-left:auto;
    }

}

@media (max-width:768px){

    .u4-sponsor-bar{
        display:none; /* optional but HIGHLY recommended */
    }

}

@media (max-width:768px){

    .custom-logo{
        max-height:45px;
    }

}

@media (max-width:768px){

    /* TARGET ELEMENTOR LOGO */
    .elementor-widget-theme-site-logo img,
    .elementor-widget-image img{
        max-height:50px !important;
        width:auto !important;
    }

}@media (max-width:768px){

    header,
    .site-header,
    .elementor-location-header{
        position:relative;
        z-index:99999;
    }

}.u4-results-page,
.u4-results-page *{
    z-index:1;
}

/* =========================================
   NEXT EVENTS (COMPACT HOMEPAGE STRIP)
========================================= */

.u4-next-events{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:30px 0;
}

/* CARD */
.u4-next-card{
    display:block;
    background:#111;
    border-radius:10px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;

    transition:transform .25s ease, box-shadow .25s ease;
}

.u4-next-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.4);
}

/* IMAGE (smaller + tighter) */
.u4-next-img img{
    width:100%;
    height:140px; /* 🔥 smaller */
    object-fit:cover;
}

/* INFO */
.u4-next-info{
    padding:10px 12px;
}

/* DATE */
.u4-next-date{
    font-size:11px;
    text-transform:uppercase;
    color:#c00000;
    letter-spacing:1px;
    margin-bottom:4px;
}

/* TITLE */
.u4-next-info h3{
    font-size:14px; /* 🔥 smaller */
    margin:0 0 4px;
    line-height:1.2;
}

/* LOCATION */
.u4-next-location{
    font-size:12px;
    opacity:.7;
}

/* MOBILE */
@media(max-width:768px){

    .u4-next-events{
        grid-template-columns:1fr;
        gap:12px;
    }

    .u4-next-img img{
        height:120px;
    }
}

.u4-home-section{
    position:relative;
}

.u4-home-section:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(to right, transparent, #c00000, transparent);
}

.u4-next-card{
    transition:all .3s ease;
}

.u4-next-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.6);
}

fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&eventType=completed&type=video&order=date&maxResults=5&key=${API_KEY}`)
.then(res => res.json())
.then(data => {

    if(!data.items || data.items.length === 0) return;

    // Get video IDs
    const videoIds = data.items.map(item => item.id.videoId).join(",");

    // 🔥 VERIFY which ones are actual livestream replays
    return fetch(`https://www.googleapis.com/youtube/v3/videos?part=snippet,liveStreamingDetails&id=${videoIds}&key=${API_KEY}`)
        .then(res => res.json());
})
.then(videoData => {

    if(!videoData || !videoData.items) return;

    let latestStream = null;

    for(let video of videoData.items){

        // 🔥 ONLY pick videos that were actually livestreams
        if(video.liveStreamingDetails){
            latestStream = video;
            break;
        }
    }

    // fallback if none found
    if(!latestStream){
        latestStream = videoData.items[0];
    }

    const videoId = latestStream.id;

    videoFrame.src = `https://www.youtube.com/embed/${videoId}`;

    if(chatWrap) chatWrap.style.display = "none";

    const label = document.querySelector(".u4-live-text");
    if(label) label.innerText = "LAST RACE BROADCAST";

})
.catch(err => {
    console.error("YouTube fallback error:", err);
});

.u4-live-player::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40%;
    background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
    pointer-events:none;
}

.u4-section-title{
    font-size:14px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#aaa;
    margin-bottom:20px;
    position:relative;
}

.u4-section-title::before{
    content:"";
    width:4px;
    height:16px;
    background:#c00000;
    position:absolute;
    left:-12px;
    top:2px;
}

/* =========================
   NEWS PAGE BASE
========================= */
.u4-news-page{
    max-width:1300px;
    margin:0 auto;
    padding:40px 20px 80px;
}

/* =========================
   HEADER
========================= */
.u4-news-header{
    margin-bottom:25px;
}

.u4-news-header h1{
    font-size:20px;
    letter-spacing:3px;
    color:#aaa;
}

/* =========================
   HERO FEATURED
========================= */
.u4-news-hero{
    position:relative;
    margin-bottom:40px;
}

.u4-news-hero img{
    width:100%;
    height:480px;
    object-fit:cover;
    border-radius:16px;
}

/* DARK GRADIENT */
.u4-news-hero::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.9) 0%,
        rgba(0,0,0,.5) 40%,
        transparent 70%
    );
}

/* TEXT */
.u4-news-hero-overlay{
    position:absolute;
    bottom:30px;
    left:30px;
    z-index:2;
}

.u4-news-hero-overlay h2{
    font-size:36px;
    font-weight:800;
    max-width:700px;
    line-height:1.1;
    color:#fff;
}

/* =========================
   GRID LAYOUT
========================= */
.u4-news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* =========================
   CARD
========================= */
.u4-news-card{
    display:block;
    background:#0d0d0d;
    border-radius:12px;
    overflow:hidden;

    transition:all .25s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.5);
}

/* IMAGE */
.u4-news-card img{
    width:100%;
    height:160px;
    object-fit:cover;
}

/* CONTENT */
.u4-news-card-content{
    padding:12px;
}

/* CATEGORY TAG */
.u4-news-tag{
    font-size:10px;
    color:#ff0033;
    letter-spacing:1px;
}

/* DATE */
.u4-news-date{
    font-size:11px;
    color:#777;
    display:block;
    margin-top:4px;
}

/* TITLE */
.u4-news-card h3{
    font-size:15px;
    margin:6px 0;
    color:#ddd;
    line-height:1.3;
}

/* READ MORE */
.u4-news-read{
    font-size:12px;
    color:#ff0033;
}

/* HOVER */
.u4-news-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.8);
}

.u4-news-card:hover h3{
    color:#fff;
}

/* =========================
   PAGINATION
========================= */
.u4-news-pagination{
    margin-top:50px;
    text-align:center;
}

.u4-news-pagination a{
    display:inline-block;
    padding:8px 12px;
    margin:4px;
    background:#111;
    color:#fff;
    border-radius:4px;
    font-size:13px;
}

.u4-news-pagination .current{
    background:#ff0000;
}

/* =========================
   MOBILE
========================= */
@media(max-width:900px){

    .u4-news-grid{
        grid-template-columns:1fr;
    }

    .u4-news-hero img{
        height:240px;
    }

    .u4-news-hero-overlay h2{
        font-size:20px;
    }

}

/* =========================
   WRAP
========================= */
.u4-champ-v3{
    margin-top:50px;
}

/* =========================
   TABS
========================= */
.u4-champ-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:35px;
}

.u4-champ-btn{
    background:#111;
    border:1px solid #222;
    color:#aaa;
    padding:8px 14px;
    border-radius:6px;
    cursor:pointer;
    transition:.2s;
}

.u4-champ-btn:hover{
    background:#1a1a1a;
    color:#fff;
}

.u4-champ-btn.active{
    background:#ff0000;
    color:#fff;
    border-color:#ff0000;
}

/* =========================
   CLASS SWITCH
========================= */
.u4-champ-class{
    display:none;
}
.u4-champ-class.active{
    display:block;
}

/* =========================
   HERO GRID
========================= */
.u4-champ-hero{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:50px;
    align-items:center;
}

/* =========================
   LEADER CARD
========================= */
.u4-champ-leader{
    position:relative;
    height:420px;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.8);
    border-left:4px solid #ff0000;
}

/* IMAGE */
.u4-champ-leader img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
}

/* DARK OVERLAY */
.u4-champ-leader::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.9), transparent 65%);
}

/* FAINT TEXT */
.u4-champ-leader::before{
    content:"LEADER";
    position:absolute;
    top:20px;
    right:20px;
    font-size:60px;
    color:rgba(255,255,255,.03);
    font-weight:900;
}

/* INFO */
.u4-champ-leader-info{
    position:absolute;
    bottom:25px;
    left:25px;
    z-index:2;
}

.u4-champ-tag{
    font-size:12px;
    letter-spacing:2px;
    color:#ff0000;
    margin-bottom:6px;
    display:block;
}

.u4-champ-leader-info h2{
    font-size:38px;
    font-weight:900;
    margin:0 0 10px;
}

.u4-champ-meta{
    display:flex;
    gap:15px;
    font-size:13px;
    color:#aaa;
    margin-bottom:10px;
}

.u4-champ-points{
    font-size:20px;
    color:#ff0000;
    font-weight:700;
}

/* =========================
   DRIVER LIST
========================= */
.u4-champ-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* ROW */
.u4-champ-row{
    display:grid;
    grid-template-columns:40px 60px 1fr 160px 60px;
    align-items:center;
    gap:15px;
    padding:14px 10px;
    border-bottom:1px solid #111;
    border-radius:8px;
    transition:.2s;
}

.u4-champ-row:hover{
    background:rgba(255,255,255,.03);
}

/* 2ND PLACE HIGHLIGHT */
.u4-champ-row:nth-child(1){
    background:rgba(255,0,0,.08);
    border-left:3px solid #ff0000;
}

/* DRIVER IMAGE */
.u4-champ-photo{
    width:48px;
    height:48px;
    border-radius:8px;
    object-fit:cover;
}

/* DRIVER NAME */
.u4-champ-driver a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    line-height:1.1;
}

.u4-champ-driver a:hover{
    color:#ff0000;
}

/* BAR */
.u4-bar{
    height:6px;
    background:#111;
    border-radius:10px;
    overflow:hidden;
}

.u4-bar div{
    height:100%;
    background:linear-gradient(90deg,#ff0000,#ff4d4d);
    border-radius:10px;
    transition:width 1s ease;
}

/* =========================
   MOBILE
========================= */
@media(max-width:900px){

    .u4-champ-hero{
        grid-template-columns:1fr;
        gap:25px;
    }

    .u4-champ-leader{
        height:300px;
    }

}

.u4-champ-v3 a,
.u4-champ-driver a{
    color:#fff !important;
}

.u4-champ-driver a:hover{
    color:#ff0000 !important;
}

.u4-champ-v3 a,
.u4-champ-driver a{
    color:#fff !important;
}

.u4-champ-driver a:hover{
    color:#ff0000 !important;
}.u4-champ-hero{
    display:grid;
    grid-template-columns: 1.8fr 1fr; /* bigger leader */
    gap:40px;
    align-items:stretch;
}.u4-champ-leader{
    height:460px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.9);
    border-left:5px solid #ff0000;
}.u4-champ-row{
    grid-template-columns:40px 60px 1fr 140px 60px;
    padding:16px 12px;
}.u4-champ-photo{
    width:56px;
    height:56px;
    border-radius:10px;
    object-fit:cover;
}.u4-champ-list{
    background:rgba(255,255,255,0.02);
    padding:15px;
    border-radius:12px;
}.u4-champ-tabs{
    margin-bottom:20px;
}
.u4-events-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}
/* ================================
   EVENTS SECTION WRAP
================================ */

.u4-events-section{
    max-width:1300px;
    margin:80px auto;
    padding:0 20px;
}

/* TITLE */
.u4-events-title{
    font-size:22px;
    font-weight:700;
    margin-bottom:25px;
    color:#fff;
}

/* ================================
   GRID LAYOUT (CENTERED)
================================ */

.u4-events-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:30px;
  
}

/* ================================
   EVENT CARD
================================ */

.u4-event-card{
    position:relative;
    height:280px;
    border-radius:14px;
    overflow:hidden;
    background:#111;
    transition:all .3s ease;
    cursor:pointer;
}

/* HOVER */
.u4-event-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.6);
}

/* ================================
   IMAGE
================================ */

.u4-event-image{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}

.u4-event-card:hover .u4-event-image{
    transform:scale(1.05);
}

/* ================================
   OVERLAY GRADIENT
================================ */

.u4-event-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.2) 60%, transparent);
}

/* ================================
   CONTENT (BOTTOM LEFT)
================================ */

.u4-event-content{
    position:absolute;
    bottom:18px;
    left:18px;
    right:18px;
    z-index:2;
}

/* DATE */
.u4-event-date{
    font-size:11px;
    letter-spacing:2px;
    color:#ff0000;
    margin-bottom:6px;
    font-weight:700;
}

/* TITLE */
.u4-event-name{
    font-size:16px;
    font-weight:700;
    color:#fff;
    margin-bottom:6px;
    line-height:1.3;
}

/* LOCATION */
.u4-event-location{
    font-size:12px;
    color:#aaa;
}

/* ================================
   OPTIONAL BADGE (LIVE / NEXT)
================================ */

.u4-event-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:#ff0000;
    color:#fff;
    font-size:10px;
    padding:4px 8px;
    border-radius:4px;
    letter-spacing:1px;
    font-weight:700;
}

/* ================================
   MOBILE
================================ */

@media(max-width:768px){

    .u4-events-grid{
        grid-template-columns:1fr;
    }

    .u4-event-card{
        height:240px;
    }

}

.u4-section-header{
    padding-bottom:15px;
    border-bottom:1px solid #222;
}

.u4-section-header span{
    font-size:26px;
    font-weight:800;
    letter-spacing:2px;
}

.u4-section-header a{
    background:#111;
    border:1px solid #333;
    padding:6px 12px;
    border-radius:6px;
}





/* 🔥 BREAK OUT OF ELEMENTOR FLEX JAIL */
.elementor-widget-container > .u4-section,
.elementor-widget-container > .u4-hero{
    width:100vw;
    margin-left:calc(50% - 50vw);
}

/* KEEP CONTENT CONSTRAINED */
.u4-container{
    max-width:1200px;
    margin:0 auto;
    width:100%;
    padding:0 20px;
}

/* ===============================
   GLOBAL SECTION SYSTEM (FIX)
=============================== */

.u4-section{
    width:100%;
    padding:80px 0;
}

/* center content */
.u4-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* fix Elementor width issues */
.elementor-widget-container > .u4-section,
.elementor-widget-container > .u4-hero{
    width:100vw;
    margin-left:calc(50% - 50vw);
}

.u4-news-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
    width:100%;
}

/* force cards to behave */
.u4-news-grid > *{
    width:100%;
}/* =================================
   CORE LAYOUT SYSTEM
================================= */

.u4-section{
    width:100%;
    padding:80px 0;
}

.u4-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* Fix Elementor flex issues */
.elementor-widget-wrap{
    display:block !important;
}

.elementor-widget-container{
    width:100%;
}

/* Section headers */
.u4-section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.u4-section-header span{
    font-size:26px;
    font-weight:800;
    letter-spacing:2px;
}

.u4-section-header a{
    color:#c00000;
    text-decoration:none;
    font-weight:600;
    .u4-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.6), #000 90%);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
}/* =================================
   HERO
================================= */

.u4-hero{
    position:relative;
    height:40vh;
    min-height:300px;
    overflow:hidden;
}

.u4-hero-video-bg{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
}

.u4-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.6), #000 90%);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.u4-hero h1{
    font-size:60px;
    font-weight:900;
    margin-bottom:15px;
}

.u4-hero-sub{
    color:#c00000;
    letter-spacing:2px;
    font-size:14px;
}

.u4-hero-desc{
    color:#bbb;
    margin-bottom:25px;
}

.u4-hero-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
}

.u4-btn{
    background:#c00000;
    color:#fff;
    padding:12px 22px;
    text-decoration:none;
}

.u4-btn-outline{
    border:1px solid #555;
    color:#fff;
    padding:12px 22px;
    text-decoration:none;
/* ================================
   HOME NEWS GRID
================================ */

.u4-news-home-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
    width:100%;
}

/* CARD */
.u4-news-home-card{
    display:block;
    width:100%;
    background:#111;
    border-radius:12px;
    overflow:hidden;
    text-decoration:none;
}

.u4-news-home-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 40px rgba(0,0,0,.5);
}

/* IMAGE */
.u4-news-home-image-wrap{
    height:200px; /* bigger + consistent */
    width:100%;
    overflow:hidden;
}

.u4-news-home-image{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.u4-news-home-card:hover .u4-news-home-image{
    transform:scale(1.05);
}

/* CONTENT */
.u4-news-home-content{
    padding:15px;
}

.u4-news-home-date{
    font-size:11px;
    color:#ff0000;
    margin-bottom:8px;
    letter-spacing:1px;
}

.u4-news-home-card h3{
    font-size:16px;
    color:#fff;
    line-height:1.4;
}
.u4-container{
    max-width:1200px;
    margin:0 auto;
    width:100%;
}

/* MOBILE */
@media(max-width:900px){
    .u4-news-home-grid{
        grid-template-columns:1fr;
    }
}
}/* =================================
   MEDIA CTA
================================= */

.u4-media-cta{
    text-align:center;
    padding:100px 20px;
}

.u4-media-content h2{
    font-size:36px;
}

.u4-media-content p{
    color:#bbb;
    margin-bottom:20px;
}/* =================================
   COMMUNITY
================================= */

.u4-community{
    text-align:center;
    padding:100px 20px;
}

.u4-community h2{
    font-size:34px;
}
.u4-media-cta{
    margin-top:40px; /* was way too big */
}.u4-events-grid img{
    height:220px;
}

.u4-events-grid{
    gap:30px;
}

.u4-section-header span{
    font-size:22px;
    font-weight:800;
    letter-spacing:1.5px;
}

.u4-section-header{
    margin-bottom:25px;
}.u4-media-content{
    text-align:center;
    max-width:600px;
    margin:0 auto;
}

.u4-media-content h2{
    font-size:32px;
    margin-bottom:10px;
}

.u4-media-content p{
    color:#aaa;
    margin-bottom:20px;
}.u4-section{
    border-top:1px solid #1a1a1a;
}
.u4-section h2{
    font-size:24px;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:20px;
}.u4-events-grid img{
    height:240px;
    border-radius:12px;
}

.u4-events-grid{
    gap:35px;
}.u4-champ-wrap{
    margin-top:30px;
}

.u4-champ-hero{
    gap:60px;
}

.u4-events-grid a{
    display:block;
    transition:.3s;
}

.u4-events-grid a:hover{
    transform:translateY(-5px);
}

.u4-events-grid img{
    transition:.3s;
}

.u4-events-grid a:hover img{
    transform:scale(1.05);
}

.u4-section{
    margin:70px 0 50px;
}

.u4-section:not(:first-of-type){
    border-top:1px solid #111;
    padding-top:25px;
}

@media (max-width: 768px){

    .u4-hero-buttons{
        flex-direction:column; /* stack vertically */
        align-items:stretch;
        gap:12px;
    }

    .u4-hero-buttons a{
        width:100%; /* full width buttons */
        text-align:center;
        padding:16px;
        font-size:14px;
    }

}

@media (max-width: 768px){

    .u4-hero{
        height:auto;              /* 🔥 allow it to grow */
        min-height:650px;         /* keeps it tall enough */
        padding-bottom:40px;      /* breathing room */
    }

}@media (max-width: 768px){

    .u4-hero-buttons{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .u4-hero-buttons a{
        width:100%;
        text-align:center;
    }

}@media (max-width: 768px){

    .u4-hero-overlay{
        position:relative; /* 🔥 removes bottom lock */
        bottom:auto;
        padding-top:100px; /* pushes below header */
    }

}

@media (max-width: 768px){

    .u4-hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr; /* 2x2 grid */
        gap:12px;
        margin-top:20px;
    }

    .u4-hero-buttons a{
        width:100%;
        text-align:center;
        padding:14px 10px;
        font-size:13px;
    }

}

@media (max-width: 768px){

    .u4-champ-hero{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

}

@media (max-width: 768px){

    .u4-champ-leader{
        height:260px;
        border-radius:12px;
    }

    .u4-champ-leader h2{
        font-size:20px;
    }

    .u4-champ-points{
        font-size:16px;
    }

}@media (max-width: 768px){

    .u4-champ-row{
        grid-template-columns:30px 50px 1fr;
        gap:10px;
        padding:10px;
    }

    .u4-bar{
        display:none; /* 🔥 remove bars on mobile (too busy) */
    }

}@media (max-width: 768px){

    .u4-champ-tabs{
        overflow-x:auto;
        flex-wrap:nowrap;
        justify-content:flex-start;
        padding-bottom:10px;
    }

    .u4-champ-tabs::-webkit-scrollbar{
        display:none;
    }

}

/* =========================
   MOBILE HEADER FIX
========================= */
@media(max-width:768px){

    /* container holding logos */
    .u4-header-logos{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:12px;
    }

    /* main Ultra4 logo */
    .u4-header-logos img:first-child{
        height:32px;
        width:auto;
    }

    /* championship badge */
    .u4-header-logos img:last-child{
        height:36px;
        width:auto;
    }

    /* prevent stacking */
    .u4-header-logos img{
        display:block;
    }

}

@media(max-width:768px){

    .u4-top-bar{
        font-size:12px;
        padding:6px 10px;
    }

}

@media(max-width:768px){

/* FORCE LOGOS INLINE */
.u4-header img{
    display:inline-block;
    vertical-align:middle;
}

/* KILL RANDOM LINE BREAKS */
.u4-header{
    text-align:left;
}

}@media(max-width:768px){
    .u4-header-logos img:last-child{
        display:none;
    }
}

@media(max-width:768px){

/* SHRINK THE STRIP */
.u4-sponsor-strip{
    padding:8px 10px;
}

/* LOGO CONTAINER */
.u4-sponsor-strip-inner{
    gap:20px;
    overflow-x:auto;
    white-space:nowrap;
}

/* LOGOS SMALLER */
.u4-sponsor-strip img{
    height:10px;
    max-height:10px;
    width:auto;
    opacity:.7;
}

/* OPTIONAL: subtle fade edges (pro look) */
.u4-sponsor-strip{
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

}