/*
Theme Name:   Rota das Nações
Theme URI:    https://rotadasnacoes.com
Description:  Tema filho do Kadence para o portal Rota das Nações
Author:       Rota das Nações
Template:     kadence
Version:      1.0.0
Text Domain:  rota-das-nacoes
*/

/* ============================================================
   ROTA DAS NAÇÕES — CSS Variables (Identidade Visual)
   ============================================================ */
:root {
  /* Cores primárias */
  --rdn-blue:       #13283E;
  --rdn-navy:       #0C2A40;
  --rdn-blue-mid:   #1e3a55;
  --rdn-blue-lt:    #344252;
  --rdn-blue-hint:  #58687C;
  --rdn-blue-soft:  #7a9ab5;
  --rdn-gold:       #CE783B;
  --rdn-gold-dark:  #A85F2A;
  --rdn-gold-soft:  #E49953;
  --rdn-amber:      #F2B776;
  --rdn-beige:      #FAF8F2;
  --rdn-ivory:      #F3EDDF;
  --rdn-sand:       #EBE6DE;
  --rdn-sand2:      #DABDA4;
  --rdn-olive:      #556046;
  --rdn-olive-mid:  #7A8765;
  --rdn-olive-lt:   #A3AF8F;

  /* Cores semânticas — índices */
  --rdn-good-bg:    #EAF3DE;
  --rdn-good-text:  #27500A;
  --rdn-good-border:#97C459;
  --rdn-med-bg:     #FAEEDA;
  --rdn-med-text:   #633806;
  --rdn-med-border: #EF9F27;
  --rdn-bad-bg:     #FCEBEB;
  --rdn-bad-text:   #791F1F;
  --rdn-bad-border: #F09595;

  /* Score de perseguição */
  --rdn-persec-low:  #639922;
  --rdn-persec-med:  #BA7517;
  --rdn-persec-high: #E24B4A;

  /* Tipografia */
  --rdn-font-title: 'Playfair Display', Georgia, serif;
  --rdn-font-body:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rdn-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Espaçamento */
  --rdn-space-xs:   4px;
  --rdn-space-sm:   8px;
  --rdn-space-md:   12px;
  --rdn-space-lg:   16px;
  --rdn-space-xl:   24px;
  --rdn-space-2xl:  32px;
  --rdn-space-3xl:  48px;
  --rdn-space-4xl:  64px;

  /* Border radius */
  --rdn-radius-sm:  4px;
  --rdn-radius-md:  8px;
  --rdn-radius-lg:  12px;
  --rdn-radius-xl:  16px;
}

/* ============================================================
   TIPOGRAFIA GLOBAL
   ============================================================ */
body {
  font-family: var(--rdn-font-body);
  background-color: var(--rdn-beige);
  color: var(--rdn-blue);
}

