/* =====================================================================
   Legibilidade — palavra inteira, sempre.
   =====================================================================

   O site cortava palavra no meio no celular: "CONVITE OFICIAL" saía como
   "CONVITE OFI-CIAL". Vinham de duas regras espalhadas pelos CSS:

     hyphens: auto          -> o navegador parte a palavra e põe o hífen
     overflow-wrap: anywhere -> parte em qualquer ponto, mesmo havendo
                                espaço onde quebrar naturalmente

   As duas foram removidas na origem. Este arquivo é a garantia de que
   não voltam: entra em todas as páginas e fixa o comportamento.

   A escolha aqui é "break-word", não "normal". A diferença importa: com
   "normal", um texto sem espaço nenhum — um e-mail comprido, um link —
   estoura a largura da tela e cria rolagem lateral. Com "break-word" a
   palavra comum nunca se parte, e só o que não caberia de jeito nenhum
   é quebrado. É o meio certo entre não cortar e não estourar.
   ===================================================================== */

:root {
    /* Nenhuma palavra é dividida com hífen automático em lugar nenhum. */
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}

body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
label, button, figcaption,
.section-title, .page-title, .header-title h1,
.convite-header, .convite-text, .dish-name, .dish-desc,
.emphasis, .page-subtitle {
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    overflow-wrap: break-word;
    word-break: normal;
}

/* -----------------------------------------------------------------
   Títulos: quando não couberem numa linha, quebram no espaço e as
   linhas saem equilibradas, em vez de deixar uma palavra solta
   embaixo. "CONVITE OFICIAL" vira "CONVITE" / "OFICIAL", inteiro.

   text-wrap: balance é entendido pelos navegadores atuais; onde não
   for, o texto simplesmente quebra do jeito comum — nada quebra.
   ----------------------------------------------------------------- */
h1, h2, h3,
.section-title, .page-title, .convite-header {
    text-wrap: balance;
}

/* Parágrafo: evita a última linha com uma palavra sozinha. */
p, .convite-text, .dish-desc {
    text-wrap: pretty;
}

/* -----------------------------------------------------------------
   Leitura no celular.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Título grande com espaçamento largo é o que mais empurra a
       palavra para fora da linha. No celular o espaçamento cede um
       pouco — o desenho continua, e o texto passa a caber. */
    h1, .section-title, .page-title {
        letter-spacing: clamp(.5px, .4vw, 2px);
    }

    /* Endereço, e-mail e link são os únicos que podem precisar quebrar
       no meio: não têm espaço onde quebrar. */
    a[href^="mailto:"],
    a[href^="http"],
    code, kbd, samp {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* =====================================================================
   Cor de texto padrão

   O corpo do site não definia cor de texto, então tudo que não recebia
   cor explícita herdava o preto padrão do navegador — preto sobre um
   site preto. Foi assim que o aviso "Seus dados estão protegidos..." na
   página de reservas ficou invisível: a regra que dá cor a ele mora no
   CSS do checkout, que aquela página não carrega.

   Definir a cor da casa aqui fecha a classe inteira do problema: nenhum
   texto pode mais sumir por falta de regra. Quem já tem cor própria
   continua com a dela — isto é só o piso.
   ===================================================================== */
body {
    color: #EAE3D2;
}

/* Texto de apoio: menor e mais discreto, mas ainda legível.
   #8d6e63 sobre o fundo da casa dá 4,0 de contraste — abaixo do mínimo
   de 4,5 para texto pequeno. Este tom mantém a intenção e passa. */
.form-note,
.footer-desc,
.hint,
small {
    color: #b39a86;
}

/* =====================================================================
   Foco visível

   Seis arquivos aplicam "outline: none" em campos e botões sem colocar
   nada no lugar. Quem navega por teclado fica sem saber onde está — e
   é exigência da norma que dê para ver.

   O anel usa o dourado da casa, não o azul do navegador, então o
   desenho continua sendo o do Exotic. :focus-visible aparece só na
   navegação por teclado; o clique de mouse não acende nada, que é o
   comportamento esperado.

   !important aqui é deliberado: é a única forma de vencer os
   "outline: none" espalhados sem reescrever seis arquivos e correr o
   risco de desfazer estilo de campo.
   ===================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #ffdf73 !important;
    outline-offset: 3px !important;
    /* O segundo anel escuro garante o contraste mesmo quando o foco cai
       sobre a moldura dourada, onde só o anel claro sumiria. */
    box-shadow: 0 0 0 6px rgba(5, 2, 1, .92) !important;
    border-radius: 3px;
}

/* Sem foco no clique de mouse: mantém o visual limpo. */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
    outline: none;
}

/* -----------------------------------------------------------------
   Pular para o conteúdo — primeiro item do teclado em cada página.
   Invisível até receber foco.
   ----------------------------------------------------------------- */
.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #050201;
    color: #ffdf73;
    border: 2px solid #ffdf73;
    font-family: 'Cinzel', serif;
    font-size: .85rem;
    letter-spacing: 1px;
    text-decoration: none;
}

.pular-para-conteudo:focus {
    left: 12px;
    top: 12px;
}

/* -----------------------------------------------------------------
   Movimento reduzido: quem pediu para o sistema não animar, não anima.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}