/**
 * MOBILE FIXES - Educajogos
 * Correções críticas para melhorar UX mobile
 * Data: 20/01/2026
 */

/* ===================================
   1. FONTES E LEGIBILIDADE
   =================================== */

@media (max-width: 767px) {
	/* Fonte mínima 16px para legibilidade */
	body {
		font-size: 16px !important;
		line-height: 1.6;
	}

	p {
		font-size: 16px !important;
		line-height: 1.6;
	}

	h1 {
		font-size: 28px !important;
	}

	h2 {
		font-size: 24px !important;
	}

	h3 {
		font-size: 20px !important;
	}

	/* Aumenta tamanho de textos pequenos */
	.class_descricao_small,
	.class_descricao,
	.descricao_jogo p {
		font-size: 16px !important;
	}
}

/* ===================================
   2. BOTÕES TOUCH-FRIENDLY
   =================================== */

@media (max-width: 767px) {
	/* Área mínima de toque: 48x48px (recomendação Google) */
	a, button, input[type="button"], input[type="submit"], .btn {
		min-height: 48px;
		min-width: 48px;
		padding: 12px 20px;
	}

	/* Remove highlight azul no touch (iOS/Android) */
	* {
		-webkit-tap-highlight-color: rgba(0,0,0,0.1);
	}

	/* Botões de navegação */
	.link_menu {
		padding: 15px 20px !important;
		font-size: 16px !important;
		min-height: 48px;
	}
}

/* ===================================
   3. IMAGENS RESPONSIVAS
   =================================== */

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Logos e ícones mantêm proporção */
.navbar-logo img,
.navbar-brand img {
	max-width: 100%;
	height: auto;
}

/* ===================================
   4. LAYOUT RESPONSIVO
   =================================== */

@media (max-width: 767px) {
	/* Container com padding adequado */
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Remove margens excessivas */
	.row {
		margin-left: -10px;
		margin-right: -10px;
	}

	/* Colunas com espaçamento */
	[class*="col-"] {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ===================================
   5. JOGOS EM MOBILE
   =================================== */

@media (max-width: 767px) {
	/* Área do jogo ocupa 100% */
	#telaJogo,
	.area_jogo {
		width: 100% !important;
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Botão tela cheia visível */
	#areaBTT {
		padding: 10px;
	}

	#areaBTT img {
		width: 30px;
		height: 30px;
	}
}

/* ===================================
   6. ANÚNCIOS MOBILE
   =================================== */

@media (max-width: 768px) {
	/* Esconde ads desktop (728x90) em mobile */
	.propagandaWeb {
		display: none !important;
	}
}

/* ===================================
   7. NAVEGAÇÃO MOBILE
   =================================== */

@media (max-width: 767px) {
	/* Menu hamburger maior */
	.navbar-toggle {
		padding: 12px;
		margin: 10px 15px;
	}

	.navbar-toggle .icon-bar {
		height: 3px;
		width: 28px;
	}

	/* Menu dropdown melhorado */
	.navbar-collapse {
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ===================================
   7. FORMULÁRIOS MOBILE
   =================================== */

@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="search"],
	textarea {
		font-size: 16px !important; /* Evita zoom automático no iOS */
		padding: 12px 15px;
		width: 100%;
	}
}

/* ===================================
   8. ADS MOBILE
   =================================== */

@media (max-width: 767px) {
	/* Ads com espaçamento adequado */
	.propagandaWeb {
		padding: 15px 0 !important;
		margin: 10px 0;
	}

	/* Previne ads de quebrar layout */
	ins.adsbygoogle {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Remove espaço extra do ad sticky */
	body {
		padding-bottom: 0 !important;
	}

	/* Adiciona margem inferior apenas nos jogos */
	#telaJogo {
		margin-bottom: 60px;
	}
}

/* ===================================
   9. PERFORMANCE
   =================================== */

/* Lazy loading de imagens */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
	opacity: 1;
}

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* ===================================
   10. ACESSIBILIDADE
   =================================== */

/* Foco visível em elementos interativos */
a:focus,
button:focus,
input:focus,
textarea:focus {
	outline: 2px solid #4A90E2;
	outline-offset: 2px;
}

/* Melhora contraste de texto */
@media (max-width: 767px) {
	.descricao_jogo {
		background: rgba(255,255,255,0.95);
		padding: 15px;
		border-radius: 8px;
	}
}