/*
Theme Name: KFTV News
Theme URI: https://kftv.com.br
Author: KFTV
Author URI: https://kftv.com.br
Description: Tema de blocos para sites de notícias, com a identidade visual do KFTV App: cartões arredondados, tipografia do sistema, degradê roxo e modo escuro opcional (botão no menu, ligado em Aparência → Opções do tema). Inclui a variação de estilo K2 News (azul) — troque em Aparência → Editor → Estilos.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kftv-news
Tags: news, blog, block-patterns, full-site-editing, wide-blocks, style-variations
*/

/*
 * Quase todo o visual está em theme.json. Aqui ficam só:
 * - o modo escuro (as cores escuras de cada variação ficam em settings.custom.dark), ligado pela
 *   classe kftv-escuro no <html> (inc/modo-escuro.php);
 * - detalhes que o theme.json ainda não alcança (barra do topo translúcida, cartões, "Em alta",
 *   botões de compartilhar).
 */

:root {
	color-scheme: light;
}

/* html.kftv-escuro vence o :root das cores que o WordPress imprime depois deste arquivo. */
html.kftv-escuro {
	color-scheme: dark;
	--wp--preset--color--base: var(--wp--custom--dark--base);
	--wp--preset--color--surface: var(--wp--custom--dark--surface);
	--wp--preset--color--contrast: var(--wp--custom--dark--contrast);
	--wp--preset--color--contrast-2: var(--wp--custom--dark--contrast-2);
	--wp--preset--color--contrast-3: var(--wp--custom--dark--contrast-3);
	--wp--preset--color--line: var(--wp--custom--dark--line);
	--wp--preset--color--soft: var(--wp--custom--dark--soft);
	--wp--preset--color--accent: var(--wp--custom--dark--accent);
	--wp--custom--header-bg: var(--wp--custom--dark--header-bg);
}

body {
	-webkit-font-smoothing: antialiased;
}

a {
	text-underline-offset: 0.18em;
}

/*
 * Barra do topo: fixa e translúcida, como no app. O desfoque fica numa camada de fundo (::before):
 * no próprio topo, ele prenderia o menu lateral (posição fixa) dentro da altura da barra.
 */
.kftv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kftv-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--header-bg);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

/* O WordPress embrulha a parte "Topo" numa caixa da mesma altura, que não deixaria a barra grudar. */
.wp-block-template-part:has(> .kftv-header) {
	display: contents;
}

.admin-bar .kftv-header {
	top: var(--wp-admin--admin-bar--height, 0);
}

.kftv-header .wp-block-site-logo .custom-logo {
	height: 34px;
	width: auto;
}

/* O logo é a referência dos doodles (inc/doodles.php), que ficam por cima dele. */
.kftv-header .wp-block-site-logo {
	position: relative;
	line-height: 0;
}

/* Classe repetida: o WordPress pinta o menu aberto de branco com um seletor mais forte. */
.kftv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Faixa de editorias embaixo da barra: rola para o lado no celular. */
.kftv-editorias {
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}

.kftv-editorias::-webkit-scrollbar {
	display: none;
}

/*
 * Centralizadas quando cabem; quando passam da largura, começam da esquerda e rolam para o lado
 * (a lista tem a largura do conteúdo e margem automática, que vira 0 quando não sobra espaço).
 */
.kftv-editorias .wp-block-categories {
	display: flex;
	gap: 8px;
	width: max-content;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.kftv-editorias .wp-block-categories li a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.kftv-editorias .wp-block-categories li a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Cartões (estilo "Cartão" dos grupos e das listas de posts). */
.is-style-kftv-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--custom--shadow);
	overflow: hidden;
}

.kftv-card-link {
	transition: transform 0.2s ease;
}

.kftv-card-link:hover {
	transform: translateY(-2px);
}

.wp-block-post-featured-image img {
	object-fit: cover;
}

/* Etiqueta da editoria (a primeira categoria do post). */
.wp-block-post-terms.is-style-kftv-pill a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-post-terms.is-style-kftv-pill .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms.is-style-kftv-pill a:not(:first-child) {
	display: none;
}

