/* ==========================================================================
   Responsive CSS for Lubriserv
   ========================================================================== */

/* Base responsive utilities */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Mobile menu toggle buttons - hidden by default on desktop */
.menu-toggle,
.menu-toggle-header {
    display: none !important;
    visibility: hidden;
}

/* Show menu toggle on mobile devices */
@media screen and (max-width: 768px),
       screen and (max-device-width: 768px),
       screen and (hover: none) and (pointer: coarse) {
    /* Hide the old toggle in menu.php */
    .menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }

    /* Show new toggle inside header */
    .menu-toggle-header {
        display: block !important;
        visibility: visible !important;
        background: #00394d;
        color: #fff;
        border: none;
        padding: 5px 8px;
        font-size: 16px;
        cursor: pointer;
        z-index: 10000;
        border-radius: 3px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .menu-toggle-header:hover,
    .menu-toggle-header:active,
    .menu-toggle-header:focus {
        background: #005a75;
        outline: none;
    }

    /* Ensure topo2 doesn't interfere with button positioning */
    div#topo2 {
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        float: none !important;
    }
}

/* ==========================================================================
   Tablet styles (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    div#pretopo,
    div#topo,
    div#bannerinclude,
    div#line,
    div#home,
    div#homeinicio,
    div#hometre,
    div#homelink,
    div#homelubri,
    div#homeequipa,
    div#homeequipa2,
    div#homeequipa2b,
    div#homeequipa2c,
    #roda {
        width: 100% !important;
        max-width: 100% !important;
    }

    div#topo {
        background-size: cover;
        height: auto;
        min-height: 85px;
        padding: 10px;
    }

    div#topo1{
        margin-bottom: 15px;
    }
    div#topo2,
    div#topo3 {
        width: auto;
        float: none;
    }

    div#topo1 {
        text-align: center;
    }

    div#topo1 img {
        max-width: 250px;
    }

    div#topo2 {
        width: 100%;
        text-align: center;
    }

    div#topo3 {
        display: none;
    }

    /* Banner */
    div#banner {
        height: auto;
    }

    div#bannerinclude {
        height: auto;
    }

    /* Content areas */
    div#esq,
    div#dir {
        width: 100% !important;
        float: none !important;
        padding: 15px !important;
    }

    div#esq2,
    div#dir2,
    div#esqco2,
    div#dirco2 {
        width: 100% !important;
        float: none !important;
    }

    div#dir2a,
    div#dir2b,
    div#dirl2a,
    div#dirl2b {
        width: 100% !important;
        float: none !important;
    }

    /* Equipment page */
    div#equipa1,
    div#equipa2,
    div#equipa3 {
        width: 100% !important;
        float: none !important;
        padding: 10px !important;
    }

    .equipa1,
    .equipa1_acecone,
    .equipa2 {
        width: 100% !important;
    }

    .equipa1 li,
    .equipa1_acecone li,
    .equipa2 li {
        width: 100% !important;
        float: none !important;
        text-align: center;
        margin-bottom: 20px;
    }

    /* Links page */
    .links {
        width: 100% !important;
    }

    .links li {
        width: 50% !important;
    }

    /* Lubrivalv page */
    div#esq3,
    div#dir3 {
        width: 100% !important;
        float: none !important;
        height: auto !important;
    }

    div#esq3c,
    div#esq3d,
    div#dir3a,
    div#dir3b {
        width: 100% !important;
        height: auto !important;
        background-size: contain !important;
        background-position: center !important;
    }

    /* Base container heights */
    div#base,
    div#baselubri {
        height: auto !important;
    }

    div#home,
    div#homeinicio,
    div#hometre,
    div#homelink,
    div#homelubri,
    div#homeequipa {
        height: auto !important;
    }
}

