/*
 * RECURSO 34 - Identidade visual conforme docs/midiateca.pdf.
 *
 * Paleta do PDF: cinza #5C6164, teal #02717E, verde #026937, oliva #90993C,
 * ocre #C97F29, laranja #D34E29. Fundo das telas: cinza claro.
 * Aqui: fundo de pagina cinza claro, cabecalho teal, miniaturas (icones das
 * colecoes na home, cartoes de itens, galeria do item) com cantos arredondados.
 * O Customizer do Blocksy nao e alterado: as regras vencem por especificidade.
 */
:root {
    --mgen-cinza-claro: #ededed;
    --mgen-cinza:       #5c6164;
    --mgen-teal:        #02717e;
    --mgen-raio:        20px;    /* raio dos cantos das miniaturas */
}

/* Fundo da pagina (html body: vence o body{} do CSS dinamico do Blocksy, que
   vem depois deste arquivo) e sem a moldura vermelha ("site frame" do Customizer) */
html body {
    background-color: var(--mgen-cinza-claro);
    background-image: none;
    --theme-frame-size: 0px;
    border: 0;
}
html body[data-frame="default"]::before,
html body[data-frame="default"]::after { display: none; }

/* Cabecalho teal (todas as fileiras), texto e icones brancos */
html [data-header*="type-1"] .ct-header,
html [data-header*="type-1"] .ct-header [data-row],
html [data-header*="type-1"] .ct-header [data-row] > div {
    background-color: var(--mgen-teal);
    background-image: none;
    --theme-link-initial-color: #fff;
    --theme-link-hover-color: #fff;
    --theme-text-color: #fff;
    --theme-heading-color: #fff;
    --theme-icon-color: #fff;
    --theme-icon-hover-color: #fff;
    --theme-border-top: none;
    --theme-border-bottom: none;
}

html [data-header*="type-1"] .ct-header .site-title,
html [data-header*="type-1"] .ct-header .site-title a,
html [data-header*="type-1"] .ct-header .ct-header-text,
html [data-header*="type-1"] .ct-header .ct-icon {
    color: #fff;
    --theme-link-initial-color: #fff;
    --theme-heading-color: #fff;
    fill: #fff;
}

/* Logo: o PNG (logo-mgen-banese.png, biblioteca de midia) ja traz o cartao
   branco arredondado com o Instituto Banese; o contêiner nao desenha nada */
html [data-header*="type-1"] .ct-header .site-logo-container {
    background: transparent;
    padding: 0;
}

/* Pagina do item: faixa do titulo no cinza da paleta, texto e trilha brancos
   (o PDF nao mostra essa tela; o laranja do Customizer destoava do teal) */
html [data-prefix*="_item_single"] .hero-section[data-type="type-2"] {
    background-color: var(--mgen-cinza);
    --theme-heading-color: #fff;
    --theme-text-color: #fff;
    --theme-link-initial-color: #fff;
    --theme-link-hover-color: #fff;
}
/* o Blocksy cobre a imagem do item com uma camada opaca (::after) na cor laranja */
html [data-prefix*="_item_single"] .hero-section[data-type="type-2"] > figure .ct-media-container::after {
    background-color: var(--mgen-cinza);
}
html [data-prefix*="_item_single"] .hero-section[data-type="type-2"] .page-title,
html [data-prefix*="_item_single"] .hero-section[data-type="type-2"] .ct-breadcrumbs,
html [data-prefix*="_item_single"] .hero-section[data-type="type-2"] .ct-breadcrumbs a,
html [data-prefix*="_item_single"] .hero-section[data-type="type-2"] .ct-breadcrumbs span {
    color: #fff;
}

/* Rodape no cinza da paleta */
html [data-footer*="type-1"] .ct-footer,
html [data-footer*="type-1"] .ct-footer [data-row] {
    background-color: var(--mgen-cinza);
}

/* Home: nomes das colecoes em cinza (PDF), nao na cor de destaque */
html .wp-block-tainacan-collections-list.has-text-color,
html .wp-block-tainacan-collections-list ul.collections-list li.collection-list-item a,
html .wp-block-tainacan-collections-list ul.collections-list li.collection-list-item a span {
    color: var(--mgen-cinza);
}

