/* ===== ENHANCED HOMEPAGE STYLES - LostFound ===== */
/* Updated: Enhanced Mobile Navigation & Location Banner */
/**
 * Enhanced Homepage Styles - LostFound
 * Fixes for location handling, mobile navigation, and performance
 * Version: 2.1.0 - FONT LOADING OPTIMIZED
 */

/* ===== CORE HOMEPAGE STYLES ===== */

/* FONT LOADING REMOVED - Handled by layout template for optimal performance */
/* Font loading is now centralized in layouts/app.blade.php with optimized weights */

/* Feature Icons */
.feature-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    transition: all 0.3s ease;
}

.feature-icon.success { 
    background: linear-gradient(135deg, #10b981 0%, #047857 100%); 
}

.feature-icon.danger { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
}

.feature-icon.warning { 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); 
}

/* Hover Effects */
.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.hover-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Text Effects */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== LOCATION CONSENT BANNER ===== */
#locationConsentBanner {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ENHANCED MOBILE NAVIGATION ===== */

/* Mobile menu button animations */
.mobile-menu-btn {
    @apply p-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-white hover:bg-opacity-20 transition-colors duration-200;
    backdrop-filter: blur(10px);
    z-index: 60; /* Higher than hero section */
    position: relative;
}

/* Enhanced mobile nav item */
.mobile-nav-item-enhanced {
    @apply flex items-center justify-between px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200 rounded-lg mx-2 mb-1;
}

.mobile-nav-item-enhanced i {
    @apply w-5 text-center mr-3;
}

.mobile-nav-item-enhanced:hover i {
    @apply transform scale-110;
    transition: transform 0.2s ease;
}

/* Mobile menu overlay - HIGHEST Z-INDEX */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998; /* Very high z-index */
}

/* Mobile menu container - HIGHEST Z-INDEX */
.mobile-menu-container {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 20rem; /* 320px */
    background: white;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
    z-index: 999; /* Highest z-index to appear above everything */
    overflow-y: auto;
}

/* Mobile menu animations */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* ===== HERO SECTION ===== */

/* Hero Map Complete Size Control System - Control all 3 containers */
:root {
  /* Outer Shadow Container (Glassmorphism box) */
  --hero-outer-width: 100%;    /* 👈 OUTER SHADOW BOX WIDTH */
  --hero-outer-height: auto;   /* 👈 OUTER SHADOW BOX HEIGHT */
  --hero-outer-max-width: 40rem; /* 👈 OUTER SHADOW BOX MAX-WIDTH (max-w-sm = 24rem, max-w-md = 28rem, max-w-lg = 32rem) */
  
  /* Inner Box Container (White smartphone mockup) */
  --hero-box-width: 100%;      /* 👈 INNER WHITE BOX WIDTH */
  --hero-box-height: auto;     /* 👈 INNER WHITE BOX HEIGHT */
  
  /* Map Container (Actual map) */
  --hero-map-width: 100%;      /* 👈 MAP WIDTH */
  --hero-map-height: 160px;    /* 👈 MAP HEIGHT */
}

/* Outer shadow container */
.hero-outer-container {
    width: var(--hero-outer-width);
    height: var(--hero-outer-height);
    max-width: var(--hero-outer-max-width);
}

/* Inner box container */
.hero-box-container {
    width: var(--hero-box-width);
    height: var(--hero-box-height);
}

/* Map container */
.hero-map-custom {
    width: var(--hero-map-width);
    height: var(--hero-map-height);
}

.hero-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e40af 100%);
    position: relative;
    overflow: hidden;
}

/* AI Network Background Effect */
.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(147, 51, 234, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 20% 90%, rgba(16, 185, 129, 0.2) 0%, transparent 50%);
    z-index: 1;
}

