/* Shared body styles */



.pop {
    position: relative;
    display: inline-block;
    padding:0px 2px;
  }

  .pop::before {
    content: "";
    position: absolute;
    
    top: 1px; /* Shift the background down */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00ffc5; /* Highlight color */
    z-index: -1; /* Ensures it appears behind the text */
    border-radius: 3px; /* Optional: rounded edges */
  }


:root {
    --baseline-grid: 8px;
}

html {
    font-size: 16px; /* 100% = 16px */
}

p, h1, h2, h3, li {
    vertical-align: baseline;
}




body {
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: #252525;
    display: flex;
    align-items: center;
}


.hidden {
    display: none;
}

#contact-panel {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 66px 75px 66px 75px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    margin-bottom: 75px;
    justify-content: left;
    align-items: left;
    background-image: url('../assets/bg-contact.jpg');
    background-repeat: no-repeat;
    background-size: 400px;
    border-left: 10px solid #00ffc5;
    

    
}






.bluesky-embed {
    margin-top: 40px;
}

/* Main page specific body styles  */
body.main-layout {
    overflow: auto;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
}

body.menu-layout {
    background-color: transparent;
    height: 90px;
    text-align: right;
}


/* Pair page specific body styles */
body.pair-layout {
    flex-direction: column;

}

a {
    color: black;          /* Default link color */
    text-decoration: underline; /* Underlined by default */
    transition: color 0.3s ease; /* Smooth transition effect */
}

a:hover {
    color: rgb(60, 60, 60);           /* Change color to grey on hover */
    text-decoration: underline; /* Keeps underline on hover */
}

a:visited {
    color: rgb(60, 60, 60);             /* Color for visited links */
    text-decoration: underline;  /* Keeps underline for visited links */
}

.info-container a {
    color: white; 
}

.info-container a:hover {
    color: white; 
}

.info-container a:visited {
    color: white; 
}



/* Content Frame */
.main-content-frame {
    position: relative;
    z-index: 10;
    width: 410px;
    min-height: calc(100vh - 200px);
    overflow-y: auto;
    background-color: white;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    padding: 40px;
    margin-top: 30px;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
}

.bannertop {
    margin: -40px -40px 0px -40px;
}

.bannertop-img {
    width: 490px;
    height: 134px;
}

/* Logo Styling */
.main-logo {
    text-align: left;
    margin-top: 30px;
}

.main-logo img {
    max-width: 150px;
    text-align: left;
    margin-bottom: 0px;
}

/* Intro Paragraph */
.main-layout p {
    text-align: left;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 30px;
}

.thumbnail-pairs p {
    text-align: center;

}

/* Subtitle Section */
.pairs-section {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10  0px;
}

.pairs-section h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    margin-top: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #5e5454;
}




.pairs-section hr {
    width: 80%;
    height: 1px;
    background-color: #ccc;
    border: none;
    margin: auto;
}

.info-container hr {
    width: 100%;
    margin: 35px 0px 36px 0px;
    

}

/* Thumbnail Pairs Section */
.thumbnail-pairs {
    margin-top: 50px;
    padding: 0 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    width: 80%;
}

.pair {
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pair:hover {
    opacity: 0.8;
}

.pair:hover img {
    filter: brightness(0.9);
}

.image:hover {
    opacity: 0.9;
    cursor: hand;
}

.image:hover {
    filter: brightness(0.9);
    cursor: hand;
}

.pair img {
    width: 50px;
    height: auto;
    margin: 0 2px;
    border: 1px solid #ededed;
}

.pair p {
    margin-top: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

/* Featured Photo */
.featured-photo {
    margin: 20px 0;
}

.featured-photo img {
    max-width: 80%;
    border: 5px solid white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Frame for Two Photos */
.logo-menu {
    width: 95px; /* Set the width of the logo */
    height: 40px; /* Set the height of the logo */
    object-fit: contain; /* Maintain aspect ratio if dimensions don't match */
    margin-top: 5px;
}

.logo-index {
    width: 189px; /* Set the width of the logo */
    height: 80px; /* Set the height of the logo */
    object-fit: contain; /* Maintain aspect ratio if dimensions don't match */
    margin-top: 5px;
    margin-left: -7px;
}


.horizontal-menu {
    text-align: right; /* Ensure text aligns to the right */

}

.horizontal-menu ul {
    list-style: none;        /* Remove bullet points */
    padding: 0;             /* Remove default padding */
    margin: 5px 0px 0px 0px;              /* Remove default margin */
    display: flex;          /* Use flexbox for horizontal layout */
    justify-content: flex-end; /* Center the menu items */
    letter-spacing: 1px;
}

.horizontal-menu li {
    margin: 0 0px 0px 10px;         /* Space between menu items */
    color: #e9e3df;

}

.horizontal-menu a {
    color: #e9e3df;           /* Text color */
    text-decoration: none;  /* Remove underline */

}

.horizontal-menu a:hover {
    text-decoration: underline; /* Underline on hover */
}


.frame {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white; /* Restored white background */
    padding: 66px 44px 66px 44px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 32px;
}

.frame-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white; /* Restored white background */
    padding: 66px 44px 66px 44px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 32px;
}

.image {
    width: calc(432px * 9 / 16);
    height: 432px;
    margin: 0 22px;
    background-size: cover;
    background-position: center;
    cursor: hand;
}

/* Fullscreen Overlay */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

.fullscreen-overlay.show {
    visibility: visible;
    opacity: 1;
}

.fullscreen-photo {
    background-color: white; /* White border around photo */
    padding: 40px;
    max-width: 80%; /* Scale within viewport width */
    max-height: 80%; /* Scale within viewport height */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

.fullscreen-photo img {
    width: 100%;
    height: auto;
}

/* Soft Light Background - lower z-index */
.light-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 200, 200, 0.3), rgba(0, 0, 0, 0) 70%),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0) 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 80%);
    mix-blend-mode: screen;
    z-index: -2;
}

