/* ------------------------------
   GLOBAL PAGE BACKGROUND
------------------------------ */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;

    /* Your racecar background */
    background: url("background.jpg") no-repeat center center fixed;
    background-size: cover;

    /* Required so overlay positions correctly */
    position: relative;
}


/* ------------------------------
   TOP NAVIGATION
------------------------------ */
.top-nav {
    background: rgba(0, 0, 0, 0.75);
    padding: 12px 20px;
    display: flex;
    gap: 20px;
}

.top-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.top-nav a.active {
    text-decoration: underline;
}


/* ------------------------------
   OVERLAY PANEL (MAIN FIX)
------------------------------ */
.overlay {
    /* Center horizontally */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    /* Width behavior */
    width: min(800px, 95vw);

    /* Vertical placement */
    top: 80px;

    /* Auto height, scroll if needed */
    max-height: calc(100vh - 140px);
    overflow-y: auto;

    /* Visuals */
    background: rgba(0, 0, 0, 0.55);
    padding: 25px;
    border-radius: 14px;
    backdrop-filter: blur(4px);

    /* Ensure it sits above the fixed background */
    z-index: 9999;

    /* Ensure children stay inside */
    display: flex;
    flex-direction: column;
}


/* ------------------------------
   CONTENT INSIDE OVERLAY
------------------------------ */
.overlay-content h1,
.overlay-content h2 {
    color: white;
    margin-top: 0;
}

.overlay-content ul {
    color: white;
    padding-left: 20px;
}

.overlay-content li {
    margin-bottom: 6px;
}

/* ------------------------------
   UNIVERSAL OVERLAY TEXT COLOR
------------------------------ */
.overlay-content,
.overlay-content h1,
.overlay-content h2,
.overlay-content h3,
.overlay-content p,
.overlay-content li,
.overlay-content ul {
    color: white;
}

/* ------------------------------
   WINNERS PAGE TABLE STYLING
------------------------------ */

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.05); /* subtle translucent layer */
    border-radius: 8px;
    overflow: hidden; /* rounds the corners */
}

/* Header row */
.results-table th {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 10px 12px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}

/* Data cells */
.results-table td {
    padding: 8px 12px;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Alternating row shading */
.results-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.08);
}

/* Hover effect */
.results-table tr:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Section headers (Awards, Scout Division, etc.) */
.year-body h3 {
    margin-top: 25px;
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 6px;
}

/* Year header clickable bar */
.year-header {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 15px;
    margin-top: 20px;
    border-radius: 6px;
    color: white;
    font-size: 1.2rem;
    transition: background 0.2s;
}

.year-header:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Awards list */
.year-body ul {
    color: white;
    margin-left: 20px;
}

.year-body li {
    margin-bottom: 6px;
}