/* IA Tracker · tema. Tokens vêm do theme.json (--wp--preset--*). Componentes do catálogo ficam no plugin iat (iat.css),
   que lê estes aliases --iat-* para combinar com o tema.
   No WP 6.4 as variáveis --wp--preset--* ficam em body (no 6.6+ em :root): os aliases valem nos dois. */
:root, body {
	--iat-fundo: var(--wp--preset--color--fundo);
	--iat-superficie: var(--wp--preset--color--superficie);
	--iat-superficie-2: var(--wp--preset--color--superficie-2);
	--iat-borda: var(--wp--preset--color--borda);
	--iat-texto: var(--wp--preset--color--texto);
	--iat-texto-suave: var(--wp--preset--color--texto-suave);
	--iat-azul: var(--wp--preset--color--azul);
	--iat-roxo: var(--wp--preset--color--roxo);
	--iat-link: var(--wp--preset--color--link);
	--iat-f-titulo: var(--wp--preset--font-family--titulo);
	--iat-f-dado: var(--wp--preset--font-family--dado);
	--iat-grad: linear-gradient(120deg, var(--iat-azul), var(--iat-roxo));
	--iat-curva: cubic-bezier(.2, .8, .2, 1);
	color-scheme: dark;
}

/* Transições entre páginas (View Transitions entre documentos). Sem suporte: navegação normal. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--iat-curva) both iat-sai; }
::view-transition-new(root) { animation: 360ms var(--iat-curva) both iat-entra; }
@keyframes iat-sai { to { opacity: 0; transform: translateY(-8px); } }
@keyframes iat-entra { from { opacity: 0; transform: translateY(12px); } }

*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
:where(a):focus-visible, :where(button, input, select, textarea):focus-visible { outline: 2px solid var(--iat-azul); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--iat-azul) 45%, transparent); }
img { height: auto; }
.screen-reader-text:focus { clip: auto; height: auto; width: auto; padding: .5rem 1rem; background: var(--iat-superficie); z-index: 100; }

/* ---------- cabeçalho ---------- */
.iat-topo {
	position: sticky; top: 0; z-index: 20;
	background: color-mix(in srgb, var(--iat-fundo) 86%, transparent);
	backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--iat-borda);
}
.admin-bar .iat-topo { top: var(--wp-admin--admin-bar--height, 32px); }
.iat-topo__linha { min-height: 64px; gap: .75rem 1.5rem; }
.iat-logo-site { display: inline-flex; align-items: center; }
.iat-logo-site img { width: 104px; height: 48px; object-fit: contain; display: block; }
.iat-topo .wp-block-navigation { font-size: .9375rem; font-weight: 500; gap: .25rem 1.25rem; }
.iat-topo .wp-block-navigation a { color: var(--iat-texto-suave); text-decoration: none; }
.iat-topo .wp-block-navigation a:hover, .iat-topo .wp-block-navigation .current-menu-item a { color: var(--iat-texto); }
.iat-topo .iat-nav-destaque a { color: var(--iat-texto); background: var(--iat-superficie-2); border: 1px solid var(--iat-borda); border-radius: 999px; padding: .3rem .8rem; }
.iat-topo .wp-block-navigation__responsive-container.is-menu-open { background: var(--iat-fundo); color: var(--iat-texto); }
.iat-topo .wp-block-search__inside-wrapper { background: var(--iat-superficie); border: 1px solid var(--iat-borda); border-radius: 12px; padding: 3px; }
.iat-topo .wp-block-search__input { background: transparent; border: 0; color: var(--iat-texto); font-size: .9375rem; min-width: 0; padding: .4rem .6rem; }
.iat-topo .wp-block-search__button { margin: 0; border-radius: 9px; background: var(--iat-grad); padding: .45rem .8rem; }
@media (max-width: 781px) { .iat-topo .wp-block-search { order: 3; flex-basis: 100%; } }

