/*
Theme Name: Dynargie Blog Theme
Theme URI: https://dynargie.com/blog
Author: Wagner Abril - wcabril.com.br
Description: Tema WordPress desenvolvido para Blog Dynargie - 2026.
Version: 2026 -V2
Text Domain: dynargie
*/

/* ========================================================= */
/* VARIÁVEIS / ROOT                                          */
/* ========================================================= */
:root{
  --orange: #e85b2b;
  --dark: #222;
  --muted: #6b6b6b;
  --bg: #faf7f5;
  --container-w: 1200px;
  --radius: 8px;
  --card-shadow: 0 6px 18px rgba(34,34,34,0.06);
}

/* ========================================================= */
/* RESET BÁSICO                                              */
/* ========================================================= */
*{ box-sizing:border-box }
html,body{ overflow-x:hidden }

html{
  height: auto;
}

body{
  min-height: 100vh;
}

body{
  margin:0;
  /*font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;*/
  font-family: 'Montserrat', sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--dark);
  background:#fff;
}

/* ========================================================= */
/* CONTAINER GLOBAL                                          */
/* ========================================================= */
.container{
  width:90%;
  max-width:var(--container-w);
  margin:0 auto;
}

/* ========================================================= */
/* TIPOGRAFIA GLOBAL                                         */
/* ========================================================= */
a{ color:var(--black); }
h1,h2,h3,h4{
  color:var(--dark);
  margin:0 0 8px 0;
}
p{ margin:0 0 12px 0; }

/* Utilitários */
.text-center{ text-align:center; }
.mt-8{ margin-top:8px; }
.mb-8{ margin-bottom:8px; }

/* ========================================================= */
/* HEADER / MENU                                             */
/* ========================================================= */
.header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding:18px 0;
  background:transparent;
  z-index:50;
}

.header .container{
  display:flex;
  align-items:center;
  gap:28px;
}

.main-menu{ flex:1; }

.main-menu ul{
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}

.main-menu a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
}

.main-menu a:hover{
  color:var(--orange);
}

/* ========================================================= */
/* HERO (ESTRUTURA BASE)                                     */
/* ========================================================= */
.hero{
  position:relative;
  max-width:calc(var(--container-w) + 60px);
  margin:0 auto;
}

