/*
Theme Name: Raios do Bem - Landing de Voluntariado
Theme URI: https://idepjuventudes.org
Author: Tecnorise
Author URI: https://tecnorise.com
Description: Tema filho do Hello Elementor, criado como landing page para o programa de voluntariado "Raios do Bem" do IDEP. Paleta de cores, tipografia, cabeçalho com menu de navegação e rodapé com menu + copyright inspirados no site/blog oficial idepjuventudes.org, 100% editável pelo Elementor (versão gratuita).
Template: hello-elementor
Version: 1.5.2
Requires PHP: 7.4
Text Domain: raios-do-bem-landing
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Paleta de cores do IDEP (extraída ao vivo de idepjuventudes.org, via
   inspeção do CSS computado do site/blog oficial)
   ========================================================================== */
:root {
	--idep-blue: #005A9E;        /* azul dos títulos e links (h2 do blog) */
	--idep-blue-btn: #0F75BB;    /* azul usado em botões secundários */
	--idep-orange: #F9B532;      /* laranja/amarelo dos CTAs (botão do blog) */
	--idep-navy: #043052;        /* texto escuro sobre o laranja (botão do blog) */
	--idep-footer-navy: #243673; /* azul-marinho do rodapé do blog */
	--idep-green: #45B653;       /* verde das faixas "juventudes" (confirmado no blog) */
	--idep-pink: #E35BA0;        /* rosa/magenta */
	--idep-purple: #65509A;      /* roxo das faixas de compromisso */
	--idep-sky: #65BDD9;         /* azul claro de fundo */
	--idep-gold: #F7C009;        /* dourado do item de menu ativo do blog */
	--idep-gray-text: #76767F;   /* cor do texto de parágrafo do blog */
	--idep-heading-dark: #26262C;/* cor dos subtítulos (h3) do blog */
	--idep-body-bg: #F6F7FD;     /* fundo levemente lavanda do blog (não é branco puro) */
}

/* ==========================================================================
   Tipografia
   ========================================================================== */
body {
	font-family: 'Roboto', sans-serif;
	color: var(--idep-gray-text);
	background-color: var(--idep-body-bg);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	color: var(--idep-blue);
}

/* No blog, o h3 aparece mais como um subtítulo leve (peso 400, cinza-escuro)
   em vez de repetir o azul em negrito do h2 - reproduzimos essa hierarquia
   para widgets de "Título" configurados como H3 no Elementor. */
h3,
.elementor-widget-heading h3.elementor-heading-title {
	font-weight: 400;
	color: var(--idep-heading-dark);
}

/* Observação: o site institucional do IDEP usa uma fonte própria licenciada
   chamada "Monsal Gothic". Como não temos permissão para redistribuir esse
   arquivo de fonte, usamos aqui a "Poppins" (Google Fonts, gratuita), que
   tem um estilo geométrico/arredondado parecido. Se a equipe do IDEP tiver
   a licença da Monsal Gothic, ela pode ser adicionada depois em
   Elementor > Configurações do Site > Fontes Personalizadas. */

/* ==========================================================================
   Botões (padrão visual dos CTAs do IDEP: laranja com texto azul-marinho)
   ========================================================================== */
.elementor-button,
a.elementor-button {
	background-color: var(--idep-orange);
	color: var(--idep-navy);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	border-radius: 4px;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.elementor-button:hover,
a.elementor-button:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: var(--idep-navy);
}

/* ==========================================================================
   Landing page: sem distrações
   ========================================================================== */
.site-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* Faixas de destaque coloridas (use estas classes em widgets do Elementor
   através da aba "Avançado > Classes CSS" para reaproveitar a identidade
   visual do IDEP em qualquer seção) */
