/*
Theme Name: Thermo Kalora
Description: Custom theme for Thermo Kalora with exact styling preservation
Version: 1.0
*/

/* Import Tailwind CSS */
@import url('https://cdn.tailwindcss.com');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body { 
  font-family: 'Inter', sans-serif; 
  scroll-behavior: smooth;
}

.horizontal-scroller::-webkit-scrollbar { 
  height: 8px; 
}

.horizontal-scroller::-webkit-scrollbar-track { 
  background: #f1f5f9; 
}

.horizontal-scroller::-webkit-scrollbar-thumb { 
  background: #fd4000; 
  border-radius: 4px; 
}

.horizontal-scroller::-webkit-scrollbar-thumb:hover { 
  background: #e43900; 
}

.revealable { 
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}

.revealable.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
}

@keyframes breathing { 
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.2; 
  } 
  50% { 
    transform: scale(1.2); 
    opacity: 0.3; 
  } 
}

.animate-breathing { 
  animation: breathing 8s ease-in-out infinite; 
}

.svg-filters { 
  position: absolute; 
  width: 0; 
  height: 0; 
  overflow: hidden; 
}

.paint-texture-wrapper { 
  position: relative; 
  z-index: 1; 
}

.paint-texture-wrapper::before { 
  content: ''; 
  position: absolute; 
  top: -12px; 
  left: -12px; 
  right: -12px; 
  bottom: -12px; 
  background-color: white; 
  z-index: -1; 
  filter: url(#paint-texture-filter); 
  opacity: 0.7; 
}

/* WordPress specific styles */
.thermokalora-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .thermokalora-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .thermokalora-container {
    padding: 0 2rem;
  }
}
/* Desktop Submenu Styles */
.desktop-menu .menu-item-has-children {
    position: relative;
}

.desktop-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    padding: 8px 0;
}

.desktop-menu .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.desktop-menu .sub-menu li {
    display: block;
    margin: 0;
}

.desktop-menu .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: #4a5568;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.desktop-menu .sub-menu a:hover {
    background-color: #f7fafc;
    color: #032e77;
}

/* Mobile submenu styles */
.mobile-menu .menu-item-has-children > a {
    position: relative;
}

.mobile-menu .menu-item-has-children > a::after {
    content: '+';
    position: absolute;
    right: 15px;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.mobile-menu .menu-item-has-children.active > a::after {
    transform: rotate(45deg);
}

.mobile-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 20px;
}

.mobile-menu .menu-item-has-children.active .sub-menu {
    max-height: 500px;
}
/* Enhanced scroll reveal animations */
.revealable {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.revealable.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations for children */
.revealable.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.revealable.is-visible.stagger-children > * {
    opacity: 1;
    transform: translateY(0);
}

/* Individual transition delays */
.revealable.delay-100 { transition-delay: 100ms; }
.revealable.delay-200 { transition-delay: 200ms; }
.revealable.delay-300 { transition-delay: 300ms; }
.revealable.delay-400 { transition-delay: 400ms; }
.revealable.delay-500 { transition-delay: 500ms; }
.revealable.delay-600 { transition-delay: 600ms; }
.revealable.delay-700 { transition-delay: 700ms; }
.revealable.delay-800 { transition-delay: 800ms; }

/* For immediate children in grid layouts */
.stagger-grid > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stagger-grid.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}