/*
Theme Name:   Conahp Sawi
Theme URI:    https://conahp.org.br
Description:  Child theme do Hello Elementor para o site do CONAHP.
Author:       Agência Sawi
Author URI:   https://agenciasawi.com.br
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  conahp-sawi
*/

/*
 * Estilos globais do site (carregados em todas as páginas).
 * Estilos de componentes ficam em assets/css/components.css.
 *
 * Sumário:
 *   1. Tokens
 *   2. Fontes
 *   3. Utilitários de animação (classes usadas no Elementor)
 *   4. Utilitários de layout (classes usadas no Elementor)
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--conahp-navy: #003C58;
	--conahp-lime: #C2E812;
	--conahp-offwhite: #F6F5F3;
	--conahp-lilac: #A882DD;
	--conahp-blue: #3995B2;
	--conahp-plum: #290627;
	--conahp-linkedin: #0077B5;
	--conahp-font: 'Degular Variable', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   2. Fontes
   Substitui o "Fontes personalizadas" do Elementor Pro (kit global).
   ========================================================================== */

@font-face {
	font-family: 'Degular Variable';
	src: url('assets/fonts/DegularVariable.ttf') format('truetype-variations'),
	     url('assets/fonts/DegularVariable.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   3. Utilitários de animação
   Aplicar pelo campo "Classes CSS" do elemento no Elementor (Avançado).
   ========================================================================== */

/* Flutuação vertical contínua (imagens decorativas). Antes: CSS personalizado do Pro em 5 imagens. */
.flato {
	animation: conahp-float-vertical 6s ease-in-out infinite;
}

@keyframes conahp-float-vertical {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.flato {
		animation: none;
	}
}

/* ==========================================================================
   4. Utilitários de layout
   Aplicar pelo campo "Classes CSS" do container no Elementor (Avançado).
   ========================================================================== */

/*
 * Container em grid que, no mobile, vira uma faixa com rolagem horizontal (um card por vez).
 * Usado em "Temas e discussões" (container 6440b30). Substitui a cópia mobile no Nested Carousel do Pro.
 */
@media (max-width: 767px) {
	/* "display" direto: o --display: grid do Elementor vem num seletor mais específico. */
	.conahp-scroll-x.e-con {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		/* Espaço para o translateY(-5px) do hover dos cards não ser cortado. */
		padding-top: 5px;
	}
	.conahp-scroll-x.e-con > .e-con {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}
}