:root{
    --laranja-bmais: #FF9605;
    --amarelo: #FDCC11;
    --bege: #FFF499;
    --cyan: #2BDCEC;
    --royal: #1871D5;
    --laranja: #FF6436;
    --lilas: #A46DFF;
    --violet: #560EA9;
	 --yellow: #FDCC11;
  	--yellow1: #FEDB58;
  	--purple1: #A46DFF;
  	--purple2: #5612A7;
	 --purple3: #E6D6FF;
 	--purple4: #C8A7FF;
  	--black: #020202;
  	--white: #FFFFFF;
  	--off-white: #F8F8F8;
  	--gray1: #9A9A9A;
  	--gray2: #676767;
  	--gray3: #E1E1E1;
  	--orange1: #FF6436;
  	--orange2: #B34626;
 	 --orange3: #FFD1C3;
 	 --olive: #3DBD00;
 	 --olive2: #2C8A00;
	--lima: #82FF2E;
    --transicao: 350ms ease;
    --raioborda: 20px;
}

@media (max-width: 1024px) {
  :root {
    font-size: 14px;
  }
}


@media (min-width: 1024px) {
  :root {
    font-size: 16px;
  }
}

/*ESPECIFICOS BAYAMAIS*/
.content-area {
  margin: 0 !important;
}

#masthead {
	box-shadow: 4px 4px 8px rgba(0,0,0,.15);
}

body{
	color: var(--black);
}

h1, h2, h3, h4, h5, h6{
	color: var(--black);
	letter-spacing: 0.75px;
}
@media screen and (min-width: 1024px){
	p, li{
	font-size: 17px;
}
}
@media screen and (max-width: 1024px){
	p, li{
	font-size: 15px;
}
}

p, button, li{
	letter-spacing: 0.5px;
}

button:active, button:focus, button:active, button:visited, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:active, input[type="submit"]:visited{
	background: unset !important;
	color: unset !important;
}

button:disabled, input[type="submit"]:disabled{
	opacity: 1 !important;
}
.card-pop .card-pop-corpo{
	height: unset;
  	padding: 2rem 1rem;
	text-align: center;
}

.card-pop-header *{
	margin-top: 10px !important;
}

.card-pop-corpo button{
	width: fit-content;
 	margin: auto;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
	border-radius: 50px;
	border-width: 2px !important;
	border-color: var(--gray1);
	height: 2.75rem;
	font-size: 1.15rem;
	font-family: "hoss-round", sans-serif;
	letter-spacing: 0.5px;
}

select{
	height: 2.75rem !important; 
}

label {
	font-size: 1.15rem;
	font-weight: 500 !important;
}

form textarea{
	border-radius: 20px;
	resize: none;
}

footer.site-footer{
	background: var(--lima);
}


.wp-block-social-links .wp-social-link svg, :where(.wp-block-social-links.is-style-logos-only) .wp-social-link svg{
	width: 2rem;
	height: unset !important;
}

.site-middle-footer-inner-wrap .widget{
	margin-bottom: 1rem;
}

ul.wp-block-social-links:not(.specificity) {
    margin-bottom: 0;
}

.footer-widget-area{
	align-items: center;
}

.site-footer-section{
	justify-content: center;
}

/*HERDADOS PLATAFORMA E SITE*/
.uppercase{
    text-transform: uppercase;
}
h1, h2, h3, h4, h5, h6{
	color: var(--black);
	letter-spacing: 0.75px;
}

p, button, li, input[type="submit"]{
	letter-spacing: 0.5px;
}

body{
	font-family: "hoss-round", sans-serif;
}

a:focus {
	background: none !important;
	box-shadow: none !important;
}

a{
	text-decoration: none;
}

/*BOTOES*/
button, .card-seta-header, .card-pop-header, input[type="submit"]{
    font-size: 1.125rem;
    border-radius: 100px;
  font-weight: 500;
  transition: var(--transicao);
  margin: 0.25rem;
  gap: 1rem;
}

