/* =========================================================
   Letreiro ALIEN — estilo sci-fi / neon
   Todas as cores vêm de variáveis CSS definidas inline pelo
   PHP, então dá para trocar tudo pelo painel de configurações.
   ========================================================= */

.letreiro-alien {
	--la-bg: #04070d;
	--la-text: #c8ffe4;
	--la-accent: #39ff9e;
	--la-alert: #ff4d6d;
	--la-warn: #ffc857;
	--la-muted: #6f8a80;
	--la-height: 44px;
	--la-font: 14px;
	--la-margin: 0px;
	--la-shift: -100%;
	--la-duration: 40s;

	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: var(--la-height);
	overflow: hidden;
	background: var(--la-bg);
	color: var(--la-text);
	font-family: var(--la-family, "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace);
	font-size: var(--la-font);
	line-height: 1;
	letter-spacing: 0.02em;
	border-top: 1px solid color-mix(in srgb, var(--la-accent) 35%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--la-accent) 35%, transparent);
	contain: content;
	z-index: 9998;
}

/* ---------------------------------------------------------
   Zera o espaço herdado do tema.
   A classe é repetida de propósito: dobra a especificidade
   (0,2,0) para vencer regras como ".entry-content > *" sem
   precisar de !important.
   --------------------------------------------------------- */

.letreiro-alien.letreiro-alien {
	margin: var(--la-margin, 0px) 0;
	padding: 0;
	line-height: 1;
	font-size: var(--la-font);
	font-family: var(--la-family, "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace);
	box-sizing: border-box;
}

.letreiro-alien.letreiro-alien > * {
	margin: 0;
	padding: 0;
}

/* Elementor costuma empurrar o widget para baixo. */
.elementor-widget-letreiro_alien .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* O navegador quebra um <div> que caiu dentro de um <p> e deixa
   parágrafos vazios grudados no letreiro — eles carregam a margem
   do tema. Regras com :has() ficam isoladas de propósito: se o
   navegador não suportar, só este bloco é ignorado. */
.letreiro-alien + p:empty {
	display: none;
}

p:empty:has(+ .letreiro-alien) {
	display: none;
}

.wp-block-shortcode:has(> .letreiro-alien) {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------
   Modo "colado" (la-flush): o espaço restante vem da margem
   dos elementos vizinhos, definida pelo tema. Aqui ela é
   anulada só nos vizinhos imediatos do letreiro.
   --------------------------------------------------------- */

.letreiro-alien.la-flush + * {
	margin-top: 0;
}

:has(+ .letreiro-alien.la-flush) {
	margin-bottom: 0;
}

/* Fallback para navegadores sem color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.letreiro-alien {
		border-top: 1px solid rgba(57, 255, 158, 0.35);
		border-bottom: 1px solid rgba(57, 255, 158, 0.35);
	}
}

/* ---------- Posicionamento ---------- */

.letreiro-alien.la-pos-top,
.letreiro-alien.la-pos-bottom {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99990;
}

.letreiro-alien.la-pos-top { top: 0; }
.letreiro-alien.la-pos-bottom { bottom: 0; }

/* A barra de administração do WordPress é fixa no topo e ficaria por cima
   do letreiro para quem está logado. Desce o letreiro na mesma medida. */
body.admin-bar .letreiro-alien.la-pos-top {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .letreiro-alien.la-pos-top {
		top: 46px;
	}
}

/* ---------- Viewport e trilho ---------- */

.letreiro-alien .la-viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-width: 0;
}

.letreiro-alien .la-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	will-change: transform;
	animation: la-scroll var(--la-duration) linear infinite;
}

.letreiro-alien .la-seq {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	flex: 0 0 auto;
}

@keyframes la-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--la-shift), 0, 0); }
}

.letreiro-alien.la-pause-hover:hover .la-track,
.letreiro-alien.la-pause-hover:focus-within .la-track {
	animation-play-state: paused;
}

/* Acessibilidade: quem pediu menos movimento não recebe marquee. */
@media (prefers-reduced-motion: reduce) {
	.letreiro-alien .la-track {
		animation: none;
	}
	.letreiro-alien .la-viewport {
		overflow-x: auto;
		scrollbar-width: thin;
	}
}

/* ---------- Itens ---------- */

.letreiro-alien .la-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 0 0.35em;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: opacity 0.2s ease;
}

