/*
Theme Name: 707-2
Theme URI: https://707publicacoes.com.br
Author: Rafale
Author URI: https://rafaelcampinho.com
Description: 707 publicações 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 707-2
*/

html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inter Tight", sans-serif;
  line-height: 1.23;
  font-size: 20px;
  overflow-x: hidden;
  color: var(--escuro);
  font-weight: 500;
  margin: 0;
}
html {
  background: var(--laranja);
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: inherit;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
:root {
  --cinza: #d1d1d1;
  --escuro: #2c1d1d;
  --azul: #2214f0;
  --rosa: #ff00e5;
  --laranja: #ff7000;
  --font-scale: 1;
  --fonte-mini: calc(
    clamp(0.66rem, 0.1569vw + 0.6294rem, 0.78rem) * var(--font-scale)
  );
  --fonte-p: calc(
    clamp(0.84rem, 0.0784vw + 0.8247rem, 0.9rem) * var(--font-scale)
  );
  --fonte-m: calc(
    clamp(1.11rem, 0.1569vw + 1.0794rem, 1.23rem) * var(--font-scale)
  );
  --fonte-g: calc(
    clamp(2.1rem, 2.7451vw + 1.5647rem, 4.2rem) * var(--font-scale)
  );
  --fonte-p-texto: calc(
    clamp(0.9rem, 0.4314vw + 0.8159rem, 1.23rem) * var(--font-scale)
  );
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
p {
  font-size: var(--fonte-p);
  margin-bottom: 1.35rem;
}
a {
  color: var(--escuro);
  text-decoration: none;
}

/* header */
nav.fixed-top {
  padding-top: 0;
  max-height: 117px;
  padding: 0 1.8rem;
}
nav.fixed-top.bg-ativo {
  background: linear-gradient(180deg, var(--laranja) 6%, transparent 99%);
  overflow: hidden;
}
.site-title img {
  width: 100%;
}
.site-title {
  position: relative;
}
.site-title a {
  color: inherit;
  display: inline-block;
  transform-origin: left center;
  transition: steps(3) 0.3s;
}
.title-wrapper {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}
.title-wrapper img {
  position: relative;
  z-index: 999;
  width: 21vw;
  object-fit: contain;
  margin-top: 0.9rem;
}
.home .title-wrapper img {
  width: 39vw;
  margin-top: 1.2rem;
}
/* MENU */
.menu {
  position: relative;
  z-index: 9999;
}
.menu ul {
  display: flex;
  margin: 0 0 0 0;
  list-style-type: none;
  transition: steps(3) 0.3s;
}
.menu ul li a {
  font-size: var(--fonte-m);
  color: var(--escuro);
  font-weight: 700;
  padding: 0.9rem 0 0 0;
}

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 33px;
  height: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1000;
  display: none;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--escuro);
  transition: all 0.3s steps(3);
}

/* Animação quando ativo */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Menu escondido no mobile */
.menu {
  transition: transform 0.3s steps(3), opacity 0.3s steps(3);
}
/* FRONT PAGE */
#destaque-home {
  position: relative;
}
.sereia-intro {
  width: 240px;
  max-width: 9vw;
  margin-bottom: 1.5rem;
}
#destaque-intro {
  background-color: var(--laranja);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 0;
  top: 0;
  overflow: hidden;
  height: 100vh;
}
#destaque-home .texto {
  z-index: 99;
  bottom: 0;
}
#destaque-home .texto p {
  font-size: var(--fonte-m);
  font-weight: 600;
}
#destaque-home .texto a {
  text-decoration: underline;
}
#destaque-home h2 {
  font-size: var(--fonte-m);
  font-weight: 800;
  margin-bottom: 0.6rem;
}
#destaque-intro img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: expand-background 3.6s steps(30) infinite;
}

@keyframes expand-background {
  0% {
    transform: scale(777%, 333%) rotate(99deg);
  }
  100% {
    transform: scale(0%) rotate(0deg);
  }
}
#destaque-intro img.fundo-2 {
  z-index: 1;
  animation-delay: -1.8s;
}
#destaque-intro ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 69%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  height: 78%;
  font-family: "Instrument Serif", serif;
}
#destaque-intro ul li {
  color: var(--cinza);
  font-size: clamp(1.8rem, 1.7763vw + 1.4053rem, 3.3rem);
  line-height: 0.9;
  width: 51%;
  min-height: 90px;
  align-content: center;
}
#destaque-intro ul li:nth-child(even) {
  text-align: right;
  margin: 0 0 0 auto;
}
#destaque-intro ul li.align-right {
  text-align: right;
  margin-left: -33px;
}

/* .grid-linha */
.grid.index-posts .cada-linha,
.grid.index-posts .cada-linha:first-of-type,
.grid.index-posts .cada-linha:nth-of-type(2) {
  width: calc(33% - 0.9rem);
  margin-bottom: 0.9rem;
}
.post {
  background: var(--cinza);
}
.post h3 {
  font-size: calc(var(--fonte-g));
  font-family: "Instrument Serif", serif;
  color: var(--laranja);
  padding: 0 1.8rem;
  border-bottom: 2px solid var(--laranja);
  margin: 4.8rem 0 0 0;
  letter-spacing: -0.18vw;
  line-height: 1.5;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 1.8rem;
  justify-content: space-between;
}
.grid .alm-listing {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
}

