/* ==========================================================================
   Jowtas Tree — base.css
   Reset moderno + design tokens (CSS variables) + tipografia base.
   Estes valores são padrões; serão sobrescritos pela options page (Fase 2)
   via <style> injetado no <head>.
   ========================================================================== */

:root {
	/* Cores — paleta padrão (dark/glassmorphism) */
	--jt-color-primary:    #9333ea;
	--jt-color-accent:     #ff3df5;
	--jt-color-bg:         #0a0015;
	--jt-color-bg-soft:    #120025;
	--jt-color-text:       #e8dcff;
	--jt-color-text-muted: #9b8cb5;
	--jt-color-heading:    #ffffff;
	--jt-color-border:     rgba(255, 255, 255, 0.08);

	/* Status */
	--jt-color-success: #22c55e;
	--jt-color-warning: #f59e0b;
	--jt-color-danger:  #ef4444;
	--jt-color-info:    #3b82f6;

	/* Status — variantes RGB para uso em rgba(var(--*-rgb), alpha).
	   Permite gerar glows/sombras dinâmicas mantendo a mesma cor base. */
	--jt-color-success-rgb: 34, 197, 94;
	--jt-color-warning-rgb: 245, 158, 11;
	--jt-color-danger-rgb:  239, 68, 68;
	--jt-color-info-rgb:    59, 130, 246;

	/* Variantes RGB padrão de primary/accent — sobrescritas pelo
	   dynamic-styles.php quando o usuário muda as cores na options page. */
	--jt-color-primary-rgb: 147, 51, 234;
	--jt-color-accent-rgb:  255, 61, 245;

	/* Glassmorphism */
	--jt-glass-bg:     rgba(255, 255, 255, 0.04);
	--jt-glass-border: rgba(255, 255, 255, 0.10);
	--jt-glass-blur:   16px;

	/* Tipografia — emoji fonts ANTES das system fonts (especialmente "Segoe UI"
	   no Windows, que tem Regional Indicators como glyphs de TEXTO e renderiza
	   🇧🇷 como "BR"). Combinado com font-variant-emoji: emoji no body, garante
	   que bandeiras e demais emojis apareçam coloridos em todos os browsers. */
	--jt-font-sans: "Montserrat", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jt-font-size-base: 16px;
	--jt-line-height: 1.6;

	/* Escala tipográfica (mobile-first).
	   --jt-fs-base e --jt-fs-sm são sobrescritas pelo dynamic-styles.php
	   com os valores configurados na options page. Os fallbacks aqui garantem
	   renderização correta caso a options page não tenha sido salva. */
	--jt-fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem); /* 12 → 12.8 */
	--jt-fs-sm:   13px;  /* auxiliar: datas, autor, legendas — configurável no admin */
	--jt-fs-base: 15px;  /* corpo: parágrafos, módulo texto — configurável no admin */
	--jt-fs-lg:   clamp(1.0625rem, 1rem  + 0.3vw, 1.15rem);  /* 17 → 18.4 */
	--jt-fs-xl:   clamp(1.2rem,    1.1rem + 0.5vw, 1.4rem);  /* 19.2 → 22.4 */
	--jt-fs-2xl:  clamp(1.375rem,  1.2rem + 0.8vw, 1.75rem); /* 22 → 28   */

	/* Espaçamento */
	--jt-space-1: 0.25rem;
	--jt-space-2: 0.5rem;
	--jt-space-3: 0.75rem;
	--jt-space-4: 1rem;
	--jt-space-5: 1.5rem;
	--jt-space-6: 2rem;
	--jt-space-7: 3rem;
	--jt-space-8: 4rem;

	/* Raios */
	--jt-radius-sm: 8px;
	--jt-radius:    14px;
	--jt-radius-lg: 22px;
	--jt-radius-full: 9999px;

	/* Sombras */
	--jt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--jt-shadow:    0 8px 28px rgba(0, 0, 0, 0.35);
	--jt-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);

	/* Layout */
	--jt-container-max: 896px;   /* desktop wide */
	--jt-container-pad: 1.25rem; /* padding lateral mobile */

	/* Header / Drawer */
	--jt-header-h: 64px;
	--jt-drawer-w: min(86vw, 360px);

	/* Espaçamento entre módulos (responsivo). Padrão muito compacto;
	   módulos podem sobrescrever individualmente via field jt_spacing. */
	--jt-module-gap: 0.5rem; /* 8px mobile */

	/* Transições */
	--jt-trans-fast: 0.15s ease;
	--jt-trans:      0.25s ease;
	--jt-trans-slow: 0.4s ease;

	/* z-index — alerta fica abaixo do header/drawer para nunca sobrepor o menu */
	--jt-z-alert:    90;
	--jt-z-header:   100;
	--jt-z-overlay:  190;
	--jt-z-drawer:   200;
}

