/*
Theme Name: Fé do Dia
Theme URI: https://fedodia.com
Template: hello-elementor
Description: Tema filho do Hello Elementor para o site Fé do Dia — mensagens, orações, versículos, reflexões, santos e anjos/arcanjos cristãos. Design system próprio (paleta azul profundo/dourado/areia), compatível com Elementor (Global Colors/Fonts) e preparado para Google Ads (ad slots reservados) e SEO técnico.
Author: Fé do Dia
Version: 1.0.0
Text Domain: fe-do-dia
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Este arquivo carrega DEPOIS do style.css do tema pai (Hello Elementor, que é
propositalmente quase vazio) e define todo o design system do site. Também é
aqui que o WordPress lê o cabeçalho do tema (Theme Name, Template etc.) —
por isso este comentário deve ficar intacto no topo do arquivo.
*/


/* ==========================================================================
   Fé do Dia — Design System
   Paleta: azul profundo, branco, dourado suave, areia/bege
   ========================================================================== */

:root {
  --color-blue-deep: #1B3358;
  --color-blue-deep-dark: #12233F;
  --color-white: #FFFFFF;
  --color-sand: #F5EFE6;
  --color-sand-dark: #EAE0CF;
  --color-gold: #B8873F;      /* usado só em acentos/ícones/bordas, nunca como cor de texto corrido */
  --color-gold-soft: #C9A15C;
  --color-text: #22303F;
  --color-text-soft: #4B5A6B;
  --color-border: #E2D9C8;
  --color-success-bg: #234B3A;

  /* Só fontes já instaladas no sistema do visitante — nenhum arquivo ou link
     externo é carregado (sem CDN de fontes, sem dependência de terceiros). */
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-soft: 0 4px 20px rgba(27, 51, 88, 0.08);
  --shadow-soft-lg: 0 10px 34px rgba(27, 51, 88, 0.12);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  --max-width: 1080px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-blue-deep);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-2); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Acessibilidade: foco sempre visível */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* H1 recebe foco programático ao trocar de rota (anúncio para leitor de tela);
   estilizamos com :focus (não só :focus-visible) para cobrir esse caso. */
main h1:focus {
  outline: 3px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-blue-deep);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Header ---------- */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  flex-wrap: wrap;
}
.logo {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-blue-deep);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.logo .logo-mark {
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-blue-deep);
  color: var(--color-sand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.main-nav { display: flex; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
.main-nav a {
  text-decoration: none;
  color: var(--color-text-soft);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-blue-deep);
  border-bottom-color: var(--color-gold);
}

.header-search { position: relative; }
.header-search input[type="search"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.55rem 1rem 0.55rem 2.2rem;
  font-size: 0.9rem;
  width: 200px;
  background: var(--color-sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%234B5A6B' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.7rem center;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--color-sand) 0%, var(--color-white) 100%);
  padding: var(--space-6) 0 var(--space-5);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
  opacity: 0.5;
}
.hero::before {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(184,135,63,0.22), transparent 70%);
  top: -140px; left: -80px;
}
.hero::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(27,51,88,0.10), transparent 70%);
  bottom: -180px; right: -100px;
}
.hero .kicker-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.hero p.subtitle {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  max-width: 640px;
  margin: 0 auto var(--space-4);
}
.hero-search {
  max-width: 560px;
  margin: 0 auto var(--space-4);
  display: flex;
  gap: 0.5rem;
  background: var(--color-white);
  padding: 0.4rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}
.hero-search input {
  flex: 1;
  min-width: 0; /* permite ao input encolher dentro do flex row em telas muito estreitas (corrige overflow em 320px) */
  border: none;
  background: transparent;
  padding: 0.7rem 1rem;
  font-size: 1rem;
}
.hero-search input:focus { outline: none; }
.hero-search button {
  background: var(--color-blue-deep);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  font-weight: 600;
}
.hero-search button:hover { background: var(--color-blue-deep-dark); }

/* ==========================================================================
   Espaços publicitários (Ad Slots) — reservados para Google Ads.
   Sem anúncio real implementado: apenas placeholders com dimensão fixa
   (evita Cumulative Layout Shift quando o anúncio real carregar) e rótulo
   "Publicidade" para deixar clara a separação entre conteúdo e anúncio.
   ========================================================================== */
