/*
Theme Name: Qual É o Melhor
Theme URI: https://qualeomelhor.pro
Author: Carlos
Description: Tema de rankings e vereditos para o blog qualeomelhor.pro. Pódio da semana, notas de veredito, disputas diretas e layout clean.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: qualeomelhor
*/

:root{
  --paper:#F7F8F6; --ink:#10141F; --ink-soft:#4B5263; --line:#E4E6E1;
  --brand:#2B4BF2; --brand-soft:#EAEDFE;
  --gold:#F0A500; --gold-soft:#FFF4DC;
  --silver:#9AA4B2; --silver-soft:#EFF2F5;
  --bronze:#C77B43; --bronze-soft:#F8ECE2;
  --verdict:#0E9F6E; --verdict-soft:#E2F6EE;
  --radius:16px;
  --display:"Bricolage Grotesque",sans-serif;
  --body:"Inter",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:50;background:rgba(247,248,246,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo .q{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-size:1.05rem}
.logo em{font-style:normal;color:var(--brand)}
nav.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
nav.cats::-webkit-scrollbar{display:none}
nav.cats ul{display:flex;gap:6px;list-style:none}
nav.cats a{font-size:.85rem;font-weight:600;color:var(--ink-soft);padding:7px 13px;border-radius:99px;white-space:nowrap;transition:.18s;display:inline-block}
nav.cats a:hover,nav.cats li.current-menu-item a,nav.cats li.current-cat a{background:var(--ink);color:#fff}
.search-btn{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 16px;font-size:.85rem;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.search-btn:hover{border-color:var(--brand);color:var(--brand)}

/* ===== Hero ===== */
.hero{padding:72px 0 56px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 280px at 50% -10%, var(--brand-soft) 0%, transparent 70%);pointer-events:none}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 16px;margin-bottom:26px;position:relative}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.03em;line-height:1.05;position:relative}
.hero h1 .rotator{display:inline-block;color:var(--brand);border-bottom:5px solid var(--gold);min-width:4ch;transition:opacity .2s}
.hero p.sub{max-width:560px;margin:22px auto 0;color:var(--ink-soft);font-size:1.05rem;position:relative}
.hero-search{position:relative;max-width:520px;margin:30px auto 0;display:flex;background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:6px;box-shadow:0 8px 30px rgba(16,20,31,.06)}
.hero-search input{flex:1;border:0;outline:0;background:transparent;padding:10px 18px;font-size:.95rem;font-family:var(--body)}
.hero-search button{border:0;background:var(--brand);color:#fff;font-weight:700;font-size:.9rem;padding:11px 24px;border-radius:99px;cursor:pointer;font-family:var(--body)}
.hero-search button:hover{background:#1d39d6}
.hero .trending{margin-top:18px;font-size:.82rem;color:var(--ink-soft);position:relative}
.hero .trending a{font-weight:600;color:var(--ink);border-bottom:1px dotted var(--ink-soft)}

/* ===== Seções ===== */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px}
.section-head h2{font-family:var(--display);font-weight:800;font-size:1.65rem;letter-spacing:-.02em}
.section-head a.more{font-size:.85rem;font-weight:700;color:var(--brand)}

/* ===== Pódio ===== */
.podium{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:20px;align-items:end;padding-bottom:64px}
.pod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.22s;position:relative}
.pod-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(16,20,31,.1)}
.pod-card .thumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:2rem;color:#fff;letter-spacing:-.02em;background:linear-gradient(135deg,#1a2440,#2B4BF2);background-size:cover;background-position:center;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.pod-card.p2 .thumb{background:linear-gradient(135deg,#39414e,#76808f);background-size:cover;background-position:center}
.pod-card.p3 .thumb{background:linear-gradient(135deg,#5e3a1d,#C77B43);background-size:cover;background-position:center}
.medal{position:absolute;top:14px;left:14px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1rem;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);border:2.5px solid #fff;z-index:2}
.p1 .medal{background:var(--gold)}
.p2 .medal{background:var(--silver)}
.p3 .medal{background:var(--bronze)}
.pod-body{padding:20px 22px 22px}
.chip{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:4px 11px;margin-bottom:12px;background:var(--brand-soft);color:var(--brand)}
.pod-body h3{font-family:var(--display);font-weight:600;font-size:1.18rem;line-height:1.3;letter-spacing:-.01em}
.pod-card.p1 .pod-body h3{font-size:1.35rem}
.score{margin-top:16px}
.score .row{display:flex;justify-content:space-between;font-size:.75rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.score .row b{color:var(--ink);font-size:.85rem}
.bar{height:7px;border-radius:99px;background:var(--silver-soft);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--gold))}
.pod-card.p1 .week-pick{display:block;text-align:center;background:var(--gold);color:#3d2b00;font-size:.7rem;font-weight:800;letter-spacing:.12em;padding:9px}

/* ===== Grid de cards ===== */
.rankings{padding:0 0 64px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.2s;display:flex;flex-direction:column;gap:12px}
.card:hover{border-color:var(--brand);box-shadow:0 10px 30px rgba(43,75,242,.08)}
.card .top{display:flex;justify-content:space-between;align-items:center}
.card .n{font-family:var(--display);font-weight:800;font-size:.85rem;color:var(--ink-soft)}
.card .top .chip{margin:0}
.card h3{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.35;letter-spacing:-.01em}
.card p{font-size:.88rem;color:var(--ink-soft)}
.card .meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--ink-soft);margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);flex-wrap:wrap}
.verdict-tag{display:inline-flex;align-items:center;gap:6px;background:var(--verdict-soft);color:var(--verdict);font-size:.74rem;font-weight:700;border-radius:99px;padding:4px 12px}
.verdict-tag::before{content:"\2713";font-weight:800}

