/* ============================================================
   ELEMENTOS — Sharlys & Bruna
   ------------------------------------------------------------
   Todo elemento do convite e do painel existe UMA vez, aqui.
   As páginas só chamam a classe. Para mudar a cor de um botão no
   site inteiro, muda-se aqui, e nunca na página.

   Cada elemento aparece em todos os estados em templates.html.
   Elemento que não está lá não existe: crie aqui, mostre lá, e
   só então use na página.

   Piso de legibilidade: nenhum texto abaixo de .72rem (11,5px). O
   convite é lido no celular por gente de todas as idades.

   Os estados que não se forçam pelo navegador (passar o mouse,
   foco) também respondem a data-estado="...", para a página de
   templates conseguir mostrá-los parados.
   ============================================================ */

:root{
  /* Areia de fim de tarde: o creme puxa para o barro, não para o amarelo */
  --areia-clara:#F4ECE2;
  --areia:#E6D7C6;
  --duna:#CDB6A0;
  --argila:#76604C;   /* escurecido em 24/09 para passar 4,5:1 sobre a areia */
  --tinta:#43392F;
  --tinta-escura:#2F281F;
  --tinta-suave:#6B5C4E;
  --folha:#7C8A72;          /* único acento: o verde dos ramos do convite em acrílico */
  --folha-escura:#5C6B52;
  --recusa:#8C5D45;
  --branco:#FDFBF8;
  --sombra:rgba(67,57,47,.16);

  --serif-display:"Bodoni Moda","Didot","Times New Roman",serif;
  --serif-texto:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --script:"Parisienne","Snell Roundhand",cursive;

  --medida:31rem;            /* coluna de leitura */
  --ritmo:clamp(3.5rem,9vw,6rem);
}

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

/* o atributo hidden precisa vencer as classes que definem display */
[hidden]{display:none!important}

img{max-width:100%}

::selection{background:var(--duna);color:var(--branco)}

:focus-visible,
[data-estado="foco"]{
  outline:2px solid var(--folha);
  outline-offset:3px;
}

/* ---------- tipografia ---------- */

h1,h2,h3{
  font-family:var(--serif-display);
  font-weight:400;
  margin:0;
  text-wrap:balance;
  line-height:1.15;
}

p{margin:0}

/* etiqueta em versalete, que abre toda seção */
.rotulo{
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--argila);
  margin:0;
}

.italico{font-style:italic;color:var(--tinta-suave)}

.amp{
  font-family:var(--script);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--argila);
}

/* filete curto: divisor de respiro, não de seção */
.filete{
  width:3.5rem;
  height:1px;
  border:0;
  margin:0;
  background:var(--duna);
}

/* ---------- marca: monograma S B ---------- */

.monograma{
  position:relative;
  display:inline-grid;
  place-items:center;
  font-family:var(--serif-display);
  font-weight:400;
  line-height:1;
  color:var(--tinta);
  isolation:isolate;
}

.monograma span{grid-area:1/1}
.monograma .m-s{transform:translateX(-.19em)}
.monograma .m-b{transform:translateX(.19em);opacity:.92}

/* ---------- botões ---------- */

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.7rem 1.6rem;
  border:1px solid var(--duna);
  border-radius:0;
  background:transparent;
  color:var(--tinta);
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}

.botao:hover,
.botao[data-estado="hover"]{background:var(--tinta);border-color:var(--tinta);color:var(--branco)}

.botao--cheio{
  background:var(--tinta);
  border-color:var(--tinta);
  color:var(--branco);
  padding:.85rem 2rem;
}

.botao--cheio:hover,
.botao--cheio[data-estado="hover"]{background:var(--tinta-escura);border-color:var(--tinta-escura)}

/* desativado e carregando: o mesmo desenho, o cursor diz qual é qual */
.botao[disabled]{opacity:.5;cursor:not-allowed}
.botao[aria-busy="true"]{opacity:.5;cursor:progress}

