/*
Theme Name: O Guia do Celular Portal (Claro)
Theme URI: https://oguiadocelular.com.br/
Author: Edenilson (starter theme generated by ChatGPT)
Description: Tema leve e editável (compatível com Elementor) no estilo portal: topo com menu e busca, home com destaque + feed, sidebar e áreas prontas para anúncios (AdSense) no post/rodapé. Versão com fundo claro e sem anúncio no topo do site.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ogc-portal
Tags: news, blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* ====== Base (CLARO) ====== */
:root{
  --ogc-bg:#f6f8fb;
  --ogc-surface:#ffffff;
  --ogc-surface2:#ffffff;
  --ogc-text:#0f172a;
  --ogc-muted:#475569;
  --ogc-accent:#0ea5e9;
  --ogc-border:rgba(15,23,42,.12);
  --ogc-max:1180px;
  --ogc-radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: var(--ogc-bg);
  color: var(--ogc-text);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
a:hover{color:var(--ogc-accent)}
img{max-width:100%; height:auto}
.container{max-width:var(--ogc-max); margin:0 auto; padding:0 16px}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:16px; background:#000; color:#fff; padding:10px 12px; border-radius:10px; z-index:9999}

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(246,248,251,.86);
  border-bottom: 1px solid var(--ogc-border);
}
.header-inner{
  display:flex; align-items:center; gap:14px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  min-width: 210px;
}
.brand .site-title{
  font-weight:800; letter-spacing:.2px;
  font-size:18px;
}
.brand .site-desc{font-size:12px; color:var(--ogc-muted); margin-top:2px}
.site-logo{width:34px; height:34px; border-radius:10px; background:var(--ogc-surface); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ogc-border)}
.site-logo svg{width:18px; height:18px; fill: var(--ogc-accent)}

/* Nav */
.primary-nav{flex:1}
.primary-nav ul{display:flex; gap:14px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.primary-nav a{
  display:inline-flex; padding:8px 10px;
  border-radius:999px;
  color:var(--ogc-text);
  font-weight:700; font-size:14px;
}
.primary-nav a:hover{background:rgba(15,23,42,.06)}
.header-tools{display:flex; align-items:center; gap:10px}
.search-toggle{
  border:1px solid var(--ogc-border);
  background:rgba(15,23,42,.03);
  color:var(--ogc-text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}
.search-toggle:hover{background:rgba(15,23,42,.06)}
.hamburger{display:none; border:1px solid var(--ogc-border); background:rgba(15,23,42,.03); color:var(--ogc-text); border-radius:12px; padding:8px 10px; cursor:pointer}
.hamburger:hover{background:rgba(15,23,42,.06)}

/* Search bar */
.site-search{
  display:none;
  padding:0 0 14px;
}
.site-search form{
  display:flex; gap:10px; align-items:center;
  background:rgba(15,23,42,.03);
  border:1px solid var(--ogc-border);
  border-radius:999px;
  padding:10px 12px;
}
.site-search input[type="search"]{
  flex:1; border:0; outline:none;
  background:transparent;
  color:var(--ogc-text);
  font-size:14px;
}
.site-search input::placeholder{color:rgba(71,85,105,.7)}
.site-search button{
  border:0; background:var(--ogc-accent);
  color:#062033; font-weight:800;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
}
.site-search button:hover{filter:brightness(1.02)}

/* ====== Layout ====== */
.main{ padding:18px 0 40px; }
.grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
}
.card{
  background: var(--ogc-surface);
  border: 1px solid var(--ogc-border);
  border-radius: var(--ogc-radius);
  overflow:hidden;
}
.card-pad{padding:14px}
.muted{color:var(--ogc-muted)}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.25);
  color: #0b5a87;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

/* ====== Home featured ====== */
.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
}
.hero .lead{min-height: 360px; position:relative}
.hero .lead .thumb{ height:360px; background: #e8eef6; }
.hero .lead .content{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.94) 100%);
}
.hero h2{margin:6px 0 0; font-size:22px; line-height:1.2}
.meta{font-size:12px; color:rgba(71,85,105,.95)}
.meta a{color:rgba(15,23,42,.95)}
.hero .stack{display:grid; gap:12px}
.small-post{display:flex; gap:12px; padding:12px}
.small-post .thumb{width:110px; height:78px; background:#e8eef6; border-radius:12px; overflow:hidden; flex:0 0 auto}
.small-post h3{margin:0 0 6px; font-size:14px; line-height:1.25}

/* ====== Feed ====== */
.section-title{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin:18px 0 10px;
}
.section-title h3{margin:0; font-size:16px}
.feed{display:grid; gap:12px}
.feed-item{display:flex; gap:14px; padding:14px}
.feed-item .thumb{width:150px; height:96px; background:#e8eef6; border-radius:12px; overflow:hidden; flex:0 0 auto}
.feed-item h4{margin:0 0 8px; font-size:16px; line-height:1.2}
.excerpt{color:rgba(51,65,85,.95); font-size:13px}
.readmore{font-weight:900; color:var(--ogc-accent); font-size:13px}
.loadmore{display:flex; justify-content:center; margin:14px 0}
.loadmore a{
  border:1px solid var(--ogc-border);
  background:rgba(15,23,42,.03);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
}
.loadmore a:hover{background:rgba(15,23,42,.06)}

/* ====== Sidebar/Widgets ====== */
.widget{padding:14px}
.widget-title{margin:0 0 10px; font-size:14px}
.widget ul{margin:0; padding-left:18px}

/* ====== Single ====== */
.post-header{padding:16px}
.post-title{margin:10px 0 8px; font-size:28px; line-height:1.15}
.post-content{padding:0 16px 16px}
.post-content p{margin: 0 0 14px}
.post-content h2{margin: 24px 0 10px}
.post-thumb{height:360px; background:#e8eef6}
.ad-slot{
  background: rgba(15,23,42,.02);
  border:1px dashed rgba(15,23,42,.25);
  border-radius: 12px;
  padding:12px;
  color:rgba(71,85,105,.9);
  font-size:12px;
}

/* ====== Footer ====== */
.site-footer{
  border-top:1px solid var(--ogc-border);
  padding:24px 0;
  color:rgba(71,85,105,.95);
}
.footer-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.footer-grid a:hover{color:var(--ogc-accent)}
.footer-bottom{margin-top:14px; font-size:12px; color:rgba(71,85,105,.85)}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .primary-nav{display:none}
  .hamburger{display:inline-flex}
  .brand{min-width:auto}
  .header-inner{justify-content:space-between}
}
@media (max-width: 560px){
  .feed-item .thumb{width:120px; height:86px}
  .post-title{font-size:22px}
  .hero .lead .thumb, .post-thumb{height:260px}
  .footer-grid{grid-template-columns:1fr}
}