/*
Theme Name: Dira 4020
Theme URI: https://example.com.br
Author: 5am Digi
Author URI: https://5amdigi.com.br
Description: Tema de página única para campanha eleitoral. Banner principal, botões de redes sociais e rodapé com identificação legal de propaganda eleitoral. Textos, imagem e links editáveis em Aparência > Personalizar > Campanha.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dira-4020
Tags: one-column, full-width-template, custom-colors, custom-logo
*/

:root{
  --dr-roxo:      #3A0260;
  --dr-roxo-esc:  #260140;
  --dr-azul:      #001D4E;
  --dr-azul-clar: #0A2E6E;
  --dr-ciano:     #0088B7;
  --dr-branco:    #FDFDFD;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--dr-roxo);
  color:var(--dr-branco);
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.dr-skip{
  position:absolute; left:-9999px; top:0;
  background:var(--dr-ciano); color:var(--dr-branco);
  padding:10px 16px; font-weight:700; z-index:99;
}
.dr-skip:focus{ left:0; }

.dr-page{
  max-width:2033px;
  margin:0 auto;
}

/* ---------- banner ---------- */
.dr-banner{ display:block; width:100%; height:auto; }

/* ---------- faixa de número ---------- */
.dr-faixa{
  background:linear-gradient(90deg,var(--dr-azul),var(--dr-azul-clar),var(--dr-azul));
  padding:22px 18px;
  text-align:center;
  border-top:3px solid var(--dr-ciano);
  border-bottom:3px solid var(--dr-ciano);
}
.dr-faixa p{
  margin:0;
  font-family:"Anton","Arial Black",sans-serif;
  font-weight:400;
  font-size:clamp(20px,3.4vw,38px);
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.1;
}
.dr-faixa .dr-num{ color:var(--dr-ciano); }

/* ---------- redes ---------- */
.dr-redes{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding:34px 18px;
}
.dr-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 26px;
  border:2px solid var(--dr-branco);
  border-radius:999px;
  color:var(--dr-branco);
  background:transparent;
  text-decoration:none;
  font-weight:700;
  font-size:19px;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.dr-btn svg{ width:22px; height:22px; fill:currentColor; flex:0 0 auto; }
.dr-btn:hover,
.dr-btn:focus-visible{
  background:var(--dr-ciano);
  border-color:var(--dr-ciano);
  color:var(--dr-branco);
}
.dr-btn:focus-visible{ outline:3px solid var(--dr-branco); outline-offset:3px; }

/* ---------- conteúdo opcional ---------- */
.dr-conteudo{
  max-width:760px;
  margin:0 auto;
  padding:0 20px 40px;
  font-size:18px;
  line-height:1.65;
}
.dr-conteudo h2,
.dr-conteudo h3{
  font-family:"Anton","Arial Black",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--dr-ciano);
}
.dr-conteudo a{ color:var(--dr-ciano); }

/* ---------- rodapé legal ---------- */
.dr-rodape{
  background:var(--dr-roxo-esc);
  border-top:2px solid var(--dr-ciano);
  padding:20px 18px 24px;
  text-align:center;
}
.dr-rodape .dr-tag{
  display:inline-block;
  font-weight:700;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dr-ciano);
  margin-bottom:8px;
}
.dr-rodape .dr-legal{
  margin:0;
  font-size:clamp(12px,1.5vw,15px);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.88;
  line-height:1.55;
}

@media (max-width:520px){
  .dr-redes{ flex-direction:column; padding:26px 18px; }
  .dr-btn{ width:100%; max-width:320px; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .dr-btn{ transition:none; }
}