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

/* Build options table. It used to carry eight fixed pixel widths — 100px for a
   column headed "Sustainability", among others. Those widths were the reason
   headers collided: with wrapping off, a long heading simply overflowed into its
   neighbour. Let the columns size to their content instead, and let the two prose
   columns wrap. The table scrolls inside .table-responsive when that comes to more
   than the page width. */
.build-options-table th,
.build-options-table td {
    text-align: left;
    vertical-align: middle;
    padding: 12px 10px;
    white-space: nowrap;
}

/* The building name and the two descriptive columns hold sentences, so they wrap
   rather than stretching the table off the screen.

   The .table-responsive prefix is load-bearing: without it these tie on specificity
   with ".table-responsive > .table th { white-space: nowrap }" further down the file
   and lose on source order, leaving the heading unable to wrap.

   width, not min-width: table layout does not reliably honour min-width on a cell,
   and "Building/Technology" is a single unbreakable token, so a too-narrow cell let
   it overflow into the next column. overflow-wrap lets it break if it must. */
.table-responsive > .build-options-table th:nth-child(1),
.table-responsive > .build-options-table td:nth-child(1) {
    white-space: normal;
    overflow-wrap: anywhere;
    width: 15rem;
}

.table-responsive > .build-options-table th:nth-child(6),
.table-responsive > .build-options-table td:nth-child(6),
.table-responsive > .build-options-table th:nth-child(7),
.table-responsive > .build-options-table td:nth-child(7) {
    white-space: normal;
    overflow-wrap: anywhere;
    width: 10rem;
}

/* Numbers line up under each other and read as a column. */
.build-options-table td:nth-child(2),
.build-options-table td:nth-child(3),
.build-options-table td:nth-child(4),
.build-options-table td:nth-child(5) {
    font-variant-numeric: tabular-nums;
}

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


/* Responsive width utilities. Bootstrap 5 ships w-25/50/75/100 but no breakpoint
   variants, so these fill the gap: full width on phones, the original fraction from
   lg up. Without them a w-50 form field is about 187px on a 375px screen, and an
   injected table inside one is clipped on both sides. */
@media (min-width: 992px) {
    .w-lg-25 { width: 25% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-100 { width: 100% !important; }
}

/* A .table-responsive only scrolls when its table is wider than the container.
   Without a floor the columns just squeeze until headers overlap, which is what
   happened on phones once the build-options widths stopped applying to every table.
   Give tables a minimum width so they scroll instead, and stop headers wrapping
   into each other. */
.table-responsive > .table {
    min-width: 34rem;
}

.table-responsive > .table th {
    white-space: nowrap;
}

/* Narrow phones: a little more room so long building names stay readable. */
@media (max-width: 575.98px) {
    .table-responsive > .table {
        min-width: 38rem;
    }
}

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

/* Bootstrap's .navbar sets its own muted link colour (55% black), which is both
   too faint against this gradient and not the blue the rest of the site uses. These
   restore the appearance the nav-pills version had before it became a real navbar. */
.headerNav .nav-link {
    color: #0d6efd;
}

.headerNav .nav-link:hover,
.headerNav .nav-link:focus {
    color: #0a58ca;
}

/* The current page, shown as a filled pill as it was previously. */
.headerNav .nav-link.active {
    color: #fff;
    background-color: #0d6efd;
    border-radius: 0.375rem;
}

/* The hamburger only appears below the lg breakpoint; give it a visible edge
   against the mid tones of the header gradient. */
.headerNav .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.65);
}

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

/* Each role is a picture plus its name, so the figure is the flex item and the
   image simply fills it. Sizing the image directly, as this did before the captions
   were added, leaves the figures unsized and the row collapses. */
.roles-image-grid .role-figure {
    /* Shrink to fit rather than wrapping one role onto its own line: five across
       reads as a set, four-and-one reads as a mistake. */
    flex: 1 1 0;
    min-width: 120px;
    max-width: 200px;
}

.roles-image-grid img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* The artwork carries no text of its own, so the caption is the only thing naming
   the role. It should not shrink away with the picture. */
.role-label {
    line-height: 1.25;
}

@media screen and (max-width: 768px) {
    .roles-image-grid .role-figure {
        flex: 1 1 30%; /* Three across on a narrow screen */
    }
}

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

/* ---------------------------------------------------------------------------
   Build Options
   --------------------------------------------------------------------------- */

/* The filter row stays put while the catalogue scrolls, so narrowing the list
   does not mean scrolling back to the top first. */
.build-filters {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    padding: 0.75rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* One card per building below lg. A table there either scrolls sideways or
   crushes its columns; neither is usable on a phone. */
.build-card {
    border-left: 4px solid #0d6efd;
}

/* Already built: settled, not actionable. */
.build-card-owned {
    border-left-color: #198754;
    background-color: #f6fbf8;
}

/* Cannot be built yet. Dimmed so the eye skips it rather than reading it, but
   still legible — the reason why is on the card and is worth reading. */
.build-card-blocked {
    border-left-color: #adb5bd;
    opacity: 0.75;
}

.build-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.build-stat {
    white-space: nowrap;
}

.build-cost {
    font-variant-numeric: tabular-nums;
}

/* Long catalogues: keep the column headings visible while scrolling a category,
   and keep the building name anchored while scrolling sideways, so the numbers
   always have something to belong to. */
@media (min-width: 992px) {
    .build-options-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #fff;
    }

    .build-options-table tbody td:first-child,
    .build-options-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #fff;
    }

    .build-options-table thead th:first-child {
        z-index: 3;
    }

    /* The sticky first cell needs its own background or the striped rows show
       through as it passes underneath. */
    .build-options-table tbody tr:nth-child(odd) td:first-child {
        background-color: #f9f9f9;
    }
}

/* An award whose trophy artwork has not been drawn yet. The award is real and can
   be given; only the picture is missing, so it is named rather than shown as an
   empty frame. Height is set here because .med-img leaves it to the image. */
.award-pending {
    min-height: 180px;
    border: 1px dashed rgba(128, 128, 128, 0.5);
    background: rgba(128, 128, 128, 0.06);
    font-style: italic;
}