/* Responsividade personalizada */

/* Tablets e dispositivos menores */
@media (max-width: 991.98px) {
    .container {
        padding: 0 10px;
        max-width: 100%;
    }

    .site-title {
        font-size: 2rem;
    }

    .nav-menu {
        flex-direction: column;
        padding: 1rem 0;
    }

    .nav-menu li {
        margin: 0.5rem 0;
    }

    .content-sidebar-wrapper {
        display: block;
    }

    .widget-area {
        margin-top: 2rem;
        position: static;
    }

    .resources-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Ajustes para tabelas */
    table {
        width: 100% !important;
        margin: 0 !important;
    }

    td, th {
        padding: 8px 5px !important;
        font-size: 14px;
    }
}

/* Smartphones */
@media (max-width: 767.98px) {
    .site-header {
        padding: 1rem 0;
    }

    .container {
        padding: 0 5px;
    }

    .site-title {
        font-size: 1.75rem;
    }

    .renewal-grid {
        flex-direction: column;
    }

    .subscription-benefits {
        margin-bottom: 2rem;
    }

    .member-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tab-button {
        width: 100%;
        text-align: center;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

    /* Ajustes específicos para tabelas em smartphones */
    table {
        font-size: 13px;
    }

    td, th {
        padding: 6px 4px !important;
    }

    /* Ajuste para o campo de pesquisa */
    input[type="search"],
    input[type="text"] {
        width: 100% !important;
        max-width: calc(100% - 10px) !important;
        margin: 5px !important;
    }

    article {
        padding: 0.5rem;
    }
}

/* Smartphones pequenos */
@media (max-width: 575.98px) {
    .site-title {
        font-size: 1.5rem;
    }

    .welcome-section h1 {
        font-size: 1.75rem;
    }

    .member-dashboard {
        padding: 1rem;
    }

    .subscription-benefits li {
        padding: 0.75rem;
    }

    /* Ajustes para tabelas em telas muito pequenas */
    table {
        font-size: 12px;
    }

    td, th {
        padding: 4px 3px !important;
    }
}

/* Suporte a telas maiores */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        padding: 0 15px;
    }
}

/* Suporte a telas muito grandes */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}