/* AI Network Nodes */
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, #60a5fa 2px, transparent 2px),
        radial-gradient(circle at 75% 15%, #8b5cf6 1.5px, transparent 1.5px),
        radial-gradient(circle at 60% 45%, #06b6d4 1px, transparent 1px),
        radial-gradient(circle at 15% 65%, #10b981 1.5px, transparent 1.5px),
        radial-gradient(circle at 85% 75%, #f59e0b 1px, transparent 1px),
        radial-gradient(circle at 45% 15%, #60a5fa 1px, transparent 1px),
        radial-gradient(circle at 90% 45%, #8b5cf6 1px, transparent 1px),
        radial-gradient(circle at 30% 85%, #06b6d4 2px, transparent 2px),
        radial-gradient(circle at 65% 75%, #10b981 1px, transparent 1px),
        radial-gradient(circle at 10% 40%, #f59e0b 1.5px, transparent 1.5px);
    background-size: 
        200px 200px, 180px 180px, 160px 160px, 220px 220px, 190px 190px,
        170px 170px, 210px 210px, 240px 240px, 150px 150px, 230px 230px;
    animation: networkFloat 20s linear infinite;
    z-index: 2;
}

@keyframes networkFloat {
    0% { 
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    }
    50% { 
        background-position: 100px 100px, 90px 90px, 80px 80px, 110px 110px, 95px 95px, 85px 85px, 105px 105px, 120px 120px, 75px 75px, 115px 115px;
    }
    100% { 
        background-position: 200px 200px, 180px 180px, 160px 160px, 220px 220px, 190px 190px, 170px 170px, 210px 210px, 240px 240px, 150px 150px, 230px 230px;
    }
}

/* Network Lines Animation */
.hero-network-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
}

.network-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.4), transparent);
    height: 1px;
    animation: networkPulse 4s ease-in-out infinite;
}

.network-line:nth-child(1) {
    top: 20%;
    left: 10%;
    width: 30%;
    transform: rotate(25deg);
    animation-delay: 0s;
}

.network-line:nth-child(2) {
    top: 60%;
    right: 15%;
    width: 25%;
    transform: rotate(-30deg);
    animation-delay: 1s;
}

.network-line:nth-child(3) {
    top: 40%;
    left: 40%;
    width: 35%;
    transform: rotate(45deg);
    animation-delay: 2s;
}

.network-line:nth-child(4) {
    bottom: 30%;
    left: 20%;
    width: 40%;
    transform: rotate(-15deg);
    animation-delay: 0.5s;
}

.network-line:nth-child(5) {
    top: 15%;
    right: 25%;
    width: 20%;
    transform: rotate(60deg);
    animation-delay: 1.5s;
}

.network-line:nth-child(6) {
    bottom: 20%;
    right: 10%;
    width: 30%;
    transform: rotate(-45deg);
    animation-delay: 2.5s;
}

/* Floating AI Particles */
.ai-particle {
    position: absolute;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.8), rgba(99, 102, 241, 0.4));
    border-radius: 50%;
    animation: aiFloat 8s ease-in-out infinite;
}

.ai-particle:nth-child(1) {
    top: 10%;
    left: 15%;
    width: 4px;
    height: 4px;
    animation-delay: 0s;
}

.ai-particle:nth-child(2) {
    top: 70%;
    right: 20%;
    width: 3px;
    height: 3px;
    animation-delay: 2s;
}

.ai-particle:nth-child(3) {
    bottom: 25%;
    left: 25%;
    width: 2px;
    height: 2px;
    animation-delay: 4s;
}

.ai-particle:nth-child(4) {
    top: 35%;
    right: 30%;
    width: 3px;
    height: 3px;
    animation-delay: 1s;
}

.ai-particle:nth-child(5) {
    top: 55%;
    left: 60%;
    width: 2px;
    height: 2px;
    animation-delay: 3s;
}

@keyframes networkPulse {
    0%, 100% { 
        opacity: 0;
        transform: scaleX(0);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes aiFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.6;
    }
    33% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }
    66% {
        transform: translateY(10px) scale(0.8);
        opacity: 0.8;
    }
}

/* ===== HERO SECTION ===== */

/* Hero Map Complete Size Control System - Control all 3 containers */
:root {
  /* Outer Shadow Container (Glassmorphism box) */
  --hero-outer-width: 100%;    /* 👈 OUTER SHADOW BOX WIDTH */
  --hero-outer-height: auto;   /* 👈 OUTER SHADOW BOX HEIGHT */
  --hero-outer-max-width: 40rem; /* 👈 OUTER SHADOW BOX MAX-WIDTH (max-w-sm = 24rem, max-w-md = 28rem, max-w-lg = 32rem) */
  
  /* Inner Box Container (White smartphone mockup) */
  --hero-box-width: 100%;      /* 👈 INNER WHITE BOX WIDTH */
  --hero-box-height: auto;     /* 👈 INNER WHITE BOX HEIGHT */
  
  /* Map Container (Actual map) */
  --hero-map-width: 100%;      /* 👈 MAP WIDTH */
  --hero-map-height: 160px;    /* 👈 MAP HEIGHT */
}

/* Outer shadow container */
.hero-outer-container {
    width: var(--hero-outer-width);
    height: var(--hero-outer-height);
    max-width: var(--hero-outer-max-width);
}

/* Inner box container */
.hero-box-container {
    width: var(--hero-box-width);
    height: var(--hero-box-height);
}

/* Map container */
.hero-map-custom {
    width: var(--hero-map-width);
    height: var(--hero-map-height);
}

.hero-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e40af 100%);
    position: relative;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.1;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