/* Manchete: texto sobre a foto, com o degradê escuro por baixo. */
.kftv-manchete .wp-block-cover {
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

.kftv-manchete .wp-block-post-terms.is-style-kftv-pill a {
	background: var(--wp--preset--gradient--brand);
	color: #fff;
}

.kftv-manchete a {
	color: #fff;
}

/* Lista de últimas: miniatura à direita, como as linhas de notícia do app. */
.kftv-lista .wp-block-post-template > li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.kftv-lista .wp-block-post-featured-image {
	flex-shrink: 0;
}

/* "Em alta": números grandes com o degradê, como a página Trends. */
.kftv-em-alta .wp-block-post-template {
	counter-reset: em-alta;
}

.kftv-em-alta .wp-block-post-template > li {
	counter-increment: em-alta;
	display: flex;
	gap: 14px;
	align-items: baseline;
}

.kftv-em-alta .wp-block-post-template > li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.kftv-em-alta .wp-block-post-template > li::before {
	content: counter(em-alta);
	min-width: 1.1em;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Paginação em "pílulas". */
/* Paginação: mesmo espaço entre todas as pílulas e respiro até a borda do card. */
.wp-block-query-pagination.wp-block-query-pagination {
	gap: 8px;
	margin-block: var(--wp--preset--spacing--30);
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-block;
	min-width: 38px;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	text-align: center;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--gradient--button);
	border-color: transparent;
	color: #fff;
}

/* Botões de compartilhar (inc/share.php). */
.kftv-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-block: var(--wp--preset--spacing--40);
}

.kftv-share__label {
	margin-right: 4px;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.kftv-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.kftv-share__btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.kftv-share__btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.kftv-share__btn--native {
	display: none;
	border-color: transparent;
	background: var(--wp--preset--gradient--button);
	color: #fff;
}

.kftv-share__btn--native:hover {
	color: #fff;
}

.kftv-share.has-native .kftv-share__btn--native {
	display: inline-flex;
}

/* Aviso do app: cartão com o degradê. */
.kftv-app-banner a.wp-block-button__link {
	background: #fff;
	color: var(--wp--custom--banner-button);
}

/* Imagens dentro das notícias com cantos arredondados. */
.wp-block-post-content .wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--medium);
}

.kftv-manchete .wp-block-post-featured-image img {
	border-radius: 0;
}

@media (max-width: 781px) {
	.kftv-lista .wp-block-post-featured-image {
		width: 96px !important;
	}

	.kftv-ocultar-celular {
		display: none !important;
	}
}

/* Com logo, o nome do site fica só para leitores de tela. */
.kftv-header .wp-block-site-logo + .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.kftv-header .wp-block-search__button {
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	padding: 8px;
}

/* Barra da logo: menu à esquerda, logo no centro, busca à direita. */
.kftv-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
}

.kftv-bar > * {
	margin-block: 0 !important;
}

.kftv-bar > :first-child {
	justify-self: start;
}

.kftv-bar > :last-child {
	justify-self: end;
}

.kftv-bar .wp-block-navigation__responsive-container-open {
	padding: 8px;
	border-radius: 999px;
}

.kftv-bar .wp-block-navigation__responsive-container-open svg,
.kftv-bar .wp-block-search__button svg {
	width: 26px;
	height: 26px;
}

.kftv-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 18px;
	font-size: 22px;
	font-weight: 700;
}

/* Busca aberta: o campo aparece por cima da barra, sem empurrar a logo. */
.kftv-bar .wp-block-search {
	position: relative;
}

.kftv-bar .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 2;
	width: min(340px, calc(100vw - 32px)) !important;
	transform: translateY(-50%);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow);
}

.kftv-bar .wp-block-search__input {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	padding-inline: 16px;
}

/* Etiqueta da editoria + selos lado a lado nos cartões. */
.kftv-etiquetas {
	align-items: center;
}

/* Selos: Urgente, Ao vivo e Em atualização (inc/selos.php). */
.kftv-selos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.kftv-selo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--urgent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.kftv-selo--em-atualizacao {
	background: var(--wp--preset--color--updating);
}

.kftv-selo--ao-vivo::before,
.kftv-selo--em-atualizacao::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: kftv-pulso 1.4s ease-in-out infinite;
}

