/* ===================================================
    🌿 DEVOCIONAL.CSS — VERSÃO FINAL UNIFICADA
=================================================== */

/* ===================================================
    CONTAINER PRINCIPAL
=================================================== */
.devocional-main {
    max-width: 720px;
    margin: 50px auto;
    padding: 0 20px;
}

/* ===================================================
    CARD PRINCIPAL E CONTROLOS
=================================================== */
.devocional-card {
    background: var(--color-bg-secondary);
    border-radius: 18px;
    padding: 40px 35px;
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px var(--color-shadow);
    position: relative;
}

/* Mantém os controles de fonte (A- A+) fixos no topo à direita */
.controle-header {
    position: absolute;
    top: 25px;
    right: 25px;
    display: flex;
    gap: 10px;
    z-index: 20;
}

/* Estilo base da Estrela */
/* Estilo base para manter a mesma escala da página de Promessas */
/* ===================================================
    ESTRELA DE FAVORITOS (PADRONIZAÇÃO COM PROMESSAS)
=================================================== */

/* Estilo base idêntico ao .star-bible da página de Promessas */
.star-btn {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 1.8rem !important; /* Tamanho exato de Promessas */
    cursor: pointer;
    transition: transform 0.25s, color 0.25s;
    line-height: 1;
    user-select: none;
    background: none;
    border: none;
    z-index: 5;
    font-size: 1.8rem !important;
}

/* Estrela do card principal - Alinhamento ao lado do título */
#star-principal {
    position: static !important;
    margin-top: -6px; /* Alinhamento visual com a base do H1 */
    margin-left: 5px;
    font-size: 1.8rem !important;
}

/* Estrela nos Devocionais Anteriores (Mantém o posicionamento de Promessas) */
.devocional-item .star-btn {
    position: static !important;
    top: 15px !important;
    right: 15px !important;
}

/* Estado Ativo (Cor exata de Promessas) */
.star-btn.ativo, 
.star-btn.active,
.star-bible.ativo {
    color: var(--color-accent) !important;
    text-shadow: none !important;
}

/* Efeito Hover padrão do sistema */
.star-btn:hover {
    transform: scale(1.25);
    color: var(--color-accent);
}

/* ===================================================
    SISTEMA DE FONTE (HERANÇA)
=================================================== */
/* Garante que o versículo e textos acompanhem o aumento da fonte */
.bloco-leitura .versiculo-texto,
.bloco-leitura #meditacao-texto p,
.bloco-leitura .oracao-conteudo,
.bloco-leitura #referencia-biblica,
.devocional-item h3,
.devocional-item .item-resumo,
.devocional-item .versiculo-texto {
    font-size: inherit !important;
}

/* ===================================================
    SISTEMA DE FONTE DINÂMICA (HERANÇA TOTAL)
=================================================== */
/* Esta regra força todos os elementos de texto a obedecerem ao tamanho definido pelo JS */
.bloco-leitura .versiculo-texto,
.bloco-leitura #meditacao-texto p,
.bloco-leitura .oracao-conteudo,
.bloco-leitura #referencia-biblica,
.devocional-item h3,
.devocional-item .item-resumo,
.devocional-item .item-resumo p,
.devocional-item .item-conteudo-full,
.devocional-item .versiculo-texto {
    font-size: inherit !important;
}

/* ===================================================
    HEADER (CALENDÁRIO + TÍTULO COM ESTRELA)
=================================================== */
.devocional-header-flex {
    display: flex;
    flex-direction: column; /* Data em cima, container do título embaixo */
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

/* Novo container para alinhar Título e Estrela lado a lado */
.titulo-estrela-container {
    display: flex;
    align-items: center; 
    gap: 12px;
    flex-wrap: wrap;
}
.devocional-card h1 {
    font-size: 2rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 !important;
    text-align: left !important;
}

/* Estrela específica ao lado do título principal */
#star-principal {
    position: static !important;
    
}

/* ===================================================
    CALENDÁRIO
=================================================== */
.data-calendario {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-primary);
    color: #fff;
    padding: 7px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
}

.data-dia {
    font-size: 1rem;
    font-weight: 700;
}

.data-inferior {
    display: flex;
    gap: 4px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* ===================================================
    CAIXA DO VERSÍCULO
=================================================== */
.caixa-versiculo {
    background: rgba(59,108,183,0.08);
    border-left: 4px solid var(--color-primary);
    padding: 22px 25px;
    border-radius: 12px;
    margin: 30px 0;
}

.versiculo-texto {
    line-height: 1.7;
    font-style: italic;
    color: var(--color-text);
}

#referencia-biblica {
    margin-top: 12px;
    font-weight: 600;
    color: var(--color-primary);
}

/* ===================================================
    TEXTO DA MEDITAÇÃO
=================================================== */
#meditacao-texto {
    margin-top: 25px;
}

#meditacao-texto p {
    line-height: 1.9;
    margin-bottom: 24px;
    max-width: 65ch;
    color: var(--color-text);
}

#meditacao-texto p:first-child::first-letter {
    font-size: 2.8rem;
    font-weight: 700;
    float: left;
    margin-right: 8px;
    line-height: 1;
    color: var(--color-primary);
}

#meditacao-texto p:nth-child(2n) {
    margin-bottom: 28px;
}

/* ===================================================
    CAIXA DE ORAÇÃO
=================================================== */
.caixa-oracao {
    margin-top: 45px;
    border-radius: 12px;
    overflow: hidden;
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 6px 20px var(--color-shadow);
    background: rgba(59,108,183,0.08);
}

.oracao-titulo {
    background: var(--color-primary);
    color: white;
    padding: 12px 20px;
    font-weight: 600;
}

.oracao-conteudo {
    padding: 22px;
    line-height: 1.8;
    color: var(--color-text);
}

/* ===================================================
    ÍCONES DE ÁUDIO E LEITURA
=================================================== */
.read-icon, .audio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50% !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.read-icon {
    background: transparent !important;
    color: var(--color-primary);
    border: none;
    font-size: 0.9rem;
    margin-left: 8px;
    opacity: 0.5;
}

#meditacao-texto p:hover .read-icon { opacity: 1; }

body.dark .read-icon {
    background: var(--color-primary-light) !important;
    color: #ffffff;
}

.read-icon:hover {
    transform: scale(1.1);
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* ===================================================
    META E ANTERIORES
=================================================== */
.devocional-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.meta-discreto {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.devocional-item {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 22px 25px;
    margin-bottom: 25px;
    transition: 0.25s;
    box-shadow: 0 4px 12px var(--color-shadow);
}

.devocional-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px var(--color-shadow);
}

/* ===================================================
    RESPONSIVIDADE
=================================================== */
@media (max-width: 700px) {
    .devocional-main { margin: 30px auto; }
    .devocional-card { padding: 30px 22px; }
    .devocional-card h1 { font-size: 1.6rem; }
    .controle-header { top: 20px; right: 20px; gap: 8px; }
    .devocional-meta { flex-direction: column; gap: 10px; align-items: flex-start; }
}