/* Supercaralive Typography and Design System CSS */
/* Based on supercaralive-homepage.html */

:root {
    --red-hero: #E63946;
    --blue-hero: #457B9D;
    --yellow-hero: #F4A261;
    --bg-soft: #FAFAFA;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Background Colors */
.bg-red-hero { 
    background-color: var(--red-hero); 
}

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

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

.bg-soft { 
    background-color: var(--bg-soft); 
}

/* Text Colors */
.text-red-hero { 
    color: var(--red-hero); 
}

.text-blue-hero { 
    color: var(--blue-hero); 
}

.text-yellow-hero { 
    color: var(--yellow-hero); 
}

/* Border Colors */
.border-red-hero { 
    border-color: var(--red-hero); 
}

.border-blue-hero { 
    border-color: var(--blue-hero); 
}

.border-yellow-hero { 
    border-color: var(--yellow-hero); 
}

/* Hover States */
.hover\:bg-red-hero:hover { 
    background-color: var(--red-hero); 
}

.hover\:bg-red-dark:hover { 
    background-color: #d32f3c; 
}

.hover\:bg-blue-dark:hover { 
    background-color: #3a6782; 
}

.hover\:text-white:hover {
    color: white;
}

/* Typography - Headings */
h1, h2, h3 {
    font-family: 'Montserrat', 'Quicksand', sans-serif;
    font-weight: 700;
}

/* Card Hover Effects */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Gradient Background */
.hero-gradient {
    background: linear-gradient(135deg, var(--red-hero) 0%, var(--blue-hero) 100%);
}

/* Custom Border Radius */
.rounded-friendly { 
    border-radius: 16px; 
}

.rounded-super { 
    border-radius: 24px; 
}

/* Footer Background - matches homepage */
.bg-footer {
    background-color: #111827; /* Tailwind gray-900 */
}

/* Focus Ring Colors for Forms */
.focus\:ring-red-hero:focus {
    --tw-ring-color: var(--red-hero);
}

.focus\:ring-blue-hero:focus {
    --tw-ring-color: var(--blue-hero);
}

.focus\:ring-yellow-hero:focus {
    --tw-ring-color: var(--yellow-hero);
}

/* Mobile Responsive Adjustments for 480px and below */
@media (max-width: 480px) {
    /* Ensure tables are scrollable */
    table {
        min-width: 600px;
    }
    
    /* Ensure container doesn't overflow */
    .container {
        max-width: 100%;
    }
    
    /* Adjust font sizes for very small screens */
    body {
        font-size: 14px;
    }
    
    /* Ensure buttons are touch-friendly */
    button, a.button, input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Stack elements more aggressively on mobile */
    .mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* Ensure proper padding on mobile */
    .mobile-px-tight {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Ensure cards don't get too cramped */
    .card-mobile {
        padding: 1rem;
    }
    
    /* Make sure text doesn't get too small */
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.1rem !important;
        line-height: 1.3;
    }
}

/* Extra small devices (phones in portrait mode, less than 375px) */
@media (max-width: 375px) {
    /* Further adjustments for very small screens */
    body {
        font-size: 13px;
    }
    
    h1 {
        font-size: 1.25rem !important;
    }
    
    h2 {
        font-size: 1.1rem !important;
    }
}