/*
Theme Name:   O Jardim da Lu — Cream Magazine
Theme URI:    https://ojardimdalu.com.br
Description:  Tema filho do Cream Magazine com identidade visual do Jardim da Lu
Author:       O Jardim da Lu
Author URI:   https://ojardimdalu.com.br
Template:     cream-magazine
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  jardim-da-lu-cream
*/

/* =============================================
   VARIÁVEIS — IDENTIDADE VISUAL
============================================= */
:root {
  --verde-escuro:   #3a5a40;
  --verde-medio:    #588157;
  --verde-claro:    #a3b18a;
  --verde-suave:    #dad7cd;
  --bege-claro:     #f5f0e8;
  --bege-medio:     #e8dfd0;
  --terra:          #9c7a5a;

  --texto-escuro:   #2c2c2c;
  --texto-medio:    #555555;
  --texto-claro:    #888888;

  --fonte-titulo:   'Playfair Display', Georgia, serif;
  --fonte-corpo:    'Lato', 'Helvetica Neue', sans-serif;

  --raio:           8px;
  --raio-grande:    14px;
  --sombra-suave:   0 2px 12px rgba(58, 90, 64, 0.08);
  --sombra-media:   0 4px 24px rgba(58, 90, 64, 0.14);
}

/* =============================================
   BASE
============================================= */
body {
  background-color: var(--bege-claro) !important;
  font-family: var(--fonte-corpo) !important;
  color: var(--texto-escuro) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

a {
  color: var(--verde-medio) !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--verde-escuro) !important;
}

/* =============================================
   TIPOGRAFIA
============================================= */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.cream-magazine-section-title {
  font-family: var(--fonte-titulo) !important;
  color: var(--verde-escuro) !important;
}

/* =============================================
   HEADER
============================================= */
#masthead,
.site-header,
.cream-magazine-header-wrap {
  background-color: #ffffff !important;
  border-bottom: 3px solid var(--verde-suave) !important;
  box-shadow: var(--sombra-suave) !important;
}

/* Logo / nome do site */
.site-title a,
.site-branding .site-title a {
  color: var(--verde-escuro) !important;
  font-family: var(--fonte-titulo) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
}

.site-description {
  color: var(--terra) !important;
  font-style: italic !important;
  font-size: 0.85rem !important;
}

/* =============================================
   NAVEGAÇÃO PRINCIPAL
============================================= */
.main-navigation,
#site-navigation,
.cream-magazine-primary-menu-wrap,
.cream-magazine-header-menu-wrap {
  background-color: var(--verde-escuro) !important;
}