.grid h4,
.grid-linha h4 {
  font-size: var(--fonte-m);
  /* font-family: "Instrument Serif", serif; */
  display: inline;
  line-height: 1;
  color: var(--escuro);
  transition: steps(3) 0.3s;
  font-weight: 800;
  width: 78%;
  text-wrap: balance;
}
.grid a:hover h4,
.cada-linha span a:hover {
  color: var(--cinza);
}
.grid p,
.grid-linha p {
  color: var(--escuro);
  text-wrap: pretty;
  display: inline;
}
.grid .conteudo-absolute {
  position: absolute;
  bottom: 0.9rem;
  left: 0.9rem;
  z-index: 99;
}
.cada-linha {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  flex-direction: column;
  width: calc(33% - 0.9rem);
  margin-bottom: 3.6rem;
}
.grid .cada-linha:first-of-type,
.grid .cada-linha:nth-of-type(2) {
  width: calc(50% - 0.9rem);
}
.grid .cada-linha:first-of-type h4,
.grid .cada-linha:nth-of-type(2) h4 {
  width: 96%;
}
.grid.doses {
  padding: 1.8rem 1.8rem 1.8rem 0.9rem;
}
.grid.doses .cada-linha {
  width: 100%;
}
.grid .sem-thumb {
  align-items: center;
  display: flex;
  justify-content: center;
}