/* confirmação curta dentro do próprio botão (ex.: "Copiado") */
.botao--feito,
.botao--feito:hover{background:var(--folha-escura);border-color:var(--folha-escura);color:var(--branco)}

/* ---------- campos de formulário ---------- */

.campo{display:grid;gap:.4rem;text-align:left}

.campo label{
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--argila);
}

.entrada,
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:.7rem .85rem;
  border:1px solid var(--duna);
  border-radius:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--serif-texto);
  font-weight:400;
  font-size:1.02rem;
  line-height:1.5;
  appearance:none;
}

.campo textarea{resize:vertical}

.campo select{
  background-image:linear-gradient(45deg,transparent 50%,var(--argila) 50%),linear-gradient(135deg,var(--argila) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%,calc(100% - .75rem) 55%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.entrada:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.campo [data-estado="foco"]{outline:2px solid var(--folha);outline-offset:1px}

.entrada:disabled,
.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled{background:var(--areia-clara);color:var(--tinta-suave);cursor:not-allowed}

.campo--erro input,
.campo--erro select,
.campo--erro textarea{border-color:var(--recusa)}
.campo--erro label{color:var(--recusa)}

.opcional{
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:none;
  color:var(--argila);
}

/* o campo-armadilha existe para robôs; gente nunca o vê nem o tabula */
.armadilha{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- avisos ---------- */

.aviso{
  font-size:.86rem;
  font-style:italic;
  color:var(--tinta-suave);
  text-align:center;
}

.aviso--erro{color:var(--recusa)}

.aviso a{color:var(--folha-escura);text-decoration:underline;text-underline-offset:3px}

/* pendência: some quando o dado chega. Nunca pode ir para convidado. */
.pendente{
  border:1px dashed var(--folha);
  background:rgba(124,138,114,.07);
  padding:1.1rem 1.2rem;
  display:grid;
  gap:.4rem;
  text-align:left;
  color:var(--tinta-suave);
  font-size:.93rem;
}

.pendente strong{
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--folha-escura);
}

/* ---------- recibo: "deu certo" ---------- */

.recibo{
  display:grid;
  gap:.85rem;
  justify-items:center;
  width:100%;
  padding:2rem 1.4rem;
  border:1px solid var(--duna);
  background:linear-gradient(170deg,#FBF6EF 0%,#F4EADD 100%);
  text-align:center;
}

.recibo-selo{
  display:grid;
  place-items:center;
  width:3.2rem;
  height:3.2rem;
  border-radius:50%;
  border:1px solid var(--folha);
  color:var(--folha);
}

.recibo-titulo{
  font-family:var(--serif-display);
  font-size:1.35rem;
  letter-spacing:.04em;
}

.recibo-texto{
  font-style:italic;
  color:var(--tinta-suave);
  font-size:.98rem;
}

/* ---------- momento da programação ---------- */

.momento{
  display:grid;
  gap:.55rem;
  justify-items:center;
  padding:2.4rem 0;
  text-align:center;
}

.momento + .momento{border-top:1px solid var(--duna)}

.momento .hora{
  font-family:var(--serif-display);
  font-size:clamp(2.1rem,9vw,2.9rem);
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}

/* quando o horário é uma expressão e não um número, o peso cai */
.momento .hora--texto{
  font-size:clamp(1.4rem,5.5vw,1.8rem);
  font-style:italic;
  letter-spacing:.03em;
  color:var(--tinta-suave);
}

.momento .local{
  font-family:var(--serif-display);
  font-size:1.22rem;
  letter-spacing:.03em;
  line-height:1.35;
}

.momento .endereco{
  font-style:italic;
  font-size:.95rem;
  color:var(--tinta-suave);
}

.momento .botao{margin-top:.5rem}

/* ---------- formulário: pilha de campos ---------- */

.formulario{
  display:grid;
  gap:1.1rem;
  width:100%;
  text-align:left;
}

/* ---------- relógio da contagem regressiva ---------- */

.relogio{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  max-width:26rem;
}

.relogio div{
  display:grid;
  gap:.35rem;
  justify-items:center;
  padding:0 .3rem;
}

.relogio div + div{border-left:1px solid rgba(155,132,113,.45)}

.relogio b{
  font-family:var(--serif-display);
  font-weight:400;
  font-size:clamp(1.7rem,8vw,2.4rem);
  font-variant-numeric:tabular-nums;
  line-height:1;
  color:var(--tinta);
}

.relogio small{
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}

/* ---------- destaque: uma linha que precisa ser lida de longe ---------- */

.destaque{
  font-family:var(--serif-display);
  font-size:clamp(1.5rem,6vw,2rem);
  letter-spacing:.06em;
  line-height:1.2;
}

/* ---------- citação: a voz dos noivos ---------- */

.citacao{
  display:grid;
  gap:1rem;
  margin:0;
}

.citacao p{
  font-size:clamp(1.12rem,1rem + .9vw,1.38rem);
  font-style:italic;
  line-height:1.6;
  color:var(--tinta);
  text-wrap:pretty;
}

.citacao footer{
  font-family:var(--script);
  font-size:1.6rem;
  line-height:1;
  color:var(--argila);
}

/* ---------- presentes ---------- */

/* a chave Pix: caixa que se copia com um toque */
.pix{
  display:grid;
  gap:.7rem;
  justify-items:center;
  width:100%;
  padding:1.6rem 1.2rem;
  border:1px solid var(--duna);
  background:var(--branco);
  text-align:center;
}

.pix-chave{
  font-family:var(--serif-display);
  font-size:clamp(1rem,4.2vw,1.2rem);
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}

.pix-titular{font-size:.9rem;color:var(--tinta-suave);font-style:italic}

/* as divisórias são bordas dos próprios cartões, e não o fundo da grade:
   assim uma última linha incompleta não deixa um bloco vazio pintado */
.presentes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));   /* dois por linha já no celular */
  width:100%;
  border-top:1px solid var(--duna);
  border-left:1px solid var(--duna);
}

