/* ==================================================================== */
/* Global page styles for overall look and feel */
/* ==================================================================== */
body {
    background-color: white; /* The whole page is now white by default */
    font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
    text-align: left;
    font-size: medium;

    /* These two lines control the overall page width and center it */
    max-width: 960px;
    margin: 0 auto;
}

/* NEW: This adds the light gray background to the main content area */
main {
    background-color: #fafafa;
}

/* Ensure all images and embedded content don't exceed their parent container */
img, embed, object, video {
    max-width: 100%;
    height: auto;
}

/* ==================================================================== */
/* New styles for the modern, Flexbox-based layout */
/* ==================================================================== */
/* Use Flexbox to align the header logos to the left and right */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

/* Flexbox container for the new image gallery */
.gallery {
    display: flex !important;
    flex-direction: row; /* Explicitly set to a row layout */
    flex-wrap: wrap; /* Allows items to wrap to a new line */
    gap: 20px; /* Adds space between gallery items */
    justify-content: space-between; /* Distributes items with space between them */
}

/* Styles for each individual image/caption block */
.gallery-item {
    width: 48%; /* Sets a two-column layout */
    max-width: 500px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    
    /* Make the gallery item a flex container to align content */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: space-between; /* Pushes figure and caption to ends */
}

/* Styles for the figure and figcaption elements */
figure {
    margin: 0;
    width: 100%;
    
    /* Make the figure a flex container to center the image */
    display: flex;
    flex-direction: column; /* Keep image and figcaption stacked */
    justify-content: center; /* Center image vertically if extra space */
    align-items: center;    /* This is the key to centering the image */
    flex-grow: 1; /* Allow figure to grow and take available space */
}

figcaption {
    padding: 10px 0;
    width: 100%; /* Make figcaption take full width */
    text-align: left; /* Explicitly align text to the left */
}

/* Styles for the footer navigation links */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* Style for the horizontal line dividers that are now a class */
.divider {
    border: none;
    height: 1px;
    background-color: #000;
    margin: 20px 0;
}

/* ==================================================================== */
/* Styles from your original stylesheet (re-ordered) */
/* ==================================================================== */
.brown {
    color: #963;
}

.red {
    color: #FF2600;
}

.blue {
    color: blue;
}

.sans-serif {
    font-family: Verdana, Geneva, sans-serif;
}

/* UPDATED: Added margin for spacing */
.floatleft {
    float: left;
    margin-right: 20px;
}

/* NEW: Added for spacing with floated images */
.floatright {
    float: right;
    margin-left: 20px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.right {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

/* Unvisited link */
a:link {
    color: blue;
}

/* Visited link */
a:visited {
    color: purple;
}

/* Mouse over link */
a:hover {
    color: red;
}

/* Selected link */
a:active {
    color: green;
}

/* ==================================================================== */
/* Table Styles - REVISED */
/* ==================================================================== */
table {
    /* Collapse borders into a single line */
    border-collapse: collapse;
    /* Set table width */
    width: 80%;
    /* Center the table on the page */
    margin: 20px auto;
    /* Font styling */
    font-family: Arial, sans-serif;
}

th, td {
    /* Add a thin border to cells */
    border: 1px solid #ddd;
    /* Add space around content */
    padding: 8px;
}

/* Style for the table header row */
tr:first-child td {
    /* *** SHADING REMOVED *** We will use a light gray or white background for the header. 
    Using 'transparent' or 'inherit' would also work if you want to rely on the table's background.
    */
    background-color: #f2f2f2; /* Light gray background for header */
    /* Set text to a dark color for readability */
    color: #333; 
    /* Center text in header cells */
    text-align: center;
    /* Bold font for header text */
    font-weight: bold;
}

/* Center all content inside the divs (your data cells) */
td div {
    text-align: center;
}

/* Align text labels (the first column) to the left and keep its background */
tr td:first-child {
    text-align: left;
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Stripe rows for better readability (alternate row colors), skipping the header */
tr:nth-child(even):not(:first-child) {
    background-color: #f9f9f9;
}

/* Highlight row on hover */
tr:hover {
    background-color: #ddd;
}

/* ==================================================================== */
/* Responsive adjustments for smaller screens (e.g., mobile devices) */
/* ==================================================================== */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* Stacks logos on top of each other */
        text-align: center;
    }

    .gallery {
        flex-direction: column; /* Stacks gallery items vertically */
    }

    .gallery-item {
        width: 100%; /* Makes each item full-width on mobile */
    }
}