/* ---------- conteúdo ---------- */
.iat-principal { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.iat-trilha-tema { font-size: .875rem; color: var(--iat-texto-suave); }
.iat-trilha-tema a { color: var(--iat-texto-suave); }
.iat-meta { color: var(--iat-texto-suave); font-size: .9375rem; gap: .25rem .75rem; }
.iat-meta .wp-block-post-author-name a, .iat-meta a { color: var(--iat-texto); }
.wp-block-post-content :where(p, li) { max-width: 72ch; }
.wp-block-post-content :where(h2) { margin-top: 2.25em; }
.wp-block-post-content :where(h3) { margin-top: 1.75em; }
.wp-block-post-content :where(img) { border-radius: 12px; }
.wp-block-post-content :where(table) { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.wp-block-post-content :where(th, td) { border-bottom: 1px solid var(--iat-borda); padding: .6rem .5rem; text-align: left; vertical-align: top; }
.wp-block-post-content :where(th) { color: var(--iat-texto-suave); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.wp-block-post-featured-image img { border-radius: 20px; }

/* grade de posts e de ferramentas (query loop) */
.iat-grade-posts { gap: 1rem !important; }
.iat-grade-posts > li { background: var(--iat-superficie); border: 1px solid var(--iat-borda); border-radius: 16px; overflow: hidden; padding: 0 0 1rem; transition: transform 280ms var(--iat-curva), border-color 140ms, box-shadow 280ms var(--iat-curva); }
.iat-grade-posts > li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--iat-azul) 55%, var(--iat-borda)); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--iat-azul) 55%, transparent); }
.iat-grade-posts .wp-block-post-featured-image { margin: 0 0 .75rem; }
.iat-grade-posts .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 16 / 9; object-fit: cover; }
.iat-grade-posts > li > *:not(.wp-block-post-featured-image) { padding-inline: 1rem; }
.iat-grade-posts .wp-block-post-title { font-size: 1.0625rem; line-height: 1.3; margin: 0; }
.iat-grade-posts .wp-block-post-title a { color: var(--iat-texto); text-decoration: none; }
.iat-grade-posts .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.iat-grade-posts > li { position: relative; }
.iat-lista-ferramentas .wp-block-post-featured-image img { aspect-ratio: 1; object-fit: contain; background: #fff; padding: 12px; border-radius: 12px; }
.iat-lista-ferramentas > li { padding: 1rem; }
.iat-lista-ferramentas > li > * { padding-inline: 0 !important; }
.iat-lista-ferramentas .wp-block-post-featured-image { width: 56px; margin: 0 0 .75rem !important; }

/* glossário por letra */
.iat-lista-termos { columns: 3 14rem; column-gap: 2rem; list-style: none; padding: 0; }
.iat-lista-termos li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--iat-borda); }
.iat-lista-termos .wp-block-post-title { font-family: inherit; font-size: 1rem; font-weight: 500; margin: 0; }
.iat-lista-termos a { color: var(--iat-texto); text-decoration: none; }

/* paginação */
.wp-block-query-pagination { gap: .5rem; font-family: var(--iat-f-dado); font-size: .875rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { padding: .35rem .7rem; border: 1px solid var(--iat-borda); border-radius: 8px; color: var(--iat-texto); text-decoration: none; }
.wp-block-query-pagination .current { background: var(--iat-azul); border-color: var(--iat-azul); color: #fff; }

/* ---------- rodapé ---------- */
.iat-rodape { border-top: 1px solid var(--iat-borda); background: var(--iat-superficie); color: var(--iat-texto-suave); font-size: .9375rem; }
.iat-rodape a { color: var(--iat-texto-suave); text-decoration: none; }
.iat-rodape a:hover { color: var(--iat-texto); }
.iat-rodape h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--iat-texto); font-family: var(--wp--preset--font-family--texto); font-weight: 600; }
.iat-rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }

/* home: o conteúdo antigo (Elementor) só aparece enquanto a home D (flag "home" do plugin) não está ligada */
.iat-home:has(.iat-hero) .iat-home-legado { display: none; }

/* Blindagem contra o kit global do Elementor (.elementor-kit-N h2 { color:#000; font-size:33px } etc.),
   que carrega nas páginas feitas com ele. O prefixo html só sobe a especificidade do cabeçalho e do rodapé. */
html .iat-topo, html .iat-rodape { font-size: 1rem; line-height: 1.6; }
html .iat-rodape h2 { font-size: .8125rem; line-height: 1.4; color: var(--iat-texto); margin: 0 0 .75rem; }
html .iat-rodape p { margin: 0 0 1rem; color: var(--iat-texto-suave); }
html .iat-rodape a { color: var(--iat-texto-suave); }
html .iat-rodape a:hover { color: var(--iat-texto); }
html .iat-topo .wp-block-navigation a { color: var(--iat-texto-suave); }
html .iat-topo .wp-block-navigation a:hover { color: var(--iat-texto); }
html .iat-topo .iat-nav-destaque a { color: var(--iat-texto); }

