/* =========================================================================
   Logo Stylesheet - Premium UI
   ========================================================================= */

/* --- Logo Container --- */
#head {
    width: 80%;
    display: block;
    justify-content: left;
    align-items: left;
    padding: var(--spacing-lg) 10;
    background: transparent;
    position: relative;
    z-index: 10;
    margin-left: 80px; /* Increased to make room for the fixed menu button */
    margin-top: 1em;
    margin-right: 100px;
}

/* --- Logo Image --- */
#logo {
    /*max-width: 100%;*/
    height: auto;
    width: clamp(150px, 20vw, 250px);
    /* Fluidly scales between mobile and desktop */
    border-radius: 12px;
    /* Slight rounding for a modern touch */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    /* Ground the logo in the dark theme */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

    /* Optional: If the logo has a stark white background and you want it to blend 
       with the dark theme, mix-blend-mode can be used, but keeping it standard is safer. */
    background-color: #ffffff;
    padding: var(--spacing-xs);
}

/* --- Interactive Hover State --- */
#head a {
    display: inline-block;
    transition: transform var(--transition-fast);
}

#head a:hover {
    transform: translateY(-3px);
}

#head a:hover #logo {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    #head {
        padding: var(--spacing-md) 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0.5em;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #logo {
        width: clamp(120px, 40vw, 180px);
        margin-left: 0; /* Center it */
    }
}