/* Fundo */
.hero-bg{
  width:100%;
  height:590px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ========================================================= */
/* HERO LOGO                                                 */
/* ========================================================= */
.hero-logo{
  position:absolute;
  left:30px;
  bottom:clamp(16px, 4vw, 32px);
  z-index:6;
}

.hero-logo img{
  max-height:128px;
  width:auto;
}

/* ========================================================= */
/* HERO SEARCH                                               */
/* ========================================================= */
.hero-search{
  position:absolute;
  right:30px;
  bottom:20px;
  z-index:5;
  max-width:320px;
}

.hero-search form{
  display:flex;
  flex-direction:column;
  gap:0;
  background:transparent;
}

.hero-search input{
  order:2;
  width:100%;
  min-height:35px;
  padding:0 18px 0 40px;
  border:none;
  border-radius:30px;
  font-size:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:14px center;
}

.hero-search button{
  order:1;
  height:30px;
  max-width:120px;
  margin:0 auto;
  border:none;
  border-radius:6px;
  background:var(--orange);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

/* ========================================================= */
/* HERO RESPONSIVO                                           */
/* ========================================================= */
@media (max-width:600px){

  .hero{
    position: relative; /* 🔥 garante referência */
  }

  .hero-bg{
    height:180px;
  }

  .hero-logo{
    position: absolute;     /* 🔥 continua flutuando */
    left: 50%;
    top: 12px;              /* 🔥 em cima do bg */
    transform: translateX(-50%);
    z-index: 6;             /* 🔥 acima do fundo */
    margin: 0;
    text-align: center;
  }

  .hero-logo img{
    max-height:72px;
  }

  .hero-search{
    position:absolute;     /* mantém flutuante */
    right:auto;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
  }

}

/* ========================================================= */
/* FEATURED                                            */
/* ========================================================= */

.featured-post{
  background-color: #fffcf6;
}

.featured-image{
  width:100%;
  overflow:hidden;
}

.featured-image img{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}

@media (max-width:900px){
  .featured-image img{ height:260px; }
}

@media (max-width:480px){
  .featured-image img{ height:200px; }
}

.featured-content{
  padding: 0 30px 30px;
}

.featured-content h1{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;          /* bold de respeito */
  margin: 20px 0;
}

.featured-content h1 a{
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/*.featured-content h1 a:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}*/

.featured-excerpt{
  font-weight: 700;
}

.featured-meta{
  margin-top: 24px;
  font-size: small;
}

@media (max-width:600px){
  .featured-meta{
    margin-top: 16px;
  }
  .featured-content{
    padding: 0 16px 24px;
  }
}

/* ========================================================= */
/* POSTS SEARCH (HOME / GRID)                                 */
/* ========================================================= */
.posts-search{
  max-width:1200px;
  margin:30px auto 0;
  display:flex;
  justify-content:flex-start;
}

.posts-search input{
  width:100%;
  max-width:280px;
  padding:10px 14px;
  font-size:16px;
  border:1px solid #ccc;
  outline:none;
}

.posts-search input:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 2px rgba(232,91,43,.12);
}

@media (max-width:768px){
  .posts-search{
    padding:0 16px;
  }

  .posts-search input{
    max-width:100%;
  }
}

/* ========================================================= */
/* POSTS RECENTES                                            */
/* ========================================================= */
.recent-posts{
  width:100%;
  padding:18px 0 8px;
  text-align:left;
}

.recent-posts h2{
  font-size:32px;
  margin:12px 0 22px;
  text-align: center;
}

.recent-posts ul{
  list-style:none;
  margin:0 auto 34px;
  padding:0;
  max-width:960px;
  /*display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 36px;*/
  column-count: 2;       /* 🔥 duas colunas independentes */
  column-gap: 36px;
}

@media (max-width:600px){
  .recent-posts ul{
    column-count: 1;
  }
}

.recent-posts li{
  position:relative;
  padding-left:18px;
  break-inside: avoid;   /* 🔥 evita quebrar item no meio */
  /*margin-bottom: 8px;*/
}

.recent-posts li::before{
  content:"•";
  position:absolute;
  left:0;
  font-size:22px;
}

.recent-posts a{
  font-weight:600;
  text-decoration:underline;
}

/* ========================================================= */
/* GRID DE POSTS                                             */
/* ========================================================= */
.post-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
  max-width:1200px;
  margin:0 auto;
  padding:28px 0 0px;
}

/* ⚠️ BLOCO ANTIGO BASEADO EM FLEX — MANTIDO PARA ANÁLISE */
/*
.post-cards{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
*/

@media (max-width:1200px){
  .post-cards{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .post-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .post-cards{ grid-template-columns:1fr; }
}

/* ========================================================= */
/* POST CARD                                                 */
/* ========================================================= */
.post-card{
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:var(--card-shadow);
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

.post-card img{
  width:100%;
  height:160px;
  object-fit:cover;
}

.post-card .card-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.post-card h3{
  margin: 0;
  font-size:16px;
  line-height: 1.25;
  font-weight:700;
  color:var(--orange);
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.25em * 5); /* 🔥 força mesma altura */
}

.post-card p{
  font-size:14px;
  color:var(--muted);
  -webkit-line-clamp:20;
  -webkit-box-orient:vertical;
  display:-webkit-box;
  overflow:hidden;
}

@media (max-width:480px){
  .post-card h3{
    min-height: auto;          /* 🔥 libera a altura */
    -webkit-line-clamp: unset; /* 🔥 deixa o texto fluir */
    display: block;
  }
}

.post-card .btn{
  display: block;                 /* 🔥 permite centralizar texto */
  background: var(--orange);      /* laranja Dynargie */
  color: #fff;                    /* texto branco */
  border: none;                   /* remove borda antiga */
  padding: 10px 16px;
  border-radius: 24px;
  font-weight: 400;
  letter-spacing: 0.02em; /* 🔥 dá elegância sem pesar */
  text-align: center;             /* 🔥 texto centralizado */
  text-decoration: none;
  margin-top: auto;               /* mantém no fundo do card */
}

.post-card .btn:hover{
  filter: brightness(0.95);
  box-shadow: 0 8px 20px rgba(232,91,43,0.25);
  filter: brightness(0.95);
}

/* ========================================================= */
/* INFO                                                      */
/* ========================================================= */

.home-info{
  margin-top: 40px; /* 🔥 respiro no desktop */
}

@media (max-width:600px){
  .home-info{
    margin-top: 24px; /* 🔥 respiro no mobile */
  }
}

.info-image{
  text-align: center;   /* 🔥 centraliza a imagem */
  margin-bottom: 40px;  /* 🔥 espaço abaixo */
}

@media (max-width:900px){
  .info-image{
    margin-bottom: 24px;
  }
}

.info-image img{
  display: block;
  margin: 0 auto;
}

.info-content{
  display: flex;
  justify-content: center; /* 🔥 esquerda x direita */
  align-items: flex-start;
  gap: 80px; /* mantém o respiro que você já queria */
}
/* Desktop */
.info-text{
  max-width: 420px;
  margin-top: 34px;
}

@media (max-width:900px){
  .info-text{
    margin-top: 16px;
  }
}

.info-links{
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Mobile */
@media (max-width:900px){
  .info-content{
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .info-links{
    align-items: center;
    gap: 10px; /* 🔥 mobile mais compacto */
  }
}

.info-icon{
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-item{
  display: flex;
  align-items: center;   /* 🔥 alinha texto ao meio do ícone */
  gap: 10px;
}

/* ========================================================= */
/* FOOTER                                                    */
/* ========================================================= */
.footer{
  padding:60px 0;
}

.footer .container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

.footer-logo img{ height:48px; }

.footer-contact{
  max-width:420px;
  color:var(--muted);
}

.footer-social-bar{
  border-block: 2px solid var(--orange);
  padding: 14px 0;
  margin-top: 32px;
}

.footer-social-bar .container{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 🔥 tudo à esquerda */
  gap: 16px;
}

.footer-social-title{
  font-size: 18px;
  font-weight: 600;
}

.footer-social{
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-social img{
  width: 29px;
  height: 29px;
  display: block;
}

/* ===================== */
/* SINGLE - HERO       */
/* ===================== */
.hero-single{
  max-width: var(--container-w);
  margin: 0 auto;
  /*padding: 0 30px;   /* mesmo respiro lateral da home */
}

.hero-single .hero-bg{
  height: 240px;   /* 🔥 menor que a home */
  overflow: hidden;
}

.hero-single .hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (max-width:600px){
  .hero-single .hero-bg{
    height: 180px;
  }
}

/* ===================== */
/* SINGLE - NAV          */
/* ===================== */

.single-nav{
  max-width: var(--container-w);
  margin: 20px auto 0;
  padding: 0 30px;          /* acompanha o padding do conteúdo */
}

.single-nav a{
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.single-nav a:hover{
  color: var(--orange);
}

/* ===================== */
/* SINGLE - TÍTULO       */
/* ===================== */

.single-content h1{
  color: var(--orange);   /* 🔥 mesmo laranja da home */
  font-weight: 800;
  margin-bottom: 12px;
}

/* ===================== */
/* SINGLE - META         */
/* ===================== */

.single-content .hero-meta{
  font-size: 13px;        /* 🔥 menor */
  font-weight: 400;       /* 🔥 sem bold */
  color: var(--muted);
  margin-bottom: 36px;    /* 🔥 espaço considerável antes do texto */
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===================== */
/* SINGLE - TEXTO        */
/* ===================== */

.single-content .post-content{
  font-size: 16px;
  line-height: 1.7;
}

/* ===================== */
/* FIX IMAGENS NO MOBILE */
/* ===================== */

.single-content .wp-caption{
  max-width: 100% !important;
  width: auto !important;      /* 🔥 mata o width inline */
}

.single-content .wp-caption img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===================== */
/* FIX IMAGENS NO MOBILE */
/* ===================== */

.single-content .wp-caption{
  max-width: 100% !important;
  width: auto !important;      /* 🔥 mata o width inline */
}

.single-content .wp-caption img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===================== */
/* LEGENDA DAS IMAGENS   */
/* ===================== */

.single-content .wp-caption-text{
  font-size: 10px;
  color: var(--muted);   /* cinza elegante */
  line-height: 1.4;
  margin-top: 6px;
}

.single-content .wp-caption-text{
  text-align: center;
  letter-spacing: 0.02em;
}

/* ===================== */
/* SEARCH                */
/* ===================== */
.post-card-search p{
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  -webkit-line-clamp: 6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pagination{
  margin: 40px auto;
  text-align: center;
}

.pagination a,
.pagination span{
  display: inline-block;
  margin: 0 6px;
  padding: 8px 14px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  color: var(--orange);
}

.pagination .current{
  background: var(--orange);
  color: #fff;
}

/* ===================== */
/* SEARCH TOPBAR         */
/* ===================== */

.search-topbar{
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 16px 0;
  background: #fff;
}

.search-topbar-inner{
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo */
.search-logo img{
  height: 26px;
  display: block;
}

/* Nav */
.search-nav a{
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
}

.search-nav a:hover{
  color: var(--orange);
}

/* Busca */
.search-form{
  margin-left: auto; /* 🔥 empurra busca para a direita */
}

.search-form form{
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-form input{
  width: 240px;
  padding: 8px 12px;
  font-size: 14px;
}

.search-form button{
  padding: 8px 14px;
  background: var(--orange);
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

.search .header,
.category .header,
.blog .header{
  display: none;
}

@media (max-width:768px){
  .search-topbar-inner{
    flex-wrap: wrap;
  }

  .search-form{
    margin-left: 0;
    width: 100%;
  }

  .search-form input{
    width: 100%;
  }
}

/* ===================== */
/* SINGLE - RELACIONADOS */
/* ===================== */

.single .post-cards{
  margin: 0 auto;
  padding: 8px 0;
}

.related-posts{
  margin-top: 32px;
  background-color: #f8f8f8;
  padding: 20px 0 48px 0;
}

@media (max-width:768px){
  .related-posts{
    padding-top: 24px;
    padding-bottom: 32px;
  }
}

.related-posts h2{
  font-size: 24px;
  color: var(--dark);
  max-width: 1200px;
  margin: 0 auto;
  /* padding: 0 30px; */
}

.single .related-posts .post-cards{
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width:768px){
  .single .related-posts .post-cards{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .single .post-card img{
    height: 180px;
  }

  .single .post-card .btn{
    width: 100%;
  }
}

@media (max-width:600px){
  .related-posts h2{
    padding: 0 16px;
  }
}

/* ===================== */
/* MENU ABAIXO DO HERO   */
/* ===================== */

.content-menu{
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.content-menu ul{
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
}

.content-menu a{
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}

.content-menu a:hover{
  color: var(--orange);
}

.posts-page .posts-search{
  margin-top: 32px;
}

/*Página de posts e ver mais*/

.home-more{
  max-width: 1200px;     /* 🔥 mesmo width dos cards */
  margin: 16px auto 0;   /* centraliza o bloco */
  text-align: center;      /* 🔥 alinha com os cards */
}

.home-more a{
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 60px;
  border-radius: 24px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.home-more a:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(232,91,43,0.25);
}

@media (max-width:600px){
  .home-more{
    margin-top: 32px;
  }

  .home-more a{
    padding: 12px 487px; /* área de toque maior */
    font-size: 15px;
  }
}