/* ============================================================
   THEMING POR EDIÇÃO (dentro do tema)
   - main.css agora usa var(--brand,#0d2ec7) e var(--brand2,#e5005b).
   - functions.php define --brand/--brand2/--ed-bege por edição (body.edicao-{ano}).
   - Evergreen (sem body.edicao) usa o fallback = azul/rosa da 4ª (atual).
   - Cores editáveis por edição no wp-admin (ACF edicao_cor/edicao_cor_2).
   ============================================================ */

/* Alias: elementos próprios das edições usam --edicao-* → mapeia pro --brand do tema. */
body.edicao {
    --edicao-cor: var(--brand, #742545);
    --edicao-cor-2: var(--brand2, #2f7d64);
    --edicao-bg: var(--ed-bege, #d0d9a2);
}

/* Fundo bege da identidade nos cards de seção da capa. */
body.edicao .edicao-secao-card { background: var(--ed-bege) !important; }

/* Botão "Ver a edição completa" (hub /edicoes/ e single edicao-anterior). */
.eb-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--brand, #742545); color: #fff !important; text-decoration: none; font-weight: 700; padding: 10px 20px; border-radius: 10px; transition: opacity .18s; }
.eb-btn:hover { opacity: .9; }
body.edicao .single-edicao-anterior .content-page h1,
body.edicao .content-page-section h1 { color: var(--brand); }

/* Barra de contexto de edição (faixa acima do menu) — verde da mostra. */
.edicao-barra { background: var(--edicao-cor-2, #2f7d64); }
.edicao-barra .container { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 8px 16px; font-size: 14px; }
.edicao-barra .eb-txt { color: #fff; }
.edicao-barra .eb-txt strong { color: #fff; }
.edicao-barra .eb-link { color: var(--brand, #742545); background: #fff; text-decoration: none; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.edicao-barra .eb-link:hover { opacity: .9; }

/* Esconde os elementos DECORATIVOS com cor fixa da 4ª (arco-íris/azul/rosa) — destoam da
   identidade da edição. A faixa diagonal (.hero-home::before) recolore via --brand e fica. */
body.edicao .hero-home::after,
body.edicao .escola::after,
body.edicao .apoio::before,
body.edicao .other-lives::before,
body.edicao .contato::after,
body.edicao .contato:after,
body.edicao .programacao-page::after,
body.edicao .hero-single-postype-default::after { display: none !important; content: none !important; }

/* Rodapé: logo (logo_azul) e ícones sociais são PNGs azuis → recolore pro vinho da edição via filtro. */
body.edicao .logo-footer img,
body.edicao .social-footer img {
    filter: brightness(0) saturate(100%) invert(15%) sepia(42%) saturate(1900%) hue-rotate(300deg) brightness(92%) contrast(95%);
}
/* Quando a edição tem logo PRÓPRIA no rodapé (já na cor certa), não recolorir. */
body.edicao .logo-footer.tem-logo-edicao img { filter: none !important; }

/* 3ª: a logo do topo tem o subtítulo "edição quilombola" (mais alta) → reduz um pouco pra
   alinhar a altura com as demais edições. O rodapé fica no tamanho cheio. */
body.edicao-2023 header .header-content .logo { max-width: 96px; }

/* Tag "somente online" e badges mantêm cor semântica (não recolorir). */

/* Selects/busca de filtro nas edições usam o VERDE da edição (--brand2), não o vinho. */
body.edicao .filters .selects select,
body.edicao .filters-items .selects select,
body.edicao .filters .busca,
body.edicao .filters-items .busca,
body.edicao .filters .busca input,
body.edicao .filters-items .busca input { border-color: var(--brand2) !important; color: var(--brand2) !important; }
body.edicao .filters .selects select option,
body.edicao .filters-items .selects select option { color: var(--brand2) !important; }
body.edicao .filters .selects select:hover, body.edicao .filters-items .selects select:hover,
body.edicao .filters .selects select:focus, body.edicao .filters-items .selects select:focus { background: var(--ed-bege) !important; color: #3a2b30 !important; }
body.edicao .filters .selects select option:checked, body.edicao .filters .selects select option:hover,
body.edicao .filters-items .selects select option:checked, body.edicao .filters-items .selects select option:hover { background: var(--ed-bege) !important; color: #3a2b30 !important; }
body.edicao .filters .busca input::placeholder,
body.edicao .filters-items .busca input::placeholder { color: var(--brand2) !important; }
body.edicao .filters-items.filter-with-label .selects strong { color: var(--brand2) !important; }

/* ---- HERO da CAPA da edição: a imagem da edição vira destaque (substitui o logo pequeno da home) ---- */
/* fundo verde-escuro: o triângulo fora da faixa diagonal não fica branco (senão some o título branco) */
.edicao-capa .hero-home { padding-bottom: 220px; background: color-mix(in srgb, var(--edicao-cor-2, #2f7d64) 62%, #000); }
.edicao-capa .hero-home .hero-content {
    flex-direction: row;
    align-items: center;
    gap: 34px;
    flex-wrap: wrap;
}
.edicao-capa .hero-home .hero-content img {
    height: auto;
    max-height: 320px;
    width: 46%;
    min-width: 280px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .20);
}
.edicao-capa .hero-home .hero-content .text { flex: 1; min-width: 280px; }
/* o parágrafo do hero tem max-width:250px no tema (fica estreito) — alarga na capa da edição */
.edicao-capa .hero-home .hero-content .text p { max-width: 620px; }

@media (max-width: 768px) {
    .edicao-capa .hero-home { padding-bottom: 140px; }
    .edicao-capa .hero-home .hero-content { flex-direction: column; align-items: flex-start; }
    .edicao-capa .hero-home .hero-content img { width: 100%; max-height: 240px; }
}

/* ============================================================================
   3ª MOSTRA (Quilombola) — elementos decorativos no tema
   Re-habilita os pseudo-elementos que `body.edicao` esconde (acima) e troca
   pela arte Quilombola sem fundo (verde), do jeito que a 4ª faz com os dela.
   Só afeta body.edicao-2023. Vem DEPOIS do bloco que esconde → ganha no cascade.
   ============================================================================ */
body.edicao-2023 .hero-home::after {
    display: block !important; content: "" !important;
    background-image: url("../images/edicoes/2023/mulher.png") !important;
    background-size: contain !important; background-repeat: no-repeat !important; background-position: bottom right !important;
    width: 380px !important; height: 470px !important;
    right: 16px !important; left: auto !important; top: auto !important; bottom: 0 !important;
    opacity: 1 !important; pointer-events: none;
}
body.edicao-2023 .apoio::before {
    display: block !important; content: "" !important;
    background-image: url("../images/edicoes/2023/cabaca.png") !important;
    background-size: contain !important; background-repeat: no-repeat !important; background-position: left center !important;
    width: 220px !important; height: 300px !important; left: -30px !important;
}
body.edicao-2023 .other-lives::before {
    display: block !important; content: "" !important;
    background-image: url("../images/edicoes/2023/xequere.png") !important;
    background-size: contain !important; background-repeat: no-repeat !important;
    width: 210px !important; height: 285px !important; right: -20px !important; bottom: -110px !important;
}
body.edicao-2023 .hero-single-postype-default::after {
    display: block !important; content: "" !important;
    background-image: url("../images/edicoes/2023/pinha.png") !important;
    background-size: contain !important; background-repeat: no-repeat !important; background-position: top right !important;
    width: 200px !important; height: 215px !important; right: -20px !important; top: 10px !important;
}
body.edicao-2023 .programacao-page::after {
    display: block !important; content: "" !important;
    background-image: url("../images/edicoes/2023/cesto.png") !important;
    background-size: contain !important; background-repeat: no-repeat !important; background-position: top right !important;
    width: 150px !important; height: 130px !important; right: 6px !important; top: 4px !important; left: auto !important;
}

/* Logo do topo da 1ª/2ª: no desktop a regra do tema é max-width:220px → grande.
   Reduz p/ ~120px (fica alinhada com a 3ª). A 3ª tem regra própria de 96px acima. */
body.edicao-2021 header .header-content .logo,
body.edicao-2022 header .header-content .logo { max-width: 120px !important; }

@media (max-width: 768px) {
    body.edicao-2023 .hero-home::after { width: 150px !important; height: 225px !important; right: 6px !important; }
    body.edicao-2023 .apoio::before,
    body.edicao-2023 .other-lives::before,
    body.edicao-2023 .programacao-page::after { display: none !important; }
}

/* Banner "Explore os filmes por…": o botão TEMA é roxo hardcoded (#8e44ad), que combina com a
   4ª edição mas não com as passadas. Nas edições anteriores usa o BEGE da identidade
   (o verde já está nas tags), com texto na cor da edição. */
body.edicao-2021 .filmes-explore .fe-btn-tema,
body.edicao-2022 .filmes-explore .fe-btn-tema,
body.edicao-2023 .filmes-explore .fe-btn-tema,
body.edicao-2024 .filmes-explore .fe-btn-tema {
    background: var(--ed-bege, #e9eed6) !important;
    border-color: color-mix(in srgb, var(--ed-bege, #e9eed6) 68%, #000 14%) !important;
    color: var(--edicao-cor, #742545) !important;
}
body.edicao-2021 .filmes-explore .fe-btn-tema:hover,
body.edicao-2022 .filmes-explore .fe-btn-tema:hover,
body.edicao-2023 .filmes-explore .fe-btn-tema:hover,
body.edicao-2024 .filmes-explore .fe-btn-tema:hover {
    background: color-mix(in srgb, var(--ed-bege, #e9eed6) 80%, var(--edicao-cor, #742545) 20%) !important;
    color: var(--edicao-cor, #742545) !important;
}

/* CAPA da 3ª (/edicao/2023/): banner todo BEGE (o fundo verde-escuro E a faixa diagonal viram
   bege) pra destacar a mulher no canto direito. Título e texto em vinho. E o texto ganha
   largura máxima + respiro à direita pra não cair sobre a mulher (responsivo). */
body.edicao-2023 .edicao-capa .hero-home { background: var(--ed-bege, #e9eed6) !important; }
body.edicao-2023 .hero-home::before { background: var(--ed-bege, #e9eed6) !important; }
/* título estava branco (regra .hero-home .hero-content .text h1{color:#fff} do main.css) — força vinho */
body.edicao-2023 .edicao-capa .hero-home .hero-content .text h1 { color: var(--edicao-cor, #742545) !important; }
body.edicao-2023 .hero-home .hero-content .text p { color: var(--edicao-cor, #742545) !important; }
@media (min-width: 900px) {
    body.edicao-2023 .hero-home .hero-content .text { max-width: 60%; padding-right: 24px; }
}

/* CAPA da 2ª (/edicao/2022/): mesmo tratamento da 3ª — banner todo BEGE (fundo verde-escuro
   E a faixa diagonal viram o bege padrão) com título e texto em vinho, pra ficar homogêneo. */
body.edicao-2022 .edicao-capa .hero-home { background: var(--ed-bege, #e9eed6) !important; }
body.edicao-2022 .hero-home::before { background: var(--ed-bege, #e9eed6) !important; }
body.edicao-2022 .edicao-capa .hero-home .hero-content .text h1 { color: var(--edicao-cor, #742545) !important; }
body.edicao-2022 .hero-home .hero-content .text p { color: var(--edicao-cor, #742545) !important; }
@media (min-width: 900px) {
    body.edicao-2022 .hero-home .hero-content .text { max-width: 60%; padding-right: 24px; }
}

/* CAPA da Videira (/edicao/2024/): fundo VINHO + cruz vermelha (id-visual do Contestado).
   Sem verde e sem barra bege; título/texto em creme; a cruz (PNG) flutua sem caixa/sombra. */
body.edicao-2024 .edicao-capa .hero-home { background: #6d2340 !important; padding-bottom: 90px; }
body.edicao-2024 .hero-home::before { background: #6d2340 !important; }
body.edicao-2024 .edicao-capa .hero-home .hero-content .text h1 { color: #f4e5cb !important; }
body.edicao-2024 .hero-home .hero-content .text p { color: #f4e5cb !important; }
body.edicao-2024 .edicao-capa .hero-home .hero-content img {
    object-fit: contain !important; border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important; max-height: 440px; width: 46%; min-width: 280px;
}

/* /edicao/2026/ (4ª) — hero com a cara da HOME antiga: faixa diagonal integrada + imagem solta
   (não a faixa reta escura das edições anteriores). --brand da 2026 = azul (id-visual da 4ª). */
/* IMPORTANTE: a 4ª (2026) é a edição "evergreen" — chica_edicao_tema_term() NÃO adiciona
   body.edicao-2026 (é o visual padrão do site). Então miramos o WRAPPER .edicao-capa.edicao-2026
   (classe posta no div do template), não o body. */
.edicao-capa.edicao-2026 .hero-home { background: transparent !important; padding-bottom: 400px; }
/* IGUAL À HOME: coluna, imagem pequena (140px) no topo, integrada — não a foto grande boxeada */
.edicao-capa.edicao-2026 .hero-home .hero-content { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
.edicao-capa.edicao-2026 .hero-home .hero-content img { width: auto !important; height: 140px !important; max-height: none !important; min-width: 0 !important; object-fit: contain !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
.edicao-capa.edicao-2026 .hero-home .hero-content .text h1 { color: #fff !important; }
.edicao-capa.edicao-2026 .hero-home .hero-content .text p { color: #fff !important; max-width: 620px; }

/* 4ª: mantém o elemento decorativo azul da home (hero-element2.svg) — é a identidade dela.
   (body.edicao não aplica aqui, mas garantimos explicitamente.) */
.edicao-capa.edicao-2026 .hero-home::after { display: block !important; content: "" !important; }

/* Nas capas de edição vai direto de "em cartaz" → "blog da edição" (sem a seção
   "edições anteriores" que existe na home). O margin-top: 220px do .title-blog — feito
   pra compensar o elemento que transborda na home — vira um buraco aqui. Reduz. */
.edicao-capa .blog-home .title-blog { margin-top: 48px; }
.edicao-capa .cartaz { padding-bottom: 10px; }

/* ---- Página de Regulamento: respiro no topo + CTA FilmFreeway ---- */
main#content .page-header { padding-top: 46px; }
.reg-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:#0d2eca;color:#fff;border-radius:16px;padding:24px 28px;margin:0 0 36px}
.reg-cta .reg-cta-txt{font-size:1.05rem;line-height:1.45}
.reg-cta .reg-cta-txt strong{font-size:1.18rem}
.reg-cta-btn{background:#fff;color:#0d2eca !important;font-weight:800;padding:13px 24px;border-radius:999px;text-decoration:none !important;white-space:nowrap;transition:transform .18s,background .18s}
.reg-cta-btn:hover{transform:translateY(-2px);background:#ffe14d;text-decoration:none !important}
.reg-cta-fim{margin:28px 0 6px;text-align:left}
.reg-cta-fim a{display:inline-block;background:#0d2eca;color:#fff !important;font-weight:700;padding:12px 24px;border-radius:999px;text-decoration:none !important}
.reg-cta-fim a:hover{background:#0a24a0;text-decoration:none !important}
@media(max-width:640px){.reg-cta{flex-direction:column;align-items:flex-start}}

/* ---- Pontos de exibição: passos em CARDS (visual + ícones + animação) ---- */
.pex-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 34px}
.pex-step{position:relative;background:var(--pc-bg,#fff);border:1px solid color-mix(in srgb,var(--pc,#0d2eca) 22%,#fff);border-top:4px solid var(--pc,#0d2eca);border-radius:16px;padding:24px 18px 18px;transition:transform .2s,box-shadow .2s}
.pex-step:hover{transform:translateY(-5px);box-shadow:0 12px 30px color-mix(in srgb,var(--pc,#0d2eca) 26%,transparent)}
.pex-step .pex-n{position:absolute;top:-15px;left:18px;width:32px;height:32px;border-radius:50%;background:var(--pc,#0d2eca);color:#fff !important;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.92rem;box-shadow:0 3px 8px color-mix(in srgb,var(--pc) 40%,transparent)}
.pex-step .pex-ico{display:inline-flex;width:52px;height:52px;border-radius:50%;align-items:center;justify-content:center;background:color-mix(in srgb,var(--pc,#0d2eca) 16%,#fff);font-size:1.6rem;margin:6px 0 12px;line-height:1}
.pex-step h4{margin:0 0 6px;color:var(--pc,#0d2eca);font-size:1.12rem !important;line-height:1.25}
.pex-step p{margin:0;color:#3a3f57;font-size:.93rem;line-height:1.5}
@media(max-width:640px){
  .pex-step h4{font-size:1.2rem !important}
  .pex-step p{font-size:1rem}
  .qex-sec legend{font-size:1.15rem}
}
/* paleta da Mostra (cores da arte do Contestado do hero) alternando por card */
.pex-step:nth-child(1){--pc:#0d2eca;--pc-bg:#eef1ff}
.pex-step:nth-child(2){--pc:#e6006e;--pc-bg:#fdecf5}
.pex-step:nth-child(3){--pc:#f0a500;--pc-bg:#fff6e2}
.pex-step:nth-child(4){--pc:#0FA37F;--pc-bg:#e8faf4}
.pex-step:nth-child(5){--pc:#6d3bd6;--pc-bg:#f2ecfd}
.pex-step:nth-child(6){--pc:#ef3e4a;--pc-bg:#fdedee}
/* imagem decorativa do tema no canto da página de pontos */
.page-id-31 main#content{position:relative;overflow:hidden}
.page-id-31 main#content::after{content:"";position:absolute;right:-70px;bottom:-50px;width:400px;height:400px;background:url("../images/hero-element2.svg") no-repeat center/contain;opacity:.10;pointer-events:none;z-index:0}
.page-id-31 .page-content{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
  .pex-step{opacity:0;transform:translateY(16px);animation:pexIn .55s cubic-bezier(.22,.61,.36,1) forwards}
  .pex-step:nth-child(2){animation-delay:.08s}.pex-step:nth-child(3){animation-delay:.16s}
  .pex-step:nth-child(4){animation-delay:.24s}.pex-step:nth-child(5){animation-delay:.32s}.pex-step:nth-child(6){animation-delay:.4s}
  @keyframes pexIn{to{opacity:1;transform:none}}
}
@media(max-width:820px){.pex-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pex-steps{grid-template-columns:1fr}}

/* Página Pontos de Exibição / Quero exibir — cores de texto consistentes */
.page-id-31 .page-content, .page-id-31 .page-content p, .page-id-31 .page-content li{color:#2b2f45}
.page-id-31 .page-content h2, .page-id-31 .page-content h3{color:#0d2eca}
.page-id-31 .page-content a{color:#0d2eca;font-weight:600}
.qex-intro p{color:#2b2f45}
.qex-intro a{color:#0d2eca;font-weight:600}

/* Single show/exposição: encurta a imagem alta do topo (menos vazio até os participantes) */
.single-show .hero-single-postype-default .row-one .content .col .image img,
.single-exposicao .hero-single-postype-default .row-one .content .col .image img{ max-height:440px !important; object-fit:cover; border-radius:12px; }

/* Selo de classificação indicativa: claramente ARREDONDADO, com 2 dígitos ("14"/"10")
   cabendo (antes: box fixo 21px apertava) e uma fininha borda branca + sombra que o
   separa do pôster. Padrão consistente em TODOS os filmes (home, /filmes/, single, listas). */
.badge-classificacao{
  width:auto !important; min-width:22px; height:22px !important;
  padding:0 6px !important; border-radius:7px !important;
  font-weight:800 !important; line-height:1; box-sizing:border-box;
  border:1.5px solid rgba(255,255,255,.92);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* Chips de tag uniformes: o local é <a class="tag">, mas os de evento são <span>/<small>
   e vinham com line-height/altura maior ("mais gordos"). Força a MESMA forma pra todos
   (listas de shows/sessões + heros single de show/exposição/sessão/live/oficina). */
.row-item-all-list .col .text .tags .tag:not(.selo-idade):not(.selo-online),
.hero-single-postype-default .texts .tags .tag:not(.selo-idade):not(.selo-online),
.hero-exposicoes .texts .tags .tag:not(.selo-idade):not(.selo-online){
  display:inline-flex !important; align-items:center; justify-content:center;
  padding:6px 20px !important; line-height:1 !important; height:auto;
  font-size:12px !important; font-weight:600; border-radius:20px;
  text-transform:uppercase; white-space:nowrap;
}

/* Listagens (/shows/, etc.): a imagem está dentro de um <a> inline, então o height:100%
   do <img> não alcançava a altura do container e sobrava a barra rosa (--brand2) embaixo.
   Fazendo o <a> preencher o container, o object-fit:cover ocupa o retângulo inteiro. */
.row-item-all-list .col .image a{ display:block; width:100%; height:100%; }
.row-item-all-list .col .image img{ width:100%; height:100%; object-fit:cover; display:block; }