/*******************
BASE STYLES
********************/

body {
    /*font-family: 'Inter', sans-serif;*/
    margin: 0;
    padding: 0;
    background-color: #dddddd !important; /* Fallback background color */
    background-size: cover; /* Cover the entire area */
    font-family: 'Futura Maxi CG', sans-serif;
    font-weight: normal; /* Ensures the default weight is applied */
}

.text {
    color: black;
    font-size: 16px;
    text-align: center;
}

/*******************
NAVBAR
********************/

@font-face {
    font-family: "Inter";
    src: url('../fonts/Inter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.navbar-text {
    font-size: 13px;
    color: #d02d00 !important;
    text-align: left;
    margin-left: 40px;
}

.navbar-nav a {
    color: #d02e02 !important;
    font-family: 'Inter', sans-serif;
}

.navbar-nav a.nav-link.active {
    color: #d02e02 !important;
    font-weight: bold;
    font-family: 'Inter', sans-serif;
    padding: 20px;
}

.navbar-nav .nav-link:hover {
    color: #333333 !important;
}

/* Custom styles for the navbar toggler */
.custom-toggler {
    border: none; /* Remove default button border */
    background: transparent; /* No background */
    padding: 5px; /* Adjust padding to control overall button height */
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap if using margin on bars */
    position: relative;
    border: none;
    background: transparent;
}

/* Style the three bars */
.toggler-bar {
    display: block;
    width: 30px; /* width of the bars */
    height: 4px; /* height of the bars */
    background-color: #D02E02;
    border-radius: 2px; /* Rounded edges */
    margin: 1.5px 0; /* space between the bars */
    transition: 0.3s ease-in-out;
}

.navbar-nav .nav-link {
    text-align: center;
    /*width: 105px; /* Ensure consistent width */
    margin-top: 5px;
}

/* Ensure dropdown behaves as a menu */
@media (max-width: 992px) {
    .navbar {
        padding-left: 0px;
    }
    .navbar-toggler {
        margin-left: auto; /* Pushes the button to the right */
        border: none; /* Optional: Removes default border */
        outline: none;
        box-shadow: none;
    }
    .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        /*left: 78.8%;*/
        left: auto;
        /*transform: translateX(-50%);*/
        width: auto;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 10px;
        z-index: 1000;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .navbar-collapse.show {
        display: block;
        opacity: 1;
        position: absolute;
        padding-right: 2px;
        
        transform: translateY(0);
    }

    .navbar-collapse:not(.show) {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }
}

/*******************
NAME BLOCK
********************/

.project-background {
    background-color: #E9E9E9; /* Set the background color */
    padding: 10px; /* Add some padding for spacing */
    border-radius: 0px; /* Optional: rounded corners (was 5) */
    margin:  0; /* Remove margin to keep it aligned */
    width: 100%; /* Make the width fit the container */
    max-width: 275px; /* Set a maximum width (315) */
    height: calc(100vh - 50px);
    display: block; /* Allow the block to fit the content width */
}

.text-container {
    position: relative;
    left: 0px; /* Move the whole text block right */
}

.project-content {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between the project name and description */
    align-items: center; /* Center items vertically */
}

.project-name {
    
    font-family: 'Futura Maxi CG Bold', sans-serif;
    font-weight: bold;  
    color: #D02E02;
    font-size: 52px;
    text-decoration: none;
    margin-bottom: 0; /* Remove bottom margin */
    display: block; /* allows padding to take effect */
    letter-spacing: 2px;
    padding-top: 115px; /* Adjust this value to move the text down */
    line-height: 1.5;
    text-align: center;
}

.project-description {
    color: black; 
    font-size: 18px; 
    margin-bottom: 0; 
    padding-left: 0; /* Remove left padding */
    padding-right: 2%; /* NEW */
    text-align: right; 
    padding-top: 40px; 
    margin-left: auto; /* Automatically align to the right */
}

.navbar-brand {
    position: relative; /* Remove absolute to keep it in the flow */
    display: block; /* Makes sure it's centered */
    text-align: center; /* Centers it inside its container */
    padding: 0; /* Remove unnecessary padding */
    margin: 0 auto; /* Ensures centering */
    margin-bottom: 50px;
    margin-top: -25.7%;
}

@media (max-width: 994px) {
  .navbar-brand {
    margin-top: -22.5%;
  }
}

.navbar-brand img {
    max-width: 100%; /* Ensures the logo doesn’t overflow */
    height: auto; /* Keeps proportions */
    max-height: 60px; /* Adjust this to fit your navbar */
}

@media (max-width: 992px) { 
    .navbar-brand img {
        max-height: 40px; /* Reduce size on smaller screens */
        margin-top: 1.5%;
    }
}

/*******************
BACKROUND PICTURES
********************/

/* Grid container for background images */
.background-grid {
    position: fixed; /*prevents overflow to the right*/
    top: 80px; /* based on navbar height */
    left: -250px; /* fits layout without gaps */
    right: 0;
    bottom: 0;
    z-index: -1;  /* Places the grid behind other elements */

    display: grid; /* Creates a grid */
    grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
    grid-auto-rows: minmax(150px, auto); /* Ensure rows have a minimum height */
    column-gap: 25px; /* Space between columns and rows */
    row-gap: 15px;

    width: 100%;
    padding: 20px; /* Optional padding */
    will-change: transform; /* smooth rendering */
}

/* Image container for each grid item */
.image-container {
    position: relative;
    width: 100%;
    height: auto; /* Set a fixed height for images */
    overflow: hidden !important;
}

/* Make the image fill its container */
.image-container img {
    width: 100%;
    height: 100%;       /* Fill the grid cell */
    object-fit: cover;  /* Ensure the image covers the container without distortion */
    opacity: 0.4;       /* Faded effect */
    transition: opacity 0.3s ease;
}

/* Offset every second row to stagger images */
.image-container:nth-child(10n+6),
.image-container:nth-child(10n+7),
.image-container:nth-child(10n+8),
.image-container:nth-child(10n+9),
.image-container:nth-child(10n+10) {
    transform: translateX(80px); /* Adjust for a slight shift */
}

/***********
ABOUT SECTION (Parallax Style with Shrunk Height)
***********/

.about-section {
    position: relative;
    height: auto; /* Let the height be determined by the content */
    max-height: 350px; /* Limit max height, adjust to get the feel you want */
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: black;
    font-size: 2rem;
    padding: 40px 20px; /* Added padding to control spacing */
}

.about-section .container {
    display: flex;
    justify-content: center; /* Ensures the text is centered */
    align-items: center;
    width: 100%; /* Ensures full width */
}

.about-section .text-container {
    max-width: 800px; /* Keeps text neatly aligned */
    text-align: center;
    padding: 20px;
}

.about-header {
    font-size: 2.5rem;
    font-weight: bold;
    color: #D02E02; /* Red color for header */
    margin-bottom: 20px;
}

.about-section p {
    font-size: 1.2rem; /* Text size */
    line-height: 1.6;
    font-weight: 400;
}

/**********
TIMELINE
**********/

.timeline-container {
    background: white; /* White background */
    width: 100%; /* Full width */
    position: relative; /* Keeps it behind the timeline */
    z-index: -1; /* Ensures it stays behind */
}

.timeline {
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1; /* Ensure it's below the map section */
}

.timeline::after {
    content: "";
    position: absolute;
    width: 4px;
    background-color: #D02E02;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Individual timeline items - DESKTOP*/
.timeline-item {
    position: relative;
    width: 75%;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

/* Left-side content */
.timeline-item:nth-child(odd) {
    left: -28%;
    text-align: right;
    transform: translateX(-50px);
}

/* Right-side content */
.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
    transform: translateX(50px);
}

/* YEAR POSITIONING */
.timeline-year {
    font-size: 2.5rem;
    font-weight: bold;
    color: #D02E02;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap; /* Prevents year from wrapping */
    display: inline-block; /* Ensures the box fits its content */
}

/* Push the years for alignment */
.timeline-item:nth-child(odd) .timeline-year { 
    left: calc(100% + 20px); /* Moves year to the right of right-side content */
}

.timeline-item:nth-child(even) .timeline-year { 
    right: calc(100% + 20px); /* Moves year to the left of left-side content */
}

/* CONTENT BOX */
.timeline-content {
    background: transparent;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: center;
}

/* HEADINGS INSIDE CONTENT */
.timeline-content h3 {
    font-size: 1.5rem; /* Adjust this for bigger headers */
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

/* FADE-IN EFFECT */
.timeline-item.show {
    opacity: 1;
    transform: translateX(0);
}

/*******************
INTERMEDIATE screens
*******************/

@media (max-width: 1220px) and (min-width: 770px) {
    .timeline-item {
        width: clamp(40%, 40vw, 65%);
        padding: 20px;
    }
    .timeline-item:nth-child(odd) {
        /*left: calc(50% - 52%);
        /* text-align: right; 
        transform: translateX(0px) /*(-25px);

        left: auto;
        right: calc(50%);
        text-align: right;
        transform: none; */

        /*left: auto;
        right: calc(50%);
        text-align: right;
        transform: translateX(-50px); */
        left: calc(47% - clamp(40%, 40vw, 65%));
        text-align: right;
        transform: translateX(0);        
    }
    
    .timeline-item:nth-child(even) {
        left: 50%;
        text-align: left;
        transform: translateX(25px);
    }
    .timeline-content {
        text-align: center;
    }
        /* Move the year label above the content box */
    .timeline-item:nth-child(odd) .timeline-year,
    .timeline-item:nth-child(even) .timeline-year {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: block !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
}

/******
MOBILE
******/

@media (max-width: 770px) { 
    /* Hide the red timeline line */
    .timeline::after {
        display: none !important;
    }

    /* Make timeline items full width */
    .timeline-item {
        width: 100% !important;
        left: 0 !important;
        text-align: center !important;
        transform: none !important;
    }

    /* Move the year label above the content box */
    .timeline-year {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: block !important;
        margin-bottom: 10px !important; /* Adds space between year and content */
        text-align: center !important;
    }

    /* Center align text inside content box */
    .timeline-content {
        text-align: center !important;
    }
}

/***********
MAP SECTION
***********/
.btn-container {
    text-align: center;
    padding-bottom: 40px;
}

.map-section {
    margin-left: calc(-50vw + 50%);
    background-color: white;
    padding: 50px 20px 0 20px;  /* Top and side padding only, no bottom padding */
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    margin-bottom: 0;
}

.map-content {
    max-width: 1200px;  /* Optionally constrain inner content width */
    margin: 0 auto;
    text-align: center;
    padding-bottom: 0;  /* Remove any bottom padding */
}

/* Remove default margins on headings and paragraphs */

.map-content p {
    margin: 0;
    padding: 0;
}

.map-content h2 {
    font-weight: bold;
    color: #D02E02; /* red */
}

.map-container {
    width: 100%;
    margin-bottom: 0; /* Remove any gap below the map */
}

.map-description {
    text-align: center;
    font-size: 1.25rem;
    margin-top: 0;    /* Remove gap above the description */
    margin-bottom: 0; /* Remove gap below the description */
}

/*******************
FOOTER
********************/
.site-footer {
    margin-top: 0;  /* Force no gap above the footer */
    padding: 40px 0;
    width: 100%;
    background-color: white;
    color: #d02d00;
    text-align: center;
    padding: 20px 0;
    border-top: 2px solid #d02d00;
    font-size: 14px;
} 

footer {
    margin-top: 0;  /* Force no gap above the footer */
    padding: 20px 0;
    width: 100%;
    background-color: #D02E02;
    color: white;
    text-align: center;
    position: relative;
}

.github-logo {
    width: 65px; /* Adjust size as needed */
    height: auto;
    display: block;
    margin: 10px auto 0;
}

.nav-link {
    margin-left: 1rem;
}