/* páginas do Elementor dentro do tema: sem margem dupla */
.iat-largura-total .wp-block-post-content > .elementor { max-width: none; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}


/* ================= Tema claro / escuro (1.0.2) =================
   data-tema no <html> (script no head). Os presets do theme.json são redefinidos, e os aliases --iat-* seguem. */
html[data-tema="claro"], html[data-tema="claro"] body {
	--wp--preset--color--fundo: #F7F7FB;
	--wp--preset--color--superficie: #FFFFFF;
	--wp--preset--color--superficie-2: #EEF0F7;
	--wp--preset--color--borda: #DADDEA;
	--wp--preset--color--texto: #14151C;
	--wp--preset--color--texto-suave: #555A6E;
	--wp--preset--color--azul: #3F5CF0;
	--wp--preset--color--roxo: #9A3FE0;
	--wp--preset--color--link: #3F5CF0;
	--wp--preset--color--ok: #13804F;
	--wp--preset--color--alerta: #9A6400;
	--wp--preset--color--erro: #C21F3A;
	color-scheme: light;
}
html[data-tema="claro"] body { background-color: var(--wp--preset--color--fundo); color: var(--wp--preset--color--texto); }
.iat-logo-site .iat-logo--claro { display: none; }
html[data-tema="claro"] .iat-logo-site .iat-logo--escuro { display: none; }
html[data-tema="claro"] .iat-logo-site .iat-logo--claro { display: block; }
html[data-tema="claro"] .iat-topo { background: color-mix(in srgb, var(--iat-fundo) 88%, transparent); }
html[data-tema="claro"] .iat-marca { background: #14151C; }

.iat-tema-botao { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--iat-borda); background: var(--iat-superficie); color: var(--iat-texto); cursor: pointer; transition: border-color 140ms, transform 140ms; }
.iat-tema-botao:hover { border-color: var(--iat-azul); transform: rotate(-12deg); }
.iat-tema-botao .iat-ico-sol { display: block; }
.iat-tema-botao .iat-ico-lua { display: none; }
html[data-tema="claro"] .iat-tema-botao .iat-ico-sol { display: none; }
html[data-tema="claro"] .iat-tema-botao .iat-ico-lua { display: block; }

/* A órbita continua um "céu" escuro nos dois temas (os nomes são desenhados em claro no canvas). */
html[data-tema="claro"] .iat-orbita {
	--iat-fundo: #0E0F14; --iat-superficie: #171923; --iat-superficie-2: #1F2230; --iat-borda: #2A2E3F;
	--iat-texto: #E9EAF2; --iat-texto-suave: #A3A7BA; --iat-azul: #5271FF; --iat-roxo: #C066FF;
	background-color: #0E0F14; color: #E9EAF2;
}

/* ================= Home D: ajustes do staging (1.0.2) ================= */
html .iat-home :is(h1, h2, h3) { color: var(--iat-texto); }
html .iat-home .iat-secao__cab h2 { font-size: 1.5rem; line-height: 1.2; }
html .iat-home .iat-cat h3 { font-size: 1.15rem; line-height: 1.2; }
html .iat-home .iat-gcard h3 { font-size: 1.02rem; line-height: 1.3; }
html .iat-home .iat-orbita h2 { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.1; color: var(--iat-texto); }
html .iat-home .iat-hero__lado > .iat-tag { justify-self: center; margin: 0 0 30px; position: relative; z-index: 6; }
.iat-faixa__trilho ul { animation-duration: var(--iat-faixa-duracao, 120s) !important; }

/* ================= Páginas ainda feitas no Elementor (transição) =================
   Foram desenhadas para fundo claro (o DarkMySite escurecia). No tema escuro, o texto padrão do Elementor
   (#000 / #1f2124) vira o texto do tema; cores definidas em cada widget continuam valendo. */
html[data-tema="escuro"] .elementor { color: var(--iat-texto); }
html[data-tema="escuro"] .elementor :where(p, li, span, label, h1, h2, h3, h4, h5, h6, .e-filter-item, .elementor-heading-title) { color: var(--iat-texto); }
html[data-tema="escuro"] [class*="elementor-kit-"] { --e-global-color-text: #E9EAF2; --e-global-color-secondary: #E9EAF2; }