/* ============================================
   JV Associates SH.A - External Stylesheet
   ============================================ */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

/* Utility Classes */
.ambient-shadow {
    box-shadow: 0px 12px 32px rgba(26, 28, 28, 0.05);
}

.primary-gradient {
    background: linear-gradient(135deg, #9e001f 0%, #c8102e 100%);
}

.editorial-gradient {
    background: linear-gradient(135deg, #9e001f 0%, #c8102e 100%);
}

.premium-gradient {
    background: linear-gradient(135deg, #9e001f 0%, #c8102e 100%);
}

.ghost-border {
    border: 1px solid rgba(229, 189, 187, 0.2);
}

.glass-nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mesh-bg {
    background-color: #f9f9f9;
    background-image: radial-gradient(at 0% 0%, rgba(158, 0, 31, 0.03) 0px, transparent 50%), 
                      radial-gradient(at 100% 100%, rgba(158, 0, 31, 0.03) 0px, transparent 50%);
}

/* Mobile Menu Animation */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Fade In Animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Form Input Styles */
.form-input {
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #9e001f;
    box-shadow: 0 0 0 3px rgba(158, 0, 31, 0.1);
}

/* Logo Link Styles */
.logo-link {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.logo-link:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.logo-link img {
    display: block;
}

/* ============================================
   MOBILE RESPONSIVENESS IMPROVEMENTS
   ============================================ */

/* Better Mobile Tap Targets */
@media (max-width: 768px) {
    a, button, input, select, textarea, label {
        min-height: 44px;
    }
    
    .form-input, select.form-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Improve touch targets for navigation */
    nav a, nav button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Better spacing for mobile menu items */
    .mobile-menu a {
        padding: 12px 16px;
        min-height: 48px;
    }
    
    /* Improve form spacing on mobile */
    form .grid > div {
        margin-bottom: 1rem;
    }
    
    /* Better readable text on small screens */
    body {
        font-size: 15px;
        line-height: 1.6;
    }
    
    h1 {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    /* Improve hero section on mobile */
    .hero-section {
        min-height: auto !important;
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Better card spacing */
    .card-grid > * {
        margin-bottom: 1rem;
    }
    
    /* Improve footer on mobile */
    footer .grid {
        gap: 2rem;
    }
    
    footer a {
        padding: 0.5rem 0;
    }
}

/* Tablet Improvements */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    h1 {
        font-size: 2.5rem !important;
    }
}

/* Touch Device Improvements */
@media (hover: none) {
    .hover\:scale-110:active { 
        transform: scale(1.1); 
    }
    
    .hover\:opacity-90:active { 
        opacity: 0.9; 
    }
    
    /* Remove hover effects on touch devices */
    .group:hover .group-hover\:scale-110 {
        transform: none;
    }
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .fade-in {
        opacity: 1;
        transform: none;
    }
    
    .mobile-menu {
        transition: none;
    }
}

/* Focus Styles for Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #9e001f;
    outline-offset: 2px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: #9e001f;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    z-index: 9999;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
}

/* Form Validation Styles */
input:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
    border-color: #ba1a1a;
}

input:valid:not(:placeholder-shown),
select:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
    border-color: #22c55e;
}

/* Loading Spinner Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Success Message Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-animate {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Print Styles */
@media print {
    nav, .mobile-menu, footer, .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        text-decoration: underline;
        color: black !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}