/*
 * Liturgia Diária — site público (landing, política de privacidade, fontes).
 *
 * Sem framework, sem fonte externa, sem requisição de terceiros. A paleta e a
 * tipografia seguem `.ultimate/skills/liturgia-ui/SKILL.md`: Sépia é o padrão,
 * corpo de leitura com serifa e 18px+, largura de linha de ~35rem, rótulos em
 * sans-serif. O modo noturno segue a preferência do sistema — no site, não no
 * aplicativo, onde o tema é escolhido dentro do app.
 */

:root {
  --bg: #fbf2e3;
  --surface: #f3e5d0;
  --surface-2: #ead6bc;
  --text: #2c1e14;
  --text-soft: #5a4132;
  --primary: #8b4513;
  --gold: #c8871e;
  --rule: #dcc7a8;
  --green: #3f6b3a;
  --shadow: 0 1px 2px rgba(44, 30, 20, 0.06), 0 10px 30px rgba(44, 30, 20, 0.05);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1e1e1e;
    --surface-2: #2d2d2d;
    --text: #e2e8f0;
    --text-soft: #b4bdc9;
    --primary: #fbbf24;
    --gold: #fbbf24;
    --rule: #2d2d2d;
    --green: #7fae74;
    --shadow: none;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.125rem; /* 18px, e sobe junto com o tamanho de fonte do navegador */
  line-height: 1.65;
  letter-spacing: 0.003em;
}

a {
  color: var(--primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Linha de leitura confortável: nenhum parágrafo passa de ~35rem (630px). */
.prose > p,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > h2,
.prose > h3,
.feature p,
.note p,
li {
  max-width: 35rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* Cabeçalho ---------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

/* A marca é a arte do próprio ícone do aplicativo (`site/icon.svg`, gerado de
   `design/icon/pagina-do-dia.svg`): o mesmo desenho que o launcher mostra. O canto
   arredondado imita a máscara do Android — e nada mais: o quadrado chapado de
   `--primary` que havia aqui era um placeholder, e no modo noturno virava um
   quadrado amarelo ao lado do nome do app. O desenho traz as próprias cores; não
   herda nenhuma. */
.brand-mark {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5625rem;
  flex: none;
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

/* O rótulo curto da navegação aparece só no celular (veja a media query abaixo). */
.nav-short {
  display: none;
}

.masthead nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.masthead nav a:hover {
  text-decoration: underline;
}

/* No celular, a navegação cabe numa linha só: o nome do app já leva para a
   página inicial, então o link "Início" sai da barra (continua no rodapé), e
   os outros usam o rótulo curto, que está no HTML ao lado do comprido. */
@media (max-width: 34rem) {
  .masthead .wrap {
    gap: 0;
  }

  .brand {
    font-size: 1.125rem;
  }

  .masthead nav {
    gap: 0 1rem;
  }

  .masthead nav a {
    font-size: 0.875rem;
  }

  .masthead nav a[href="/"] {
    display: none;
  }

  .nav-short {
    display: inline;
  }

  .nav-long {
    display: none;
  }

  .pill {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
  }
}

.masthead nav a[aria-current="page"] {
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* Conteúdo ----------------------------------------------------------------- */

main {
  display: block;
  padding: 2.5rem 0 3rem;
}

.hero {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: 3.5rem;
    padding: 1.5rem 0 1rem;
  }
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h2 {
  margin: 3rem 0 1rem;
  font-size: 1.625rem;
}

h3 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  line-height: 1.35;
}

p {
  margin: 0 0 1rem;
  overflow-wrap: break-word;
}

.lede {
  max-width: 33rem;
  font-size: 1.25rem;
  line-height: 1.55;
}

.label {
  margin: 0 0 0.375rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

/* "Ainda não está no Google Play": texto, nunca um selo de loja. */
.pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.pill-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--gold);
  flex: none;
}

.pill-sep {
  color: var(--text-soft);
}

/* Card de leitura: o mesmo desenho de bloco do aplicativo. */
.card {
  border-radius: 1.25rem;
  background: var(--surface);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.reading .ref {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-soft);
}

.reading .verse {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.55;
}

.lit-color {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-soft);
}

.swatch {
  width: 0.3125rem;
  height: 1.1em;
  border-radius: 2px;
  background: var(--green);
  flex: none;
}

.fine {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-soft);
}

code {
  padding: 0.1em 0.35em;
  border-radius: 0.35rem;
  background: var(--surface-2);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

/* Diferenciais: uma coluna no celular, duas no desktop. */
.features {
  display: grid;
  gap: 1.75rem 2.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.feature p {
  margin: 0;
  color: var(--text-soft);
}

.feature strong {
  color: var(--text);
}

/* Bloco de aviso honesto (o app ainda não está publicado). */
.note {
  border-left: 0.25rem solid var(--gold);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--surface);
  padding: 1.25rem 1.375rem 0.25rem;
}

.note p:last-child {
  margin-bottom: 1rem;
}

/* Páginas de texto (privacidade, fontes) */
.page {
  max-width: 40rem;
}

.page h2 {
  padding-top: 0.25rem;
  border-top: 1px solid var(--rule);
}

.page ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.page li {
  margin-bottom: 0.5rem;
}

.page li::marker {
  color: var(--gold);
}

dl.rows {
  margin: 0 0 1rem;
}

dl.rows div {
  border-top: 1px solid var(--rule);
  padding: 0.75rem 0;
}

dl.rows dt {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
}

dl.rows dd {
  margin: 0.125rem 0 0;
  color: var(--text-soft);
}

.updated {
  margin: 0 0 2rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text-soft);
}

/* Rodapé ------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-soft);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-bottom: 1rem;
}

footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-weight: 600;
  text-decoration: none;
}

footer nav a:hover {
  text-decoration: underline;
}

footer p {
  max-width: 35rem;
  margin: 0 0 0.5rem;
}

/* Página de um dia (/d/AAAA-MM-DD/) -------------------------------------- */

/* As cores litúrgicas são as do aplicativo (`lib/models/liturgical_colors.dart`).
   A faixa fina é sempre acompanhada do nome escrito: cor nunca é o único sinal.
   No modo noturno só o verde muda, como o resto do site. */
.sw-verde {
  background: var(--green);
}

.sw-branco {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(44, 30, 20, 0.45);
}

.sw-vermelho {
  background: #c62828;
}

.sw-roxo {
  background: #6a1b9a;
}

.sw-rosa {
  background: #ad1457;
}

.sw-preto {
  background: #2b2b2b;
}

@media (prefers-color-scheme: dark) {
  .sw-vermelho {
    background: #e05252;
  }

  .sw-roxo {
    background: #9c52cc;
  }

  .sw-rosa {
    background: #d46a99;
  }
}

.day {
  max-width: 40rem;
}

.day-head {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.day-date {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-soft);
}

.day-head h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
  line-height: 1.2;
}

