/* Fonts loaded via preload in HTML for better performance */

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

@layer base {
  :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: 220 75% 39%;
    --primary-foreground: 210 40% 98%;

    --secondary: 217 50% 15%;
    --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.75rem;
  }

  .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: 220 75% 39%;
    --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%;
  }
}

/* FORCE HIDE IMAGES ON MOBILE - CRITICAL FIX */
@media (max-width: 1023px) {
  .hero-image-container,
  .about-image-container {
    display: none !important;
  }
}

@layer base {
  * {
    @apply border-border scroll-smooth;
    box-sizing: border-box;
  }

  body {
    @apply bg-black text-foreground font-sans;
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }

  /* Improve form elements on mobile */
  input, select, textarea, button {
    @apply text-base md:text-base;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

@layer components {
  .btn-primary {
    @apply bg-francisco-blue text-white font-medium px-4 py-2 md:px-6 md:py-3 rounded-lg hover:shadow-lg hover:shadow-francisco-blue/30 transition-all duration-300 inline-flex items-center justify-center gap-2 text-sm md:text-base;
  }
  
  .btn-outline {
    @apply bg-white/15 backdrop-blur-sm text-white border border-white/30 font-medium px-4 py-2 md:px-6 md:py-3 rounded-lg hover:bg-white/25 transition-all duration-300 inline-flex items-center justify-center gap-2 text-sm md:text-base;
  }
  
  .glass-card {
    @apply bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 md:p-6 transition-all duration-300 text-white;
  }

  .glass-card-light {
    @apply bg-white/15 backdrop-blur-md border border-white/30 rounded-2xl p-6 shadow-lg transition-all duration-300 text-white;
  }

  .glass-card-dark {
    @apply bg-black/30 backdrop-blur-xl border border-white/20 rounded-xl p-4 md:p-6 shadow-2xl transition-all duration-300 text-white;
  }
  
  .section-heading {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold text-white text-left;
  }
  
  .section-divider {
    @apply w-16 md:w-24 h-1 bg-francisco-blue mt-4 md:mt-6;
  }
  
  .highlight-text {
    @apply text-francisco-accent font-semibold;
  }

  /* Mobile-friendly container padding */
  .container {
    @apply px-4 md:px-6;
  }

  /* Improved spacing for mobile devices */
  .mobile-y-spacing {
    @apply py-8 md:py-16;
  }

  .mobile-x-spacing {
    @apply px-4 md:px-8;
  }
}

/* Animações personalizadas */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-gentle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-pulse-gentle {
  animation: pulse-gentle 4s ease-in-out infinite;
}

/* Estilização para select em dark mode */
select option {
  @apply bg-gray-900 text-white;
}

/* Prevent horizontal overflow */
.overflow-x-hidden {
  overflow-x: hidden;
}

/* Fix for mobile viewport height issues */
.min-h-screen {
  min-height: 100vh; /* Fallback */
  min-height: -webkit-fill-available;
  min-height: 100dvh; /* Dynamic viewport height where supported */
  max-width: 100vw; /* Ensure no horizontal overflow */
}

html {
  height: -webkit-fill-available; /* Important for mobile browsers */
}

/* Mobile optimization - prevent horizontal scroll and improve Android compatibility */
@media (max-width: 767px) {
  html, body, #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
    margin: 0;
    padding: 0;
  }
  
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Forçar containers a não ultrapassar viewport */
  .container {
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Garantir que flex containers não causem overflow */
  .flex, .grid {
    max-width: 100% !important;
  }
  
  /* Otimização para textos e elementos */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Remover overflow potencial de elementos específicos */
  div, section, main, article, aside, nav, header, footer {
    max-width: 100% !important;
  }
}

/* Remove default blue highlight on tap for mobile */
@media (max-width: 767px) {
  a, button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Força overflow hidden em root elements para Android */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}