/*
Theme Name: Inova Blog
Theme URI: https://blog.corretorainova.com/
Author: Inova Corretora de Seguros
Author URI: https://corretorainova.com/
Description: Tema editorial sob medida do blog da Inova Corretora de Seguros. Reproduz a identidade do site principal (paleta azul institucional, Montserrat, cards sóbrios) com caminho claro de conversão para cotação. Sem page builders e sem dependência de plugins.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: inova-blog
*/

/* ============================================================
   01. Tokens — idênticos aos do site principal (styles.css)
   ============================================================ */
:root{
  /* Brand */
  --brand: #0B77BF;
  --brand-dark: #0a58ca;
  --brand-deep: #0b2b52;
  --brand-soft: #7cc3ff;

  /* Neutros */
  --ink: #1c2b3a;
  --ink-soft: #425466;
  --ink-muted: #5b6b7d;
  --surface: #ffffff;
  --surface-alt: #f4f7fb;
  --surface-tint: #f8fafc;
  --border-soft: rgba(13, 38, 59, 0.08);

  /* Sombras */
  --shadow-card: 0 10px 22px rgba(15, 23, 42, .05);
  --shadow-card-hover: 0 16px 32px rgba(15, 23, 42, .1);

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;       /* 12px — padrão de cards */
  --radius-lg: 1rem;
  --radius-pill: 50rem;
}

/* ============================================================
   02. Base
   ============================================================ */
body{
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background-color: var(--surface-alt);
  color: var(--ink);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6{ letter-spacing: -.01em; color: var(--brand-deep); }
p{ color: var(--ink-soft); }
a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--brand-dark); }

/* Acessibilidade */
.skip-link{
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 2000;
  padding: .5rem .9rem;
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: top .2s ease;
}
.skip-link:focus{ top: 6px; }
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   03. Faixa institucional + Navbar (espelho do site principal)
   ============================================================ */
.institutional-bar{
  background: var(--brand-deep);
  color: rgba(255, 255, 255, .85);
  font-size: .78rem;
  padding: .4rem 0;
  letter-spacing: .02em;
}
.institutional-bar .container{ min-height: 1.6rem; }
@media (max-width: 575.98px){
  .institutional-bar{ font-size: .72rem; text-align: center; }
  .institutional-bar .container{ justify-content: center; }
}

