/*
Theme Name: Codex Theme
Theme URI: #
Author: Seu Nome / Gemini
Author URI: #
Description: Tema para exibir uma interface estilo Codex com conteúdo editável via ACF.
Version: 4.0 (Final)
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codex-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, theme-options
*/

body.codex-page-template {
    font-family: 'Montserrat', sans-serif;
    background-color: #4d6da2 !important;
    color: #ffffff;
    padding: 1rem;
    min-height: 100vh;
    font-weight: 500;
    margin: 0;
}

/* Ecrã de Entrada para Landscape */
#landscape-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3a4e75;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#enter-codex-button {
    padding: 1rem 2rem;
    font-size: 1.25rem;
    color: white;
    background-color: #f77129;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 900;
    font-style: italic;
}
#landscape-overlay p {
    margin-top: 1rem;
    font-size: 0.9rem;
    max-width: 80%;
    text-align: center;
}

/* Cores do Tema */
#left-menu-container { background-color: #6b86b2; border-radius: 0.5rem; }
#content-right-column { background-color: #3a4e75; }
.bg-codex-orange { background-color: #f77129; }

/* Estilos de Títulos */
.codex-header h1, #content-title, #mobile-tab-button, .mobile-content-title {
    font-weight: 900;
    font-style: italic;
}

.main-item-header span {
    font-weight: 900;
    font-style: italic;
}

/* Layout Principal */
.codex-main-content { display: flex; flex-direction: column; gap: 1rem; }

/* Navegação por Dropdown (Sempre Ativa) */
#codex-tab-container { display: none; } /* Abas sempre escondidas */
#mobile-nav-container { display: block; margin-bottom: 1rem; position: relative; }

#mobile-tab-button {
    width: 100%;
    padding: 1rem;
    background-color: #405d89;
    color: white;
    border-radius: 0.5rem;
    border: none;
    text-align: left;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#mobile-tab-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #405d89;
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid #6b86b2;
}
#mobile-tab-list button {
    display: block;
    width: 100%;
    padding: 1rem;
    color: white;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
#mobile-tab-list button:hover { background-color: #5b79a8; }

/* Layout para Desktop (md: e acima) */
@media (min-width: 768px) {
    body { padding: 2rem; }
    .codex-main-content { flex-direction: row; gap: 2rem; }
    .codex-left-column { width: 33.333333%; }
    .codex-right-column { display: block !important; width: 66.666667%; }
    #landscape-overlay { display: none; } /* Não mostra o overlay em desktop */
}

/* Estilos de Botões e Itens de Menu (Acordeão) */
.main-item-container { margin-bottom: 0.5rem; }
.main-item-header {
    background-color: #869dc1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 1rem;
    border-radius: 0.5rem;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.main-item-header:hover { background-color: #5c78a3; }
.main-item-header.active { background-color: #f77129; }

.sub-item-list {
    padding: 0.5rem 1rem 1rem 2rem;
    border-left: 2px solid #869dc1;
    margin-left: 1rem;
}
.sub-item {
    background-color: transparent;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0.8;
}
.sub-item:hover { background-color: #5c78a3; opacity: 1; }
.sub-item.active { background-color: #3a4e75 !important; font-weight: 600 !important; opacity: 1; }

/* Estilos para sub-sub-itens colapsáveis */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-top: 1rem;
}
.collapsible-header strong {
    color: #ffffff;
    font-weight: 900;
    font-style: italic;
}
.content-arrow {
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid white;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}
.content-arrow.open { transform: rotate(90deg); }
.collapsible-content {
    padding-left: 1rem;
    padding-top: 0.5rem;
    border-left: 2px solid #6b86b2;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
}
.collapsible-content.hidden { display: none; }
.mobile-content-display { padding: 1rem; background-color: #3a4e75; border-radius: 0.5rem; margin-top: 0.5rem; }
.mobile-content-title { font-size: 1.5rem; margin-bottom: 1.5rem; }