/* 
-- nom: navnest.css --
-- llibreria: loT --
-- grup: Regions --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Component de navegació per a contenidors estrets. Sempre plegat: hamburguesa visible i llista desplegable, independentment de l'amplada del viewport. --
-- dependència: init.css, th-core.css, th-src.css, zindex.css --
*/

:root {
    --navnest-size-m: 80%;

    --navnest-icon-transt: transform var(--motion-dur-lg) var(--motion-ease-std);

    /* Posicionament del desplegable (position: fixed) */
    --navnest-drop-top:   4.2rem;
    --navnest-drop-right: 2%;
}

/* =============================================
   BASE
   ============================================= */
.navnest {
    /* Color del label: es declara aquí (no al :root) perquè es resolgui
       al context del navnest — gira amb el tema i amb la inversió (color--invert). */
    --navnest-label-txt-cl: var(--cl-lyr-fg);
    display: flex;
    align-items: stretch;
    height: var(--navnest-size-m);
    width: 100%;
}

/* =============================================
   TOGGLE (sempre visible)
   ============================================= */
.navnest input {
    display: none;
}
.navnest label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--step-3);
    color: var(--navnest-label-txt-cl);
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* =============================================
   DESPLEGABLE — ancoratge superior dret
   ============================================= */
.navnest ul {
    position: fixed;
    top: var(--navnest-drop-top);
    right: var(--navnest-drop-right);
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: 0;
    width: auto;
    max-width: calc(100vw - 2 * var(--sp-xs));
    height: auto;
    padding: var(--sp-xl) 0;
    background-color: var(--cl-lyr-bg-md);
    border: var(--bw-xs) solid var(--cl-lyr-border);
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: all var(--motion-dur-md) var(--motion-ease-out);
    z-index: var(--z-dropdown);
}
/* Desplegable obert */
.navnest:has(input:checked) ul {
    transform: scaleY(1);
    opacity: 1;
}

/* =============================================
   ÍTEMS
   ============================================= */
.navnest li {
    width: 100%;
}
.navnest :is(a, button) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-lg);
    width: 100%;
    padding: var(--sp-xl) var(--sp-2xl);
    color: inherit;
    white-space: nowrap;
    transition: background-color var(--motion-dur-md) var(--motion-ease-out);
}

/* =============================================
   ICONA — Slot
   ============================================= */
.navnest__icon {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex-shrink: 0;
    transform: scale(1);
    transition: var(--navnest-icon-transt);
}

/* =============================================
   LABEL — estàtic al costat de la icona
   ============================================= */
.navnest__label {
    padding-left: 0.5rem;
    font-size: var(--step-2);
    color: var(--navnest-label-txt-cl);
    transform: scale(1);
    transition: transform var(--motion-dur-lg) var(--motion-ease-std);
}

/* =============================================
   STATES
   ============================================= */
.navnest :is(a, button):hover .navnest__icon {
    transform: scale(1.2);
}
.navnest :is(a, button):hover .navnest__label {
    transform: scale(1.2);
}