/**
 * Custom Styles - Águias do Brasil
 * 
 * Cores da marca e customizações específicas
 * Tailwind CSS está sendo carregado via CDN no header
 */

/* Cores da Marca - Variáveis CSS */
:root {
	--azul-primario: #102047;
	--azul-profundo: #1E4592;
	--azul-claro: #7FA3E6;
	--azul-escuro: #1A3A7C;
	--azul-suave: #B3C9F3;
	--azul-1: #162F66;
	--azul-2: #D8E6FA;
	--azul-3: #132754;
	--azul-4: #F1F6FD;
	--azul-5: #102047;
	
	--amarelo-primario: #FAB20B;
	--amarelo-escuro: #D28F0A;
	--amarelo-medio: #FEC225;
	--amarelo-1: #A97308;
	--amarelo-2: #FFD04A;
	--amarelo-3: #815606;
	--amarelo-4: #FFE28A;
	--amarelo-5: #5A3B04;
	--amarelo-6: #FFF3C9;
	--amarelo-7: #3B2703;
	--amarelo-8: #FFFAEB;
	
	--branco: #FFFFFF;
}

/* Reset básico para garantir que os estilos sejam aplicados */
body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	line-height: 1.6;
	color: #1f2937;
}

/* Componentes Customizados */
.btn-primary {
	background-color: var(--azul-primario) !important;
	color: var(--branco) !important;
	padding: 0.75rem 1.5rem !important;
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	transition: all 0.2s !important;
	display: inline-block !important;
	text-align: center !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
}

.btn-primary:hover {
	background-color: var(--azul-profundo) !important;
	color: var(--branco) !important;
}

.btn-secondary {
	background-color: var(--amarelo-primario) !important;
	color: var(--azul-escuro) !important;
	padding: 0.75rem 1.5rem !important;
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	transition: all 0.2s !important;
	display: inline-block !important;
	text-align: center !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
}

.btn-secondary:hover {
	background-color: var(--amarelo-escuro) !important;
	color: var(--azul-escuro) !important;
}

/* Footer - corrigir contraste */
.site-footer {
	background-color: var(--azul-5) !important;
	color: var(--azul-2) !important;
}

.site-footer h3,
.site-footer .widget-title {
	color: var(--branco) !important;
}

.site-footer a {
	color: var(--azul-2) !important;
	transition: color 0.2s !important;
}

.site-footer a:hover {
	color: var(--amarelo-primario) !important;
}

/* Cards */
.card-course,
.card-formacao {
	background-color: var(--branco) !important;
	border-radius: 0.5rem !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
	overflow: hidden !important;
	transition: box-shadow 0.2s !important;
}

.card-course:hover,
.card-formacao:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Hero Section */
.hero-section {
	padding: 4rem 0 !important;
	background: linear-gradient(to bottom, var(--azul-4), var(--branco)) !important;
}

@media (min-width: 1024px) {
	.hero-section {
		padding: 6rem 0 !important;
	}
}

/* Section Container */
.section-container {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

/* Screen Reader */
.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border-width: 0 !important;
}

/* Tipografia */
h1 {
	font-size: 48px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

h2 {
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

h3 {
	font-size: 27px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

@media (max-width: 768px) {
	h1 {
		font-size: 36px !important;
	}
	
	h2 {
		font-size: 28px !important;
	}
	
	h3 {
		font-size: 24px !important;
	}
}

/* Prose */
.prose {
	max-width: 65ch;
}

.prose p {
	margin-bottom: 1.25em;
}

.prose-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.prose-lg p {
	margin-bottom: 1.375em;
}

.prose-lg h1,
.prose-lg h2,
.prose-lg h3 {
	margin-top: 2em;
	margin-bottom: 1em;
}

.prose-lg a {
	color: var(--azul-primario);
	text-decoration: underline;
}

.prose-lg a:hover {
	color: var(--azul-profundo);
}

/* Select customizado com seta melhorada usando Tailwind */
.aguias-select-custom {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23102047' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 1.25rem 1.25rem !important;
	padding-right: 2.5rem !important;
	transition: all 0.2s ease-in-out !important;
	cursor: pointer !important;
}

.aguias-select-custom:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E4592' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	border-color: var(--azul-profundo) !important;
}

.aguias-select-custom:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23102047' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Remove seta padrão do IE/Edge */
.aguias-select-custom::-ms-expand {
	display: none !important;
}

/* Menu Desktop Elegante e Charmoso */
#primary-menu {
	display: flex !important;
	align-items: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#primary-menu > li {
	position: relative !important;
}

#primary-menu > li > a {
	color: var(--azul-primario) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	position: relative !important;
	padding: 0.75rem 1.25rem !important;
	border-radius: 0.5rem !important;
	transition: all 0.3s ease-in-out !important;
	text-decoration: none !important;
	letter-spacing: -0.01em !important;
	display: block !important;
}

