/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/*

  
   ▄████████  ▄█   ▄█         ▄▄▄▄███▄▄▄▄     ▄▄▄▄███▄▄▄▄      ▄████████    ▄█   ▄█▄  ▄█  ███▄▄▄▄      ▄██████▄  
  ███    ███ ███  ███       ▄██▀▀▀███▀▀▀██▄ ▄██▀▀▀███▀▀▀██▄   ███    ███   ███ ▄███▀ ███  ███▀▀▀██▄   ███    ███ 
  ███    █▀  ███▌ ███       ███   ███   ███ ███   ███   ███   ███    ███   ███▐██▀   ███▌ ███   ███   ███    █▀  
 ▄███▄▄▄     ███▌ ███       ███   ███   ███ ███   ███   ███   ███    ███  ▄█████▀    ███▌ ███   ███  ▄███        
▀▀███▀▀▀     ███▌ ███       ███   ███   ███ ███   ███   ███ ▀███████████ ▀▀█████▄    ███▌ ███   ███ ▀▀███ ████▄  
  ███        ███  ███       ███   ███   ███ ███   ███   ███   ███    ███   ███▐██▄   ███  ███   ███   ███    ███ 
  ███        ███  ███▌    ▄ ███   ███   ███ ███   ███   ███   ███    ███   ███ ▀███▄ ███  ███   ███   ███    ███ 
  ███        █▀   █████▄▄██  ▀█   ███   █▀   ▀█   ███   █▀    ███    █▀    ███   ▀█▀ █▀    ▀█   █▀    ████████▀  
                  ▀                                                        ▀                                     


*/


/* General Styles */
body {
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    background-color: #fff;
}

/* Wrapper */
.wrapper {
    display: flex;
}

/* Film description */

.film-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.film-thumbnail {
    width: 150px;
    height: auto;
    border-radius: 10px;
    margin-right: 20px;
}

.film-info h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.film-details {
    font-style: italic;
    margin: 5px 0;
}

.film-blurb {
    margin-top: 10px;
    color: #555;
}






/* slideshow code that doesn't break with the masonry script */

.slideshow-container {
    position: relative;
    z-index: 1; /* Lower than arrows, but above other content */
    break-inside: avoid;
    width: 100%;
}

.slide-container {
    display: inline-block; /* Treat each container as a single inline block */
    width: 100%;
    min-height: 300px; /* Adjust as needed based on typical slide height */
    margin-bottom: 16px; /* Space between slides */
    overflow: hidden; /* Keep content inside container */
}


figcaption {
    text-align: center;
    padding-top: 8px;
    font-size: 14px;
    color: #333;
    width: 100%;
    box-sizing: border-box;
}

.slide img {
    display: block;
    width: 100%;
    height: auto;
}


.slide {
    display: block;  /* Ensures each slide takes full width in container */
    position: relative;
    margin-bottom: 16px; /* Space between each slide */
    width: 100%;
    break-inside: avoid; /* Ensures slide and caption stay together in Masonry */
}


.active-slide {
    display: block; /* Show the active slide */
}

button.prev,
button.next {
    position: absolute;
	z-index: 1000; /* Higher than the container and other overlapping elements */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 24px;
    border-radius: 5px;
}

button.prev {
    left: 10px; /* Position left arrow */
}

button.next {
    right: 10px; /* Position right arrow */
}







/* Sticky Header */


.sticky-header {
    position: sticky;
    top: 0;
    border-radius: 0 0 15px 15px; /* Top-left, top-right, bottom-right, bottom-left */
    background-color: #ffa07a; /* Header background color */
    color: #fff; /* Header text color */
    padding: 0 5px; /* Horizontal padding for width */
    z-index: 1000; /* Keeps it on top of other content */
    width: 100%;
    box-sizing: border-box; /* Include padding in the width calculation */
    display: flex; /* Align children horizontally */
    align-items: center; /* Center the content vertically */
}


.sticky-header h1 {
    margin: 0;
    padding: 0; /* Remove margin and padding from h1 to avoid extra space */
}




/* Motion Gallery Styles */
.motion-gallery {
    display: flex;
    flex-direction: column; /* One column layout */
    gap: 20px; /* Space between videos */
}

.motion-gallery figure {
    margin: 0;
    padding: 0;
    width: 100%; /* Ensures the figure fills its container */
}

.motion-gallery video {
    width: 100%; /* Make sure the video fills its container */
    height: auto;
}






/* DESKTOP View */

