/* ===================================
   HEADER & FOOTER CSS
   Common styles for navbar and footer
   =================================== */

/* ===== NAVBAR ===== */
.navbar { 
    padding: 0.6rem 0; 
}

.navbar-brand { 
    font-size: 14px; 
    letter-spacing: 0%; 
}

.navbar-brand i { 
    color: var(--trippal-primary); 
}

.nav-link { 
    font-size: 0.9rem; 
    font-weight: 500; 
    padding: 0.5rem 1rem !important; 
    color: var(--trippal-gray-light); 
}

/* Navbar buttons */
.navbar .btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
    transition: all 0.3s;
}

.navbar .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

.navbar .btn-light {
    background: white;
    color: var(--trippal-primary);
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
    border: none;
    transition: all 0.3s;
}

.navbar .btn-light:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--trippal-dark);
    transform: translateY(-1px);
}

/* ===== FOOTER ===== */
footer { 
    padding-top: 60px; 
}

footer h5, 
footer h6 { 
    color: white; 
}

footer a { 
    transition: color 0.2s; 
}

footer a:hover { 
    color: var(--trippal-primary) !important; 
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Mobile navbar - logo improvements */
    .navbar-brand {
        font-size: 1.25rem;
        font-weight: 700;
    }
    
    .navbar-brand i {
        font-size: 1.4rem;
    }
    
    /* Mobile navbar - toggle button improvements */
    .navbar-toggler {
        padding: 0.5rem 0.75rem;
        border-width: 2px;
    }
    
    .navbar-toggler-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    /* Mobile navbar buttons */
    .navbar .d-flex {
        width: 100%;
        margin-top: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .navbar .btn-outline-light,
    .navbar .btn-light {
        width: 100%;
        text-align: center;
        padding: 0.5rem 1rem;
    }
    
    .navbar .btn-outline-light {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }
    
    .navbar .dropdown {
        width: 100%;
    }
    
    .navbar .dropdown .btn {
        width: 100%;
        text-align: left;
    }
}