#primary-menu > li > a:hover {
	color: var(--azul-profundo) !important;
	background-color: var(--azul-4) !important;
}

#primary-menu > li > a::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 0.5rem !important;
	background-color: var(--amarelo-primario) !important;
	opacity: 0 !important;
	transform: scale(0.95) !important;
	transition: all 0.3s ease-in-out !important;
	z-index: -1 !important;
}

#primary-menu > li > a:hover::before {
	opacity: 0.1 !important;
	transform: scale(1) !important;
}

#primary-menu > li > a::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0.25rem !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 0 !important;
	height: 2px !important;
	background-color: var(--amarelo-primario) !important;
	border-radius: 9999px !important;
	transition: width 0.3s ease-in-out !important;
}

#primary-menu > li > a:hover::after {
	width: 2rem !important;
}

#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a {
	color: var(--azul-profundo) !important;
	background-color: var(--azul-4) !important;
}

#primary-menu > li.current-menu-item > a::after,
#primary-menu > li.current_page_item > a::after {
	width: 2rem !important;
}

/* Botão CTA do Menu - Mais Elegante */
.btn-primary-menu {
	background-color: var(--azul-primario) !important;
	color: var(--branco) !important;
	padding: 0.75rem 1.5rem !important;
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	transition: all 0.3s ease-in-out !important;
	display: inline-block !important;
	text-align: center !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
	letter-spacing: -0.01em !important;
	position: relative !important;
	overflow: hidden !important;
}

.btn-primary-menu:hover {
	background-color: var(--azul-profundo) !important;
	color: var(--branco) !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
	transform: translateY(-2px) !important;
}

.btn-primary-menu::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background-color: var(--amarelo-primario) !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
	transform: scale(0) !important;
	transform-origin: center !important;
}

.btn-primary-menu:hover::before {
	opacity: 0.2 !important;
	transform: scale(1) !important;
}

.btn-primary-menu > span {
	position: relative !important;
	z-index: 10 !important;
}

/* Dashboard Cards Carousel Mobile */
@media (max-width: 640px) {
	.aguias-dashboard-cards-container {
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		gap: 1rem !important;
		padding-bottom: 1rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		scroll-behavior: smooth !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* Instructors Cards Carousel Mobile */
	.aguias-instructors-carousel {
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		gap: 1rem !important;
		padding-bottom: 1rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		scroll-behavior: smooth !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important; /* Firefox */
		-ms-overflow-style: none !important; /* IE/Edge */
	}

	.aguias-instructors-carousel::-webkit-scrollbar {
		display: none !important; /* Chrome/Safari */
	}

	.aguias-instructors-carousel > li {
		flex-shrink: 0 !important;
		width: 280px !important;
		min-width: 280px !important;
	}

	/* Espaço extra no final para não cortar o último card */
	.aguias-instructors-carousel::after {
		content: '' !important;
		flex-shrink: 0 !important;
		width: 1rem !important;
	}

	.aguias-dashboard-cards-container::-webkit-scrollbar {
		display: none !important; /* Chrome/Safari */
	}

	.aguias-dashboard-cards-container > div {
		flex-shrink: 0 !important;
		width: calc(100vw - 2rem) !important;
		min-width: 280px !important;
		max-width: 320px !important;
	}

	/* Instructors Cards Carousel Mobile */
	.aguias-instructors-carousel {
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		gap: 1rem !important;
		padding-bottom: 1rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		scroll-behavior: smooth !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important; /* Firefox */
		-ms-overflow-style: none !important; /* IE/Edge */
		grid-template-columns: none !important;
	}

	.aguias-instructors-carousel::-webkit-scrollbar {
		display: none !important; /* Chrome/Safari */
	}

	.aguias-instructors-carousel > li {
		flex-shrink: 0 !important;
		width: 280px !important;
		min-width: 280px !important;
		max-width: 320px !important;
	}

	/* Espaço extra no final para não cortar o último card */
	.aguias-dashboard-cards-container::after {
		content: '' !important;
		flex-shrink: 0 !important;
		width: 1rem !important;
	}
}

/* Logo centralizado na página Coming Soon */
.coming-soon-section .custom-logo-link {
	display: block !important;
	text-align: center !important;
	margin: 0 auto !important;
}

.coming-soon-section .custom-logo-link img {
	margin: 0 auto !important;
	display: block !important;
}

/* Estilização do formulário de cadastro do Academy */
.page-cadastro-estudante .academy-reg-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

.page-cadastro-estudante .academy-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

.page-cadastro-estudante .academy-col {
	width: 100% !important;
}

.page-cadastro-estudante .academy-form-group {
	margin-bottom: 0 !important;
}

.page-cadastro-estudante .academy-form-group label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--azul-primario) !important;
	margin-bottom: 0.5rem !important;
}

