/* ============================================================
   ARQUIVO: mobile-fixes.css
   FUNÇÃO: Correções específicas para dispositivos móveis
   ============================================================ */

/* Prevenção de overflow horizontal */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Container base */
.container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   MOBILE FIXES - GERAL
   ============================================================ */

@media (max-width: 768px) {
    /* Reset de larguras */
    * {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Container mobile */
    .container {
        padding: 0 1rem;
    }
    
    /* Imagens responsivas */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Anúncios, iframes e embeds - nunca transbordar */
    ins.adsbygoogle,
    iframe,
    embed,
    object,
    video,
    .google-auto-placed,
    div[id^="google_ads"],
    div[id^="aswift"] {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .entry-content ins.adsbygoogle,
    .entry-content iframe,
    .entry-content embed,
    .entry-content object,
    .entry-content video {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Tabelas responsivas */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevenção de zoom em inputs */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ============================================================
   HEADER MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .site-header {
        padding: 0.75rem 0;
    }
    
    .header-inner {
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0 1rem;
    }
    
    .site-branding {
        flex: 0 0 auto;
        max-width: 50%;
    }
    
    .custom-logo {
        max-height: 40px;
        width: auto;
    }
    
    .menu-toggle {
        flex: 0 0 auto;
        margin-left: auto;
        padding: 0.5rem;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(217, 70, 166, 0.1), rgba(217, 70, 166, 0.05));
        border-width: 1.5px;
    }
    
    .menu-toggle-icon {
        width: 22px;
        height: 18px;
    }
    
    .menu-toggle-icon .bar {
        height: 2.5px;
    }
    
    .header-actions {
        flex: 0 0 auto;
        gap: 0.5rem;
    }
    
    .header-actions button {
        padding: 0.5rem;
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   BREADCRUMB MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.75rem 0;
        gap: 0.375rem;
        flex-wrap: wrap; /* Permite quebra de linha ao invés de scroll */
        overflow-x: visible; /* Remove scroll horizontal */
        white-space: normal; /* Permite quebra de texto */
        border-bottom: none !important; /* Remove linha inferior */
        margin-bottom: 0.5rem;
    }
    
    /* Esconde texto "Início" no mobile, mantém só o ícone */
    .breadcrumb a:first-child {
        font-size: 0;
        width: 20px;
        height: 20px;
        padding: 2px;
    }
    
    .breadcrumb a:first-child svg {
        width: 16px;
        height: 16px;
    }
    
    /* Reduz tamanho dos separadores */
    .breadcrumb-separator {
        font-size: 0.875rem;
        opacity: 0.4;
    }
    
    /* Esconde título do post no breadcrumb mobile (muito longo) */
    .breadcrumb-current {
        display: none;
    }
    
    /* Remove último separador quando current está oculto */
    .breadcrumb > span:last-of-type:not(.breadcrumb-current) {
        display: none;
    }
}

/* ============================================================
   POST HEADER MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .entry-header {
        padding: 0 0.5rem;
    }
    
    .entry-title {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 1rem;
        word-break: break-word;
        hyphens: auto;
    }
    
    .entry-categories {
        margin-bottom: 0.75rem;
    }
    
    .entry-category {
        padding: 0.25rem 0.625rem;
        font-size: 0.6875rem;
    }
    
    .entry-meta {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 0;
    }
    
    .entry-meta .meta-item {
        font-size: 0.75rem;
    }
    
    .entry-meta .author-avatar-small {
        width: 28px;
        height: 28px;
    }
}

/* ============================================================
   POST THUMBNAIL MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .post-thumbnail {
        margin: 1rem 0;
        border-radius: var(--radius-md, 8px);
        overflow: hidden;
    }
    
    .post-thumbnail img {
        width: 100%;
        height: auto;
    }
}

/* ============================================================
   TABLE OF CONTENTS MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .table-of-contents {
        margin: 1.5rem 0;
        padding: 1rem 1.25rem;
    }
    
    .toc-header {
        gap: 0.5rem;
    }
    
    .toc-title {
        font-size: 0.9375rem;
        gap: 0.5rem;
        white-space: nowrap;
    }
    
    .toc-title svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .toc-toggle {
        padding: 0.375rem;
        flex-shrink: 0;
    }
    
    .toc-toggle svg {
        width: 16px;
        height: 16px;
    }
    
    .toc-list {
        margin-top: 1rem; /* Espaço adicional após o header */
    }
    
    .toc-list > li {
        margin-bottom: 1.125rem; /* Aumentado de 0.875rem para 1.125rem */
    }
    
    .toc-list a {
        font-size: 0.875rem; /* Aumentado de 0.8125rem para 0.875rem */
        padding: 0.875rem 0.75rem; /* Aumentado padding vertical de 0.5rem para 0.875rem */
        gap: 0.875rem; /* Aumentado de 0.75rem para 0.875rem */
        min-height: 56px; /* Altura mínima confortável para toque em mobile */
        line-height: 1.6; /* Melhor espaçamento entre linhas */
    }
    
    .toc-list a:before {
        width: 28px; /* Aumentado de 24px para 28px */
        height: 28px; /* Aumentado de 24px para 28px */
        font-size: 0.8125rem; /* Aumentado de 0.75rem para 0.8125rem */
    }
    
    .toc-list .toc-h3 {
        padding-left: 2.25rem; /* Aumentado de 2rem para 2.25rem */
        font-size: 0.8125rem; /* Aumentado de 0.75rem para 0.8125rem */
    }
    
    .toc-list .toc-h3 a {
        min-height: 52px; /* Altura mínima para subitens em mobile */
        padding: 0.75rem 0.75rem; /* Padding adequado */
    }
    
    .toc-list .toc-h3 a:before {
        width: 26px; /* Aumentado de 24px para 26px */
        height: 26px; /* Aumentado de 24px para 26px */
    }
}

