/* Fix for disappearing hero/header on mobile pages: nosotros, servicios, contacto */

@media (max-width: 900px) {
    /* Wrapper containers fix */
    #ppu4154, #ppu5245, #ppu8771,
    div[data-orig-id="ppu4154"],
    div[data-orig-id="ppu5245"],
    div[data-orig-id="ppu8771"] {
        width: 100% !important;
        margin-left: 0 !important;
        left: 0 !important;
        display: block !important;
        position: relative !important;
        height: auto !important;
    }

    /* Restore visibility of the main hero containers that were hidden in custom-mobile-menu.css */
    #pu4154, #pu5245, #pu8771,
    div[data-orig-id="pu4154"],
    div[data-orig-id="pu5245"],
    div[data-orig-id="pu8771"] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 200px !important;
        height: auto !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 60px 0 40px 0 !important; /* Extra top padding for mobile navbar */
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center !important;
        z-index: 5 !important;
    }

    /* Restore background images specifically for each page if they are not already showing */
    /* Nosotros */
    #pu4154, div[data-orig-id="pu4154"] {
        background-image: url("../images/nosotros-header-laboratorio-aguas.jpg?crc=102457803") !important;
    }
    /* Servicios */
    #pu5245, div[data-orig-id="pu5245"] {
        background-image: url("../images/servicios-header-laboratorio-aguas.jpg?crc=102457803") !important;
    }
    /* Contacto */
    #pu8771, div[data-orig-id="pu8771"] {
        background-image: url("../images/contacto-header-laboratorio-aguas.jpg?crc=3836795670") !important;
    }

    /* Add a dark overlay to ensure text is readable against backgrounds */
    #pu4154::before, #pu5245::before, #pu8771::before,
    div[data-orig-id="pu4154"]::before,
    div[data-orig-id="pu5245"]::before,
    div[data-orig-id="pu8771"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }

    /* Styling for the text containers inside the heroes */
    #u95229, #u95240, #u39545,
    div[data-orig-id="u95229"],
    div[data-orig-id="u95240"],
    div[data-orig-id="u39545"] {
        position: relative !important;
        z-index: 10 !important;
        width: 90% !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        text-align: center !important;
        display: block !important;
    }

    /* Individual text frames (Title/Subtitle) */
    #u4160-4, #u4202-4, #u5256-4, #u5257-4, #u8774-4, #u8773-4,
    div[data-orig-id="u4160-4"],
    div[data-orig-id="u4202-4"],
    div[data-orig-id="u5256-4"],
    div[data-orig-id="u5257-4"],
    div[data-orig-id="u8774-4"],
    div[data-orig-id="u8773-4"] {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        left: auto !important;
        margin: 10px 0 !important;
        color: #FFFFFF !important;
        text-align: center !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Text shadow for better readability */
    #u4160-4 p, #u4202-4 p, #u5256-4 p, #u5257-4 p, #u8774-4 p, #u8773-4 p,
    div[data-orig-id="u4160-4"] p,
    div[data-orig-id="u4202-4"] p,
    div[data-orig-id="u5256-4"] p,
    div[data-orig-id="u5257-4"] p,
    div[data-orig-id="u8774-4"] p,
    div[data-orig-id="u8773-4"] p {
        color: #FFFFFF !important;
        text-shadow: 1px 1px 4px rgba(0,0,0,0.9) !important;
    }

    /* Ensure specific titles are large enough */
    #u4160-4 p, #u5256-4 p, #u8774-4 p,
    div[data-orig-id="u4160-4"] p,
    div[data-orig-id="u5256-4"] p,
    div[data-orig-id="u8774-4"] p {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* Hide the problematic Muse BW elements that might cause horizontal scroll or layout shifts */
    #u4154-bw, #u4166-bw, #u5245-bw, #u5246-bw, #u8771-bw, #u8772-bw,
    div[data-orig-id="u4154-bw"],
    div[data-orig-id="u4166-bw"],
    div[data-orig-id="u5245-bw"],
    div[data-orig-id="u5246-bw"],
    div[data-orig-id="u8771-bw"],
    div[data-orig-id="u8772-bw"] {
        display: none !important;
    }
}

/* Global overflow-x prevention for mobile */
@media (max-width: 700px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }
    #page {
        overflow-x: hidden !important;
        width: 100% !important;
    }
}