/* ==========================================================================
   Reset moderno
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--jt-font-sans);
	font-size: var(--jt-fs-base);
	line-height: var(--jt-line-height);
	color: var(--jt-color-text);
	background-color: var(--jt-color-bg);
	/* Força apresentação textual em chars ambíguos (dígitos 0-9, #, *, ©, ®, etc).
	   Sem isso, Samsung Internet renderiza dígitos puros como keycap emoji.
	   Emojis "puros" (bandeiras, hearts, etc) não são afetados — eles só têm
	   forma emoji. E o tema usa Twemoji que converte emojis em SVG antes
	   da CSS afetar o render, então essa propriedade é segura. */
	font-variant-emoji: text;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* ==========================================================================
   Fundo animado — presets aplicados via classe no <body>
   Cada preset usa um pseudo-elemento ::before com gradientes radiais
   posicionados fora da viewport e animados pela keyframe jt-float.
   ========================================================================== */

@keyframes jt-float {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25%      { transform: translate(5%, 10%) rotate(90deg); }
	50%      { transform: translate(-5%, 5%) rotate(180deg); }
	75%      { transform: translate(10%, -5%) rotate(270deg); }
}

.jt-bg-aurora::before,
.jt-bg-neon::before,
.jt-bg-sunset::before,
.jt-bg-ocean::before,
.jt-bg-mesh::before,
.jt-bg-custom::before {
	content: "";
	position: fixed;
	inset: -50% -50% -50% -50%;
	width: 200%;
	height: 200%;
	z-index: -1;
	pointer-events: none;
	filter: blur(60px);
	animation: jt-float 22s ease-in-out infinite;
	will-change: transform;
}

/* Preset: Aurora roxa (inspirado no antigo Fãs Tomorrow) */
.jt-bg-aurora::before {
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 61, 245, 0.35) 0%, transparent 40%),
		radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.40) 0%, transparent 40%),
		radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.30) 0%, transparent 40%),
		radial-gradient(circle at 90% 90%, rgba(236, 72, 153, 0.35) 0%, transparent 40%);
}

/* Preset: Neon cyber */
.jt-bg-neon::before {
	background:
		radial-gradient(circle at 15% 25%, rgba(0, 255, 240, 0.30) 0%, transparent 40%),
		radial-gradient(circle at 85% 30%, rgba(255, 0, 200, 0.35) 0%, transparent 40%),
		radial-gradient(circle at 50% 90%, rgba(120, 0, 255, 0.40) 0%, transparent 45%);
	animation-duration: 18s;
}

/* Preset: Sunset (laranja/rosa) */
.jt-bg-sunset::before {
	background:
		radial-gradient(circle at 20% 80%, rgba(255, 140, 60, 0.35) 0%, transparent 45%),
		radial-gradient(circle at 80% 20%, rgba(255, 80, 130, 0.35) 0%, transparent 45%),
		radial-gradient(circle at 60% 60%, rgba(255, 200, 60, 0.25) 0%, transparent 40%);
	animation-duration: 26s;
}