/* ===== Paginação ===== */
.pagination{display:flex;gap:8px;justify-content:center;padding:8px 0 64px;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:600;font-size:.88rem;color:var(--ink-soft)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ===== Archive header ===== */
.archive-head{padding:56px 0 36px;text-align:center}
.archive-head .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.archive-head h1{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.02em;margin-top:8px}
.archive-head p{color:var(--ink-soft);max-width:560px;margin:12px auto 0}

/* ===== Single ===== */
.single-hero{max-width:780px;margin:0 auto;padding:56px 24px 28px;text-align:center}
.single-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.5vw,2.9rem);letter-spacing:-.025em;line-height:1.12;margin-top:14px}
.single-hero .meta{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:.84rem;color:var(--ink-soft);flex-wrap:wrap}
.single-thumb{max-width:980px;margin:18px auto 0;padding:0 24px}
.single-thumb img{width:100%;border-radius:20px;display:block}
.verdict-box{max-width:780px;margin:28px auto 0;padding:0 24px}
.verdict-box .inner{background:#fff;border:1.5px solid var(--gold);border-radius:var(--radius);padding:22px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.verdict-box .nota{font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--ink);line-height:1}
.verdict-box .nota small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.verdict-box .barwrap{flex:1;min-width:200px}
.content{max-width:780px;margin:0 auto;padding:32px 24px 72px;font-size:1.06rem}
.content>*+*{margin-top:1.2em}
.content h2{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;margin-top:2em}
.content h3{font-family:var(--display);font-weight:600;font-size:1.25rem;margin-top:1.6em}
.content a{color:var(--brand);font-weight:600;border-bottom:1px solid var(--brand-soft)}
.content ul,.content ol{padding-left:1.4em}
.content blockquote{border-left:4px solid var(--gold);background:#fff;padding:16px 22px;border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-soft)}
.content img{border-radius:14px}
.content table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;font-size:.92rem}
.content table th{background:var(--ink);color:#fff;font-family:var(--display);font-weight:600;text-align:left;padding:12px 14px}
.content table td{padding:11px 14px;border-bottom:1px solid var(--line)}
.content table tr:nth-child(even) td{background:var(--paper)}
.wp-block-button__link{background:var(--brand);color:#fff;border-radius:99px;font-weight:700}

/* ===== Versus ===== */
.versus{background:var(--ink);color:#fff;padding:64px 0;border-radius:32px 32px 0 0}
.versus .section-head h2{color:#fff}
.versus .section-head a.more{color:var(--gold)}
.vs-card{background:#1a2030;border:1px solid #2a3247;border-radius:var(--radius);padding:28px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-bottom:16px;transition:.2s}
.vs-card:hover{border-color:var(--gold)}
.vs-side{text-align:center}
.vs-side .name{font-family:var(--display);font-weight:600;font-size:1.15rem}
.vs-side .pts{font-size:.78rem;color:#8b94a8;margin-top:4px}
.vs-side.win .name{color:var(--gold)}
.vs-side.win .pts::after{content:" \00b7 vencedor";color:var(--gold);font-weight:700}
.vs-mid{font-family:var(--display);font-weight:800;font-size:1rem;color:#fff;background:var(--brand);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ===== Newsletter ===== */
.newsletter{background:var(--ink);padding:0 0 72px}
.newsletter.standalone{background:transparent;padding:0 0 72px}
.nl-box{background:linear-gradient(135deg,#2B4BF2,#1d39d6);border-radius:24px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:32px;color:#fff;flex-wrap:wrap}
.nl-box h2{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;max-width:420px;line-height:1.2}
.nl-box p{opacity:.85;font-size:.92rem;margin-top:8px}
.nl-form{display:flex;background:#fff;border-radius:99px;padding:6px;min-width:280px;flex:1;max-width:420px}
.nl-form input{flex:1;border:0;outline:0;padding:10px 18px;font-size:.9rem;border-radius:99px;font-family:var(--body);min-width:0}
.nl-form button{border:0;background:var(--gold);color:#3d2b00;font-weight:800;font-size:.85rem;padding:11px 22px;border-radius:99px;cursor:pointer;font-family:var(--body);white-space:nowrap}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:#8b94a8;padding:40px 0 48px;border-top:1px solid #2a3247}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.84rem;align-items:center}
.site-footer .logo{color:#fff}
.site-footer nav ul{display:flex;gap:20px;flex-wrap:wrap;list-style:none}
.site-footer a:hover{color:#fff}

/* ===== 404 / vazio ===== */
.empty{max-width:560px;margin:0 auto;padding:80px 24px;text-align:center}
.empty h1{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.02em}
.empty p{color:var(--ink-soft);margin-top:10px}

@media(max-width:860px){
  .podium{grid-template-columns:1fr;align-items:stretch}
  .grid{grid-template-columns:1fr}
  .vs-card{grid-template-columns:1fr;text-align:center}
  .vs-mid{margin:0 auto}
  .nl-box{padding:32px}
  nav.cats{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}