/* 
-- nom: nav.css --
-- llibreria: loT --
-- grup: Regions --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Component de navegació genèric. Per defecte mostra icones; variant text disponible. --
-- dependència: init.css, th-core.css, th-src.css --
*/

:root {
    --nav-size-l: 90%;
    --nav-size-m: 80%; /* default */
    --nav-size-s: 70%;
    --nav-size-8v: clamp(3rem, 8vw, 5rem);
    --nav-size-6v: clamp(2.5rem, 6vw, 4rem);
    --nav-size-4v: clamp(2rem, 4vw, 3rem);
    --nav-size-3v: clamp(1.5rem, 3vw, 2rem);

    --nav-icon-size: 80%;

    --nav-icon-transt: transform var(--motion-dur-lg) var(--motion-ease-out);

    /* Posicionament del desplegable mòbil (position: fixed) */
    --nav-drop-top:    4.2rem;
    --nav-drop-right:  2%;
    --nav-drop-bottom: 3rem;
    --nav-drop-left:   2%;
}

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

.nav--size-l {height: var(--nav-size-l);}
.nav--size-m {height: var(--nav-size-m);}
.nav--size-s {height: var(--nav-size-s);}
.nav--size-8v {height: var(--nav-size-8v);}
.nav--size-6v {height: var(--nav-size-6v);}
.nav--size-4v {height: var(--nav-size-4v);}
.nav--size-3v {height: var(--nav-size-3v);}

/* =============================================
   TOGGLE MÒBIL (ocult a desktop)
   ============================================= */
.nav input {
    display: none;
}
.nav label {
    display: none;
}

/* =============================================
   LLISTA
   ============================================= */
.nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--sp-md), 3vw, var(--sp-2xl));
    padding-right: 1rem;
    width: 100%;
    height: 100%;
}

/* =============================================
   ÍTEMS
   ============================================= */
.nav li {
    display: flex;
    align-items: center;
    height: 100%;
}
.nav :is(a, button) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: inherit;
    height: 100%;
}

/* =============================================
   ICONA — Slot (default: comportament icon)
   ============================================= */
.nav__icon {
    display: grid;
    place-items: center;
    block-size: var(--nav-icon-size);
    aspect-ratio: 1;
    flex-shrink: 0;
    transition: var(--nav-icon-transt);
}
.nav :is(a, button):hover .nav__icon {
    transform: var(--state-hover-bloom-transform);
}

/* =============================================
   LABEL — Default (tooltip sobre la icona)
   ============================================= */
.nav__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 0 0.1rem;
    border-radius: 0.2rem;

    background: var(--cl-glass-half);
    backdrop-filter: blur(6px);

    opacity: 0;
    pointer-events: none;

    transition: opacity var(--motion-dur-md) var(--motion-ease-std);

    font-size: var(--step-1);
    color: var(--cl-white);   /* tooltip sempre blanc: contrasta amb el fons glass fosc en clar i fosc */
    text-align: center;
    white-space: nowrap;
}
.nav :is(a, button):hover .nav__label {
    opacity: 1;
}

/* =============================================
   VARIANT TEXT — Desktop
   ============================================= */
.nav--text .nav__icon {
    display: none;
}
.nav--text :is(a, button):hover .nav__icon {
    transform: none;
}
.nav--text .nav__label {
    position: static;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    border-radius: 0;
    font-size: var(--step-2);
    color: var(--nav-label-txt-cl);
    transform: scale(1);
    transition: transform var(--motion-dur-lg) var(--motion-ease-std);
}
.nav--text :is(a, button):hover .nav__label {
    transform: scale(1.2);
}

/* =============================================
   RESPONSIVE — Mòbil (≤ 720px)
   ============================================= */
@media (max-width: 720px) {

    /* Toggle visible */
    .nav:not(.nav--nomobile) label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--step-3);
        color: var(--nav-label-txt-cl);
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    /* Desplegable — regla comuna (sense posicionament ni transform-origin) */
    .nav:not(.nav--nomobile) ul {
        position: fixed;
        width: auto;
        max-width: calc(100vw - 2 * var(--sp-xs));
        height: auto;
        flex-flow: column nowrap;
        align-items: flex-start;
        gap: 0;
        background-color:var(--cl-lyr-bg-md);
        border: var(--bw-xs) solid var(--cl-lyr-border);
        padding: var(--sp-xl) 0;
        transform: scaleY(0);
        opacity: 0;
        transition: all var(--motion-dur-md) var(--motion-ease-out);
        z-index: var(--z-dropdown);
    }
    /* Ancoratge default: tprgt — top-right */
    .nav:not(.nav--nomobile) ul {
        top: var(--nav-drop-top);
        right: var(--nav-drop-right);
        bottom: auto;
        left: auto;
        transform-origin: top;
    }
    /* Ancoratge tplft — top-left */
    .nav--drop-tplft:not(.nav--nomobile) ul {
        top: var(--nav-drop-top);
        right: auto;
        bottom: auto;
        left: var(--nav-drop-left);
        transform-origin: top;
    }
    /* Ancoratge btrgt — bottom-right */
    .nav--drop-btrgt:not(.nav--nomobile) ul {
        top: auto;
        right: var(--nav-drop-right);
        bottom: var(--nav-drop-bottom);
        left: auto;
        transform-origin: bottom;
    }
    /* Ancoratge btlft — bottom-left */
    .nav--drop-btlft:not(.nav--nomobile) ul {
        top: auto;
        right: auto;
        bottom: var(--nav-drop-bottom);
        left: var(--nav-drop-left);
        transform-origin: bottom;
    }
    /* Desplegable obert */
    .nav:not(.nav--nomobile):has(input:checked) ul {
        transform: scaleY(1);
        opacity: 1;
    }
    /* Ítems dins el desplegable */
    .nav:not(.nav--nomobile) li {
        width: 100%;
    }
    .nav:not(.nav--nomobile) :is(a, button) {
        width: 100%;
        justify-content: flex-start;
        gap: var(--sp-lg);
        padding: var(--sp-xl) var(--sp-2xl);
        white-space: nowrap;
        transition: background-color var(--motion-dur-md) var(--motion-ease-out);
    }
    /* Icona — mòbil (default) */
    .nav:not(.nav--nomobile) .nav__icon {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        flex-shrink: 0;
        transform: scale(1);
        transition: transform var(--motion-dur-lg) var(--motion-ease-std);      
    }
    /* Label — mòbil (default: estàtic al costat de la icona) */
    .nav:not(.nav--nomobile) .nav__label {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        padding-top: 0;
        padding-left: 0.5rem;
        font-size: var(--step-2);
        color: var(--nav-label-txt-cl);
        transform: scale(1);
        transition: transform var(--motion-dur-lg) var(--motion-ease-std);    

        background: transparent;
        backdrop-filter: none;        
    }
    .nav:not(.nav--nomobile) :is(a, button):hover .nav__icon {
        transform: scale(1.2);
    }
    .nav:not(.nav--nomobile) :is(a, button):hover .nav__label {
        transform: scale(1.2);
    }
    /* Variant text — mòbil: reset transform al hover de la icona (pulcritud) */
    .nav:not(.nav--nomobile).nav--text :is(a, button):hover .nav__icon {
        transform: none;
    }
}