/* PPCC Website Theme - Indian National Congress Colors */
/* Professional Political Campaign Design */

:root {
  /* Color Palette - Congress Party Branding */
  --background: oklch(0.9900 0 0); /* Near white background */
  --foreground: oklch(0.2000 0 0); /* Dark gray text */
  --card: oklch(1.0000 0 0); /* Pure white cards */
  --card-foreground: oklch(0.2000 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.2000 0 0);

  /* Primary - Congress Blue #0F55A5 */
  --primary: oklch(0.4200 0.1500 250.0000); /* Congress Blue */
  --primary-foreground: oklch(1.0000 0 0); /* White text on blue */
  --primary-hover: oklch(0.3600 0.1500 250.0000); /* Darker blue on hover */

  /* Secondary - Saffron/Orange Accent */
  --secondary: oklch(0.7200 0.1800 45.0000); /* Saffron orange */
  --secondary-foreground: oklch(1.0000 0 0);

  /* Accent - Light Blue for highlights */
  --accent: oklch(0.9200 0.0500 250.0000); /* Light blue tint */
  --accent-foreground: oklch(0.2500 0.1200 250.0000); /* Congress blue text */

  /* Muted - Subtle backgrounds */
  --muted: oklch(0.9600 0 0); /* Light gray */
  --muted-foreground: oklch(0.4500 0 0); /* Medium gray */

  /* Success - Green for achievements */
  --success: oklch(0.6000 0.1500 145.0000);
  --success-foreground: oklch(1.0000 0 0);

  /* Destructive/Error - Red */
  --destructive: oklch(0.5500 0.2200 25.0000);
  --destructive-foreground: oklch(1.0000 0 0);

  /* Borders and Inputs */
  --border: oklch(0.8800 0 0); /* Light gray border */
  --input: oklch(0.9200 0 0);
  --ring: oklch(0.4200 0.1500 250.0000); /* Congress blue focus ring */

  /* Chart Colors - Congress Theme */
  --chart-1: oklch(0.4200 0.1500 250.0000); /* Congress blue */
  --chart-2: oklch(0.7200 0.1800 45.0000); /* Saffron */
  --chart-3: oklch(0.6000 0.1500 145.0000); /* Green */
  --chart-4: oklch(0.9200 0.0500 250.0000); /* Light blue */
  --chart-5: oklch(0.3000 0 0); /* Dark gray */

  /* Sidebar (Mobile Menu) */
  --sidebar: oklch(0.4200 0.1500 250.0000); /* Congress blue background */
  --sidebar-foreground: oklch(1.0000 0 0); /* White text */
  --sidebar-primary: oklch(1.0000 0 0);
  --sidebar-primary-foreground: oklch(0.4200 0.1500 250.0000);
  --sidebar-accent: oklch(0.7200 0.1800 45.0000); /* Saffron accent */
  --sidebar-accent-foreground: oklch(1.0000 0 0);
  --sidebar-border: oklch(0.5000 0.1200 250.0000);
  --sidebar-ring: oklch(1.0000 0 0);

  /* Typography - Professional Political Website */
  --font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Merriweather', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Border Radius - Modern but Professional */
  --radius: 0.5rem; /* 8px - moderate roundness */

  /* Shadows - Subtle Elevation */
  --shadow-2xs: 0 1px 2px 0px hsl(222 47% 11% / 0.03);
  --shadow-xs: 0 1px 3px 0px hsl(222 47% 11% / 0.08);
  --shadow-sm: 0 2px 4px -1px hsl(222 47% 11% / 0.10), 0 1px 2px -1px hsl(222 47% 11% / 0.06);
  --shadow: 0 4px 6px -1px hsl(222 47% 11% / 0.10), 0 2px 4px -1px hsl(222 47% 11% / 0.06);
  --shadow-md: 0 6px 12px -2px hsl(222 47% 11% / 0.12), 0 3px 6px -2px hsl(222 47% 11% / 0.08);
  --shadow-lg: 0 10px 20px -4px hsl(222 47% 11% / 0.15), 0 4px 8px -2px hsl(222 47% 11% / 0.10);
  --shadow-xl: 0 20px 30px -6px hsl(222 47% 11% / 0.18), 0 8px 12px -4px hsl(222 47% 11% / 0.12);
  --shadow-2xl: 0 25px 50px -12px hsl(222 47% 11% / 0.25);

  /* Letter Spacing */
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;

  /* Spacing Scale */
  --spacing: 0.25rem; /* 4px base unit */

  /* Radius Variations */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 4px);
  --radius-xl: calc(var(--radius) + 8px);
  --radius-full: 9999px;

  /* Transition Speeds */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
}

/* Dark Mode Support (Optional - for night reading) */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.1500 0 0);
    --foreground: oklch(0.9500 0 0);
    --card: oklch(0.2000 0 0);
    --card-foreground: oklch(0.9500 0 0);

    --muted: oklch(0.2500 0 0);
    --muted-foreground: oklch(0.6500 0 0);

    --accent: oklch(0.3000 0.1200 250.0000);
    --accent-foreground: oklch(0.9200 0.0500 250.0000);

    --border: oklch(0.3000 0 0);
    --input: oklch(0.2500 0 0);
  }
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans) !important;
  background-color: hsl(from oklch(var(--background)) h s l) !important;
  color: hsl(from oklch(var(--foreground)) h s l) !important;
  line-height: 1.6 !important;
  font-size: 16px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: var(--tracking-tight) !important;
  color: hsl(from oklch(var(--foreground)) h s l) !important;
}