.page-cadastro-estudante .academy-form-control,
.page-cadastro-estudante .academy-form-control-file {
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	border: 1px solid var(--azul-claro) !important;
	border-radius: 0.5rem !important;
	font-size: 16px !important;
	transition: all 0.2s ease-in-out !important;
}

.page-cadastro-estudante input[type="password"].academy-form-control {
	padding-right: 3rem !important;
}

.page-cadastro-estudante textarea.academy-form-control {
	min-height: 100px !important;
	resize: vertical !important;
}

.page-cadastro-estudante .academy-form-control:focus,
.page-cadastro-estudante .academy-form-control-file:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px var(--azul-primario) !important;
	border-color: transparent !important;
}

.page-cadastro-estudante .academy-btn {
	width: 100% !important;
	padding: 1rem 1.5rem !important;
	background-color: var(--amarelo-primario) !important;
	color: var(--azul-primario) !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	border-radius: 0.5rem !important;
	border: none !important;
	transition: all 0.2s ease-in-out !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
	cursor: pointer !important;
}

.page-cadastro-estudante .academy-btn:hover {
	background-color: var(--amarelo-escuro) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.page-cadastro-estudante .academy-btn:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px var(--amarelo-primario), 0 0 0 4px rgba(250, 178, 11, 0.2) !important;
}

.page-cadastro-estudante .academy-register-form-status {
	margin-bottom: 1rem !important;
}

.page-cadastro-estudante .academy-register-form-status .academy-alert {
	padding: 1rem !important;
	border-radius: 0.5rem !important;
	border-left-width: 4px !important;
}

.page-cadastro-estudante .academy-register-form-status .academy-alert--success {
	background-color: #f0fdf4 !important;
	border-color: #22c55e !important;
	color: #166534 !important;
}

.page-cadastro-estudante .academy-register-form-status .academy-alert--error {
	background-color: #fef2f2 !important;
	border-color: #ef4444 !important;
	color: #991b1b !important;
}

/* Estilização do formulário de recuperação de senha */
.page-resetar-senha .academy-password-reset-form-wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

.page-resetar-senha .academy-password-reset-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

.page-resetar-senha .academy-form-group {
	margin-bottom: 0 !important;
}

.page-resetar-senha .academy-form-group label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--azul-primario) !important;
	margin-bottom: 0.5rem !important;
}

.page-resetar-senha .academy-form-control {
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	border: 1px solid var(--azul-claro) !important;
	border-radius: 0.5rem !important;
	font-size: 16px !important;
	transition: all 0.2s ease-in-out !important;
}

.page-resetar-senha .academy-form-control:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px var(--azul-primario) !important;
	border-color: transparent !important;
}

.page-resetar-senha .academy-btn {
	width: 100% !important;
	padding: 1rem 1.5rem !important;
	background-color: var(--amarelo-primario) !important;
	color: var(--azul-primario) !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	border-radius: 0.5rem !important;
	border: none !important;
	transition: all 0.2s ease-in-out !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
	cursor: pointer !important;
}

.page-resetar-senha .academy-btn:hover {
	background-color: var(--amarelo-escuro) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.page-resetar-senha .academy-btn:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px var(--amarelo-primario), 0 0 0 4px rgba(250, 178, 11, 0.2) !important;
}

.page-resetar-senha .academy-password-reset-form-status {
	margin-bottom: 1rem !important;
}

.page-resetar-senha .academy-password-reset-form-status .academy-alert {
	padding: 1rem !important;
	border-radius: 0.5rem !important;
	border-left-width: 4px !important;
}

.page-resetar-senha .academy-password-reset-form-status .academy-alert--success {
	background-color: #f0fdf4 !important;
	border-color: #22c55e !important;
	color: #166534 !important;
}

.page-resetar-senha .academy-password-reset-form-status .academy-alert--error {
	background-color: #fef2f2 !important;
	border-color: #ef4444 !important;
	color: #991b1b !important;
}

/* Menu Mobile Offcanvas - Z-index alto para ficar acima do dashboard */
#mobile-offcanvas {
	z-index: 9999 !important;
}

/* Menu Mobile Offcanvas */
#mobile-menu a {
	display: block !important;
	padding: 0.75rem 1rem !important;
	font-size: 16px !important;
	color: var(--azul-primario) !important;
	font-weight: 500 !important;
	border-radius: 0.5rem !important;
	transition: all 0.2s ease-in-out !important;
	text-decoration: none !important;
}

#mobile-menu a:hover {
	background-color: var(--azul-4) !important;
	color: var(--azul-profundo) !important;
}

#mobile-menu .current-menu-item > a,
#mobile-menu .current_page_item > a {
	background-color: var(--azul-primario) !important;
	color: var(--branco) !important;
}