/* Code comments and significant css styles were generated by ChatGPT*/

/* Style adjustments for breadcrumbs */
.breadcrumb {
    --bs-breadcrumb-margin-bottom: 0;
}

/* Aligns text to the right with adjusted padding */
.text-end {
    padding-right: 5px; /* Adjust padding as needed */
}

/* Adjust padding for space between navigation links */
.nav-link {
    padding-right: 10px; /* Adjust padding for space between links */
}

/* Adjust margin for "logged in as" text in the navigation */
.nav-logged-in-as {
    margin-top: 10px; /* Adjust this value to move the text further down */
}

/* Styles for bonus form container, allowing flexible spacing and wrapping */
.bonus-form-container {
    gap: 10px; /* Adjusted spacing between fields */
    flex-wrap: wrap;
}

/* Ensures each input field in the bonus form takes up equal space */
.bonus-form-container .form-group {
    flex: 1; /* Ensure each input takes up an equal amount of space */
    min-width: 100px; /* Prevent the input fields from becoming too small */
}

/* Grid layout for displaying items in a two-column structure */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    justify-content: center;
    margin-top: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* Padding around individual grid items */
.grid-item {
    padding: 20px;
}

/* Container for city overview with max width and centering */
.city-overview-inner {
    max-width: 500px; /* Adjust the max-width for a better fit */
    margin: 0 auto; /* Center the container within the grid */
}

/* Margin adjustment for city scores */
.city-scores {
    margin-top: 20px;
}

/* Styling for city info cards with a dark background, rounded corners, and text alignment */
.city-info-card {
    background-color: #333; /* Softer dark background */
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    line-height: 1.5;
    max-width: 150px; /* Ensure the box has a fixed width to prevent wrapping */
    text-align: center;
}

/* Bold font for card headings */
.city-info-card h6 {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Center and align text within the card */
.city-info-card .card-text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px; /* Adds equal margin to left and right */
}

/* Prevent text wrapping and add spacing in paragraphs within city info cards */
.city-info-card p {
    margin-bottom: 0.5rem; /* Separate each line with a little more space */
    white-space: nowrap;  /* Prevent wrapping of text */
}

/* Container and position for city info, ensuring it stays on top of other elements */
.header {
    position: relative;
}
.city-info-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
}

/* Alternate row colors in tables for better readability */
.table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Light grey background for odd rows */
}

.table tbody tr:nth-child(even) {
    background-color: #ffffff; /* White background for even rows */
}

/* Set consistent column widths and alignments in tables */
.table th,
.table td {
    width: 200px; /* Default width for all columns */
    text-align: left; /* Left-align the text in table cells */
    vertical-align: middle; /* Ensure text is vertically centered within cells */
    padding: 12px 10px; /* Add padding for better readability */
}

/* Specific width for the first column */
.table th:nth-child(1),
.table td:nth-child(1) {
    width: 250px; /* Wider for the first column (Building/Technology) */
}

/* Specific width for the Cost column */
.table th:nth-child(2),
.table td:nth-child(2) {
    width: 120px; /* Narrower for the Cost column */
}

/* Specific width for the Land column */
.table th:nth-child(3),
.table td:nth-child(3) {
    width: 100px; /* Narrower for the Land column */
}

/* Specific width for the Happiness column */
.table th:nth-child(4),
.table td:nth-child(4) {
    width: 100px; /* Narrower for the Happiness column */
}

/* Specific width for the Sustainability column */
.table th:nth-child(5),
.table td:nth-child(5) {
    width: 100px; /* Narrower for the Sustainability column */
}

/* Specific width for the Requirement column */
.table th:nth-child(6),
.table td:nth-child(6) {
    width: 150px; /* Slightly wider for the Requirement column */
}

/* Specific width for the Special column */
.table th:nth-child(7),
.table td:nth-child(7) {
    width: 200px; /* Wider for the Special column */
}

/* Fixed width for the Action buttons in the table */
.table th:nth-child(8),
.table td:nth-child(8) {
    width: 100px; /* Fixed width for the Action buttons */
}

/* Ensure the table spans the full width of its container */
.table {
    width: 100%;
    table-layout: fixed; /* Ensures columns take the set widths */
    border-collapse: collapse;
}

/* Remove padding and margin from table rows */
.table tr {
    padding: 0;
    margin: 0;
}

/* Adjust padding and remove borders in table cells */
.table td, .table th {
    padding: 5px;  /* Adjust padding as necessary */
    border: none;
}