.idep-faixa-verde   { background-color: var(--idep-green)  !important; color: #fff !important; }
.idep-faixa-roxa    { background-color: var(--idep-purple) !important; color: #fff !important; }
.idep-faixa-rosa    { background-color: var(--idep-pink)   !important; color: #fff !important; }
.idep-faixa-azul    { background-color: var(--idep-sky)    !important; color: #fff !important; }
.idep-faixa-laranja { background-color: var(--idep-orange) !important; color: var(--idep-navy) !important; }

/* ==========================================================================
   Correção de contraste para as faixas coloridas de seção (.idep-faixa-*)
   novo na v1.4.1: sem isso, títulos, parágrafos, listas etc. continuavam na
   cor padrão (azul/cinza) mesmo dentro de uma faixa colorida, porque vários
   widgets do Elementor (ex.: "Texto Editor") já têm cor própria explícita e
   não herdam a cor do fundo. Por isso a regra é um "curinga" (todo elemento
   dentro da faixa vira branco/navy), exceto o próprio botão (.elementor-button),
   que mantém a cor definida no widget dele.
   ========================================================================== */
.idep-faixa-verde *:not(.elementor-button):not(.elementor-button *),
.idep-faixa-roxa *:not(.elementor-button):not(.elementor-button *),
.idep-faixa-rosa *:not(.elementor-button):not(.elementor-button *),
.idep-faixa-azul *:not(.elementor-button):not(.elementor-button *) {
	color: #ffffff !important;
}

.idep-faixa-verde .elementor-icon-list-icon svg,
.idep-faixa-roxa .elementor-icon-list-icon svg,
.idep-faixa-rosa .elementor-icon-list-icon svg,
.idep-faixa-azul .elementor-icon-list-icon svg {
	fill: #ffffff !important;
}

.idep-faixa-laranja *:not(.elementor-button):not(.elementor-button *) {
	color: var(--idep-navy) !important;
}

.idep-faixa-laranja .elementor-icon-list-icon svg {
	fill: var(--idep-navy) !important;
}

/* ==========================================================================
   Cabeçalho (header-inner do Hello Elementor: logo/título à esquerda,
   menu "menu-1" (Cabeçalho) à direita - estrutura real confirmada em
   template-parts/dynamic-header.php do tema pai).
   Fundo branco, nome do site em azul e Poppins, linha verde embaixo (mesmo
   verde da faixa "juventudes" do blog).
   ========================================================================== */
#site-header.site-header {
	background-color: #ffffff;
	border-bottom: 3px solid var(--idep-green);
	padding: 18px 5%;
}

#site-header .header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	max-width: 1280px;
	margin: 0 auto;
}

#site-header .site-logo img {
	max-height: 56px;
	width: auto;
}

#site-header .site-title a {
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 26px;
	color: var(--idep-blue);
	text-decoration: none;
}

#site-header .site-description {
	font-family: 'Roboto', sans-serif;
	color: var(--idep-gray-text);
	font-size: 14px;
	margin-top: 2px;
}

/* Menu principal (Aparência > Menus > atribuir à posição "Cabeçalho"),
   renderizado pelo próprio Hello Elementor em <nav class="site-navigation">. */
.site-navigation {
	margin-left: auto;
}

.site-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-navigation a {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--idep-gray-text);
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-navigation a:hover,
.site-navigation .current-menu-item > a,
.site-navigation .current_page_item > a {
	color: var(--idep-gold);
}

/* Submenus (dropdown de segundo nível, se houver) */
.site-navigation ul ul {
	flex-direction: column;
	gap: 4px;
	position: absolute;
	background: #ffffff;
	padding: 14px 18px;
	margin-top: 12px;
	border-radius: 8px;
	box-shadow: 0 12px 24px rgba(4, 48, 82, 0.12);
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 20;
}

.site-navigation li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Item de destaque: adicione a classe CSS "menu-cta" ao item do menu (na
   caixa "Classes CSS" de Aparência > Menus) para transformá-lo num botão,
   igual ao CTA laranja do blog. */
.site-navigation .menu-cta > a {
	background-color: var(--idep-orange);
	color: var(--idep-navy) !important;
	padding: 9px 20px;
	border-radius: 4px;
	font-weight: 700;
}

.site-navigation .menu-cta > a:hover {
	filter: brightness(1.05);
}

/* Botão hambúrguer do menu mobile (.site-navigation-toggle, já funcional via
   JS do próprio Hello Elementor - aqui só ajustamos a cor/aparência) */
.site-navigation-toggle {
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 8px;
}

.site-navigation-toggle-icon,
.site-navigation-toggle-icon::before,
.site-navigation-toggle-icon::after {
	display: block;
	width: 24px;
	height: 3px;
	background-color: var(--idep-blue);
	border-radius: 2px;
	transition: transform 0.2s ease;
}

.site-navigation-toggle-icon {
	position: relative;
}

.site-navigation-toggle-icon::before,
.site-navigation-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-navigation-toggle-icon::before { top: -8px; }
.site-navigation-toggle-icon::after  { top: 8px; }

