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

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

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

/* 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::after {
    content: '\00a0'; /* Add a non-breaking space */
    display: inline-block;
    width: 100%; /* Force the last line to justify */
    height: 0;
    line-height: 0;
    visibility: hidden; /* Make it invisible */
}

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

/* Position the main content relative to the header */
main.container {
    margin-top: calc(5vh + 110px); /* Add 5% of the viewport height plus the height of the header-box */
    flex: 1; /* Allow the main content to grow and fill available space */
    display: flex;
    flex-direction: row; /* Arrange columns horizontally */
    justify-content: center; /* Center columns horizontally */
    align-items: flex-start; /* Align columns at the top */
    overflow: hidden; /* Prevent scrolling within the main content */;
}


/* Left hover zone */
.hover-left {
    position: absolute;
    left: 0;
    width: 50%; /* Cover the left half of the container */
    height: 100%; /* Full height of the container */
    z-index: 1; /* Ensure it is below interactive elements */
    background-color: transparent; /* Make it invisible but clickable */
    pointer-events: auto; /* Allow pointer events */
}

/* Right hover zone */
.hover-right {
    position: absolute;
    right: 0;
    width: 50%; /* Cover the right half of the container */
    height: 100%; /* Full height of the container */
    z-index: 1; /* Ensure it is below interactive elements */
    background-color: transparent; /* Make it invisible but clickable */
    pointer-events: auto; /* Allow pointer events */
}

/* Middle Column (Slideshow) */
.slideshow {
    flex: 1; /* Take 1/3 of the width */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    justify-content: flex-start; /* Align children at the top */
    max-width: 50%;
    margin: 0 auto; /* Center the slideshow horizontally */
    height: 100%; /* Fill the height of the container */
    overflow-y: auto; /* Make the column scrollable if content exceeds height */
}

.image-container {
    width: 100%; /* Full width of the column */
    display: flex;
    max-width: 50%; /* Set a maximum width for the slideshow */
    max-height: 375px;
    flex-direction: column; /* Stack image and description vertically */
    align-items: center; /* Center content horizontally */
    margin-bottom: 20px; /* Add spacing between image blocks */
    z-index: 5;
}

.image-container img {
    width: 100%; /* Make the image fill the column width */
    height: auto; /* Maintain aspect ratio */
    z-index: 10;
}

.image-description {
    font-size: 8px; /* Adjust the font size */
    color: #555; /* Set a slightly lighter color for the description */
    text-align: center; /* Center the text */
    margin-top: 5px; /* Add spacing above the description */
}

/* Slideshow container */
.slideshow-container {
    position: relative; /* Establish positioning context for child elements */
    width: 100%; /* Full width of the parent column */
    height: 375px; /* Fixed height for the slideshow */
    margin: 0 auto; /* Center the slideshow horizontally */
    overflow: hidden; /* Prevent overflow */
}

/* Slideshow images */
.slideshow img {
    position: absolute; /* Stack all images on top of each other */
    top: 50%; /* Position the image vertically at the center */
    left: 50%; /* Position the image horizontally at the center */
    transform: translate(-50%, -50%); /* Offset the image by half its width and height to center it */
    max-width: 100%; /* Scale down to fit the width */
    max-height: 100%; /* Scale down to fit the height */
    object-fit: contain; /* Maintain aspect ratio and fit within the container */
    opacity: 0; /* Hide all images by default */
    transition: opacity 1s ease-in-out; /* Smooth fade-in effect */
}

/* Active image */
.slideshow img.active {
    opacity: 1; /* Show only the active image */
    z-index: 10; /* Ensure the active image is on top */
}

/* Disable pointer events for hover zones when over interactive elements */
.slideshow img,
footer {
    pointer-events: auto; /* Allow clicks on these elements */
    z-index: 2; /* Ensure they are above the hover zones */
}

/* Slideshow caption */
.slideshow-caption {
    margin-top: 10px; /* Add spacing between the slideshow and the caption */
    text-align: center; /* Center the text */
    font-weight: 300;
    font-size: 8px; /* Adjust the font size */
    color: #333; /* Text color */
}

/* Footer */
footer {
    position: relative; /* Establish a common positioning context */
    font-weight: 300;
    text-align: right;
    padding: 10px;
    background-color: transparent; /* Keep the existing footer background */
    font-family: 'Josefin Sans', sans-serif;
    font-size: 6px;
    color: #333;
}

.footer-paragraph {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 6px; /* Match the font size of the other paragraph */
    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 {
    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 */
    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 */
}

.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;
}

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

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

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

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

    .image-container {
        max-with: 90%;
    }

    .slideshow {
        max-width: 90%;
        max-height: auto;
    }

}