/* General Resets and Base Styles (unchanged) */
body {
    font-family: Arial, sans-serif;
    font-size: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

/* Link Styling (unchanged) */
a:link {
    text-decoration: none;
    color:  #0056b3;
}

a:visited {
    text-decoration: none;
    color: #6c757d;
}

a:hover {
    text-decoration: underline;
    background-color: #f2f2f2;
    font-weight: bold;
}

a:active {
    text-decoration: underline;
    color: #0056b3;
}

/* Header Styles - Flexbox Layout (unchanged for mobile/default) */
.site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #fff;
}

/* Default styles for header sections (mobile-first: stacked and centered) (unchanged) */
.header-ad-left,
.header-logo,
.header-social {
    width: 100%;
    text-align: center;
    margin: 5px 0;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

/* Remove default paragraph margins within header sections to prevent extra space (unchanged) */
.header-logo p,
.header-social p,
.header-ad-left p {
    margin: 0;
    padding: 0;
}

/* --- IMPORTANT: Image Sizing in Header (unchanged) --- */
.header-logo img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 5px;
}

.header-social img {
    max-width: 120px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 5px;
}

/* Main Content Grid (unchanged) */
.main-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 1px;
    column-gap: 0;
}

/* Media query for two columns (tablets) - 50%/50% (unchanged) */
@media (min-width: 768px) {
    .main-content-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Media query for three columns (desktops) - ONLY HEADER WIDTHS CHANGED HERE */
@media (min-width: 1024px) {
    .site-header {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .header-ad-left {
        flex: 0 0 37%; /* Changed */
        text-align: left;
        margin: 0;
        border: 0px solid #ddd;
        box-sizing: border-box;
    }

    .header-logo {
        flex: 0 0 26%; /* Changed */
        text-align: center;
        margin: 0;
        border: 0px solid #ddd;
        box-sizing: border-box;
    }

    .header-social {
        flex: 0 0 37%; /* Changed */
        text-align: right;
        margin: 0;
        border: 0px solid #ddd;
        box-sizing: border-box;
    }

    /* Main content grid column widths for desktop (UNCHANGED) */
    .main-content-grid {
        grid-template-columns: 40% 40% 20%;
    }
}

/* Link Column Styling (unchanged) */
.link-column {
    border: 0.5px solid #ddd;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

/* Heading for Link Categories (unchanged) */
.link-column h2 {
    font-weight: bold;
    color: #000;
    text-align: center;
    font-size: 1.5em;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #f2f2f2;
    border-bottom: 1px dashed #eee;
    border-radius: 3px;
}

/* Tighter Link Spacing (unchanged) */
.link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.link-list li {
    margin-bottom: 0px;
    padding: 0 !important;
    line-height: 1;
}

.link-list a {
    display: block;
    padding-block: 1px;
    line-height: 1.2;
    padding-inline: 0;
}

/* Footer Styles (unchanged) */
.site-footer {
    text-align: center; /* This centers text within each flex item */
    padding: 5px 5px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
    background-color: #f8f8f8;
    color: #666;

    /* NEW FLEXBOX PROPERTIES FOR LAYOUT */
    display: flex; /* Makes the footer a flex container */
    justify-content: space-around; /* Distributes space around the items */
    align-items: center; /* Vertically centers items */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    gap: 5px; /* Adds a small gap between items */
}