/* app/static/css/layout.css */

/* Aseguramos que el navbar esté por encima del contenido inferior */
.navbar {
    position: relative;
    z-index: 1000;
}

/* El "molde" invisible que mantiene el espacio en el menú */
.brand-wrapper {
    position: relative;
    width: 160px; /* Reserva el espacio a lo ancho */
    height: 60px; /* Mantiene la altura del menú controlada */
    display: flex;
}

/* El logo físico que va a romper los límites */
.logo-flotante {
    position: absolute;
    top: 5px; /* Deja 5px de "aire" con el borde superior de la pantalla */
    left: 0;
    width: 210px; /* ¡AQUÍ ESTÁ EL TAMAÑO! Aumenta esto si necesitas que se lea aún más */
    max-height: none; /* Quitamos el límite de altura */
    z-index: 1050; /* Lo pone por encima de las fotos del banner */
    filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.2)); /* Sombra para que resalte sobre las fotos */
    transition: transform 0.3s ease;
}

/* Pequeño efecto de zoom al pasar el mouse por el logo */
.logo-flotante:hover {
    transform: scale(1.05);
}


/* --- AJUSTES PARA PANTALLAS MÓVILES (Menos de 992px) --- */
@media (max-width: 991.98px) {
    /* 1. Achicamos el espacio reservado del logo */
    .brand-wrapper {
        width: 130px; 
        height: 50px;
    }

    /* 2. Reducimos el tamaño físico del logo para que no tape el botón hamburguesa */
    .logo-flotante {
        width: 140px; 
        top: 2px;
    }

    /* 3. Le damos fondo y sombra al menú desplegable para que el logo no se transparente por debajo de las letras */
    .navbar-collapse {
        position: relative;
        z-index: 1100; /* Aseguramos que el menú quede por encima del logo (1050) */
        background-color: var(--color-arena); 
        padding: 1rem;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        margin-top: 15px; /* Lo despegamos un poco de la barra superior */
    }

    /* 4. Protegemos el botón para que siempre se pueda hacer clic */
    .navbar-toggler {
        position: relative;
        z-index: 1100;
        border: none; /* Lo hacemos más limpio visualmente */
    }
}