/* ============================================================
   ENTRY CONTENT MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .entry-content {
        font-size: 0.9375rem;
        line-height: 1.7;
        padding: 0;
    }
    
    .entry-content h2 {
        font-size: 1.375rem;
        margin: 2rem 0 1rem 0;
        word-break: break-word;
    }
    
    .entry-content h3 {
        font-size: 1.125rem;
        margin: 1.5rem 0 0.75rem 0;
        word-break: break-word;
    }
    
    .entry-content h4 {
        font-size: 1rem;
    }
    
    .entry-content p {
        margin-bottom: 1.25rem;
    }
    
    .entry-content ul,
    .entry-content ol {
        padding-left: 1.5rem;
        margin: 1.25rem 0;
    }
    
    .entry-content img {
        margin: 1.25rem 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-md, 8px);
    }
    
    .entry-content .info-box,
    .entry-content .warning-box,
    .entry-content .success-box {
        padding: 1rem;
        margin: 1.5rem 0;
        font-size: 0.875rem;
    }
    
    /* Tabelas mobile */
    .entry-content table {
        font-size: 0.8125rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .entry-content table th,
    .entry-content table td {
        padding: 0.625rem;
        white-space: nowrap;
    }
}

/* ============================================================
   SOCIAL SHARE MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .social-share {
        margin: 2rem 0; /* Margens laterais zeradas */
        padding: 1.5rem 1rem; /* Padding interno adequado */
        border-radius: var(--radius-lg);
    }
    
    .social-share-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .social-share-buttons {
        gap: 0.75rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .social-share-btn {
        padding: 0.75rem 1rem; /* Padding maior para melhor toque */
        font-size: 0.875rem; /* Texto maior */
        flex: 1 1 calc(50% - 0.375rem); /* 2 colunas */
        min-width: 0;
        justify-content: center;
    }
    
    .social-share-btn svg {
        width: 18px; /* Ícones maiores */
        height: 18px;
    }
}

