/**
	Theme Name:  Maniva Studio 2025
	Author:       Wow-Company
	Author URI:   https://wow-estore.com
	Theme URI: 	  https://themes.wow-company.com/iknowledgebase-theme/
	Description:  Easy, fast, minimalistic, responsive, and mobile-friendly WordPress Theme for creating Knowledge Base, Helpdesk, Wiki, and FAQ websites. Manage the display of categories on the main page of the site. Breadcrumbs for easy site navigation. Custom widget to display the current navigation in a category and in a separate post.
	Version:      1.3.8
	Tested up to: 6.6
	Requires PHP: 5.6
	License:      GPLv2 or later
	License URI:  http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain:  iknowledgebase
	Domain Path:  /languages/
	Tags:         blog, education, entertainment, two-columns, right-sidebar, left-sidebar, custom-logo, custom-menu, theme-options, threaded-comments, translation-ready

	Note: The CSS files are loaded from assets/css/ folder.
*/

/* Desktop */
.artigos-assinantes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 6px;
    align-items: center; /* centraliza verticalmente */
}

/* Coluna esquerda do título */
.artigos-titulo{
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    color: #d40000;
    font-size: 3rem;
}

/* Lista de artigos - horizontal */
.lista-artigos {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.artigo-item {
    flex: 0 0 auto;
    width: 250px;
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

.categorias-section {
  width: 100%;
  background-color: #f8f9fa; /* cinza claro de fundo */
	 z-index: 2;
}

.main-categorias-container {
  max-width: 900px;
  margin: auto;
}

.categoria-lista a {
  min-width: 120px; /* garante botões iguais */
  text-align: center;
}


.favorito-botao {
    background-color: #f1f1f1;
    color: gray;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	margin-top:10px;
    margin-left: 0;          /* alinha à esquerda */
    margin-right: auto;      /* empurra para a esquerda se estiver em container flex */
	width: 100%;
}
.favorito-botao-top{
    background-color: #f1f1f1;
    color: black;
    border: none;
    padding:7px 5px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin-left: 0;          /* alinha à esquerda */
    margin-right: auto;      /* empurra para a esquerda se estiver em container flex */
}
.favorito-botao-lista {
    background-color: #f1f1f1;    /* fundo cinza */
    color: gray;                /* texto preto */
    border: none;
    padding: 10px 16px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: block;
    text-align: left;
    text-decoration: none;         /* remove sublinhado */
    margin: 10px 0;
    width: 100%;
}

.favorito-botao-lista:hover,
.favorito-botao-lista:focus {
    background-color: #b3b3b3;     /* tom mais escuro no hover */
    transform: translateY(-1px);
    text-decoration: none;         /* garante que continue sem sublinhado */
    outline: none;
	color: gray;
}

.favorito-botao-lista:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    .favorito-botao-lista {
        font-size: 0.95rem;
        padding: 8px 14px;
    }
}


.favorito-botao-top a{color:black}
.favorito-botao:hover,
.favorito-botao:focus {
    background-color: #005177; /* azul mais escuro */
    outline: none;
    text-decoration: none;
}


.post-category {
    padding: 4px 10px;
    font-size: 0.75rem;
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.cat-id-1  { background-color: #e74c3c; }
.cat-id-2  { background-color: #3498db; }
.cat-id-3  { background-color: #2ecc71; }
.cat-id-4  { background-color: #9b59b6; }
.cat-id-5  { background-color: #f1c40f; }
.cat-id-6  { background-color: #e67e22; }
.cat-id-7  { background-color: #1abc9c; }
.cat-id-8  { background-color: #34495e; }
.cat-id-9  { background-color: #e84393; }
.cat-id-10 { background-color: #95a5a6; }
.cat-id-11 { background-color: #16a085; }
.cat-id-12 { background-color: #27ae60; }
.cat-id-13 { background-color: #2980b9; }
.cat-id-14 { background-color: #8e44ad; }
.cat-id-15 { background-color: #f39c12; }
.cat-id-16 { background-color: #d35400; }
.cat-id-17 { background-color: #c0392b; }
.cat-id-18 { background-color: #7f8c8d; }
.cat-id-19 { background-color: #bdc3c7; }
.cat-id-20 { background-color: #2c3e50; }


.img-adjusted {
        height: auto; /* Deixa a altura ajustada automaticamente */
        max-height: 350px; /* Define um limite máximo para a altura das imagens */
        object-fit: cover; /* Garante que a imagem cubra a área da div sem distorcer */
    }
		.busca-avancada {
  padding: 20px;
  background-color: #f1f1f1;
  border-radius: 8px;
  margin-bottom: 30px;
}

.tipos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.tipo-btn {
  background-color: #444;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tipo-btn:hover {
  background-color: #666;
}

.categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.cat-botao {
  background-color: #0073aa;
  color: white;
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  width: 100%;
  max-width: 200px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.cat-botao:hover {
  background-color: #005177;
}

.oculto {
  display: none;
}

.musicas-assinantes{background-color: #dee5ea;}
.artigos-assinantes{background-color: #e6eaed;}
.artigos-destaques{background-color: #e6eaed;}
.artigos-apoio{background-color: #f4f2f2;}

/* Container geral do vídeo */
.video-section {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
}

#destaque video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 🎞️ Base do Super 8 */
  filter: brightness(0.5) contrast(0.5) saturate(0.5) sepia(0.8);
}

/* 🎥 Overlay granulado (grão do filme / linhas VHS) */
#destaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      transparent 2px,
      transparent 3px
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 2px,
      transparent 3px
    );
  mix-blend-mode: overlay;
  opacity: 1.5;
  pointer-events: none;
  z-index: 3;
  animation: vhsNoise 1.1s infinite;
}

/* Gradiente base do céu */
#destaque::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    130deg,
    #ffffff,   /* branco (nuvens iluminadas) */
    #cde7ff,   /* azul claro */
    #5ca0f2,   /* azul médio */
    #f78da7,   /* rosa avermelhado */
    #ff4e50    /* vermelho quente */
  );
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
  animation: skyShift 12s ease-in-out infinite alternate;
}

/* ✨ Animação suave da luz do céu */
@keyframes skyShift {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.1) saturate(1.3); }
  100% { filter: brightness(0.95) saturate(0.9); }
}

/* 🔁 Animação do ruído VHS */
@keyframes vhsNoise {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(0, 1px); }
}

/* 🔴 Efeito VHS de cores RGB deslocadas (fantasma de cor) */
#destaque .vhs-rgb::before,
#destaque .vhs-rgb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
  z-index: 4;
}

#destaque .vhs-rgb::before {
  filter: hue-rotate(15deg) contrast(1.1);
  transform: translateX(2px);
}

#destaque .vhs-rgb::after {
  filter: hue-rotate(-15deg) contrast(1.1);
  transform: translateX(-2px);
  animation: rgbShift 0.12s infinite;
}

@keyframes rgbShift {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
}





/* Moldura de imagens */
.imageCima, .imageBaixo {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
}

.imageCima { top: 0; }
.imageBaixo { bottom: 0; }

.imageCima img,
.imageBaixo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Texto sobre o vídeo */
#destaque .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* centralizado vertical */
  text-align: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  transform: translateY(-10%); /* sobe o bloco */
}


.titulo-destaque {
  font-family: 'Lobster', cursive;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  margin: 10px 0;           /* espaço entre os títulos */
}

.titulo-descricao {
  font-family: 'Pacifico', cursive;
  font-size: 1.5rem;
  color: #fff;              /* cor diferente para contraste */
  margin: 5px 0;
}

/* Container do artista do mês */
.artista-do-mes {
  display: flex;
  flex-wrap: wrap; /* garante responsividade no mobile */
  align-items: stretch;
  margin: 1rem 0;
  border-radius: 6px;
  overflow: hidden;
}



.single-musica .musica-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1000px;
  align-items: center;
}

.single-musica .musica-thumb {
  flex: 1 1 45%;
  text-align: center;
}

.single-musica .musica-thumb img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.single-musica .musica-content {
  flex: 1 1 50%;
  background: #f7f7f7;
  padding: 2rem;
  border-radius: 10px;
}

.single-musica .musica-titulo {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.single-musica .musica-autor {
  color: #555;
  margin-bottom: 1.5rem;
  font-style: italic;
}

@media (max-width: 768px) {
  .single-musica .musica-container {
    flex-direction: column;
  }

  .single-musica .musica-content {
    padding: 1rem;
  }
}

/* Seção principal */
.secao-artista {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  background-color: #fff;
}

/* Container centralizado e com largura máxima */
.artista-do-mes {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1100px; /* ligeiramente maior */
  width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}

/* Imagem */
.artista-imagem {
  flex: 1.2; /* aumenta o espaço ocupado pela imagem */
  min-width: 320px;
  text-align: center;
}

.artista-imagem img {
  width: 100%;
  max-width: 700px; /* imagem maior no desktop */
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* Conteúdo */
.artista-conteudo {
  flex: 1;
  min-width: 280px;
  color: #222;
  position: relative;
  z-index: 2;
}

.artista-conteudo h4 {
  font-size: 1rem;
  color: #888;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.artista-conteudo h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #222;
}

.artista-conteudo p {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 20px;
}

.botao-artista {
  display: inline-block;
  background-color: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.botao-artista:hover {
  background-color: #444;
}

/* Responsividade */
@media (max-width: 768px) {
  .artista-do-mes {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .artista-imagem,
  .artista-conteudo {
    width: 100%;
    max-width: 100%;
  }

  .artista-imagem img {
    max-width: 100%; /* adapta ao mobile */
  }

  .artista-conteudo {
    margin-top: 20px;
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .artista-conteudo h2 {
    font-size: 1.6rem;
  }
}




/* 🔹 Responsivo */
@media (max-width: 768px) {
  #destaque {
    height: 40vh; /* aumenta um pouco em telas menores */
  }
}

@media (min-width: 1200px) {
  #destaque {
    height: 70vh; /* mais estreito em telas grandes */
  }
}



/* Mobile */
@media (max-width: 768px) {
    .artigos-assinantes-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .artigos-titulo {
        max-width: 100%;
        border-right: none;
        padding-right: 0;
        margin-bottom: 15px;
    }

    .lista-artigos {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-x: visible;
        gap: 15px;
    }

    .artigo-item {
        width: 100%;
        max-width: 350px;
    }
}


