/* main.css - Main Stylesheet for Difference Consulting *
/* Custom Styles and Overrides */

/* Decorative Elements */
.decorative-blur {
  position: absolute;
  border-radius: 100%;
  filter: blur(60px);
  opacity: 0.15;
  z-index: 1;
}

.decorative-line {
  position: absolute;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.decorative-dot {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* Lucide Icons */
.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-xl {
  width: 48px;
  height: 48px;
}

/* Grayscale Filters */
.grayscale {
  filter: grayscale(100%);
}

.grayscale-hover {
  transition: filter 0.5s ease;
}

.grayscale-hover:hover {
  filter: grayscale(0%);
}

/* Contrast Filters */
.high-contrast {
  filter: contrast(120%);
}
/* Section Enhancements */
.section.section-pattern {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
}

.section.section-noise {
  position: relative;
}

.section.section-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

/* Card Grid Responsive Adjustments */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .service-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .faq-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Hero Section Specific Styles */
.hero-content-container {
  position: relative;
  z-index: 10;
}

.hero-decorative-shape {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 30px;
  transform: rotate(45deg);
  z-index: 1;
}

/* Enhanced Form Styles */
.form-control.error {
  border-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.02);
}

.form-error-message {
  font-size: 0.75rem;
  color: var(--color-gray-800);
  margin-top: 0.25rem;
}

/* Enhanced Button Styles */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-gray-100);
  color: var(--color-black);
  transition: var(--transition-default);
}

.btn-icon:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Custom Utility Classes */
.mono-image {
  filter: grayscale(100%) contrast(110%);
  transition: filter 0.5s ease;
}

.mono-image:hover {
  filter: grayscale(80%) contrast(120%);
}

.border-hover {
  transition: border-color 0.3s ease;
}

.border-hover:hover {
  border-color: var(--color-black);
}

.text-balance {
  text-wrap: balance;
}

/* Print Styles */
@media print {
  .header, 
  .footer,
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }
  
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  
  .card,
  .contact-form,
  .contact-info,
  .faq-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}