@keyframes kftv-pulso {
	50% {
		opacity: 0.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kftv-selo::before {
		animation: none;
	}
}

/* Autor com foto redonda e datas da notícia. */
/* Autor, ponto e datas centralizados na mesma linha (as datas podem ter 2 linhas). */
.kftv-meta {
	align-items: center !important;
}

.kftv-meta > *,
.kftv-meta p {
	margin: 0 !important;
	line-height: 1.4;
}

.kftv-autor {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.kftv-autor .wp-block-post-author__avatar {
	margin: 0;
}

.kftv-autor .wp-block-post-author__avatar img {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.kftv-autor .wp-block-post-author__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.kftv-autor .wp-block-post-author__name a {
	text-decoration: none;
}

.kftv-datas {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

/* Na página da notícia, a faixa de editorias embaixo da barra da logo não aparece. */
body.single-post .kftv-editorias {
	display: none;
}

.kftv-datas > time,
.kftv-datas__atualizado {
	display: block;
	white-space: nowrap;
}

/* Barra da rede KFTV (inc/rede.php): cinza-escura, acima da barra da logo. */
.kftv-rede {
	display: flex;
	justify-content: center;
	margin-block: 0 !important;
	padding-block: 7px;
	background: var(--wp--custom--rede-bg);
}

.kftv-rede a {
	display: inline-flex;
	border-radius: 4px;
}

.kftv-rede img {
	display: block;
	height: 20px;
	width: auto;
	border-radius: 4px;
}

.kftv-header > .kftv-bar {
	margin-block-start: 0 !important;
}

/* Cartão vermelho do Urgente no topo da home (inc/urgente.php). */
.kftv-urgentes {
	margin-bottom: var(--wp--preset--spacing--40);
}

.kftv-urgente-card {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--custom--urgente-bg);
	box-shadow: 0 10px 30px rgba(90, 8, 14, 0.35);
	color: #fff;
}

.kftv-urgente-card > * {
	margin-block: 0 !important;
}

.kftv-urgente-card .wp-block-post-featured-image {
	height: 100%;
}

.kftv-urgente-card .wp-block-post-featured-image img {
	height: 100%;
	border-radius: 0;
}

.kftv-urgente-texto {
	padding: var(--wp--preset--spacing--40);
}

.kftv-urgente-card .wp-block-post-title a,
.kftv-urgente-card .wp-block-post-title a:hover {
	color: #fff;
}

.kftv-urgente-card .wp-block-post-excerpt {
	color: rgba(255, 255, 255, 0.85);
}

.kftv-urgente-card .wp-block-post-date {
	color: rgba(255, 255, 255, 0.7);
}

.kftv-urgente-card .wp-block-post-terms.is-style-kftv-pill a {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* Selo Urgente: ponto piscando e anel pulsando. */
.kftv-selo--urgente {
	--kftv-alerta: rgba(217, 45, 32, 0.6);
	animation: kftv-alerta 1.6s ease-out infinite;
}

.kftv-selo--urgente::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: kftv-pisca 0.8s steps(2, jump-none) infinite;
}

.kftv-urgente-card .kftv-selo--urgente {
	--kftv-alerta: rgba(255, 255, 255, 0.65);
	background: #fff;
	color: #A8141C;
}

@keyframes kftv-alerta {
	0% {
		box-shadow: 0 0 0 0 var(--kftv-alerta);
	}

	100% {
		box-shadow: 0 0 0 9px transparent;
	}
}

@keyframes kftv-pisca {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kftv-selo--urgente,
	.kftv-selo--urgente::before {
		animation: none;
	}
}

@media (max-width: 781px) {
	.kftv-urgente-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.kftv-urgente-card .wp-block-post-featured-image img {
		aspect-ratio: 16 / 9;
	}
}

/* Botão flutuante do Instagram (inc/instagram.php). */
.kftv-insta {
	position: fixed;
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 10px;
}

.kftv-insta__botao {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: #fff;
	flex-shrink: 0;
}

.kftv-insta__botao svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.kftv-insta__balao {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: min(240px, calc(100vw - 104px));
	padding: 10px 8px 10px 14px;
	border-radius: 18px 18px 4px 18px;
	background: linear-gradient(100deg, #7B2FB0 0%, #C1357F 55%, #D62A62 100%);
	box-shadow: 0 8px 24px rgba(120, 30, 110, 0.35);
	animation: kftv-balao 0.35s ease-out;
}

.kftv-insta__balao[hidden] {
	display: none;
}

.kftv-insta__balao a {
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.kftv-insta__fechar {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	font-size: 20px;
	line-height: 1;
	padding: 2px 6px;
	cursor: pointer;
}

.kftv-insta.is-chamando .kftv-insta__botao {
	animation: kftv-chamando 1.8s ease-in-out infinite;
}

@keyframes kftv-balao {
	from {
		opacity: 0;
		transform: translateX(12px) scale(0.92);
	}
}

/* Pulinho + balanço, com um anel saindo do botão. */
@keyframes kftv-chamando {
	0%, 55%, 100% {
		transform: none;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(214, 36, 159, 0.5);
	}

	10% {
		transform: scale(1.12) rotate(-10deg);
	}

	20% {
		transform: scale(1.12) rotate(10deg);
	}

	30% {
		transform: scale(1.12) rotate(-6deg);
	}

	40% {
		transform: scale(1) rotate(0);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 14px rgba(214, 36, 159, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kftv-insta__balao,
	.kftv-insta.is-chamando .kftv-insta__botao {
		animation: none;
	}
}

/* Identificação do site de origem / do canal: foto redonda + nome + verificado (inc/feeds.php). */
.kftv-fonte {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.kftv-fonte img,
.kftv-fonte__inicial {
	/* !important: regras de foto dos cartões (lista, cartão vermelho) não podem esticar a foto do site. */
	width: 20px !important;
	height: 20px !important;
	max-width: none;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.kftv-fonte__inicial {
	display: grid;
	place-items: center;
	background: var(--wp--preset--gradient--brand);
	color: #fff;
	font-size: 11px;
}

.kftv-verificado {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

.kftv-urgente-card .kftv-fonte,
.kftv-urgente-card .kftv-verificado {
	color: #fff;
}

/* Selo branco com o check vazado (molde em inc/feeds.php): o check mostra o vermelho do card. */
.kftv-urgente-card .kftv-verificado polygon {
	mask: url(#kftv-verificado-vazado);
}

.kftv-urgente-card .kftv-verificado path {
	display: none;
}

/* Card de Vídeos (inc/videos.php). */
.kftv-videos {
	margin-block: var(--wp--preset--spacing--50) 0;
}

.kftv-videos h2 {
	margin-bottom: 16px;
}

.kftv-videos__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kftv-videos__perfil {
	font-size: 15px;
}

.kftv-videos__perfil img {
	width: 32px !important;
	height: 32px !important;
}

.kftv-videos__perfil .kftv-verificado {
	width: 17px;
	height: 17px;
}

.kftv-videos__seguir {
	padding: 7px 18px;
	border-radius: 999px;
	background: var(--wp--preset--gradient--button);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
}

.kftv-videos__seguir:hover {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.08);
}

.kftv-videos__lista {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}

.kftv-videos__item {
	display: grid;
	gap: 6px;
	align-content: start;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kftv-videos__item:hover {
	text-decoration: none;
}

.kftv-videos__item:hover .kftv-videos__titulo {
	color: var(--wp--preset--color--accent);
}

.kftv-videos__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--small);
}

.kftv-videos__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.kftv-videos__thumb svg {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	fill: #fff;
}

.kftv-videos__titulo {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.kftv-videos__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.kftv-videos__views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.kftv-videos__views svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.kftv-videos__views + *::before {
	content: "·";
	margin-right: 6px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* No celular, os vídeos rolam para o lado. */
@media (max-width: 781px) {
	.kftv-videos__lista {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.kftv-videos__lista::-webkit-scrollbar {
		display: none;
	}

	.kftv-videos__item {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
}

/* Perfil no topo do menu lateral (inc/perfil.php), como no KFTV App. */
.kftv-perfil {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .kftv-perfil {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	width: 100%;
	margin-bottom: 8px;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kftv-perfil__foto {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.kftv-perfil__nome {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--contrast);
	font-size: 17px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: -0.01em;
}

.kftv-perfil__nome .kftv-verificado {
	width: 18px;
	height: 18px;
}

.kftv-perfil__redes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.kftv-perfil__rede {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.kftv-perfil__rede:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.kftv-perfil__rede svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/*
 * Menu lateral no computador: painel à esquerda com 1/3 da tela (entre 360 e 440px); o resto
 * do site fica de fundo, desfocado e escurecido. Tocar no fundo fecha (script em functions.php).
 * No celular continua ocupando a tela toda.
 */
@media (min-width: 782px) {
	.kftv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
		padding: 0;
		background: rgba(10, 6, 20, 0.45);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		cursor: pointer;
	}

	.kftv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
		width: min(440px, max(360px, 33.333vw));
		max-width: none;
		height: 100%;
		margin: 0;
		padding: var(--wp--preset--spacing--40);
		overflow-y: auto;
		background: var(--wp--preset--color--base);
		box-shadow: 12px 0 40px rgba(0, 0, 0, 0.25);
		cursor: auto;
		animation: kftv-menu-entra 0.25s ease-out;
	}

	.kftv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	@keyframes kftv-menu-entra {
		from {
			transform: translateX(-100%);
		}
	}
}

@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
	.kftv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
		animation: none;
	}
}

/* Espaços de anúncio (inc/anuncios.php): altura reservada para o texto não pular. */
.kftv-anuncio {
	display: grid;
	gap: 6px;
	justify-items: center;
	margin-block: var(--wp--preset--spacing--40);
	clear: both;
}

.kftv-anuncio__rotulo {
	color: var(--wp--preset--color--contrast-3);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kftv-anuncio ins.adsbygoogle {
	width: 100%;
	min-height: 250px;
}

.kftv-anuncio--home_destaques ins.adsbygoogle {
	min-height: 120px;
}

.kftv-anuncio-item {
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--line);
}

.kftv-anuncio-item .kftv-anuncio {
	margin-block: var(--wp--preset--spacing--30);
}

.kftv-anuncio--home_lateral {
	position: sticky;
	top: 130px;
}

@media (max-width: 781px) {
	.kftv-anuncio--home_lateral {
		display: none;
	}
}

/*
 * Tamanho máximo das imagens no computador (no celular elas já ocupam a largura da tela):
 * - foto de destaque do post: até 960px de largura e 540px de altura;
 * - imagens dentro do texto: até 560px de altura (fotos em pé não tomam a tela toda);
 * - fotos dos cartões da home: até 420px de altura.
 */
@media (min-width: 782px) {
	.single .wp-block-post-featured-image.alignwide {
		max-width: 960px;
		margin-inline: auto !important;
	}

	.single .wp-block-post-featured-image.alignwide img {
		max-height: 540px;
	}

	.wp-block-post-content img {
		width: auto;
		max-width: 100%;
		max-height: 560px;
		margin-inline: auto;
	}

	.wp-block-post-content .wp-block-image {
		text-align: center;
	}

	.kftv-card-link .wp-block-post-featured-image img,
	.kftv-urgente-card .wp-block-post-featured-image img {
		max-height: 420px;
	}
}

/* Legenda/crédito das fotos (destaque e dentro do texto): letra pequena com ícone de câmera. */
.kftv-legenda,
.wp-block-post-content .wp-element-caption {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0;
	color: var(--wp--preset--color--contrast-3);
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
}

.kftv-legenda::before,
.wp-block-post-content .wp-element-caption::before {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.8l1.5-2.2h6.4L16.7 7h2.8A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='12.8' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.8l1.5-2.2h6.4L16.7 7h2.8A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='12.8' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kftv-legenda a {
	color: inherit;
}

/* Chamada em pílula depois do 1º parágrafo (inc/post-extras.php); cores vêm do painel. */
.kftv-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block: var(--wp--preset--spacing--40);
	padding: 8px 8px 8px 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--kftv-cta-fundo) 0%, var(--kftv-cta-fundo2) 100%);
	color: var(--kftv-cta-texto);
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.kftv-cta__icone {
	position: relative;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--kftv-cta-botao);
	color: var(--kftv-cta-botao-texto);
	animation: kftv-cta-ondas 2.2s ease-out infinite;
}

.kftv-cta__icone svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.kftv-cta .kftv-cta__icone img {
	width: 100%;
	max-height: none;
	margin: 0;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

@keyframes kftv-cta-ondas {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--kftv-cta-botao) 55%, transparent);
	}

	100% {
		box-shadow: 0 0 0 14px transparent;
	}
}

.kftv-cta__texto {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	line-height: 1.3;
}

.kftv-cta__texto strong {
	color: var(--kftv-cta-destaque);
	font-weight: 700;
}

.kftv-cta__botao {
	flex-shrink: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--kftv-cta-botao);
	color: var(--kftv-cta-botao-texto);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

.kftv-cta:hover .kftv-cta__botao {
	filter: brightness(1.1);
}

@media (max-width: 480px) {
	.kftv-cta {
		gap: 10px;
	}

	.kftv-cta__texto {
		font-size: 13px;
	}

	.kftv-cta__botao {
		padding: 8px 12px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kftv-cta__icone {
		animation: none;
	}
}

/*
 * Telas de toque (celular): o "passar o mouse" fica preso no item tocado — no iPhone, o título do
 * vídeo tocado ao rolar a lista ficava roxo. Ali os efeitos de hover não valem.
 */
@media (hover: none) {
	.kftv-videos__item:hover .kftv-videos__titulo {
		color: inherit;
	}

	.kftv-card-link:hover {
		transform: none;
	}

	.wp-block-post-title a:hover {
		color: var(--wp--preset--color--contrast);
	}

	.kftv-urgente-card .wp-block-post-title a:hover {
		color: #fff;
	}

	.kftv-editorias .wp-block-categories li a:hover,
	.kftv-perfil__rede:hover,
	.kftv-share__btn:not(.kftv-share__btn--native):hover {
		border-color: var(--wp--preset--color--line);
		color: var(--wp--preset--color--contrast);
	}
}

/* Lista de vídeos no celular: margem no fim da rolagem e encaixe com o mesmo respiro do card. */
@media (max-width: 781px) {
	.kftv-videos__lista {
		scroll-padding-inline: var(--wp--preset--spacing--30);
	}

	.kftv-videos__lista::after {
		content: "";
		flex: 0 0 1px;
	}
	/* Sem isso, a fila de vídeos alarga a página inteira no celular (e o menu lateral junto). */
	.kftv-videos__card {
		contain: paint;
	}
}

/* Cartão "Apoie via Pix" no fim do menu lateral (inc/perfil.php), igual ao do KFTV App. */
.kftv-pix {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .kftv-pix {
	display: grid;
	gap: 8px;
	align-self: stretch;
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
	padding: 16px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
}

.kftv-pix__titulo {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
}

.kftv-pix__titulo svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
	stroke-linejoin: round;
}

.kftv-pix__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--gradient--button);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.kftv-pix__botao svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.kftv-pix__botao.is-copiada svg {
	display: none;
}

/* Aba Jogos no menu lateral (inc/perfil.php): igual ao KFTV App, com o fundo roxo pulsando. */
.wp-block-navigation .kftv-jogos {
	position: relative;
	align-self: stretch;
	width: 100%;
	border-radius: 12px;
	isolation: isolate;
}

.wp-block-navigation .kftv-jogos::before {
	content: "";
	position: absolute;
	inset: -6px -12px;
	z-index: -1;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	opacity: 0.06;
	animation: kftv-jogos-pulso 2.2s ease-in-out infinite;
}

@keyframes kftv-jogos-pulso {
	50% {
		opacity: 0.2;
	}
}

.wp-block-navigation .kftv-jogos .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--wp--preset--color--accent) !important;
}

.kftv-jogos__icone,
.kftv-jogos__seta {
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kftv-jogos__icone {
	width: 24px;
	height: 24px;
}

.kftv-jogos .wp-block-navigation-item__label {
	flex: 1;
}

.kftv-jogos__seta {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--contrast-3);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .kftv-jogos::before {
		animation: none;
		opacity: 0.12;
	}
}

/* Página do autor (inc/pagina-autor.php). */
.kftv-autor-topo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--wp--preset--spacing--50) !important;
	padding-block: var(--wp--preset--spacing--40);
	text-align: center;
}

.kftv-autor-topo__foto {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--wp--custom--shadow);
}

.kftv-autor-topo__nome {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.kftv-autor-topo__nome .kftv-verificado {
	width: 22px;
	height: 22px;
}

.kftv-autor-topo__bio {
	max-width: 560px;
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: 16px;
	line-height: 1.5;
}

.kftv-autor-topo__total {
	margin: 0;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Links institucionais do rodapé (inc/rodape.php). */
.kftv-rodape-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

.kftv-rodape-links a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}

.kftv-rodape-links a:hover {
	color: var(--wp--preset--color--accent);
}

/* Cores dos doodles do logo (assets/doodles/doodles.css), no claro e no escuro, como no app. */
:root {
	--dd-neve: #9CC2FF;
	--dd-f1: #1F5BD6;
	--dd-f2: #F0148C;
	--dd-f3: #FF6B1A;
	--dd-teia: #1B1530;
	--dd-teia-opacidade: 0.35;
	--dd-morcego: #1A1A1A;
	--dd-furos: #3B1E8A;
	--dd-luz: #FFC94D;
	--dd-cruz: #1A1A1A;
	--dd-cadeira: #6127E1;
}

html.kftv-escuro {
	--dd-neve: #F1EAFF;
	--dd-f1: #F1EAFF;
	--dd-f2: #A177FB;
	--dd-f3: #C9B3FF;
	--dd-teia: #F5F3FA;
	--dd-teia-opacidade: 0.45;
	--dd-morcego: #E9E4F5;
	--dd-furos: #0E0A18;
	--dd-luz: #E9DFFF;
	--dd-cruz: #F1EAFF;
	--dd-cadeira: #A177FB;
}

html.kftv-escuro .kftv-doodle--aniversario {
	--dd-k1: #FF6FB5;
	--dd-k2: #FF6B1A;
	--dd-k3: #F1EAFF;
	--dd-k4: #9CC2FF;
	--dd-k5: #6BE01B;
}

html.kftv-escuro .kftv-doodle--carnaval {
	--dd-k3: #F1EAFF;
}


/* Post publicitário (inc/publicidade.php). */
.kftv-etiqueta-publicidade {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kftv-oferecimento {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none !important;
}

.kftv-oferecimento__rotulo {
	color: var(--wp--preset--color--contrast-3);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kftv-oferecimento__marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.kftv-oferecimento img,
.kftv-oferecimento__inicial {
	flex-shrink: 0;
	width: 44px !important;
	height: 44px !important;
	max-width: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: #fff;
	object-fit: contain;
}

.kftv-oferecimento__inicial {
	display: grid;
	place-items: center;
	background: var(--wp--preset--gradient--brand);
	color: #fff;
	font-weight: 800;
}

.kftv-oferecimento__nome {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

/* Nos cartões: um pouco menor, na mesma linha da etiqueta. */
.kftv-oferecimento--cartao {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.kftv-oferecimento--cartao img,
.kftv-oferecimento--cartao .kftv-oferecimento__inicial {
	width: 30px !important;
	height: 30px !important;
	border-radius: 9px;
}

.kftv-oferecimento--cartao .kftv-oferecimento__nome {
	font-size: 15px;
}

.kftv-oferecimento--cartao .kftv-oferecimento__rotulo {
	display: none;
}

.kftv-oferecimento--cartao .kftv-oferecimento__marca::before {
	content: "Oferecimento";
	order: -1;
	color: var(--wp--preset--color--contrast-3);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* No post publicitário, sem o ponto e as datas ao lado do "Oferecimento". */
.kftv-post-publicidade .kftv-meta > p {
	display: none;
}

/* Rodízio dos publicitários (inc/publicidade.php): um por vez; sem JavaScript, o primeiro. */
.wp-block-post-template:not(.rodizio-pronto) > .kftv-rodizio ~ .kftv-rodizio,
.wp-block-post-template.rodizio-pronto > .kftv-rodizio:not(.is-vez) {
	display: none !important;
}

.kftv-copyright {
	margin: 0;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Post sem autor: sem o "·" solto antes da data. */
.kftv-meta > p:first-child {
	display: none;
}

/* Celular: as datas descem para a linha de baixo do autor, sem o "·" entre eles. */
@media (max-width: 599px) {
	.kftv-meta > p:has(+ .kftv-datas, + p .kftv-datas) {
		display: none;
	}

	.kftv-meta > .kftv-datas,
	.kftv-meta > p:has(.kftv-datas) {
		flex-basis: 100%;
	}
}

/* Campos de comentário (e outros formulários) no tom do tema, e não cinza do navegador. */
.wp-block-post-comments-form :is(input:not([type="submit"]):not([type="checkbox"]), textarea) {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wp-block-post-comments-form :is(input, textarea):focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.wp-block-post-comments-form input[type="submit"] {
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--gradient--button);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Celular: espaço no fim do rodapé para o botão do Instagram não cobrir os links. */
@media (max-width: 781px) {
	body:has(.kftv-insta) .wp-site-blocks > :last-child > footer.wp-block-group {
		padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/*
 * Extensões do navegador (baixadores de vídeo etc.) enfiam botões entre os vídeos e ocupam
 * casas da grade; aqui só os vídeos entram nela.
 */
.kftv-videos__lista > :not(.kftv-videos__item),
.kftv-videos__thumb > :not(img):not(svg) {
	display: none !important;
}

/* Miniaturas dos vídeos sempre em 16:9 (a altura do HTML e a regra geral de imagens esticavam). */
.kftv-videos__thumb {
	aspect-ratio: 16 / 9;
}

.kftv-videos__thumb img {
	height: 100% !important;
	max-height: none !important;
}

/* Datas do post: na mesma linha no computador ("… · Atualizado em …"); quebra só no celular. */
@media (min-width: 600px) {
	.kftv-datas {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 6px;
	}

	.kftv-datas__atualizado::before {
		content: "·";
		margin-right: 6px;
	}
}

/* Botão "Modo escuro" no menu lateral (inc/modo-escuro.php). Só no computador: no celular é automático. */
.kftv-tema-botao {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .kftv-tema-botao {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.kftv-tema-botao > svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
	stroke-linejoin: round;
}

.kftv-tema-botao > span:first-of-type {
	flex: 1;
}

/* Chave liga/desliga, como a do iPhone. */
.kftv-tema-botao__chave {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
	transition: background 0.2s;
}

.kftv-tema-botao__chave::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s;
}

.kftv-tema-botao[aria-checked="true"] .kftv-tema-botao__chave {
	background: var(--wp--preset--gradient--button);
}

.kftv-tema-botao[aria-checked="true"] .kftv-tema-botao__chave::after {
	transform: translateX(18px);
}

.kftv-tema-botao:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kftv-tema-botao__chave,
	.kftv-tema-botao__chave::after {
		transition: none;
	}
}

/* Aviso de cookies (inc/cookies.php): cartão no rodapé da tela, acima de tudo. */
.kftv-cookies {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	left: 16px;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	box-sizing: border-box;
	max-width: 760px;
	margin-inline: auto;
	padding: 16px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	color: var(--wp--preset--color--contrast);
	animation: kftv-cookies-entra 0.3s ease-out;
}

.kftv-cookies[hidden] {
	display: none;
}

.kftv-cookies__texto {
	flex: 1 1 320px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.kftv-cookies__texto a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.kftv-cookies__botoes {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.kftv-cookies__botoes button {
	padding: 10px 22px;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

/* Mesmo peso visual para Aceitar e Recusar (a LGPD pede escolha livre). */
.kftv-cookies__recusar {
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.kftv-cookies__aceitar {
	border: 1px solid transparent;
	background: var(--wp--preset--gradient--button);
	color: #fff;
}

.kftv-cookies__botoes button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Com o aviso aberto, o botão do Instagram sai de cena para não ficar por cima. */
.kftv-cookies-aberto .kftv-insta {
	display: none;
}

@media (max-width: 599px) {
	.kftv-cookies__botoes {
		flex: 1 1 100%;
	}

	.kftv-cookies__botoes button {
		flex: 1;
	}
}

@keyframes kftv-cookies-entra {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kftv-cookies {
		animation: none;
	}
}