/**
 * Navigation Brand Text Fix - LostFound
 * Fixes missing text-gradient class and ensures consistent brand styling
 * Priority: HIGH - Brand visibility issue
 */

/* ===== MISSING TEXT-GRADIENT CLASS ===== */

.text-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
    .text-gradient {
        background: none;
        color: #3b82f6;
        font-weight: 800;
    }
}

/* ===== ENHANCED BRAND STYLING ===== */

.nav-brand {
    color: #1f2937 !important;
    text-decoration: none !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.nav-brand:hover {
    transform: scale(1.02) !important;
    text-decoration: none !important;
}

.nav-brand div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.nav-brand .text-2xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
}

.nav-brand .text-xs {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1 !important;
    color: #6b7280 !important;
    margin-top: -2px !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    opacity: 0.9 !important;
}

/* ===== NAVBAR STATE-SPECIFIC BRAND STYLING ===== */

/* Default state - on colored backgrounds */
.modern-nav .nav-brand .text-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrolled state - on white/light backgrounds */
.modern-nav.navbar-scrolled .nav-brand .text-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* On white background state */
.modern-nav.on-white-bg .nav-brand .text-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ensure tagline is visible in all states */
.modern-nav .nav-brand .text-xs,
.modern-nav.navbar-scrolled .nav-brand .text-xs,
.modern-nav.on-white-bg .nav-brand .text-xs {
    color: #6b7280 !important;
    opacity: 0.8 !important;
}

/* ===== MOBILE RESPONSIVE BRAND STYLING ===== */

@media (max-width: 768px) {
    .nav-brand .text-2xl {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.2 !important;
    }
    
    .nav-brand .text-xs {
        font-size: 0.65rem !important; /* 10.4px */
        line-height: 1 !important;
        margin-top: -1px !important;
    }
}

@media (max-width: 480px) {
    .nav-brand .text-2xl {
        font-size: 1.125rem !important; /* 18px */
    }
    
    .nav-brand .text-xs {
        font-size: 0.6rem !important; /* 9.6px */
    }
}

/* ===== BRAND HOVER EFFECTS ===== */

.nav-brand:hover .text-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 30%, #c026d3 60%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.nav-brand:hover .text-xs {
    color: #4f46e5 !important;
    transform: translateX(1px);
    transition: all 0.3s ease;
}

/* ===== PRINT STYLES ===== */

@media print {
    .nav-brand .text-gradient {
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        background-clip: unset !important;
        color: #000 !important;
    }
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
    .nav-brand .text-gradient {
        background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #3b82f6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .nav-brand .text-xs {
        color: #9ca3af !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */

@media (prefers-contrast: high) {
    .nav-brand .text-gradient {
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        background-clip: unset !important;
        color: #000 !important;
        font-weight: 900 !important;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    }
    
    .nav-brand .text-xs {
        color: #333 !important;
        font-weight: 700 !important;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
    .nav-brand,
    .nav-brand:hover,
    .nav-brand:hover .text-xs {
        transition: none !important;
        transform: none !important;
    }
}

/* ===== FORCE VISIBILITY ON ALL PAGES ===== */

/* Ensure brand text is always visible regardless of page styles */
html body .nav-brand .text-gradient {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #1d4ed8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html body .nav-brand .text-xs {
    display: block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
    color: #6b7280 !important;
}

/* Override any conflicting styles from other pages */
.nav-brand * {
    line-height: inherit !important;
    font-family: inherit !important;
}