/* ==========================================================================
   Mobile styles (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Pre-topo - reduce on mobile */
    div#pretopo {
        height: 5px !important;
    }

    /* Header - compact layout with logo left, menu button right */
    div#topo {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 50px 8px 5px !important;
        background: url(../imgs/imgtop.png) center no-repeat !important;
        background-size: cover !important;
        height: auto !important;
        min-height: 60px !important;
        width: 100% !important;
    }

    div#topo1 {
        display: flex !important;
        align-items: center !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
    }

    div#topo1 img {
        max-width: none !important;
        width: 280px !important;
        height: auto !important;
    }

    /* Hide topo3 container */
    div#topo3 {
        display: none !important;
    }

    /* Mobile navigation - fixed overlay below header */
    ul.dropdown {
        display: none;
        flex-direction: column;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: #f5f5f5;
        list-style: none;
        position: fixed;
        top: 70px;
        left: 0;
        z-index: 9999;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }

    /* Banner - remove gap and center in blue background */
    div#banner {
        margin-top: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background: #00394d !important;
    }

    div#bannerinclude {
        margin: 0 auto !important;
        padding: 10px 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    div#fotos {
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        width: 95% !important;
        max-width: 100% !important;
    }

    div#fotos img {
        display: block !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    div#line {
        height: 10px !important;
        background: #00394d !important;
    }

    ul.dropdown.active {
        display: flex;
    }

    ul.dropdown > li {
        float: none;
        width: 100%;
        border-bottom: 1px solid #ddd;
        text-align: center;
    }

    ul.dropdown > li > a {
        padding: 15px;
        display: block;
        text-align: center;
        justify-content: center;
    }

    /* Submenu mobile */
    ul.dropdown ul,
    ul.dropdown ul.submenu {
        position: static !important;
        visibility: visible !important;
        display: none;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #e5e5e5 !important;
        border: none !important;
        border-radius: 0 !important;
    }

    ul.dropdown li:hover > ul,
    ul.dropdown li.active > ul {
        display: block;
    }

    ul.dropdown ul li {
        padding-left: 0;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }

    ul.dropdown ul li:last-child {
        border-bottom: none;
    }

    ul.dropdown ul li a {
        padding: 12px 15px;
        display: block;
        text-align: center;
        background: #e5e5e5;
    }

    ul.dropdown ul li a:hover {
        background: #d5d5d5;
    }

    /* Banner */
    div#banner {
        height: auto !important;
        padding: 0;
    }

    div#bannerinclude {
        height: auto !important;
        min-height: 200px;
    }

    div#line {
        height: 15px !important;
    }

    /* Content */
    div#homeinicio,
    div#home,
    div#hometre,
    div#homelink {
        padding: 15px;
    }

    div#esq,
    div#dir {
        height: auto !important;
    }

    /* Text adjustments */
    .texto,
    .textolu,
    .textot,
    .textot2 {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 10px !important;
    }

    .treinamento {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    /* Links page */
    .links li {
        width: 100% !important;
        text-align: center;
    }

    div#link2 {
        display: none;
    }

    /* Contact page */
    div#contato01 {
        width: 100% !important;
        padding: 15px !important;
    }

    .textocontato,
    .textocontato2 {
        width: 100% !important;
    }

    /* Footer */
    #rodape {
        width: 100% !important;
        padding: 20px 10px !important;
    }

    #roda {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .roda-item {
        width: 100% !important;
        min-width: auto !important;
        text-align: center !important;
        flex: none !important;
    }

    .roda-item a,
    .roda-item .lubri2 {
        display: block !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }

    .roda-item img {
        display: block;
        margin: 0 auto;
    }

    /* Equipment positioning fix */
    div#equipa3 div[style*="position: relative"] {
        width: 100% !important;
        position: static !important;
    }

    div#equipa3 img[style*="position:absolute"],
    div#equipa3 p[style*="position: absolute"],
    div#equipa3 img[style*="position: absolute"] {
        position: static !important;
        display: block;
        margin: 10px auto;
        width: auto;
        max-width: 100%;
    }

    /* Image maps - disable on mobile (not touch-friendly) */
    area {
        display: none;
    }

    /* Product images centering */
    .tprod {
        text-align: center !important;
        margin: 10px 0 !important;
    }
}

/* ==========================================================================
   Small mobile styles (max-width: 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
    div#topo1 img {
        max-width: 200px;
    }

    .texto,
    .textolu {
        font-size: 13px !important;
    }

    .treinamento {
        font-size: 16px !important;
    }

    ul.dropdown li a {
        font-size: 14px;
    }

    .lubri2 {
        font-size: 14px;
    }

    /* Footer spacing */
    #roda {
        gap: 15px;
    }
}

/* ==========================================================================
   Additional responsive fixes
   ========================================================================== */

/* Ensure all containers are fluid */
div#base,
div#baselubri {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix image maps areas to be more visible on touch */
map area {
    cursor: pointer;
}

