/* Mobile Menu and Heading Fixes for FreshLook Theme */

/* Fix content centering for medium mobile screens */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #white_content,
    #wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 460px !important;
    }
}

/* Fix mobile menu positioning to prevent header overlap */
@media only screen and (max-width: 767px) {
    /* Adjust mobile menu dropdown position */
    .dropdown-menu {
        position: relative;
        top: 0 !important; /* Remove negative top positioning */
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    /* Ensure proper spacing between logo and menu */
    nav#menu #select-menu {
        position: relative;
        width: 100%;
        float: left;
        top: 0; /* Remove the 25px top position */
        margin-top: 20px;
        clear: both;
    }
    
    /* Adjust logo positioning on mobile */
    .logo_and_menu .logo {
        margin-bottom: 10px;
        top: 0 !important;
    }
    
}

/* Fix heading text wrapping and overflow issues */
h1, h2, h3, h4, h5, h6,
.pageTitle h1,
.pageTitle h3,
h2.page_title,
.page_info_title_s2,
.page_info_title_s3 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    -ms-hyphens: auto !important;
    max-width: 100% !important;
}

/* Specific fixes for mobile heading sizes */
@media only screen and (max-width: 767px) {
    h1 {
        font-size: 24px !important;
        line-height: 1.3em !important;
    }
    
    h2, h2.page_title {
        font-size: 22px !important;
        line-height: 1.3em !important;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.3em !important;
    }
    
    /* Ensure headings don't get cut off */
    .pageTitle,
    .page_title,
    .entry-title {
        width: 100%;
        overflow: visible !important;
    }
    
}

/* Fix for extremely small screens */
@media only screen and (max-width: 479px) {
    /* Ensure proper centering on small screens */
    #white_content,
    #wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 320px !important;
    }
    /* Further reduce font sizes for very small screens */
    h1 {
        font-size: 20px !important;
    }
    
    h2, h2.page_title {
        font-size: 18px !important;
    }
    
    h3 {
        font-size: 16px !important;
    }
    
    /* Additional padding for small screens */
    #header {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 320px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix for specific long words like "Construction" */
    .page_info_title_s2,
    .page_info_title_s3,
    .page_title {
        font-size: 16px !important;
        letter-spacing: -0.5px;
    }
}

/* Ensure proper z-index stacking */
.header_container {
    z-index: 99999 !important;
}

#header {
    z-index: 9999 !important;
}

nav#menu #select-menu {
    z-index: 1000 !important;
}

/* Fix for menu visibility */
@media only screen and (max-width: 960px) {
    nav#menu {
        overflow: visible !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Ensure header has proper min-height */
    #header {
        min-height: auto !important;
    }
    
    /* Fix logo and menu container */
    .logo_and_menu {
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure footer is centered */
    #footer_content,
    #big_footer {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}