/*
Theme Name:  INCT-MI
Theme URI:   https://inct-mi.pesquisa.ufabc.edu.br
Description: Tema oficial do INCT – Materials Informatics. Tailwind CSS compilado localmente, ACF e WPBakery.
Version:     1.0.0
Author:      INCT-MI
Author URI:  https://inct-mi.pesquisa.ufabc.edu.br
Text Domain: inct
Tags:        research, science, custom-post-types, acf, wpbakery
*/

/* =============================================
   Contact Form 7 — mesmo visual do formulário do
   design aprovado (CSS puro, sem Tailwind/@apply,
   porque este arquivo não passa pelo build).
   ============================================= */
@media(max-width: 768px) {
    #inicio {
        padding-top: 12vh;
    }
}
.inct-cf7 form.wpcf7-form > * + * {
	margin-top: 1.25rem;
}
.inct-cf7 label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #334155;
	margin-bottom: 0.375rem;
}
.inct-form-input,
.inct-form-textarea {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	border: 1px solid #cbd5e1;
	background-color: #f8fafc;
	color: #0f172a;
	font-size: 0.875rem;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.inct-form-input::placeholder,
.inct-form-textarea::placeholder {
	color: #94a3b8;
}
.inct-form-input:focus,
.inct-form-textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px #1e40af;
	border-color: #1e40af;
}
.inct-form-textarea {
	resize: none;
}
.inct-form-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	color: #fff;
	font-weight: 600;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	border: none;
	cursor: pointer;
	background-color: #1e40af;
	transition: background-color .2s, box-shadow .2s;
}
.inct-form-submit:hover {
	background-color: #1e3a8a;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* Campo inválido: borda + fundo vermelho-claro */
.inct-form-input.wpcf7-not-valid,
.inct-form-textarea.wpcf7-not-valid {
	border-color: #fca5a5;
	background-color: #fef2f2;
}
.inct-form-input.wpcf7-not-valid:focus,
.inct-form-textarea.wpcf7-not-valid:focus {
	box-shadow: 0 0 0 2px #fecaca;
	border-color: #f87171;
}

/* Mensagem de erro ocupa o lugar do placeholder dentro do campo,
   em vez de aparecer solta embaixo. */
.inct-form-input.wpcf7-not-valid::placeholder,
.inct-form-textarea.wpcf7-not-valid::placeholder {
	color: transparent;
}
.wpcf7-form-control-wrap {
	position: relative;
	display: block;
}
/* Some assim que o usuário começa a digitar — a classe wpcf7-not-valid do
   campo só é removida pelo CF7 na próxima validação (submit/blur), então
   sem isso a mensagem ficava sobreposta ao texto digitado. :placeholder-shown
   reage em tempo real, sem precisar de JS. */
.wpcf7-form-control-wrap:has(.wpcf7-not-valid:not(:placeholder-shown)) .wpcf7-not-valid-tip {
	display: none;
}

.inct-cf7 .wpcf7-not-valid-tip {
	color: #ef4444;
	font-size: 0.875rem;
	font-weight: 500;
	position: absolute;
	top: 0.75rem;
	left: 1rem;
	right: 1rem;
	margin: 0;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Caixa de resposta (sucesso/erro/spam) — sobrescreve as cores padrão do
   plugin, cujo seletor (.wpcf7 form.invalid .wpcf7-response-output) é
   mais específico que o nosso, por isso o !important nas bordas. */
.inct-cf7 .wpcf7-response-output {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	border-width: 1px;
	border-style: solid;
}
.inct-cf7 form.sent .wpcf7-response-output {
	border-color: #86efac !important;
	background-color: #f0fdf4;
	color: #15803d;
}
.inct-cf7 form.invalid .wpcf7-response-output,
.inct-cf7 form.unaccepted .wpcf7-response-output,
.inct-cf7 form.payment-required .wpcf7-response-output,
.inct-cf7 form.failed .wpcf7-response-output,
.inct-cf7 form.aborted .wpcf7-response-output {
	border-color: #fca5a5 !important;
	background-color: #fef2f2;
	color: #b91c1c;
}
.inct-cf7 form.spam .wpcf7-response-output {
	border-color: #fdba74 !important;
	background-color: #fff7ed;
	color: #c2410c;
}

/* =============================================
   Listas (<ul>/<ol>) no conteúdo — o Preflight do
   Tailwind zera list-style/margin/padding de toda
   lista (ol,ul{list-style:none;margin:0;padding:0}
   em dist/main.css), pensado pra UI (nav, cards),
   mas isso também apaga bullets/numeração e recuo
   do conteúdo de páginas/posts/WPBakery Text.
   Escopado a <main> pra não afetar o <ul> do menu
   de navegação (o único fora do conteúdo).
   ============================================= */
main ul,
main ol {
	margin: 1em 0;
	padding-left: 1.625em;
}
main ul {
	list-style: disc;
}
main ol {
	list-style: decimal;
}
main ul ul {
	list-style: circle;
}
main ul li::marker {
	color: #fb923c;
}

/* =============================================
   Títulos (<h1>-<h6>) e parágrafos no conteúdo —
   o Preflight do Tailwind zera o tamanho/peso dos
   headings (h1,h2,h3,h4,h5,h6{font-size:inherit;
   font-weight:inherit}) e a margem de headings,
   parágrafos, blockquote/hr/pre (mesma regra
   {margin:0} de todos esses elementos), pensado
   pra UI onde tudo leva classe Tailwind explícita.
   Isso também apaga a hierarquia visual de
   headings/parágrafos digitados livremente em
   páginas/posts/WPBakery Text. Escopado a <main>;
   como Tailwind aplica utilitário via classe (mais
   específico que a combinação de elementos usada
   aqui), nenhum heading do próprio tema — que
   sempre tem classes de tamanho/peso/margem — é
   afetado, só o conteúdo sem classes.
   NÃO definir "color" aqui: o Preflight nunca zera
   a cor de heading (só font-size/font-weight), e
   alguns componentes do tema (ex: card de docente
   em destaque, inc/shortcodes.php) têm <h3> sem
   classe de cor própria, contando com herança de um
   ancestral com text-white — herança sempre perde
   pra uma declaração direta no elemento, então
   "color" aqui quebraria esse branco herdado.
   ============================================= */
main h1, main h2, main h3, main h4, main h5, main h6 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	line-height: 1.25;
}
main h1 { font-size: 2.25rem; margin: 2.5rem 0 1.5rem; }
main h2 { font-size: 1.875rem; margin: 2.5rem 0 1.5rem; }
main h3 { font-size: 1.5rem; margin: 2rem 0 1.25rem; }
main h4 { font-size: 1.25rem; margin: 1.75rem 0 1rem; }
main h5 { font-size: 1.125rem; margin: 1.75rem 0 1rem; }
main h6 { font-size: 1rem; margin: 1.5rem 0 1rem; }
main p {
	margin: 0 0 1rem;
}

/* Só nas páginas (page.php) — h3 no roxo escuro do tema.
   Escopado a .inct-page-content (não a "main h3" genérico)
   pra não repetir o problema do card de docente: outros
   templates que usam <main> têm <h3> herdando cor branca
   de um ancestral escuro, e uma regra mais ampla quebraria
   isso de novo (ver comentário acima). */
.inct-page-content h3 {
	color: #4A1D8E;
}

/* =============================================
   Links no corpo de texto das páginas de evento
   (single-evento.php, .inct-evento-content) — sublinhado
   tracejado roxo pra ficar claramente diferente do texto
   ao redor. Escopado ao conteúdo (the_content), não pega
   o botão "Acessar página do evento" nem o link "Voltar",
   que já têm estilo próprio fora dessa div.
   ============================================= */
.inct-evento-content a {
	color: #7B2D8E;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 3px;
	transition: color .2s;
}
.inct-evento-content a:hover {
	color: #4A1D8E;
	text-decoration-style: solid;
}

/* =============================================
   Descrição da seção MIDb (Home) — campo WPBakery
   type="textarea_html" (inc/wpbakery.php), então o
   conteúdo já vem com <p> reais. Preflight do Tailwind
   zera margin de <p> (main p{margin:0 0 1rem} não cobre
   esta section, que fica fora de <main> no front-page.php),
   então o espaçamento entre parágrafos vem daqui.
   ============================================= */
.inct-midb-descricao p {
	margin-bottom: 1rem;
}
.inct-midb-descricao p:last-child {
	margin-bottom: 0;
}

/* =============================================
   WPBakery — largura segura para as Rows padrão.
   O tema não tem um .container (Bootstrap) para
   limitar a largura, e o WPBakery conta com isso;
   sem essa regra, .vc_row ocupa 100% da viewport.
   Mesmos valores de .section-container (src/input.css).
   Não afeta wrappers de "Full Width Row"
   (.vc_row-full-width), que continuam de ponta a
   ponta — só a .vc_row (conteúdo) interna é limitada.
   Escopado a <main> (== page.php): a Home
   (front-page.php) monta as seções (Hero, Eventos,
   etc.) fora de <main> e depende de rows full-bleed;
   sem esse escopo, essa regra também as limitava e
   desalinhava a Home inteira.
   ============================================= */
main .wpb_row.vc_row-fluid {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	main .wpb_row.vc_row-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	main .wpb_row.vc_row-fluid { padding-left: 2rem; padding-right: 2rem; }
}

/* =============================================
   Paginação (paginate_links) — /noticias/ e
   arquivos de categoria. O core do WP gera
   <a>/<span class="page-numbers"> sem nenhuma
   classe Tailwind, então o estilo vem daqui.
   ============================================= */
.inct-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.875rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #475569;
	background: #fff;
	border: 1px solid #e2e8f0;
	transition: color .2s, background-color .2s, border-color .2s;
}
.inct-pagination a.page-numbers:hover,
.inct-pagination button.page-numbers:not(.disabled):hover {
	border-color: #bfdbfe;
	color: #1e40af;
}
.inct-pagination .page-numbers.current {
	background: #1e40af;
	border-color: #1e40af;
	color: #fff;
}
.inct-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}
/* Botões "Anterior"/"Próxima" da paginação client-side de eventos
   ([inct_eventos]) — cursor "default"/opacidade reduzida na ponta
   da lista, já que não têm href pra desabilitar de verdade. */
