/*
Theme Name: Instituto Voar
Theme URI: https://institutovoar.com.br
Author: Young Dog Studio
Author URI: https://youngdog.com.br
Description: Novo site one-page de Instituto Voar.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License:
License URI:
Text Domain: voar
Tags:
*/

html, button, input, select, textarea { color: #222; }

body {
	font-size: 1em;
	line-height: 1.4;
}
/* Remove text-shadow in selection highlight. These selection declarations have to be separate. Customize the background color to match your design */
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: var(--color-green);
	color: #fff;
    text-shadow: none;
}

/* Remove the gap between images and the bottom of their containers  */
img { vertical-align: middle; }

a {
	text-decoration:none;
	-webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease;
	cursor: pointer;
}

a, a:active, a:focus {
   outline: none;
}

.noselect {
	-webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

ul { list-style: none; padding:0; margin:0; }
ul li { margin:0; padding:0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* Corrige o padding para não expandir as caixas */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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



/*

VARIABLES 

*/

:root {
	/* SPACINGS */
	--spacing-section-vertical: 70px;
	--spacing-wrapper-horizontal: 4.5%;
	--spacing-gap-large: 40px;
	--spacing-gap-medium: 30px;
	--spacing-gap-medium2: 25px;
	--spacing-gap-medium3: 20px;
	--spacing-gap-small: 15px;
	--spacing-title-gap: 15px;

	/* TYPOGRAPHY */
	--font-size-body: 18px;
	--line-height-body: 30px;
	--font-size-xlarge: 26px;
	--line-height-xlarge: 32px;
	--font-size-large: 22px;
	--line-height-large: 32px;
	--font-size-small: 16px;
	--line-height-small: 25px;
	--font-size-xsmall: 15px;
	--line-height-xsmall: 20px;
	--font-size-h2: 47px;
	--line-height-h2: 58px;
	--letter-spacing-h2: 1.41px;
	--font-size-chip: 10px;
	--letter-spacing-chip: 0.3px;

	--font-size-h1: 60px;
	--line-height-h1: 72px;

	/* COLORS */
	--color-text-primary: #4E402C;
	--color-text-secondary: #656565;
	--color-accent-primary: #7B2800;
	--color-background-primary: #EBE9E2;
	--color-background-secondary: #E3DBCA;
	--color-background-footer: #B8A074;

	--color-green: #73AD40;
	--color-green-hover: #84BE51;
	--color-orange: #E0861A;
	--color-orange-hover: #EBA539;
	--color-yellow: #FFCB05;
	--color-blue: #0095DA;
	--color-blue-hover: #0BA0E5;

	--color-background-warm: #ECE8E5;
	--color-background-depoimentos: #F3F3F3;

	

	/*  BUTTONS */
	--button-font-size-small: 16px;
	--color-button-primary-background: #876421;
	--color-button-secondary-background: #EAE4DA;

	/* BORDER RADIUS */
	--border-radius-medium: 15px;
	--border-radius-small: 10px;
	--border-radius-xsmall: 5px;

	/* PADDINGS */
	--padding-large: 30px;
	--padding-medium: 15px;
	--padding-small: 10px;
}


@media (max-width: 1700px) {
	:root {
		/* TYPOGRAPHY */
		--font-size-large: 19px;
		--line-height-large: 29px;

		--font-size-h2: 43px;
		--line-height-h2: 51px;

		--font-size-h1: 57px;
		--line-height-h1: 60px;
	}
}

@media (max-width: 1500px) {
	:root {
		/* TYPOGRAPHY */
		--spacing-section-vertical: 60px;


		--font-size-xlarge: 24px;
		--line-height-xlarge: 30px;

		--font-size-large: 18px;
		--line-height-large: 26px;

		--font-size-h2: 40px;
		--line-height-h2: 47px;

		--font-size-h1: 50px;
		--line-height-h1: 53px;
	}
}


@media (max-width: 1024px) {
	:root {

		/* SPACINGS */
		--spacing-wrapper-horizontal: 20px;

		/* TYPOGRAPHY */
		--font-size-xlarge: 23px;
		--line-height-xlarge: 28px;

		--font-size-h2: 36px;
		--line-height-h2: 43px;

		--font-size-small: 15px;
		--line-height-small: 22px;

		--font-size-h1: 40px;
		--line-height-h1: 43px;
	}
}

@media (max-width: 768px) {
	:root {

		/* SPACINGS */
		--spacing-wrapper-horizontal: 15px;
		--spacing-gap-large: 30px;

		/* TYPOGRAPHY */

		--font-size-large: 16px;
		--line-height-large: 24px;

		--font-size-xlarge: 21px;
		--line-height-xlarge: 25px;

		--font-size-h2: 28px;
		--line-height-h2: 35px;

		--font-size-h1: 28px;
		--line-height-h1: 35px;
	}
}

html {
	overscroll-behavior: none;
	overscroll-behavior-y: none;
}

body {
	font-family: 'Fira Sans', sans-serif;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	background-color: var(--color-background-primary);
	margin: 0;
	padding: 0;
	overscroll-behavior: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	color: var(--color-accent-primary);
	margin: 0;
	padding: 0;
}

body.no-scroll {
	overflow: hidden;
	height: 100vh;
}


/*

SECTIONS 

*/

section, footer {
	width: 100%;
	position: relative;
	display: flex;
	gap: var(--spacing-gap-large);
	padding: var(--spacing-section-vertical) 0;
}

section.projetos, section.experiencias, section.agenda, section.depoimentos, section.cards, section.materiais { gap: 25px; }

.filter-mix-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-gap-medium2);
}