/* Responsive tables if any */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Lubrivalv page specific fixes */
@media screen and (max-width: 768px) {
    /* Hide the two background-image sections and their text on mobile */
    div#esq3c,
    div#esq3d {
        display: none !important;
    }


    div#esq3a,
    div#esq3b,
    div#esq3ca,
    div#esq3cb,
    div#esq3da,
    div#esq3db {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
    }

    div#dir3,
    div#dir3b {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    div#dir3a {
        width: 100% !important;
        height: 0 !important;
        padding: 0 !important;
        padding-bottom: 50% !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        float: none !important;
    }

    /* Equipment page fixes */
    div#homeequipa,
    div#homeequipa2,
    div#homeequipa2b,
    div#homeequipa2c,
    div#equipa {
        width: 100% !important;
        height: auto !important;
    }

    div#equipa1,
    div#equipa1_acecone {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
    }

    /* Fix absolutely positioned elements in equipment page */
    div[style*="position: relative"],
    div[style*="position:relative"] {
        position: static !important;
        width: 100% !important;
    }

    img[style*="position: absolute"],
    img[style*="position:absolute"],
    p[style*="position: absolute"],
    p[style*="position:absolute"] {
        position: static !important;
        display: block !important;
        margin: 10px auto !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* Fix topicos list */
    .topicos {
        width: 100% !important;
    }

    .topicos li {
        width: 100% !important;
    }
}

/* Fix lubrix list on mobile */
@media screen and (max-width: 768px) {
    .lubrix {
        width: 100% !important;
        margin: 0 !important;
    }

    .lubrix li {
        text-align: center;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Better touch targets */
@media screen and (max-width: 768px) {
    .links li a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ul.dropdown > li > a {
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Footer responsive improvements */
@media screen and (max-width: 768px) {
    #rodape {
        background: #c4c4c4;
    }

    #roda {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .roda-item {
        border-bottom: 1px solid #b0b0b0;
        padding-bottom: 12px !important;
        margin-bottom: 0 !important;
    }

    .roda-item:last-child {
        border-bottom: none;
    }

    .lubri2,
    .roda-item a.lubri2 {
        font-size: 14px !important;
        color: #00394d !important;
        text-decoration: none !important;
        display: block !important;
        text-align: center !important;
    }

    .sublinhado {
        text-decoration: underline !important;
    }
}

/* ==========================================================================
   Product Pages Responsive (lubrisela, desovalv, acecone, equipamentos)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Product page containers */
    div#homeequipab {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
    }

    div#homeequipa2b,
    div#homeequipa2c {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 15px !important;
        background: none !important;
    }

    /* Product images - make them stack and center */
    div#homeequipa2b img,
    div#homeequipa2c img,
    div#homeequipab > img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 10px auto !important;
        float: none !important;
    }

    /* Fix floated images in product pages */
    img[style*="float:left"],
    img[style*="float: left"] {
        float: none !important;
        display: block !important;
        margin: 10px auto !important;
    }

    /* Product text blocks */
    .tprod,
    .tprod2,
    .tprod3 {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        height: auto !important;
    }

    /* Acecone page - product list items */
    .equipa1_acecone {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        height: auto !important;
    }

    .equipa1_acecone li {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        border-bottom: 1px solid #ddd;
    }

    .equipa1_acecone li:last-child {
        border-bottom: none;
    }

    .equipa1_acecone li div[align="center"],
    .equipa1_acecone li div {
        text-align: center !important;
    }

    .equipa1_acecone li img {
        max-width: 100% !important;
        height: auto !important;
        margin: 5px auto !important;
        display: block !important;
    }

    /* Absolute positioned buttons/links in product pages */
    a[style*="position: absolute"],
    a[style*="position:absolute"],
    div[style*="position: absolute"],
    div[style*="position:absolute"] {
        position: static !important;
        display: block !important;
        margin: 15px auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        text-align: center !important;
        width: auto !important;
    }

    /* esp.jpg image maps - remove gray box */
    img[src*="esp.jpg"] {
        position: static !important;
        display: block !important;
        margin: 15px auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        background: none !important;
        border: none !important;
    }

    /* Equipment page specific */
    div#equipa1_acecone {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
    }
}

/* ==========================================================================
   EQUIPAMENTOS PAGE - Complete fix
   ========================================================================== */
