/*
Theme Name: Heer Digital - updated
Description: A modern WordPress theme for Heer Digital, converted from React/Lovable with ACF integration
Version: 1.0.2
Author: Heer Digital
Text Domain: heer-digital
*/

/* Custom CSS Variables - Exact replication of Lovable theme */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
  --carbon-grey: 220 13% 18%;
}

/* Dark theme - Exact replication */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
  --carbon-grey: 220 13% 18%;
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* WordPress specific styles */
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.aligncenter {
  text-align: center;
}

.alignleft {
  float: left;
  margin-right: 1rem;
}

.alignright {
  float: right;
  margin-left: 1rem;
}

/* Custom Heer Digital brand color */
.heer-cyan {
  color: #08dcfc;
}

.heer-cyan-bg {
  background-color: #08dcfc;
}

/* Carbon grey background */
.bg-carbon-grey {
  background-color: hsl(var(--carbon-grey));
}

/* Animation classes */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.animate {
  opacity: 1;
  transform: translateY(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-right.animate {
  opacity: 1;
  transform: translateX(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-left.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Clutch Widget Final Fixes for Chrome Vertical Clipping */
.clutch-widget {
  width: 100% !important;
  max-width: 768px !important;
  margin: 0 auto !important;
  display: block !important;
  transform: translateZ(0);
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  padding-bottom: 80px; /* reserve space for slider controls */
}

#clutch-container {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.clutch-widget iframe {
  width: 100% !important;
  min-height: 375px !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  border: none !important;
  transform: translateZ(0);
}

/* Responsive refinements */
@media (max-width: 768px) {
  .clutch-widget {
    max-width: 100% !important;
    padding: 0 1rem 80px;
  }
}

@media (max-width: 480px) {
  .clutch-widget {
    padding: 0 0.5rem 80px;
  }
}