/* ==========================================================================
   Custom Logo Styling for "BOOST"
   ========================================================================== */

/* "BOOST" logo styling for education theme, inspired by Canvas */
.boost-logo {
    font-family: 'Montserrat', sans-serif; /* Use Montserrat Bold */
    font-weight: 700; /* Bold weight for emphasis */
    font-size: 24px; /* Adjust size for hamburger bar (can be smaller or larger) */
    color: #FFFFFF; /* White text for contrast against dark blue */
    text-transform: uppercase; /* Ensure uppercase for logo consistency */
    letter-spacing: 2px; /* Slight spacing for a modern look */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    transition: all 0.3s ease; /* Smooth transitions for hover/interactivity */
    white-space: nowrap; /* Prevent wrapping */
    cursor: pointer;
}

/* Specific styling for hamburger bar */
.hamburger-bar .boost-logo {
    font-size: 24px; /* Fit within 60px height of hamburger bar */
    padding: 5px 0; /* Vertical padding for alignment */
}

/* Specific styling for sidebar */
.sidebar-logo .boost-logo {
    font-size: 28px; /* Larger in sidebar for prominence */
    padding: 5px 0; /* More padding in sidebar */
}

/* Hover effect for interactivity (optional) */
.boost-logo:hover {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /*  letter-spacing: 3px;Enhanced shadow on hover */
}

/* Ensure logo fits within containers */
.hamburger-logo,
.sidebar-logo {
    display: inline-block;
    vertical-align: middle;
}

/* Adjust for mobile and desktop */
@media (max-width: 768px) {
    .hamburger-bar .boost-logo {
        font-size: 20px; 
        letter-spacing: 2px;
    }

    .sidebar-logo .boost-logo {
        font-size: 28px; /* Slightly smaller in sidebar on mobile */
    }
}

@media (min-width: 768px) {
    .hamburger-bar .boost-logo{
        display: none; /* Hide text logo on desktop, use image if needed */
    }
}