/* =========================================================
   TEMA ATUAL: Refúgio na Montanha
   ========================================================= */
:root {
    --imagem-fundo-externo: url('/blog/_internas/fundo.jpg'); /* Folhas ou névoa */
    --cor-fundo-blog: hsla(0, 0%, 100%, 0.90);
    --cor-texto-principal: #2d3b2d;
    --cor-texto-secundario: #5c705c;
    --cor-cabecalho-fundo: #557c55;
    --cor-cabecalho-texto: #ffffff;
    --cor-links: #4a754a;
    --cor-links-hover: #2b422b;
    --fonte-titulos: 'Georgia', serif;
    --fonte-texto: 'Georgia', serif;
    --fonte-interface: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   RESET E ESTRUTURA GERAL
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-image: var(--imagem-fundo-externo);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--cor-texto-principal);
    font-family: var(--fonte-texto);
    line-height: 1.6;
    padding: 30px 20px 20px 20px; 
}


/* =========================================================
   RODAPÉ (FOOTER)
   ========================================================= */
footer {
    text-align: center;
    padding: 30px;
    border-top: 1px dashed #ccc;
    font-family: var(--fonte-interface);
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
    background-color: transparent;
    clear: both;
}
footer p { margin-bottom: 5px; }

/* =========================================================
   ANCORAGEM DO CONTAINER NO FUNDO DA TELA
   ========================================================= */
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.container {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* Garante que a folha branca vá até o fim da tela, mesmo se o texto for curto */
    min-height: 100vh; 
}

