/* --- Global Reset & Basic Body Styles --- */
/* Resets default browser margins and paddings, and sets up common box model behavior. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* Sets base font, line height, and default background/text colors for the entire page. */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6; /* Improves readability of text */
    background-color: #f4f4f4; /* Light background for the main content area */
    color: #333; /* Dark gray for general text for good contrast */
}

/* --- Navigation Bar (Navbar) Styles --- */
/* Styles for the main navigation container, including layout, background, and padding. */
.navbar {
    display: flex; /* Uses Flexbox for alignment of logo and nav links */
    justify-content: space-between; /* Pushes logo to one end and links to the other */
    align-items: center; /* Vertically centers items */
    background-color: #0a3d62; /* Dark blue background for the navbar */
    padding: 1rem 2rem; /* Padding top/bottom and left/right */
}

/* Styles for the website's logo or brand name within the navbar. */
.navbar .logo {
    color: white; /* White text for the logo */
    font-size: 1.8rem; /* Larger font size for prominence */
    font-weight: bold; /* Bold text for emphasis */
}

/* Styles for the unordered list containing navigation links. */
.nav-links {
    list-style: none; /* Removes default bullet points from the list */
    display: flex; /* Uses Flexbox to arrange links horizontally */
}

/* Styles for individual list items within the navigation links. */
.nav-links li {
    margin-left: 20px; /* Spacing between navigation items */
}

