/*
Theme Name:  Arquidiocese de Natal
Theme URI:   https://www.arquidiocesedenatal.org.br
Author:      Arquidiocese de Natal
Description: Tema oficial do portal da Arquidiocese de Natal. Desenvolvido sob medida com suporte a CPTs de Paróquias, Clero, Notícias, Artigos, Congregações e Horários de Missa.
Version:     1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.1
License:     Privado — uso exclusivo da Arquidiocese de Natal
Text Domain: arqnatal
*/

/* ============================================================
   TOKENS — Paleta e variáveis globais
   ============================================================ */
:root {
  /* Cores institucionais */
  --azul-escuro:   #0C447C;
  --azul-medio:    #185FA5;
  --azul-claro:    #B5D4F4;
  --azul-bg:       #E6F1FB;
  --vermelho:      #A32D2D;
  --vermelho-claro:#F7C1C1;
  --ambar:         #FAC775;
  --ambar-escuro:  #633806;
  --creme:         #F1EFE8;
  --creme-borda:   #D3D1C7;

  /* Neutros */
  --branco:        #FFFFFF;
  --cinza-100:     #F5F5F3;
  --cinza-200:     #E8E8E4;
  --cinza-400:     #9A9992;
  --cinza-600:     #5F5E5A;
  --cinza-800:     #2C2C2A;
  --texto:         #1A1A18;
  --texto-muted:   #5F5E5A;

  /* Tipografia */
  --fonte-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-serif:   'Lora', Georgia, 'Times New Roman', serif;

  /* Escala tipográfica */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  /* Espaçamento */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --container-max:  1200px;
  --container-wide: 1400px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
}

/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--fonte-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-medio); text-decoration: none; }
a:hover { color: var(--azul-escuro); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-sans);
  font-weight: 600;
  line-height: 1.25;
  color: var(--texto);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

ul, ol { list-style: none; }

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container--wide {
  max-width: var(--container-wide);
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.section { padding: var(--space-12) 0; }
.section--creme { background: var(--creme); }
.section--azul  { background: var(--azul-medio); }
.section--escuro { background: var(--azul-escuro); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Badge / Editoria */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge--azul    { background: var(--azul-bg);      color: var(--azul-escuro); }
.badge--vermelho{ background: var(--vermelho-claro);color: var(--vermelho); }
.badge--ambar   { background: var(--ambar);         color: var(--ambar-escuro); }
.badge--creme   { background: var(--creme);         color: var(--cinza-600); }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
}
.btn:hover  { opacity: .9; }
.btn:active { transform: scale(.98); }

.btn--vermelho  { background: var(--vermelho);   color: var(--branco); }
.btn--azul      { background: var(--azul-medio); color: var(--branco); }
.btn--outline   { background: transparent; color: var(--azul-medio); border: 1.5px solid var(--azul-medio); }

/* Cards */
.card {
  background: var(--branco);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-md); }

.card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card__body { padding: var(--space-4); }
.card__title { font-size: var(--text-base); font-weight: 600; line-height: 1.4; margin: var(--space-2) 0; }
.card__meta  { font-size: var(--text-xs); color: var(--texto-muted); }

/* Grid de notícias */
.grid-noticias {
  display: grid;
  gap: var(--space-6);
}
.grid-noticias--destaque {
  grid-template-columns: 1.6fr 1fr;
}
@media (max-width: 768px) {
  .grid-noticias--destaque { grid-template-columns: 1fr; }
}

/* Linha do tempo (clero) */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 100px 20px 1fr;
  gap: 0 var(--space-4);
  align-items: start;
}
.timeline__ano { font-size: var(--text-sm); font-weight: 600; color: var(--azul-medio); text-align: right; padding-top: 3px; }
.timeline__dot-wrap { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.timeline__dot--formacao { background: var(--azul-claro); }
.timeline__dot--ordenacao { background: var(--azul-medio); }
.timeline__dot--pastoral { background: var(--ambar); }
.timeline__dot--atual { background: var(--vermelho); }
.timeline__linha { width: 2px; flex: 1; min-height: 24px; background: var(--cinza-200); }
.timeline__content { padding-bottom: var(--space-6); }
.timeline__label { font-size: var(--text-sm); font-weight: 600; color: var(--texto); line-height: 1.4; }
.timeline__sub { font-size: var(--text-xs); color: var(--texto-muted); margin-top: 3px; }
.timeline__sub a { color: var(--azul-medio); }

/* Tags de horário */
.tag-hora {
  display: inline-block;
  background: var(--azul-medio);
  color: var(--branco);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  margin: 2px;
}
.tag-hora--especial { background: var(--vermelho); }

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--azul-medio);
  outline-offset: 3px;
}

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