/*
Theme Name: Twenty Twenty Child
Template: twentytwenty
Description: Tema filho customizado para o site Thembi Rosa.
Version: 1.0.0
Text Domain: twentytwenty-child
*/

.grid-projetos-home {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px 0 !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
}

.projeto-thumb {
    width: 100%;
    aspect-ratio: 4 / 3; 
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    transition: opacity 0.3s ease;
}

.item-projeto a:hover .projeto-thumb {
    opacity: 0.8;
}

.item-projeto a {
    text-decoration: none;
    color: #333;
    display: block;
}

.projeto-titulo {
    margin-top: 8px !important; 
    margin-bottom: 0 !important; 
    padding: 0;
    font-size: 0.95rem;
    font-weight: normal; 
    text-transform: uppercase;
    letter-spacing: 1px; 
    text-align: left;
}

@media (max-width: 768px) {
    .grid-projetos-home {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}




.home .entry-header {
    display: none !important;
}
.home .post-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.home .wp-block-group {
    margin-top: 0 !important;
}

/* 2. Caso queira remover o título de OUTRAS páginas também (ex: Sobre), 
descomente as linhas abaixo (tire o /* do início e o do fim) */
/*
.page .entry-header { display: none !important; }
.page .post-inner { padding-top: 0 !important; }
*/


.toggle-text {
    display: none !important;
}
/* --- MENU EXPANDIDO (OVERLAY) - CÓDIGO NOVO E DEFINITIVO --- */

/* Espaçamento entre os itens */
.menu-modal .modal-menu li {
    list-style: none;
    margin-bottom: 0;
}

/* Estilo base dos links (80% opacidade, sem sublinhado) */
.menu-modal .modal-menu a {
    font-size: 1.6rem !important; /* Tamanho reduzido (era 2rem) */
    text-transform: uppercase;
    letter-spacing: 2px;
    background-image: none !important; /* Tira o sublinhado via imagem (truque do tema) */
    transition: color 0.3s ease;
}

/* Estilo ao passar o mouse (100% opacidade, sem sublinhado) */
.menu-modal .modal-menu a:hover,
.menu-modal .modal-menu a:focus,
.menu-modal .modal-menu a:active {
    background-image: none !important;
}

a {
	text-decoration: none !important;
    color: #333 !important;
    opacity: 0.8; /* 80% de opacidade */
}
a:hover {
    opacity: 1; /* 100% de opacidade */
    color: #e22658 !important;
    text-decoration: none !important;
}

/* --- COMPORTAMENTO DOS ÍCONES DO MENU (TOGGLE, BUSCA E FECHAR) --- */

.nav-toggle,
.search-toggle,
.close-nav-toggle {
    opacity: 0.8 !important;
    color: #333 !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}

.nav-toggle:hover,
.search-toggle:hover,
.close-nav-toggle:hover {
    opacity: 1 !important;
    color: #e22658 !important;
}

/* Força o desenho do ícone (SVG) a usar a mesma cor do botão */
.nav-toggle svg,
.search-toggle svg,
.close-nav-toggle svg,
.nav-toggle .toggle-icon,
.search-toggle .toggle-icon,
.close-nav-toggle .toggle-icon {
    fill: currentColor !important; 
    color: inherit !important;
}

/* --- REDUZIR O TAMANHO DO FORMULÁRIO DE BUSCA --- */

/* Reduz o tamanho do campo de texto onde digita a busca */
.search-modal .search-field {
    font-size: 1.5rem !important; /* Tamanho bem menor e visível */
    padding: 1rem !important;
    height: 50px !important;
    width: 100%;
    max-width: 600px; /* Impede que o campo fique esticado de ponta a ponta em monitores grandes */
    margin: 25px auto !important;
    border-bottom: 1px solid #ddd !important; /* Linha sutil embaixo */
}

/* Reduz o texto da instrução (ex: "Pesquisar por:") */
.search-modal .search-text {
    font-size: 0.9rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Centraliza o formulário na tela */
.search-modal .section-inner {
    max-width: 600px !important;
}

/* --- COMPORTAMENTO DO BOTÃO SUBMIT E FECHAR DA BUSCA --- */

.search-submit,
.close-search-toggle {
    opacity: 0.8 !important;
    color: #333 !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}

.search-submit:hover,
.close-search-toggle:hover {
    opacity: 1 !important;
    color: #e22658 !important;
}

/* Garante que o ícone dentro dele (se for SVG) herde a cor */
.search-submit svg,
.close-search-toggle svg,
.search-submit .toggle-icon,
.close-search-toggle .toggle-icon {
    fill: currentColor !important;
    color: inherit !important;
}




/* Container do Banner - Ocupa 100% da tela */
.hero-fade-banner {
    position: relative;
    width: 100vw !important; /* Força a largura total da viewport */
    max-width: 100vw !important;
    height: 100vh; /* Altura total da tela */
    overflow: hidden;
    background-color: #000;
    /* O truque de mágica para ignorar as margens do tema: */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.spectra-is-root-container {
  margin-top: 0 !important;
}

/* Evita que a barra de rolagem horizontal apareça por causa do 100vw */
body, html {
    overflow-x: hidden !important;
}

/* Cada slide individual */
.hero-fade-banner .hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Começa invisível */
    animation: fadeLoop 25s infinite; /* 25s total = 5s por imagem */
}

/* Sincronizando a entrada de cada imagem com um delay */
.hero-fade-banner .hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-fade-banner .hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-fade-banner .hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-fade-banner .hero-slide:nth-child(4) { animation-delay: 15s; }
.hero-fade-banner .hero-slide:nth-child(5) { animation-delay: 20s; }

/* A animação de Fade In e Fade Out */
@keyframes fadeLoop {
    0%   { opacity: 0; } /* Começa apagada */
    8%   { opacity: 1; } /* Aparece rápido (suavemente) */
    20%  { opacity: 1; } /* Fica visível por um tempo */
    28%  { opacity: 0; } /* Desaparece suavemente */
    100% { opacity: 0; } /* Espera o ciclo reiniciar */
}

/* Responsividade: No celular, diminui a altura para não ocupar a tela toda */
@media (max-width: 768px) {
    .hero-fade-banner {
        height: 60vh; 
    }
}

/* Remove todo o espaço superior entre o cabeçalho e o conteúdo na Home */
.home .site-content,
.home .post-inner,
.home .entry-content,
.home .wp-block-html {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Garante que o cabeçalho não tenha margem inferior */
.header-footer-group {
    margin-bottom: 0 !important;
}


/* --- LIMPEZA E AJUSTE DO RODAPÉ --- */

/* Esconde a área de widgets caso fique algum resquício */
.footer-nav-widgets-wrapper {
    display: none !important;
}

/* Reduz o tamanho do texto de direitos autorais e do botão Ir ao Topo */
.footer-bottom,
.footer-credits,
.footer-copyright,
.to-the-top {
    font-size: 1rem !important; /* Tamanho bem discreto */
    letter-spacing: 0.5px !important;
}

/* Ajusta o botão "Ir ao topo" para herdar o comportamento de link */
.to-the-top {
    opacity: 0.8 !important;
    color: #333 !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}

.to-the-top:hover {
    opacity: 1 !important;
    color: #e22658 !important;
}

/* Alinha os itens do rodapé de forma elegante */
.footer-bottom {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border-top: 1px solid #f0f0f0; /* Linha sutil separando o conteúdo */
}

/* Garante que o texto e o botão fiquem em linhas opostas */
.footer-bottom .section-inner {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}



/* --- CORRIGIR FUNDO NAS PÁGINAS INDIVIDUAIS --- */

/* 1. Garante que o cabeçalho fique branco e isolado no topo */


/* 2. Aplica a cor creme imediatamente na área de conteúdo (abaixo do cabeçalho) */
/* (Substitua #FAFAFA pelo código exato do seu creme, se for diferente) */
.site-content,
.archive-header,
.posts-navigation,
.entry-header,
.post-inner,
.entry-content {
    background-color: #fff !important; 
}

/* 3. Remove qualquer sombra ou borda que o tema tenta usar para separar */
.site-content {
    box-shadow: none !important;
}

/* 4. Ajusta a cor do título do post para não ficar sumindo no fundo */
.single .entry-header .entry-title,
.page .entry-header .entry-title {
    color: #333 !important;
}


.featured-media, .featured-media-inner {
    background-color: #FFFFFF !important;
}




/* --- AJUSTE DO TÍTULO E ESPAÇAMENTO --- */

/* 1. Define o tamanho do título para 3rem */
.single .entry-title,
.page .entry-title {
    font-size: 3rem !important;
}

/* 2. Reduz o padding/margin acima e abaixo do título */
.single .entry-header,
.page .entry-header {
    padding-top: 2rem !important;   /* Espaço acima (reduza se quiser mais colado) */
    padding-bottom: 2rem !important; /* Espaço abaixo (reduza se quiser mais colado) */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Remove espaçamento extra que o tema coloca no próprio elemento H1 */
.single .entry-title,
.page .entry-title {
    margin-top: 0 !important;
    margin-bottom: 1rem !important; /* Espaço entre o título e o início do texto */
}

/* 4. Remove o espaço extra do topo do conteúdo do post */
.single .post-inner,
.page .post-inner {
    padding-top: 0 !important;
}

/* 2. Remove a data e toda a área de meta informações (autor, data, categoria) do topo do post */
.single .post-meta-wrapper,
.single .post-meta-single {
    display: none !important;
}




.featured-media::before{
    background-color: transparent !important;
}




/* --- GRID DE PROJETOS --- */
.grid-projetos-home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 40px 0;
    padding: 0 5%;
    box-sizing: border-box;
}
.projeto-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    transition: opacity 0.3s ease;
}
.item-projeto a:hover .projeto-thumb { opacity: 0.8; }
.item-projeto a {
    text-decoration: none;
    color: #333;
    display: block;
}
.projeto-titulo {
    margin-top: 8px;
    margin-bottom: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}
@media (max-width: 768px) {
    .grid-projetos-home {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- COMPORTAMENTO PADRÃO DOS LINKS --- */
a {
    text-decoration: none !important;
    /*color: #333 !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;*/
}
a:hover {
    opacity: 1;
    /*color: #e22658 !important;*/
}




.single-projetos .entry-meta,
.single-projetos .ast-single-post-featured-section {
    display: none !important;
}

/* --- LAYOUT DA PÁGINA DE PROJETOS --- */
.projeto-container {
    max-width: 900px; /* Largura ideal para leitura e fotos */
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Título */
.projeto-container .entry-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: left;
}

/* Espaçamento entre os blocos (vídeo, texto, galeria) */
.project-video,
.featured-image,
.project-text,
.project-gallery,
.project-credits {
    margin-bottom: 40px;
}

/* Legenda do vídeo */
.video-caption {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

/* Créditos */
.project-credits {
    font-size: 0.85rem;
    color: #999;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* Ajusta a galeria nativa do WP para não ter espaço demais */
.project-gallery .gallery-item {
    margin-bottom: 20px;
}
.project-gallery img {
    width: 100%;
    height: auto;
}




/* --- CORRIGINDO ESPAÇO DO TOPO E LARGURA DO VÍDEO --- */

/* 1. Remove o padding gigante que o Astra coloca no topo das páginas */
body.single-projetos #primary,
body.single-projetos .site-main,
body.single-projetos .ast-article-single {
    padding-top: 0 !important;
    margin-top: 20px !important; /* Espaço justinho abaixo do cabeçalho */
}

/* 2. Reduz o padding superior do nosso container */
.projeto-container {
    padding-top: 0 !important;
}

/* 3. Vídeo com 100% de largura e proporção perfeita */
.project-video .video-embed,
.project-video .video-embed iframe {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9; /* Mantém a proporção de tela do vídeo */
    height: auto !important;
}

/* 4. Foto destacada também com 100% de largura (para padronizar com o vídeo) */
.featured-image img {
    width: 100% !important;
    height: auto !important;
}






/* --- ESTILO DA GALERIA NATIVA NO PROJETO --- */
.project-content-wrapper .wp-block-gallery {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Ajusta as imagens dentro da galeria */
.project-content-wrapper .wp-block-gallery .blocks-gallery-item {
    margin: 0 !important;
}

.project-content-wrapper .wp-block-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantém um padrão de recorte bonito */
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.project-content-wrapper .wp-block-gallery img:hover {
    opacity: 0.85;
}



.entry-header .entry-title .ano {
    font-size: 0.7em;
}

.entry-header .entry-title .subtitulo {
    font-size: 0.7em;
    color: #555;
}


.gbtn {
  --gnext-bg: rgba(0, 0, 0, 0.4);
  --gnext-bg-hover: rgba(0, 0, 0, 0.7);
  --gnext-arrow-color: #ffffff;

  background-color: var(--gnext-bg);
  transition: background-color 0.2s ease;
  padding: 0;
}

.gbtn:hover {
  background-color: var(--gnext-bg-hover);
}

.gbtn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: var(--gnext-arrow-color);
}

.gbtn svg path {
  fill: var(--gnext-arrow-color);
}