/* Shared mobile, accessibility and home-page styles for Bíblia Online. */
:root {
  --papel: #fbf7ef;
  --tinta: #2b2118;
  --tinta-suave: #6d5f51;
  --vinho: #5c1a24;
  --vinho-escuro: #42121a;
  --ouro: #80601f;
  --ouro-claro: #c9a961;
  --linha: #e7decb;
  --card: #fffdf8;
  --sombra: 0 1px 2px rgba(43, 33, 24, .06), 0 8px 28px rgba(43, 33, 24, .08);
}

[data-tema="noite"] {
  --papel: #17130f;
  --tinta: #e9e1d3;
  --tinta-suave: #a2957f;
  --vinho: #7e2a38;
  --vinho-escuro: #5c1a24;
  --ouro: #c9a961;
  --ouro-claro: #a8863c;
  --linha: #2c251d;
  --card: #1f1913;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .5);
}

body { min-width: 0; overflow-wrap: anywhere; }
img, svg, video, iframe { max-width: 100%; }
a, button, input, textarea, select { font: inherit; }
a, p, li, h1, h2, h3, .book-name, .book-meta { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
noscript #btn-tema { display: none; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ouro-claro);
  color: #21140a;
  font-family: Inter, Arial, sans-serif;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 3px; }
.topo-inner, .topo-acoes, .nav-cap, .rodape, .idiomas { min-width: 0; }
.topo-inner { flex-wrap: wrap; }
.marca { min-height: 44px; display: inline-flex; align-items: center; }
.topo-acoes { flex-wrap: wrap; margin-left: auto; }
.botao-topo, .seta, .abrir-grade { min-height: 44px; }
.rodape a, .idiomas a { min-height: 44px; display: inline-flex; align-items: center; }
.nav-cap { flex-wrap: wrap; }
.nav-cap .seta, .nav-cap .abrir-grade { justify-content: center; }
.balao {
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  flex-wrap: wrap;
}
.balao button, .balao a { min-height: 44px; }
.verso[role="button"], .vitem .verso { display: block; clear: both; min-height: 44px; padding-block: 4px; }
.vitem .ref { display: inline-flex; align-items: center; min-height: 44px; }
.pagina h1 { padding-inline-end: 32px; }
.testamento { color: var(--tinta-suave); }
.rodape, .idiomas { flex-wrap: wrap; }
.idiomas { margin-left: auto; }
.aviso-copiado { max-width: calc(100vw - 32px); text-align: center; }

/* The chapter menu remains usable without JavaScript. */
.grade { display: grid; }
html.js .grade { display: none; }
html.js .grade.aberta { display: grid; }

.home-page {
  background: var(--papel);
  color: var(--tinta);
  min-height: 100vh;
}
.home-hero {
  background: linear-gradient(135deg, var(--vinho-escuro), var(--vinho));
  color: #f3e9da;
  padding: clamp(36px, 8vw, 84px) 16px;
}
.hero-inner, .home-section, .info-content, .not-found {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}
.hero-inner { display: grid; gap: 20px; }
.home-intro { max-width: 680px; font-size: clamp(1.05rem, 2.5vw, 1.22rem); line-height: 1.7; }
.home-hero h1 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(2.1rem, 8vw, 4.4rem); line-height: 1.04; }
.home-hero .testamento { color: #e2c98e; }
.home-section, .info-content, .not-found { padding-block: clamp(28px, 6vw, 64px); }
.home-section h2, .info-content h1, .info-content h2, .not-found h1 {
  color: var(--vinho);
  font-family: Fraunces, Georgia, serif;
  line-height: 1.15;
}
.search-books {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--card);
  color: var(--tinta);
  box-shadow: var(--sombra);
}
.search-status { display: block; min-height: 1.5em; margin: 10px 0 0; color: var(--tinta-suave); }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.book-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--card);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--sombra);
}
.book-card:hover { border-color: var(--ouro); transform: translateY(-1px); }
.book-card:focus-visible, .quick-links a:focus-visible { color: var(--tinta); border-color: var(--ouro-claro); }
.book-name { font-family: Fraunces, Georgia, serif; font-size: 1.16rem; font-weight: 600; }
.book-meta { color: var(--tinta-suave); font: .88rem/1.4 Inter, Arial, sans-serif; }
.empty-books { margin: 18px 0 0; color: var(--tinta-suave); }
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.quick-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid var(--linha); border-radius: 10px; color: var(--vinho); background: var(--card); text-decoration: none; }
.quick-links a:hover { border-color: var(--ouro); }
.info-content { font-size: clamp(1rem, 2.3vw, 1.12rem); line-height: 1.75; }
.info-content a { color: var(--vinho); }
.not-found { text-align: center; }

[data-tema="noite"] h1 .num-cap,
[data-tema="noite"] .home-section h2,
[data-tema="noite"] .info-content h1,
[data-tema="noite"] .info-content h2,
[data-tema="noite"] .not-found h1,
[data-tema="noite"] .quick-links a,
[data-tema="noite"] .abrir-grade,
[data-tema="noite"] .info-content a { color: #e9c77f; }

@media (max-width: 560px) {
  .topo-inner { gap: 8px; padding-inline: 12px; }
  .marca { font-size: 1rem; }
  .topo-acoes { margin-left: 0; }
  .botao-topo { padding-inline: 10px; }
  .pagina { padding-inline: 12px; }
  .nav-cap { gap: 8px; }
  .nav-cap .seta, .nav-cap .abrir-grade { flex: 1 1 132px; margin-left: 0; }
  .fita { right: 16px; }
  .rodape { padding-inline: 12px; }
  .idiomas { width: 100%; margin-left: 0; }
}

@media (max-width: 360px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero { padding-inline: 12px; }
  .hero-inner, .home-section, .info-content, .not-found { width: min(100% - 24px, 1120px); }
  .balao { left: 8px !important; right: 8px; width: auto; }
}

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

/* Keep decorative elements clear of the reading path on narrow screens. */
.marca { gap: .2em; }
.migalhas { padding-inline-end: 46px; }
[data-tema="noite"] .capitular::first-letter,
[data-tema="noite"] .marca span { color: #e9c77f; }
[data-tema="noite"] .balao .zap { color: #166534; }
@media (max-width: 560px) {
  .fita { display: none; }
  .migalhas, .pagina h1 { padding-inline-end: 0; }
}