/**
 * ================================================
 * ARCA ACADEMY - ESTILO BÍBLIA COMENTADA
 * Layout de Leitura Longa Inspirado em Livros Clássicos
 * Version: 1.0 | Janeiro 2026
 * ================================================
 * 
 * Este arquivo implementa o design "Bíblia Comentada":
 * - Leitura vertical contínua (sem cards)
 * - Linha do tempo como eixo narrativo
 * - Comentários pedagógicos integrados
 * - Hierarquia visual clara
 * - 100% Brandbook oficial
 */

/* ============================================
   VARIÁVEIS E FUNDAMENTOS
   ============================================ */
:root {
  /* Espaçamentos para leitura longa */
  --reading-max-width: 680px;
  --reading-margin: 80px;
  --section-spacing: 48px;
  --paragraph-spacing: 24px;
  --comment-spacing: 32px;
  
  /* Timeline */
  --timeline-width: 180px;
  --timeline-line-width: 2px;
  --timeline-marker-size: 20px;
  --timeline-marker-small: 16px;
  
  /* Tipografia de Leitura */
  --reading-line-height: 1.8;
  --reading-font-size: 16px;
  --heading-line-height: 1.3;
}

/* ============================================
   CONTAINER PRINCIPAL - ESTILO LIVRO
   ============================================ */
.biblia-container {
  background: var(--parchment, #F2EFE9);
  min-height: 100vh;
  font-family: var(--font-primary, 'Lato', sans-serif);
  color: rgba(27, 42, 65, 0.9); /* Deep Navy 90% */
}

/* Wrapper com margens largas */
.biblia-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--reading-margin);
}

/* ============================================
   CABEÇALHO - FIXO E DISCRETO
   ============================================ */
.biblia-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 239, 233, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(197, 157, 95, 0.3);
  padding: 1rem 0;
}

.biblia-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--reading-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.biblia-logo {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--deep-navy, #1B2A41);
  text-decoration: none;
}

.biblia-breadcrumb {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 0.875rem;
  color: rgba(27, 42, 65, 0.7);
}

.biblia-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--deep-navy);
}

/* ============================================
   TÍTULO PRINCIPAL - ESTILO FRONTISPÍCIO
   ============================================ */
.biblia-title-section {
  text-align: center;
  padding: 4rem 0 3rem;
  border-bottom: 2px solid rgba(197, 157, 95, 0.3);
  margin-bottom: var(--section-spacing);
}

