/* ==========================================================================
   Espaço Casinha de Rodas — Design System & Custom Styles
   ========================================================================== */

:root {
  /* Kids Theme (Festa Infantil) */
  --kids-primary: #E2583E;
  --kids-primary-hover: #CC442A;
  --kids-secondary: #F5A623;
  --kids-accent: #3A7F57;
  --kids-fun: #2086D6;
  --kids-bg: #FCF9F4;
  --kids-surface: #FFFFFF;
  --kids-text: #2D231E;
  --kids-muted: #6E5D53;
  --kids-border: #F0E8DD;

  /* Lounge / Eventos Theme (Locação de Espaço) */
  --lounge-primary: #2C4A3E;
  --lounge-primary-hover: #1E342B;
  --lounge-accent: #D97736;
  --lounge-accent-hover: #BF6224;
  --lounge-gold: #C89B3C;
  --lounge-bg: #FAF8F5;
  --lounge-surface: #FFFFFF;
  --lounge-dark: #19221E;
  --lounge-text: #232725;
  --lounge-muted: #626D68;
  --lounge-border: #E8E3DC;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--kids-text);
  background-color: var(--kids-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* Typography Headings */
h1, h2, h3, h4, .font-display {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

.font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Fluid Line Lengths and Balance */
h1, h2, h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Smooth Shadows */
.shadow-soft {
  box-shadow: 0 10px 30px -5px rgba(45, 35, 30, 0.06), 0 4px 10px -2px rgba(45, 35, 30, 0.03);
}

.shadow-warm {
  box-shadow: 0 18px 40px -10px rgba(226, 88, 62, 0.18), 0 8px 16px -6px rgba(226, 88, 62, 0.1);
}

.shadow-lounge {
  box-shadow: 0 20px 45px -12px rgba(44, 74, 62, 0.15), 0 8px 18px -4px rgba(44, 74, 62, 0.08);
}

/* WhatsApp Floating & Pulse */
@keyframes pulse-subtle {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.pulse-wa {
  animation: pulse-subtle 2.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Sticky Header Navigation & Glassmorphism */
.glass-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-header.is-scrolled {
  background: rgba(253, 251, 247, 0.98);
  box-shadow: 0 6px 20px -2px rgba(45, 35, 30, 0.1);
}

.glass-header-lounge {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(250, 248, 245, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-header-lounge.is-scrolled {
  background: rgba(250, 248, 245, 0.98);
  box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.2);
}

/* Interactive Elements */
.badge-cortesia {
  background: linear-gradient(135deg, #FFF1E6 0%, #FFE3D1 100%);
  color: #C3452E;
  border: 1px solid #FFD0B5;
}

.badge-exclusivo {
  background: linear-gradient(135deg, #EBF5EE 0%, #D8EDE0 100%);
  color: #2D6B45;
  border: 1px solid #C1E4CE;
}

.badge-destaque {
  background: linear-gradient(135deg, #FEF7E6 0%, #FDEBC3 100%);
  color: #B5740D;
  border: 1px solid #F9DDA2;
}

/* Interactive Card Tabs */
.cardapio-tab.active {
  background-color: var(--kids-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(226, 88, 62, 0.3);
}

.cardapio-tab:not(.active) {
  background-color: #FFFFFF;
  color: var(--kids-muted);
}
.cardapio-tab:not(.active):hover {
  background-color: #F8EFE4;
  color: var(--kids-text);
}

/* Gallery Hover Zoom */
.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
}
.gallery-card img {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-card:hover img {
  transform: scale(1.05);
}

/* Lightbox Modal */
#lightboxModal.open {
  display: flex !important;
  opacity: 1;
}

/* Accordion FAQ */
.faq-item {
  transition: all 0.25s ease;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
}
.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Footer Pattern Background */
.footer-pattern {
  background-image: url('../images/padrao-rodape.jpg');
  background-repeat: repeat;
  background-size: 260px 260px;
}

/* ==========================================================================
   Navigation Menu Palette Hovers (Extracted from Footer Pattern Image)
   ========================================================================== */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.875rem;
  font-weight: 700;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  color: #2D231E;
}

/* Hover Palettes matching footer pattern */
.nav-pill-olive:hover {
  background-color: #8CB63D !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(140, 182, 61, 0.38);
  transform: translateY(-2px);
}

.nav-pill-turquoise:hover {
  background-color: #1AA6B7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(26, 166, 183, 0.38);
  transform: translateY(-2px);
}

.nav-pill-orange:hover {
  background-color: #FA6928 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(250, 105, 40, 0.38);
  transform: translateY(-2px);
}

.nav-pill-magenta:hover {
  background-color: #E6007A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(230, 0, 122, 0.38);
  transform: translateY(-2px);
}

.nav-pill-mustard:hover {
  background-color: #ECA824 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(236, 168, 36, 0.38);
  transform: translateY(-2px);
}

.nav-pill-lilac:hover {
  background-color: #9C6285 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(156, 98, 133, 0.38);
  transform: translateY(-2px);
}

.nav-pill-terracotta:hover {
  background-color: #9A4F53 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(154, 79, 83, 0.38);
  transform: translateY(-2px);
}


/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}