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

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding-top: 130px; /* Increased padding for taller header (header content + nav) */
    background-color: #f0f4f8; /* Light, slightly blueish gray */
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative; /* Needed for padding-top to work correctly with flex column */
}

header {
    background-color: #3A506B; /* Deep teal/blue */
    color: #fff;
    padding: 1em 20px;
    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks children (header-row and nav) vertically */
    align-items: stretch; /* Stretches children to fill the width of the header's content box */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed; /* Make header fixed */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Ensure header is above other content */
}

/* New class to wrap the top part of the header (logo/title and language selector) */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensures this row takes the full available width within the header's padding */
}

.header-content {
    display: flex;
    align-items: center;
}

#header-logo-img {
    height: 50px; /* Adjust as needed */
    margin-right: 15px;
}

.site-title-group h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    margin: 0;
    color: #fff;
}

.site-title-group .subtitle {
    font-size: 0.9em;
    margin: 0;
    color: #e0e0e0;
}

.language-selector {
    display: flex;
    gap: 8px;
}

.language-selector button {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.language-selector button:hover,
.language-selector button.active {
    background-color: #FFD700; /* Gold accent */
    color: #3A506B;
    border-color: #FFD700;
}

nav {
    background-color: #5BC0BE; /* Lighter teal - Kept for visual distinction within the header */
    /* If you want nav to have the same background as the header, use: background-color: transparent; or remove this line. */
    padding: 0.8em 20px; /* Vertical padding for nav items, horizontal padding to align content with header-row */
    text-align: center;
    box-shadow: none; /* Removed shadow, as the main header already has one */
    width: 100vw; /* Make the element span the full width of the viewport */
    position: relative; /* Needed for vw and calc margins to work reliably in some contexts, though often not strictly necessary */
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box; /* Ensure padding is included in the element's total width */
}

/* ========================================= */
/* Footer Styles */
/* ========================================= */
footer {
    background-color: #2c3e50; /* Cor escura e moderna, ex: azul ardósia escuro */
    color: #ecf0f1; /* Cor de texto clara, ex: cinza claro */
    padding: 10px 15px 10px; /* Padding superior/inferior reduzido para compactar */
    font-size: 0.9em;
    margin-top: auto; /* Garante que o rodapé fique no final em páginas com pouco conteúdo */
    text-align: left;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px; /* Mantido em 1200px conforme seu CSS atual */
    margin: 0 auto;
    gap: 15px; /* Mantido em 15px conforme seu CSS atual */
}

.footer-section {
    /* flex: 1; Removido para usar flex-basis */
    flex-grow: 1; /* Permite que as seções cresçam */
    flex-basis: calc(50% - 7.5px); /* Almeja 2 colunas principais (gap de 15px / 2 = 7.5px) */
    min-width: 300px; /* Largura mínima antes de empilhar */
    margin-bottom: 10px; /* Margem inferior */
    padding: 0 10px; /* Padding interno da seção */
}

/* Adicionado: Estilos específicos para a seção 'about' */
.footer-section.about {
    display: flex; /* Aplica flexbox para alinhar logo e texto */
    align-items: center; /* Centraliza verticalmente logo e texto */
}

.footer-logo {
    width: 60px; /* Tamanho menor para o logo no rodapé */
    margin-bottom: 0; /* Removido margin-bottom para alinhamento flex */
    margin-right: 15px; /* Adicionado espaço à direita da logo */
}

.footer-section.about p {
    font-size: 1.4em; /* Tamanho da fonte reduzido */
    line-height: 1.5;  /* Altura da linha reduzida */
    color: #bdc3c7;
    margin: 0; /* Removido margin-bottom para alinhamento flex */
}

.footer-section h4 {
    color: #ffffff; /* Cor de destaque para títulos, ex: branco */
    font-size: 0.8em; /* Tamanho da fonte */
    margin-bottom: 10px; /* Margem inferior */
    border-bottom: 1px solid #3498db; /* Linha sutil abaixo do título */
    padding-bottom: 5px; /* Padding inferior */
    font-weight: 600;
}

.footer-section.links ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.footer-section.links ul li {
     /* Removido padding-left e position para não interferir com o layout de 2 colunas */
    margin-bottom: 4px; /* Margem inferior reduzida */
}

.footer-section.links ul li a {
    color: #bdc3c7; /* Cor dos links */
    font-size: 0.8em; /* Tamanho da fonte dos links */
    text-decoration: none;
    /* margin-bottom: 4px; Removido, agora no li */
    display: block;
    width: fit-content; /* Make each list item take 50% width for two columns */
    box-sizing: border-box; /* Include padding/border in width */
    padding-right: 5px; /* Espaço entre colunas */
    padding-left: 0; /* Reset padding-left from general ul li rule */
    position: static; /* Reset position from general ul li rule */
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-section.links ul li a:hover {
    color: #ffc107; /* Destaque no hover */
    padding-left: 5px; /* Pequeno efeito de indentação */
}

.footer-section.links ul li a i {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; /* Ou a versão correta que você está usando */
    font-weight: 900; /* Para ícones sólidos 'fas' */
    margin-right: 8px;
    /* A cor e o tamanho da fonte são herdados do <a> por padrão */
}

.footer-section.links ul li::before {
    content: none; /* Remove the cross icon from footer links */
}

.footer-section.social a {
    width: auto; /* Garante que o link ocupe apenas o espaço necessário */
    color: #ecf0f1;
    /* margin-right: 10px; */ /*Espaço entre ícones sociais */
    font-size: 1.4em; /* Tamanho dos ícones sociais */
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-section.social a:hover {
    color: #ffc107; /* Destaque no hover */
    transform: scale(1.1); /* Efeito de zoom sutil */
}

.footer-bottom {
    text-align: center;
    padding-top: 10px; /* Padding superior */
    margin-top: 10px;  /* Margem superior para separar do conteúdo acima */
    border-top: 1px solid #34495e; /* Linha divisória mais escura */
    font-size: 0.8em;
    color: #bdc3c7;
    width: 100%; /* Garante que ocupe toda a largura */
}

.footer-bottom p { /* Adicionado para garantir que a margem do p seja 0 */
    margin: 0;
}


/* Responsive adjustments for features and footer */
@media (max-width: 992px) {
    .feature-item {
        width: calc(50% - 30px); /* 2 colunas em tablets */
    }
}

@media (max-width: 768px) {
    .hero-section h2 {
        font-size: 2.5em;
    }
    .hero-section p {
        font-size: 1.2em;
    }
    .cta-button {
        padding: 12px 25px;
        font-size: 1.1em;
    }
    .feature-item {
        width: calc(100% - 20px); /* 1 coluna em mobile */
        margin-bottom: 20px;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px; /* Ajustar gap para mobile */
    }
    .footer-section {
        flex-basis: 100%; /* Cada seção ocupa a largura total, empilhando-as */
        min-width: 100%; /* Garante que ocupe 100% */
        margin-bottom: 10px; /* Reduzir margem para mobile */
        padding: 0 5px; /* Reduzir padding para mobile */
    }
    /* Adicionado: Ajustes para a seção 'about' em mobile */
    .footer-section.about {
        flex-direction: column; /* Empilha logo e texto */
        align-items: center; /* Centraliza itens empilhados */
    }
    .footer-logo {
        margin-right: 0; /* Remove margem direita */
        margin-bottom: 10px; /* Adiciona margem inferior entre logo e texto */
    }
    .footer-section h4 {
        font-size: 1.05em; /* Reduzir fonte para mobile */
    }
     .footer-section.about p, .footer-section.links ul li a {
        font-size: 0.8em; /* Reduzir fonte para mobile */
    }
    .footer-section.social a {
        margin: 0 10px; /* Ajustar margem para ícones sociais centralizados */
    }
    .footer-bottom {
        margin-top: 15px; /* Ajustar margem para mobile */
    }
}

nav a {
    color: #fff;
    margin: 0 20px;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    transition: color 0.3s;
}

nav a:hover, nav a.active {
    color: #FFD700; /* Gold accent for hover/active */
    text-decoration: none;
}

.container {
    padding: 30px;
    max-width: 900px;
    margin: 30px auto;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.08);
    border-radius: 8px;
    flex-grow: 1;
}

h1, h2, h3 { /* General h1, h2, h3 styling for content area */
    font-family: 'Montserrat', sans-serif;
    color: #2c3e50; /* Darker blue for content headings */
}

h2 { /* Page specific main heading */
    text-align: center;
    margin-bottom: 25px;
    font-size: 2em;
}

h3 {
    margin-top: 30px;
    font-size: 1.5em;
    border-bottom: 2px solid #5BC0BE;
    padding-bottom: 5px;
}

p {
    margin-bottom: 15px;
}

ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0;
}

ul li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

ul li::before {
    content: "✝"; /* Modern biblical icon - cross - */
    position: absolute;
    left: 0;
    color: #5BC0BE; /* Teal accent for list items */
    font-weight: bold;
}

a {
    color: #3A506B;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Hero Section Styles */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/bible-background.jpg'); /* Considere adicionar uma imagem de fundo temática em img/bible-background.jpg */
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Ajuste conforme necessário */
}

.hero-content {
    max-width: 800px;
}

.hero-logo {
    width: 150px; /* Ajuste o tamanho conforme necessário */
    margin-bottom: 20px;
}

.hero-section h2 {
    font-size: 3em; /* Aumentado para destaque */
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.hero-section p {
    font-size: 1.4em; /* Aumentado para destaque */
    margin-bottom: 30px;
    line-height: 1.6;
}

.cta-button {
    background-color: #ffc107; /* Cor de destaque, ex: amarelo */
    color: #333;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 50px; /* Bordas arredondadas para um look moderno */
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.cta-button:hover {
    background-color: #e0a800; /* Cor mais escura no hover */
    transform: translateY(-3px);
}

/* General Page Section Styles */
.page-section {
    padding: 40px 0;
    text-align: center;
}

.page-section h3 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.page-section h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #ffc107; /* Cor de destaque */
    margin: 10px auto 0;
}


/* Features Grid Styles */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30px;
    margin-top: 20px;
}

.feature-item {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    width: calc(33.333% - 40px); /* Ajuste para 3 colunas com gap */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.feature-item i {
    color: #007bff; /* Cor primária para ícones */
    margin-bottom: 15px;
}

.feature-item h4 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
}

/* Featured Quizzes Section */
.featured-quizzes-section {
    background-color: #eef4f7; /* Um fundo levemente diferente */
}

.quiz-placeholder {
    background-color: #fff;
    border: 1px dashed #ccc;
    padding: 20px;
    margin: 15px auto;
    border-radius: 8px;
    max-width: 400px;
    color: #777;
    font-style: italic;
}


/* Footer Styles */
footer {
    background-color: #3A506B; /* Padrão Header: Cor de fundo principal */
    color: #fff;               /* Padrão Header: Cor de texto principal */
    padding: 1em 20px;        /* Padrão Header: Padding (aprox. 16px 20px) */
    font-family: 'Open Sans', sans-serif; /* Padrão Body: Fonte base */
    font-size: 1em;             /* Padrão Header Nav: Tamanho de fonte base para o rodapé */
    margin-top: auto; /* Garante que o rodapé fique no final em páginas com pouco conteúdo */
    text-align: left;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-width: 100%; /* Aumentado para ocupar mais largura da página */
    margin: 0 auto; /* Margem inferior controlada por .footer-section ou .footer-bottom */
    gap: 10px; /* Espaço entre seções */
}

.footer-section {
    flex: 1;
    min-width: 220px; /* Para responsividade, ajuste conforme o número de seções */
    margin-bottom: 15px; /* Margem inferior */
    padding: 0 10px; /* Padding interno da seção */
}

.footer-section.links {
    /* Aumenta a largura mínima para a seção de "Quick Links", dando mais espaço horizontal aos links. */
    min-width: 550px; /* Ajustado para garantir que os links caibam em no máximo duas linhas. O padrão para .footer-section é 220px. */
    /* Opcional: se quiser que esta seção também cresça proporcionalmente mais que as outras quando houver espaço extra: */
    /* flex-grow: 1.5; */ /* (O padrão é 1 para todas as .footer-section) */
}

.footer-section h4 {
    font-family: 'Montserrat', sans-serif; /* Padrão Header: Fonte para títulos/nav */
    color: #FFD700;           /* Padrão Header: Cor de destaque para títulos */
    font-size: 1.2em;          /* Padrão Header: Tamanho de fonte para títulos de seção */
    font-weight: bold;         /* Padrão Header: Peso da fonte para títulos/nav */
    margin-bottom: 10px; /* Margem inferior */
    border-bottom: 1px solid #5BC0BE; /* Padrão Header: Cor da nav para borda sutil */
    padding-bottom: 5px; /* Padding inferior */
}

.footer-logo {
    height: 50px; /* Padrão Header: Logo um pouco menor que o do header (50px) */
    width: auto;
    margin-bottom: 8px; /* Margem inferior ligeiramente reduzida */
}

.footer-section.about p {
    font-family: 'Open Sans', sans-serif; /* Padrão Body: Fonte para texto */
    color: #e0e0e0;           /* Padrão Header: Cor de subtítulo/texto secundário */
    font-size: 0.9em;          /* Padrão Header: Tamanho de fonte de subtítulo */
    line-height: 1.6;
    margin-bottom: 8px; /* Margem inferior reduzida */
}

.footer-section.links ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.footer-section.links ul li a {
    font-family: 'Montserrat', sans-serif; /* Padrão Header: Fonte para nav links */
    color: #fff;               /* Padrão Header: Cor para nav links */
    font-size: 1em;            /* Padrão Header: Tamanho de fonte para nav links */
    font-weight: bold;         /* Padrão Header: Peso da fonte para nav links */
    text-decoration: none;
    display: inline-flex;      /* Para alinhar ícone e texto, e comportamento inline */
    align-items: center;
    margin-right: 15px;        /* Espaçamento entre links, similar à nav do header */
    width: auto;               /* Garante que o link ocupe apenas o espaço necessário, não forçando colunas */
    margin-bottom: 8px;        /* Espaçamento inferior para links que quebram linha */
    transition: color 0.3s ease; /* Padrão Header: Transição suave */
}

.footer-section.links ul li a:hover {
    color: #FFD700;           /* Padrão Header: Cor de destaque no hover */
    text-decoration: none;
}

.footer-section.links ul li a i {
    display: inline-block; /* Garante que o ícone seja exibido como um bloco em linha */
    font-style: normal;    /* Remove o estilo itálico padrão da tag <i>, se não desejado para o ícone */
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; /* Essencial para Font Awesome 5. Use "Font Awesome 6 Free" para FA6, etc. */
    font-weight: 900; /* Essencial para ícones sólidos ('fas'). */
    margin-right: 8px; /* Espaço entre o ícone e o texto */
    font-size: 1em; /* Padrão: Mesmo tamanho do texto do link, ou ajuste (ex: 1.1em) */
    /* A cor é herdada do link <a> (será #fff) */
}

.footer-section.links ul li::before {
    content: none; /* Remove the cross icon from footer links */
}

.footer-section.social a {
    color: #fff;               /* Padrão Header: Cor para ícones */
    margin-right: 10px; /* Espaço entre ícones sociais */
    font-size: 1.2em;          /* Tamanho padronizado, um pouco maior que texto normal */
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-section.social a:hover {
    color: #FFD700;           /* Padrão Header: Cor de destaque no hover */
    transform: scale(1.1); /* Efeito de zoom sutil */
}

.footer-bottom {
    text-align: center;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #5BC0BE; /* Padrão Header: Cor da nav para borda sutil */
    font-size: 0.9em;          /* Padrão Header: Tamanho de fonte de subtítulo */
    color: #e0e0e0;           /* Padrão Header: Cor de subtítulo/texto secundário */
    width: 100%; /* Garante que ocupe toda a largura */
}

.footer-bottom p { /* Adicionado para garantir que a margem do p seja 0 */
    margin: 0;
}


/* Responsive adjustments for features and footer */
@media (max-width: 992px) {
    .feature-item {
        width: calc(50% - 30px); /* 2 colunas em tablets */
    }
}

@media (max-width: 768px) {
    .hero-section h2 {
        font-size: 2.5em;
    }
    .hero-section p {
        font-size: 1.2em;
    }
    .cta-button {
        padding: 12px 25px;
        font-size: 1.1em;
    }
    .feature-item {
        width: calc(100% - 20px); /* 1 coluna em mobile */
        margin-bottom: 20px;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px; /* Ajustar gap para mobile */
    }
    .footer-section.links ul li {
        width: 100%; /* Stack links back to one column on smaller screens */
    }
    .footer-section {
        min-width: 100%;
        margin-bottom: 10px; /* Reduzir margem para mobile */
        padding: 0 5px; /* Reduzir padding para mobile */
    }
    .footer-section h4 {
        font-size: 1.1em; /* Ajuste para mobile, mantendo proporção */
    }
     .footer-section.about p {
        font-size: 0.85em; /* Ajuste para mobile */
    }
    .footer-section.links ul li a { font-size: 0.9em; /* Ajuste para mobile */}
    .footer-section.social a {
        margin: 0 10px; /* Ajustar margem para ícones sociais centralizados */
    }
    .footer-bottom {
        margin-top: 15px; /* Ajustar margem para mobile */
    }
}