/**
 * style-internal.css
 * Polish overlay para páginas internas do tema:
 * /personagens/, /sobre-o-autor/, /quadrinhofilia/, /blog/, /contato/, /mil-malus/
 * Carrega em todas as páginas que NÃO são front-page nem capítulo.
 */

/* ===== Page intro: respira mais, mas sem exagerar com header sticky ===== */
.page-intro {
  padding: 56px 0 32px;
}
@media (min-width: 768px) {
  .page-intro {
    padding: 72px 0 40px;
  }
}
@media (min-width: 992px) {
  .page-intro {
    padding: 88px 0 48px;
  }
}

.page-intro .title h1 {
  font-size: 30px;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .page-intro .title h1 {
    font-size: 38px;
  }
}

.page-intro .title .before {
  font-size: 56px;
  top: -60%;
  white-space: nowrap;
  opacity: 0.5; /* mais suave que branco puro */
}
@media (min-width: 768px) {
  .page-intro .title .before {
    font-size: 72px;
    top: -80%;
  }
}

/* Ghost heading dos blocos internos (.characters-list .title, .author-profile .title, etc).
   Original tinha width:200% sem centering, deslocando o ghost pra direita.
   Padronizamos com o padrão de .page-intro: centralizado, suave, atrás do título. */
.characters-list .title,
.malu-profile .title,
.author-profile .title,
.contato .title,
.blog-content .title,
.mil-malus .title {
  position: relative;
  text-align: center;
  margin-bottom: 32px;
}
.characters-list .title h1,
.characters-list .title h2,
.characters-list .title h3,
.malu-profile .title h1,
.malu-profile .title h2,
.author-profile .title h1,
.author-profile .title h2,
.contato .title h1,
.contato .title h2,
.blog-content .title h1,
.blog-content .title h2,
.mil-malus .title h1,
.mil-malus .title h2 {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.characters-list .title .before,
.malu-profile .title .before,
.author-profile .title .before,
.contato .title .before,
.blog-content .title .before,
.mil-malus .title .before {
  display: block !important; /* anula o display:none do style.css em mobile */
  width: 100% !important;
  font-size: 56px !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  color: #fff !important;
  opacity: 0.55 !important;
  line-height: 1 !important;
  font-family: "Pacifico", cursive !important;
}
@media (min-width: 768px) {
  .characters-list .title .before,
  .malu-profile .title .before,
  .author-profile .title .before,
  .contato .title .before,
  .blog-content .title .before,
  .mil-malus .title .before {
    font-size: 84px !important;
  }
}

/* ===== Anchors com sticky header: não escondem o conteúdo ===== */
:target {
  scroll-margin-top: 80px;
}
[id] {
  scroll-margin-top: 80px;
}

/* ===== Botão pink padrão do tema: casar com o do hero novo ===== */
.btn.pink,
button.btn.pink,
a.btn.pink {
  background: #d36c87;
  color: #fff !important;
  border-radius: 32px;
  padding: 12px 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  box-shadow: 0 3px 0 #a14e75, 0 4px 12px rgba(0, 0, 0, 0.12);
  text-decoration: none !important;
  border: 0;
  display: inline-block;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn.pink:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #a14e75, 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* ===== Cards/items genéricos: cantos mais arredondados ===== */
.webcomics-list .list .item {
  border-radius: 12px;
  overflow: hidden;
}
.blog-content .blog-list a.item {
  border-radius: 12px;
  overflow: hidden;
}

/* ===== Personagens: imagem dos personagens com cantos arredondados ===== */
.characters-list .character .img {
  border-radius: 16px;
  overflow: hidden;
}

/* ===== Author profile (Sobre o Autor / Quadrinhofilia): foto arredondada ===== */
.author-profile .image img {
  border-radius: 12px;
}

/* ===== Mobile: tipografia base mais legível ===== */
@media (max-width: 575px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  .page-intro .title h1 {
    font-size: 26px;
  }
  .page-intro .title .before {
    font-size: 44px;
  }
  /* Reduz padding lateral em containers Bootstrap */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== Contact Form 7: botão submit não estica 100% ===== */
.contato .wpcf7-form input[type="submit"],
.wpcf7-form input[type="submit"] {
  width: auto !important;
  min-width: 200px;
  max-width: 100%;
  margin: 16px auto 0;
  display: block;
}

/* ===== Footer: melhor respiro com header novo ===== */
.footer .last-line {
  padding: 32px 0;
}
.footer .signature {
  padding: 16px 0;
  font-size: 0.85rem;
}

/* ===== Tap targets nos menus internos ≥ 44px ===== */
.webcomics-nav ul li a,
.blog-nav ul li a {
  display: inline-block;
  padding: 12px 16px;
  min-height: 44px;
  line-height: 1.2;
}