/* Ensure the body and html take up the full viewport height */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Full viewport height */
    overflow: hidden; /* Prevent scrolling on the entire page */
    display: flex;
    flex-direction: column; /* Stack header, main, and footer vertically */
}

/* Base font style for the entire website */
body {
    margin: 0;
    font-family: 'Josefin Sans', sans-serif; /* Ensure consistency */
    font-size: 13.5px; /* Default font size */
    color: #333; /* Default text color */
    line-height: 1.5; /* Ensure good readability */
}

/* Change font for everything except the header and paragraph above the columns */
main.container, .column, .project-info, .project-details, .image-description, .plan-description, footer {
    font-family: 'Josefin Sans', sans-serif; /* Replace with the new font */
}

/* Define font weights for Josefin Sans */
@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Thin.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-ExtraLight.ttf') format('truetype');
    font-weight: 200; /* Extra-Light */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-SemiBold.ttf') format('truetype');
    font-weight: 600; /* Semi-Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Header container */
header {
    position: fixed; /* Fix the header at the top */
    top: 50px;
    left: 0;
    width: 100%; /* Full width of the viewport */
    z-index: 10; /* Ensure the header is above other content */
    text-align: center;
    padding: 0; /* Remove padding */
    background-color: transparent; /* Keep your existing background */
    display: flex; /* Use Flexbox for layout */
    justify-content: center; /* Center the header-box horizontally */
}

/* Header box */
.header-box {
    height: auto;
    max-height: 55px;
    display: flex;
    flex-direction: column; /* Stack h1 and p vertically */
    align-items: center; /* Center-align both h1 and p */
    position: relative; /* Enable positioning for child elements */
    width: 300px; /* Set a fixed width for the header box */
    text-align: justify; /* Justify text inside the box */
}

/* Header title */
header h1 {
    margin: 0; /* Remove default margin */
    font-size: 2em; /* Adjust font size */
    font-weight: 300;
    padding: 0; /* Remove padding */
    text-align: justify; /* Justify the text inside the h1 */
    width: 100%; /* Ensure h1 spans the full width */
    display: block; /* Ensure h1 behaves like a block element */
    line-height: 1.2; /* Adjust line height for compact spacing */
}

/* Force justification for single-line text in h1 */
header h1::after {
    content: '\00a0'; /* Add a non-breaking space to force justification */
    display: inline-block; /* Treat it as an inline element */
    width: 100%; /* Force the last line to justify */
    height: 0; /* Ensure it doesn't affect layout */
    line-height: 0;
    visibility: hidden; /* Make it invisible */
}

/* Header paragraph */
header p {
    font-family: 'Josefin Sans', sans-serif; /* Ensure consistency */
    font-weight: 300;
    color: #333; /* Default text color */
    font-size: 8px; /* Set the font size */
    margin: 5px 0 0; /* Adjust the margin */
    padding: 0; /* Remove padding */
    text-align: justify; /* Justify the paragraph text */
    text-align-last: justify; /* Force justification for the last line */
    display: inline-block; /* Ensure proper justification behavior */
    line-height: 1.4; /* Adjust line height for readability */
    position: relative; /* Enable positioning */
    top: -30px; /* Move the paragraph upwards */
    width: 100%; /* Ensure the paragraph spans the full width of the container */
}

/* Make the header title clickable */
header h1 a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit the text color */
    font-family: inherit; /* Use the same font as the header */
    position: relative; /* Set the link as a positioning context for the pseudo-element */
    transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Add hover effect for the header link */
header h1 a::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    left: 50%; /* Start from the middle */
    bottom: -4px; /* Position the underline slightly below the text */
    width: 0; /* Initially, the underline has no width */
    height: 1px; /* Set the thickness of the underline */
    background-color: #b7b7b7; /* Use the current text color for the underline */
    transition: width 0.6s ease, left 0.6s ease; /* Animate the width and position */
    z-index: -1;
    transform: translateX(-50%);
}

