/* =========================================
   TEMA VINTAGE CELTA - EDIÇÃO FINAL RESPONSIVA
========================================= */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&display=swap');

/* 1. RESET E PREPARAÇÃO */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden; /* Evita que o site "dance" para os lados */
}

/* 2. FUNDO (CORREÇÃO MOBILE) */
body {
    font-family: 'EB Garamond', serif;
    color: #e8e0d2;
    background-color: #1a1612;
    /* Forçamos o fundo com !important para garantir que carrega */
    background-image: url('background.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    
    /* Criamos a margem do topo para a navbar não tapar o conteúdo */
    padding-top: 80px !important; 
    /* Margens laterais globais */
    padding-left: 5% !important;
    padding-right: 5% !important;
}

/* Overlay Escuro Fixo */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 5, 0.75);
    z-index: -1;
}

/* 3. NAVBAR RESPONSIVA */
.nav_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 70px;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5% !important;
    z-index: 9999;
    border-bottom: 1px solid #d4b26a;
    margin: 0 !important; /* Remove margens que tinhas antes */
}

/* 4. CONTENTORES DE CONTEÚDO (Centralização Automática) */
/* Aplicamos isto a qualquer div principal como .post-container ou .formulario */
.post-container, .formulario, .search-container, #posts, .main-content {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* 5. CARDS DE POSTS */
.post-resumo {
    background: rgba(45, 35, 25, 0.9);
    border: 1px solid rgba(212, 178, 106, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, border-color 0.3s;
    cursor: pointer;
}

.post-resumo:hover {
    transform: translateY(-5px);
    border-color: #d4b26a;
    background: rgba(55, 45, 35, 1);
}

/* 6. FORMULÁRIOS E INPUTS (100% Responsivos) */
input, textarea, select {
    width: 100% !important; /* No telemóvel têm de ser 100% */
    max-width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #5a4c3c;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: inherit;
}

button {
    width: 100%;
    padding: 12px;
    background: #d4b26a;
    color: #1a1612;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background: #fff;
    color: #1a1612;
}

/* 7. AJUSTES ESPECÍFICOS PARA TELEMÓVEL */
@media screen and (max-width: 768px) {
    body {
        /* No mobile, o fixed costuma bugar a imagem. 'scroll' resolve. */
        background-attachment: scroll !important;
        padding-top: 100px !important; /* Mais espaço para a nav que pode crescer */
        font-size: 16px;
    }

    .nav_bar {
        height: auto;
        padding: 10px 5% !important;
        flex-direction: column; /* Logo em cima, menu em baixo */
    }

    .nav_bar ul {
        padding: 0;
        margin: 10px 0 0 0;
        display: flex;
        gap: 15px;
    }

    h1 {
        font-size: 1.8em !important;
    }
}

/* Ocultar elementos desnecessários do Google */
.goog-te-banner-frame.skiptranslate, 
body > .skiptranslate, 
iframe.goog-te-menu-frame { display: none !important; }
body { top: 0 !important; }