.grid .sem-thumb .conteudo-absolute {
  position: initial;
}
.grid .sem-thumb .conteudo-absolute h4 {
  display: none;
}
.grid .sem-thumb span > a:hover {
  color: var(--escuro);
}
.cada-linha .head-post,
.comment-author.vcard {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0;
}
.grid.doses .cada-linha .head-post {
  padding-top: 0;
}
.comment-author.vcard {
  gap: 18px;
  margin-bottom: 1.5em;
}
.says {
  display: none;
}
.cada-linha .head-post > div {
  width: 100%;
  display: flex;
  align-items: baseline;
}
.cada-linha .avatar,
.avatar {
  /* border-radius: 100%; */
  width: 20px;
  height: 20px;
}
.cada-linha .data {
  color: var(--escuro);
  font-size: var(--fonte-mini);
}
.cada-linha span {
  color: var(--escuro);
  display: flex;
  align-items: baseline;
}
.cada-linha span a,
.comment-author.vcard a,
.reply a {
  font-size: var(--fonte-mini);
  line-height: 1;
}
cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--escuro);
}
.cada-linha span > a {
  margin: 0 0.45rem;
}
.cada-linha span > div {
  margin-left: 18px;
}
.cada-linha .icones-links {
  display: flex;
  justify-content: space-between;
  padding: 36px 0 6px 0;
  width: 39%;
  margin-left: 66px;
  display: none;
}
.cada-linha .icones-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
}
.cada-linha .conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.45rem;
}
.doses .cada-linha .conteudo {
  padding-right: 0;
}
.link-thumb {
  width: 100%;
  position: relative;
}
.thumb-pixelada {
  width: 100%;
  position: relative;
}
.thumb-pixelada::after {
  display: block;
  position: absolute;
  top: 0;
  content: "";
  height: 100%;
  width: 100%;
  background: var(--rosa);
  z-index: 1;
}
.thumb-pixelada canvas {
  width: 100%;
  aspect-ratio: 11/7;
  display: block;
  image-rendering: pixelated;
  position: relative;
  z-index: 9;
  mix-blend-mode: overlay;
  filter: grayscale(1) contrast(4.5) brightness(2);
  -webkit-filter: grayscale(1) contrast(4.5) brightness(2);
  object-fit: cover;
  object-position: center top;
}
.thumb-pixelada:hover::after {
  background: var(--laranja);
  transition: steps(6);
}
.thumb-pixelada:hover canvas {
  filter: grayscale(1) contrast(0.6);
  -webkit-filter: grayscale(1) contrast(0.6);

  transition: steps(6);
}
.grid .cada-linha:first-of-type canvas,
.grid .cada-linha:nth-of-type(2) canvas {
  aspect-ratio: 6/4;
  max-height: initial;
}
/* SINGLE */
.single-post .thumb-pixelada,
.single-post .thumb-pixelada canvas {
  height: 60vh;
}
.single-post .thumb-pixelada::after {
  background: var(--rosa);
}
.img-destaque .thumb-pixelada canvas {
  filter: grayscale(1) contrast(4.5) brightness(2);
  -webkit-filter: grayscale(1) contrast(4.5) brightness(2);
}
.img-destaque {
  position: relative;
}
.single-post {
  background-color: var(--cinza);
}
.single-post h1 {
  position: absolute;
  z-index: 99;
  bottom: 0;
  padding: 0.9rem 1.8rem;
  font-family: "Instrument Serif";
  font-size: var(--fonte-g);
  letter-spacing: -0.21vw;
  line-height: 1;
  width: 66%;
  text-wrap: balance;
  margin: 0;
}
.conteudo-post {
  padding: 1.8rem 0.9rem 0.9rem 0.9rem;
}
.conteudo-post p {
  font-size: var(--fonte-p-texto);
  line-height: 1.35;
}
.conteudo-post h2 {
  font-size: calc(var(--fonte-g) * 0.45);
  font-weight: 800;
  line-height: 1;
  margin: 1.5rem 0 0.9rem 0;
}
.conteudo-post h3 {
  font-size: calc(var(--fonte-m) * 0.9);
  line-height: 1;
  font-weight: 700;
  padding-right: 3rem;
  margin: 1.5rem 0 0.9rem 0;
}
/* FOOTER */
footer {
  background-color: var(--rosa);
  height: 30vh;
  position: relative;
  z-index: 9999;
}
@media screen and (max-width: 820px) {
  html,
  body {
    font-size: 19px;
  }
  p {
    margin-bottom: 0.45rem;
    font-size: var(--fonte-p-texto);
  }
  nav.fixed-top .container-fluid {
    padding: 0.45rem 0 0 0 !important;
  }
  .conteudo-post p {
    margin-bottom: 0.9rem;
  }

  .title-wrapper img {
    width: 45vw;
    max-width: 138px;
    margin-top: 0.45rem;
  }
  .home .title-wrapper img {
    width: 66vw;
    max-width: initial;
    margin-top: 0.6rem;
  }
  nav.fixed-top {
    padding: 0 0.9rem;
  }
  #destaque-home .texto {
    padding: 0.9rem;
    height: 96dvh;
    align-items: flex-end;
    display: flex;
  }
  #destaque-home .texto > div {
    height: fit-content;
  }
  .sereia-intro {
    width: initial;
    max-width: 27vw;
    margin-bottom: 0.9rem;
  }
  .grid {
    padding: 0.9rem;
    margin-bottom: 0.9rem;
  }
  .post h3 {
    padding: 0 0.9rem;
    margin-top: 4.5rem;
  }
  .cada-linha .conteudo {
    margin-top: 0.6rem;
  }
  .cada-linha,
  .grid .cada-linha:first-of-type,
  .grid .cada-linha:nth-of-type(2) {
    width: 100%;
    margin-bottom: 0.9rem;
  }
  .grid h4,
  .grid-linha h4 {
    padding-right: 0;
    margin-bottom: 0.3rem;
  }
  .cada-linha .head-post,
  .comment-author.vcard {
    padding: 0.3rem 0;
  }
  .menu-toggle {
    display: flex;
    margin-top: 1.35rem;
    transition: 0.3s steps(3);
    padding-right: 0;
  }
  .bg-ativo .menu-toggle {
    margin-top: 0.45rem;
  }
  .menu {
    display: none;
    pointer-events: none;
    transition: steps(3) 0.3s;
    z-index: -99999;
  }
  .menu.active {
    position: fixed;
    background: var(--laranja);
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
    display: flex;
    pointer-events: all;
  }
  .menu.active ul {
    flex-direction: column !important;
    gap: 0.3rem !important;
    align-items: flex-start !important;
    padding: 15vh 0.45rem;
  }
  .menu ul li a {
    font-size: calc(var(--fonte-g) * 0.84);
    padding: 0;
  }
  .site-title a.active {
    transform: scale(1.5);
  }
  .menu.active::after {
    content: "";
    position: absolute;
    background: var(--rosa) url(assets/bg_4sereias_laranja.svg) 42% 21% / 480%;
    height: 27vh;
    left: 0.9rem;
    bottom: 0.9rem;
    right: 0.9rem;
    display: flex;
  }
  .conteudo-post {
    padding: 0.9rem;
  }
  #destaque-home .texto p {
    font-size: var(--fonte-p);
    text-wrap: balance;
  }
  .single-post h1 {
    width: 100%;
    padding: 0.9rem 0.45rem 0.9rem 0.9rem;
  }
  .cada-linha .conteudo {
    padding-right: 0;
  }
  .grid .conteudo-absolute {
    bottom: 0.45rem;
    left: 0.45rem;
    right: 0.45rem;
  }
  #destaque-home h2 {
    font-size: var(--fonte-p);
  }
  .grid.index-posts .cada-linha,
  .grid.index-posts .cada-linha:first-of-type,
  .grid.index-posts .cada-linha:nth-of-type(2) {
    width: 100%;
  }
  .grid.index-posts .cada-linha.sem-thumb {
    min-height: 30vh;
  }
}

@supports (hyphenate-limit-chars: 12 4 3) {
  .conteudo-post p {
    hyphenate-limit-chars: 12 4 3;
    hyphens: auto;
  }
}
@supports (-webkit-hyphens: auto) and (not (hyphenate-limit-chars: 12 4 3)) {
  .conteudo-post p {
    word-spacing: 0.015em;
  }
}

@supports (-webkit-touch-callout: none) {
  /* Safari iOS e macOS */
  #destaque-home .texto p {
    padding-bottom: calc(0.9rem + 60px);
  }
}