header h1 a:hover::after {
    width: 200vw; /* Expand the underline to the full width */
}

/* Remove link styling for phone number and email */
header p a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove the default underline */
    font-family: inherit; /* Ensure the font matches the rest of the paragraph */
    position: relative; /* Set the link as a positioning context for the pseudo-element */
    
}

/* Add hover effect for phone number and email */
header p a::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    left: 50%; /* Start from the middle */
    bottom: 0; /* Position the underline at the bottom of the text */
    width: 0; /* Initially, the underline has no width */
    height: 1px; /* Set the thickness of the underline */
    background-color: currentColor; /* Use the current text color for the underline */
    transition: width 0.3s ease, left 0.3s ease; /* Animate the width and position */
}

header p a:hover::after {
    width: 100%; /* Expand the underline to the full width */
    left: 0; /* Move the starting point to the left */
}

/* Main content (container) */
main.container {
    display: flex;
    flex-direction: row; /* Arrange columns horizontally */
    justify-content: center; /* Center columns horizontally */
    align-items: flex-start; /* Align columns at the top */
    height: calc(100vh - 168px); /* Subtract 100px for header and 20px for padding */
    margin-top: 100px; /* Add 100px distance from the top of the viewport */
    padding: 50px 50px 0; /* 50px top, 20px left and right, 0px bottom */
    overflow: hidden; /* Prevent scrolling on the container itself */
    gap: 30px; /* Add 10px spacing between columns */
}

/* Default layout: Three columns (desktop) */
.container {
    display: flex;
    flex-direction: row; /* Arrange columns horizontally */
    height: 100vh; /* Full viewport height */
    gap: 30px; /* Add spacing between columns */
    overflow: hidden; /* Prevent scrolling on the container */
}

/* Columns */
.column {
    flex: 1; /* Allow columns to take up equal space */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    height: 100%; /* Ensure columns fill the height of the container */
}

.container {
    display: flex;
    flex-direction: row; /* Arrange columns horizontally */
    height: 100vh; /* Full viewport height */
}

/* Columns */
.column {
    flex: 1; /* Allow columns to take up equal space */
    overflow-y: scroll; /* Allow scrolling even though the scrollbar is hidden */
    height: 100%; /* Ensure columns fill the height of the container */
    padding: 0; /* Keep your existing padding */
    margin: 0; /* Keep your existing margin */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align children at the top */
    scrollbar-width: none; /* Disable the scrollbar */
}

/* Forcefully target scrollbars for .column elements */
main.container .column::-webkit-scrollbar {
    display: none; /* Completely hide the scrollbar */
}

main.container .column::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
}

main.container .column::-webkit-scrollbar-thumb {
    background: #bbb !important;
    border-radius: 2px !important;
}

main.container .column::-webkit-scrollbar-thumb:hover {
    background: #999 !important;
}

/* Firefox-specific scrollbar styling */
main.container .column {
    scrollbar-width: none !important; /* Disable the scrollbar */
    scrollbar-color: #bbb #f0f0f0 !important;
}

/* Left column (project info) */
.project-info {
    flex: 1; /* Take 1/3 of the width */
    padding: 0px; /* Add padding around the section */
    color: #333; /* Default text color */
    line-height: 1.6; /* Ensure good readability */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack child elements vertically */
    align-items: flex-start; /* Align child elements to the left */
    font-weight: 200; /* Light */
}

/* Title (Header) Styling */
.project-info h2 {
    font-size: 14px; /* Adjust the font size for the title */
    font-weight: bold; /* Make the title bold */
    margin: 0; /* Remove all default margins */
    padding: 0; /* Ensure no padding is applied */
    color: #000; /* Set the title color */
    line-height: 1.6; /* Adjust line height to minimize vertical spacing */
    font-weight: 400; /* Regular */
}