/* Small mobile - botões em coluna única se necessário */
@media (max-width: 380px) {
    .social-share-btn {
        flex: 1 1 100%; /* 1 coluna em telas muito pequenas */
    }
}

/* ============================================================
   ENTRY FOOTER (TAGS) MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .entry-footer {
        padding: 1.25rem 0.5rem;
    }
    
    .entry-tags {
        gap: 0.5rem;
    }
    
    .entry-tags strong {
        font-size: 0.875rem;
    }
    
    .entry-tag {
        padding: 0.3125rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ============================================================
   AUTHOR BOX MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.75rem 1rem; /* Reduzido padding lateral */
        gap: 1.25rem;
        margin: 2rem 0; /* Margens laterais zeradas */
        border-radius: var(--radius-lg); /* Border radius menor */
    }
    
    .author-avatar img {
        width: 100px;
        height: 100px;
        border-radius: var(--radius-full);
    }
    
    .author-title {
        font-size: 0.625rem;
        justify-content: center;
    }
    
    .author-title:before {
        display: none;
    }
    
    .author-name {
        font-size: 1.375rem;
    }
    
    .author-bio {
        font-size: 0.875rem;
    }
    
    .author-link {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Small mobile - padding ainda menor */
@media (max-width: 480px) {
    .author-box {
        padding: 1.5rem 0.75rem;
    }
}

/* ============================================================
   RELATED POSTS MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .related-posts {
        margin: 2rem 0; /* Margens laterais zeradas */
    }
    
    .related-posts-title {
        font-size: 1.375rem;
        margin-bottom: 1.25rem;
        padding: 0 1rem; /* Apenas padding horizontal */
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0 1rem; /* Apenas padding horizontal mínimo */
    }
    
    /* Cards dos posts relacionados */
    .grid-card {
        margin: 0; /* Sem margens laterais */
    }
    
    .grid-card-content {
        padding: 1.25rem;
    }
    
    .grid-card-title {
        font-size: 1.125rem;
    }
}

/* ============================================================
   POST NAVIGATION MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .post-navigation {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 2rem 0;
        padding: 0 1rem; /* Padding horizontal */
    }
    
    .nav-links a {
        padding: 1.25rem;
    }
    
    .nav-subtitle {
        font-size: 0.6875rem;
    }
    
    .nav-title {
        font-size: 0.9375rem;
    }
}

/* ============================================================
   COMMENTS MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .comments-area {
        margin: 2rem 0;
        padding: 1.5rem 1rem;
        border-radius: var(--radius-lg);
    }
    
    .comments-title {
        font-size: 1.375rem;
    }
    
    .comment-body {
        flex-direction: column;
        gap: 1rem;
    }
    
    .comment-author img {
        width: 50px;
        height: 50px;
    }
    
    .comment-respond {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
    }
    
    .comment-reply-title {
        font-size: 1.25rem;
    }
    
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form textarea {
        padding: 0.875rem;
        font-size: 16px;
    }
    
    .comment-form-submit {
        width: 100%;
    }
    
    .submit {
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }
}

/* ============================================================
   SIDEBAR MOBILE
   ============================================================ */

