/* Font Abril Fatface, Droid Sans & Cinzel https://www.google.com/fonts/specimen/Abril+Fatface https://www.google.com/fonts/specimen/Droid+Sans https://www.google.com/fonts/specimen/Cinzel ----------------------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface:400);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/* Removendo importação manual da Cinzel - já está sendo carregada via Google Fonts no HTML */
/* VARIABLES BASE ----------------------------------------------------- */
/* ICON PATH ================================================== */
/* TYPEFACE ================================================== */
/* COLOR SCHEME ================================================== */
/* UI COLOR ================================================== */
/* UI ================================================== */
/* Animation ================================================== */
/* GFX ================================================== */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/abrilfatface/v23/zOL64pLDlL1D99S8g8PtiKchq-dmiA.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSaA.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1Yg.ttf) format('truetype');
}
/* Fonte Cinzel removida - já está sendo carregada via Google Fonts no HTML */
/* Font Base ----------------------------------------------------- */
.tl-timeline {
  font-family: 'Droid Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3em;
}
.tl-timeline h1, .tl-timeline h2, .tl-timeline h3, .tl-timeline h4, .tl-timeline h5, .tl-timeline h6 {
  font-family: 'Abril Fatface', cursive;
  text-transform: none;
  font-weight: 700;
  font-size: 46px;
  line-height: 46px;
}
.tl-timeline h2.tl-headline-title {
  font-family: 'Cinzel', serif;  /* Alteração para usar Cinzel */
  font-size: 58px;
  line-height: 58px;
}
.tl-timeline p {
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  line-height: 1.3em;
}
.tl-timeline ul {
  font-family: 'Droid Sans', sans-serif;
}
.tl-timeline .tl-media .tl-media-wikipedia h4 a, .tl-timeline .tl-media h4, .tl-timeline .tl-media h4 a {
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
}
.tl-timeline .tl-caption, .tl-timeline .tl-credit {
  font-family: 'Droid Sans', sans-serif;
}
.tl-timeline .vcard {
  font-family: 'Droid Sans', sans-serif !important;
  font-weight: normal !important;
}
.tl-timeline .tl-slidenav-next, .tl-timeline .tl-slidenav-previous, .tl-timeline .tl-message, .tl-timeline .tl-timegroup-message {
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  text-transform: none;
}
.tl-timeline .tl-slidenav-next .tl-slidenav-title, .tl-timeline .tl-slidenav-previous .tl-slidenav-title, .tl-timeline .tl-message .tl-slidenav-title, .tl-timeline .tl-timegroup-message .tl-slidenav-title {
  line-height: 1.3em !important;
}
.tl-timeline .tl-headline-date, .tl-timeline h3.tl-headline-date {
  font-family: 'Droid Sans', sans-serif !important;
  font-weight: normal !important;
  text-transform: none !important;
}
.tl-timeline .tl-headline-date small, .tl-timeline h3.tl-headline-date small {
  font-weight: normal !important;
}
.tl-timeline .tl-timenav-slider {
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
}
.tl-timeline .tl-timenav-slider h2.tl-headline {
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  text-transform: none;
}
.tl-timeline .tl-timenav-slider .tl-timeaxis {
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  text-transform: none;
}
.tl-timeline .tl-menubar {
  font-family: 'Droid Sans', sans-serif;
}
.tl-timeline blockquote, .tl-timeline blockquote p {
  font-family: 'Droid Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
}
input[type="text"].editor-headline {
  font-family: 'Cinzel', serif;  /* Alteração para usar Cinzel */
  text-transform: none;
  font-weight: 700;
  font-size: 46px;
  line-height: 46px;
}

/* ================================================== */
/* MUDANÇAS VISUAIS DA TIMELINE - CORES E VISIBILIDADE */
/* ================================================== */

/* Mudar a cor cinza da barra de timeline para um tom bem mais escuro */
.tl-timenav {
  background-color: #2a1a0a !important;
  border-top: 2px solid #1a0a00 !important;
}