.letreiro-alien a.la-item:hover,
.letreiro-alien a.la-item:focus-visible {
	text-decoration: none;
	opacity: 1;
	outline: none;
}

.letreiro-alien a.la-item:focus-visible .la-value {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.letreiro-alien .la-icon {
	font-size: 1.05em;
	opacity: 0.95;
	line-height: 1;
}

.letreiro-alien .la-label {
	font-size: var(--la-label-size, 0.78em);
	font-weight: var(--la-label-weight, 700);
	letter-spacing: var(--la-label-spacing, 0.14em);
	text-transform: var(--la-label-transform, uppercase);
	opacity: var(--la-label-opacity, 0.62);
}

.letreiro-alien .la-value {
	font-size: var(--la-value-size, 1em);
	font-weight: var(--la-value-weight, 600);
	font-variant-numeric: tabular-nums;
}

.letreiro-alien .la-note {
	font-size: var(--la-note-size, 0.8em);
	font-weight: var(--la-note-weight, 400);
	opacity: var(--la-note-opacity, 0.55);
	font-style: var(--la-note-style, italic);
}

.letreiro-alien .la-sep {
	flex: 0 0 auto;
	padding: 0 1.15em;
	font-size: 0.6em;
	opacity: 0.4;
	color: var(--la-accent);
	transform: translateY(-0.15em);
}

/* ---------- Tons semânticos ---------- */

.letreiro-alien .la-tone-accent .la-value { color: var(--la-accent); }
.letreiro-alien .la-tone-ok .la-value     { color: var(--la-text); }
.letreiro-alien .la-tone-warn .la-value   { color: var(--la-warn); }
.letreiro-alien .la-tone-alert .la-value  { color: var(--la-alert); }
.letreiro-alien .la-tone-muted            { opacity: 0.6; }
.letreiro-alien .la-tone-muted .la-value  { color: var(--la-muted); }

.letreiro-alien .la-tone-alert .la-icon {
	animation: la-blink 1.6s steps(2, end) infinite;
}

@keyframes la-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.letreiro-alien .la-tone-alert .la-icon { animation: none; }
}

/* ---------- Brilho neon ---------- */

.letreiro-alien.la-glow .la-value {
	text-shadow: 0 0 6px currentColor, 0 0 18px color-mix(in srgb, currentColor 45%, transparent);
}

.letreiro-alien.la-glow .la-sep {
	text-shadow: 0 0 8px var(--la-accent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.letreiro-alien.la-glow .la-value { text-shadow: 0 0 6px currentColor; }
}

/* ---------- Scanlines / textura CRT ---------- */

.letreiro-alien.la-scanlines::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.045) 0px,
		rgba(255, 255, 255, 0.045) 1px,
		transparent 1px,
		transparent 3px
	);
	mix-blend-mode: overlay;
	z-index: 3;
}

/* ---------- Bordas com fade ---------- */

.letreiro-alien .la-edge {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 48px;
	pointer-events: none;
	z-index: 2;
}

.letreiro-alien .la-edge-left {
	left: 0;
	background: linear-gradient(to right, var(--la-bg), transparent);
}

.letreiro-alien .la-edge-right {
	right: 0;
	background: linear-gradient(to left, var(--la-bg), transparent);
}

/* ---------- Temas alternativos ---------- */

.letreiro-alien.la-theme-ambar {
	--la-text: #ffe1a8;
	--la-accent: #ffb020;
	--la-muted: #8c7549;
}

.letreiro-alien.la-theme-gelo {
	--la-text: #d6f2ff;
	--la-accent: #46d7ff;
	--la-muted: #5f7d8c;
}

.letreiro-alien.la-theme-minimal {
	--la-text: #e8e8e8;
	--la-accent: #9aa0a6;
	--la-muted: #7a7f85;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.letreiro-alien.la-theme-minimal.la-glow .la-value,
.letreiro-alien.la-theme-minimal.la-glow .la-sep {
	text-shadow: none;
}

.letreiro-alien.la-theme-minimal.la-scanlines::after {
	display: none;
}

/* ---------- Telas pequenas ---------- */

@media (max-width: 640px) {
	.letreiro-alien {
		font-size: calc(var(--la-font) * 0.92);
	}
	.letreiro-alien .la-note {
		display: none;
	}
	.letreiro-alien .la-edge {
		width: 24px;
	}
	.letreiro-alien .la-sep {
		padding: 0 0.8em;
	}
}