/*
Theme Name: Softfocus
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Introdução
--------------------------------------------
*/

/*.post header.header:before { filter: brightness(1); }*/

main { width: var(--limite); margin-top: calc(var(--altura-corte) + var(--offset-corte)); }

.post .introducao { display: flex; flex-direction: column; margin-bottom: calc(var(--espaco) * 1.4); }
.post .introducao h1 { width: 50%; margin-bottom: calc(var(--espaco) * .5); }
.post .introducao h2 { width: 62.5%; font-size: var(--fs-600); line-height: 1.25em; font-weight: var(--fw-light); color: var(--cor-400); } 
.post .introducao h3 { order: -1; }
.post .introducao > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--espaco); }
.post .introducao .data-e-autor { font-size: var(--fs-100); font-weight: var(--fw-regular); color: var(--cor-400); }
.post .introducao time { font-weight: var(--fw-semibold); }
.post .introducao figure { left: calc(var(--espaco) * -1); width: calc(100% + (var(--espaco) * 2)); }
.post .introducao figure figcaption { max-width: 62.5%; padding-top: calc(var(--espaco) * .6); padding-left: calc(var(--espaco) * .6); margin-left: var(--espaco); font-size: var(--fs-100); line-height: var(--line-height); color: var(--cor-400); }
.post .introducao figure figcaption:before { position: absolute; top: calc(var(--espaco) * -1); left: 0; width: 1px; height: calc(100% + var(--espaco)); background-color: var(--cor-borda-translucida); content: ""; }


/*
Compartilhar
--------------------------------------------
*/

.compartilhar { display: flex; align-items: center; font-size: var(--fs-100); font-weight: var(--fw-regular); color: var(--cor-400); }
.post .compartilhar { margin-right: calc(var(--espaco) * .6); }
.compartilhar ul { display: flex; margin: 0; margin-left: 10px; padding: 0; list-style: none; }
.compartilhar ul li { margin: 0 4px 0 0; }
.compartilhar ul a { display: block; width: 40px; height: 40px; margin: 0; text-indent: -9999px; }
.compartilhar ul a[href]:hover,
.compartilhar ul a[href]:focus { background-size: 0; } 
.compartilhar ul a:after { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: auto 25px; content: ""; opacity: .4; transition: opacity 100ms ease-in-out; }
.compartilhar ul a.facebook:after { background-image: url(../imagens/redes-sociais/facebook.svg); }
.compartilhar ul a.pinterest:after { background-image: url(../imagens/redes-sociais/pinterest.svg); }
.compartilhar ul a.twitter:after { background-image: url(../imagens/redes-sociais/twitter.svg); }
.compartilhar ul a.whatsapp:after { background-image: url(../imagens/redes-sociais/whatsapp.svg); }
.compartilhar ul a:hover:after { opacity: .8; /*filter: invert(1);*/ }


/*
Conteúdo
--------------------------------------------
*/

.post .conteudo { left: calc(var(--espaco) * -.2); width: calc(var(--limite) * .5); margin: 0 auto calc(var(--espaco) * 2); }
.post .conteudo:last-child { margin-bottom: calc(var(--espaco) * 3); }
.post .conteudo:after { position: absolute; bottom: calc(var(--espaco) * -1); left: 0; width: 8px; height: 8px; border-radius: 100%; background-color: var(--cor-primaria); content: ""; }

.post .conteudo * + h1,
.post .conteudo * + h2,
.post .conteudo * + h3,
.post .conteudo * + h4,
.post .conteudo * + h5,
.post .conteudo * + h6 { margin-top: 1.5em; }

.post .conteudo p,
.post .conteudo li { color: var(--cor-500); }

.post .conteudo blockquote { margin: var(--espaco) calc(var(--espaco) * -1) var(--espaco) calc(var(--espaco) * -1); padding: calc(var(--espaco) * .1) 0 calc(var(--espaco) * .1) calc(var(--espaco) * .5); border-left: 5px solid var(--cor-900); font-size: var(--fs-700); line-height: 1.1333em; font-weight: var(--fw-medium); }
.post .conteudo blockquote small { display: table; margin-top: calc(var(--espaco) * .3); font-size: var(--fs-100); line-height: var(--line-height); color: var(--cor-400); }

.post .conteudo *:not(figure).alignleft { width: calc(100% + var(--espaco)); }


/* 
Imagens
--------------------------------------------
*/

.post .conteudo figure { z-index: 2; }

.post .conteudo figure.aligncenter { width: calc(100% + (var(--espaco) * 2)); max-width: calc(100% + (var(--espaco) * 2)) !important; margin: var(--espaco) 0; margin-left: calc(var(--espaco) * -1); }
.post .conteudo figure.alignnone { max-width: 100%; margin: var(--recuo) auto; }
.post .conteudo figure.alignnone img { width: auto; }
.post .conteudo figure.alignleft { clear: both; float: left; width: calc(50% + var(--espaco)); margin: calc(var(--espaco) * .5) var(--espaco) var(--espaco) calc(var(--espaco) * -1); }
.post .conteudo figure.alignright { clear: both; float: right; width: calc(50% + var(--espaco)); margin: calc(var(--espaco) * .5) 0 var(--espaco); left: var(--espaco); }