@media screen and (max-width: 768px) {
    div#homeequipa {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
    }

    div#homeequipa2 {
        width: 100% !important;
        height: auto !important;
        background: none !important;
    }

    div#equipa {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        clear: both !important;
    }

    div#equipa1,
    div#equipa2,
    div#equipa3 {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        padding: 15px !important;
        margin-bottom: 20px !important;
        display: block !important;
        clear: both !important;
    }

    /* Empty equipa3 divs - hide them */
    div#equipa3:empty {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
    }

    .equipa1,
    .equipa2 {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .equipa1 li,
    .equipa2 li {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    .equipa1 li img,
    .equipa2 li img {
        margin: 5px auto !important;
    }

    /* Fix the relative positioned container in equipamentos */
    div#equipa3 > div[style*="position: relative"],
    div#equipa3 > div[style*="position:relative"] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    div#equipa3 img[style*="position:absolute"],
    div#equipa3 img[style*="position: absolute"] {
        position: static !important;
        display: block !important;
        margin: 10px auto !important;
        left: auto !important;
        top: auto !important;
    }

    div#equipa3 p[style*="position: absolute"],
    div#equipa3 p[style*="position:absolute"] {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin: 10px 0 !important;
    }
}

/* ==========================================================================
   LUBRISELA & DESOVALV - Fix gray box and spacing
   ========================================================================== */
@media screen and (max-width: 768px) {
    div#homeequipa2b {
        background: none !important;
        height: auto !important;
        position: static !important;
    }

    div#homeequipa2b img,
    div#homeequipa2b p {
        position: static !important;
        display: block !important;
        margin: 10px auto !important;
        text-align: center !important;
    }

    /* Centralizar imagem 015e.jpg (com texto) */
    div#homeequipa2b img[src*="015e.jpg"] {
        max-width: 90% !important;
        margin: 15px auto !important;
    }

    /* Remove any wrapper backgrounds that create gray boxes */
    div#homeequipa2b div,
    div#homeequipa2b p {
        background: none !important;
    }
}

/* ==========================================================================
   TREINAMENTOS PAGE - Fix spacing
   ========================================================================== */
@media screen and (max-width: 768px) {
    div#hometre {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        padding-bottom: 50px !important;
    }

    div#hometre > img {
        display: block !important;
        margin: 0 auto 10px auto !important;
    }

    div#esq2 {
        height: auto !important;
        margin-bottom: 10px !important;
    }

    div#dir2 {
        height: auto !important;
        padding-bottom: 30px !important;
    }

    div#dir2a,
    div#dir2b {
        height: auto !important;
    }

    .treinamento {
        font-size: 16px !important;
        line-height: 1.3 !important;
        padding: 5px 10px !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   LINKS PAGE - Complete fix
   ========================================================================== */
@media screen and (max-width: 768px) {
    div#homelink {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
    }

    div#homelink > img {
        display: block !important;
        max-width: 100% !important;
        margin: 0 auto 15px auto !important;
    }

    div#dirl2 {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    div#dirl2a {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    div#dirl2b {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        display: none;
    }

    .links {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .links li {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        text-align: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #ddd;
    }

    .links li:last-child {
        border-bottom: none;
    }

    .links li a {
        font-size: 16px !important;
        display: block !important;
        padding: 10px !important;
    }

    div#link2 {
        display: none !important;
    }
}

/* ==========================================================================
   CONTATO PAGE - Fix overlap with footer
   ========================================================================== */
@media screen and (max-width: 768px) {
    div#home {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        padding-bottom: 50px !important;
        overflow: visible !important;
    }

    div#esqco2,
    div#dirco2 {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        padding: 15px !important;
    }

    div#dirco2 {
        padding-bottom: 30px !important;
    }

    div#dirco2 img {
        max-width: 100% !important;
        height: auto !important;
    }

    div#dirco2 .texto {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   ACECONE PAGE - Fix footer overlap
   ========================================================================== */
@media screen and (max-width: 768px) {
    div#homeequipa2c {
        position: relative !important;
        z-index: 1 !important;
        background: #fff !important;
        padding-bottom: 30px !important;
    }

    div#equipa1_acecone {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
    }
}

/* ==========================================================================
   Global footer separation fix
   ========================================================================== */
@media screen and (max-width: 768px) {
    #rodape {
        position: relative !important;
        z-index: 10 !important;
        clear: both !important;
        margin-top: 20px !important;
    }
}