h1 {
  font-size: 3rem !important; /* 48px */
  font-weight: 800 !important;
}

h2 {
  font-size: 2.25rem !important; /* 36px */
  font-weight: 700 !important;
}

h3 {
  font-size: 1.75rem !important; /* 28px */
  font-weight: 600 !important;
}

h4 {
  font-size: 1.5rem !important; /* 24px */
}

h5 {
  font-size: 1.25rem !important; /* 20px */
}

h6 {
  font-size: 1.125rem !important; /* 18px */
}

p {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: hsl(from oklch(var(--muted-foreground)) h s l) !important;
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem !important; /* 32px */
  }

  h2 {
    font-size: 1.75rem !important; /* 28px */
  }

  h3 {
    font-size: 1.5rem !important; /* 24px */
  }

  body {
    font-size: 14px !important;
  }

  /* Hero Banner Mobile Fixes */
  /* Fix viewport height overflow issue */
  .hero-swiper,
  .hero-swiper .swiper-slide,
  .swiper.hero-swiper,
  .swiper.hero-swiper .swiper-slide {
    height: 600px !important; /* Fixed height instead of 100vh to avoid mobile browser UI issues */
    min-height: 600px !important;
    max-height: 600px !important;
  }

  /* Adjust background sizing and positioning for mobile - ULTRA high specificity to override Tailwind */
  .swiper.hero-swiper .swiper-slide.relative.h-screen.bg-cover.bg-center,
  .hero-swiper .swiper-slide.relative.h-screen.bg-cover.bg-center,
  .swiper-slide.relative.h-screen.bg-cover.bg-center,
  .swiper-slide.relative.h-screen.bg-cover,
  .swiper.hero-swiper .swiper-slide.bg-cover,
  .hero-swiper .swiper-slide.bg-cover,
  .swiper.hero-swiper .swiper-slide.relative,
  .hero-swiper .swiper-slide.relative,
  .swiper-slide.relative.h-screen,
  .swiper-slide.relative {
    background-size: contain !important; /* Show full image without cropping sides */
    background-position: center top !important; /* Center horizontally, align to top */
    background-repeat: no-repeat !important; /* Don't repeat the image */
    background-color: #0F55A5 !important; /* Congress blue background for any empty space */
  }

  /* Ensure content is vertically centered within the fixed height */
  .hero-swiper .container,
  .swiper-slide > div {
    height: 600px !important;
  }
}

/* Links */
a {
  color: hsl(from oklch(var(--primary)) h s l) !important;
  text-decoration: none !important;
  transition: color var(--transition-base) ease !important;
}

a:hover {
  color: hsl(from oklch(var(--primary-hover)) h s l) !important;
  text-decoration: underline !important;
}

/* Buttons */
.btn-primary {
  background-color: hsl(from oklch(var(--primary)) h s l) !important;
  color: hsl(from oklch(var(--primary-foreground)) h s l) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius) !important;
  border: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition-base) ease !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-primary:hover {
  background-color: hsl(from oklch(var(--primary-hover)) h s l) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary {
  background-color: hsl(from oklch(var(--secondary)) h s l) !important;
  color: hsl(from oklch(var(--secondary-foreground)) h s l) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius) !important;
  border: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition-base) ease !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-outline {
  background-color: transparent !important;
  color: hsl(from oklch(var(--primary)) h s l) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius) !important;
  border: 2px solid hsl(from oklch(var(--primary)) h s l) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition-base) ease !important;
}

.btn-outline:hover {
  background-color: hsl(from oklch(var(--primary)) h s l) !important;
  color: hsl(from oklch(var(--primary-foreground)) h s l) !important;
}

/* Cards */
.card {
  background-color: hsl(from oklch(var(--card)) h s l) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid hsl(from oklch(var(--border)) h s l) !important;
  transition: all var(--transition-base) ease !important;
}

.card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Section Styles */
.section-title {
  color: hsl(from oklch(var(--primary)) h s l) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wide) !important;
  margin-bottom: 0.5rem !important;
}

/* Congress Blue Gradient Background */
.bg-congress-gradient {
  background: linear-gradient(135deg,
    hsl(from oklch(var(--primary)) h s l) 0%,
    hsl(from oklch(var(--primary-hover)) h s l) 100%) !important;
}

/* Overlay for Hero Sections */
.overlay-dark {
  background: linear-gradient(to bottom,
    rgba(15, 85, 165, 0.85),
    rgba(15, 85, 165, 0.70)) !important;
}

/* CRITICAL FIX: Mobile hamburger menu button - ensure proper dimensions */
#mobileMenuBtn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}

#mobileMenuBtn i,
#mobileMenuBtn svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}