.main-navigation ul li a,
.cream-magazine-primary-menu-wrap ul li a,
.cream-magazine-header-menu-wrap ul li a {
  color: #ffffff !important;
  font-family: var(--fonte-corpo) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 14px 18px !important;
  transition: background-color 0.2s ease !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.cream-magazine-primary-menu-wrap ul li a:hover {
  background-color: var(--verde-medio) !important;
  color: #ffffff !important;
}

/* Dropdown */
.main-navigation ul ul,
.cream-magazine-primary-menu-wrap ul ul {
  background-color: var(--verde-escuro) !important;
  border-top: 3px solid var(--verde-medio) !important;
  box-shadow: var(--sombra-media) !important;
}

.main-navigation ul ul li a,
.cream-magazine-primary-menu-wrap ul ul li a {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding: 10px 18px !important;
}

/* =============================================
   FUNDO GERAL DO CONTEÚDO
============================================= */
#content,
.site-content,
.cream-magazine-content-wrap {
  background-color: var(--bege-claro) !important;
}

/* =============================================
   CARDS DE POSTS — HOME E ARQUIVO
============================================= */
.cream-magazine-block-post,
.cream-magazine-post-thumbnail-wrap,
.cream-magazine-content-block,
article.post {
  background-color: #ffffff !important;
  border-radius: var(--raio-grande) !important;
  box-shadow: var(--sombra-suave) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  border: none !important;
}

.cream-magazine-block-post:hover,
article.post:hover {
  box-shadow: var(--sombra-media) !important;
  transform: translateY(-2px) !important;
}

/* Títulos dos cards */
.cream-magazine-block-post .entry-title a,
.cream-magazine-block-post h2 a,
.cream-magazine-block-post h3 a,
article.post .entry-title a {
  color: var(--verde-escuro) !important;
  font-family: var(--fonte-titulo) !important;
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
}

.cream-magazine-block-post .entry-title a:hover,
article.post .entry-title a:hover {
  color: var(--verde-medio) !important;
}

/* Imagem dos cards */
.cream-magazine-block-post img,
.cream-magazine-post-thumbnail-wrap img {
  transition: transform 0.4s ease !important;
}

.cream-magazine-block-post:hover img {
  transform: scale(1.04) !important;
}

/* Meta dos cards (data, autor) */
.cream-magazine-post-meta,
.entry-meta,
.post-meta {
  color: var(--texto-claro) !important;
  font-size: 0.8rem !important;
  font-style: italic !important;
}

.cream-magazine-post-meta a,
.entry-meta a,
.post-meta a {
  color: var(--terra) !important;
}

/* Categorias — badges */
.cream-magazine-post-categories a,
.cat-links a,
.entry-footer .cat-links a {
  background-color: var(--verde-escuro) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.cream-magazine-post-categories a:hover,
.cat-links a:hover {
  background-color: var(--verde-medio) !important;
}

/* =============================================
   SEÇÕES / TÍTULOS DE BLOCO
============================================= */
.cream-magazine-section-title,
.cream-magazine-block-title,
.widget-title {
  font-family: var(--fonte-titulo) !important;
  color: var(--verde-escuro) !important;
  font-size: 1.2rem !important;
  border-bottom: 3px solid var(--verde-medio) !important;
  padding-bottom: 8px !important;
  margin-bottom: 20px !important;
}

.cream-magazine-section-title span,
.cream-magazine-block-title span {
  background-color: var(--verde-escuro) !important;
  color: #ffffff !important;
  padding: 4px 14px !important;
  border-radius: var(--raio) !important;
}

/* =============================================
   POST INDIVIDUAL — SINGLE
============================================= */
.single #content,
.single .site-content {
  background-color: var(--bege-claro) !important;
}

.single article,
.single .hentry {
  background-color: #ffffff !important;
  border-radius: var(--raio-grande) !important;
  box-shadow: var(--sombra-suave) !important;
  padding: 36px !important;
}

/* Título do post */
.single .entry-title {
  font-size: 2.2rem !important;
  line-height: 1.25 !important;
  color: var(--verde-escuro) !important;
  margin-bottom: 12px !important;
}

/* Linha decorativa abaixo do título */
.single .entry-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background-color: var(--verde-claro);
  margin-top: 12px;
  border-radius: 2px;
}

/* Imagem destaque */
.single .post-thumbnail,
.single .cream-magazine-post-thumbnail,
.single .wp-post-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: unset !important;
  border-radius: var(--raio) !important;
  margin-bottom: 28px !important;
  display: block !important;
}

/* Conteúdo do post */
.single .entry-content {
  font-size: 1.05rem !important;
  line-height: 1.9 !important;
  color: var(--texto-medio) !important;
}

.single .entry-content h2 {
  font-size: 1.65rem !important;
  border-bottom: 2px solid var(--verde-suave) !important;
  padding-bottom: 8px !important;
  margin-top: 2em !important;
}

.single .entry-content h3 {
  font-size: 1.25rem !important;
  color: var(--verde-medio) !important;
  margin-top: 1.8em !important;
}

/* Listas */
.single .entry-content ul li::marker,
.single .entry-content ol li::marker {
  color: var(--verde-medio) !important;
}

/* Blockquote */
.single .entry-content blockquote {
  border-left: 4px solid var(--verde-claro) !important;
  background-color: var(--bege-medio) !important;
  padding: 16px 24px !important;
  margin: 2em 0 !important;
  border-radius: 0 var(--raio) var(--raio) 0 !important;
  font-style: italic !important;
  color: var(--verde-escuro) !important;
}

/* Tabelas */
.single .entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2em 0 !important;
  font-size: 0.95rem !important;
  border-radius: var(--raio) !important;
  overflow: hidden !important;
  box-shadow: var(--sombra-suave) !important;
}

.single .entry-content table thead {
  background-color: var(--verde-escuro) !important;
  color: #ffffff !important;
}