/* Styles for the actual anchor tags (links) within the navigation. */
.nav-links a {
    color: white; /* White text for links */
    text-decoration: none; /* Removes underline from links */
    font-size: 1rem; /* Standard font size for navigation */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for navigation links. */
.nav-links a:hover {
    color: #74b9ff; /* Lighter blue on hover */
}

/* --- Hero Section Styles --- */
/* Styles for the main hero section found on some pages (e.g., Homepage) and general page headers. */
.hero, .page-hero {
    background-color: #0984e3; /* Bright blue background */
    color: white; /* White text for contrast */
    text-align: center; /* Centers text content */
    padding: 1rem 2rem; /* Padding for spacing */
}

/* Styles for the main heading within hero sections. */
.hero h1, .page-hero h1 {
    font-size: 2.5rem; /* Large font size for headings */
    margin-bottom: 1rem; /* Space below the heading */
}

/* Styles for paragraph text within hero sections. */
.hero p, .page-hero p {
    font-size: 1.2rem; /* Slightly larger font for introductory text */
}

/* --- Main Content Area Styles --- */
/* General styling for content sections across the website. */
.content {
    padding: 3rem 2rem; /* Padding around content */
    max-width: 1000px; /* Limits content width for readability */
    margin: auto; /* Centers the content block horizontally */
}

/* Styles for subheadings within content sections. */
.content h2 {
    margin-bottom: 1rem; /* Space below heading */
    color: #0a3d62; /* Matches navbar dark blue */
}

/* Styles for paragraph and unordered list text within content sections. */
.content p, .content ul {
    margin-bottom: 1.5rem; /* Space below paragraphs and lists */
    font-size: 1.1rem; /* Slightly larger font for body text */
}

/* --- Banner and Image Styles --- */
/* Styles for the banner container, specifically for images like the under-construction one. */
.banner {
    text-align: center; /* Centers the image if it's smaller than its container */
    padding: 2rem; /* Adds some spacing around the banner */
    margin: 2rem auto; /* Centers the banner horizontally and adds vertical space */
    max-width: 1200px; /* Optional: Limit the maximum width of the banner container */
}

/* Styles for images inside the banner container to ensure responsiveness. */
.banner img {
    max-width: 100%; /* Ensures the image scales down if the screen is smaller than its original width */
    height: auto; /* Maintains the image's aspect ratio as it scales */
    display: block; /* Removes any extra space below the image, useful for layout */
    border-radius: 8px; /* Optional: Adds slight rounded corners to the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/* You can also add media queries specific to this banner if you need more fine-grained control */
@media (max-width: 768px) {
    .banner {
        padding: 1rem; /* Adjust padding on smaller screens */
        margin: 1rem auto; /* Adjust margin on smaller screens */
    }
}

/* --- Footer Styles --- */
/* Styles for the website's footer. */
footer {
    background-color: #0a3d62; /* Dark blue background, consistent with navbar */
    color: white; /* White text */
    text-align: center; /* Centers text */
    padding: 1rem 0; /* Padding above and below content */
    margin-top: 2rem; /* Space above the footer */
}

/* --- Specific Page Styles (e.g., Background Images) --- */
/* These classes are applied to the <body> tag to set unique background images per page. */
.home {
    /* background-image: url('../assets/background-home.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

.development {
    /* background-image: url('../assets/background-development.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

.about {
    /* background-image: url('../assets/background-about.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

.contact {
    /* background-image: url('../assets/background-contact.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

.friends {
    /* background-image: url('../assets/background-friends.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

.philanthropic {
    /* background-image: url('../assets/background-philanthropic.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

.applications {
    /* background-image: url('../assets/background-applications.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

/* Added for the new Games page */
.games {
    /* background-image: url('../assets/background-games.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

/* --- Contact Form Styles --- */
/* Styles for the contact form container. */
.contact-form {
    background: #fff; /* White background for the form */
    padding: 2rem; /* Inner spacing */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Styles for labels associated with form inputs. */
.contact-form label {
    display: block; /* Makes labels take up full width, placing input on new line */
    margin-bottom: 0.5rem; /* Space below label */
    font-weight: bold; /* Bold text for labels */
}

/* Styles for text input fields and textareas within the form. */
.contact-form input,
.contact-form textarea {
    width: 100%; /* Full width within its container */
    padding: 0.75rem; /* Inner spacing within input fields */
    margin-bottom: 1.5rem; /* Space below each input/textarea */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Slightly rounded corners for inputs */
}

/* Styles for the submit button of the contact form. */
.contact-form button {
    background-color: #0a3d62; /* Dark blue background */
    color: white; /* White text */
    padding: 0.75rem 2rem; /* Inner spacing for button */
    border: none; /* Removes default button border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Indicates clickable element */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for the contact form button. */
.contact-form button:hover {
    background-color: #0984e3; /* Lighter blue on hover */
}

/* --- Game Gallery Styles (New Addition) --- */
/* Styles for the container holding all game items. */
.game-gallery {
    display: grid; /* Uses CSS Grid for a responsive layout */
    /* Creates columns that fit automatically, with a minimum width of 300px per column */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Space between grid items */
    padding: 20px; /* Inner padding for the gallery container */
    max-width: 1200px; /* Limits overall width of the gallery */
    margin: 0 auto; /* Centers the gallery horizontally on the page */
}

/* Styles for each individual game item (card) within the gallery. */
.game-item {
    background-color: #333; /* Dark background for game cards */
    border-radius: 8px; /* Rounded corners for the cards */
    overflow: hidden; /* Ensures content doesn't spill out if rounded corners are used */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    text-align: center; /* Centers text within the card */
    padding-bottom: 20px; /* Padding at the bottom of the card */
    display: flex; /* Uses Flexbox for internal layout of card content */
    flex-direction: column; /* Stacks content vertically */
    justify-content: space-between; /* Distributes space, pushing content and button */
}

/* Styles for the game thumbnail images. */
.game-item img {
    width: 100%; /* Image takes full width of its container */
    height: 200px; /* Fixed height for consistent thumbnail size */
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    border-bottom: 1px solid #555; /* Subtle border at the bottom of the image */
}

/* Styles for game titles within the cards. */
.game-item h3 {
    margin: 15px 0 10px; /* Spacing around the title */
    color: #f4f4f4; /* Light text color for contrast on dark background */
}

/* Styles for game descriptions within the cards. */
.game-item p {
    color: #ccc; /* Lighter gray text color */
    padding: 0 15px; /* Horizontal padding for description */
    font-size: 0.9em; /* Slightly smaller font size */
    flex-grow: 1; /* Allows the description to take available vertical space, pushing button down */
}

/* Styles for the "Play Now" button within game cards. */
.game-item .btn {
    display: inline-block; /* Allows padding and margin */
    background-color: #007bff; /* Blue background for the button */
    color: white; /* White text */
    padding: 10px 20px; /* Inner spacing for button */
    border-radius: 5px; /* Rounded corners for the button */
    text-decoration: none; /* Removes underline from link */
    margin-top: 15px; /* Space above the button */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for the "Play Now" button. */
.game-item .btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* --- General Transitions --- */
/* Applies a smooth transition effect to all links and buttons for a better user experience. */
a, button {
    transition: all 0.3s ease-in-out; /* Smooth transition for various properties */
}

/* --- Responsive Design (Media Queries) --- */
/* Adjusts styles for screens smaller than 768px (typically tablets and mobile phones). */
@media (max-width: 768px) {
    /* Adjusts navbar links for vertical stacking on smaller screens. */
    .nav-links {
        flex-direction: column; /* Stacks navigation links vertically */
        background-color: #0a3d62; /* Ensures background color fills the expanded menu */
        width: 100%; /* Takes full width */
        display: none; /* Hidden by default for mobile menu */
        /* To make this work, you'll need a JavaScript toggle tied to a hamburger icon */
        /* that adds/removes the 'active' class to the .navbar container. */
        position: absolute; /* Positions menu relative to its parent .navbar */
        top: 100%; /* Places it directly below the navbar */
        left: 0;
        text-align: center;
        padding-bottom: 1rem;
    }

    /* Adjusts spacing for individual list items in the mobile menu. */
    .nav-links li {
        margin: 1rem 0; /* Vertical spacing between links */
    }

    /* Shows the navigation links when the 'active' class is present on the navbar (toggled by JS). */
    .navbar.active .nav-links {
        display: flex; /* Makes the column-stacked nav links visible */
    }

    /* You would also need to add a hamburger icon/button in your HTML for mobile view */
    /* and add CSS to style it and make it visible only on mobile. */
    /* Example: */
    /*
    .menu-toggle {
        display: block; // Or inline-block
        color: white;
        font-size: 2rem;
        cursor: pointer;
    }
    .navbar {
        position: relative; // For absolute positioning of .nav-links
    }
    */
}