.presente{
  display:grid;
  grid-template-rows:1fr auto auto;
  gap:.6rem;
  justify-items:center;
  padding:1.4rem .7rem 1.2rem;
  border-right:1px solid var(--duna);
  border-bottom:1px solid var(--duna);
  background:var(--branco);
  text-align:center;
}

.presente-nome{
  font-family:var(--serif-display);
  font-size:1.08rem;
  letter-spacing:.02em;
  line-height:1.3;
  text-wrap:balance;
}

.presente-valor{
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.18em;
  color:var(--argila);
  font-variant-numeric:tabular-nums;
}

.presente .botao{padding:.55rem .9rem;font-size:.72rem;letter-spacing:.2em}

/* janela que abre por cima da página (presentear um item) */
.janela{
  width:min(100% - 2rem,27rem);
  max-height:calc(100dvh - 2rem);
  overflow:auto;
  padding:0;
  border:1px solid var(--duna);
  background:var(--areia-clara);
  color:var(--tinta);
  box-shadow:0 24px 60px -20px rgba(47,40,31,.45);
}

.janela::backdrop{background:rgba(47,40,31,.45)}

.janela-corpo{
  display:grid;
  gap:1.1rem;
  padding:2rem 1.4rem 1.6rem;
  text-align:center;
}

.janela-corpo .filete,
.janela-corpo .recibo-selo{justify-self:center}

.janela-fechar{
  justify-self:end;
  margin:-1rem -.6rem 0 0;
  padding:.3rem .6rem;
  border:0;
  background:transparent;
  color:var(--argila);
  font:inherit;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}

.passos{
  margin:0;
  padding-left:1.2rem;
  text-align:left;
  font-size:.95rem;
  color:var(--tinta-suave);
  display:grid;
  gap:.3rem;
}