/* Home: icones das colecoes com cantos arredondados */
.wp-block-tainacan-collections-list ul.collections-list li.collection-list-item img,
.wp-block-tainacan-collections-list ul.collections-list li.collection-list-item canvas {
    border-radius: var(--mgen-raio);
    overflow: hidden;
}

/* Cartoes de itens: miniatura arredondada; o cartao sem caixa, direto no cinza
   claro (como no PDF: imagem + legenda) */
.entry-card {
    --theme-border-radius: var(--mgen-raio);
}
.entry-card .ct-media-container,
.entry-card .ct-media-container img {
    border-radius: var(--mgen-raio);
    overflow: hidden;
}
html [data-prefix] [data-cards="boxed"] .entry-card,
html [data-prefix] .entry-card {
    background-color: transparent;
    --theme-box-shadow: none;
    --card-inner-spacing: 0px;
}
/* titulo do cartao em cinza (PDF); botao "Mais" em teal */
html [data-prefix] .entry-card .entry-title,
html [data-prefix] .entry-card .entry-title a {
    color: var(--mgen-cinza);
    --theme-heading-color: var(--mgen-cinza);
    --theme-link-initial-color: var(--mgen-cinza);
}
html [data-prefix] .entry-card .entry-button {
    --theme-button-background-initial-color: var(--mgen-teal);
    --theme-button-background-hover-color: var(--mgen-cinza);
    border-radius: 999px;
}

/* Pagina do item: galeria e miniaturas arredondadas */
.tainacan-media-component .swiper-slide-content,
.tainacan-media-component .swiper-slide-content img,
.tainacan-media-component .swiper-slide-content video,
.tainacan-media-component .swiper-slide-content iframe {
    border-radius: calc(var(--mgen-raio) * .6);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Fontes do PDF: Handel (titulos) e Poppins (subtitulos e textos).
 * Poppins vem do Google Fonts (enfileirada pelo plugin). Handel Gothic (fonte
 * comercial fornecida pelo museu) vem de front/fonts/handel-gothic.woff2; se o
 * arquivo faltar, os titulos caem em Poppins 700.
 * --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Handel Gothic';
    src: url('fonts/handel-gothic.woff2') format('woff2');
    font-weight: 400 700;      /* a fonte so tem um peso; serve para titulos em bold */
    font-style: normal;
    font-display: swap;
}
:root {
    --mgen-fonte-texto:   'Poppins', 'AR One Sans', sans-serif;
    --mgen-fonte-titulo:  'Handel Gothic', 'HandelGothic', 'Poppins', sans-serif;
}
html body,
html body .ct-container,
html body .entry-card,
html body .page-description,
html body .entry-excerpt,
html body .entry-content,
html body .tainacan-single-item,
html body .mgen-trad-btn,
html body .entry-button {
    --theme-font-family: var(--mgen-fonte-texto);
    font-family: var(--mgen-fonte-texto);
}
html body h1, html body h2, html body h3, html body h4,
html body .site-title,
html body .page-title,
html body .entry-title,
html body .entry-card .entry-title {
    --theme-font-family: var(--mgen-fonte-titulo);
    font-family: var(--mgen-fonte-titulo);
    --theme-font-weight: 400;
    font-weight: 400;          /* Handel so tem um peso; evita negrito sintetico */
}
/* legendas das colecoes na home: Poppins regular e centralizadas sob a imagem, como no PDF */
html .wp-block-tainacan-collections-list ul.collections-list li.collection-list-item a {
    text-align: center;
}
html .wp-block-tainacan-collections-list ul.collections-list li.collection-list-item a span {
    font-family: var(--mgen-fonte-texto);
    font-weight: 400;
    display: block;
    text-align: center;
}

/* Paginador das listas: pagina atual em teal, demais numeros em cinza, hover teal */
html .ct-pagination[data-pagination] .page-numbers {
    --theme-link-initial-color: var(--mgen-cinza);
    --theme-link-hover-color: var(--mgen-teal);
    --theme-text-active-color: #fff;
    --theme-border-radius: 999px;
    font-family: var(--mgen-fonte-texto);
}
html .ct-pagination[data-pagination] .page-numbers.current {
    color: #fff;
    background: var(--mgen-teal);
}
html .ct-pagination[data-pagination] .page-numbers:not(.dots):hover {
    border-color: var(--mgen-teal);
    color: var(--mgen-teal);
}
html .ct-pagination[data-pagination] .page-numbers.prev,
html .ct-pagination[data-pagination] .page-numbers.next {
    color: var(--mgen-teal);
    border-color: var(--mgen-teal);
    --theme-link-initial-color: var(--mgen-teal);
}
html .ct-pagination[data-pagination] .page-numbers.prev:hover,
html .ct-pagination[data-pagination] .page-numbers.next:hover {
    color: #fff;
    background: var(--mgen-teal);
}

