@charset "UTF-8";
/*
Theme Name: Bananeiras Online
Theme URI: https://delanomarcal.com.br
Author: Delano Marçal
Author URI: https://delanomarcal.com.br
Description: Tema para portal de notícias, com colunistas em destaque, área de destaques (esquerda/centro/direita), seções por categoria configuráveis, carrossel de Shorts do YouTube e 7 posições de banner integradas ao AdRotate.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bananeiras-online
*/

/* =========================================================
   RESET / BASE
   ========================================================= */
:root{
  --verde-escuro:#0f3d24;
  --verde:#1c6b3d;
  --verde-lima:#7bc142;
  --texto:#1a1a1a;
  --texto-suave:#5b5b5b;
  --linha:#e3e6e1;
  --bg:#ffffff;
  --secao-bg:#eef1ee;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Georgia","Times New Roman", serif; color:var(--texto); background:var(--bg);}
a{color:inherit; text-decoration:none;}
img{display:block; width:100%; height:100%; object-fit:cover;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
.screen-reader-text{position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px;}

/* placeholders de foto (quando o post não tem imagem destacada) */
.ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, rgba(0,0,0,.04) 10px 20px),
    linear-gradient(135deg,#25422f,#12271a);
  position:relative;
  transition:transform .35s ease;
}
.ph::after{content:""; width:34%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.14);}

