/* General Styles */
body {
    margin: 0;
    font-family: 'Cutive Mono', monospace;
    text-transform: lowercase;
    overflow: hidden; /* No scrolling */
    /* Fade logic below overrides these */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    background: none;
    z-index: 1000; /* Ensure it's above the background but below the overlay menu */
}

/* Home link in the top left */
.home-link {
    font-family: 'Cutive Mono', monospace;
    font-size: 15px;
    text-decoration: none;
    color: white;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    margin-right: auto;
    margin-top: 0px;
}

/* Navigation links in the top right */
nav.top-links a, .home-link {
    position: relative;
    text-decoration: none;
    color: white;
    font-family: 'Cutive Mono', monospace;
    font-size: 15px; /* fixed "15x" typo */
    margin-left: 15px;
    transition: color 0.3s ease;
}

/* Underline hover effect (if used) */
nav.top-links a::after, .home-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    transition: width 0.3s ease;
}

/* Contact Page overrides the home link color */
body.contact .home-link {
    color: black;
}

/* Another block for .home-link, ensuring 16px font */
.home-link {
    font-size: 16px;
    margin-right: auto;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
body.contact .home-link {
    color: black; /* specifically on contact page */
}

/* Nav links (top-right) styling */
nav.top-links a {
    text-decoration: none;
    color: white;
    font-family: 'Cutive Mono', monospace;
    font-size: 16px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Repeated block: unify it */
header nav.top-links {
    display: flex;
    gap: 20px;
}

/* FOOTER */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #dedede;
    font-size: 11px;
    padding: 5px;
    background-color: transparent;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
/* =================================
   ABOUT PAGE (Revised for Responsive Behavior)
   ================================= */

/* Background: always cover and stay centered */
body.about .background {
    background-size: cover;
    background-position: center center;
    min-height: 100vh; /* Use min-height to allow expansion if needed */
}

/* About content: center everything vertically and horizontally */
body.about .about-content {
    display: flex;
    flex-direction: column;
    align-items: center;      /* Center horizontally by default */
    justify-content: center;  /* Center vertically */
    min-height: 100vh;        /* Full viewport height */
    padding: 20px;
    box-sizing: border-box;
}

/* Wrapper for text and images: responsive width */
body.about .about-wrapper {
    text-align: center;
    max-width: 90%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Image styling: scale with its container */
body.about .about-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 0;
}

/* Caption styling: base font-size for larger screens */
body.about .about-caption {
    color: white;
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
}

/* =================================
   Responsive Adjustments for Small Screens (Up to 600px, approx 37.5em)
   ================================= */
@media (max-width: 37.5em) {
    body.about .about-content {
        padding: 10px; /* Reduce padding on small screens */
    }
    
    body.about .about-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }
    
    body.about .about-caption {
        font-size: 0.875rem; /* Slightly smaller font on small screens */
    }
}

/* =================================
   Responsive Adjustments for Landscape Orientation on Small Screens
   ================================= */
/* This media query further adjusts the layout in landscape mode, where the viewport is wider but the height is reduced */
@media (max-width: 37.5em) and (orientation: landscape) {
    body.about .about-wrapper {
        /* Ensure the wrapper uses full available width with minimal padding */
        max-width: 100%;
        padding: 0 10px;
    }
    
    body.about .about-caption {
        font-size: 0.75rem;         /* Reduce font-size further for landscape */
        overflow-wrap: break-word;  /* Ensure words wrap as needed */
        word-wrap: break-word;
    }
}

/* =================================
   PORTFOLIO PAGE
   ================================= */
/* The container for the slideshow */
body.portfolio .portfolio-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
/* .slideshow is the relative container for the images & arrows */
body.portfolio .slideshow {
    position: relative; /* anchor absolutely positioned arrows */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    height: 60vh;
}
body.portfolio .slideshow img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ====================
   ARROWS: 
   Position absolute inside .slideshow
   so they're always centered relative 
   to the slideshow (not the viewport).
   ===================== */
body.portfolio .slideshow .nav-left,
body.portfolio .slideshow .nav-right {
    position: absolute;        /* inside the slideshow */
    top: 50%;                  /* center vertically */
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10;               /* above the image */
    opacity: 1;
    transition: opacity 0.3s ease;
}

body.portfolio .slideshow .nav-left {
    left: 2px;  /* reduced from 20px */
}

body.portfolio .slideshow .nav-right {
    right: 2px; /* reduced from 20px */
}


/* Keep arrows visible when hovered */
body.portfolio .slideshow .nav-left:hover,
body.portfolio .slideshow .nav-right:hover {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Optionally hide arrows after inactivity */
body.portfolio .hide-arrows .nav-left,
body.portfolio .hide-arrows .nav-right {
    opacity: 0;
    pointer-events: none;
}
body.portfolio .slideshow .nav-left:focus,
body.portfolio .slideshow .nav-left:active,
body.portfolio .slideshow .nav-right:focus,
body.portfolio .slideshow .nav-right:active {
  outline: none;
  box-shadow: none;
}


/* ================================= 
   CONTACT PAGE (Large Screens)
   ================================= */

/* Allow vertical scrolling if needed */
body.contact {
    overflow-y: auto;
}

/* Background styling for the contact page – locked to the left */
body.contact .background {
    background-size: cover;
    background-position: left center;
    height: 100vh;
}

/* Contact content container: left-aligned and vertically centered */
body.contact .contact-content {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centers content vertically */
    align-items: flex-start;    /* Aligns content to the left */
    height: 100vh;            /* Full viewport height for vertical centering */
    padding-left: 50px;       /* 50px gap from the left edge */
    margin: 0;
}


/* =================================
   CONTACT PAGE (Small Screens - Max Width: 400px)
   ================================= */
   @media (max-width: 400px) {
    /* Keep the background anchored to the left */
    body.contact .background {
        background-position: left center !important;
    }
    
    /* For small screens, center the contact content horizontally 
       and force it to fill the full viewport height for vertical centering */
    body.contact .contact-content {
        display: flex;
        flex-direction: column;
        justify-content: center;  /* Centers content vertically */
        align-items: center;      /* Centers content horizontally */
        padding-left: 0 !important;  /* Remove left padding */
        margin: 0 auto;           /* Center the container horizontally */
        width: 100%;
        height: 100vh;            /* Force full viewport height for vertical centering */
    }
    
    /* Center and adjust the contact form */
    body.contact .contact-form {
        width: 60%;
        max-width: 300px;
        margin: 0 auto;
    }
}
/* =================================
   LANDING PAGE
   ================================= */
   body.home .background {
    /* Your existing background styles */
    width: 100vw;
    height: 100vh;
    background-size: auto 100vh;
    background-position: right bottom;
    background-repeat: no-repeat;
}

/* For wider screens where the image might not fill the width */
@media (min-aspect-ratio: 16/9) {
    body.home .background {
        background-size: 100vw auto;
        background-position: right bottom;
    }
}
.bold-link {
    font-weight: 700;
}

/* =================================
   BODY TRANSITIONS (Fade In/Out)
   ================================= */
body {
    transition: filter 0.5s ease, opacity 0.5s ease;
    opacity: 0; /* Start hidden */
    background-color: black; /* Start with black (change if you want no black screen) */
    transition: opacity 1.5s ease-in-out, background-color 1s ease-in-out;
}
body.transitioning {
    filter: blur(5px);
    opacity: 0.5;
}
body.loaded {
    opacity: 1;
    background-color: rgb(0, 0, 0); /* Keep fade from black? Change if needed. */
}
body.transitioning {
    opacity: 0;
    background-color: rgb(0, 0, 0);
}

/* =================================
   FOOTER BLACK BG ON SMALLER SCREENS
   ================================= */
@media (max-width: 1450px) {
    footer {
        background-color: black;
        color: white;
    }
}

/* =================================
   OVERLAY MENU (Hidden by default)
   ================================= */
.overlay-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0);
    z-index: 9999;
}
.overlay-menu.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.overlay-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.overlay-links a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    margin: 15px 0;
}
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
}
/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 10000;
}
.hamburger span {
    display: block;
    width: 20px;
    height: 1.8px;
    margin: 4px 0;
    background: white;
}
body.contact .hamburger span {
    background: black !important;
}