section {
	flex-direction: column;
}

main section:nth-of-type(odd) {
	background-color: var(--color-background-secondary);
}

main section:nth-of-type(even) {
	background-color: var(--color-background-primary);
}

/* Per-section background overrides */
section.sobre { background-color: var(--color-background-warm) !important; }
section.projetos { background-color: var(--color-blue) !important; }
section.experiencias { background-color: var(--color-green) !important; }
section.agenda { background-color: var(--color-blue) !important; }
section.depoimentos { background-color: var(--color-background-depoimentos) !important; }
section.cards { background-color: var(--color-background-warm) !important; }
section.timeline { background-color: #F3F3F3 !important; }
section.materiais { background-color: var(--color-green) !important; }
section.contato { background-color: var(--color-blue) !important; }

/* White text on colored backgrounds (Projetos, Programas & Noticias) */
section.projetos .section-title__chip,
section.projetos .section-title__heading,
section.projetos .section-description .text-small,
section.experiencias .section-title__chip,
section.experiencias .section-title__heading,
section.experiencias .section-description .text-small,
section.agenda .section-title__chip,
section.agenda .section-title__heading,
section.agenda .section-description .text-small {
	color: #fff;
}

/* Depoimentos: accent color for chip/title (same as Sobre) */
section.depoimentos .section-title__chip,
section.depoimentos .section-title__heading {
	color: var(--color-accent-primary);
}

.section-header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--spacing-gap-medium);
}

.section-description {
	flex-shrink: 0;
	max-width: 30%;
	min-width:300px;
	opacity: 0.8;
	display: flex;
	padding-bottom: 10px;
	flex-direction: column;
	text-align: right;
	gap: var(--spacing-gap-small);
}

.sobre .section-description { padding-bottom:0; }
	
.text-large {
	color: var(--color-text-primary);
	font-size: var(--font-size-large);
	line-height: var(--line-height-large);
	text-wrap: balance;
	font-weight: 400;
}

.text-small {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-text-secondary);
	text-wrap: balance;
}

.wrapper {
	width: 100%;
	padding: 0 var(--spacing-wrapper-horizontal);
}


/* BUTTONS */

.button-holder {
	display: flex;
	gap: var(--spacing-gap-small);
	margin-top: 15px;
}

/* Shared info-box style */
.info-box {
	border-radius: var(--border-radius-small);
	padding: 20px;
	width: 100%;
}

 .info-box.areas-atuacao {
	padding: 0;
	padding-bottom: 20px;
 }

.info-box__title {
	font-family: 'Delicious Handrawn', cursive;
	color: var(--color-accent-primary);
	font-size: 1.4rem;
	white-space: nowrap;
}

.info-box.areas-atuacao .info-box__title { padding: 20px 20px 0 20px; }

.sobre .button-holder {
	flex-wrap: nowrap;
	background-color: #D4E0E4;
	justify-content: space-between;
	align-items: center;
}

.sobre .button-holder__buttons {
	display: flex;
	gap: var(--spacing-gap-small);
}

.sobre .button-holder .button {
	background-color: var(--color-green);
	color: #fff;
}

.sobre .button-holder .button:hover {
	background-color: var(--color-green-hover);
}

.sobre .button-holder .button.outline {
	background-color: transparent;
	border: 1px solid var(--color-green);
	color: var(--color-green);
}

.sobre .button-holder .button.outline:hover {
	background-color: var(--color-green-hover);
	border-color: var(--color-green-hover);
	color: #fff;
}

