/*
Theme Name: CBVans Theme
Theme URI: https://cbvans.com.br
Author: Manus
Author URI: https://manus.im
Description: Tema personalizado para CBVans, convertido de React para WordPress.
Version: 1.0
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 91%; /* #E8E8E8 */
    --foreground: 0 0% 31%; /* #505050 */

    --card: 0 0% 100%;
    --card-foreground: 0 0% 31%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 31%;
 
    --primary: 90 0% 35%; /* #5A5A5A - Cinza Escuro (Topo) */
    --primary-foreground: 0 0% 100%;
 
    --secondary: 120 11% 74%; /* #B4C4B4 - Verde Acinzentado Claro */
    --secondary-foreground: 0 0% 31%;
 
    --muted: 33 9% 80%; /* #D1CCC6 - Bege Acinzentado Claro */
    --muted-foreground: 0 0% 44%; /* #707070 - Cinza Médio */
 
    --accent: 120 6% 68%; /* #A8B4A8 - Verde Acinzentado Médio */
    --accent-foreground: 0 0% 100%;
 
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 33 9% 80%;
    --input: 33 9% 80%;
    --ring: 120 11% 74%;
 
    --radius: 0.5rem;

    --font-sans: "Roboto", sans-serif;
    --font-display: "Rajdhani", sans-serif;
  }
 
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-display font-bold tracking-wide;
  }
}

@layer components {
  .container {
    @apply mx-auto px-4 md:px-6 lg:px-8 max-w-7xl;
  }
  
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2;
  }

  .technical-text {
    @apply font-mono text-xs tracking-[0.2em] uppercase text-muted-foreground;
  }
}

/* Custom Animations */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mobile Menu Transitions */
.mobile-menu-enter {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu-enter-active {
  transform: translateX(0);
}

.mobile-menu-exit {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu-exit-active {
  transform: translateX(100%);
}

/* Image Hover Effects */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.group:hover .group-hover\:bg-black\/40 {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Fix for WordPress Admin Bar */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* Carousel Styles */
.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}

/* Gallery Filter Styles */
.gallery-filter-btn.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Background Images */
.bg-hero {
  background-image: url('assets/assets/hero-new.jpeg');
  background-size: cover;
  background-position: center 30%;
}

@media (max-width: 768px) {
  .bg-hero {
    background-position: center 20%;
  }
}

/* Technical Grid Overlay */
.technical-grid {
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 50px 50px;
}