.post .conteudo figure img { max-width: 100%; margin: 0 auto; }

.post .conteudo figure figcaption { padding: calc(var(--espaco) * .6) var(--espaco) 0 calc(var(--espaco) * .6); margin-left: var(--espaco); font-size: var(--fs-100); line-height: var(--line-height); color: var(--cor-400); }
.post .conteudo figure figcaption:before { position: absolute; top: calc(var(--espaco) * -1); left: 0; width: 1px; height: calc(100% + var(--espaco)); background-color: var(--cor-borda-translucida); content: ""; }


/* 
Relacionados
--------------------------------------------
*/

.post .relacionados { z-index: 2; float: left; width: calc(50% + (var(--espaco) * 2)); padding: var(--espaco); margin: calc(var(--espaco) * .5) var(--espaco) calc(var(--espaco) * .75) calc(var(--espaco) * -2); background-color: var(--cor-fundo); }
.post .relacionados:before { position: absolute; z-index: 2; top: calc(var(--espaco) * -.5); left: var(--espaco); width: 1px; height: calc(100% + var(--espaco)); background-color: var(--cor-borda-translucida); content: ""; }
.post .relacionados article { padding-bottom: var(--espaco); }
.post .relacionados article:last-child { padding-bottom: 0; }
.post .relacionados article .chamada { padding: 0; padding-left: calc(var(--espaco) * .8); }
.post .relacionados article .chamada:before { display: none; }
.post .relacionados article .chamada:after { left: 0; }
.post .relacionados article h1 { font-size: var(--fs-600); }


/* 
Galeria
--------------------------------------------
*/


.post .galeria { display: block; margin: var(--espaco) 0; }

.post .galeria figure { width: 100%; margin: 0; background-color: var(--cor-fundo); }
.post .galeria figure img { position: absolute; top: 0; left: 0; }
.post .galeria figure > div { overflow: hidden; }
.post .galeria figcaption { display: none; }

.post .galeria .imagens { z-index: 2; width: calc(100% + (var(--espaco) * 2)); margin-bottom: calc(var(--espaco) * .6); margin-left: calc(var(--espaco) * -1); perspective: 1800px; }

.post .galeria .imagens .swiper-wrapper { z-index: 12; }

.post .galeria .imagens .swiper-button-prev,
.post .galeria .imagens .swiper-button-next { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: transparent; opacity: 1; -webkit-tap-highlight-color: transparent; }
.post .galeria .imagens .swiper-button-prev:before,
.post .galeria .imagens .swiper-button-next:before { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 0; height: 0; border: 0; content: ""; }
.post .galeria .imagens .swiper-button-disabled { opacity: 0; }
.post .galeria .imagens .swiper-button-prev { left: -50px; }
.post .galeria .imagens .swiper-button-prev:before { left: auto; right: 0; border-top: 20px solid transparent; border-right: 20px solid var(--cor-primaria); border-bottom: 20px solid transparent; transition: right 100ms ease-in-out; }
.post .galeria .imagens .swiper-button-prev:hover:before { right: 20px; }
.post .galeria .imagens .swiper-button-next { right: -50px; }
.post .galeria .imagens .swiper-button-next:before { left: 0; border-top: 20px solid transparent; border-left: 20px solid var(--cor-primaria); border-bottom: 20px solid transparent; transition: left 100ms ease-in-out; }
.post .galeria .imagens .swiper-button-next:hover:before { left: 20px; }

.post .galeria .legenda { z-index: 3; min-height: 1px; padding-left: calc(var(--espaco) * .6); margin-bottom: calc(var(--espaco) * .6); font-size: var(--fs-100); line-height: var(--line-height); color: var(--cor-400); }
.post .galeria .legenda:before { position: absolute; top: calc(var(--espaco) * -1.6); left: 0; width: 1px; height: calc(100% + (var(--espaco) * 1.6)); background-color: var(--cor-borda-translucida); content: ""; }
.post .galeria .legenda.ocultar { height: 1px; margin-bottom: 0; }
.post .galeria .legenda.ocultar:before { display: none; }

.post .galeria .miniaturas { width: 100%; margin: 0; overflow: visible; }
.post .galeria .miniaturas .swiper-slide { opacity: 0; transition: opacity 100ms ease-in-out; }
.post .galeria .miniaturas .swiper-slide-thumb-active:after { position: absolute; z-index: 2; top: 0; right: 0; width: 10px; height: 10px; border-radius: 100%; background-color: var(--cor-link); content: ""; pointer-events: none; }
.post .galeria .miniaturas .swiper-slide:before { position: absolute; bottom: -10px; left: auto; right: 50%; width: 0px; height: 1px; margin-right: -25px; background-color: var(--cor-link); content: ""; transition: width 200ms ease-in-out; }
.post .galeria .miniaturas .swiper-slide:hover:before,
.post .galeria .miniaturas .swiper-slide:focus:before { left: 50%; right: auto; width: 50px; margin-left: -25px; }
.post .galeria .miniaturas .swiper-slide * { cursor: pointer; }
.post .galeria .miniaturas .swiper-slide-visible { opacity: 1; }
.post .galeria .miniaturas .swiper-slide > div { padding-top: 100%; border-radius: 100%; overflow: hidden; }
.post .galeria .miniaturas img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.post .galeria .miniaturas .swiper-button-disabled { opacity: 0; }