.sobre .button-holder .button svg path {
	fill: var(--color-green);
	transition: fill 0.3s ease;
}

.sobre .button-holder .button:hover svg path {
	fill: var(--color-green-hover);
}

.sobre .button-holder .button.outline:hover svg path {
	fill: #fff;
}

.button-holder .button {
	display: inline-flex;
	align-items: center;
	padding: 14px 25px;
	border-radius: 50px;
	color: #fff;
	font-size: 14px;
	line-height: 21px;
	background-color: var(--color-accent-primary);
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	gap: 15px;
	text-wrap: nowrap;
	will-change: background-color, color;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.button-holder .button:hover {
	background-color: #BBA883;
}

.button-holder .button.outline {
	border: 1px solid #BBA883;
	color: var(--color-accent-primary);
	background-color: transparent;
}

.button-holder .button.outline:hover {
	background-color: #BBA883;
	color: #fff;
}

.button-holder .button.secondary {
	background-color: #B8A074;
	color: #fff;
}

.button-holder .button.secondary:hover { 
	background-color: var(--color-accent-primary);
	color: #fff;
 }

.button-holder .button.uppercase {
	text-transform: uppercase;
}

.button-holder .button.disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: default;
}

/* BUTTONS WITH ICONS */
.button-holder .button.map-icon::before,
.button-holder .button.pin-icon::before,
.button-holder .button.zap-icon::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.button-holder .button.pin-icon::before { width: 18px; }

.button-holder .button.map-icon::before {
    -webkit-mask-image: url('images/mapa-icone.svg');
    mask-image: url('images/mapa-icone.svg');
}

.button-holder .button.pin-icon::before {
    -webkit-mask-image: url('images/location-icone.svg');
    mask-image: url('images/location-icone.svg');
}

.button-holder .button.zap-icon::before {
    -webkit-mask-image: url('images/whatsapp-icone.svg');
    mask-image: url('images/whatsapp-icone.svg');
}

/* BUTTONS WITH ICONS */
.button-holder .button.map-icon, 
.button-holder .button.pin-icon,
.button-holder .button.zap-icon {
padding-left: 25px !important;
}

/* SWIPER BUTTONS UNIVERSAL */


.swiper-button-prev, .swiper-button-next {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-accent-primary);
	color: #fff;
}

.swiper-button-prev { left: var(--padding-medium) !important;}
.swiper-button-next { right: var(--padding-medium) !important;}
.swiper-button-disabled { opacity: 0 !important; }


.swiper-button-prev svg, .swiper-button-next svg {
	width: auto;
	max-width: 40%;
	height: auto;
	max-height: 40%;
}

.swiper-button-prev svg path, .swiper-button-next svg path {
	fill: #fff;
}



/* Footer styles are in css/sections/footer.css */




/* 



RESPONSIVO


*/

@media (max-width: 1700px) { 
	/* SECTIONS */
	.section-description { max-width: 40%; }
}



@media (max-width: 1500px) { 
	/* SECTIONS */
	.section-title-container { min-width: unset; width:50%; }
	.section-description { width:50%; min-width:unset; }
	.section-title__heading br { display: none; }
	.depoimentos .section-title__heading br { display: block; }

	/* BOTÕES */
	.button-holder { gap: 10px; }
	.button-holder .button, .button-holder .button.secondary { font-size:15px; line-height:15px;}
	.button-holder .button.map-icon, .button-holder .button.pin-icon, .button-holder .button.zap-icon {
		padding-left: 20px !important;
		padding-right: 20px;
	}
}

@media (max-width: 1024px) {
	/* SECTIONS */
	.section-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-gap-small); }
	.section-header .section-title-container { width: 100%; max-width:unset; }
	.section-description { width: 100%; max-width: none; text-align: left; padding-bottom:0; }
	/* .depoimentos .section-title__heading br { display: none; } */

	/* BOTÕES */
	.button-holder .button, .button-holder .button.secondary { font-size:14px; line-height:14px;}

}


@media (max-width: 768px) {

	/* BOTÕES - regras mobile do sobre movidas para sobre.css */

	/* SECTIONS */
	.section-description { text-align:center; }
	.depoimentos .section-title__heading br { display: none; }

	/* SWIPER BUTTONS */
	.swiper-button-prev { left: 5px !important; width:35px !important; height:35px !important;}
	.swiper-button-next { right: 5px !important; width:35px !important; height:35px !important;}	

}

/* 480 é o original */ 
@media (max-width: 500px) {
	
}