/*
 * Ajustes próprios sobre o tema (main.css é minificado e não bate com scss/).
 * Motivo principal: contraste mínimo WCAG AA (4.5:1) apontado pelo Lighthouse.
 */

/* Texto corrido: #777 dava 4.0–4.47:1 sobre branco/cinza claro */
body,
.title p {
  color: #595959;
}

::placeholder {
  color: #595959;
}

/* Laranja da marca (#f4ac2a) com texto branco dava 1.94:1 -> texto escuro */
.primary-btn,
.primary-btn:hover,
.primary-btn span,
.menu-area .primary-btn,
.genric-btn.primary {
  color: #222;
}

.genric-btn.primary:hover {
  color: #222;
}

/* Hero: altura fixa em CSS. Antes o main.js ajustava a altura via JS depois do
   primeiro paint, empurrando o resto da página (CLS). */
.banner-area .fullscreen {
  height: 100vh;
}

/* Fundos em WebP (com fallback JPG do main.css para navegadores antigos) */
.banner-area {
  background-image: url(../img/hero-costela.jpg);
  background-image: image-set(url(../img/hero-costela.webp) type('image/webp'), url(../img/hero-costela.jpg) type('image/jpeg'));
}

@media (max-width: 767px) {
  .banner-area {
    background-image: url(../img/hero-costela-mobile.webp);
  }
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Logo do cabeçalho em "neon": brilho amarelo no logo inteiro e o "C" inicial
   e o "A" de "BAR" com mau contato, piscando de tempos em tempos (Header.astro).
   O brilho fica no wrapper para não ser cortado pelo clip-path das imagens.
   No logo.png (150x34): o "C" ocupa os primeiros 17px; o "A" de "BAR" vai de
   x=70 a x=79.5 e de y=22.5 até o fim. A base esconde os dois (o "A" é um furo
   no polígono, por isso o evenodd). */
.logo-neon {
  position: relative;
  display: inline-block;
  line-height: 0;
  filter: drop-shadow(0 0 1px rgba(255, 255, 160, 0.9)) drop-shadow(0 0 5px rgba(255, 230, 0, 0.75))
    drop-shadow(0 0 12px rgba(255, 196, 0, 0.45));
}

.logo-neon-base {
  clip-path: polygon(
    evenodd,
    11.33% 0, 100% 0, 100% 100%, 11.33% 100%, 11.33% 0,
    46.67% 66.18%, 53% 66.18%, 53% 110%, 46.67% 110%, 46.67% 66.18%
  );
}

.logo-neon-letter {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 88.67% 0 0);
  animation: logo-neon-flicker 7s 1.5s linear infinite;
}

/* ritmo diferente do "C" para os dois não piscarem juntos */
.logo-neon-a {
  clip-path: inset(66.18% 47% 0 46.67%);
  animation: logo-neon-flicker 9.5s 3.8s linear infinite;
}

@keyframes logo-neon-flicker {
  0%, 60% { opacity: 1; }
  61% { opacity: 0.12; }
  62% { opacity: 1; }
  64% { opacity: 0.12; }
  67% { opacity: 0.12; }
  68% { opacity: 0.8; }
  69% { opacity: 0.12; }
  72% { opacity: 1; }
  88% { opacity: 1; }
  89% { opacity: 0.12; }
  90%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-neon-letter {
    animation: none;
  }
}

/* Cursor do mouse: copo americano com chimboca; sobre links e botões o copo
   inclina num "brinde". O valor depois da URL é o cursor padrão de reserva. */
html {
  cursor: url(../img/cursor-copo.svg) 5 3, auto;
}

a,
button,
label,
select,
summary,
[role='button'],
.btn,
.primary-btn,
.genric-btn,
.nice-select,
#mobile-nav-toggle,
.intro-skip {
  cursor: url(../img/cursor-copo-brinde.svg) 2 8, pointer !important;
}

input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']),
textarea {
  cursor: text;
}