/* Show hamburger below 719px, hide normal nav */
@media (max-width: 719px) {
    .home-link,
    nav.top-links {
        display: none !important;
    }
    .hamburger {
        display: block !important;
        position: fixed;
        top: 20px;
        left: 20px;
    }
}
body.contact .contact-content a {
    color: black !important;
    text-decoration: none !important;
  }
  
  body.contact .contact-content a:visited {
    color: black !important;
  }
  /* Contact page text font size */
body.contact {
    font-size: 14px; /* Adjust as needed */
}

  /* Mobile Portrait Styles */
@media (max-width: 37.5em) and (orientation: portrait) {
    /* Place your mobile portrait styles here */
  }
  
  /* Mobile Landscape Styles */
  @media (max-width: 37.5em) and (orientation: landscape) {
    /* You might want a slightly different layout for landscape,
       or simply ensure the same rules apply. */
  }
  /* Base rules for contact page (applies in both orientations) */
body.contact .contact-content {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* vertical centering */
    align-items: flex-start;    /* left-align */
    height: 100vh;
    padding-left: 42px;
    margin: 0;
}

/* Adjust for smaller screens using relative units */
@media (max-width: 37.5em) {
  body.contact .contact-content {
      /* For both portrait and landscape on mobile,
         you might remove fixed left padding to allow more room */
      padding-left: 0;
      align-items: center;  /* center horizontally on smaller screens */
      margin: 0 auto;
      width: 100%;
      height: 100vh;  /* or auto, if you want it to grow with content */
  }
}
/* =================================
   ABOUT PAGE (Revised for Smaller Screens)
   ================================= */

