:root {
    font-family:'Open Sans', sans-serif;
    background-color: #494949;
    color: white;
}

/* --- FONTS --- */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/* --- BASE LAYOUT --- */
body {
    margin: 0;
    display: grid;
    background-color: black;
    min-height: 100vh;
}

.WebsiteContainer {
    width: 100%;
    min-height: 100vh;
    display: grid;
    /* 'auto' allows the header to grow/shrink based on menu state */
    grid-template-rows: auto 1fr auto; 
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #494949;
}

h1 { margin-bottom: -5px; margin-top: 5px; font-weight: 600; line-height: 1.2; }
h2 { margin-bottom: 0px; font-size: 1.2rem; }
h3 { font-weight: 400; margin-top: 5px; font-size: 1rem; }
p { font-size: 18px; }

/* --- HEADER SECTION --- */
header {
    display: flex;
    flex-direction: column;
}

/* Logo Bar */
.logo {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on small screens */
    align-items: center;
    background-color: #6d2632;
    color: white;
    padding: 10px 20px;
    gap: 15px;
}

.logoimage {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

#TeamTitle {
    flex-grow: 1; /* Pushes socials to the right */
}

/* Social Icons */
.socials {
    display: flex;
    gap: 5px;
    margin-left: auto;
    flex-direction: column;
}

.socialitem a {
    font-size: 16px;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    height: 24px;
}

.socialitem a img {
    height: 20px;
    width: 20px;
    margin-right: 7px;
}

/* --- NAVBAR & HAMBURGER MENU --- */
.navbar {
    background-color: #742d38;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* The Hamburger Button (Hidden on Desktop) */
.menu-toggle {
    display: none; 
    background-color: #5c202a;
    color: white;
    border: none;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.menu-toggle:hover {
    background-color: #8a3542;
}

/* The Links Container */
.nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    transition: all 0.3s ease-out;
}

/* Link Styling */
.navbar a {
    padding: 15px 20px;
    font-size: 18px;
    color: white;
    text-decoration: none;
    transition: background 0.2s;
    display: block;
}

.navbar a:hover, .navbar a.active-page {
    background-color: #5c202a;
    font-weight: 600;
}

/* Highlight for the Donate button */
.nav-donate {
    background-color: rgba(0,0,0,0.2);
}

/* --- FOOTER --- */
footer {
    background-color: #181818;
    padding: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

footer form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

footer input[type="email"] {
    padding: 8px;
    border-radius: 5px;
    border: none;
    width: 250px;
    max-width: 100%;
}

/* --- MOBILE RESPONSIVENESS (Media Queries) --- */
/* --- MOBILE RESPONSIVENESS (Media Queries) --- */
@media (max-width: 768px) {
    /* 1. Header Compactness */
    .logo {
        /* Keep logo and title side-by-side to save height */
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: center;
        text-align: left;
        padding: 10px; /* Reduced from 20px */
        gap: 10px; /* Reduced gap */
    }

    .logoimage {
        width: 50px; /* Smaller logo */
        height: 50px;
    }

    #TeamTitle {
        flex-grow: 0; /* Stop it from pushing socials away unnecessarily */
    }

    /* Reduce font sizes slightly for mobile */
    #TeamTitle h1 { font-size: 1.5rem; margin: 0; }
    #TeamTitle h2 { font-size: 1rem; margin: 0; }
    #TeamTitle h3 { display: none; } /* Hide "New Haven, CT" on mobile to save space */

    /* 2. Compact Socials */
    .socials {

        width: 100%; /* Force socials to new line */
        justify-content: center;
        margin-top: 5px;
        gap: 15px;
        flex-direction: row;
    }
   
    
    /* Optional: Hide social text labels on mobile (just show icons) */
    .socialitem span {
        display: none;
    }

    /* 3. Navbar Fixes */
    .menu-toggle {
        display: block;
        padding: 10px 20px; /* Slightly thinner button */
    }

    .nav-links {
        display: none;
        flex-direction: column;
        background-color: #682631;
    }

    .nav-links.active {
        display: flex;
    }

    .navbar a {
        text-align: left;
        padding-left: 25px;
        border-top: 1px solid rgba(255,255,255,0.05);
        width: 100%;
        box-sizing: border-box;
    }

    /* 4. Index Page Grid Fix */
    .maincontainer {
        grid-template-columns: 1fr; /* Force single column stacking */
    }
}