/* ===== ENHANCED NAVIGATION STYLES ===== */

.modern-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.modern-nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.nav-link {
    @apply px-4 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-white hover:bg-opacity-50 transition-all duration-200 font-medium text-sm;
    backdrop-filter: blur(10px);
}

.nav-link.nav-link-active {
    @apply text-blue-600 bg-white bg-opacity-60;
}

.nav-link.compact {
    @apply px-3 py-2;
}

.nav-brand {
    @apply text-gray-800;
}

.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-200 text-sm;
}

.btn-secondary {
    @apply border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 text-sm;
}

/* Enhanced Dropdown Styles */
.dropdown-menu {
    @apply absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.dropdown-header {
    @apply px-4 py-3 border-b border-gray-100;
}

.dropdown-item {
    @apply flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors duration-150 text-sm;
}

.dropdown-item i {
    @apply w-5 text-center mr-3;
}

.dropdown-divider {
    @apply my-2 border-t border-gray-100;
}

/* ===== LOADING OVERLAY ===== */
#locationLoadingOverlay {
    backdrop-filter: blur(5px);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet adjustments */
@media (max-width: 1024px) {
    .hero-outer-container {
        max-width: 36rem;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Location banner mobile adjustments */
    #locationConsentBanner .max-w-7xl {
        @apply px-3;
    }
    
    #locationConsentBanner .flex {
        @apply flex-col space-y-3;
    }
    
    #locationConsentBanner .flex.items-center.space-x-3 {
        @apply flex-row space-y-0 space-x-2;
    }
    
    /* Hero adjustments */
    .hero-outer-container {
        max-width: 32rem;
        --hero-map-height: 140px;
    }
    
    /* Navigation adjustments */
    .nav-brand span:first-child {
        @apply text-xl;
    }
    
    .nav-brand span:last-child {
        @apply text-xs;
    }
}

/* Small mobile adjustments */
@media (max-width: 640px) {
    #locationConsentBanner {
        @apply text-sm;
    }
    
    #locationConsentBanner h3 {
        @apply text-base;
    }
    
    #locationConsentBanner .flex.items-center.space-x-3 button {
        @apply px-4 py-2 text-sm;
    }
    
    .hero-outer-container {
        max-width: 28rem;
        --hero-map-height: 120px;
    }
}

/* ===== ANIMATIONS & TRANSITIONS ===== */

/* Smooth page transitions */
* {
    scroll-behavior: smooth;
}

/* Button hover effects */
button {
    transition: all 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
}

button:active {
    transform: translateY(0);
}

/* Card hover animations */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus styles */
button:focus,
a:focus {
    @apply ring-2 ring-blue-500 ring-offset-2;
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modern-nav {
        background: white;
        border-bottom: 2px solid #000;
    }
    
    .nav-link {
        color: #000;
    }
    
    .nav-link:hover {
        background: #000;
        color: #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-bg::before {
        animation: none;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU acceleration for animations */
.modern-nav,
.mobile-menu-btn,
.dropdown-menu,
.hero-outer-container {
    transform: translateZ(0);
    will-change: transform;
}

/* Preload critical fonts - REMOVED: Handled by layout template */
/* Font loading is now centralized in layouts for optimal performance */
/* @font-face {
    font-family: 'Inter';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
} */

/* ===== PRINT STYLES ===== */
@media print {
    .modern-nav,
    #locationConsentBanner,
    #locationLoadingOverlay {
        display: none !important;
    }
}

/* ===== DARK MODE SUPPORT (FUTURE) ===== */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here in the future */
    /* Currently maintaining light mode for consistency */
}

/* ===== UTILITY CLASSES ===== */

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.backdrop-blur {
    backdrop-filter: blur(8px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
}

/* ===== COMPONENT SPECIFIC STYLES ===== */

/* Enhanced missing report cards */
.missing-report-card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden;
}

.missing-report-card:hover {
    transform: translateY(-2px);
}

/* Statistics counters */
.stat-counter {
    @apply text-4xl font-bold;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Action cards */
.action-card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-8 text-center;
}

.action-card:hover {
    transform: translateY(-4px);
}

/* Testimonial cards */
.testimonial-card {
    @apply bg-white rounded-xl shadow-lg p-6;
}

/* ===== ERROR STATES ===== */

.error-message {
    @apply bg-red-50 border border-red-200 text-red-800 rounded-lg p-4;
}

.warning-message {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-4;
}

.success-message {
    @apply bg-green-50 border border-green-200 text-green-800 rounded-lg p-4;
}

.info-message {
    @apply bg-blue-50 border border-blue-200 text-blue-800 rounded-lg p-4;
}