.inct-pagination button.page-numbers.disabled {
	color: #cbd5e1;
	cursor: default;
}

/* =============================================
   Plugin teachpress — label de tipo de publicação
   (.tp_pub_type). Só cor (roxo do tema) e cantos
   arredondados; tamanho de fonte/padding continuam
   os do plugin, de propósito.
   ============================================= */
.tp_pub_type {
	background-color: #7B2D8E !important;
	border-color: #7B2D8E !important;
	color: #fff !important;
	border-radius: 9999px !important;
}

/* =============================================
   Plugin teachpress — barra de busca/filtro acima
   da lista de publicações ([tp_publications]). Os
   campos (input de busca, selects de ano/tag/autor,
   botão) já vêm com CSS próprio do plugin
   (teachpress_front.css) mais específico que um
   simples ".classe elemento" — por isso boa parte
   das regras abaixo precisa de !important (mesmo
   motivo do .tp_pub_type acima). display:contents
   nos wrappers (.tp_search_input, .teachpress_filter,
   .teachpress_search_button) "desempacota" esses divs
   pra que campo/select/botão virem itens diretos do
   flex do <form>, formando uma única barra em vez de
   blocos empilhados um embaixo do outro; o plugin
   ainda força "select.block{width:100%}" e
   "#tp_search_input_field{width:60%}", que também
   precisam de override.
   ============================================= */