.biblia-ornament {
  font-size: 2rem;
  color: var(--antique-gold, #C59D5F);
  margin-bottom: 1.5rem;
}

.biblia-title-main {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--deep-navy, #1B2A41);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  line-height: var(--heading-line-height);
}

.biblia-title-subtitle {
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-size: 1.125rem;
  color: rgba(27, 42, 65, 0.7);
  font-weight: 400;
}

/* ============================================
   LAYOUT DE LEITURA - DUAS COLUNAS
   ============================================ */
.biblia-reading-layout {
  display: grid;
  grid-template-columns: var(--timeline-width) 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

/* ============================================
   LINHA DO TEMPO VERTICAL
   ============================================ */
.biblia-timeline {
  position: sticky;
  top: 100px;
  height: fit-content;
  padding: 2rem 0;
}

.biblia-timeline-item {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 120px;
}

.biblia-timeline-item:last-child {
  margin-bottom: 0;
}

/* Linha vertical principal */
.biblia-timeline-item::before {
  content: '';
  position: absolute;
  left: 9px; /* Centraliza com o círculo */
  top: 0;
  bottom: -120px;
  width: var(--timeline-line-width);
  background: var(--deep-navy, #1B2A41);
}

.biblia-timeline-item:last-child::before {
  display: none;
}

/* Linha pontilhada para itens futuros */
.biblia-timeline-item.future::before {
  background: transparent;
  border-left: var(--timeline-line-width) dotted rgba(27, 42, 65, 0.3);
}

/* Marcadores (círculos) */
.biblia-timeline-marker {
  position: absolute;
  left: 0;
  top: 4px;
  width: var(--timeline-marker-size);
  height: var(--timeline-marker-size);
  border-radius: 50%;
  background: white;
  border: 3px solid var(--deep-navy, #1B2A41);
  z-index: 2;
}

/* Estado: ATUAL */
.biblia-timeline-item.current .biblia-timeline-marker {
  width: var(--timeline-marker-size);
  height: var(--timeline-marker-size);
  background: var(--antique-gold, #C59D5F);
  border-color: var(--antique-gold, #C59D5F);
  box-shadow: 0 0 0 4px rgba(197, 157, 95, 0.2);
}

/* Estado: COMPLETO */
.biblia-timeline-item.completed .biblia-timeline-marker {
  width: var(--timeline-marker-small);
  height: var(--timeline-marker-small);
  background: var(--deep-navy, #1B2A41);
  border-color: var(--deep-navy, #1B2A41);
  left: 2px;
  top: 6px;
}

/* Estado: PRÓXIMO */
.biblia-timeline-item.next .biblia-timeline-marker {
  width: var(--timeline-marker-small);
  height: var(--timeline-marker-small);
  background: white;
  border: 2px solid var(--deep-navy, #1B2A41);
  left: 2px;
  top: 6px;
}

/* Estado: FUTURO */
.biblia-timeline-item.future .biblia-timeline-marker {
  width: 14px;
  height: 14px;
  background: white;
  border: 1px dashed rgba(27, 42, 65, 0.4);
  left: 3px;
  top: 7px;
}

/* Label do marco */
.biblia-timeline-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--deep-navy, #1B2A41);
  text-align: left;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.biblia-timeline-item.future .biblia-timeline-label {
  color: rgba(27, 42, 65, 0.5);
  font-size: 0.625rem;
}

/* Virtude associada */
.biblia-timeline-virtue {
  font-size: 0.625rem;
  color: var(--terracotta, #A05C45);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.biblia-timeline-virtue i {
  font-size: 0.75rem;
}

/* Check mark para completos */
.biblia-timeline-item.completed .biblia-timeline-label::before {
  content: '✓ ';
  color: var(--antique-gold, #C59D5F);
  font-weight: 700;
}

/* Hover states */
.biblia-timeline-item:hover .biblia-timeline-marker {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

.biblia-timeline-item:hover .biblia-timeline-label {
  font-weight: 700;
}

/* ============================================
   CONTEÚDO PRINCIPAL - BLOCOS VERTICAIS
   ============================================ */
.biblia-content {
  max-width: var(--reading-max-width);
  padding-bottom: 4rem;
}

/* Capítulos */
.biblia-chapter {
  margin-bottom: var(--section-spacing);
}

.biblia-chapter-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--deep-navy, #1B2A41);
  border-bottom: 2px solid rgba(197, 157, 95, 0.3);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  line-height: var(--heading-line-height);
}

/* Seções */
.biblia-section {
  margin-bottom: 2rem;
}

.biblia-section-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep-navy, #1B2A41);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: var(--heading-line-height);
}

/* Subtítulos */
.biblia-subtitle {
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(27, 42, 65, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Parágrafos */
.biblia-paragraph {
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-size: var(--reading-font-size);
  line-height: var(--reading-line-height);
  color: rgba(27, 42, 65, 0.9);
  text-align: justify;
  margin-bottom: var(--paragraph-spacing);
}

.biblia-paragraph:last-child {
  margin-bottom: 0;
}

/* ============================================
   COMENTÁRIOS PEDAGÓGICOS
   ============================================ */
.biblia-comment {
  background: rgba(27, 42, 65, 0.05);
  border-left: 3px solid var(--antique-gold, #C59D5F);
  padding: 1rem 1.25rem;
  margin: var(--comment-spacing) 0;
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(27, 42, 65, 0.75);
}

.biblia-comment-title {
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--deep-navy, #1B2A41);
  font-style: normal;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.biblia-comment-title i {
  color: var(--antique-gold, #C59D5F);
}

/* ============================================
   SEPARADORES DE SEÇÃO
   ============================================ */
.biblia-separator {
  height: 1px;
  background: rgba(27, 42, 65, 0.2);
  margin: var(--section-spacing) 0;
  border: none;
}

.biblia-separator-ornamental {
  text-align: center;
  margin: var(--section-spacing) 0;
  color: rgba(197, 157, 95, 0.3);
  font-size: 1.5rem;
}

/* ============================================
   ORNAMENTOS CLÁSSICOS
   ============================================ */

/* Capitulares (Drop Caps) */
.biblia-drop-cap::first-letter {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--antique-gold, #C59D5F);
  float: left;
  line-height: 0.9;
  margin-right: 0.5rem;
  margin-top: 0.1rem;
}

/* Citações */
.biblia-quote {
  border-left: 4px solid var(--antique-gold, #C59D5F);
  background: rgba(27, 42, 65, 0.03);
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  margin: 2rem 0;
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(27, 42, 65, 0.85);
}

.biblia-quote-author {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-navy, #1B2A41);
  margin-top: 0.75rem;
  text-align: right;
}

.biblia-quote-author::before {
  content: '— ';
}

/* Filigranas decorativas */
.biblia-filigree {
  text-align: center;
  margin: 3rem 0;
}

.biblia-filigree svg {
  max-width: 200px;
  height: auto;
  opacity: 0.3;
  fill: var(--antique-gold, #C59D5F);
}

/* ============================================
   BARRAS DE PROGRESSO - ANTIQUE GOLD
   ============================================ */
.biblia-progress-section {
  margin: 3rem 0;
  text-align: center;
}

.biblia-progress-label {
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-navy, #1B2A41);
  margin-bottom: 0.75rem;
  display: block;
}

.biblia-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(27, 42, 65, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.biblia-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--antique-gold, #C59D5F) 0%, #b08c52 100%);
  transition: width 0.6s ease;
  position: relative;
}

.biblia-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.biblia-progress-percentage {
  font-size: 0.75rem;
  color: rgba(27, 42, 65, 0.6);
  margin-top: 0.5rem;
}

/* ============================================
   LISTAS
   ============================================ */
.biblia-list {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.biblia-list li {
  font-family: var(--font-primary, 'Lato', sans-serif);
  font-size: var(--reading-font-size);
  line-height: var(--reading-line-height);
  color: rgba(27, 42, 65, 0.9);
  margin-bottom: 0.75rem;
}

.biblia-list li::marker {
  color: var(--antique-gold, #C59D5F);
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  :root {
    --timeline-width: 120px;
    --reading-margin: 40px;
  }
  
  .biblia-title-main {
    font-size: 2.5rem;
  }
  
  .biblia-chapter-title {
    font-size: 1.75rem;
  }
  
  .biblia-reading-layout {
    gap: 2rem;
  }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  :root {
    --reading-margin: 20px;
    --reading-font-size: 15px;
  }
  
  /* Linha do tempo muda para horizontal no topo */
  .biblia-reading-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .biblia-timeline {
    position: relative;
    top: 0;
    display: flex;
    overflow-x: auto;
    padding: 1rem 0;
    margin-bottom: 2rem;
    gap: 1.5rem;
  }
  
  .biblia-timeline-item {
    flex: 0 0 auto;
    padding-left: 0;
    padding-top: 2rem;
    margin-bottom: 0;
    min-width: 100px;
  }
  
  .biblia-timeline-item::before {
    left: 0;
    right: -1.5rem;
    top: 9px;
    bottom: auto;
    width: auto;
    height: var(--timeline-line-width);
  }
  
  .biblia-timeline-marker {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  
  .biblia-timeline-label {
    text-align: center;
    font-size: 0.625rem;
  }
  
  .biblia-timeline-virtue {
    justify-content: center;
    font-size: 0.5rem;
  }
  
  .biblia-title-main {
    font-size: 2rem;
  }
  
  .biblia-chapter-title {
    font-size: 1.5rem;
  }
  
  .biblia-section-title {
    font-size: 1.25rem;
  }
  
  .biblia-paragraph {
    text-align: left;
  }
  
  .biblia-header-content {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .biblia-breadcrumb {
    order: 3;
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   IMPRESSÃO
   ============================================ */
@media print {
  .biblia-container {
    background: #F2EFE9 !important;
  }
  
  .biblia-header {
    position: relative;
    border-bottom: 2px solid var(--deep-navy);
  }
  
  .biblia-timeline {
    display: none; /* Oculta timeline na impressão */
  }
  
  .biblia-reading-layout {
    grid-template-columns: 1fr;
  }
  
  .biblia-content {
    max-width: 100%;
  }
  
  .biblia-chapter {
    page-break-before: always;
  }
  
  .biblia-comment {
    page-break-inside: avoid;
  }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

/* Foco visível para navegação por teclado */
.biblia-timeline-item:focus-within .biblia-timeline-marker {
  outline: 3px solid var(--antique-gold);
  outline-offset: 2px;
}

/* Modo de alto contraste */
@media (prefers-contrast: high) {
  .biblia-timeline-marker {
    border-width: 4px;
  }
  
  .biblia-comment {
    background: rgba(27, 42, 65, 0.1);
    border-left-width: 5px;
  }
}

/* Preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}