body {
  
   background-color: #e9eef7; /* Light gray example */

}

.image-row {
    display: flex;
    justify-content: Left; /* Center images horizontally */
    gap: 40px; /* Space between images */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.image-row figure {
    margin: 0; /* Remove default figure margins */
    text-align: center; /* Center captions */
}

.image-row img {
    max-width:250px; /* Match the Wikipedia image width for consistency */
    height: auto; /* Maintain aspect ratio */
}

.image-row figcaption {
    font-size: 14px;
    font-style: italic;
    color: #333;
    margin-top: 5px;
}

/* Global box-sizing for consistency */
* {
    box-sizing: border-box;
}

/* Force header to use flexbox with wrapping - Maximum specificity */
html body header.header.container-header.full-width {
    display: flex !important; /* Ensure this overrides user agent and template */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 20px;
}

/* Style each grid-child as a flex item */
.grid-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Style the navigation menu for dynamic behavior */
.container-nav .mod-menu.mod-menu_dropdown-metismenu {
    display: flex !important;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

/* Override default ul styles within the menu with higher specificity */
.container-nav .mod-menu.mod-menu_dropdown-metismenu ul {
    display: flex !important; /* Override user agent block display */
    flex-wrap: wrap;
    list-style: none; /* Remove default disc bullets */
    margin: 0; /* Override default margins */
    padding: 0; /* Override default padding */
    gap: 15px; /* Space between items */
}

.container-nav .mod-menu.mod-menu_dropdown-metismenu li.metismenu-item {
    flex: 0 0 auto;
    margin: 0;
}

.container-nav .mod-menu.mod-menu_dropdown-metismenu li.metismenu-item a {
    text-decoration: none;
    width: auto; /* Prevent fixed width */
}

/* Style the PayPal button */
.mod-custom.custom {
    flex: 0 0 auto;
    margin-left: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    header.header.container-header.full-width {
        flex-direction: column;
        align-items: stretch;
    }

    .container-nav .mod-menu.mod-menu_dropdown-metismenu {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .mod-custom.custom {
        margin: 10px 0 0;
    }
}

/* Additional override to ensure flex behavior at larger screens */
@media (min-width: 992px) {
    .container-header .mod-menu {
        flex-direction: row !important;
        flex: 1;
        display: flex !important;
    }
}

/* Target the main header container to ensure it uses flexbox for the row */
.header.container-header {
    display: flex !important;
    # flex-direction: row !important; /* Forces a single horizontal row */
   #  flex-wrap: nowrap !important; /* Prevents items from wrapping to a new line */
    align-items: center !important; /* Vertically aligns all children in the row */
    justify-content: flex-start !important; /* Aligns items to the left */
    width: 100% !important;
    padding: 10px 0;
}

/* Target the direct children (the modules) to ensure they sit side-by-side */
/* These are the elements that are likely being set to 'grid-column: 1 / span X' */
.header.container-header > div {
    display: flex !important; /* Ensure children use flex to size themselves */
    flex: 0 0 auto !important; /* Prevent items from taking up equal width */
    margin-right: 20px; /* Space between the logo, menu, and button */
}

/* Specific fix for the Menu - ensure it stays in a row */
.container-nav .mod-menu_dropdown-metismenu {
    display: flex !important;
    flex-direction: row !important;
    # flex-wrap: nowrap !important; 
}

/* 1. Target the main header container */
.header.container-header {
    display: flex !important;
    /* Removed flex-direction and flex-wrap as they are defined on the children below */
    align-items: center !important; 
    justify-content: flex-start !important; 
    width: 100% !important;
    padding: 10px 0;
}

/* 2. Style the direct children using 'grid-child' class */
/* This is the key to managing space and fixing the overflow */
.grid-child.grid-child-container-nav {
    /* Menu Container */
    flex-grow: 1; /* Allow the menu area to grow and take up extra space */
    flex-shrink: 1; /* Allow the menu area to shrink when needed (important for overflow) */
    min-width: 0; /* Ensures the flex item can shrink below its content size */
    overflow: hidden; /* Prevent menu content from pushing past this boundary */
}

/* 3. Style the Logo and Button to stay at their natural size */
.grid-child:not(.grid-child-container-nav) {
    /* Logo and Button Containers */
    flex-grow: 0;   /* Do not grow past their content size */
    flex-shrink: 0; /* Do not shrink below their content size */
    margin-right: 20px;
}

/* 4. Fix the Menu Item Display and allow wrapping if needed */
.container-nav .mod-menu.mod-menu_dropdown-metismenu {
    display: flex !important;
    flex-direction: row !important;
    /* IMPORTANT: Allow wrapping only within the menu, not the whole header */
    flex-wrap: wrap; 
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
    width: 100%; /* Important: Menu should use 100% of its parent (.grid-child-container-nav) */
}

/* Ensure individual menu items can shrink */
.container-nav .mod-menu_dropdown-metismenu li.metismenu-item {
    flex-shrink: 1;
    min-width: 0;
}