.ad-slot {
  width: 100%;
  margin: var(--space-4) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--color-sand);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-soft);
  font-size: 0.8rem;
}
.ad-slot__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-soft);
  opacity: 0.75;
}
/* Banner topo: baixo em mobile (evita ocupar a dobra inteira), maior em desktop */
.ad-slot--top { max-width: var(--max-width); min-height: 60px; margin: var(--space-2) auto; }
@media (min-width: 768px) { .ad-slot--top { min-height: 90px; } }
/* Banner entre blocos de conteúdo, dentro da página individual */
.ad-slot--incontent { max-width: 728px; min-height: 100px; }
@media (min-width: 768px) { .ad-slot--incontent { min-height: 90px; } }
/* Coluna lateral em desktop (ver .content-with-sidebar) */
.ad-slot--sidebar { min-height: 250px; width: 300px; max-width: 100%; position: sticky; top: var(--space-3); }
/* Rodapé, antes do footer */
.ad-slot--bottom { max-width: var(--max-width); min-height: 90px; }
/* In-feed em telas pequenas (listas/arquivos), escondido em desktop pois a sidebar assume o lugar */
.ad-slot--mobile-infeed { grid-column: 1 / -1; min-height: 100px; }
@media (min-width: 1024px) { .ad-slot--mobile-infeed { display: none; } }

/* Layout com sidebar de anúncio (usado nas páginas de arquivo/categoria) */
.content-with-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
.content-with-sidebar > .content-main { flex: 1; min-width: 0; width: 100%; }
.content-with-sidebar > .ad-slot--sidebar { display: none; }
@media (min-width: 1024px) {
  .content-with-sidebar { flex-direction: row; }
  .content-with-sidebar > .ad-slot--sidebar { display: flex; flex-shrink: 0; }
}

.shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-blue-deep);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: border-color .15s, transform .15s;
}
.chip:hover { border-color: var(--color-gold); transform: translateY(-1px); }

/* ---------- Seções ---------- */
.section { padding: var(--space-5) 0; }
.section.alt { background: var(--color-sand); }
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-4);
}
.section-head p { color: var(--color-text-soft); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-3);
}
.grid.grid-narrow { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- Cards ---------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--shadow-soft-lg); transform: translateY(-2px); }
.card .card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  font-weight: 700;
}
.card .card-tag svg { width: 14px; height: 14px; flex-shrink: 0; }
.kicker svg, .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.card h3 { margin: 0; }
.card p { color: var(--color-text-soft); font-size: 0.95rem; margin: 0; }
.card .card-ref {
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  font-style: italic;
}

.category-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
  display: block;
}
.category-card h3 { margin-bottom: 0.25rem; }
.category-card p { color: var(--color-text-soft); font-size: 0.9rem; margin: 0; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  min-height: 44px; /* alvo de toque acessível */
}
.btn-primary { background: var(--color-blue-deep); color: var(--color-white); }
.btn-primary:hover { background: var(--color-blue-deep-dark); }
.btn-whatsapp { background: #25D366; color: #06301A; }
.btn-whatsapp:hover { background: #1EBE59; }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-blue-deep); }
.btn-outline:hover { border-color: var(--color-gold); }
.action-bar { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: var(--space-3) 0; }

.copy-feedback {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--color-success-bg);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---------- Página individual ---------- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}
.breadcrumbs a { color: var(--color-text-soft); text-decoration: underline; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 0.3rem; color: var(--color-border); }

.content-single { max-width: 720px; margin: 0 auto; }
.content-single .kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gold);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.content-single .intro {
  font-size: 1.15rem;
  color: var(--color-text-soft);
}
.content-single .corpo p {
  font-size: 1.15rem;
  line-height: 1.8;
}
.reference-box {
  background: var(--color-sand);
  border-left: 4px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  font-style: italic;
  color: var(--color-blue-deep);
}
.reflexao-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.reflexao-box h2 { font-size: 1.1rem; }

.personalize-box {
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.personalize-box label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.personalize-box .row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.personalize-box input[type="text"] {
  flex: 1; min-width: 180px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

/* ---------- Rodapé ---------- */
.site-footer {
  background: var(--color-blue-deep);
  color: #D9E1EC;
  padding: var(--space-5) 0 var(--space-3);
  margin-top: var(--space-6);
}
.site-footer a { color: #D9E1EC; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.footer-grid h4 { color: var(--color-white); font-size: 0.95rem; margin-bottom: 0.6rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--space-3);
  font-size: 0.8rem;
  color: #A9B7CC;
  text-align: center;
}

/* ---------- Busca / Estado vazio ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-5) 0;
  color: var(--color-text-soft);
}

/* ---------- Utilidades ---------- */
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }

@media (max-width: 720px) {
  .site-header .container { gap: var(--space-2); }
  .main-nav ul { gap: var(--space-2); }
  .header-search input[type="search"] { width: 100%; }
  body { font-size: 17px; }
}