/* NAVBAR DO BLOGGER */
.navbar-blogger { width: 100%; height: 30px; background-color: #ffffff; border-bottom: 1px solid hsl(0, 0%, 82%); display: flex; align-items: center; padding: 0 15px; font-family: 'Arial', sans-serif; font-size: 13px; color: #333; position: fixed; top: 0; left: 0; z-index: 1000; }
.navbar-blogger .icone-b { background-color: #f57c00; color: white; font-weight: bold; padding: 2px 6px; border-radius: 3px; margin-right: 15px; }
.navbar-blogger .busca-container { display: flex; border: 1px solid #ccc; border-radius: 2px; background: #fff; width: 250px; height: 22px; }
.navbar-blogger input[type="text"] { border: none; outline: none; padding: 0 5px; width: 100%; font-size: 12px; }
.navbar-blogger button { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%23999" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center; border: none; width: 24px; cursor: pointer; }
.navbar-blogger .menu-mais { margin-left: 15px; cursor: pointer; display: flex; align-items: center; }
.navbar-blogger .menu-mais::after { content: "▼"; font-size: 8px; margin-left: 5px; }


/* CONTAINER E LAYOUT */
.container { max-width: 1000px; margin: 0 auto; background-color: var(--cor-fundo-blog); box-shadow: 0 0 15px rgba(0,0,0,0.4); }
header { padding: 40px; text-align: center; border-bottom: 5px solid var(--cor-cabecalho-fundo); }
header h1 { font-family: var(--fonte-titulos); font-size: 2.5rem; margin-bottom: 5px; }
header p { font-family: var(--fonte-interface); color: var(--cor-texto-secundario); font-size: 0.9rem;}
nav { background-color: var(--cor-cabecalho-fundo); padding: 2px 30px 4px 30px; }
nav a { color: var(--cor-cabecalho-texto); text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.85rem; margin-right: 20px; letter-spacing: 0.2px; display: inline-block; }

nav a:hover { opacity: 0.8; }
.wrapper-conteudo { display: flex; padding: 30px; gap: 30px; }
main { width: 60%; }
aside { width: 40%; font-size: 0.9rem; border-left: 1px dotted #ccc; padding-left: 30px;}

/* ESTILOS DOS POSTS */
.post-resumo { margin-bottom: 40px; padding-bottom: 20px; }
.post-data { font-family: var(--fonte-interface); font-size: 0.75rem; color: var(--cor-texto-secundario); display: block; margin-bottom: 5px; letter-spacing: 1px; }
.post-titulo { font-size: 1.8rem; margin-bottom: 10px; line-height: 1.2;}
.post-titulo a { color: var(--cor-texto-principal); text-decoration: none; }
.post-titulo a:hover { color: var(--cor-links); }
.post-imagem-destaque { width: 100%; height: auto; margin: 10px 0; border: 4px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.post-resumo p { font-size: 0.95rem; }
.post-corpo h2 { font-family: var(--fonte-titulos); margin: 25px 0 15px 0; color: var(--cor-texto-principal);}
.post-corpo h3 { font-family: var(--fonte-titulos); margin: 20px 0 10px 0;}
.post-corpo p { margin-bottom: 15px;}
.leia-mais { display: inline-block; margin-top: 10px; color: var(--cor-links); font-weight: bold; text-decoration: none; font-family: var(--fonte-interface); font-size: 0.85rem;}

/* BARRA LATERAL (WIDGETS) */
.widget { margin-bottom: 35px; }
.widget-titulo { font-family: var(--fonte-interface); font-size: 0.7rem; border-bottom: 1px solid var(--cor-links); padding-bottom: 5px; margin-bottom: 15px; color: var(--cor-links); text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; }
.img-preencher { width: 100%; height: auto; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
.livro-link { display: block; color: var(--cor-links); font-weight: bold; text-decoration: none; margin-bottom: 15px; font-size: 0.85rem; line-height: 1.3;}

/* ARQUIVO DO BLOG */
.lista-arquivo { list-style-type: none; font-family: var(--fonte-interface); }
.lista-arquivo li { margin-bottom: 5px; }
.ano-arquivo { font-weight: bold; color: var(--cor-texto-principal); cursor: pointer; font-size: 0.8rem; }
.lista-meses { list-style-type: none; margin-left: 15px; margin-top: 5px; }
.mes-arquivo { color: var(--cor-texto-secundario); font-weight: bold; font-size: 0.75rem; }
.lista-titulos { list-style-type: disc; margin-left: 20px; margin-top: 5px; }
.lista-titulos a { color: var(--cor-links); text-decoration: none; font-size: 0.75rem; }
.lista-titulos a:hover { text-decoration: underline; }

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .wrapper-conteudo { flex-direction: column; padding: 20px; }
    main, aside { width: 100%; border-left: none; padding-left: 0;}
    aside { border-top: 1px dotted #ccc; padding-top: 30px;}
}


/* =========================================================
   DROPDOWN DO BOTÃO "MAIS" (NAVBAR DO TOPO) - HÍBRIDO
   ========================================================= */

.menu-mais-container { position: relative; display: inline-block; height: 100%; }
.menu-mais { cursor: pointer; padding: 0 10px; height: 100%; display: flex; align-items: center; font-size: 12px; color: #555; }

/* A CAIXA DO MENU (Restaurada com a estrutura original) */
.dropdown-mais { 
    display: none; /* Mantém escondido por padrão */
    position: absolute; /* Faz flutuar sobre o site */
    right: 0; 
    top: 100%; 
    background-color: #ffffff !important; 
    min-width: 130px; 
    box-shadow: 0px 4px 10px rgba(0,0,0,0.15) !important; 
    z-index: 9999; 
    border: 1px solid #ddd !important; 
    border-radius: 4px !important; 
    padding: 4px 0 !important;
    margin-top: 0px;
}

/* 1. COMPUTADOR (Mouse): Abre ao passar o mouse */
@media (hover: hover) {
    .menu-mais-container:hover .dropdown-mais { display: block; }
}

/* 2. CELULAR (Toque): O JS usa essa classe para abrir no clique */
.menu-mais-container.ativo .dropdown-mais { display: block; }

/* ESTILO DOS LINKS INTERNOS */
.dropdown-mais a { 
    color: #8f8e8e !important; 
    padding: 5px 15px !important; 
    text-decoration: none !important; 
    display: block !important; 
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 13.5px !important; 
    text-transform: none !important; 
    font-weight: normal !important; 
    margin: 0 !important; 
    border-bottom: none !important;
    background: transparent !important;
    text-align: right;
}

.dropdown-mais a:hover { 
    background-color: #f5f5f5 !important; 
    color: var(--cor-links) !important; 
}

/* Anula a seta fantasma original do tema */
.menu-mais::after { content: none !important; display: none !important; }

/* RESET MOBILE: Remove o bloco azul nativo de toque*/
* {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ANCORAGEM DO CONTAINER NO FUNDO DA TELA
   ========================================================= */
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.container {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* Garante que a folha branca vá até o fim da tela, mesmo se o texto for curto */
    min-height: 100vh;}
    
/* =========================================================
   COMPATIBILIDADE COM A BARRA DO GOOGLE TRADUTOR
   ========================================================= */
html.translated-ltr .navbar-blogger,
html.translated-rtl .navbar-blogger {
    top: 39px !important; /* Desce a barra do Blogger para baixo do Google */
}
html.translated-ltr body,
html.translated-rtl body {
    padding-top: 27px !important; /* Devolve o respiro original, removendo o espaço duplo */
}


/* =========================================================
   LISTAS DA SIDEBAR E EFEITO HOVER (SUBLINHADO)
   ========================================================= */

/* Estrutura da lista com pontinhos */
.lista-links-sidebar { 
    list-style-type: disc; 
    padding-left: 18px; 
    margin: 0; 
    font-family: var(--fonte-interface); 
    font-size: 0.8rem; 
    color: var(--cor-links); 
}

/* Espaçamento elegante entre um artigo e outro */
.lista-links-sidebar li { 
    margin-bottom: 12px; 
    line-height: 1.3; 
}

/* Cor base dos links da lista */
.lista-links-sidebar a { 
    color: var(--cor-links); 
    text-decoration: none; 
}

/* Efeito Hover (Sublinhado) inteligente: afeta apenas sidebar e corpo das postagens */
.post-corpo a:hover, .widget a:hover { 
    text-decoration: underline !important; 
}

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

/* AUMENTA TODO O TEXTO NO MOBILE */
@media (max-width: 768px) {
    html {
        font-size: 113.25%; /* 17px (considerando 16px como base) */
    }

    /* AUMENTO DA BARRA DO BLOGGER E SEU CONTEÚDO NO MOBILE */
    .navbar-blogger {
        height: 45px; 
    }
    
    .navbar-blogger .icone-b {
        padding: 4px 10px; /* Deixa o ícone do 'N' mais encorpado */
        font-size: 15px;   /* Aumenta a letra N */
    }
    
    .navbar-blogger .busca-container {
        height: 32px; /* Barra de busca mais alta e proporcional */
    }
    
    .navbar-blogger input[type="text"] {
        font-size: 14px; /* Aumenta o texto digitado na busca */
    }
    
    /* === NOVO: AUMENTO DA LUPA (ÁREA DE TOQUE GORDA) === */
    .navbar-blogger .busca-container button {
        width: 40px !important; /* Alarga fisicamente o botão para o dedo não errar */
        background-size: 16px !important; /* Aumenta a lupa caso ela seja uma imagem de fundo */
        transform: scale(1.3) !important; /* Dá um zoom visual no botão inteiro */
        transform-origin: center right; /* Garante que o botão não cresça por cima do texto */
    }
    /* ================================================== */
    
    .menu-mais {
        font-size: 14px; /* Aumenta a palavra "Mais" */
    }

    /* === NOVO: AUMENTO DA LUPA DA SIDEBAR (MOBILE) === */
    #input-busca-sidebar + button {
        font-size: 0.8rem !important; /* Aumenta visualmente o ícone da lupa */
        padding: 4px 15px !important; /* Deixa a área de toque mais larga para o dedo */
    }

    /* === CORREÇÃO DA BUSCA E CATEGORIA NO MOBILE === */
    /* Transforma a caixa de resultados de 'lado a lado' para 'em cima e embaixo' */
    #resultados-busca > div[style*="display: flex"],
    .wrapper-conteudo > main > div > div[style*="display: flex"] {
        flex-direction: column !important; 
    }

    /* Faz a miniatura da imagem ficar grande e no topo */


    /* === CORREÇÃO DA BUSCA E CATEGORIA NO MOBILE (PADRÃO HOME) === */
    #resultados-busca > div[style*="display: flex"],
    .wrapper-conteudo > main > div > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important; 
    }

    #resultados-busca > div[style*="display: flex"] > div,
    .wrapper-conteudo > main > div > div[style*="display: flex"] > div {
        display: contents !important;
    }

    /* 1º LUGAR: A Data/Categoria sobe para o topo absoluto */
    #resultados-busca span,
    .wrapper-conteudo > main > div span {
        order: 1 !important;
        margin-bottom: 5px !important;
    }

    /* 2º LUGAR: O Título vem logo abaixo da data (FONTE REDUZIDA) */
    #resultados-busca h3,
    .wrapper-conteudo > main > div h3 {
        order: 2 !important;
        font-size: 1.8rem !important; /* Reduzido de 1.8rem para ficar equilibrado */
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        margin-top: 0 !important;
    }

    /* 3º LUGAR: A Imagem fica no meio */
    #resultados-busca img,
    .wrapper-conteudo > main > div img {
        order: 3 !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 15px !important;
    }

    /* 4º LUGAR: O Texto de resumo fica na base */
    #resultados-busca p,
    .wrapper-conteudo > main > div p {
        order: 4 !important;
    }
}

/* ============================================
   MENU HORIZONTAL COM ROLAGEM NO MOBILE (VERSÃO DEFINITIVA)
   ============================================ */

.menu-navegacao-wrapper {
    position: relative;
    padding: 0;
    /* Preenchemos a caixa inteira com o verde da Muta Editora para evitar vazamentos laterais */
    background-color: var(--cor-cabecalho-fundo); 
}

/* A SOMBRA AGORA É UM ELEMENTO HTML */
.sombra-menu-mobile {
    display: none; /* Só aparece no mobile */
    position: absolute;
    right: 0;
    
    /* A MÁGICA ACONTECE AQUI: puxamos a sombra 5px para cima para cobrir a borda do header */
    top: -5px; 
    bottom: 0;
    
    width: 45px; /* Levemente menor para não tapar tanto a leitura do último link */
    
    /* Um degradê de preto transparente para criar uma sombra real e profunda sobre o verde */
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.5));
    
    pointer-events: none;
    z-index: 10;
    border-radius: 0px;
}

@media (max-width: 768px) {
    .sombra-menu-mobile {
        display: block !important;
    }
    
    .menu-navegacao {
        display: flex;
        gap: 0px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 40px 10px 22px; 
        justify-content: flex-start;
        /* ESPAÇO NAS LATERAIS - ESSE É O SEGREDO */
        padding-left: 22px;
        padding-right: 40px; /* Espaço extra para a sombra */
        margin: 0;
        
    }
    
    .menu-navegacao::-webkit-scrollbar {
        display: none;
    }
    
    .menu-navegacao a {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 6px 0;
        font-size: 1rem;
    }
    
    .menu-navegacao a:first-child {
        margin-left: 0;
    }
    
    .menu-navegacao a:last-child {
        margin-right: 0;
    }
}