.media{position:relative; overflow:hidden; border-radius:2px; cursor:pointer; background:#12271a;}
.media img{transition:transform .35s ease;}
.media:hover img, .media:hover .ph{transform:scale(1.08);}

.avatar{border-radius:50%; overflow:hidden; flex-shrink:0; background:#12271a;}
.avatar:hover img, .avatar:hover .ph{transform:scale(1.15);}

/* placeholders de banner (fallback quando o AdRotate não tem anúncio no grupo) */
.banner-ad{
  width:100%; max-width:970px; aspect-ratio:970/90; margin:26px auto;
  background:#000; color:#fff; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:Arial, sans-serif; font-weight:700; font-size:1.15rem; text-align:center;
  overflow:hidden;
}
.banner-ad.square{max-width:none; aspect-ratio:1; margin:0; font-size:1rem; line-height:1.4;}
.banner-ad img{width:auto; max-width:100%; height:auto; margin:0 auto;}

/* =========================================================
   TOPO
   ========================================================= */
.topbar{background:#fff; border-bottom:1px solid var(--linha);}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:24px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{width:46px; height:46px; border-radius:50%; flex-shrink:0; overflow:hidden; background:radial-gradient(circle at 35% 30%, var(--verde-lima), var(--verde-escuro));}
.brand .mark img{width:100%; height:100%; object-fit:cover;}
.brand .name{font-size:1.5rem; font-weight:700; color:var(--verde-escuro); line-height:1.1;}
.brand .tag{font-family:Arial, sans-serif; font-size:.72rem; color:var(--texto-suave); letter-spacing:.02em;}
.topbar-right{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.social-mini{display:flex; gap:8px;}
.social-mini a{width:26px; height:26px; border-radius:50%; background:var(--verde-escuro); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.social-mini a:hover{background:var(--verde);}
.search-form{display:flex; align-items:center; border:1px solid var(--linha); border-radius:4px; overflow:hidden;}
.search-form input[type="search"]{border:none; padding:8px 12px; font:14px Arial, sans-serif; width:190px; outline:none;}
.search-form button{border:none; background:var(--verde); color:#fff; padding:8px 14px; cursor:pointer;}

/* menu / hambúrguer */
.menubar{background:var(--verde-escuro); color:#fff;}
.menu-toggle{background:none; border:none; color:#fff; font-family:Arial, sans-serif; font-size:.85rem; padding:10px 0; cursor:pointer; display:flex; align-items:center; gap:8px;}
.menu-toggle .ico{font-size:1rem; line-height:1; transition:transform .25s ease;}
.menu-toggle[aria-expanded="true"] .ico{transform:rotate(90deg);}
.mega-menu{max-height:0; overflow:hidden; background:#123a25; transition:max-height .3s ease;}
.mega-menu.open{max-height:420px;}
.mega-menu .wrap{padding:6px 20px 18px;}
.mega-menu ul{display:flex; flex-wrap:wrap; gap:4px 32px;}
.mega-menu a{font-family:Arial, sans-serif; font-size:.88rem; color:#dce8df; padding:9px 0; display:inline-block; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;}
.mega-menu a:hover{color:var(--verde-lima); border-color:var(--verde-lima);}

/* =========================================================
   COLUNISTAS EM DESTAQUE
   ========================================================= */
.highlights{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin:26px 0 28px;}
.highlight{display:flex; gap:12px;}
.highlight .avatar{width:54px; height:54px;}
.highlight h4{font-family:Arial, sans-serif; font-size:.88rem; margin-bottom:4px;}
.highlight p{font-family:Arial, sans-serif; font-size:.82rem; color:var(--texto-suave); line-height:1.4;}
.readmore{display:inline-block; margin-top:6px; font-family:Arial, sans-serif; font-size:.78rem; font-weight:700; color:var(--verde); transition:opacity .2s ease;}
a.readmore:hover{opacity:.65;}

.eyebrow{font-family:Arial, sans-serif; font-size:.78rem; font-weight:700; color:var(--verde); margin-bottom:6px;}
.eyebrow::after{content:" \203A";}

/* =========================================================
   DESTAQUES: esquerda / centro / direita
   ========================================================= */
.main-grid{display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:32px; margin-bottom:32px; align-items:start;}
.side-list{display:flex; flex-direction:column; gap:20px;}
.side-item h3{font-size:1.02rem; line-height:1.35; margin-bottom:6px; transition:color .2s ease;}
.side-item h3:hover{color:var(--verde);}
.feature .media{aspect-ratio:16/10; margin-bottom:14px;}
.feature h2{font-size:1.5rem; line-height:1.3; margin-bottom:10px; transition:color .2s ease;}
.feature h2:hover{color:var(--verde);}

/* =========================================================
   FILEIRA DE MINIATURAS (categoria configurável)
   ========================================================= */
.thumbs-row{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-bottom:10px; align-items:start;}
.thumb .media{aspect-ratio:4/3; margin-bottom:8px;}
.thumb .eyebrow{font-size:.68rem;}
.thumb h4{font-family:Arial, sans-serif; font-size:.82rem; line-height:1.35; font-weight:700;}

/* =========================================================
   SEÇÕES COM FUNDO CINZA (categorias configuráveis)
   ========================================================= */
.section-block{background:var(--secao-bg); border-radius:6px; padding:24px; margin-bottom:26px;}
.section-title{font-family:Arial, sans-serif; font-size:1.15rem; font-weight:700; color:var(--verde-escuro); margin-bottom:16px;}
.section-title::after{content:" \203A";}
.card-row{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:start;}
.card .media{aspect-ratio:4/3; margin-bottom:8px;}
.card h4{font-family:Arial, sans-serif; font-size:.85rem; font-weight:700; line-height:1.35; margin-bottom:4px;}

/* =========================================================
   INTERNACIONAL + BANNER + MAIS LIDAS
   ========================================================= */
.trio-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px; margin-bottom:10px; align-items:start;}
.trio-grid .media{aspect-ratio:4/3; margin-bottom:8px;}
.trio-grid .card h4{font-size:.95rem;}

.most-read{background:var(--secao-bg); border-radius:4px; overflow:hidden;}
.most-read .mr-title{background:var(--verde); color:#fff; font-family:Arial, sans-serif; font-weight:700; padding:12px 16px; font-size:.9rem;}
.most-read .mr-title::after{content:" \203A";}
.most-read ol{list-style:none; padding:6px 16px 16px;}
.most-read li{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid #dbe6db; font-family:Arial, sans-serif; font-size:.83rem; line-height:1.4; transition:color .2s ease;}
.most-read li:hover{color:var(--verde);}
.most-read li:last-child{border-bottom:none;}
.most-read .num{font-weight:700; color:var(--verde); font-size:1.05rem; width:16px; flex-shrink:0;}

/* =========================================================
   #SHORTS
   ========================================================= */
.shorts-title{display:flex; align-items:center; gap:14px; margin-bottom:16px; font-family:Arial, sans-serif; font-weight:800; font-size:1.4rem; color:#b8c3bc;}
.shorts-title::after{content:""; flex:1; height:2px; background:var(--linha);}
.shorts-carousel{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.shorts-track{display:flex; gap:12px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; flex:1;}
.shorts-track::-webkit-scrollbar{display:none;}
.short-card{position:relative; flex:0 0 197px; height:350px; min-height:350px; border-radius:8px; overflow:hidden; background:#000; transition:transform .25s ease; box-shadow:0 2px 10px rgba(0,0,0,.15);}
.short-card:hover{transform:scale(1.03);}
.short-card img{width:100%; height:100%; object-fit:cover; display:block;}
.short-card iframe{width:100%; height:100%; border:0; display:block;}
.short-play{position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%; background:rgba(0,0,0,.55); border:2px solid #fff; color:#fff; font-size:1.3rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, transform .2s ease; padding:0 0 0 4px;}
.short-play:hover{background:var(--verde); border-color:var(--verde); transform:scale(1.1);}
.shorts-arrow{flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--linha); background:#fff; color:var(--verde-escuro); font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease;}
.shorts-arrow:hover{background:var(--secao-bg); transform:scale(1.08);}
.shorts-empty{font-family:Arial, sans-serif; font-size:.85rem; color:var(--texto-suave); padding:20px 0;}

/* =========================================================
   MAIS NOTÍCIAS
   ========================================================= */
.news-grid{display:grid; grid-template-columns:2.2fr 1fr; gap:24px; margin-bottom:10px; align-items:start;}
.news-row{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--linha);}
.news-row .media{width:150px; height:100px; flex-shrink:0;}
.news-row h4{font-size:1.05rem; line-height:1.35; margin-bottom:6px; transition:color .2s ease;}
.news-row h4:hover{color:var(--verde);}
.news-row .meta{font-family:Arial, sans-serif; font-size:.76rem; color:var(--texto-suave);}

/* =========================================================
   RODAPÉ
   ========================================================= */
footer.site-footer{background:var(--verde-escuro); color:#e8efe8; margin-top:40px; padding:44px 0 30px; position:relative; overflow:hidden;}
footer.site-footer::before{content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(90deg, var(--verde-lima), var(--verde) 60%, transparent); opacity:.5; clip-path:polygon(0 60%, 100% 0, 100% 100%, 0% 100%);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; position:relative;}
.footer-brand .brand .name{color:#fff;}
.footer-brand .tag{color:#b7c9bb;}
.footer-logo{height:36px; flex-shrink:0;}
.footer-logo a{display:block; height:100%;}
.footer-logo img{display:block; height:100%; width:auto; object-fit:contain;}
footer h5{font-family:Arial, sans-serif; font-size:.85rem; margin-bottom:14px; color:#cfe0d2;}
footer ul{font-family:Arial, sans-serif; font-size:.85rem; line-height:2.1;}
footer ul li a{transition:color .2s ease;}
footer ul li a:hover{color:var(--verde-lima);}
.footer-social{display:flex; gap:10px; margin-top:14px;}
.footer-social a{width:30px; height:30px; border-radius:50%; background:#173d27; color:#fff; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.footer-social a:hover{background:var(--verde);}
.footer-bottom{display:flex; justify-content:flex-end; margin-top:30px; font-family:Arial, sans-serif; font-size:.8rem; color:#b7c9bb; position:relative;}
.footer-bottom a{cursor:pointer;}

/* =========================================================
   PÁGINAS INTERNAS (single / page / archive) — estilo básico
   ========================================================= */
.content-simple{max-width:800px; margin:40px auto; padding:0 20px;}
.content-simple h1{font-size:2rem; margin-bottom:18px; color:var(--verde-escuro);}
.content-simple .meta{font-family:Arial, sans-serif; font-size:.85rem; color:var(--texto-suave); margin-bottom:20px;}
.content-simple .post-thumb{margin-bottom:24px; border-radius:4px; overflow:hidden;}
.content-simple .entry-content{font-size:1.05rem; line-height:1.8;}
.content-simple .entry-content p{margin-bottom:1.2em;}

/* single.php: conteúdo + aside com widgets */
.single-layout{display:grid; grid-template-columns:2fr 1fr; gap:40px; max-width:1180px; margin:40px auto; padding:0 20px; align-items:start;}
.single-layout .content-simple{max-width:none; margin:0; padding:0;}
.widget-area{display:flex; flex-direction:column; gap:24px;}
.widget-area .widget{background:var(--secao-bg); border-radius:6px; padding:20px;}
.widget-area .widget-title{font-family:Arial, sans-serif; font-size:1rem; font-weight:700; color:var(--verde-escuro); margin-bottom:14px;}
.widget-area .widget ul{list-style:none;}
.widget-area .widget li{font-family:Arial, sans-serif; font-size:.88rem; line-height:1.6; padding:6px 0; border-bottom:1px solid var(--linha);}
.widget-area .widget li:last-child{border-bottom:none;}
.widget-area .widget a{transition:color .2s ease;}
.widget-area .widget a:hover{color:var(--verde);}
.widget-area .widget img{border-radius:4px;}
.widget-area .widget select,
.widget-area .widget input[type="text"],
.widget-area .widget input[type="search"]{width:100%; padding:8px; border:1px solid var(--linha); border-radius:4px; font-family:Arial, sans-serif;}
.archive-list{max-width:800px; margin:40px auto; padding:0 20px;}
.archive-list article{padding:20px 0; border-bottom:1px solid var(--linha);}
.archive-list h2{font-size:1.3rem; margin-bottom:8px;}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:980px){
  .main-grid{grid-template-columns:1fr;}
  .highlights{grid-template-columns:repeat(2,1fr);}
  .thumbs-row{grid-template-columns:repeat(3,1fr);}
  .card-row{grid-template-columns:repeat(3,1fr);}
  .trio-grid{grid-template-columns:1fr 1fr;}
  .trio-grid > .most-read{grid-column:1 / -1;}
  .news-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .single-layout{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .highlights{grid-template-columns:1fr;}
  .thumbs-row{grid-template-columns:repeat(2,1fr);}
  .card-row{grid-template-columns:repeat(2,1fr);}
  .trio-grid{grid-template-columns:1fr;}
  .news-row .media{width:100px; height:75px;}
  .footer-grid{grid-template-columns:1fr;}
  .search-form input[type="search"]{width:120px;}
  .banner-ad{font-size:.85rem;}
}