/* Preset: Ocean (azul/teal) */
.jt-bg-ocean::before {
	background:
		radial-gradient(circle at 20% 30%, rgba(20, 200, 240, 0.30) 0%, transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(80, 80, 255, 0.30) 0%, transparent 45%),
		radial-gradient(circle at 60% 20%, rgba(0, 230, 180, 0.20) 0%, transparent 40%);
	animation-duration: 28s;
}

/* Preset: Mesh sutil */
.jt-bg-mesh::before {
	background:
		radial-gradient(circle at 25% 25%, rgba(147, 51, 234, 0.18) 0%, transparent 50%),
		radial-gradient(circle at 75% 75%, rgba(255, 61, 245, 0.12) 0%, transparent 55%);
	filter: blur(80px);
	animation-duration: 35s;
}

/* Reduz movimento para usuários sensíveis */
@media (prefers-reduced-motion: reduce) {
	.jt-bg-aurora::before,
	.jt-bg-neon::before,
	.jt-bg-sunset::before,
	.jt-bg-ocean::before,
	.jt-bg-mesh::before,
	.jt-bg-custom::before {
		animation: none;
	}
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Twemoji — emojis injetados pelo loader. Renderizam inline com o texto,
   no tamanho da fonte do elemento pai e levemente alinhados pra baixo
   para combinar com a baseline natural dos glyphs. */
img.jt-emoji {
	display: inline-block;
	height: 1em;
	width: 1em;
	margin: 0 0.05em 0 0.1em;
	vertical-align: -0.1em;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

a {
	color: var(--jt-color-accent);
	text-decoration: none;
	transition: color var(--jt-trans-fast), opacity var(--jt-trans-fast);
}

a:hover {
	color: var(--jt-color-primary);
}

p {
	margin: 0 0 var(--jt-space-4);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--jt-space-4);
	color: var(--jt-color-heading);
}

h1 { font-size: var(--jt-h1-size, 22px); font-weight: var(--jt-h1-weight, 800); line-height: var(--jt-h1-lh, 1.2); letter-spacing: var(--jt-h1-ls, -0.015em); }
h2 { font-size: var(--jt-h2-size, 18px); font-weight: var(--jt-h2-weight, 700); line-height: var(--jt-h2-lh, 1.25); letter-spacing: var(--jt-h2-ls, -0.01em); }
h3 { font-size: var(--jt-h3-size, 15px); font-weight: var(--jt-h3-weight, 700); line-height: var(--jt-h3-lh, 1.3); letter-spacing: var(--jt-h3-ls, 0em); }
h4 { font-size: var(--jt-h4-size, 14px); font-weight: var(--jt-h4-weight, 700); line-height: var(--jt-h4-lh, 1.3); letter-spacing: var(--jt-h4-ls, 0em); }

ul, ol {
	margin: 0 0 var(--jt-space-4);
	padding-left: 1.25rem;
}

hr {
	border: 0;
	border-top: 1px solid var(--jt-color-border);
	margin: var(--jt-space-6) 0;
}

::selection {
	background: var(--jt-color-primary);
	color: #fff;
}

/* Acessibilidade — focus visible */
:focus-visible {
	outline: 2px solid var(--jt-color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Skip link */
.jt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: var(--jt-space-3) var(--jt-space-4);
	background: var(--jt-color-primary);
	color: #fff;
	border-radius: 0 0 var(--jt-radius-sm) 0;
	z-index: 9999;
}
.jt-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   Aspect ratio — utilitários reusáveis pelos módulos de mídia.
   Usar como wrapper: <div class="jt-ratio jt-ratio-4-5"><img ...></div>
   ========================================================================== */

.jt-ratio {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
.jt-ratio > img,
.jt-ratio > video,
.jt-ratio > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jt-ratio-4-5  { aspect-ratio: 4 / 5; }
.jt-ratio-1-1  { aspect-ratio: 1 / 1; }
.jt-ratio-16-9 { aspect-ratio: 16 / 9; }
.jt-ratio-original {
	aspect-ratio: auto;
}
.jt-ratio-original > img,
.jt-ratio-original > video {
	position: static;
	height: auto;
	object-fit: contain;
}

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