/* Cartoes: resumo e data em cinza da paleta (vinham no marrom da paleta antiga) */
html [data-prefix] .entry-card .entry-excerpt,
html [data-prefix] .entry-card .entry-excerpt p,
html [data-prefix] .entry-card .entry-meta,
html [data-prefix] .entry-card .entry-meta li,
html [data-prefix] .entry-card .entry-meta a,
html [data-prefix] .entry-card .ct-meta-element-date {
    color: var(--mgen-cinza);
    --theme-text-color: var(--mgen-cinza);
    --theme-link-initial-color: var(--mgen-cinza);
}

/* ---------------------------------------------------------------------------
 * Pedidos do Instituto Banese (docs/midiateca-ajustes-banese-2026-10-08.pdf)
 * --------------------------------------------------------------------------- */
/* 1. texto do cabecalho da colecao centralizado (substitui o justificado) */
html body.mgen-lista-itens .hero-section[data-type="type-2"] .entry-header .page-description,
html body.mgen-lista-itens .hero-section[data-type="type-2"] .entry-header .page-description p,
html body.mgen-lista-itens .hero-section[data-type="type-2"] .entry-header .page-description li {
    text-align: center;
    hyphens: manual;
}
html body.mgen-lista-itens .hero-section[data-type="type-2"] .entry-header .mgen-trad-botoes {
    justify-content: center;
}
/* 3. sem a data abaixo do titulo do item */
html [data-prefix*="_item_single"] .hero-section .entry-meta {
    display: none;
}
/* 4. titulo do item em caixa alta */
html [data-prefix*="_item_single"] .hero-section .page-title {
    text-transform: uppercase;
}
/* 5. logo novo (cartao + Banese) sem cortes: altura folgada e centralizado.
   [data-id="logo"] no seletor: o CSS dinamico do Blocksy define --logo-max-height
   com essa especificidade e venceria sem ele */
html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --logo-max-height: 107px;
    margin: 16px 0;          /* folga para o cartao nao encostar nas bordas da faixa */
}
@media (max-width: 689px) {
    html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 54px; margin: 10px 0; }
}
html [data-header*="type-1"] .ct-header .site-logo-container img {
    max-height: var(--logo-max-height);
    width: auto;
    object-fit: contain;
}

/* Texto corrido de todo o site no cinza da paleta (a paleta antiga usava marrom);
   titulo do item fora da faixa (colecoes com hero simples) tambem em cinza */
html body {
    --theme-text-color: var(--mgen-cinza);
    color: var(--mgen-cinza);
}
html [data-prefix*="_item_single"] .page-title {
    color: var(--mgen-cinza);
    --theme-heading-color: var(--mgen-cinza);
}
html [data-prefix*="_item_single"] .ct-related-posts-container,
html [data-prefix*="_item_single"] .post-navigation {
    --theme-border-color: var(--mgen-teal);
}

/* Cabecalho desktop: lupa alinhada a ultima coluna das colecoes (o grid do
   Tainacan deixa ~58px de sobra a direita dentro do mesmo .ct-container) e o
   titulo MIDIATECA centralizado no container da pagina (mesmo eixo dos textos). */
html .ct-header [data-device="desktop"] [data-id="search"] {
    --margin: 0 59px 0 10px;   /* o Blocksy aplica margin:var(--margin,0 10px) via #header */
}
html .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container {
    position: relative;
}
html .ct-header [data-device="desktop"] [data-row="middle"] .site-branding {
    position: static;
}
html .ct-header [data-device="desktop"] [data-row="middle"] .site-title-container {
    position: absolute;
    left: 0;
    right: 0;                  /* centro do container, igual aos textos centralizados das paginas */
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
}
html .ct-header [data-device="desktop"] [data-row="middle"] .site-title-container a {
    pointer-events: auto;
}