.light-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/noise.png');
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
}



/* Ensure main content stays above background */
main {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 0 auto;
}

/* Ensure fullscreen overlay stays on top */
.fullscreen-overlay {
    z-index: 1000;
}




.pair-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight:  200;
    margin-top: 64px;
    margin-bottom: calc(var(--baseline-grid) * 2);
    margin-block-start: 2em;
    margin-block-end: 0em;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    
}

.enlarge-mobile {
    text-align: center;
    font-size: 0.9rem;
    color: white;
    margin-block-start: 2em;
    margin-block-end: 0em;
    margin-top: -16px;
    margin-bottom: calc(var(--baseline-grid) * 2);
    margin-block-start: 0.5em;
    margin-block-end: 0em;
    letter-spacing: 1.3px;

}


.fine-art-link {
    color: rgb(211, 211, 211);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.fine-art-link:hover {
    opacity: 0.8;
}

.menu-container {
    width: calc(432px + 88px);
    
    margin: 15px auto; /* Center the container */
    box-sizing: border-box;
    color: #e9e3df;
    text-align: right; /* Align text to the right */
    background: transparent; /* No background color */
    display: flex; /* Enable flexbox layout */
    justify-content: space-between; /* Space between logo and navigation */
    align-items: center; /* Vertically align items */

}

.info-container {
    width: calc(432px + 88px);
    margin: 32px auto;  /* Center the container */
    box-sizing: border-box;
    text-align: left;  /* Left align text */
    color: rgb(255, 255, 255);  /* Changed to red */
    line-height: 1.5;
}

.info-container h2 {
    font-size: 1rem;
    margin-top: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:white;
}

.info-container ul{
    margin-top: 16px;
    margin-bottom: 16px;
    padding-inline-start: 32px;
}

/* Mobile Devices */
@media screen and (max-width: 710px) {
    .frame {
        width: calc(100vw - 50px);  /* 25px margin on each side */
        padding: 32px 25px;  /* Reduced padding */
        box-sizing: border-box;
        margin: 27px auto;  /* Added top and bottom margin */
        display: flex;
        flex-direction: row;
        justify-content: right;
        gap: 20px;  /* Reduced gap between images */
    }

    .image {
        width: calc((100vw - 90px) / 2);  /* Account for padding and gap */
        height: calc(((100vw - 90px) / 2) * 16 / 9);  /* Maintain 9:16 ratio */
        margin: 0;  /* Remove default margins */
    }

    .bannertop-img {
        width: calc(100vw - 60px);
        height: calc((100vw - 60px) * 223 / 820);
    }



    /* Adjust fullscreen overlay for mobile */
    .fullscreen-photo {
        width: calc(100vw - 40px);  /* 20px margin on each side */
        padding: 20px;
    }

    .main-content-frame {
        width: calc(100vw - 80px);
        max-width: 100%;
        padding: 40px 20px;
        margin: 0px 10px 0px 10px;
        box-sizing: border-box;
    }

    .thumbnail-pairs {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 10px;
        
    }

    .pair img {
        width: 70px;
        height: auto;

    }
    .main-logo img {
        max-width: 150px;
        
    }

    .menu-container {
        width: calc(100vw - 94px);  /* Match mobile width */
        margin: 0px auto;  /* Center the container */
    }

    .info-container {
        width: calc(100vw - 94px);  /* Match mobile width */
        margin: 0px auto;  /* Center the container */
    }

    .horizontal-menu a {

        font-size: 11px;
    }

    .horizontal-menu li {
        margin: 0 0px 0px 3px;         /* Space between menu items */
    
    }

    #contact-panel {
    
        padding: 50px 40px 50px 40px;

    }



}