/* Painel do menu mobile (dropdown que abre ao clicar no hambúrguer) */
.site-navigation-dropdown {
	background: #ffffff;
	border-top: 3px solid var(--idep-green);
	padding: 16px 5%;
}

.site-navigation-dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-navigation-dropdown a {
	display: block;
	padding: 10px 4px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: var(--idep-gray-text);
	text-decoration: none;
	border-bottom: 1px solid #eef0f7;
}

.site-navigation-dropdown a:hover {
	color: var(--idep-gold);
}

/* O tema pai (Hello Elementor) aplica, por padrão, um fundo cinza-escuro com
   texto branco no item "atual" (página em que o visitante já está) dentro do
   menu mobile - o que destoa do resto do site. Sobrescrevemos aqui para
   manter o mesmo fundo branco com destaque dourado usado em todo o resto do
   menu. */
.site-navigation-dropdown ul.menu li.current-menu-item a,
.site-navigation-dropdown ul.menu li.current_page_item a {
	background: #ffffff;
	color: var(--idep-gold) !important;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Rodapé (footer-inner do Hello Elementor: logo/título, menu "menu-2"
   (Rodapé) e texto de copyright - estrutura confirmada em
   template-parts/dynamic-footer.php do tema pai).
   Fundo azul-marinho escuro com texto branco, igual ao rodapé real do blog.
   ========================================================================== */
#site-footer.site-footer {
	background-color: var(--idep-footer-navy);
	padding: 40px 5% 24px;
}

#site-footer .footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
}

#site-footer .site-logo img {
	max-height: 44px;
	width: auto;
	/* logos coloridas ficam visíveis sobre o fundo escuro; se a logo tiver
	   texto escuro, considere usar uma versão em branco/negativa aqui. */
}

#site-footer .site-title a {
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: #ffffff;
	text-decoration: none;
}

#site-footer .site-description,
#site-footer .copyright p,
#site-footer a {
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
}

#site-footer a:hover {
	color: var(--idep-gold);
	text-decoration: underline;
}

#site-footer .site-navigation ul {
	justify-content: flex-end;
}

#site-footer .site-navigation a {
	color: #ffffff;
	font-weight: 500;
}

#site-footer .site-navigation a:hover,
#site-footer .site-navigation .current-menu-item > a {
	color: var(--idep-gold);
}

#site-footer .copyright {
	width: 100%;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 13px;
	text-align: center;
}

#site-footer .copyright a {
	text-decoration: underline;
}

/* ==========================================================================
   Cards e seções coloridas (novo na v1.3.0, inspirados no layout real da
   home institucional idepjuventudes.org: faixas cheias com corte diagonal,
   cards lado a lado tipo "jovem"/"empresa", etc.)
   ========================================================================== */

/* Cards coloridos com cantos arredondados (ex.: dois cards lado a lado,
   cada um numa Seção/Container do Elementor, com a classe CSS abaixo em
   "Avançado > Classes CSS"). Combine com um widget de Título + Lista de
   Ícones dentro do card. */
.idep-card {
	border-radius: 16px;
	padding: 36px 32px;
	color: #ffffff;
}

.idep-card h1, .idep-card h2, .idep-card h3, .idep-card h4,
.idep-card .elementor-heading-title {
	color: #ffffff !important;
}

.idep-card p,
.idep-card .elementor-icon-list-text,
.idep-card .elementor-icon-list-item,
.idep-card .elementor-icon-list-icon i,
.idep-card .elementor-icon-list-icon svg {
	color: #ffffff !important;
	fill: #ffffff;
}

.idep-card-verde   { background-color: var(--idep-green); }
.idep-card-rosa    { background-color: var(--idep-pink); }
.idep-card-roxo    { background-color: var(--idep-purple); }
.idep-card-azul    { background-color: var(--idep-sky); }

/* Variante laranja usa texto azul-marinho por cima (mesmo padrão dos
   botões/CTAs do site), não branco. */
.idep-card-laranja { background-color: var(--idep-orange); }
.idep-card-laranja h1, .idep-card-laranja h2, .idep-card-laranja h3, .idep-card-laranja h4,
.idep-card-laranja .elementor-heading-title,
.idep-card-laranja p,
.idep-card-laranja .elementor-icon-list-text,
.idep-card-laranja .elementor-icon-list-item {
	color: var(--idep-navy) !important;
}

