/**
 * ============================================================
 *  Handorks Comic Kit — assets/kit.css
 * ============================================================
 *
 *  Usa as variáveis do tema Handorks Comic quando existem
 *  (ex.: --wp--preset--color--ouro). O valor depois da vírgula em
 *  var(--x, reserva) é usado se o tema não definir a variável: assim
 *  o plugin também funciona em outros temas.
 *
 *  ÍNDICE
 *   0. Variáveis
 *   1. Ícones das redes ([handorks_redes] e barra flutuante)
 *   2. WhatsApp flutuante em forma de balão de HQ
 *   3. Seletor de idiomas com bandeiras
 *   4. Movimento reduzido e impressão
 */

/* ===== 0. VARIÁVEIS ==================================================== */
.hck-redes,
.hck-redes-nav,
.hck-wa,
.hck-idiomas,
.hck-idiomas-wrap {
	--hck-tinta: var(--wp--preset--color--nanquim, #000);
	--hck-ouro: var(--wp--preset--color--ouro, #ffc107);
	--hck-papel: var(--wp--preset--color--papel, #fff6da);
	--hck-branco: var(--wp--preset--color--branco, #fff);
	--hck-fonte: var(--wp--preset--font-family--bangers, Impact, "Arial Black", sans-serif);
	/* Distância das bordas somando a área segura do iPhone (notch / barra). */
	--hck-margem: max(1rem, env(safe-area-inset-right), env(safe-area-inset-left));
	--hck-base: calc(1rem + env(safe-area-inset-bottom));
}

/* Texto só para leitores de tela (caso o tema ativo não defina). */
.hck-idiomas .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ===== 1. ÍCONES DAS REDES ============================================ */
.hck-redes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cada ícone é um "adesivo" redondo de HQ: fundo ouro, contorno de
 * nanquim e sombra dura. 48px = área de toque confortável. */
.hck-rede {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--hck-tinta);
	background-color: var(--hck-ouro);
	border: 3px solid var(--hck-tinta);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--hck-tinta);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, rotate 0.15s ease, translate 0.15s ease, box-shadow 0.15s ease;
}

.hck-rede svg {
	width: 22px;
	height: 22px;
}

/* No hover/foco, o adesivo ganha a COR OFICIAL da marca (--hck-cor,
 * definida no HTML por rede) e dá uma "tremidinha" de HQ. */
.hck-rede:hover,
.hck-rede:focus-visible {
	color: var(--hck-branco);
	background-color: var(--hck-cor, var(--hck-tinta));
	rotate: -8deg;
	translate: -2px -2px;
	box-shadow: 5px 5px 0 var(--hck-tinta);
}

.hck-rede:focus-visible {
	outline: 3px solid var(--wp--preset--color--ciano, #2ea8e6);
	outline-offset: 3px;
}

/* Barra lateral flutuante: só em telas LARGAS (≥ 1440px). Testado:
 * em 1280px ela invadia a borda dos quadros de 75rem do tema. No
 * celular/notebook as redes ficam no rodapé e na página de links. */
.hck-redes--flutuante {
	display: none;
}

@media (min-width: 90em) {
	.hck-redes--flutuante {
		position: fixed;
		top: 50%;
		z-index: 900;
		display: flex;
		flex-direction: column;
		translate: 0 -50%;
	}

	.hck-redes--flutuante.hck-lado-esquerda { left: var(--hck-margem); }
	.hck-redes--flutuante.hck-lado-direita  { right: var(--hck-margem); }

	.hck-redes--flutuante .hck-rede {
		width: 42px;
		height: 42px;
	}
}

/* ===== 2. WHATSAPP FLUTUANTE ========================================== */
/* O botão tem forma de BALÃO DE FALA: três cantos redondos e um
 * "pontudo" voltado para a borda da tela (a cauda do balão). */
.hck-wa {
	position: fixed;
	bottom: var(--hck-base);
	z-index: 950;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	color: var(--hck-branco);
	background-color: #25d366; /* verde oficial do WhatsApp */
	border: 4px solid var(--hck-tinta);
	box-shadow: 4px 4px 0 var(--hck-tinta);
	text-decoration: none;
	transition: rotate 0.15s ease, translate 0.15s ease, box-shadow 0.15s ease;
}

.hck-wa.hck-lado-direita {
	right: var(--hck-margem);
	border-radius: 50% 50% 6px 50%; /* cauda no canto inferior direito */
}

.hck-wa.hck-lado-esquerda {
	left: var(--hck-margem);
	border-radius: 50% 50% 50% 6px; /* cauda no canto inferior esquerdo */
}

.hck-wa svg {
	width: 32px;
	height: 32px;
}

.hck-wa:hover,
.hck-wa:focus-visible {
	rotate: -6deg;
	translate: -2px -2px;
	box-shadow: 6px 6px 0 var(--hck-tinta);
}

.hck-wa:focus-visible {
	outline: 3px solid var(--wp--preset--color--ciano, #2ea8e6);
	outline-offset: 4px;
}

/* Balão "Fale com a gente!" ao lado do botão. */
.hck-wa__balao {
	position: absolute;
	bottom: 50%;
	translate: 0 50%;
	padding: 0.45rem 0.8rem 0.35rem;
	color: var(--hck-tinta);
	background-color: var(--hck-branco);
	border: 3px solid var(--hck-tinta);
	border-radius: 1rem;
	box-shadow: 3px 3px 0 var(--hck-tinta);
	font-family: var(--hck-fonte);
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

.hck-lado-direita  .hck-wa__balao { right: calc(100% + 14px); }
.hck-lado-esquerda .hck-wa__balao { left: calc(100% + 14px); }

/* Mostra o balão no hover/foco. No celular (sem hover) ele não
 * aparece — evita cobrir o conteúdo da tela pequena. */
@media (hover: hover) {
	.hck-wa:hover .hck-wa__balao {
		opacity: 1;
		visibility: visible;
	}
}

.hck-wa:focus-visible .hck-wa__balao {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 40em) {
	.hck-wa {
		width: 54px;
		height: 54px;
	}

	.hck-wa svg {
		width: 28px;
		height: 28px;
	}
}

/* Entrada com "pop" de HQ, uma única vez ao carregar a página. */
@media (prefers-reduced-motion: no-preference) {
	.hck-wa {
		animation: hck-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
	}
}

@keyframes hck-pop {
	from { scale: 0; }
	to   { scale: 1; }
}

/* ===== 3. IDIOMAS ======================================================= */
.hck-idiomas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Selo de idioma: bandeira + sigla, como um adesivo de papel. */
.hck-idioma,
.hck-idiomas summary {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.3rem 0.7rem 0.2rem;
	color: var(--hck-tinta);
	background-color: var(--hck-papel);
	border: 3px solid var(--hck-tinta);
	border-radius: 0.4rem;
	box-shadow: 3px 3px 0 var(--hck-tinta);
	font-family: var(--hck-fonte);
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.hck-idioma img,
.hck-idiomas summary img {
	width: 24px;
	height: 16px;
	object-fit: cover;
	border: 1px solid var(--hck-tinta);
}

.hck-idioma:hover,
.hck-idioma:focus-visible {
	background-color: var(--hck-ouro);
	rotate: -3deg;
}

.hck-idioma.is-atual {
	background-color: var(--hck-ouro);
}

/* Versão flutuante: <details> nativo, abre a lista para CIMA. */
.hck-idiomas-wrap {
	position: fixed;
	bottom: var(--hck-base);
	z-index: 940;
}

.hck-idiomas-wrap.hck-lado-esquerda { left: var(--hck-margem); }
.hck-idiomas-wrap.hck-lado-direita  { right: var(--hck-margem); }

.hck-idiomas--flutuante summary {
	list-style: none; /* remove o triângulo padrão */
}

.hck-idiomas--flutuante summary::-webkit-details-marker {
	display: none;
}

.hck-idiomas--flutuante summary::after {
	content: "▲";
	font-size: 0.7em;
}

.hck-idiomas--flutuante[open] summary::after {
	content: "▼";
}

.hck-idiomas--flutuante .hck-idiomas__lista {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	flex-direction: column;
	padding: 0.6rem;
	background-color: var(--hck-branco);
	border: 3px solid var(--hck-tinta);
	border-radius: 0.6rem;
	box-shadow: 5px 5px 0 var(--hck-tinta);
}

.hck-lado-esquerda .hck-idiomas--flutuante .hck-idiomas__lista { left: 0; }
.hck-lado-direita  .hck-idiomas--flutuante .hck-idiomas__lista { right: 0; }

/* ===== 4. ACESSIBILIDADE E IMPRESSÃO =================================== */
@media (prefers-reduced-motion: reduce) {
	.hck-rede,
	.hck-wa,
	.hck-idioma {
		transition: none;
		rotate: none !important;
	}
}

@media print {
	.hck-wa,
	.hck-redes-nav,
	.hck-idiomas-wrap {
		display: none !important;
	}
}