/* style.css */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'EB Garamond', serif;
    overflow: hidden; /* Prevent scrollbars initially */
}

#top-bar, #bottom-bar {
    position: fixed;
    left: 0;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: white; /* Default background */
    z-index: 2; /* Ensure bars are above the image wrapper */
    transition: background-color 0.3s ease; /* Smooth transition for background */
}

#top-bar {
    top: 0;
    padding: 0 2vw; /* Add some padding on the sides */
}

#bottom-bar {
    bottom: 0;
    padding: 0 2vw; /* Add some padding on the sides */
}

/* Invert text and images within inverted top and bottom bars */
.inverted#top-bar *,
.inverted#bottom-bar * {
    filter: invert(100%);
}

/* Specific styling for button images to ensure they are not double-inverted */
.inverted#top-bar img.button,
.inverted#bottom-bar img.button {
    filter: invert(100%); /* Already inverted by the general rule above */
}

#top-bar img.button, #bottom-bar img.button {
    height: 6vh;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
    filter: invert(0%); /* Ensure they are not inverted by default */
}

#top-bar img.button:hover, #bottom-bar img.button:hover {
    opacity: 1;
}

#top-bar #max-images-text {
    font-size: 1.2em;
    filter: invert(0%); /* Ensure default text is not inverted */
}

.inverted#top-bar #max-images-text {
    filter: invert(100%);
}

#top-bar input[type="number"] {
    width: 50px;
    padding: 5px;
    font-size: 1em;
    text-align: center;
    filter: invert(0%); /* Ensure default input is not inverted */
}

.inverted#top-bar input[type="number"] {
    filter: invert(100%);
}

#top-bar select#background-color {
    padding: 8px;
    font-size: 1em;
    filter: invert(0%); /* Ensure default select is not inverted */
}

.inverted#top-bar select#background-color {
    filter: invert(100%);
}

#image-wrapper {
    position: fixed;
    top: 7.5vh;
    bottom: 7.5vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 17 / 11;
    background-color: white; /* Default background for the wrapper */
    overflow: hidden; /* Clip images that extend beyond the wrapper */
}

#image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Maintain aspect ratio, fit within bounds */
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

#image-wrapper img#welcome-image {
    /* Styles for the initial welcome image if needed */
}

#issues-container {
    position: relative;
    display: flex;
    align-items: center;
}

#issues-container #issues-button {
    height: 6vh;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
    filter: invert(0%); /* Ensure default button image is not inverted */
}

.inverted#bottom-bar #issues-container #issues-button {
}

#issues-container #issues-button:hover {
    opacity: 1;
}

#issues-container #issue-selector {
    position: relative;
    left: 0;
    display: none; /* Hidden by default */
    padding: 5px;
    border: 1px solid #ccc;
    background-color: white;
    z-index: 3; /* Ensure it's above other elements */
    font-size: 1em;
    /* transform: translateY(100%); - REMOVE THIS */
}

.inverted#bottom-bar #issues-container #issue-selector {
    filter: invert(100%);
}

#issues-container #issue-selector option {
    padding: 8px;
    filter: invert(0%); /* Ensure default options are not inverted */
}

.inverted#bottom-bar #issues-container #issue-selector option {
    filter: invert(100%);
}

/* Styles for fullscreen mode */
body.fullscreen {
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
    overflow: hidden; /* Prevent scrollbars if content tries to extend beyond viewport */
}

body.fullscreen > #top-bar,
body.fullscreen > #bottom-bar {
    display: none;
}

body.fullscreen #image-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: transparent !important;
}

body.fullscreen #image-wrapper img {
    object-fit: contain;
    max-width: 100%; /* Ensure it doesn't exceed viewport width */
    max-height: 100%; /* Ensure it doesn't exceed viewport height */
    /* Remove absolute positioning and transform from the image */
    transform: none;
}
/* Styles for inverted colors */
.inverted {
    /* We no longer apply inversion to the body itself */
}