.navbar{
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
}
.navbar-brand{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  letter-spacing: .08em;
  color: var(--brand-deep);
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.brand-wordmark{
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
}
.navbar .nav-link{
  color: #28384d;
  font-weight: 500;
  padding: .75rem 1rem;
  position: relative;
}
.navbar .nav-link::after{
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .45rem;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{ color: var(--brand); }
.navbar .nav-link.active::after,
.navbar .nav-link:hover::after{ background: var(--brand); }
.navbar .nav-link.active{ color: var(--brand) !important; font-weight: 600; }

/* ============================================================
   04. Cabeçalho editorial (home / arquivos)
   ============================================================ */
.blog-hero{
  padding: 3rem 0 1.5rem;
  text-align: center;
}
.blog-hero h1{
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: .5rem;
}
.blog-hero p{
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink-muted);
}

/* Chips de categoria (estilo dos city-chip, versão fundo claro) */
.category-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
}
.category-chips .cat-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.category-chips .cat-chip:hover{
  border-color: rgba(11, 119, 191, .4);
  background: rgba(11, 119, 191, .06);
  color: var(--brand);
}
.category-chips .cat-chip.active{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ============================================================
   05. Cards de post
   ============================================================ */
.post-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}
.post-card-media{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-tint);
}
.post-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.post-card:hover .post-card-media img{ transform: scale(1.03); }
.post-card-media--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-deep), #0e3a73);
}
.post-card-media--placeholder .brand-wordmark{
  color: rgba(255, 255, 255, .85);
  font-size: 1.6rem;
}
.post-card-body{
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.1rem 1.2rem 1.2rem;
  flex-grow: 1;
}
.post-category{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.post-category a{ color: inherit; }
.post-card-title{
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-title a{ color: var(--brand-deep); }
.post-card-title a:hover{ color: var(--brand); }
.post-card-excerpt{
  font-size: .9rem;
  color: var(--ink-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-meta{
  margin-top: auto;
  padding-top: .35rem;
  font-size: .78rem;
  color: var(--ink-muted);
}

/* Post em destaque (primeiro da home) */
.post-card--featured{ flex-direction: column; }
@media (min-width: 768px){
  .post-card--featured{ flex-direction: row; }
  /* Imagem quadrada à esquerda; 42% da largura mantém o card com altura
     de revista sem o quadrado dominar a linha. */
  .post-card--featured .post-card-media{
    flex: 0 0 42%;
    aspect-ratio: 1 / 1;
  }
  .post-card--featured .post-card-body{
    justify-content: center;
    padding: 2rem;
  }
  .post-card--featured .post-card-title{
    font-size: 1.5rem;
    -webkit-line-clamp: 3;
  }
  .post-card--featured .post-card-excerpt{ -webkit-line-clamp: 3; }
}

/* ============================================================
   06. Paginação (classes nativas do WP: .page-numbers)
   ============================================================ */
.blog-pagination{
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 1rem;
}
.blog-pagination .nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.blog-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: .45rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 500;
}
.blog-pagination a.page-numbers:hover{
  border-color: rgba(11, 119, 191, .4);
  color: var(--brand);
}
.blog-pagination .page-numbers.current{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.blog-pagination .page-numbers.dots{ border: none; background: transparent; }

/* ============================================================
   07. Página do post (single)
   ============================================================ */
.article-header{
  max-width: 760px;
  margin: 2.5rem auto 1.5rem;
  padding: 0 1rem;
  text-align: center;
}
.article-header .post-category{ font-size: .78rem; }
.article-header h1{
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 700;
  margin: .6rem 0;
}
.article-meta{
  font-size: .85rem;
  color: var(--ink-muted);
}
/* Capa quadrada: contida, senão um 1:1 engole a primeira dobra
   (em 520px ela tem presença sem competir com o conteúdo). */
.article-cover{
  max-width: 520px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.article-cover img{
  width: 100%;
  height: auto; /* anula o height="" do WP, senão a imagem estica na vertical */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.article-body{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.article-body p{ margin-bottom: 1.15rem; }
.article-body h2,
.article-body h3{
  color: var(--brand-deep);
  font-weight: 700;
  margin: 2rem 0 .85rem;
}
.article-body h2{ font-size: 1.45rem; }
.article-body h3{ font-size: 1.2rem; }
.article-body a{ text-decoration: underline; text-underline-offset: 3px; }
.article-body img{
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.article-body figure{ margin: 1.5rem 0; }
.article-body figcaption,
.article-body .wp-caption-text{
  font-size: .82rem;
  color: var(--ink-muted);
  margin-top: .5rem;
  text-align: center;
}
.article-body blockquote{
  border-left: 4px solid var(--brand);
  background: var(--surface-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
}
.article-body blockquote p:last-child{ margin-bottom: 0; }
.article-body ul, .article-body ol{ margin-bottom: 1.15rem; padding-left: 1.4rem; }
.article-body li{ margin-bottom: .35rem; }
.article-body table{
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: .95rem;
}
.article-body th, .article-body td{
  border: 1px solid var(--border-soft);
  padding: .6rem .75rem;
}
.article-body th{ background: var(--surface-tint); color: var(--brand-deep); }
.article-body pre{
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 1rem;
  overflow-x: auto;
  font-size: .88rem;
}

/* Classes de alinhamento nativas do WP */
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.alignleft{ float: left; margin: .35rem 1.25rem 1rem 0; }
.alignright{ float: right; margin: .35rem 0 1rem 1.25rem; }
@media (max-width: 575.98px){
  .alignleft, .alignright{ float: none; margin: 1rem auto; display: block; }
}

/* CTA de conversão ao fim do post */
.post-cta{
  max-width: 720px;
  margin: 1rem auto 3rem;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-deep), #0e3a73);
  color: #fff;
  text-align: center;
}
.post-cta h2{
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.post-cta p{
  color: rgba(226, 232, 240, .85);
  max-width: 480px;
  margin: 0 auto 1.25rem;
}
.cta-button{
  display: inline-block;
  border: none;
  color: #fff;
  padding: 14px 36px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--brand-dark);
  transition: background-color .2s, box-shadow .2s;
  box-shadow: 0 2px 6px rgba(13, 110, 253, .15);
}
.cta-button:hover{
  background: #0848a1;
  color: #fff;
  box-shadow: 0 4px 10px rgba(13, 110, 253, .25);
}

/* Posts relacionados */
.related-posts{
  padding: 0 0 3rem;
}
.related-posts h2{
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* ============================================================
   08. Página estática / 404 / busca
   ============================================================ */
.article-body--page{ padding: 0; max-width: none; }
.page-plain{
  max-width: 760px;
  margin: 2.5rem auto 3rem;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.error-404{
  text-align: center;
  padding: 4rem 1rem;
}
.error-404 h1{ font-size: 2rem; font-weight: 700; }
.search-form-inline{
  display: flex;
  gap: .5rem;
  max-width: 480px;
  margin: 1.25rem auto 0;
}
.search-form-inline input[type="search"]{
  flex: 1;
  padding: .55rem .9rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: inherit;
}
.search-form-inline button{
  border: none;
  background: var(--brand-dark);
  color: #fff;
  font-weight: 600;
  padding: .55rem 1.2rem;
  border-radius: var(--radius-sm);
}
.search-form-inline button:hover{ background: #0848a1; }

/* ============================================================
   09. Rodapé (espelho do site principal)
   ============================================================ */
.site-footer{
  background: linear-gradient(135deg, var(--brand-deep), #0b1626);
  color: #e2e8f0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -20px 40px rgba(10, 20, 40, .25);
}
.site-footer h5{
  color: var(--brand-soft);
  font-weight: 600;
  letter-spacing: .04em;
}
.site-footer .link-light{
  color: rgba(226, 232, 240, .85);
  transition: color .2s ease;
}
.site-footer .link-light:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer a.link-light.archbyte-link:hover{ color: #F5CB5C !important; }
.site-footer .text-light{ color: rgba(226, 232, 240, .85) !important; }
.site-footer .brand-wordmark{ color: #fff; font-size: 1.1rem; }
.footer-brand{
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-brand-tagline{
  color: rgba(226, 232, 240, .6);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.footer-cities{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
.footer-cities .city-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(226, 232, 240, .85);
  font-size: .78rem;
  letter-spacing: .02em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-cities .city-chip:hover{
  background: rgba(124, 195, 255, .12);
  border-color: rgba(124, 195, 255, .4);
  color: #fff;
}
.footer-cities .city-chip i{ font-size: .85rem; color: var(--brand-soft); }