@media (min-width: 768px) {
	
    .top-menu {
        justify-content: flex-start; /* Align items to the left */
    }
    
    
/* In DESKTOP View we don't want to see the MOBILE menu */ 

	.menu-mobile {
    display: none;
}
	
    
    
    .logo-and-menu {
        display: flex;
        align-items: center;
        gap: 40px; /* Adjust to control spacing between the logo and menu items */
    }

/* Menu Styles */
.menu-desktop {
    width: 20%;
    min-width: 185px;
    background-color: #e0d5ad;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 15px 15px;
    
    /* Sticky properties */
    position: sticky;
    top: 0;
    align-self: flex-start; /* Ensures it doesn't stretch */
}



.menu-desktop .logo img {
    width: 80%; /* Make the image 100% of its container */
    height: auto; /* Maintain aspect ratio */
    display: flex;
    justify-content: center; /* Center the image if necessary */
    padding: 20px 20px 20px 20px; /* Add padding for a larger clickable area */
}


.menu-desktop ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-desktop ul li {
    margin-bottom: 15px;
}

.menu-desktop ul li a {
    text-decoration: none;
    color: #000; /* Black text color */
    text-transform: uppercase; /* All caps */
    font-size: 16px;
    display: block; /* Ensure full-width clickable area */
    padding: 10px 10px 10px 20px; /* Add padding for a larger clickable area */
}


.menu-desktop ul li a:hover {
    background-color: #f0e68c; /* Change to your desired hover background color */
    color: #000; /* Optional: Change text color on hover */
    border-radius: 10px; /* Adjust the value to control the roundness */
    
}

.menu-desktop ul li a.active {
    background-color: #f0e68c; /* Active background color */
    color: #000; /* Text color */
    border-radius: 10px; /* Rounded corners */
}



/* Logo and Menu Container */



}



/* GENERAL Content Styles */

.content {
    width: 100%;
    flex-grow: 1; /* This allows the content to take up the remaining space */
    padding: 20px;
    box-sizing: border-box;    box-sizing: border-box;
}



/* Specific Styles for Portraits Content */
.portraits-content {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Gallery Styles */
.gallery {
    column-count: 2; /* Two columns */
    column-gap: 20px; /* Space between the columns */
}

.gallery figure {
    display: inline-block;
    margin: 0 0 20px;
    padding: 0;
    width: 100%; /* Ensures the figure fills its container */
}

.gallery img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

.gallery figcaption {
    font-family: 'Lora', serif;
    font-size: 16px;
    color: #333;
    margin-top: 0px;
    padding: 5px 0;
    text-align: left;
}

.italic-caption {
    font-style: italic;
}






/* Responsive Styles */




/* Mobile View */
@media (max-width: 768px) {
	
	
/* In MOBILE View we don't want to see the DESKTOP menu */ 
	.menu-desktop {
    display: none;
}
	
	
    .container {
        flex-direction: column;
    }
    
    
    
    .content {
        margin-top: 90px; /* Add top margin only for mobile */
    }




.hamburger:hover {
    background-color: #333; /* Optional: Darker shade on hover */
}



.menu-mobile .logo img {
    width: 30%; /* Make the image 100% of its container */
    height: auto; /* Maintain aspect ratio */
    display: flex;
    justify-content: center; /* Center the image if necessary */
    padding: 20px 20px 20px 20px; /* Add padding for a larger clickable area */
    
}

.menu-mobile {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    padding: 10px; /* Padding for the menu */
    background-color: #e0d5ad; /* Background color */
    position: fixed; /* Ensure relative positioning for absolute elements */
        top: 0; /* Align at the top of the viewport */
    left: 0; /* Align to the left */
    width: 100%; /* Full width of the viewport */
    z-index: 1000; /* Ensure it's above other content */
}

.logo {
    flex: 1; /* Allow the logo to take available space */
}

.hamburger {
    color: white; /* White text color */
    background-color: black; /* Black background */
    padding: 10px; /* Padding around the hamburger icon */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

.mobile-menu-container {
    display: none; /* Hidden by default */
    background-color: #e0d5ad; /* Background color */
    position: absolute; /* Position relative to the menu */
    top: 100%; /* Position just below the menu */
    left: 0; /* Align to the left */
    width: 100%; /* Full width of the viewport */
    z-index: 1000; /* Ensure it appears above other content */
    padding: 0px 20px 20px 30px; /* Add padding for a larger clickable area */
}



    .sticky-header {
        top: 105px; /* Position 110px from the top for mobile view */
    }



.menu-mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.menu-mobile ul li {
    margin: 10px 0; /* Space between items */
    width: 100%;
    text-align: center; /* Center items */
}

.menu-mobile ul li a {
    display: block;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    text-align: left; /* Align text to the left */
}


.menu-mobile ul li a:hover {
    background-color: #f0e68c; /* Change to your desired hover background color */
    color: #000; /* Optional: Change text color on hover */
    border-radius: 10px; /* Adjust the value to control the roundness */
    
}



* {
    box-sizing: border-box;
}







    .menu-mobile nav ul {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
        margin: 0;
    }

    .menu-mobile nav ul li {
        margin-right: 10px;
    }

    .content, .portraits-content {
        width: 100%;
    }

    .gallery {
        column-count: 1; /* Single column for mobile */
        column-gap: 0; /* Remove gap for single column */
    }


	

}