/**
 * About Page Specific Fixes
 * Fixes logo sizing and image display issues
 */

/* Fix navigation logo - prevent it from being too large */
nav img[src*="logo"],
nav img[alt*="Logo"] {
    max-height: 48px !important;
    height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Mobile logo fix */
@media (max-width: 768px) {
    nav img[src*="logo"],
    nav img[alt*="Logo"] {
        max-height: 36px !important;
        height: 36px !important;
    }
}

/* Hero image container fix */
.relative.md\:h-\[500px\].h-\[250px\] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Footer logo - reasonable size */
footer img[src*="logo"],
footer img[alt*="Logo"] {
    max-height: 60px !important;
    height: 60px !important;
    width: auto !important;
}

/* Ensure all images are visible and properly sized */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix for broken images - show alt text */
img[alt]:not([src]),
img[src=""]:not([alt=""]) {
    display: inline-block;
    background: #f0f0f0;
    border: 1px dashed #ccc;
    padding: 20px;
    text-align: center;
    color: #666;
}

/* Enhanced styling for about page content */
.prose {
    line-height: 1.75;
}

.prose h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #064b67;
}

.prose h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #064b67;
}

.prose p {
    margin-bottom: 1rem;
    color: #374151;
}

/* Card styling improvements */
.border-l-4 {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.border-l-4:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Grid improvements */
.grid {
    gap: 1.5rem;
}

/* Hero section improvements */
.relative.mx-auto.max-w-4xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Smooth transitions */
* {
    transition: all 0.2s ease;
}

/* Better spacing for sections */
section {
    scroll-margin-top: 100px;
}