/*
Theme Name: E1G Racing Team
Description: A E1G Racing Team landing page
Version: 1.0
Author: Adam Kurek

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    h2 {
        font-size: 2rem;
    }

    body {
        overflow-x: hidden;
    }
}

.team-gallery-slide img {
    width: 100%;
    height: auto;
    display: block; 
}

/* --- Hero Video Background Styles --- */

.hero-section {
    position: relative; /* This is the anchor for the video */
    height: 100vh; /* Make the hero section take up the full screen height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white; /* Optional: Set default text color for hero content */
}

/* This container holds the video and the overlay */
.video-container,
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* This is the video itself */
#video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the video cover the area without distortion */
}

/* This creates a semi-transparent dark layer over the video, making text more readable */
.video-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity. Adjust as needed. */
    z-index: 1; /* Place overlay on top of video */
}

/* This is the content (your logo) that appears ON TOP of the video and overlay */
.hero-content {
    position: relative;
    z-index: 2; /* Place content on top of the overlay */
    text-align: center;
    padding: 20px;
}

.hero-logo {
    max-width: 80%;
    height: auto;
}

/* Prevent users from dragging the images inside the carousels */
.team-gallery-slide img, .driver-slide img {
    pointer-events: none;
    user-select: none;
}

/* --- Styling for headlines with icons (CORRECTED) --- */

/* Rule 1: This styles the HEADING (the <h2> tag). 
   It aligns the items inside it (the icon and the text). */
.section-title {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* This aligns the items to the left */
    gap: 1rem;
}

/* Rule 2: This styles the ICON itself (the <svg> tag). 
   It sets the icon's size relative to the heading's font size. */
.section-title svg {
    width: 1.2em;
    height: 1.2em;
}
/* Ensure icon and text in headlines stay on one line */
.section-title span {
    white-space: nowrap;
}

/* These color rules are perfect as they are */
/* For dark text on light backgrounds */
.section-title--dark {
    color: black;
}

/* For light text on dark backgrounds */
.section-title--light {
    color: white;
}

/* Styling for sections with a photo background */
.has-photo-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}

/* Dark overlay for readability */
.has-photo-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */
    z-index: -1;
}