h1, h2, h3, .rdn-heading {
  font-family: var(--rdn-font-title);
  font-weight: 400;
  color: var(--rdn-blue);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.site-header,
header.site-header {
  background-color: var(--rdn-navy) !important;
}

.main-navigation a,
.site-navigation a {
  color: rgba(255,255,255,.55);
  font-family: var(--rdn-font-body);
  font-size: 13px;
}

.main-navigation a:hover,
.site-navigation a:hover {
  color: #ffffff;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.wp-element-button,
.btn-primary,
.rdn-btn {
  background-color: var(--rdn-gold);
  color: #ffffff;
  border: none;
  border-radius: var(--rdn-radius-md);
  padding: 10px 20px;
  font-family: var(--rdn-font-body);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .2s;
}

.wp-element-button:hover,
.btn-primary:hover,
.rdn-btn:hover {
  background-color: var(--rdn-gold-dark);
  color: #ffffff;
}

/* ============================================================
   CARDS
   ============================================================ */
.rdn-card {
  background: #ffffff;
  border: 1px solid var(--rdn-sand);
  border-radius: var(--rdn-radius-lg);
  padding: var(--rdn-space-lg);
}

.rdn-card-dark {
  background: var(--rdn-blue-mid);
  border: 0.5px solid rgba(255,255,255,.08);
  border-radius: var(--rdn-radius-lg);
  padding: var(--rdn-space-lg);
}

/* ============================================================
   SEÇÕES ALTERNADAS
   ============================================================ */
.rdn-section {
  padding: var(--rdn-space-2xl) var(--rdn-space-3xl);
  background: var(--rdn-beige);
}

.rdn-section-alt {
  padding: var(--rdn-space-2xl) var(--rdn-space-3xl);
  background: var(--rdn-ivory);
}

.rdn-section-dark {
  padding: var(--rdn-space-2xl) var(--rdn-space-3xl);
  background: var(--rdn-navy);
}

/* ============================================================
   BANDEIRAS
   ============================================================ */
.rdn-flag {
  border-radius: var(--rdn-radius-sm);
  border: 0.5px solid rgba(0,0,0,.1);
  object-fit: cover;
  display: block;
}

/* ============================================================
   BARRA DE PERSEGUIÇÃO
   ============================================================ */
.rdn-persec-track {
  height: 10px;
  background: var(--rdn-sand);
  border-radius: 5px;
  overflow: hidden;
}

.rdn-persec-fill {
  height: 10px;
  border-radius: 5px;
  transition: width .6s ease;
}

.rdn-persec-low  { background: var(--rdn-persec-low); }
.rdn-persec-med  { background: var(--rdn-persec-med); }
.rdn-persec-high { background: var(--rdn-persec-high); }

/* ============================================================
   CARDS DE ÍNDICE
   ============================================================ */
.rdn-ind-good {
  background: var(--rdn-good-bg);
  border: 1px solid var(--rdn-good-border);
  border-radius: var(--rdn-radius-md);
  padding: 10px;
  color: var(--rdn-good-text);
}

.rdn-ind-med {
  background: var(--rdn-med-bg);
  border: 1px solid var(--rdn-med-border);
  border-radius: var(--rdn-radius-md);
  padding: 10px;
  color: var(--rdn-med-text);
}

.rdn-ind-bad {
  background: var(--rdn-bad-bg);
  border: 1px solid var(--rdn-bad-border);
  border-radius: var(--rdn-radius-md);
  padding: 10px;
  color: var(--rdn-bad-text);
}

.rdn-ind-mission {
  background: rgba(206,120,59,.07);
  border: 1px solid rgba(206,120,59,.25);
  border-radius: var(--rdn-radius-md);
  padding: 10px;
  color: var(--rdn-blue);
}

/* ============================================================
   TAGS / BADGES
   ============================================================ */
.rdn-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--rdn-font-body);
  font-weight: 500;
}

.rdn-tag-gold    { background: rgba(206,120,59,.1); color: var(--rdn-gold); }
.rdn-tag-olive   { background: #EAF3DE; color: var(--rdn-olive); }
.rdn-tag-red     { background: var(--rdn-bad-bg); color: var(--rdn-bad-text); }
.rdn-tag-neutral { background: var(--rdn-sand); color: var(--rdn-blue-hint); }

/* ============================================================
   BARRA DE PROGRESSO (alcance evangélico)
   ============================================================ */
.rdn-progress-track {
  height: 5px;
  background: var(--rdn-sand);
  border-radius: 3px;
  overflow: hidden;
}

.rdn-progress-fill {
  height: 5px;
  background: var(--rdn-gold);
  border-radius: 3px;
  transition: width .6s ease;
}

/* ============================================================
   BLOCO DE VERSÍCULO / CITAÇÃO
   ============================================================ */
.rdn-versicle {
  border-left: 2px solid var(--rdn-gold);
  padding: 10px 14px;
  border-radius: 0 var(--rdn-radius-md) var(--rdn-radius-md) 0;
  background: var(--rdn-ivory);
  font-family: var(--rdn-font-title);
  font-style: italic;
  color: var(--rdn-blue);
  line-height: 1.7;
}

.rdn-versicle-ref {
  font-size: 11px;
  color: var(--rdn-gold);
  font-style: normal;
  margin-top: 6px;
  font-family: var(--rdn-font-body);
}

/* ============================================================
   EYEBROW / LABEL DE SEÇÃO
   ============================================================ */
.rdn-eyebrow {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--rdn-gold);
  font-family: var(--rdn-font-body);
  margin-bottom: 6px;
  display: block;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.site-footer {
  background-color: var(--rdn-navy) !important;
  color: rgba(255,255,255,.5);
}

.site-footer a {
  color: rgba(255,255,255,.4);
}

.site-footer a:hover {
  color: var(--rdn-gold);
}