/* --- stylesheet.css --- */

/* GENERAL BODY STYLES */
body {
    /* Set the background to a light, off-white (like aged paper) */
    background-color: #f0f0f0;
    /* Set the text color to deep black for high contrast */
    color: #111;
    font-family: 'Arial Black', Gadget, sans-serif; /* Bold, punchy font */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* HEADINGS */
h1 {
    text-transform: uppercase; /* Makes headings look more like comic titles */
    border-bottom: 3px solid #111; /* A heavy line under the title */
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: white;
}

h2, h3 {
    text-transform: uppercase; /* Makes headings look more like comic titles */
    border-bottom: 3px solid #111; /* A heavy line under the title */
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #111;
}

/* HEADER - The top banner */
header {
    background-color: #111; /* Black banner */
    color: white; /* White text for the H1 and general text */
    padding: 1.5em 0;
    
    /* Revert to center for H1 and text, but use position: relative 
       to anchor the absolute positioned auth component */
    text-align: center; 
    position: relative; 
    
    border-bottom: 5px double white; /* Strong white border for separation */
}

/* NAVIGATION - The tabs */
nav {
    background-color: #333; /* Dark gray background for the nav bar */
    border-bottom: 2px solid #111;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #000; /* Black hover effect */
    color: #fff;
    /* Optional: Add a box shadow for a 'pressed' button effect */
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.5);
}

/* --- DROPDOWN STYLES (Applies to all screens) --- */

/* Container for the dropdown */
.dropdown {
    /* Inherit the list item style but allow relative positioning for the menu */
    float: left;
    overflow: hidden;
    position: relative;
}

/* The button/link that opens the dropdown content */
.dropdown .dropbtn {
    /* Match the existing navigation links */
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1em; /* Use em or inherit for better scaling */
    border: none;
    outline: none;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* The actual container for the dropdown links */
.dropdown-content {
    /* Initially hide the dropdown - THIS FIXES THE "STUCK OPEN" ISSUE */
    display: none;
    /* Position it directly below the 'Games' button */
    position: absolute;
    background-color: #f9f9f9; /* Light background for contrast */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10; /* Higher z-index to ensure it sits on top of everything */
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black; /* Set link color for the dropdown items */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    /* Important: Override the main nav link hover color */
    transition: background-color 0.3s; 
}

/* Add a background color on hover for the links inside the dropdown */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu when the user hovers over the dropdown container */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Optional: Add a hover effect to the main 'Games' link */
.dropdown:hover .dropbtn {
    background-color: #000; /* Match the main link hover color */
}


/* MAIN CONTENT AREA */
.content {
    max-width: 900px;
    margin: 30px auto; /* Center the content area */
    padding: 20px;
    background-color: #fff; /* White content box */
    border: 3px solid #111; /* Heavy border like a comic panel */
    box-shadow: 8px 8px 0px 0px #111; /* Strong offset shadow for depth (pop-out effect) */
}

/* FOOTER */
footer {
    text-align: center;
    padding: 1em 0;
    margin-top: 40px;
    background-color: #111;
    color: white;
    font-size: 0.8em;
    border-top: 5px double white;
}

/* LINKS */
a {
    color: #111; /* Black links */
    text-decoration: underline;
    font-weight: bold;
}

a:hover {
    color: #555; /* Dark gray on hover */
    text-decoration: none;
}

/* --- MOBILE RESPONSIVENESS (Max width 600px) --- */
@media (max-width: 600px) {

    /* HEADER */
    header {
        /* Change flex direction to stack items vertically on mobile */
        flex-direction: column;
        /* Revert to center text alignment for stacked items */
        text-align: center;
        padding: 1em 10px;
    }
    
    header h1 {
        /* Reduce header padding for smaller screens */
        font-size: 1.5em;
        padding: 0 0; 
        margin-bottom: 5px; /* Reduce space below h1 */
    }

    /* AUTH LINKS - Mobile Adjustment */
    #auth-links {
        /* Reset vertical alignment and add padding for separation */
        margin-top: 5px; 
        margin-bottom: 5px;
        font-size: 1em; /* Slightly smaller on mobile */
    }

    /* NAVIGATION */
    nav ul {
        /* Change flex direction to stack items vertically on mobile */
        flex-direction: column;
    }

    nav ul li a {
        /* Increase vertical padding and make text smaller */
        padding: 10px 15px;
        font-size: 0.9em;
    }

    /* MOBILE DROPDOWN ADJUSTMENT */
    .dropdown {
        float: none; /* Crucial: removes floating so it takes full width */
        width: 100%;
    }

    .dropdown-content {
        /* On mobile, the dropdown should take up the full width below the link */
        position: static;
        width: 100%;
        box-shadow: none; /* Remove shadow to look cleaner when stacked */
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .dropdown-content a {
        padding-left: 30px; /* Indent the links slightly */
        background-color: #eee; /* Differentiate background */
        color: #111;
    }


    /* MAIN CONTENT AREA */
    .content {
        /* Reduce the max-width and margin for a better fit */
        max-width: 100%;
        margin: 15px 10px; /* Smaller vertical margin, add horizontal margin */
        padding: 15px; /* Reduce padding */
        /* Reduce the box shadow to be less intrusive on small screens */
        box-shadow: 4px 4px 0px 0px #111;
        border: 2px solid #111; /* Slightly thinner border */
    }

    /* FOOTER */
    footer {
        padding: 0.8em 10px;
    }

    /* SPECIFIC PAGE ADJUSTMENTS: About Page Bio Section */
    /* Check for the specific flex layout in about.html and break it */
    .bio-section {
        flex-direction: column; /* Stack image and text vertically */
        gap: 15px;
    }

    .bio-section img {
        width: 100%; /* Make the image take full width */
        max-width: 300px; /* Limit the max size so it doesn't get too big */
        margin: 0 auto; /* Center the image */
    }

    /* SPECIFIC PAGE ADJUSTMENTS: TrustyGPT (Chat) */
    #chat-wrapper {
        flex-direction: column; /* Stack the image and chat container */
    }

    #chat-image {
        /* Center and reduce the size of the chat image */
        width: 100px !important;
        margin: 15px auto 0 auto !important;
    }
}

#auth-component-placeholder {
    /* Use absolute positioning to move it to the top right */
    position: absolute; 
    top: 1.5em; /* Matches the header padding for vertical alignment */
    right: 20px; /* Spacing from the right edge */
    
    /* Ensure all text/links inside this component are WHITE */
    color: white !important; 
    
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap; /* Keeps links on one line */
    /* Use the same bold, punchy font family */
    font-family: 'Arial Black', Gadget, sans-serif;
    text-transform: uppercase;
    /* Reset text align so the content lines up correctly */
    text-align: right; 
}

/* Style the links inside the auth component */
#auth-component-placeholder a {
    color: white !important; /* Force links to white */
    text-decoration: none;
    margin: 0 5px;
}

#auth-component-placeholder a:hover {
    color: #f0f0f0; /* Slight color change on hover */
    text-decoration: underline;
}