/* =================================== */
/* ========== FINAL CSS - Incorporating All Changes ========== */
/* =================================== */

/* Basic Reset & Body Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000000; /* Black */
    color: #FFD700; /* Golden Yellow */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

/* =================================== */
/* ========== Navigation Styles ========== */
/* =================================== */

/* Navigation Container Styles */
nav {
    background-color: #1a1a1a;
    padding: 0.8rem 1rem;
    position: relative; /* Needed for absolute positioning of mobile menu */
    display: flex;
    /* === MODIFIED: Center content (the nav list on desktop) === */
    justify-content: center;
    align-items: center;
    min-height: 60px; /* Ensure consistent height */
}

/* Hide the checkbox visually but keep it accessible */
.nav-toggle-checkbox {
    display: none;
}

/* Hamburger Label Styling (Hidden on Desktop) */
.nav-toggle-label {
    display: none; /* Hidden by default on larger screens */
    cursor: pointer;
    padding: 10px;
    height: 40px;
    width: 40px;
    position: relative; /* For span positioning */
}

/* Hamburger Icon Lines Styling */
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: '';
    display: block;
    background-color: #FFD700; /* Golden Yellow lines */
    height: 3px;
    width: 25px;
    border-radius: 2px;
    position: absolute;
    left: 7.5px; /* Center the lines within the label */
    transition: transform 0.3s ease;
}

.nav-toggle-label span { top: 18.5px; } /* Middle line */
.nav-toggle-label span::before { top: -8px; } /* Top line */
.nav-toggle-label span::after { top: 8px; } /* Bottom line */


/* Desktop Navigation List Styles */
.main-nav {
    list-style: none;
    display: flex; /* Horizontal layout on desktop */
    margin: 0;
    padding: 0;
}

.main-nav li {
    margin: 0 0.5rem; /* Spacing between desktop links */
}

.main-nav li a {
    color: #FFD700;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block; /* Ensures padding works correctly */
}

.main-nav li a:hover,
.main-nav li a.active {
    background-color: #FFD700;
    color: #000000;
}

/* =================================== */
/* ========== Main Content & Layout ========== */
/* =================================== */

main {
    max-width: 1200px;
    margin: 2rem auto 0; /* Add margin-top to push content below nav */
    padding: 0 1rem;
}

h1, h2, h4 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #FFD700;
}

.pacifico-regular {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}
  

/* =================================== */
/* ========== Video Grid Styles ========== */
/* =================================== */

.video-grid {
    display: grid;
    /* Dense grid with smaller minimum width */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

/* Video Item Container */
.video-item {
    background-color: #111; /* Title area background */
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(255, 215, 0, 0.1);
    display: flex; /* Use flex */
    flex-direction: column; /* Stack image container and title */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for hover */
}

/* Link (Image Container) - Forced Aspect Ratio */
.video-item a {
    display: block;
    text-decoration: none;
    color: #FFD700;
    aspect-ratio: 16 / 9; /* Force 16:9 ratio */
    overflow: hidden; /* Clip the image */
    position: relative; /* Positioning context for img */
    background-color: #050505; /* Optional dark background */
}

/* Image Styling - Cover & Crop */
.video-item img {
    display: block;
    width: 100%; /* Fill container width */
    height: 100%; /* Fill container height */
    object-fit: cover; /* Scale image to cover, crop excess */
    position: absolute; /* Position within 'a' tag */
    top: 0;
    left: 0;
}

/* Video Title Styling */
.video-item .video-title {
    padding: 0.6rem;
    font-size: 0.85rem;
    text-align: center;
    min-height: 50px; /* Consistent title height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111; /* Ensure title has background */
    position: relative; /* Keep in flow */
    z-index: 1; /* Above absolute image if overlap somehow occurs */
    color: #FFD700; /* Ensure title text color */
}

/* Hover Effect (Apply to whole item) */
.video-item:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

/* =================================== */
/* ========== Contact Page Styles ========== */
/* =================================== */

.contact-info {
    background-color: #111;
    padding: 2rem;
    border-radius: 8px;
    max-width: 600px;
    margin: 2rem auto;
    text-align: center;
}

.contact-info p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.contact-info a {
    color: #FFD700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    text-decoration: underline;
    color: #fff;
}

.social-links {
    margin-top: 1.5rem;
}

.social-links a {
    margin: 0 0.75rem;
    font-size: 1.2rem;
}

/* =================================== */
/* ========== Footer Styles ========== */
/* =================================== */

footer {
    text-align: center;
    margin-top: 3rem;
    padding: 1rem;
    color: #555;
    font-size: 0.9rem;
    border-top: 1px solid #333;
}


/* =================================== */
/* ========== MOBILE NAV STYLES (Media Query) ========== */
/* =================================== */

/* Apply styles only on screens 768px wide or less */
@media (max-width: 768px) {

    /* Position the main nav container to allow absolute positioning of children */
    nav {
         /* === MODIFIED: Justify content for mobile header layout === */
         justify-content: space-between; /* Allow space for toggle button */
         /* Ensure padding is appropriate */
         padding: 0.8rem 1rem;
    }

    /* Show the hamburger label and position it */
    .nav-toggle-label {
        display: block; /* Make label visible */
        /* Position relative to the nav container */
        /* Removed absolute positioning here, rely on flex order/margin if needed */
        order: 1; /* Ensure toggle is potentially on the right if other items exist */
         z-index: 101; /* Ensure it's clickable */
         /* Recalculate position if needed, but flex alignment might suffice */
         /* Example: Force to right if nav has other items */
         /* margin-left: auto; */
    }

    /* Hide the desktop nav list and prepare for toggle */
    .main-nav {
        /* Display changes handled by checkbox toggle */
        order: 2; /* Ensure nav list comes after toggle in flex order */
        flex-direction: column; /* Stack items vertically */
        position: absolute; /* Position it absolutely relative to nav */
        top: 100%; /* Start below the nav bar */
        left: 0;
        width: 100%;
        background-color: #1a1a1a; /* Same as nav background */
        /* Hide the menu using max-height and overflow */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out; /* Smooth transition */
        z-index: 100; /* Below the toggle but above page content */
    }

    .main-nav li {
        margin: 0; /* Remove horizontal margins */
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #333; /* Separator lines */
    }
     .main-nav li:last-child {
        border-bottom: none;
    }

    .main-nav li a {
        padding: 1rem; /* Increase padding for easier tapping */
        width: 100%; /* Ensure link fills the space */
        border-radius: 0; /* Remove border-radius for mobile list items */
    }

    /* --- Checkbox Toggle Magic --- */
    /* When the checkbox is checked, reveal the menu */
    .nav-toggle-checkbox:checked ~ .main-nav {
        max-height: 500px; /* Set height large enough to show all items */
    }

     /* Animate hamburger to 'X' when checked */
    .nav-toggle-checkbox:checked ~ .nav-toggle-label span {
        transform: rotate(45deg);
    }
     .nav-toggle-checkbox:checked ~ .nav-toggle-label span::before {
        transform: rotate(90deg);
        top: 0;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-label span::after {
        transform: rotate(90deg);
        top: 0;
    }
    /* Maintain line color during transform */
    .nav-toggle-checkbox:checked ~ .nav-toggle-label span::before,
    .nav-toggle-checkbox:checked ~ .nav-toggle-label span::after {
         background-color: #FFD700;
     }
}