button::after, button::before{
	box-sizing: revert;
}
/*TIPOS DE BOTÃO: 
.bt-padrao: botão padrão com fundo colorido/escuro
.bt-light: variante do botão padrão só que com fundo branco e texto/contornos na variante escura da classe (seja laranja, roxa ou preta)
.bt-seta: botão com seta direcional
.bt-icone: botão semelhante ao bt-padrao, porém com ícone no canto esquerdo
.bt-accordion-etapa: botão accordion da etapa da jornada, elemento presente somente no user Professor (VER ANIMAÇÃO ROTATE 45º DO + NA HORA DE IMPLEMENTAR O JS)
.bt-accordion-aula: botão accordion da aula da jornada, também exclusivo ao Professor, fica abaixo do botão de etapa
.bt-nodrop: tira o efeito de box shadow e a animação que simula o botão sendo apertado
.card-seta: não exatamente um botão, mas como segue o estilo do bt-seta, é membro honorário. É um estilo de card com link que por enquanto só é usado na página das aulas-pílula, porém pode ser reutilizado em novas áreas da plataforma se precisar. (TROCAR NOME DA CLASSE)
.card-pop: card-seta, sem ser seta, sem ser botão rs. só um modelo de div baseado no que já existe do card-seta

MODIFICADORES
.seta-90: gira as setas dos botões em 90º
.seta-180: gira as setas dos botões em 180º
*/

a:has(button[disabled]):hover {
	cursor: default;
}

a:has(button):hover{
    text-decoration: none;
}

.bt-padrao, .bt-light, .bt-accordion-etapa, .bt-accordion-aula, .card-seta-header, .card-pop-header{
    color: white;
    padding: 0.5rem 1rem;
}

.bt-light{
    color: var(--bordabotao);
}

.bt-circle {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
}

.bt-circle img{
    width: 1.25rem;
}

.bt-circle.bt-padrao img{
    filter: invert(1);
}

.bt-circle.bt-padrao:hover > img{
    filter: invert(0);
}
.bt-seta {
	display: flex;
	justify-content: space-between;
	border: 2px solid var(--bordabotao);
	color: var(--bordabotao);
	padding: 0;
	width: 100%;
	background: var(--white);
	padding: 0 0 0 1rem;
    align-items: center;
    line-height: 1;
    text-align: left;
}

.bt-seta:hover {
	background: var(--bgbotao);
	color: var(--white);
	text-decoration: underline;
	border-color: var(--bgbotao);
}

.bt-seta:hover::after {
	background: var(--black);
	transform: scale(1.25);
}

.bt-seta.seta-180:hover::before{
    transform: rotate(180deg) scale(1.25);
}

.bt-seta::after, .card-seta::after {
	content: url('https://plataforma.bayalearning.com/theme/boost/style/Arrow%20forward.svg');
	background: var(--bordabotao);
	width: 30px;
	height: 30px;
	aspect-ratio: 1;
	border-radius: 100px;
	display: flex;
	padding: 10px;
	transition: 350ms;
	justify-content: center;
	transform: scale(1.05);
}

.bt-seta.seta-180{
	padding: 0 1rem 0 0;
	justify-content: flex-start;
}

.seta-180.bt-seta::after{
    content: none;
}

.seta-180.bt-seta::before { /*REPENSAR SE PRECISO REPETIR*/
	content: url('https://plataforma.bayalearning.com/theme/boost/style/Arrow%20forward.svg');
	background: var(--bordabotao);
	width: 30px;
	height: 30px;
	aspect-ratio: 1;
	border-radius: 100px;
	display: flex;
	padding: 10px;
	transition: 350ms;
	justify-content: center;
	transform: rotate(180deg) scale(1.05);
}

.seta-90.bt-seta:hover::after {
	transform: rotate(90deg) scale(1.25);
}

.seta-90.bt-seta::after {
	transform: rotate(90deg) scale(1.05);
}

.seta-180.bt-seta:hover::after {
	transform: rotate(180deg) scale(1.25);
}

.bt-seta.bt-light {
	box-shadow: none;
	transform: none !important;
	--bordabotao: var(--white) !important;
}

.bt-seta.bt-light.bt-roxo {
    --bgbotao: var(--purple1);
}

.bt-seta.bt-light.bt-laranja {
    --bgbotao: var(--orange1);
}

.bt-seta.bt-light:hover{
	border-color: var(--bghover);
}

.bt-seta.bt-light::after, .seta-180.bt-light::before {
	filter: invert(1);
	background: black;
}

.bt-seta.bt-light:hover::after, .seta-180.bt-light:hover::before {
	filter: invert(0);
	background: var(--bgbotao);
}

.bt-seta.bt-light[disabled=""] {
	--bgbotao: var(--gray3);
	border-color: var(--gray2);
}