.post .galeria .swiper-lazy { opacity: 0; transition: opacity 100ms ease-in-out; }
.post .galeria .swiper-lazy-loaded { opacity: 1; }


/*
Vídeo
--------------------------------------------
*/

.post .conteudo .video { width: calc(100% + (var(--espaco) * 2)); margin: var(--espaco) auto; margin-left: calc(var(--espaco) * -1); }
.post .conteudo .video > div { background-color: var(--cor-100a); padding-bottom: 56.25%; }
.post .conteudo .video > div:before { position: absolute; z-index: -1; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px; background-image: url(../imagens/lazy/carregando.svg); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .2; animation: lazy-carregando 500ms linear infinite; content: ""; }
.post .conteudo .video video { position: absolute; top: 0; left: 0; width: 100%; }
.post .conteudo .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
Áudio
--------------------------------------------
*/

.post .conteudo .audio { display: block; width: calc(100% + (var(--espaco) * 2)); min-height: 54px; margin: var(--espaco) auto; margin-left: calc(var(--espaco) * -1); }
@-moz-document url-prefix(){
	.post .conteudo .audio { min-height: 40px; }	
}
.post .conteudo .audio audio { display: block; width: 100%; }


/* 
Playlists
--------------------------------------------
*/

.post .playlist { }
.post .playlist .video,
.post .playlist .audio { margin-bottom: 0; }
.post .playlist ul { margin-bottom: var(--espaco); padding: calc(var(--espaco) * .35) calc(var(--espaco) * .7); list-style: none; background-color: var(--cor-fundo); }
.post .playlist ul li { margin-bottom: 0; padding: calc(var(--espaco) * .25) 0; border-bottom: 1px solid var(--cor-borda); cursor: pointer; }
.post .playlist ul li:last-child { border-bottom: 0; }
.post .playlist h6 { color: var(--cor-900); margin: 0; pointer-events: none; }
.post .playlist ul li:before { position: absolute; bottom: 0; left: calc(var(--espaco) * -.7); width: 5px; height: 0; margin-left: -2px; background-color: var(--cor-primaria); content: ""; transition: height 200ms ease-in-out; }
.post .playlist ul li:hover:before,
.post .playlist ul li:focus:before,
.post .playlist ul li.paused:before { top: 0; bottom: auto; height: 100%; }
.post .playlist ul li.ativo { padding-left: calc(var(--espaco) * .4); }
.post .playlist ul li.ativo:after { position: absolute; top: calc(50% + 2px); transform: translateY(-50%); left: 0; width: 0; height: 0; border-top: 6px solid transparent; border-left: 9px solid var(--cor-primaria); border-bottom: 6px solid transparent; content: ""; }
.post .playlist ul li.ativo.paused { padding-left: 0; }
.post .playlist ul li.ativo.paused:after { display: none; }


/* 
Facebook
--------------------------------------------
*/

.fb-video { display: block; --width: calc(100% + (var(--espaco) * 2)); max-width: var(--width); width: var(--width); margin: var(--espaco) auto; margin-left: calc(var(--espaco) * -1); background-color: var(--cor-100a); }
.fb-video:before { position: absolute; z-index: -1; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px; background-image: url(../imagens/lazy/carregando.svg); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .2; animation: lazy-carregando 500ms linear infinite; content: ""; }


/* 
Instagram
--------------------------------------------
*/

.instagram-media { margin: var(--espaco) auto !important; }


/* 
TODO: Linkedin
--------------------------------------------
*/


/*
Twitter
--------------------------------------------
*/

.twitter-tweet { margin: var(--espaco) auto !important; }


/*
Footer
--------------------------------------------
*/

.post main > article footer { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: calc(var(--espaco) * 3); margin-left: calc((var(--limite) * .25) - (var(--espaco) * .2)); }

.post .topicos { font-size: var(--fs-100); font-weight: var(--fw-regular); color: var(--cor-400); }
.post .topicos ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0 var(--espaco) 0 0; list-style: none; font-size: var(--fs-200); font-weight: var(--fw-semibold); }
.post .topicos li:after { color: var(--cor-900); content: ",\00a0"; }
.post .topicos li:nth-last-child(2):after { content: "\00a0&\00a0"; }
.post .topicos li:last-child:after { content: ""; }


.post .topicos a { color: var(--cor-900); }

.post main > article footer .compartilhar { top: 8px; }