/*
    Nav compartido de las dos secciones: Depositos (.navbar-dp) y Workspaces
    (.navbar-wk).

    Los dos navs tenian la misma intencion pero distinta geometria:

      - Workspaces reparte tres hijos directos (flecha, logo y menu) con el
        space-between de Bootstrap, asi que el logo quedaba flotando en el medio;
        usa el contenedor centrado con max-width y separa la flecha del logo
        hasta 120px.
      - Depositos agrupa la marca a la izquierda, va de borde a borde y pega la
        flecha al logo.

    Aca se igualan alto de barra, padding lateral, tamaño de flecha y logo,
    agrupacion de la marca y tipografia del menu. Lo que sigue distinto es lo que
    tiene que seguir distinto: el logo de cada seccion, sus items de menu y su
    color de marca (que ya vive en css/styles.min.css: .btn-primary.btn-dp y
    .btn-wk, mas el subrayado .navbar-nav-dp/-wk .nav-link::after).

    Va en un archivo aparte y no en css/styles.min.css porque ese es el compilado
    del sitio y el repo no trae las fuentes SCSS: no se puede regenerar sin
    pisarlo. Se carga despues del compilado en los dos template/head.php.
*/

:root {
    /* Padding lateral del nav. El hero de Depositos lo reusa para su grilla, asi
       el logo queda alineado con el titulo y con el borde del panel. */
    --flex-gutter: clamp(1.25rem, 3vw, 2.5rem);
}

/* --- Alto de la barra ---------------------------------------------------- */
.navbar-dp,
.navbar-wk {
    padding-top: .875rem;
    padding-bottom: .875rem;
}

/* --- De borde a borde, con el mismo padding lateral --------------------- */
.navbar-dp > .container,
.navbar-wk > .container {
    width: 100%;
    max-width: none;
    padding-right: var(--flex-gutter);
    padding-left: var(--flex-gutter);
    /* Clave para Workspaces: con flex-start la flecha y el logo se agrupan a la
       izquierda y el `ms-auto` del <ul> manda el menu a la derecha, en lugar de
       repartir los tres hijos y dejar el logo en el medio. En Depositos la marca
       ya viene agrupada en .brand-offcanvas, asi que no cambia nada. */
    justify-content: flex-start;
}

/* --- Marca: la flecha y el logo como un solo bloque --------------------- */
.navbar-dp .btn-back,
.navbar-wk .btn-back {
    margin-right: 1.375rem;
}

.navbar-dp .btn-back img,
.navbar-wk .btn-back img {
    width: auto;
    height: clamp(1.875rem, 3vw, 2.625rem);
}

/* Los dos logos no miden lo mismo de ancho ("flex depositos" y "flex
   workspaces" tienen distinta cantidad de letras), asi que se igualan por alto:
   es lo que se percibe como "del mismo tamaño". El compilado los dimensiona por
   ancho (.navbar .brand), de ahi que se vieran distintos. */
.navbar-dp .logo,
.navbar-wk .logo {
    margin-bottom: 0;
}

.navbar-dp .logo img,
.navbar-wk .logo img {
    width: auto;
    height: clamp(1.5rem, 2.4vw, 2.125rem);
}

/* --- Menu ---------------------------------------------------------------
   Solo de lg para arriba: abajo de eso Depositos mete los items en el offcanvas
   y Workspaces los deja en linea, y cada uno ya tiene su propio tratamiento. */
@media (min-width: 992px) {
    .navbar-dp .nav-item .nav-link,
    .navbar-wk .nav-item .nav-link {
        color: #0d1116;
        font-size: .9375rem;
        font-weight: 400;
    }

    /* El boton de Contacto. El color lo pone .btn-primary.btn-dp / .btn-wk del
       compilado, aca va solo la forma. */
    .navbar-dp .nav-item .nav-link.btn,
    .navbar-wk .nav-item .nav-link.btn {
        padding: .75rem 1.875rem;
        color: #fff;
        font-size: .9375rem;
        font-weight: 500;
        border-radius: 999px;
    }

    .navbar-dp .nav-item .nav-link.btn:hover,
    .navbar-dp .nav-item .nav-link.btn:focus,
    .navbar-wk .nav-item .nav-link.btn:hover,
    .navbar-wk .nav-item .nav-link.btn:focus {
        color: #fff;
    }
}

@media (max-width: 991.98px) {
    .navbar-dp,
    .navbar-wk {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    /* Workspaces no tiene menu hamburguesa: abajo de lg sus items siguen en
       linea, y como no entran en una sola fila el <ul> pasa a un segundo
       renglon. El problema es que el compilado le clava una altura fija de una
       fila al contenedor del nav (`.navbar>div{height:2.5rem}`), asi que ese
       segundo renglon caia FUERA de la barra blanca: quedaba sobre la foto del
       hero, ilegible y con "Workspace" cortado. Con la altura en auto la barra
       crece y lo contiene.

       Solo abajo de lg: en desktop no hay wrap, y ahi esos 2.5rem son los que
       mantienen los dos navs alineados al pixel. */
    .navbar-dp > .container,
    .navbar-wk > .container {
        height: auto;
        align-content: flex-start;
        row-gap: .25rem;
    }

    /* Depositos agrupa flecha + logo + hamburguesa con space-between, que le
       manda el logo al centro de la barra; en Workspaces el logo va pegado a la
       flecha. Se iguala al de Workspaces: marca junta a la izquierda y la
       hamburguesa contra el borde derecho. */
    .navbar-dp .brand-offcanvas {
        justify-content: flex-start;
    }

    .navbar-dp .brand-offcanvas .btn-mobile {
        margin-left: auto;
    }
}