.bt-padrao, .bt-light, input[type="submit"]{
  background: var(--bgbotao);
  border: 2px solid var(--bordabotao);
  box-shadow: 3px 3px var(--bordabotao);
}

.bt-padrao:hover, .bt-light:hover, input[type="submit"]:hover{
     box-shadow: 0px 0px var(--bordabotao);
     background: var(--bghover);
     border-color: var(--bordahover);
     transform: translate(4px,4px);
     color: var(--bordahover);
}

button.bt-padrao[disabled=""], button.bt-seta[disabled=""], .bt-circle[disabled=""], input[type="submit"]:disabled{
    pointer-events: none;
    --bordabotao: var(--gray2);
    --bgbotao: var(--gray3);
    color: var(--gray2) !important;
}

button.bt-icone[disabled=""]::before{
    filter: invert(0.6);
}

.bt-seta, .bt-light, .bt-padrao, .bt-accordion-etapa, .bt-accordion-aula, .card-seta, .card-pop, input[type="submit"] {
    --bgbotao: var(--purple1);
    --bordabotao: var(--purple2);
    --bghover: var(--purple3);
    --bordahover: var(--purple2);
}

.bt-light, .bt-accordion-aula{
    --bgbotao: var(--white);
    --bordabotao: var(--purple2);
}

.bt-laranja {
    --bgbotao: var(--orange1);
    --bordabotao: var(--orange2);
    --bghover: var(--orange3);
    --bordahover: var(--orange2);
}

.bt-laranja.bt-light{
    --bgbotao: var(--white);
    --bordabotao: var(--orange2);
}

.bt-preto {
    --bgbotao: var(--black);
    --bordabotao: rgba(0,0,0,0.5);
    --bghover: var(--gray3);
    --bordahover: var(--black);
}

.bt-seta.bt-preto{
--bordabotao: var(--black);
--bgbotao: var(--gray2);
}

.bt-preto.bt-light{
    --bgbotao: var(--white);
    --bordabotao: var(--black);
}

.card-seta.bt-preto, .card-pop.bt-preto {
  --bordabotao: var(--black);
}

.card-seta.bt-preto:hover{
    --bordabotao: var(--gray2);
}

.bt-icone, .bt-accordion-etapa, .bt-accordion-aula{
    width:100%;
    display: flex;
    align-items: center;
}

.bt-icone:before{
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-2px);
}

.bt-icone:hover:before{
    filter: invert(1);
}

.bt-icone:hover{
    --bordahover: var(--black);
    text-decoration: none;
}

.bt-icone.bt-guialuno:before{
    content: url('https://plataforma.bayalearning.com/mod/journey/pix/copy.svg');
}

.bt-icone.bt-print::before {
	content: url('https://plataforma.bayalearning.com/mod/journey/pix/printw.svg');
	transform: scale(1.15);
}

.bt-accordion-etapa, .bt-accordion-aula, .card-seta-header, .card-pop-header {
	background: var(--bordabotao);
	border: none;
	/*text-transform: uppercase;*/
	justify-content: space-between;
	color: var(--white);
}

.bt-accordion-etapa:hover, .bt-accordion-aula:hover{
    text-decoration: underline;
    background: var(--bgbotao);
}

.bt-accordion-etapa::after, .bt-accordion-aula::after {
    content: url('https://plataforma.bayalearning.com/blocks/teacherdash/pix/expand.svg');
    display: flex;
    padding: 6px;
    transition: 350ms;
    justify-content: center;
    aspect-ratio: 1;
    transform: scale(1.2) translateX(6px) rotate(0deg);
    transform-origin: center;
    height: 32px;
}

.bt-accordion-aula {
	background: var(--white);
	color: var(--bordabotao);
	border: 2px solid var(--bordabotao);
}

.bt-accordion-aula:hover{
    background: var(--bghover);
}

.bt-accordion-aula::after{
    visibility: hidden;
    padding: 4px;
}

.bt-nodrop{
    box-shadow: none;
    transform: none;
}

.bt-nodrop:hover{
    transform: none;
}


/*Cards Seta - conhecidos como botão aulas pilula*/

@media (min-width: 1024px) {
    #aulaspilula-bloco {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .card-seta-corpo, .card-pop-corpo {
        height: 252px;
    }
}


