/*
Theme Name: Quarto Poder
Theme URI: https://o4poder.com
Author: Agencia Morgado
Description: Tema do veiculo Quarto Poder (4P PODER). Formato de portal de noticias no modelo CNN Brasil, identidade teal/dourado com fontes Anton (titulos) e Satoshi (corpo). Categorias-verticais: politica, economia, df, sp, mg, esporte, ciencia.
Version: 1.2.0
License: proprietario
Text Domain: quartopoder
*/

@font-face{font-family:'Anton';src:url('assets/fonts/Anton-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Satoshi';font-weight:400;src:url('assets/fonts/Satoshi-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Satoshi';font-weight:500;src:url('assets/fonts/Satoshi-Medium.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Satoshi';font-weight:700;src:url('assets/fonts/Satoshi-Bold.ttf') format('truetype');font-display:swap}

:root{--teal:#082E33;--teal2:#0B3A41;--gold:#F8C750;--gold2:#E8A81E;--off:#F4F4F4;--ink:#16211f;--mut:#5c6b6a;--line:#e6e9e8}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Satoshi',Arial,sans-serif;background:#fff;color:var(--ink);font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.display{font-family:'Anton','Satoshi',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-weight:400}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== Header (CNN: logo esq + editorias + pill) ===== */
.site-head{background:var(--teal);position:sticky;top:0;z-index:50;border-bottom:3px solid var(--gold)}
.site-head .wrap{display:flex;align-items:center;gap:26px;padding-top:12px;padding-bottom:12px}
.site-head .logo img{height:46px;width:auto}
.site-head nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.site-head nav a{color:#dfe9e8;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.6px;padding:6px 0;border-bottom:2px solid transparent}
.site-head nav a:hover{color:var(--gold);border-color:var(--gold)}
.site-head nav ul{display:flex;gap:20px;list-style:none}
.pill{background:var(--gold);color:var(--teal);font-family:'Anton';font-size:13px;letter-spacing:1.5px;padding:7px 16px;border-radius:20px;white-space:nowrap}
.busca{margin-left:auto}
.busca input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;padding:7px 14px;border-radius:18px;font-size:13px;width:140px;font-family:'Satoshi',sans-serif;transition:.15s}
.busca input::placeholder{color:#9fb3b1}
.busca input:focus{outline:none;border-color:var(--gold);width:180px}
.sem-materia{color:var(--mut);font-size:16px;padding:26px 0 60px}

/* ===== Ticker plantao ===== */
.ticker{background:var(--gold);color:var(--teal);font-weight:700;font-size:14px}
.ticker .wrap{display:flex;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px}
.ticker b{background:var(--teal);color:var(--gold);padding:3px 10px;font-family:'Anton';letter-spacing:1px;font-weight:400;flex-shrink:0}
.ticker a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Hero (CNN: manchete grande + ultimas ao lado) ===== */
main{padding:28px 0 60px}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-bottom:46px}
.hero-card .ht{position:relative;border-radius:10px;overflow:hidden;background:var(--teal)}
.hero-card .ht img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-card h1{font-family:'Anton';text-transform:uppercase;color:var(--teal);font-weight:400;font-size:38px;line-height:1.1;margin:14px 0 10px}
.hero-card h1 a:hover{color:var(--gold2)}
.hero-card .deck{color:var(--mut);font-size:17px;line-height:1.5;max-width:680px}
.kicker{display:inline-block;background:var(--gold);color:var(--teal);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:3px;margin-bottom:10px}
.ultimas{border:1px solid var(--line);border-radius:10px;padding:20px 22px;align-self:start}
.ultimas h3{font-family:'Anton';text-transform:uppercase;color:var(--teal);font-weight:400;font-size:19px;border-bottom:3px solid var(--gold);padding-bottom:10px;margin-bottom:4px}
.ultimas ul{list-style:none}
.ultimas li{padding:12px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:14.5px;line-height:1.4}
.ultimas li:last-child{border-bottom:none}
.ultimas .t{color:var(--gold2);font-family:'Anton';font-size:12px;letter-spacing:1px;display:block;margin-bottom:3px}
.ultimas .mais{display:block;text-align:right;font-size:13px;font-weight:700;color:var(--teal);text-transform:uppercase;margin-top:10px}
.ultimas .mais:hover{color:var(--gold2)}

/* ===== Secoes de editoria (CNN: titulo + grid de cards) ===== */
section.vert{margin-bottom:46px}
.vhead{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.vhead .bar{width:8px;height:28px;background:var(--gold)}
.vhead h2{font-family:'Anton';text-transform:uppercase;color:var(--teal);font-weight:400;font-size:25px}
.vhead h2 a:hover{color:var(--gold2)}
.vhead .more{margin-left:auto;font-size:13px;font-weight:700;color:var(--teal);text-transform:uppercase}
.vhead .more:hover{color:var(--gold2)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:.15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(8,46,51,.10)}
.card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--teal) 0%,var(--teal2) 60%,#0e4a52 100%);position:relative;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Anton';font-size:32px;color:rgba(248,199,80,.22)}
.card .thumb i{position:absolute;right:0;top:0;border-style:solid;border-width:0 42px 42px 0;border-color:transparent var(--gold) transparent transparent}
.card .c{padding:14px}
.card h4{font-size:15px;line-height:1.35;font-weight:700;margin:9px 0 8px}
.card h4 a:hover{color:var(--gold2)}
.meta{color:var(--mut);font-size:13px}

/* ===== Materia ===== */
.art{max-width:840px;margin:0 auto;padding:34px 20px 60px}
.art h1{font-family:'Anton';text-transform:uppercase;font-weight:400;color:var(--teal);font-size:38px;line-height:1.12;margin:16px 0 12px}
.art .linhafina{font-size:19px;color:#3c4a49;font-weight:500;line-height:1.5;margin-bottom:18px}
.art .metarow{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:24px;font-size:14px;color:var(--mut)}
.art figure img{width:100%;border-radius:10px}
.art figcaption{font-size:13px;color:var(--mut);margin-top:8px}
.art .body{margin-top:26px;font-size:18px;line-height:1.75;color:#222f2e}
.art .body p{margin-bottom:22px}
.art .body h2,.art .body h3{font-family:'Anton';text-transform:uppercase;font-weight:400;color:var(--teal);margin:8px 0 16px}
.art .body blockquote{border-left:5px solid var(--gold);background:var(--off);padding:20px 24px;font-weight:700;font-size:19px;color:var(--teal);margin:8px 0 26px;border-radius:0 10px 10px 0}
.art .body img{border-radius:10px}
.art .assin{font-size:14px;color:var(--mut);border-top:1px solid var(--line);padding-top:16px;margin-top:10px}
.rel h3{font-family:'Anton';text-transform:uppercase;font-weight:400;color:var(--teal);font-size:22px;margin:34px 0 16px;border-bottom:3px solid var(--gold);display:inline-block;padding-bottom:6px}

/* ===== Categoria / arquivo ===== */
.arch-head{margin-bottom:22px}
.arch-head h1{font-family:'Anton';text-transform:uppercase;color:var(--teal);font-weight:400;font-size:32px}
.arch-head .bar{width:60px;height:6px;background:var(--gold);margin-top:8px}
.pagenav{display:flex;gap:10px;margin-top:26px;font-weight:700}
.pagenav a,.pagenav span{padding:8px 14px;border:1px solid var(--line);border-radius:6px}
.pagenav .current{background:var(--teal);color:#fff}

/* ===== Rodape (CNN: escuro, colunas de links) ===== */
.site-foot{background:var(--teal);color:#c7d4d3;margin-top:30px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:44px 0 30px}
.fcols img{height:54px;margin-bottom:14px}
.fcols p{font-size:14px;line-height:1.6;max-width:300px}
.fcols h5{font-family:'Anton';text-transform:uppercase;font-weight:400;color:var(--gold);font-size:15px;letter-spacing:1px;margin-bottom:12px}
.fcols ul{list-style:none}
.fcols li{margin-bottom:9px;font-size:14px}
.fcols a:hover{color:var(--gold)}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:13px;display:flex;gap:14px;flex-wrap:wrap}
.fbot span{margin-left:auto}

@media(max-width:960px){
.hero-grid{grid-template-columns:1fr}
.grid4{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:1fr}
.hero-card h1{font-size:29px}
.art h1{font-size:29px}
.fcols{grid-template-columns:1fr 1fr}
.site-head nav{display:none}
}