/* ==========================================================================
   IDENTIDADE VISUAL DO CONVITE
   Serra do Cipó Praia Adventure

   Este arquivo entra só nas páginas do convite e do check-in. Ele carrega as
   fontes locais e define as variáveis que o plugin consome. Trocar a paleta
   do projeto inteiro é mexer no bloco :root abaixo.

   Direção, tirada da arte executiva aprovada: azul petróleo como estrutura,
   turquesa como cor de interação, champagne em detalhe fino, fundos claros
   para respiro, e o verde da marca reservado a acentos pequenos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes locais. Servidas do próprio servidor: um pedido a menos no caminho
   crítico, e o endereço de quem abre o convite não vai para um terceiro.
   -------------------------------------------------------------------------- */
@font-face{
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff') format('woff');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Lora';
  src: url('../fonts/Lora-Variable.woff') format('woff');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   Paleta e tipografia do projeto
   -------------------------------------------------------------------------- */
:root{
  --sdc-petroleo:       #062231;
  --sdc-azul-profundo:  #05182B;
  --sdc-azul:           #123F5A;
  --sdc-azul-vibrante:  #1B7FB8;
  --sdc-turquesa:       #17B9C4;
  --sdc-areia:          #EAE2D4;
  --sdc-champagne:      #C9A961;
  --sdc-claro:          #E4EEF3;
  --sdc-claro-2:        #9FBACB;
  --sdc-sans:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sdc-serif: 'Lora', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   Palco
   -------------------------------------------------------------------------- */
body.sdc-tela-cheia{
  font-family: var(--sdc-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--sdc-petroleo);
}
body.sdc-tela-cheia #sdc-conteudo{ min-height: 100vh; min-height: 100svh; }

/* O painel do anfitrião é tela de trabalho, e trabalha em fundo claro. Sem
   isso ele herda o petróleo do convite e aparece uma faixa escura embaixo
   sempre que a lista é curta. */
body.sdc-tela-painel{ background: #F1F5F7; }

/* A tela de check-in também é tela de trabalho, e desde a versão 3.4.0 ela é
   clara. Sem esta linha ela herda o petróleo do convite e aparece uma faixa
   escura embaixo sempre que a lista da portaria é curta. */
body.sdc-tela-recepcao{ background: #F3EFE6; }

/* Atalho de teclado, visível só quando recebe o foco. */
.sdc-pular{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sdc-turquesa); color: var(--sdc-petroleo);
  padding: 12px 18px; border-radius: 0 0 4px 0;
  font-family: var(--sdc-sans); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.sdc-pular:focus{ left: 0; }

/* Rolagem suave entre as âncoras, respeitando quem pediu menos movimento. */
@media (prefers-reduced-motion: no-preference){
  html:has(body.sdc-tela-cheia){ scroll-behavior: smooth; }
}
body.sdc-tela-cheia [id]{ scroll-margin-top: 16px; }

/* O convite dentro de uma página comum do Astra, caso alguém use o shortcode
   sem o modelo de tela cheia. Sem isso, as seções sangradas ficariam presas
   na coluna de conteúdo do tema. */
.page .entry-content > .sdc{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* --------------------------------------------------------------------------
   Camada editorial: os detalhes de acabamento sobre o que o plugin monta.
   -------------------------------------------------------------------------- */

/* Um cartão levanta de leve ao receber o ponteiro. Só isso: hierarquia se
   faz com espaço e tipografia, não com efeito. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .sdc-cartao{ transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
  .sdc-cartao:hover{
    transform: translateY(-3px);
    border-color: rgba(201,169,97,.5);
  }
  .sdc-cartao__midia img{ transition: transform .9s cubic-bezier(.2,.7,.3,1); }
  .sdc-cartao:hover .sdc-cartao__midia img{ transform: scale(1.03); }
}

/* Foco visível em toda a tela cheia, inclusive nos elementos do Astra. */
body.sdc-tela-cheia a:focus-visible,
body.sdc-tela-cheia button:focus-visible,
body.sdc-tela-cheia input:focus-visible,
body.sdc-tela-cheia select:focus-visible,
body.sdc-tela-cheia textarea:focus-visible{
  outline: 3px solid var(--sdc-turquesa);
  outline-offset: 3px;
}

/* Impressão: o que interessa no papel é o convite, não a página de venda. */
@media print{
  #sdc-barra, .sdc-pular, .sdc-arte__fundo, .sdc-arte__veu,
  .sdc-cartao__midia, .sdc-contagem, .sdc-parceiros{ display: none !important; }
  body.sdc-tela-cheia{ background: #fff; color: #000; }
  .sdc-palco{ display: block !important; }
  .sdc-palco__arte{
    position: static !important; height: auto !important; min-height: 0 !important;
    background: #fff !important; color: #000 !important;
  }
  .sdc-palco__fluxo{ padding: 0 !important; background: #fff !important; }
  .sdc-cartao{
    break-inside: avoid; box-shadow: none !important;
    background: #fff !important; color: #000 !important;
    border-color: #ccc !important;
  }
  .sdc-titulo, .sdc-arte__titulo{ color: #000 !important; }
}