/* ---------- resumo: números grandes do painel ---------- */

.resumo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:1px;
  background:var(--duna);
  border:1px solid var(--duna);
}

.resumo div{
  display:grid;
  gap:.3rem;
  justify-items:center;
  padding:1.4rem .8rem;
  background:var(--branco);
  text-align:center;
}

.resumo b{
  font-family:var(--serif-display);
  font-weight:400;
  font-size:2.3rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.resumo .recusas b{color:var(--recusa)}

.resumo small{
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--argila);
}

/* ---------- pastilha: selo de situação ---------- */

.pastilha{
  display:inline-block;
  padding:.15rem .6rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid currentColor;
  white-space:nowrap;
}

.pastilha--sim{color:var(--folha-escura)}
.pastilha--nao{color:var(--recusa)}

/* ---------- tabela (vira ficha no celular) ---------- */

.rolagem{overflow-x:auto;border:1px solid var(--duna);background:var(--branco)}

.tabela{border-collapse:collapse;width:100%;min-width:34rem}

.tabela caption{
  padding:.9rem 1rem;
  text-align:left;
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--argila);
  border-bottom:1px solid var(--duna);
}

.tabela th,
.tabela td{
  padding:.7rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--areia);
  vertical-align:top;
}

.tabela th{
  font-family:var(--serif-texto);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--argila);
  white-space:nowrap;
}

.tabela tbody tr:last-child td{border-bottom:0}

.tabela td.qtd{font-variant-numeric:tabular-nums;text-align:right;width:1%;white-space:nowrap}
.tabela td.quando{color:var(--tinta-suave);font-size:.88rem;white-space:nowrap}
.tabela td.recado{font-style:italic;color:var(--tinta-suave);font-size:.92rem}

.vazio{padding:2.5rem 1rem;text-align:center;font-style:italic;color:var(--tinta-suave)}

.nota{font-size:.85rem;color:var(--tinta-suave);text-align:center;margin:0}

@media (max-width:44rem){
  .tabela{min-width:0}

  /* o cabeçalho some da vista, mas continua para leitores de tela */
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}

  .tabela tbody tr{
    display:grid;
    gap:.45rem;
    padding:1.1rem 1rem;
    border-bottom:1px solid var(--areia);
  }

  .tabela tbody tr:last-child{border-bottom:0}

  .tabela tbody td{
    display:grid;
    grid-template-columns:6.5rem 1fr;
    gap:.7rem;
    align-items:baseline;
    padding:0;
    border:0;
  }

  /* a etiqueta é sempre reta, mesmo quando o conteúdo é em itálico */
  .tabela tbody td::before{
    content:attr(data-rotulo);
    font-family:var(--serif-texto);
    font-style:normal;
    font-weight:600;
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--argila);
  }

  /* o nome abre a ficha, em corpo maior e sem etiqueta */
  .tabela tbody td.nome{
    grid-template-columns:1fr;
    font-family:var(--serif-display);
    font-size:1.12rem;
    padding-bottom:.2rem;
  }
  .tabela tbody td.nome::before{content:none}

  /* a pastilha é um selo, não uma faixa: não pode esticar na célula */
  .tabela tbody td .pastilha{justify-self:start}

  .tabela td.qtd{text-align:left;width:auto}
  .tabela td.quando{white-space:normal}

}

/* ---------- rodapé ---------- */

.rodape{
  display:grid;
  gap:.9rem;
  justify-items:center;
  padding:3.5rem 1.6rem 4rem;
  text-align:center;
  background:var(--branco);
  border-top:1px solid var(--areia);
}

.rodape .monograma{font-size:2.4rem;color:var(--duna)}

.rodape p{font-size:.8rem;letter-spacing:.12em;color:var(--argila)}

/* ---------- movimento reduzido ---------- */

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