.card-seta, .card-pop {
    border-radius: 25px;
    margin-bottom: 2rem;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.card-seta-header *, .card-pop-header *{
    line-height: 1;
    margin: 0;
    padding: 0.35rem;
    color: var(--white);
}

.card-seta-header, .card-pop-header{
    /*width:100%;*/
	width: -moz-available;
	width: -webkit-fill-available;
    border-bottom:none;
    margin: 0;
    border-radius: 25px 25px 0 0;
	width: -webkit-fill-available;
}
.card-seta-header, .card-seta-corpo, .card-pop-header, .card-pop-corpo{
border: 2px solid var(--bordabotao);
}

.card-seta-header h5:hover{
    text-decoration: underline;
}

.card-seta-corpo, .card-pop-corpo {
    border-radius: 0 0 25px 25px;
   padding: 0.5rem 1.25rem;
   border-top: none;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 172px;
  background: var(--white);
  transition: var(--transicao);
}

.card-seta-corpo p, .card-pop-corpo p{
    color: var(--black);
}

.card-seta::after {
	transform: translate(-70%, -50%);
}

.card-seta:hover::after{
    background: var(--black);
    transform: translate(-70%, -50%) scale(1.25);
}

.seta-90.card-seta::after {
	transform: rotate(90deg) translate(-70%, 50%);
}

.seta-90.card-seta:hover::after{
    transform: rotate(90deg) translate(-70%, 50%) scale(1.25);
}

.seta-180.card-seta::after {
	transform: rotate(180deg) translate(-70%, 50%);
}

.seta-180.card-seta:hover::after{
    transform: rotate(180deg) translate(-70%, 50%) scale(1.25);
}

.card-seta.seta-180 {
	align-items: flex-start;
}

.card-seta:hover{
    cursor: pointer;
    --bordabotao: var(--bgbotao);
}

.card-seta:hover > .card-seta-corpo {
  background: var(--bghover);
}

.card-seta-corpo a:hover {
    text-decoration: none;
}
/*BOXES*/
.boxpadrao{ /*box padrao*/
    border: 2px solid var(--black);
    border-radius: var(--raioborda);
    background-color: white;
    }

/*DROP SHADOWS*/
.dropcartoon{ /*divs, svg*/
	box-shadow: 5px 6px 0px rgba(2, 2, 2, 0.5);
}

.dropsticker{ /*imagens*/
	filter: drop-shadow(3px 4px 0px rgba(2, 2, 2, 0.3));
	transition-duration: 0.3s;
}

.dropsticker:hover{
	filter: drop-shadow(6px 8px 0px rgba(2, 2, 2, 0.3));
}

/*animacoes*/
/*movimento continuo*/
.sambinha{
	transform-origin: center;
	animation-name: samba;
	animation-duration: 1.5s;
    animation-direction: alternate-reverse;
    animation-timing-function:ease-in;
	animation-iteration-count:infinite;
}

.sambinha:hover, .sambinhaINV:hover{
	animation-play-state: paused;
}

@keyframes samba{
	0%{
		transform: translateY(0) rotate(0deg);
	}
	100%{
				transform: translateY(10px) rotate(-10deg);
	}
}
.sambinhaINV{
    transform-origin: center;
    animation-name: sambaINV;
    animation-duration: 1.5s;
    animation-direction: alternate-reverse;
    animation-timing-function:ease-in;
    animation-iteration-count:infinite;
}

@keyframes sambaINV{
0%{
    transform: translateY(0) rotate(0deg);
}
100%{
            transform: translateY(-10px) rotate(10deg);
}
}

.flutua{
transform-origin: center;
animation-name: flutuar;
animation-duration: 1.5s;
animation-direction: alternate-reverse;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
}

@keyframes flutuar {
0%{
    transform: translateY(-4px)  translateX(-4px);
filter: drop-shadow(4px 4px 0px rgba(2, 2, 2, 0.3));
}

100%{
    filter: drop-shadow(4px 4px 0px rgba(2, 2, 2, 0));
    transform: translateY(4px) translateX(4px);
    
}
}

.flutuaY{
transform-origin: center;
animation-name: flutuarY;
animation-duration: 0.8s;
animation-direction: alternate-reverse;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
}
.flutuaY:hover{
animation-play-state: paused;
}
@keyframes flutuarY{
0%{
    transform: translatey(0);
    
}
100%{
transform: translatey(8px);	
}
}