/* Faixa cheia (full width) com texto branco grande, tipo a faixa verde
   "juventudes" da home do IDEP - aplique numa Seção configurada como
   "Largura total" no Elementor. */
.idep-faixa-full-texto {
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	text-align: center;
	padding: 28px 5%;
}

/* Observação sobre o corte diagonal entre seções: o próprio Elementor
   (versão gratuita) já resolve isso sem precisar de CSS - edite a Seção,
   vá em Estilo > Divisor de forma e escolha "Inclinação" (Tilt) no topo
   e/ou embaixo. É assim que o site institucional faz as faixas coloridas
   com corte diagonal entre uma seção e outra. */

/* ==========================================================================
   v1.5.0 - Sistema de componentes do layout "mockup" (réplica do arquivo
   HTML enviado pelo usuário): eyebrow badge, tags de seção, cards com
   sombra, seção escura de benefícios, checklist/steps, grid de
   compromissos, banner CTA em gradiente roxo, acordeão de FAQ e botão
   fixo mobile. Variáveis extras (não substituem as originais).
   ========================================================================== */
:root {
	--idep-navy-dark: #112954;    /* fundo da seção escura de "Benefícios" */
	--idep-cta-purple: #662D91;   /* roxo do banner de CTA final (gradiente) */
	--idep-cta-purple-dark: #4E2073;
	--idep-yellow-dark: #F2A70F;  /* amarelo mais escuro (hover de botão) */
	--idep-card-radius: 18px;
	--idep-card-shadow: 0 12px 30px rgba(17, 41, 84, .10);
}

/* --- Eyebrow badge (pílula acima do H1 do hero) --- */
.idep-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(227, 91, 160, .12);
	color: var(--idep-pink);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 8px 18px;
	border-radius: 100px;
}

/* --- Palavra de destaque dentro de um título (ex.: "Raio do Bem!") --- */
.idep-accent,
.idep-accent .elementor-heading-title,
.idep-accent.elementor-widget-heading .elementor-heading-title {
	color: var(--idep-pink) !important;
}

/* --- Tag/etiqueta acima dos títulos de seção --- */
.idep-tag {
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 6px 16px;
	border-radius: 100px;
	margin-bottom: 14px;
	color: var(--idep-green);
	background: rgba(69, 182, 83, .12);
}
.idep-tag .elementor-heading-title { color: inherit !important; font-size: 13px !important; }
.idep-tag-blue   { color: var(--idep-blue); background: rgba(0, 90, 158, .1); }
.idep-tag-pink   { color: var(--idep-pink); background: rgba(227, 91, 160, .12); }
.idep-tag-purple { color: var(--idep-cta-purple); background: rgba(102, 45, 145, .1); }

/* --- Cards com sombra (usado em "O que é", "Benefícios" no modo claro,
   "Nossos projetos") - aplicar na COLUNA via Avançado > Classes CSS --- */
.idep-icon-card {
	background: #ffffff;
	border-radius: var(--idep-card-radius);
	box-shadow: var(--idep-card-shadow);
}
.idep-icon-card .elementor-icon-box-title { color: var(--idep-heading-dark); }
.idep-icon-card .elementor-icon-box-description { color: var(--idep-gray-text); }

/* Variante com borda fina (usado nos cards de projeto, sem sombra tão forte) */
.idep-icon-card-outline {
	background: #ffffff;
	border: 1px solid #ECEEF6;
	border-radius: var(--idep-card-radius);
	box-shadow: var(--idep-card-shadow);
}
.idep-icon-card-outline .elementor-icon-box-title { color: var(--idep-heading-dark); font-size: 16px; }
.idep-icon-card-outline .elementor-icon-box-description { color: var(--idep-gray-text); font-size: 13.5px; }

/* Puxa o card pra cima, sobrepondo a faixa colorida acima dele */
.idep-icon-card-overlap {
	margin-top: -60px;
	position: relative;
	z-index: 2;
}