/* Container styling for responsive layout */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px; /* Adjust this value to make the accordion wider on larger screens */
}

/* Media query for larger screens */
@media (min-width: 992px) {
    .container {
        max-width: 90%; /* Adjust the width as necessary for larger screens */
    }
}

/* Media query for small screens */
@media (max-width: 576px) {
    .container {
        max-width: 100%; /* Ensure full width on small screens */
    }
}

/* Styling for the toggle button in the accordion */
#toggleAccordionBtn {
    display: inline-block;
    margin-bottom: 1rem;
    margin-left: auto; /* Align to the right */
    margin-right: 0;
}

/* Optional: Modify accordion items for better display on larger screens */
.accordion-item {
    margin-bottom: 0.5rem; /* Add space between accordion items */
}

/* Styling for form labels */
label {
    font-weight: bold;
}

/* Base body styling including font, background color, and text alignment */
body {
    font-family: "Tomorrow", sans-serif, Arial, Helvetica, sans-serif; /* Fallback font added */
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Centered text for region instructions */
.region-instructions {
    text-align: center;
}

/* Styling for the header with gradient background */
.header {
    position: relative;
    background: linear-gradient(to bottom, #184a63, #fff);
    color: #fff;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    text-align: center;
    font-family: "Gugi", sans-serif;
}

/* Specific styling for header title */
.header h1 {
    font-family: "Gugi", sans-serif, "Times New Roman", serif;
    margin-bottom: 20px;
}

/* Navigation link styling in the header */
.headerNav .nav-link {
    font-family: "Tomorrow", sans-serif;
    font-weight: 400;
    padding: 10px;
    text-align: center;
}

/* General header navigation styling */
.headerNav {
    font-family: "Tomorrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000;
    justify-content: center;
}

/* Basic styling for the navigation bar */
.nav {
    display: flex;
    list-style: none;
}

/* Add spacing between navigation items */
.nav-item {
    margin: 0 10px; /* Add spacing between nav items */
}

/* Rounded corners for navigation pills */
.nav-pills .nav-link {
    border-radius: 0.25rem;
}

/* Padding for sections */
.section {
    padding: 0.5rem 2rem 1rem 2rem;
}

/* Image size adjustments for various types */
.small-img {
    width: 100px;
    max-width: 100%;
    height: auto;
}

.med-img {
    width: 300px;
    max-width: 100%;
    height: auto;
}

.large-img {
    width: 500px;
    max-width: 100%;
    height: auto;
}

/* Custom fonts for specific classes */
.font1 {
    font-family: "Iceland", sans-serif;
    font-weight: 400;
    font-size: 2rem;
}

.font2 {
    font-family: "Baumans", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
}

.font3 {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1rem;
}

/* Ensure specificity by targeting the exact classes for paragraph fonts */
p.font1 {
    font-family: "Iceland", sans-serif !important;
}

p.font2 {
    font-family: "Baumans", sans-serif !important;
}

p.font3 {
    font-family: "Press Start 2P", system-ui, sans-serif !important;
}

/* Styling for rules box with border, padding, and centered text */
.rules-box {
    border: 1px solid #000; /* Add a border to create the box */
    padding: 20px; /* Add padding inside the box */
    margin: 0 auto; /* Center the box */
    width: fit-content; /* Adjust the width to fit the content */
    text-align: center; /* Center the text inside the box */
}

/* Underline the heading in the rules box */
.rules-box h3 {
    text-decoration: underline;
}

/* Add padding to list items in rules box */
.padded-list {
    text-align: left;
    padding-left: 20px;
}

/* Custom ordered list styling with bold numbers */
ol.font4 {
    list-style-type: none; /* Remove default list styling */
    counter-reset: item; /* Reset the counter */
}

ol.font4 li {
    counter-increment: item; /* Increment the counter */
    margin-bottom: 10px; /* Add some space between items */
}

ol.font4 li::before {
    content: counter(item) ". "; /* Add the counter before each item */
    font-weight: bold; /* Make the numbers bold */
}

/* Image grid for land regions using flexbox for better layout control */
.image-grid .centered {
    grid-column: 1 / -1; /* Span across all columns */
    justify-self: center; /* Center the image within the full-width column */
}

/* General image grid styling for land regions, changed to flexbox layout */
.image-grid {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
    justify-content: center; /* Center items horizontally */
    gap: 10px; /* Control the gap between items */
    max-width: 100%; /* Remove any max-width limitation */
    margin: 0 auto; /* Center the grid */
}

/* Image grid item styling for land regions */
.image-grid img {
    flex: 1 1 300px; /* Allow items to grow and shrink, with a base size of 300px */
    max-width: 300px; /* Set the maximum width */
    height: auto;
    object-fit: cover; /* Ensure the image covers the container without distortion */
    aspect-ratio: 4 / 3; /* Maintain a consistent aspect ratio */
}

/* Media query adjustments for image grid on medium screens */
@media screen and (max-width: 768px) {
    .image-grid img {
        flex: 1 1 45%; /* Adjust flex basis for medium screens */
    }
}

/* Media query adjustments for image grid on small screens */
@media screen and (max-width: 480px) {
    .image-grid img {
        flex: 1 1 100%; /* Stack images vertically on smaller screens */
    }
}

/* Flexbox layout for role images */
.roles-image-grid {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap if necessary */
    justify-content: center; /* Center items horizontally */
    gap: 10px;
    width: 100%; /* Allow full width of the screen */
    max-width: 100%; /* Remove any max-width limitation */
    margin: 0 auto;
}

/* Role image styling with flexbox adjustments */
.roles-image-grid img {
    flex: 1 1 auto; /* Flex-grow and flex-shrink with auto base size */
    max-width: 200px;
    height: auto;
    object-fit: cover;
}

/* Media query adjustments for roles image grid on medium screens */
@media screen and (max-width: 768px) {
    .roles-image-grid img {
        flex: 1 1 30%; /* Adjust for smaller screens */
    }
}

/* Media query adjustments for roles image grid on small screens */
@media screen and (max-width: 480px) {
    .roles-image-grid img {
        flex: 1 1 45%; /* Stack images with more spacing on smaller screens */
    }
}

/* Flexbox layout for awards images */
.awards-image-grid {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap if necessary */
    justify-content: center; /* Center items horizontally */
    gap: 10px;
    width: 100%; /* Allow full width of the screen */
    max-width: 100%; /* Remove any max-width limitation */
    margin: 0 auto;
}

/* Awards image styling with flexbox adjustments */
.awards-image-grid img {
    flex: 1 1 auto; /* Flex-grow and flex-shrink with auto base size */
    max-width: 400px;
    height: auto;
    object-fit: cover;
}

/* Media query adjustments for awards image grid on medium screens */
@media screen and (max-width: 768px) {
    .awards-image-grid img {
        flex: 1 1 30%; /* Adjust for smaller screens */
    }
}

/* Media query adjustments for awards image grid on small screens */
@media screen and (max-width: 480px) {
    .awards-image-grid img {
        flex: 1 1 45%; /* Stack images with more spacing on smaller screens */
    }
}

/* Styling for dynamic modals and highlighted images */
.modal-backdrop.custom-backdrop {
    background-color: rgba(0, 0, 0, 0.7); /* Darken the rest of the screen except the clicked image */
}

.modal-highlighted {
    position: relative;
    z-index: 1055; /* Ensure it's above the backdrop */
}

/* Styling for table in dynamic modal content */
#dynamicModalContent table {
    border-collapse: collapse; /* Ensures no gaps between table cells */
    margin-bottom: 0; /* Removes any bottom margin that could cause extra space */
}

/* Adjust padding and vertical alignment in dynamic modal table cells */
#dynamicModalContent table td {
    padding: 5px; /* Adjusts padding inside table cells to remove extra space */
    vertical-align: middle; /* Ensures content is vertically centered */
}

/* Google Fonts - various font styles imported */
.tomorrow-thin,
.tomorrow-extralight,
.tomorrow-light,
.tomorrow-regular,
.tomorrow-medium,
.tomorrow-semibold,
.tomorrow-bold,
.tomorrow-extrabold,
.tomorrow-black,
.tomorrow-thin-italic,
.tomorrow-extralight-italic,
.tomorrow-light-italic,
.tomorrow-regular-italic,
.tomorrow-medium-italic,
.tomorrow-semibold-italic,
.tomorrow-bold-italic,
.tomorrow-extrabold-italic,
.tomorrow-black-italic {
    font-family: "Tomorrow", sans-serif;
}

.press-start-2p-regular {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
}

.iceland-regular {
    font-family: "Iceland", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.gugi-regular {
    font-family: "Gugi", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.baumans-regular {
    font-family: "Baumans", system-ui;
    font-weight: 400;
    font-style: normal;
}