/* Layout fixes for gallery pages with sidebar navigation */
/* These rules apply to ALL screen sizes (desktop, laptop, tablet) */
/* Body already has margin-left: 200px from navigation.css for the sidebar */

/* Override old absolute positioning from css/slideshow.css */
#wrapper {
    position: relative !important;
    width: auto !important;
    max-width: calc(100% - 120px) !important;
    margin-left: 60px !important;
    margin-right: 60px !important;
    margin-top: 20px !important;
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box !important;
}

#content {
    position: relative !important;
    width: auto !important;
    max-width: 800px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    padding: 20px;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box;
    text-align: left;
    background: none !important;
}

#content a,
#content h2,
#content h4 {
    text-align: left !important;
}

#content h2 {
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
}

#wrapper h2 {
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
}

#page {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 30px !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box;
}

#gallery {
    position: relative !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box;
}

/* Contact and other table-based pages */
body > table {
    margin-left: 60px !important;
    margin-right: 60px !important;
}

#form {
    margin-left: 0 !important;
}

/* Large laptops and desktops - handles zoom levels 100%-150% */
@media screen and (max-width: 1400px) {
    #wrapper {
        max-width: calc(100vw - 250px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    #page {
        max-width: calc(100vw - 240px);
        padding: 0 20px;
    }
}

/* Medium laptops - handles higher zoom levels or smaller screens */
@media screen and (max-width: 1200px) {
    #wrapper {
        max-width: calc(100vw - 240px) !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    #page {
        max-width: calc(100vw - 230px);
        padding: 0 15px;
    }

    #content {
        padding: 15px;
    }
}

/* Tablets and smaller laptops with zoom */
@media screen and (max-width: 1024px) {
    body {
        margin-left: 200px !important;
    }

    #wrapper {
        max-width: calc(100vw - 230px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    #page {
        max-width: calc(100vw - 220px);
        padding: 0 10px;
    }

    #content {
        padding: 15px;
    }
}

@media screen and (max-width: 768px) {
    body {
        margin-left: 0 !important;
        padding-top: 60px !important;
    }

    .sidebar-nav {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding: 15px 0 !important;
    }

    .submenu-flyout {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        border: none;
        padding: 0 !important;
        background-color: #f5f5f5;
    }

    .page-header {
        left: 0 !important;
        padding: 10px 15px !important;
    }

    #wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 15px;
        box-sizing: border-box;
    }

    #content {
        padding: 15px;
    }

    #content br {
        display: none;
    }

    #page {
        padding: 0 10px;
    }

    #gallery {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Very small mobile devices */
@media screen and (max-width: 480px) {
    #wrapper {
        padding: 0 10px;
    }

    #content {
        padding: 10px;
        font-size: 14px;
    }

    #content h2 {
        font-size: 18px;
    }

    #content h4 {
        font-size: 14px;
    }
}