@media (max-width: 992px) {
    .single-layout.has-sidebar {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .single-sidebar {
        position: static;
        max-width: 100%;
        padding: 0 0.5rem;
    }
    
    .single-sidebar .widget {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }
    
    .single-sidebar .widget-title {
        font-size: 1rem;
    }
}

/* ============================================================
   COMMENTS MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .comments-area {
        padding: 1.5rem 0.5rem;
    }
    
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form textarea {
        padding: 0.75rem;
        font-size: 16px;
    }
    
    .comment-form-submit {
        width: 100%;
        padding: 1rem;
    }
}

/* ============================================================
   FOOTER MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1rem;
    }
    
    .footer-widget h3 {
        font-size: 1.125rem;
    }
    
    .footer-bottom {
        padding: 1.5rem 1rem;
    }
    
    .footer-bottom-inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-menu {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================================================
   CARDS/POSTS MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .post-card {
        margin-bottom: 1.25rem;
    }
    
    .post-card-content {
        padding: 1.25rem;
    }
    
    .post-card-title {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }
    
    .post-card-excerpt {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .post-card-meta {
        font-size: 0.75rem;
    }
}

/* ============================================================
   SCROLL HORIZONTAL FIX
   ============================================================ */

@media (max-width: 768px) {
    /* Força overflow hidden apenas no wrapper principal */
    .site-main {
        overflow-x: hidden;
    }
    
    /* Garante que nenhum elemento exceda a largura da tela */
    .single-content-area {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ============================================================
   CORREÇÕES ADICIONAIS MOBILE - SINGLE POST
   ============================================================ */

@media (max-width: 768px) {
    /* Container principal com padding adequado */
    .single-post .container {
        padding: 0 1rem;
        max-width: 100%;
    }
    
    .single-layout {
        display: block;
        margin: 1rem 0 0 0;
        padding: 0;
    }
    
    .single-content-area {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .single-sidebar {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin-top: 2rem;
    }
    
    /* Breadcrumb - espaçamento adequado */
    .breadcrumb {
        padding: 1rem 0;
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    /* Entry Header */
    .entry-header {
        padding: 0;
        margin-top: 0.5rem;
    }
    
    .entry-title {
        font-size: 1.5rem !important;
        line-height: 1.3;
        word-break: break-word;
    }
    
    .entry-category {
        font-size: 0.6875rem;
        padding: 0.25rem 0.625rem;
    }
    
    .entry-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Post Thumbnail */
    .post-thumbnail {
        margin: 1rem 0;
        width: 100%;
        border-radius: var(--radius-md, 8px);
        overflow: hidden;
    }
    
    .post-thumbnail img {
        width: 100%;
        height: auto;
    }
    
    /* TOC */
    .table-of-contents {
        margin: 1.5rem 0;
    }
    
    /* Entry Content */
    .entry-content {
        padding: 0;
    }
    
    .entry-content h2 {
        font-size: 1.25rem;
    }
    
    .entry-content h3 {
        font-size: 1.125rem;
    }
    
    .entry-content p {
        font-size: 0.9375rem;
    }
    
    /* Social Share - margem lateral mínima */
    .social-share {
        margin: 1.5rem 1rem;
        padding: 1.25rem;
    }
    
    /* Entry Footer - padding mínimo */
    .entry-footer {
        padding: 1rem;
    }
    
    /* Author Box - ocupar mais espaço */
    .author-box {
        margin: 2rem 0;
        padding: 1.75rem 1rem;
    }
    
    /* Related Posts - sem padding extra nos lados */
    .related-posts {
        padding: 0;
        margin: 2rem 0;
    }
    
    .related-posts-title {
        padding: 0 1rem;
    }
    
    .related-posts-grid {
        padding: 0 1rem;
    }
    
    /* Comments - margem mínima */
    .comments-area {
        margin: 2rem 0;
        padding: 1.5rem 1rem;
    }
    
    /* Post Navigation - padding mínimo */
    .post-navigation {
        padding: 0 1rem;
        margin: 2rem 0;
    }
}

/* Small Mobile - ajustes finais */
@media (max-width: 480px) {
    .entry-title {
        font-size: 1.25rem !important;
    }
    
    .entry-meta {
        font-size: 0.6875rem;
    }
    
    .entry-content h2 {
        font-size: 1.125rem;
    }
    
    .entry-content h3 {
        font-size: 1rem;
    }
    
    .social-share-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Author Box e Related Posts ainda mais próximos das bordas */
    .author-box {
        padding: 1.5rem 0.75rem;
    }
}