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

body {
    font-family: lexend;
    background-color: #1a1a1a;
    /* Dark background */
    color: #eeeeee;
    /* Light text color */
    line-height: 1.6;
    padding: 20px;
}

/* Header Styling */
header {
    text-align: center;
    margin-bottom: 40px;
}

h1,
h2 {
    color: #aaaaaa;
    /* White for the main title */
    font-family: Patua One;
}



/* Card Container (Grid Layout) */
.card-container {
    display: grid;
    gap: 20px;
    /* Space between cards */
    /* Default: single column for mobile */
    grid-template-columns: 1fr;
    max-width: 1200px;
    /* Limit container width */
    margin: 0 auto;
    /* Center the container */
}




/* Responsive Grid for larger screens */
@media (min-width: 768px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on medium screens */
    }
}

@media (min-width: 1024px) {
    .card-container {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns on large screens */
    }
}


/* Individual Card Styling */
.card {
    background-color: #2a2a2a;
    /* Slightly lighter dark background for cards */
    border-radius: 30px;
    /* Border radius */
    overflow: hidden;
    /* Ensures image respects border-radius */
    display: flex;
    flex-direction: column;
    /* Stack image and content vertically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Subtle shadow */
    border: 5px solid;
    /* Base border style - color will be set by nth-child */
}





/* Image Styling */
.card img {
    display: block;
    /* Remove extra space below image */
    width: 100%;
    /* Image takes up the full width of the card */
    height: auto;
    /* Maintain aspect ratio */
    object-fit: cover;
    /* Cover the area if height was fixed */
}


/* NEW Video Styling */
.card video {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    /* object-fit: cover;  Remove this if it was causing your video to grow too large */
}

/* NEW Make the video link act as a block and cover the video area */
.video-link {
    display: block; /* Allows it to take up space */
    position: relative; /* Needed for absolute positioning of children if any */
    width: 100%; /* Make it span the width of its container */
    /* The a tag itself doesn't need styling for underline,
       but we need to make it a click target for the video area. */
}

/* NEW Ensure the video link doesn't add extra space or have default link styles */
.video-link a {
    text-decoration: none; /* Ensure no underline if any was inherited */
    color: inherit; /* Inherit color from parent */
    display: block; /* Ensure it fills the link area */
}



/* Card Content Styling */
.card-content {
    padding: 20px;
    /* Padding inside the card content area */
    flex-grow: 1;
    /* Allows content to take up available space */
    display: flex;
    flex-direction: column;
    /* Arrange title, text, button vertically */
}

.card-content h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #aaaaaa;
    /* White for card titles */
}

.card-content p {
    margin-bottom: 15px;
    font-size: 0.95em;
    color: #cccccc;
    /* Lighter grey for description text */
    flex-grow: 1;
    /* Allow paragraph to push button down if needed */
}

/* Button Styling */
.card-button {
    display: inline-block;
    /* Allows padding and margins */
    background-color: #648dbb;
    /* Default button color */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    /* Remove underline */
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: auto;
    /* Push button to the bottom of card-content */
    align-self: flex-start;
    /* Align button to the left */
}

.card-button:hover {
    background-color: #0056b3;
    /* Darker on hover */
}

/* Individual Card Border Colors (Bold Primary Colors) */
/* Using :nth-child to select cards based on their order */
.card-container .card:nth-child(1) {
    border-color: #002cbb;
    /* BlueViolet (Purple-ish) #8A2BE2 */
}

.card-container .card:nth-child(2) {
    border-color: #a50000;
    /* Blue (Dark Blue) #72a2c9*/
}

.card-container .card:nth-child(3) {
    border-color: #a77a00;
    /* OrangeRed (Bold Red) */

}

.card-container .card:nth-child(4) {
    border-color: #00BFFF;
    /* DeepSkyBlue (Bold Blue) */
}

.card-container .card:nth-child(5) {
    border-color: #32CD32;
    /* LimeGreen (Bold Green) */
}

.card-container .card:nth-child(6) {
    border-color: #FFD700;
    /* Gold (Bold Yellow) */
}

/* Header and Navbar */


.site-brand {
    /* Optional: Add flex/grid properties here if needed for alignment within the nav */
    /* For example, if the nav is a flex container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Or center, depending on desired alignment */
    font-size: 1.4em;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
}


.site-brand h1 {
    /* Your existing h1 styles... */
    font-family: 'Permanent Marker', sans-serif;
    font-size: 1.2em;
    color: var(--accent-color);
    margin-bottom: 0;
    /* Remove default bottom margin if it creates too much space */
}

/* Target the link specifically within the h2 in the site-brand div */
.site-brand h1 a {
    text-decoration: none;
    /* Removes the underline */
    color: inherit;
    /* Makes the link inherit the color of its parent (the h2) */
}

/* Optional: Ensure no change on hover, active, or visited states */
.site-brand h1 a:hover,
.site-brand h1 a:active,
.site-brand h1 a:visited {
    text-decoration: none;
    /* Keep underline off */
    color: inherit;
    /* Keep color inherited */
}