/* Seletores mais específicos para forçar a mudança de cor */
.tl-timeline .tl-timenav {
  background-color: #2a1a0a !important;
  border-top: 2px solid #1a0a00 !important;
}

.tl-timeline .tl-timenav-slider .tl-timenav {
  background-color: #2a1a0a !important;
  border-top: 2px solid #1a0a00 !important;
}

/* Forçar cor com seletores ainda mais específicos */
div.tl-timenav {
  background-color: #2a1a0a !important;
  border-top: 2px solid #1a0a00 !important;
}

div.tl-timeline div.tl-timenav {
  background-color: #2a1a0a !important;
  border-top: 2px solid #1a0a00 !important;
}

/* Linha central da timeline */
.tl-timenav .tl-timenav-line {
  width: 2px !important;
  background-color: #ffffff !important;
}

.tl-timeline .tl-timenav .tl-timenav-line {
  width: 2px !important;
  background-color: #ffffff !important;
}

/* Elementos da linha de tempo */
.tl-timenav .tl-timenav-line:before, 
.tl-timenav .tl-timenav-line:after {
  color: #ffffff !important;
}

.tl-timeline .tl-timenav .tl-timenav-line:before, 
.tl-timeline .tl-timenav .tl-timenav-line:after {
  color: #ffffff !important;
}

/* Marcadores de eventos - tornar mais visíveis com transparência */
.tl-timemarker .tl-timemarker-timespan {
  background-color: #3a2a1a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  opacity: 0.85 !important;
}

/* Linha do marcador */
.tl-timemarker .tl-timemarker-line-left {
  width: 3px !important;
}

/* Container do conteúdo do marcador - com transparência */
.tl-timemarker .tl-timemarker-content-container {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid #3a2a1a !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  backdrop-filter: blur(5px) !important;
}

/* Texto do marcador */
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p {
  color: #2d3748 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  white-space: normal !important;
  font-style: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Conteúdo do timespan - com transparência */
.tl-timemarker .tl-timemarker-timespan .tl-timemarker-timespan-content {
  background: linear-gradient(135deg, #3a2a1a, #2a1a0a) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  opacity: 0.85 !important;
}

/* Hover no timespan */
.tl-timemarker:hover .tl-timemarker-timespan .tl-timemarker-timespan-content {
  background: linear-gradient(135deg, #2a1a0a, #1a0a00) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  opacity: 1 !important;
}

/* Marcador ativo */
.tl-timemarker.tl-timemarker-active .tl-timemarker-timespan .tl-timemarker-timespan-content {
  background: linear-gradient(135deg, #1a0a00, #0a0000) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  opacity: 1 !important;
}

/* Parágrafos do headline */
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p {
  color: #2d3748 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* Ícones dos marcadores */
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class^="tl-icon-"],
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class*=" tl-icon-"] {
  color: #3a2a1a !important;
  font-size: 18px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Hover nos ícones */
.tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class^="tl-icon-"],
.tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class*=" tl-icon-"] {
  color: #2a1a0a !important;
  transform: scale(1.1) !important;
}

/* Personalizar o ícone/thumbnail da timeline */
.tl-timemarker-media-container {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6f/Spain_flag_300.png'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 100px; 
  height: 100px;
  border-radius: 50%; 
}

/* Marcador ativo - mostrar conteúdo */
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
  display: block !important;
}

/* Background geral da timeline - com transparência */
.tl-timenav, .tl-text, .tl-slider-container-mask, .tl-timemarker-timespan, .tl-timeaxis-background {
  background-color: rgba(255, 248, 220, 0.6) !important;
}

/* Aplicar transparência específica aos elementos da timeline */
.tl-timeline {
  opacity: 0.95 !important;
}

.tl-timeline .tl-timenav {
  opacity: 1 !important;
}

.tl-timeline .tl-timemarker {
  opacity: 0.9 !important;
}

.tl-timeline .tl-timemarker:hover {
  opacity: 1 !important;
}

.tl-timeline .tl-timemarker.tl-timemarker-active {
  opacity: 1 !important;
}