form[name="tppublistform"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 2rem;
}
.tp_search_input,
.teachpress_filter,
.teachpress_search_button {
	display: contents !important;
}
#tp_search_input_field,
.teachpress_filter select {
	padding: 0.625rem 1rem !important;
	border-radius: 0.75rem !important;
	border: 1px solid #cbd5e1 !important;
	background-color: #f8fafc !important;
	color: #0f172a !important;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem !important;
	line-height: 1.25rem;
	margin: 0 !important;
}
#tp_search_input_field {
	flex: 2 1 16rem;
	width: auto !important;
	min-width: 14rem;
}
.teachpress_filter select {
	flex: 1 1 10rem;
	width: auto !important;
	min-width: 9rem;
	cursor: pointer;
}
#tp_search_input_field:focus,
.teachpress_filter select:focus {
	outline: none;
	box-shadow: 0 0 0 2px #1e40af;
	border-color: #1e40af !important;
}
input.tp_search_button {
	padding: 0.625rem 1.5rem !important;
	border-radius: 0.75rem !important;
	border: none !important;
	background: #7B2D8E !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.875rem !important;
	cursor: pointer;
	margin: 0 !important;
	transition: background-color .2s;
}
input.tp_search_button:hover {
	background: #611f6d !important;
	color: #fff !important;
}