.day-verse {
  margin: 0 0 2.5rem;
}

.day-verse .verse {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.55;
  font-style: italic;
}

.day-verse .ref {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* Cada bloco de leitura tem sempre o mesmo desenho: rótulo curto em caixa alta,
   a referência e o texto. */
.block {
  margin: 0 0 2.5rem;
}

.block h2 {
  margin: 0 0 0.25rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.block .ref {
  margin: 0 0 0.875rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-soft);
}

.block .text p {
  margin: 0 0 1rem;
  max-width: 35rem;
}

.block .text p:last-child {
  margin-bottom: 0;
}

.block .refrain {
  margin: 0 0 1rem;
  max-width: 35rem;
  font-weight: 700;
}

.block .refrain .r {
  font-style: italic;
}

.block .proclamation {
  margin: 0 0 1rem;
  max-width: 35rem;
  font-style: italic;
  color: var(--text-soft);
}

/* O convite a instalar: depois da leitura, uma vez, sem modal e sem pedir nada. */
.install {
  margin: 3rem 0 0;
  padding: 1.25rem 1.375rem 0.25rem;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: var(--surface);
}

.install h2 {
  margin: 0 0 0.625rem;
  font-size: 1.1875rem;
  line-height: 1.3;
}

.install p {
  max-width: 35rem;
}

.day-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
}

.day-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  text-decoration: none;
}

.day-nav a:hover {
  text-decoration: underline;
}

/* Índice dos dias (/d/) */
.day-list {
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.day-list li {
  border-top: 1px solid var(--rule);
}

.day-list li:last-child {
  border-bottom: 1px solid var(--rule);
}

.day-list a {
  display: block;
  padding: 0.75rem 0;
  text-decoration: none;
}

.day-list a:hover .celebracao {
  text-decoration: underline;
}

.day-list .dia {
  display: block;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
}

.day-list .celebracao {
  display: block;
  color: var(--text-soft);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}