/* Base About page styles (for larger screens) */
body.about .background {
    background-size: cover;
    background-position: center center;
    height: 100vh;
}

body.about .about-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 20px;
}

body.about .about-wrapper {
    text-align: center;
    max-width: 300px;
    width: 100%;
}

body.about .about-image {
    max-width: 80%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 0;
}

body.about .about-caption {
    color: white;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
}

/* =================================
   Responsive Adjustments for Smaller Screens
   ================================= */
@media (max-width: 600px) {
    /* Adjust the background if needed; here we keep it centered */
    body.about .background {
        background-position: center center;
        /* Optionally, you can remove a fixed height if the content overflows */
        height: auto;
    }
    
    /* Allow the about-content container to grow with its content instead of being fixed at 100vh */
    body.about .about-content {
        display: flex;
        flex-direction: column;  /* Stack content vertically if needed */
        align-items: center;       /* Center content horizontally */
        justify-content: center;   /* Center vertically */
        padding: 10px;             /* Reduce padding for smaller screens */
        height: auto;              /* Let height adjust to content */
    }
    
    /* Make the about-wrapper scale with the screen width */
    body.about .about-wrapper {
        max-width: 90%;           /* Use a percentage so it scales with the device */
        width: 100%;
        padding: 0 10px;          /* Add some horizontal padding if needed */
    }
    
   
    /* Adjust the caption font size for readability on small screens */
    body.about .about-caption {
        font-size: 12px;          /* Slightly smaller font size */
    }
}
/* NEW LOGO STYLES: Desktop vs. Mobile */

/* By default, show the desktop logo and hide the mobile logo */
.logo-container {
    /* Optionally, add any container styling if needed */
}
.logo-desktop {
    display: inline-block;
    width: 150px;  /* adjust as needed */
    height: auto;
    /* You can retain positioning if desired: */
    margin-left: -25px;
    position: relative;
    top: 10px;
}
.logo-mobile {
    display: none;
}

/* For screens smaller than 719px, hide the desktop logo and show the mobile logo */
@media (max-width: 719px) {
    .logo-desktop {
        display: none;
    }
    .logo-mobile {
        display: block;
        margin: 0 auto; /* Center horizontally */
        /* Optionally, add vertical spacing (adjust as needed) */
        margin-top: 10px;
    }
    /* Ensure the home-link container is centered on mobile */
    .home-link {
        display: block;
        text-align: center;
    }
    /* Optionally, hide the "home" text on mobile */
    .home-text {
        display: none;
    }
}
/* ================================
   HAMBURGER MENU SMALL LOGO (Hidden by Default)
================================ */
.hamburger-logo {
    display: none; /* Hidden by default */
    position: fixed;
    top: 20px; /* Adjust for spacing */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001; /* Ensure it's above the menu */
}

.hamburger-logo img {
    width: 100px; /* Adjust the size */
    height: auto;
}

/* ================================
   SHOW LOGO ONLY WHEN MENU IS OPEN AND BELOW 719PX
================================ */
@media (max-width: 719px) {
    .overlay-menu.open + .hamburger-logo {
        display: block;
    }
}
/* Center logo for mobile devices */
@media (max-width: 719px) {
    /* Adjust header for mobile */
    header {
        position: relative;
        justify-content: center;
        padding: 10px 0;
    }
    
    /* Center the home-link that contains the logo */
    header .home-link {
        margin: 0 auto;
        position: relative;
        display: block !important;
        text-align: center;
        top: 16px /*Moves the element down by 20px*/ 
    }
    
    /* Style for the mobile logo */
    .logo-mobile {
        display: block;
        width: 130px; /* Adjust size as needed */
        height: auto;
        margin: 0 auto;
    }
    
    /* Style for the mobile logo */
    .logo-mobile {
        display: block;
        width: 130px; /* Adjust size as needed */
        height: auto;
        margin: 0 auto;
    }
    
    /* Hide desktop logo */
    .logo-desktop {
        display: none;
    }
    
    /* Ensure hamburger button stays in position */
    .hamburger {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
}
@media (max-width: 719px) {
    body.portfolio .portfolio-container {
      height: 85vh; /* Set the height to 85vh */
      /* Other styles for the container if needed */
    }
  }
  /* Target mobile devices in landscape orientation */
@media (max-height: 610px) and (max-width: 932px) and (orientation: landscape) {
    /* Create a side-by-side layout */
    body.about .about-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: 95%;
        gap: 20px;
        padding: 10px;
    }
    
    /* Adjust image size */
    body.about .about-image {
        max-width: 30%;
        margin-bottom: 20px;
    }
    
    /* Adjust text container */
    body.about .about-caption {
        max-width: 55%;
        font-size: 12px;
        text-align: left;
    }
}