/* Responsive Styles */

/* Tablet Styles */
@media screen and (max-width: 900px) {
    #site-header {
        padding: 15px 20px;
    }
    
    .logo {
        font-size: 20px;
    }

    .logo img {
        height: 55px; /* Adjust as needed */
        width: auto;
      }
    
    nav ul {
        gap: 20px;
    }
    
    main {
        padding: 0 20px;
    }
    
    .photo-grid {
        gap: 15px;
    }
    
    .row {
        flex-direction: column;
        gap: 15px;
    }

    .photo {
        height: auto; /* Let height be determined by the image */
    }
}

@media screen and (max-width: 745px) {
    .right-section {
        display: none;
    }
}


/* Mobile Styles */
@media screen and (max-width: 640px) {
    #site-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 15px;
    }

    .left-section {
        flex-direction: column;
        width: 100%;
    }

    .logo {
        font-size: 18px;
    }
    
    nav ul {
        gap: 15px;
    }
    
    nav li {
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 0px;
    }
    
    main {
        margin-top: 60px;
        padding: 0 15px;
    }
    
    .photo-grid {
        gap: 12px;
        margin-top: 5px;
    }
    
    /* For mobile, we'll stack the photos within each row */
    .row {
        flex-direction: column;
        gap: 12px;
    }
    
    .photo {
        height: auto; /* Let height be determined by the image */
    }
}

/* Hide modal navigation arrows on mobile */
@media screen and (max-width: 640px) {
    .modal-nav.left,
    .modal-nav.right {
        display: none;
    }
    
    /* Optional: make modal content larger on mobile without arrows */
    .modal-content {
        max-width: 95%;
        max-height: 95%;
    }
    
    /* Adjust close button for mobile */
    .close-modal {
        top: 10px;
        right: 15px;
        font-size: 35px;
    }
    
    /* Adjust fullscreen button for mobile */
    .fullscreen-btn {
        top: 55px;
        right: 17px;
    }
}

/* Prevent image selection and dragging in modal */
.modal-content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
    -webkit-touch-callout: none; /* Disable iOS callout */
}

/* Prevent right-click context menu on modal images */
#image-modal img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}