/* =============================================
   Plugin teachpress — paginação (.tablenav-pages,
   topo e rodapé da lista). Mesmo padrão visual da
   paginação nativa do WP (.inct-pagination acima).
   ============================================= */
.teachpress_pub_list .tablenav-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	color: #64748b;
	font-family: 'Inter', sans-serif;
}
.teachpress_pub_list .tablenav-pages .displaying-num {
	margin-right: auto;
}
.teachpress_pub_list .page-numbers.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.625rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #475569;
	background: #fff;
	border: 1px solid #e2e8f0;
	text-decoration: none;
	transition: color .2s, background-color .2s, border-color .2s;
}
.teachpress_pub_list .page-numbers.button:not(.disabled):hover {
	border-color: #bfdbfe;
	color: #1e40af;
}
.teachpress_pub_list .page-numbers.button.disabled {
	color: #cbd5e1;
	cursor: default;
}

/* =============================================
   Lightbox — abre a imagem em tamanho grande ao
   clicar numa galeria de mídia ([gallery], ver o
   filtro post_gallery em functions.php). Overlay
   único, reaproveitado por qualquer grupo de fotos
   da página (JS em assets/js/theme.js controla
   qual imagem mostrar via data-lightbox-*).
   ============================================= */
.inct-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 3rem 1.5rem;
}
.inct-lightbox.is-open {
	display: flex;
}
.inct-lightbox-img {
	max-width: 90vw;
	max-height: 82vh;
	object-fit: contain;
	border-radius: 0.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}
.inct-lightbox-caption {
	position: absolute;
	bottom: 1.5rem;
	left: 1rem;
	right: 1rem;
	text-align: center;
	color: #fff;
	font-size: 0.875rem;
}
.inct-lightbox-close,
.inct-lightbox-prev,
.inct-lightbox-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: none;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color .2s;
}
.inct-lightbox-close:hover,
.inct-lightbox-prev:hover,
.inct-lightbox-next:hover {
	background: rgba(255, 255, 255, .2);
}
.inct-lightbox-close {
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.5rem;
	line-height: 1;
}
.inct-lightbox-prev,
.inct-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 1.75rem;
}
.inct-lightbox-prev { left: 0.5rem; }
.inct-lightbox-next { right: 0.5rem; }
@media (min-width: 640px) {
	.inct-lightbox-prev { left: 1.5rem; }
	.inct-lightbox-next { right: 1.5rem; }
}