/* ============================================================
   BÍBLIA ONLINE FIEL — Responsivo Fluido
   Abordagem: Design intrinsecamente fluido.
   Apenas 1 breakpoint (768 px) para alternar nav mobile/desktop.
   Tudo o mais se adapta sozinho com auto-fit, clamp() e min().
   ============================================================ */

/* ────────────────────────────────────────────
   0. LOCK DE VIEWPORT — impede zoom-out e scroll horizontal
   ──────────────────────────────────────────── */

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}

/* Todas as imagens, vídeos e embeds respeitam o container */
img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}

/* ────────────────────────────────────────────
   1. NAVEGAÇÃO — MOBILE POR PADRÃO
   ──────────────────────────────────────────── */

/* Mobile: menu hamburger visível, nav desktop escondida */
.bof-menu-toggle { display: block; }
.bof-nav { display: none; }
.bof-nav-mobile { display: block; }

/* Desktop (≥ 768 px): nav desktop visível, hamburger escondido */
@media (min-width: 768px) {
  .bof-nav { display: flex; }
  .bof-menu-toggle { display: none; }
  .bof-nav-mobile { display: none; }
}

/* ────────────────────────────────────────────
   2. GRIDS FLUIDOS — adaptam-se a qualquer tela
   ──────────────────────────────────────────── */

/* Grids: 1 coluna no celular, auto-fit a partir de 768px */
.bof-grid-2,
.bof-grid-3,
.bof-grid-4,
.bof-grid-auto {
  grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {
  .bof-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }

  .bof-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }

  .bof-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }

  .bof-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
}

/* Grid de livros da Bíblia — 2 colunas mínimas, cresce até 6+ */
.bof-book-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(130px, 45%), 1fr));
  gap: var(--bof-space-xs);
}

/* Quick links */
.bof-quick-links {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Footer */
.bof-footer-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--bof-space-xl);
}

.bof-footer-bottom {
  flex-wrap: wrap;
  gap: var(--bof-space-sm);
  text-align: center;
  justify-content: center;
}

/* ────────────────────────────────────────────
   3. HERO — padding fluido
   ──────────────────────────────────────────── */

.bof-hero {
  /* clamp(mínimo, preferido, máximo) */
  padding: clamp(2rem, 8vw, 6rem) var(--bof-space-md);
}

/* A cruz decorativa escondida em telas estreitas para não causar overflow */
.bof-hero::after {
  display: none;
}

@media (min-width: 768px) {
  .bof-hero::after {
    display: block;
  }
}

/* Botões do hero empilham em telas estreitas, ficam lado-a-lado quando cabem */
.bof-hero-actions {
  flex-wrap: wrap;
}

.bof-hero-actions .bof-btn {
  min-width: min(100%, 220px);
  flex: 1 1 auto;
}

@media (min-width: 768px) {
  .bof-hero-actions .bof-btn {
    min-width: auto;
    flex: 0 0 auto;
  }
}

/* ────────────────────────────────────────────
   4. NEWSLETTER — empilha no mobile, lado-a-lado quando cabe
   ──────────────────────────────────────────── */

.bof-newsletter {
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
}

.bof-newsletter-form {
  flex-wrap: wrap;
}

.bof-newsletter-form input[type="email"] {
  min-width: min(100%, 260px);
  flex: 1 1 260px;
}

.bof-newsletter-form button {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .bof-newsletter-form button {
    width: auto;
  }
}

/* ────────────────────────────────────────────
   5. CARDS E COMPONENTES — ajustes fluidos
   ──────────────────────────────────────────── */

/* Character cards — altura fluida da imagem */
.bof-character-card-img {
  height: clamp(140px, 20vw, 220px);
}

/* Verse topic items */
.bof-verse-topic-item {
  flex-wrap: wrap;
  gap: var(--bof-space-md);
}

/* Chapter navigation */
.bof-chapter-nav {
  flex-wrap: wrap;
  gap: var(--bof-space-md);
  justify-content: center;
}

/* Verse actions — sempre à direita no mobile, centralizado se houver espaço */
.bof-verse-actions {
  left: auto;
  right: 0;
  transform: none;
}

.bof-verse-actions::after {
  left: auto;
  right: var(--bof-space-md);
  transform: none;
}

@media (min-width: 768px) {
  .bof-verse-actions {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .bof-verse-actions::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* Container padding extra em telas grandes */
@media (min-width: 1200px) {
  .bof-container {
    padding: 0 var(--bof-space-xl);
  }
}

/* ────────────────────────────────────────────
   6. PRINT STYLES
   ──────────────────────────────────────────── */

@media print {
  .bof-header,
  .bof-footer,
  .bof-share-bar,
  .bof-chapter-nav,
  .bof-scroll-top,
  .bof-newsletter,
  .bof-verse-actions,
  .bof-menu-toggle,
  .bof-hero-search {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .bof-verse { padding-left: 2rem; }
  .bof-verse-num { color: #666; }
  a { color: #000; text-decoration: underline; }
  .bof-reader { max-width: 100%; padding: 0; }
}

/* ────────────────────────────────────────────
   7. ACESSIBILIDADE
   ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────
   8. DARK MODE (Preparação futura)
   ──────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  /* Reservado para implementação futura. */
}

/* ────────────────────────────────────────────
   9. OVERRIDES GENERATEPRESS — força layout 100% sem sidebar
   ──────────────────────────────────────────── */

.page-template-template-home #primary,
.page-template-template-bible-hub #primary,
.page-template-template-verses-hub #primary,
.page-template-template-characters-hub #primary,
.page-template-template-studies-hub #primary,
.page-template-template-christian-life #primary,
.page-template-template-verse-of-day #primary,
.page-template-template-psalm-of-day #primary,
.page-template-template-proverb-of-day #primary,
.post-type-archive-bof_chapter #primary,
.tax-bof_book #primary,
.tax-bof_testament #primary,
.single-bof_chapter #primary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-template-template-home #right-sidebar,
.page-template-template-bible-hub #right-sidebar,
.page-template-template-verses-hub #right-sidebar,
.page-template-template-characters-hub #right-sidebar,
.page-template-template-studies-hub #right-sidebar,
.page-template-template-christian-life #right-sidebar,
.page-template-template-verse-of-day #right-sidebar,
.page-template-template-psalm-of-day #right-sidebar,
.page-template-template-proverb-of-day #right-sidebar,
.post-type-archive-bof_chapter #right-sidebar,
.tax-bof_book #right-sidebar,
.tax-bof_testament #right-sidebar,
.single-bof_chapter #right-sidebar {
  display: none !important;
}

.page-template-template-home .site-content,
.page-template-template-bible-hub .site-content,
.page-template-template-verses-hub .site-content,
.page-template-template-characters-hub .site-content,
.page-template-template-studies-hub .site-content,
.page-template-template-christian-life .site-content,
.page-template-template-verse-of-day .site-content,
.page-template-template-psalm-of-day .site-content,
.page-template-template-proverb-of-day .site-content,
.post-type-archive-bof_chapter .site-content,
.tax-bof_book .site-content,
.tax-bof_testament .site-content,
.single-bof_chapter .site-content {
  display: block !important;
  max-width: 100% !important;
  padding: 0 !important;
}