/*
Theme Name: Guia Vale a Pena
Theme URI: https://guiavaleapena.com
Author: Guia Vale a Pena
Description: Tema de blog de reviews e afiliados, com sistema de Produtos (CPT), categorias coloridas, Top 10, busca ao vivo e blocos nativos de afiliado (Mercado Livre / Amazon).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: guia-vale-a-pena
*/

/* =========================================================
   Este arquivo carrega só o essencial (reset, variáveis,
   header/menu/rodapé — que se repetem em toda página).
   Estilos específicos de cada template (home, artigo,
   produto, categoria...) ficam em assets/css/main.css,
   carregado depois deste pelo functions.php.
   ========================================================= */

:root{
  --paper:#F9FBFC;
  --alt:#F1F1F1;
  --ink:#14151A;
  --ink-soft:#5C5E68;
  --ink-faint:#93949E;
  --line:#E2E6EA;
  --blue:#2E6BFF;
  --blue-soft:#EAF0FF;
  --pink:#FF3D8F;
  --pink-soft:#FFE9F2;
  --green:#17A567;
  --green-soft:#E4F8ED;
  --red:#FF4D4D;
  --red-soft:#FFECEC;
  --amber:#F5A623;
  --amber-soft:#FFF3E0;
}

/* ---------- RESET BASE ---------- */
*{box-sizing:border-box; margin:0; padding:0; max-width:100%;}
html{overflow-x:hidden; width:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{font-family:'Sora',sans-serif;}
img{max-width:100%; height:auto; display:block;}
ul{list-style:none;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.content-shell{max-width:900px; margin:0 auto; padding:0 32px;}
.screen-reader-text{position:absolute; left:-9999px;}

/* ---------- LOGO ---------- */
.logo{font-family:'Sora',sans-serif; font-weight:800; font-size:17px;}
.logo .l1{color:#fff;}
.logo .l2{
  background:linear-gradient(90deg, #6C9BFF, #FF6FAE 55%, #4FE0A2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* variante clara do logo (usada no rodapé claro da home/categoria) */
.logo.on-light .l1{color:var(--ink);}

/* ---------- HEADER ---------- */
header{background:var(--ink); border-bottom:1px solid rgba(255,255,255,0.08);}
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:20px; padding:15px 32px;
}
/* posição fixa por coluna — evita que itens escondidos (nav/busca no mobile)
   empurrem o menu hambúrguer pra coluna errada */
.header-inner .logo{grid-column:1;}
.header-inner nav{grid-column:2;}
.header-inner .search-wrap{grid-column:3;}
.header-inner .mobile-toggle{grid-column:4;}

nav{display:flex; gap:22px; justify-content:center; font-size:13px; font-weight:600;}
nav a{color:rgba(255,255,255,0.75);}
nav a:hover, nav a.active, nav li.current-menu-item > a{color:#fff;}

/* ---------- BUSCA (desktop) ---------- */
.search-wrap{position:relative; flex-shrink:0;}
.search-box{
  display:flex; align-items:center; gap:8px; height:38px; width:38px; border-radius:100px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); overflow:hidden;
  transition:width .28s ease, background .2s ease; cursor:pointer; padding:0 10px;
}
.search-box.is-open{width:230px; background:rgba(255,255,255,0.14); cursor:text;}
.search-box .ic{flex:0 0 auto; color:#fff; font-size:14px;}
.search-box input{
  border:none; background:transparent; outline:none; color:#fff; font-size:13.5px;
  width:0; opacity:0; transition:opacity .2s ease .08s; font-family:'Inter',sans-serif;
}
.search-box.is-open input{width:100%; opacity:1;}
.search-box input::placeholder{color:rgba(255,255,255,0.5);}
.search-close{display:none; color:rgba(255,255,255,0.6); font-size:12px; flex-shrink:0;}
.search-box.is-open .search-close{display:block;}

.search-dropdown{
  position:absolute; top:48px; right:0; width:320px; background:#fff; border-radius:14px;
  border:1px solid var(--line); box-shadow:0 20px 40px -16px rgba(20,21,26,0.25); overflow:hidden;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:50;
}
.search-dropdown.is-visible{opacity:1; transform:translateY(0); pointer-events:auto;}
.search-result-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid var(--line);}
.search-result-row:first-child{border-top:none;}
.search-result-row:hover{background:var(--blue-soft);}
.sr-thumb{width:38px; height:38px; border-radius:8px; flex-shrink:0; background:linear-gradient(150deg,#2c2e38,#0e0f13); background-size:cover; background-position:center;}
.sr-info h4{font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; margin-bottom:2px;}
.sr-info span{font-size:11px; color:var(--ink-faint);}
.search-viewall{display:flex; align-items:center; justify-content:center; padding:12px; font-size:12.5px; font-weight:700; color:var(--blue); border-top:1px solid var(--line); background:var(--alt);}
.search-empty{padding:16px 14px; font-size:12.5px; color:var(--ink-faint); text-align:center;}

/* ---------- MENU MOBILE (hambúrguer + gaveta) ---------- */
.mobile-toggle{
  display:none; width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.1); flex-direction:column; align-items:center; justify-content:center; gap:4px;
  flex-shrink:0;
}
.mobile-toggle span{width:16px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.mobile-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.mobile-toggle.is-open span:nth-child(2){opacity:0;}
.mobile-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:150; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.mobile-backdrop.is-open{opacity:1; pointer-events:auto;}

.mobile-drawer{
  position:fixed; top:0; right:-300px; width:280px; max-width:82vw; height:100vh; background:var(--ink);
  z-index:200; transition:right .3s ease; padding:20px 22px 24px; box-shadow:-24px 0 48px rgba(0,0,0,0.35);
  overflow-y:auto;
}
.mobile-drawer.is-open{right:0;}
.mobile-drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;}
.mobile-drawer-close{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); color:#fff; background:transparent; display:flex; align-items:center; justify-content:center; font-size:14px;}
.mobile-link{display:block; padding:13px 4px; font-size:15px; font-weight:600; color:rgba(255,255,255,0.8); border-bottom:1px solid rgba(255,255,255,0.08);}
.mobile-link:hover, .mobile-link.active{color:#fff;}
.mobile-drawer-search{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:100px; padding:11px 16px; margin-bottom:16px;}
.mobile-drawer-search input{border:none; background:transparent; outline:none; color:#fff; font-size:13.5px; flex:1; font-family:'Inter',sans-serif;}
.mobile-drawer-search input::placeholder{color:rgba(255,255,255,0.45);}
.mobile-drawer-search .ic{color:rgba(255,255,255,0.5); font-size:14px;}
.mobile-drawer nav{display:flex; flex-direction:column; gap:0; justify-content:flex-start; padding-left:0;}

.mobile-search-results{display:none; margin:0 0 20px;}
.mobile-search-results.is-visible{display:block;}
.mobile-search-result-row{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,0.07);}
.mobile-search-result-row .thumb{width:34px; height:34px; border-radius:7px; background:linear-gradient(150deg,#2c2e38,#0e0f13); background-size:cover; background-position:center; flex-shrink:0;}
.mobile-search-result-row .info h5{font-size:12.5px; font-weight:600; color:#fff; line-height:1.3;}
.mobile-search-result-row .info span{font-size:10.5px; color:rgba(255,255,255,0.45);}
.mobile-search-viewall{display:block; text-align:center; padding:10px 4px; font-size:12px; font-weight:700; color:var(--blue);}

/* ---------- CATEGORIA (pílula colorida, cor vem do term meta) ---------- */
.cat-pill{
  display:inline-block; font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px;
  margin-bottom:14px;
  /* --cat-color e --cat-bg são setados inline pelo PHP, por categoria */
  color:var(--cat-color, var(--blue));
  background:var(--cat-bg, var(--blue-soft));
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{padding-bottom:12px; font-size:12.5px;}
.breadcrumb.on-dark{color:rgba(255,255,255,0.45);}
.breadcrumb.on-dark a{color:rgba(255,255,255,0.45);}
.breadcrumb.on-dark a:hover{color:#fff;}
.breadcrumb.on-dark .current{color:#fff; font-weight:600;}
.breadcrumb.on-light{color:var(--ink-faint);}
.breadcrumb.on-light a{color:var(--ink-faint);}
.breadcrumb.on-light a:hover{color:var(--blue);}
.breadcrumb.on-light .current{color:var(--ink); font-weight:600;}
.breadcrumb .sep{margin:0 6px; opacity:0.5;}

/* ---------- RODAPÉ ---------- */
footer{padding:44px 0 32px;}
footer.footer-dark{background:var(--ink);}
footer.footer-light{background:var(--paper); border-top:1px solid var(--line);}

.footer-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.footer-brand .logo{margin-bottom:14px;}

.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
footer.footer-dark .footer-social a{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.75);}
footer.footer-light .footer-social a{background:var(--alt); border:1px solid var(--line); color:var(--ink-soft);}
.footer-social a:hover{background:var(--blue); border-color:var(--blue); color:#fff;}
.footer-social svg{width:16px; height:16px;}

.footer-copy{font-size:11.5px; margin-top:16px;}
footer.footer-dark .footer-copy{color:rgba(255,255,255,0.4);}
footer.footer-light .footer-copy{color:var(--ink-faint);}

.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h5{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px; font-weight:700;}
footer.footer-dark .footer-col h5{color:rgba(255,255,255,0.35);}
footer.footer-light .footer-col h5{color:var(--ink-faint);}
.footer-col a{display:block; font-size:13px; font-weight:600; margin-bottom:12px;}
footer.footer-dark .footer-col a{color:rgba(255,255,255,0.75);}
footer.footer-light .footer-col a{color:var(--ink-soft);}
footer.footer-dark .footer-col a:hover{color:#fff;}
footer.footer-light .footer-col a:hover{color:var(--blue);}

/* ---------- PAGINAÇÃO (compartilhada por todos os arquivos) ---------- */
.pagination{display:flex; align-items:center; gap:8px; justify-content:center; padding:44px 0 80px; flex-wrap:wrap;}
.page-btn{min-width:38px; height:38px; padding:0 6px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ink-soft); border:1px solid var(--line); background:#fff;}
.page-btn:hover{border-color:var(--blue); color:var(--blue);}
.page-btn.is-active{background:var(--blue); color:#fff; border-color:var(--blue);}
.page-dots{color:var(--ink-faint); font-size:13px; padding:0 4px;}

/* ---------- ANÚNCIOS (só o slot; some por completo se desativado — ver functions.php) ---------- */
.ad-slot{margin:32px 0; text-align:center;}
.ad-slot ins{display:block;}
.anchor-ad{position:fixed; bottom:20px; right:20px; width:280px; z-index:90;}
.anchor-ad .anchor-close{position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; border:none; font-size:11px;}

/* ---------- RESPONSIVO — breakpoint único (860px) pra nav/busca/hambúrguer trocarem juntos ---------- */
@media (max-width:860px){
  nav{display:none;}
  .search-wrap{display:none;}
  .mobile-toggle{display:flex;}
  .wrap{padding:0 20px;}
  .content-shell{padding:0 20px;}
}
@media (max-width:600px){
  .footer-grid{flex-direction:column;}
  .anchor-ad{left:12px; right:12px; width:auto; bottom:12px;}
}