/* Set background colors for top and bottom bars when inverted */
.inverted#top-bar,
.inverted#bottom-bar {
    background-color: black; /* Or blue, depending on your preference */
}

/* Styles for screens with a maximum width of 600 pixels (typical phones in portrait) */
@media (max-width: 900px) {
    body {
        min-height: 100vh;
        margin: 0;
    }

    #top-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        display: grid; /* Change to grid layout */
        grid-template-rows: auto auto auto; /* Three rows that adjust to content */
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* Three equal-width columns */
        padding: 5px 10px;
        z-index: 2;
        box-sizing: border-box;
        align-items: center; /* Vertically center items within their grid cells */
        gap: 5px; /* Optional gap between grid items */
        height: auto !important; /* Override any fixed height */
        padding-bottom: 5px !important; /* Adjust padding */
    }

    #bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        display: grid; /* Change to grid layout */
        grid-template-rows: auto auto auto; /* Three rows that adjust to content */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Two equal-width columns */
        padding: 5px 10px;
        z-index: 2;
        box-sizing: border-box;
        align-items: center; /* Vertically center items within their grid cells */
        gap: 5px; /* Optional gap between grid items */
        height: auto !important; /* Override any fixed height */
        padding-top: 5px !important; /* Adjust padding */
    }

    #top-bar > * { /* Target all direct children of #top-bar */
        margin: 0; /* Reset margins */
    }

    /* Place the top bar items in the grid */
    #top-bar img[alt="Load images"] {
        grid-row: 1;
        grid-column: 1;
    }

    #top-bar #max-images-text {
        grid-row: 1;
        grid-column: 2;
        text-align: center;
    }

    #top-bar input[type="number"] { /* The text field */
        grid-row: 1;
        grid-column: 3;
        text-align: center;
    }

    #top-bar img[alt="Start fading"] {
        grid-row: 2;
        grid-column: 1;
    }

    #top-bar img[alt="Pause fade"] {
        grid-row: 2;
        grid-column: 2;
    }

    #top-bar img[alt="Download images"] {
        grid-row: 2;
        grid-column: 3;
    }

    #top-bar select#background-color { /* Background color dropdown menu */
        grid-row: 3;
        grid-column: 1 / 3;
    }

    #top-bar img[alt="Toggle fullscreen"] { /* toggle fullscreen */
        grid-row: 3;
        grid-column: 3;
        justify-self: end;
    }

    #bottom-bar > * { /* Target all direct children of #bottom-bar */
        margin: 0; /* Reset margins */
    }

    /* Place the bottom bar items in the grid */
    #bottom-bar img[alt="Participate"] {
        grid-row: 1;
        grid-column: 1 / -1; /* Span both columns */
	justify-self: center;
    }

    #bottom-bar img[alt="Contributors"] {
        grid-row: 2;
        grid-column: 1;
        justify-self: center;
    }

    #bottom-bar #issues-container {
        grid-row: 2;
        grid-column: 2;
        justify-self: center; /* Align to the end of the cell */
        min-width: 80px;
    }

    #bottom-bar img[alt="About"] {
        grid-row: 3;
        grid-column: 1;
    }

    #bottom-bar img[alt="rubble"] { /* The banner image */
        grid-row: 3;
        grid-column: 2;
    }

    #bottom-bar #issues-container #issues-button {
        max-height: 100% !important; /* Allow issues button to fill cell */
    }

    #issues-container {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Align button to the right */
    }

    #issue-selector {
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
        display: none;
        padding: 5px;
        border: 1px solid #ccc;
        background-color: white;
        z-index: 3;
        font-size: 1em;
        width: auto;
        min-width: 100%;
        box-sizing: border-box;
    }

    #image-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        height: calc((90vw * 11) / 17);
        max-height: none;
        object-fit: contain;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        z-index: 1;
    }

    #image-wrapper img {
        max-width: 100%;
        max-height: 100%;
    }
}