/* global.css */

html {
    color-scheme: light;
    background: #ffffff;
    overflow-x: hidden;
    /* Reserva o tamanho da barra de contato (40) + navbar (120) já no CSS
       — o dynamic-positioning.js atualiza esse valor ao rolar/redimensionar.
       Ter um fallback global garante que o carrossel hero nunca apareça
       atrás da navbar antes do JS rodar. */
    --navbar-total-height: 160px;
}

/* Fallback específico para mobile (banner 36 + navbar 90) */
@media (max-width: 768px) {
    html {
        --navbar-total-height: 126px;
    }
}

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    color: #171717;
    background: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Box-sizing global */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Imagens e vídeos responsivos */
img,
video {
    max-width: 100%;
    height: auto;
}

/* Swiper */
.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background-color: #BB0606 !important;
    opacity: 1;
    margin: 0 4px;
}

.swiper-pagination-bullet-active {
    background-color: #BB0606 !important;
}

.swiper-pagination {
    bottom: 15px !important;
}

:root {
    --swiper-theme-color: #BB0606;
}

/* Herança de fonte */
h1, h2, h3, h4, h5, h6, p, span, button, a, input, select, textarea {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

/* ── Melhorias mobile globais ─────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Seções com max-width não escapam da tela */
    section,
    .container,
    .categoryPage,
    .categoryContainer,
    .filterAndCardsContainer,
    .highlight-section {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Grids: 1 coluna no mobile por padrão quando muito apertado */
    .highlight-container-home {
        grid-template-columns: 1fr !important;
    }

    /* Textos não escadem */
    h1 { font-size: clamp(1.4rem, 5vw, 2.2rem); }
    h2 { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }
    h3 { font-size: clamp(1rem, 4vw, 1.4rem); }

    /* Touch target mínimo para links e botões críticos */
    .nav-link,
    .footer-link,
    .pagination a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Tables */
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    /* Padding lateral mínimo para telas muito pequenas */
    .categoryContainer,
    .highlight-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Cards em coluna única */
    .product-card-container,
    .highlightContainerFive {
        grid-template-columns: 1fr !important;
    }

    /* Fonte mínima legível */
    body {
        font-size: 14px;
    }
}