/* ========================================
   NAVBAR TYPEWRITER FIX
   Prevents text from becoming invisible or mispositioned
   ======================================== */

/* Ensure navbar brand has proper layout */
.brand,
.nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
}

/* Ensure text stays visible and positioned correctly */
.brand span,
.nav-brand span,
.navbar-typewriter-text {
    display: inline-block !important;
    /* Do NOT use position: relative here */
    vertical-align: middle !important;
}

/* Fix for top-navbar specifically */
.top-navbar .brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.top-navbar .brand img {
    height: 32px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.top-navbar .brand span {
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Prevent gradient text from being invisible */
.navbar-typewriter-text {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 25%, #8b5cf6 50%, #a78bfa 75%, #60a5fa 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    /* Fallback color if gradient fails */
    color: #3b82f6 !important;
}

/* Ensure minimum width so text doesn't jump */
.navbar-typewriter-text {
    min-width: 150px !important;
    text-align: left !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .navbar-typewriter-text {
        font-size: 0.95rem !important;
        min-width: 130px !important;
    }
}

@media (max-width: 480px) {
    .navbar-typewriter-text {
        font-size: 0.85rem !important;
        min-width: 110px !important;
    }
}