.site-brand .tagline {
    display: block;
    /* Makes the span behave like a block element, putting it on a new line */
    font-size: 0.72em;
    /* Adjust this value (e.g., 0.7em, 14px) to make the text smaller */
    margin-top: 0;
    /* Adjust top margin if needed */
    /* Optional: Change color */
    color: var(--secondary-color);
}



.site-header {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2em;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    min-height: 70px;
    position: relative;
    /* Needed for submenu positioning on desktop */
}

/* Logo */
.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-logo {
    width: 218px;
    height: auto;
    display: block;
}

/* Navigation Menu - Desktop */
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-menu li {
    margin-left: 25px;
    position: relative;
    /* For submenu positioning */
}

.nav-menu a {
    color: var(--text-color);
    text-decoration: none;
    padding: 8px 12px;
    display: block;
    transition: background-color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a:focus {
    /* Added focus for accessibility */
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Submenu - Desktop */
.submenu {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color);
    list-style: none;
    min-width: 160px;
    padding: 10px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 4px 4px;
    z-index: 10;
}

.submenu li {
    margin-left: 0;
}

.submenu a {
    padding: 8px 15px;
    white-space: nowrap;
}

/* Show submenu on hover/focus */
.dropdown:hover .submenu,
.dropdown:focus-within .submenu {
    /* Focus-within is great for keyboard nav */
    display: block;
}


/* Hamburger Button */
.nav-toggle-button {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    /* Position it similar to the label before */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    /* Ensure it's above overlay menu if one was used */
}

.nav-toggle-button .hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Hamburger Animation (X) - controlled by JS adding .is-active */
.nav-toggle-button.is-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle-button.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle-button.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Responsive Styles - Mobile */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 20px;
        /* Allow items to wrap if needed, though logo size might prevent it */
        flex-wrap: wrap;
    }

    .nav-toggle-button {
        display: block;
        /* Show the hamburger button */
    }

    .nav-menu {
        display: none;
        /* Hidden by default - JS controls visibility */
        flex-direction: column;
        width: 100%;
        /* Removed absolute positioning for push-down effect */
        background-color: var(--bg-color);
        padding: 0 0 0 50px;
        /* Order below navbar content if flex-wrap occurs */
        order: 1;
    }

    /* This class is added by JS to show the menu */
    .nav-menu.is-active {
        display: flex;
        /* Or block, flex is fine for column layout */
    }

    .nav-menu li {
        margin: 10px 0;
        width: 100%;
        text-align: left;
        position: static;
        /* Override desktop relative positioning */
    }

    .nav-menu a {
        padding: 10px 0 0 10px;
        width: 100%;
        /* Make links easier to tap */
    }


    /* Submenu on Mobile */
    .submenu {
        position: static;
        /* No absolute positioning */
        display: none;
        /* Hidden by default - JS controls visibility */
        background-color: var(--bg-color);
        box-shadow: none;
        padding: 10px 0 0 0;
        margin-top: 5px;
        width: 100%;
    }

    /* This class is added by JS to show submenu */
    .submenu.is-active {
        display: block;
    }

    /* Hide submenu on desktop hover/focus rules when on mobile */
    .dropdown:hover .submenu,
    .dropdown:focus-within .submenu {
        display: none;
        /* Prevent desktop hover/focus showing menu */
    }

    /* Ensure mobile active state takes precedence */
    .dropdown .submenu.is-active {
        display: block !important;
        /* Use !important carefully, but needed here to override hover */
    }


    .submenu a {
        padding: 8px 0;
        font-size: 1em;
        color: var(--text-color);
    }
}

/* --- Social Icon Styling --- */

/* Style the list items containing social icons */
/* Adjust margin/padding if needed to match other menu items or create space between icons */
.nav-menu li .social-icon-link {
    display: inline-block; /* Or block, depending on your nav-menu's main display (flex/grid) */
    padding: 0 8px; /* Adjust this padding to control space between icons */
    /* Ensure text-decoration, color are reset if inherited differently */
    text-decoration: none;
    color: inherit; /* Icons don't have text color, but good practice */
}

/* Style the icon image itself */
.nav-menu li .social-icon-img {
    display: block; /* Makes width and height behave predictably */
    width: 36px;   /* Set the desired size for your icons */
    height: 36px;  /* Set the desired size for your icons (should match width for square icons) */
    align-items: stretch; /* Helps align if the link is inline-flex/block */
    max-width: 100%; /* Prevent image from overflowing its container */
    height: auto;  /* Maintain aspect ratio if width is set */
}

/* Optional: Add a subtle hover effect */
.nav-menu li .social-icon-link:hover .social-icon-img {
    opacity: 0.8; /* Slightly dim the icon on hover */
    transition: opacity 0.2s ease-in-out; /* Smooth transition */
}

/* For responsive design, you might want to adjust icon size on smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .nav-menu li .social-icon-link {
         padding: 0 10px; /* Slightly less padding on smaller screens */
    }

    .nav-menu li .social-icon-img {
        width: 27px; /* Smaller icons on mobile */
        height: 27px;
    }
}