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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

/* CLS (Cumulative Layout Shift) Prevention */

/* Critical: Prevent layout shifts from consent dialog */
.fc-consent-root {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  contain: layout size style paint !important;
}

.fc-consent-root * {
  pointer-events: auto;
}

.fc-dialog-container {
  contain: strict !important;
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
  /* Reserve exact dimensions from audit */
  width: 371px !important;
  height: 600px !important;
  max-width: calc(100vw - 42px) !important;
  margin: 0 auto !important;
}

.fc-dialog,
.fc-dialog-content {
  contain: layout style paint !important;
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
}

/* Fix contrast for consent dialog FAQ elements */
.fc-faq-label,
.fc-faq-header .fc-faq-label {
  color: #1a1a1a !important;
}

/* Ensure sufficient contrast on consent dialog overlay */
.fc-dialog-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Prevent layout shifts from fonts loading - Enhanced fallback */
@font-face {
  font-family: 'Open Sans Fallback';
  src: local('Arial'), local('Helvetica'), local('sans-serif');
  size-adjust: 107%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 0%;
}

/* Apply font-display: swap for better performance */
* {
  font-display: swap !important;
}

/* Reserve space for dynamic content to prevent shifts */
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Prevent shifts during page load */
#root {
  contain: layout;
}

@layer base {
  :root {
    --background: 240 10% 98%;
    --foreground: 240 10% 15%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 15%;

    --primary: 250 75% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 250 85% 65%;

    --secondary: 240 6% 92%;
    --secondary-foreground: 240 10% 25%;

    --muted: 240 6% 96%;
    --muted-foreground: 240 4% 40%;

    --accent: 250 75% 95%;
    --accent-foreground: 250 75% 25%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 6% 90%;
    --input: 240 6% 94%;
    --ring: 250 75% 55%;

    --radius: 0.75rem;

    /* Custom design tokens */
    --gradient-primary: linear-gradient(135deg, hsl(250 75% 55%), hsl(270 70% 60%));
    --gradient-secondary: linear-gradient(135deg, hsl(240 6% 96%), hsl(0 0% 100%));
    --gradient-hero: linear-gradient(135deg, hsl(250 75% 55%) 0%, hsl(270 70% 60%) 50%, hsl(290 65% 65%) 100%);
    
    --shadow-card: 0 4px 6px -1px hsl(240 6% 90% / 0.1), 0 2px 4px -1px hsl(240 6% 90% / 0.06);
    --shadow-card-hover: 0 10px 25px -3px hsl(250 75% 55% / 0.1), 0 4px 6px -2px hsl(250 75% 55% / 0.05);
    --shadow-hero: 0 25px 50px -12px hsl(250 75% 55% / 0.25);
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --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%;
  }

  .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%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    /* Performance: reduce layout recalculations */
    contain: layout style;
  }

  /* Enhanced focus styles for accessibility */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-ring;
  }

  /* Ensure interactive elements have proper focus states */
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    @apply ring-2 ring-ring ring-offset-2;
  }

  /* Skip to main content link for keyboard users */
  .skip-to-main {
    @apply absolute -top-10 left-4 z-50 bg-primary text-primary-foreground px-4 py-2 rounded-md;
    @apply focus:top-4 transition-all duration-200;
  }

  /* Performance optimizations */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  img {
    content-visibility: auto;
    contain: layout style paint;
  }
  
  /* Optimize repaints */
  .hover-scale {
    will-change: transform;
  }
  
  .hover-scale:hover {
    transform: translateZ(0) scale(1.02);
  }

  /* Prevent forced reflows in accordion animations */
  [data-state="open"],
  [data-state="closed"] {
    will-change: height;
  }

  /* Optimize accordion content rendering */
  [data-radix-accordion-content] {
    contain: layout style;
  }

  /* Optimize dialog/modal positioning */
  [data-radix-dialog-content],
  [data-radix-popover-content] {
    will-change: transform, opacity;
    contain: layout style paint;
  }

  /* Reduce layout thrashing for dynamic content */
  [role="dialog"],
  [role="alertdialog"] {
    contain: layout style paint;
  }

  /* Fix touch target size for Lovable badge close button and prevent CLS */
  #lovable-badge {
    contain: layout size style paint !important;
    transform: translateZ(0) !important;
    will-change: transform, opacity !important;
    /* Reserve space based on audit dimensions */
    width: 141px !important;
    height: 28px !important;
  }
  
  #lovable-badge-close {
    min-width: 24px !important;
    min-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    top: -6px !important;
    right: 1px !important;
    contain: layout style !important;
    transform: translateZ(0) !important;
  }

  /* Hero Section Styles */
  header {
    /* Performance: isolate layout calculations */
    contain: layout style paint;
  }

  .hero-container {
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 1rem;
    /* Performance: contain layout calculations */
    contain: layout style;
  }

  @media (min-width: 768px) {
    .hero-container {
      padding: 3rem 1.5rem;
    }
  }

  .hero-title {
    font-size: 2.25rem;
    font-weight: 700;
    background: var(--gradient-hero);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    /* Performance: GPU acceleration for gradient text */
    transform: translateZ(0);
  }

  @media (min-width: 768px) {
    .hero-title { 
      font-size: 3rem;
      margin-bottom: 1.25rem;
    }
  }

  @media (min-width: 1024px) {
    .hero-title { 
      font-size: 3.5rem;
    }
  }

  .hero-subtitle {
    color: hsl(var(--foreground));
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
  }

  @media (min-width: 768px) {
    .hero-subtitle { 
      font-size: 1.875rem;
      margin-bottom: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .hero-subtitle { 
      font-size: 2.25rem;
    }
  }

  .hero-desc {
    font-size: 1.25rem;
    color: hsl(var(--muted-foreground));
    max-width: 42rem;
    margin: 0 auto 2rem auto;
    line-height: 1.625;
    /* Prevent CLS: reserve minimum height to prevent reflow */
    min-height: 130px;
  }
  
  /* Prevent CTA button area shift */
  .hero-container > div.flex {
    contain: layout style !important;
    min-height: 122px !important;
  }
  
  @media (min-width: 768px) {
    .hero-desc {
      min-height: 0; /* Reset for larger screens */
    }
  }

  .btn-primary {
    background: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-hero);
    transition: var(--transition-smooth);
    border: none;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    /* Performance: GPU acceleration for transforms */
    transform: translateZ(0);
    will-change: transform, box-shadow;
  }

  @media (min-width: 768px) {
    .btn-primary {
      padding: 1rem 2rem;
      font-size: 1.125rem;
    }
  }

  .btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px) translateZ(0);
    box-shadow: var(--shadow-card-hover);
  }

  .btn-primary:active {
    transform: translateY(0) translateZ(0);
  }

  .bg-gradient-hero {
    background: var(--gradient-hero);
  }

  /* Performance: optimize animated elements */
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: opacity;
  }

  /* Main content sections */
  main {
    contain: layout style;
  }

  /* Optimize sections with complex layouts */
  section {
    contain: layout style;
  }

  /* Aggressive containment for card components */
  [class*="card"],
  [class*="Card"] {
    contain: layout style paint;
    content-visibility: auto;
  }

  /* Optimize grid and flex containers */
  [class*="grid"],
  [class*="flex"] {
    contain: layout;
  }

  /* Prevent reflows in list items */
  li, [role="listitem"] {
    contain: layout style;
  }

  /* Optimize container divs with dynamic content */
  div[class*="container"],
  div[class*="wrapper"] {
    contain: layout;
  }

  /* Create compositing layers for transform animations */
  [class*="animate"],
  [class*="transition"] {
    transform: translateZ(0);
    will-change: transform;
  }

  /* Optimize form elements to prevent reflows */
  input, textarea, select {
    contain: layout style;
  }

  /* Optimize button elements */
  button, [role="button"] {
    contain: layout style;
    transform: translateZ(0);
  }

  /* Optimize navigation elements */
  nav, [role="navigation"] {
    contain: layout style;
  }

  /* Prevent reflows in tooltip and popover triggers */
  [data-state] {
    contain: layout;
  }

  /* Optimize scrollable areas */
  [class*="scroll"] {
    contain: layout;
    content-visibility: auto;
  }

  /* React root optimization - reduce vendor reflows */
  #root > * {
    contain: layout;
  }

  /* Radix UI overlay wrappers - prevent positioning reflows */
  [data-radix-popper-content-wrapper] {
    contain: size layout style;
    will-change: transform, opacity;
    transform: translateZ(0);
  }

  /* Radix UI triggers - minimize measurement impact */
  [data-radix-tooltip-trigger],
  [data-radix-popover-trigger],
  [data-radix-dialog-trigger],
  [data-radix-dropdown-menu-trigger],
  [data-radix-select-trigger] {
    contain: layout style;
  }

  /* Radix portal containers - isolate from main layout */
  [data-radix-portal] {
    contain: strict;
    isolation: isolate;
  }

  /* Optimize Radix overlay content positioning */
  [data-radix-tooltip-content],
  [data-radix-select-content],
  [data-radix-dropdown-menu-content] {
    contain: layout style paint;
    will-change: transform, opacity;
    transform: translateZ(0);
  }

  /* Article Ad Styles */
  .article-ad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    contain: layout style;
  }

  .article-ad ins {
    width: 100%;
    max-width: 100%;
  }

  @media (min-width: 768px) {
    .article-ad {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  }
}