/* Description (Paragraph) Styling */
.project-info p {
    font-size: 10px; /* Adjust the font size for the description */
    margin-bottom: 2em; /* Add spacing below each paragraph */
    color: #555; /* Set a slightly lighter color for the description */
    font-weight: 300; /* Light */
    text-align: justify;
}

/* Image container */
.image-container {
    width: 100%; /* Full width of the column */
    display: flex;
    flex-direction: column; /* Stack image and description vertically */
    margin-bottom: 20px; /* Add spacing between image blocks */
}

/* Images */
.image-container img {
    width: 100%; /* Make the image fill the column width */
    height: auto; /* Maintain aspect ratio */
    align-items: center; /* Center content horizontally */
    display: block; /* Ensure the image is displayed as a block element */
}

/* Image descriptions */
.image-description {
    font-size: 8px; /* Adjust the font size */
    font-weight: 300;
    color: #555; /* Set a slightly lighter color for the description */
    text-align: left; /* Align the text to the left */
    margin-top: 5px; /* Add spacing above the description */
}

/* Plan container */
.plan-container {
    width: 100%; /* Full width of the column */
    display: flex;
    flex-direction: column; /* Stack plan and description vertically */
    margin-bottom: 20px; /* Add spacing between plan blocks */
}

/* Plans */
.plan-container img {
    width: 100%; /* Make the plan fill the column width */
    height: auto; /* Maintain aspect ratio */
    align-items: center; /* Center content horizontally */
    display: block; /* Ensure the plan is displayed as a block element */
}

/* Plan descriptions */
.plan-description {
    font-size: 8px; /* Adjust the font size */
    font-weight: 300; /* Light */
    color: #555; /* Set a slightly lighter color for the description */
    text-align: left; /* Align the text to the left */
    margin-top: 5px; /* Add spacing above the description */
}

/* Right column (project details) */
.project-details {
    flex: 1; /* Take 1/3 of the width */
}

/* Project Details Styling */
.project-details p {
    font-size: 8px; /* Adjust the font size for project details */
    margin: 2px 0; /* Add spacing between each detail */
    color: #444; /* Set a slightly darker color for project details */
}

/* Bold Text in Project Details */
.project-details p strong {
    font-weight: 400; /* Make the labels (e.g., Year, Location) bold */
    color: #000; /* Set the color for bold text */
    /* color: white; /* Set text color to white */
    /* background-color: rgb(230, 230, 230); /* Set background color to black */
    /* padding: 1.5px;
    /* border-radius: 0px; */
}

/* Footer container */
footer {
    position: fixed; /* Fix the footer at the bottom */
    bottom: 0;
    left: 0;
    width: 100%; /* Full width of the viewport */
    height: 22px; 
    z-index: 100; /* Ensure the footer is above other content */
    text-align: right; /* Keep your existing alignment */
    padding: 2px; /* Keep your existing padding */
    background-color: white; /* Keep your existing background */
    font-size: 6px;
    color: #333;
}

/* Footer paragraph (2025) */
.footer-paragraph {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 6px; /* Match the font size of the other paragraph */
    font-weight: 300;
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    cursor: pointer; /* Indicate that the text is clickable */
}

/* Footer links (hidden by default) */
.footer-links {
    display: none; /* Initially hidden */
    position: absolute;
    bottom: 15px; /* Match the bottom value of .footer-paragraph */
    right: 40px; /* Position the links to the left of "2025" */
    font-size: 6px; /* Match the font size of the other paragraph */
    font-weight: 300;
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    color: #333; /* Ensure the links match the footer's text color */
}

/* Remove underline from links */
.footer-links a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove the default underline */
    font-family: inherit; /* Ensure the font matches the rest of the footer */
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    position: relative;
}

/* Add separator between links */
.footer-links a::after {
    content: " | "; /* Add the separator */
    color: inherit; /* Match the text color */
    margin: 0 5px; /* Add spacing around the separator */
}

/* Remove the separator after the last link */
.footer-links a:last-child::after {
    content: ""; /* Remove the separator */
}

