/* ==================================================================== */
/* 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", "Liberation Serif", Times, "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;
    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 (preserved) */
/* ==================================================================== */
.Brown {
    color: #963;
}

.Red {
    color: #FF2600;
}

.blue {
    color: blue;
}

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

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

.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;
}


/* ==================================================================== */
/* 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 */
    }
}