.single .entry-content table thead th {
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.single .entry-content table tbody tr {
  border-bottom: 1px solid var(--verde-suave) !important;
  transition: background-color 0.15s ease !important;
}

.single .entry-content table tbody tr:hover {
  background-color: var(--bege-medio) !important;
}

.single .entry-content table tbody tr:nth-child(even) {
  background-color: #faf8f4 !important;
}

.single .entry-content table tbody td {
  padding: 10px 16px !important;
  color: var(--texto-medio) !important;
}

/* Índice de navegação */
.single .entry-content nav {
  background-color: var(--bege-medio) !important;
  border: 1px solid var(--verde-suave) !important;
  border-left: 4px solid var(--verde-medio) !important;
  border-radius: var(--raio) !important;
  padding: 20px 24px !important;
  margin: 2em 0 !important;
}

/* =============================================
   SIDEBAR
============================================= */
.widget-area .widget,
#secondary .widget {
  background-color: #ffffff !important;
  border-radius: var(--raio-grande) !important;
  box-shadow: var(--sombra-suave) !important;
  padding: 22px !important;
  margin-bottom: 28px !important;
  border: none !important;
}

/* =============================================
   BOTÕES E CTA
============================================= */
.cream-magazine-read-more a,
.read-more-link,
.more-link {
  background-color: var(--verde-medio) !important;
  color: #ffffff !important;
  padding: 7px 18px !important;
  border-radius: var(--raio) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.cream-magazine-read-more a:hover,
.read-more-link:hover,
.more-link:hover {
  background-color: var(--verde-escuro) !important;
  color: #ffffff !important;
}

/* =============================================
   PAGINAÇÃO
============================================= */
.page-numbers,
.cream-magazine-pagination .page-numbers {
  background-color: #ffffff !important;
  color: var(--verde-escuro) !important;
  border: 1px solid var(--verde-suave) !important;
  border-radius: var(--raio) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.page-numbers.current,
.page-numbers:hover {
  background-color: var(--verde-medio) !important;
  color: #ffffff !important;
  border-color: var(--verde-medio) !important;
}

/* =============================================
   COMENTÁRIOS
============================================= */
#comments {
  background-color: #ffffff !important;
  border-radius: var(--raio-grande) !important;
  padding: 28px !important;
  box-shadow: var(--sombra-suave) !important;
  margin-top: 28px !important;
}

.comment-respond input,
.comment-respond textarea {
  border: 1px solid var(--verde-suave) !important;
  border-radius: var(--raio) !important;
  padding: 10px 14px !important;
  font-family: var(--fonte-corpo) !important;
  width: 100% !important;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
  border-color: var(--verde-medio) !important;
  outline: none !important;
}

.comment-respond input[type="submit"] {
  background-color: var(--verde-medio) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 28px !important;
  font-weight: 700 !important;
  border-radius: var(--raio) !important;
  cursor: pointer !important;
  width: auto !important;
  transition: background-color 0.2s ease !important;
}

.comment-respond input[type="submit"]:hover {
  background-color: var(--verde-escuro) !important;
}

/* =============================================
   FOOTER
============================================= */
#colophon,
.site-footer,
.cream-magazine-footer-wrap {
  background-color: var(--verde-escuro) !important;
  color: var(--verde-suave) !important;
  border-top: none !important;
}

.cream-magazine-footer-wrap a,
.site-footer a {
  color: var(--verde-claro) !important;
}

.cream-magazine-footer-wrap a:hover,
.site-footer a:hover {
  color: #ffffff !important;
}

.cream-magazine-footer-wrap .widget-title,
.site-footer .widget-title {
  color: #ffffff !important;
  border-bottom-color: var(--verde-medio) !important;
}

.cream-magazine-footer-bottom,
.site-info {
  background-color: rgba(0,0,0,0.2) !important;
  color: var(--verde-claro) !important;
  font-size: 0.85rem !important;
  padding: 14px 0 !important;
}

/* =============================================
   RESPONSIVO
============================================= */
@media (max-width: 768px) {
  .single .entry-title { font-size: 1.7rem !important; }
  .single article { padding: 20px !important; }
  h2 { font-size: 1.4rem !important; }
}