/* ============================================================
   Juliano Medeiros 5050 — estilos e fontes compartilhados do hub
   ============================================================ */

@font-face{
  font-family: 'Arboria Black';
  src: url('fonts/Arboria-Black.woff2') format('woff2'),
       url('fonts/Arboria-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Arboria Bold';
  src: url('fonts/Arboria-Bold.woff2') format('woff2'),
       url('fonts/Arboria-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Roc Grotesk Condensed';
  src: url('fonts/RocGroteskCondensed-Bold.woff2') format('woff2'),
       url('fonts/RocGroteskCondensed-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Roc Grotesk Compressed';
  src: url('fonts/RocGroteskCompressed-Bold.woff2') format('woff2'),
       url('fonts/RocGroteskCompressed-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Roc Grotesk Compressed';
  src: url('fonts/RocGroteskCompressed-Medium.woff2') format('woff2'),
       url('fonts/RocGroteskCompressed-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --laranja: #E34900;
  --laranja-escuro: #B93900;
  --amarelo: #FEDF00;
  --verde: #3C7A4B;
  --roxo: #5B2C86;
  --preto: #141414;
  --branco: #FFFFFF;
  --cinza-texto: #55524f;

  /* Scale VF (fonte de texto corrido da IDV) ainda nao foi recebida da Urissane -
     usando Inter como substituta ate chegar o arquivo oficial. */
  --font-title: 'Arboria Black', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Arboria Bold', 'Segoe UI', Arial, sans-serif;
  --font-label: 'Roc Grotesk Condensed', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--branco);
  color: var(--preto);
  min-height: 100vh;
}

a{ color: inherit; }

/* ---- shared header band (logo + candidate photo) ---- */
.site-header{
  width: 100%;
  background: var(--laranja);
  padding: 22px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.site-header a.home-link{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-decoration: none;
}
.site-header .brand-logo{
  width: min(42vw, 190px);
  height: auto;
  display: block;
}
.site-header .candidate-photo{
  width: min(24vw, 100px);
  height: auto;
  border-radius: 50%;
  display: block;
}

/* ---- shared footer ---- */
.site-footer{
  margin: 48px auto 0;
  max-width: 440px;
  padding: 0 20px 40px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8a8a8a;
  text-align: center;
}
.site-footer em{
  display: block;
  margin-bottom: 10px;
  color: #6f6f6f;
  font-style: italic;
}

/* ---- generic buttons used across tools ---- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 2px solid var(--preto);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: normal;
  cursor: pointer;
  text-decoration: none;
}
.btn-outline{
  background: var(--branco);
  color: var(--preto);
}
.btn-solid{
  background: var(--laranja);
  border-color: var(--laranja);
  color: #fff;
}
.btn-solid:hover{ background: var(--laranja-escuro); border-color: var(--laranja-escuro); }
.btn:disabled{
  background:#d8d8d8;
  border-color:#d8d8d8;
  color:#9a9a9a;
  cursor:not-allowed;
}