/* --- Seção escura (fundo navy, texto branco) - usado em "Benefícios" --- */
.idep-dark-section {
	background: var(--idep-navy-dark) !important;
}
.idep-dark-section h1, .idep-dark-section h2, .idep-dark-section h3, .idep-dark-section h4,
.idep-dark-section .elementor-heading-title {
	color: #ffffff !important;
}
.idep-dark-section p, .idep-dark-section .elementor-text-editor {
	color: #C7D2E8;
}
.idep-dark-section .idep-tag { color: #ffffff; background: rgba(69, 182, 83, .25); }

/* Item da grade de benefícios (caixa semitransparente dentro da seção escura) */
.idep-dark-item {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--idep-card-radius);
}
.idep-dark-item .elementor-icon-box-title { color: #ffffff !important; }
.idep-dark-item .elementor-icon-box-description { color: #B9C4DC !important; }

/* --- Checklist com bolinha verde (seção "Quem pode se inscrever?") --- */
.idep-checklist .elementor-icon-list-icon {
	background: var(--idep-green);
	color: #fff !important;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 4px;
}
.idep-checklist .elementor-icon-list-icon i,
.idep-checklist .elementor-icon-list-icon svg { font-size: 12px; color: #fff; fill: #fff; }
.idep-checklist .elementor-icon-list-text { font-size: 17px; color: var(--idep-ink, var(--idep-heading-dark)); }

/* --- Passos numerados com bolinha amarela (seção "Como se inscrever?") --- */
.idep-steps .elementor-icon-list-item { margin-bottom: 10px; }
.idep-steps .elementor-icon-list-icon {
	background: var(--idep-orange);
	color: var(--idep-navy) !important;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
}
.idep-steps .elementor-icon-list-icon i,
.idep-steps .elementor-icon-list-icon svg { font-size: 15px; color: var(--idep-navy); fill: var(--idep-navy); }

/* --- Card de compromisso (ícone + texto lado a lado, com sombra) --- */
.idep-commit-item {
	background: #ffffff;
	border-radius: var(--idep-card-radius);
	box-shadow: var(--idep-card-shadow);
}
.idep-commit-item .elementor-icon-box-title { display: none; }
.idep-commit-item .elementor-icon-box-description { color: var(--idep-ink, var(--idep-heading-dark)); font-size: 15px; margin: 0; }
.idep-commit-item .elementor-icon-box-icon { margin-right: 6px; }

/* --- Banner de CTA final em gradiente roxo --- */
.idep-cta-purple {
	background: linear-gradient(120deg, var(--idep-cta-purple), var(--idep-cta-purple-dark)) !important;
}
.idep-cta-purple *:not(.elementor-button):not(.elementor-button *) {
	color: #ffffff !important;
}

/* --- Acordeão de FAQ (widget nativo do Elementor, só reestilizado) --- */
.elementor-accordion .elementor-tab-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	color: var(--idep-navy-dark);
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	color: var(--idep-pink);
}
.elementor-accordion .elementor-tab-content {
	color: var(--idep-gray-text);
}

/* --- Botão fixo no rodapé, só aparece no mobile (igual ao mockup) --- */
.idep-sticky-cta { display: none; }
@media (max-width: 767px) {
	.idep-sticky-cta {
		display: flex !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #ffffff;
		padding: 12px 16px;
		box-shadow: 0 -6px 20px rgba(17, 41, 84, .12);
	}
	.idep-sticky-cta .elementor-button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
	.idep-sticky-cta.elementor-section { margin: 0; }
	body.elementor-page { padding-bottom: 74px; }
}

/* ==========================================================================
   v1.5.1 - Pequeno utilitário extra: permite colocar dois widgets (ex.: dois
   botões) lado a lado dentro da mesma coluna do Elementor, sem precisar de
   Seção Interna. Aplique a classe CSS no próprio widget (Avançado > Classes
   CSS). Também ajusta o wrap do "Título" usado como eyebrow para não esticar
   100% da largura da coluna.
   ========================================================================== */
.idep-inline-block {
	display: inline-block !important;
	width: auto !important;
	margin: 0 12px 12px 0;
}
.idep-eyebrow.elementor-widget-heading,
.idep-eyebrow {
	width: auto;
}


/* ==========================================================================
   v1.5.2 - Variante de tag para usar sobre faixas coloridas cheias (ex.: a
   faixa verde de "O que é o Raio do Bem?"), onde a cor padrão do .idep-tag
   (verde sobre verde-claro) ficaria com contraste ruim. Combine as duas
   classes no mesmo widget: "idep-tag idep-tag-onlight".
   ========================================================================== */
.idep-tag-onlight {
	color: #ffffff !important;
	background: rgba(255, 255, 255, .22) !important;
}