/*
Theme Name: Emanuel Souto
Theme URI: https://emanuelsouto.com.br
Author: Emanuel Souto
Description: Tema mínimo. Uma coluna, texto primeiro, nada que não seja conteúdo. Paleta Cactos.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: emanuel
*/

/* ---------------------------------------------------------
   1. Cores
   --------------------------------------------------------- */

:root{
  --ground:#F8EFD9;
  --surface:#FFFBF1;
  --ink:#3D2817;
  --soft:#736046;
  --terra:#6B4226;
  --marca:#9ECC3B;
  --rule:rgba(107,66,38,.22);
  --rule-forte:rgba(107,66,38,.42);
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#241710;
    --surface:#2E1E14;
    --ink:#F2E1C2;
    --soft:#C4A87E;
    --terra:#D8B48A;
    --marca:#9ECC3B;
    --rule:rgba(242,225,194,.18);
    --rule-forte:rgba(242,225,194,.36);
  }
}

/* ---------------------------------------------------------
   2. Base
   --------------------------------------------------------- */

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Montserrat",Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:680px;
  margin:0 auto;
  padding:0 24px 90px;
}

a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--rule-forte);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
a:hover{text-decoration-color:var(--terra)}
a:focus-visible{
  outline:2px solid var(--marca);
  outline-offset:3px;
  border-radius:2px;
}

p{margin:0}

img{max-width:100%;height:auto}

/* ---------------------------------------------------------
   3. Cabeçalho e rodapé
   --------------------------------------------------------- */

.cabeca{padding:46px 0 0}

.nome{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
}
.nome a{text-decoration:none}

.home .nome{font-size:23px}

.tagline{
  margin-top:8px;
  font-size:15.5px;
  color:var(--terra);
  max-width:46ch;
  text-wrap:pretty;
}

.voltar{
  margin-top:10px;
  font-size:13.5px;
  color:var(--soft);
}

.rodape{
  margin-top:56px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  font-size:13px;
  color:var(--soft);
}

/* ---------------------------------------------------------
   4. Blocos da home
   --------------------------------------------------------- */

.bloco{
  margin-top:34px;
  padding-top:16px;
  border-top:1px solid var(--rule);
}

.bloco > h2{
  margin:0 0 12px;
  font-family:"Montserrat",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:13px;
  letter-spacing:.13em;
  text-transform:lowercase;
  color:var(--soft);
}

.marcas{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:15.5px;
}
.marcas li::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--marca);
  margin-right:10px;
  vertical-align:middle;
}

.resumo{max-width:52ch;font-size:15.5px;text-wrap:pretty}

.mais{margin-top:12px;font-size:15px}
.mais .quando{color:var(--soft);font-size:13.5px}

.contato{font-size:15.5px}

/* ---------------------------------------------------------
   5. Lista de textos
   --------------------------------------------------------- */

.lista{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.item{
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:0 16px;
  font-size:15.5px;
  align-items:baseline;
}

.item .data{
  font-size:13px;
  color:var(--soft);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

.item .titulo{text-wrap:pretty}

.vazio{color:var(--soft);font-size:15px}

/* ---------------------------------------------------------
   6. Página de texto
   --------------------------------------------------------- */

.texto{margin-top:38px;padding-top:18px;border-top:1px solid var(--rule)}

.texto > h1,
.pagina > h1,
.busca > h1{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:clamp(27px,5.4vw,37px);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

.assinatura{
  margin-top:10px;
  font-size:13px;
  color:var(--soft);
  font-variant-numeric:tabular-nums;
}

.prosa{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:64ch;
}
.prosa p{text-wrap:pretty}
.prosa h2{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:10px 0 0;
  text-wrap:balance;
}
.prosa h3{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:17px;
  margin:8px 0 0;
}
.prosa ul,
.prosa ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prosa blockquote{
  margin:0;
  padding-left:18px;
  border-left:2px solid var(--marca);
  color:var(--terra);
}
.prosa a{text-decoration-color:var(--terra)}
.prosa hr{
  border:0;
  border-top:1px solid var(--rule);
  width:100%;
  margin:6px 0;
}
.prosa figure{margin:0}
.prosa figcaption{margin-top:7px;font-size:13.5px;color:var(--soft)}
.prosa code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;
  background:var(--surface);
  padding:1px 5px;
}
.prosa pre{
  overflow-x:auto;
  background:var(--surface);
  border:1px solid var(--rule);
  padding:14px 16px;
  font-size:13.5px;
  line-height:1.6;
}
.prosa table{border-collapse:collapse;width:100%;font-size:15px}
.prosa th,
.prosa td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--rule)}

.tabelawrap{overflow-x:auto}

.compartilhar{
  margin-top:38px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-size:14px;
  color:var(--soft);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.compartilhar .endereco{color:var(--ink);word-break:break-all}

/* ---------------------------------------------------------
   7. Páginas fixas e busca
   --------------------------------------------------------- */

.pagina{margin-top:38px;padding-top:18px;border-top:1px solid var(--rule)}

.busca{
  margin-top:38px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.busca form{display:flex;gap:8px;flex-wrap:wrap}
.busca input[type="search"]{
  flex:1 1 220px;
  font:inherit;
  font-size:15px;
  padding:9px 12px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule-forte);
  border-radius:0;
}
.busca button{
  font:inherit;
  font-size:14px;
  padding:9px 18px;
  color:var(--ground);
  background:var(--terra);
  border:1px solid var(--terra);
  border-radius:0;
  cursor:pointer;
}
.busca button:hover{background:var(--ink);border-color:var(--ink)}

.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* paginação do WordPress */
.navigation.pagination{margin-top:26px;font-size:14px}
.navigation.pagination .screen-reader-text{display:none}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:6px 14px}
.navigation.pagination .page-numbers{
  color:var(--soft);
  text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.navigation.pagination a.page-numbers:hover{color:var(--ink)}
.navigation.pagination .page-numbers.current{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------
   8. Telas estreitas
   --------------------------------------------------------- */

@media (max-width:560px){
  .wrap{padding:0 20px 70px}
  .item{grid-template-columns:1fr;gap:1px}
  .item .data{font-size:12.5px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}