/* Add hover effect for links */
.footer-links a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.embedded-content {
    width: 100%;
    height: 100%;
    border: none;
}

/* Popup container */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Full width of the viewport */
    height: 100%; /* Full height of the viewport */
    background-color: rgba(0, 0, 0, 0.8); /* Black overlay with 70% opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it appears above all other content */
    padding: 20px; /* Add padding around the popup */
    box-sizing: border-box; /* Include padding in the dimensions */
}

/* Hide the popup by default */
.popup.hidden {
    display: none;
}

/* Popup content */
.popup-content {
    background: transparent; /* Keep the popup background transparent */
    max-width: 100%; /* Limit the popup width to 80% of the viewport */
    max-height: 100%; /* Limit the popup height to 80% of the viewport */
    display: flex;
    flex-direction: column; /* Stack image and description vertically */
    justify-content: center; /* Center content vertically */
    overflow: visible; /* Prevent scrolling */
    box-sizing: border-box; /* Include padding in dimensions */
}

/* Enlarged image */
.popup-content img {
    max-width: 90vw; /* Ensure the image doesn't exceed the popup width */
    max-height: 90vh; /* Ensure the image doesn't exceed the popup height */
    object-fit: scale-down; /* Scale the image proportionally to fit within the container */
    display: block; /* Ensure the image is treated as a block element */
    align-items: center; /* Center content horizontally */
}

/* Image description */
.popup-content p {
    font-size: 10px; /* Keep the existing font size */
    font-weight: 300;
    color: white; /* Keep the text color white */
    margin: 10px 0 0; /* Add spacing above the description */
    text-align: left; /* Center the description text */
    word-wrap: break-word; /* Ensure long text wraps properly */
    max-width: 100%; /* Ensure the description doesn't exceed the popup width */
    padding: 0; /* Remove unnecessary padding */
    box-sizing: border-box; /* Include padding in dimensions */
}

/* Close button */
#popup-close {
    margin-top: 10px;
    padding: 5px 10px;
    font-size: 10px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#popup-close:hover {
    background-color: #555;
}

/* Close icon */
.popup-close {
    position: absolute;
    top: 10px; /* Position it near the top of the popup */
    right: 10px; /* Position it near the right of the popup */
    font-size: 20px; /* Adjust the size of the "+" */
    color: white; /* Set the color to white */
    background: none; /* Remove any background */
    border: none; /* Remove any border */
    cursor: pointer; /* Change the cursor to a pointer */
    z-index: 1001; /* Ensure it appears above the popup content */
    transition: transform 1s ease; /* Smooth rotation animation */
}

.popup-close::before {
    content: "+"; /* Display the "+" sign */
    display: inline-block; /* Ensure it behaves like an inline element */
    transform-origin: center; /* Set the rotation point to the center */
}

.popup-close:hover::before {
    transform: rotate(-45deg); /* Rotate the "+" 45° to the left */
}

/* Responsive layout: One column (tablets and phones) */
@media (max-width: 768px) {


    html, body {
        overflow: visible; /* Allow scrolling on the entire page */
    }

    main.container {
        flex-direction: column; /* Stack columns vertically */
        overflow: auto; /* Allow content to grow beyond the container */
        justify-content: flex-start;
        margin-top: calc(55px + 50px + 3vh);
        padding-top: 0px;
        scrollbar-width: none;
    }

    .container {
        flex-direction: column; /* Stack columns vertically */
        height: auto; /* Allow the container to grow with content */
        align-items: stretch;
        overflow: visible; /* Allow content to grow beyond the container */
    }

    .column {
        flex: none; /* Remove equal spacing */
        width: 100%; /* Make each column take up the full width */
        height: auto; /* Allow columns to grow with content */
        display: flex;
        flex-direction: column;
        overflow: visible; /* Prevent clipping of content */
    }


    .column::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge: Hide scrollbar */
    }

}