/* Universal Settings & Mobile-First Body */
* {
    box-sizing: border-box; /* Makes layout math more intuitive */
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

    /* --- THIS IS THE SECTION TO ADD/CHANGE --- */
    
    /* Set a fallback background color that shows while the image is loading */
    background-color: #E8DCCE; 
    
    /* This points to your image file in the images folder */
    background-image: url('images/chainlink-pattern2.png');

    /* This makes the background image stay fixed in place when the user scrolls, which is a nice effect. You can remove this line if you prefer the background to scroll with the content. */
    background-attachment: fixed;

    /* Add this line inside your body selector */
    background-size: 300px; /* This will make each tile of the pattern 300px wide and tall */

    /* --- END OF THE SECTION TO CHANGE --- */

    color: #333;
    line-height: 1.6;
}

.page-container {
    width: 100%;
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Centers the content on large screens */
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Header Styling */
.site-header {
    display: flex;
    flex-direction: column; /* Stacks logo and title on mobile */
    align-items: center;
    text-align: center;
    padding: 15px;
    background-color: #f8f8f8;
    border-bottom: 3px solid #ccc;
}
.logo {
    width: 250px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 10px;
}
.title-group h1 {
    margin: 0;
    color: #2c5d9c; /* Blue from the original site */
    font-size: 1.8rem;
}
.subtitle {
    margin: 5px 0 0;
    font-size: 0.9rem;
    color: #555;
}

/* Navigation Menu */
.main-nav {
    background-color: #2c5d9c;
    padding: 10px 0;
}
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stacks nav links vertically on mobile */
    align-items: center;
}
.main-nav a {
    display: block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    width: 100%;
    text-align: center;
}
.main-nav a:hover {
    background-color: #3b7dcf;
}

/* --- Main Content and Sidebar (Mobile View) --- */
.content-wrapper {
    padding: 15px; /* Padding for mobile view */
}

.main-content h2, .sidebar h2 {
    color: #2c5d9c;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-top: 0;
}
.main-content, .sidebar-widget {
    background-color: #fff;
    padding: 15px;
    border: 2px solid #2c5d9c;
    border-radius: 5px;
    margin-bottom: 20px; /* Space between sections on mobile */
}
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar a {
    text-decoration: none;
    color: #337ab7;
}
.sidebar a:hover {
    text-decoration: underline;
}

/* Footer */
.site-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    color: #777;
    border-top: 1px solid #ddd;
    margin-top: 20px;
}

/* --- DESKTOP STYLES --- */
/* This media query applies only when the screen is 768px or wider */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row; /* Puts logo and title side-by-side */
        text-align: left;
        padding: 20px;
    }
    .logo {
        margin-right: 20px;
        margin-bottom: 0;
    }

    .main-nav ul {
        flex-direction: row; /* Makes nav horizontal */
        justify-content: center;
    }
    .main-nav a {
        width: auto; /* Let the links take their natural width */
    }

    .content-wrapper {
        display: grid; /* The magic for our two-column layout! */
        grid-template-columns: 2fr 1fr; /* Main content is twice as wide as the sidebar */
        gap: 25px; /* The space between the two columns */
        padding: 25px;
    }
    .main-content, .sidebar-widget {
        margin-bottom: 0; /* Not needed with grid gap */
    }
}