/* ═════════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN

   Barra superior, menú desplegable, enlaces sociales y los controles fijos de
   la esquina inferior izquierda. Es el chrome que comparten todas las páginas;
   qué partes se muestran en cada una lo decide inc/chrome.php.
   ═════════════════════════════════════════════════════════════════════════════ */

/* --- 2. NAVBAR SUPERIOR --- */
.nav_component {
    width: 100%;
    flex: 0 0 auto;
    z-index: 1030;
    transition: border-color var(--theme-transition);
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
}

.nav_component.is-solid {
    background-color: transparent;
    mix-blend-mode: difference;
    border-bottom: none;
    overflow: hidden;
    transition: mix-blend-mode 0.3s ease;
}

.nav_component.is-solid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    z-index: -1;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Estado activo: fondo visible */
.nav_component.is-solid.is-active::before {
    transform: translateY(0);
}

/* --- AJUSTES ESPECÍFICOS PARA PROJECTS PAGE --- */
/* Forzar elementos del nav a blanco SIEMPRE (No blend mode) 
   según requerimiento de usuario solo para esta página */
.projects-page .nav_component {
    mix-blend-mode: normal !important;
}

.projects-page .nav_component .text-style-nav,
.projects-page .nav_component .text-style-nav *,
.projects-page .nav_component .difference-text {
    color: #ffffff !important;
    mix-blend-mode: normal !important;
    background: none !important;
    background-color: transparent !important;
}

.projects-page .nav_component .nav_button div {
    background-color: #ffffff !important;
    mix-blend-mode: normal !important;
}

/* Burger negro en escritorio cuando el menú está abierto (Solo Projects Page) */
@media screen and (min-width: 769px) {
    .projects-page .nav_button.active div {
        background-color: #000000 !important;
        background: #000000 !important;
    }
}

/* Burger y TATC negros en móvil cuando el menú está abierto (Solo Projects Page) */
@media screen and (max-width: 768px) {

    .projects-page .nav_component:has(.nav_button.active) .text-style-nav,
    .projects-page .nav_component:has(.nav_button.active) .text-style-nav * {
        color: #000000 !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    .projects-page .nav_component:has(.nav_button.active) .nav_button div {
        background-color: #000000 !important;
    }
}

/* --- FIN NAVBAR SUPERIOR --- */

.nav_container {
    padding: .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-style-nav {
    font-size: 1rem;
    font-variation-settings: 'wght' 500;
    letter-spacing: -0.07em;
    color: var(--text-color);
    transition: color var(--theme-transition);
}

/* --- 3. BURGER MENU --- */
.nav_button {
    --size: 15px;
    --thickness: 2px;
    --gap: 5px;
    width: var(--size);
    height: var(--size);
    position: relative;
    cursor: pointer;
}

.nav_button div {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--thickness);
    background: var(--text-color);
    transition: top 0.2s cubic-bezier(1, 0.01, 0.43, 1),
        transform 0.2s cubic-bezier(1, 0.01, 0.43, 1),
        opacity 0.2s cubic-bezier(1, 0.01, 0.43, 1),
        background-color var(--theme-transition);
}

.nav_button div:nth-child(1) {
    top: calc(50% - var(--gap));
    transform: translateY(-50%);
}

.nav_button div:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.nav_button div:nth-child(3) {
    top: calc(50% + var(--gap));
    transform: translateY(-50%);
}

.nav_button.active div:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.nav_button.active div:nth-child(2) {
    opacity: 0;
}

.nav_button.active div:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* --- 4. RIGHT NAVBAR (SIDEBAR) --- */
.nav_menu {
    height: 100svh;
    position: fixed;
    /* Fijo para hacer scroll */
    right: 0;
    top: 0;
    display: flex;
    border-left: .8px solid var(--border-color);
    background: var(--bg-color);
    z-index: 999;
    transform: translateX(100%);
    transition: transform var(--theme-transition),
        background-color var(--theme-transition),
        border-left-color var(--theme-transition);
    overflow: visible;
}

.nav_menu.active {
    transform: translateX(0);
}

/* Lock body scroll whenever the menu is open at any breakpoint */
body.menu-open {
    overflow: hidden !important;
}

.nav_menu-container {
    flex-direction: column;
    justify-content: center;
    padding-bottom: 2rem;
    overflow: visible;
}

.nav_list {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-transform: uppercase;
    overflow: visible;
}

.nav_link {
    transform: rotate(-180deg);
    writing-mode: vertical-lr;
    font-size: .88em;
    font-variation-settings: 'wght' 550;
    white-space: nowrap;
}

/* --- 5. SOCIAL ICONS --- */
.social_list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    overflow: visible;
    gap: .5em;
}

.social_list .social_link:first-child img {
    position: relative;
    top: -1.5px;
}

.social_link {
    width: 100%;
    display: flex;
}

.social_link img {
    transition: transform 0.3s cubic-bezier(1, 0.01, 0.43, 1), filter var(--theme-transition);
}

.social_link img:hover {
    transform: scale(1.1);
}

body.dark-mode .social_link img {
    filter: invert(1);
}


/* --- Controles fijos --- */
/* --- CONTENEDOR PADRE TOGGLES --- */
.fixed-controls_component {
    position: fixed;
    /* Fijo para que nos acompañe al hacer scroll */
    bottom: 2rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    z-index: 900;
}

/* --- ESTILO ESPECÍFICO DEL CUBO --- */
.icon-button.is-cube {
    --cube-size: .88rem;
    width: var(--cube-size);
    height: var(--cube-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s cubic-bezier(1, 0.01, 0.43, 1);
}

.icon-button.is-cube svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.icon-button.is-cube svg rect,
.icon-button.is-cube svg line {
    stroke: var(--text-color) !important;
    transition: stroke var(--theme-transition);
}

/* --- ESTILO ESPECÍFICO DEL CUADRADO --- */
.icon-button.is-square {
    --square-size: 0.75rem;
    width: var(--square-size);
    height: var(--square-size);
    background-color: var(--text-color);
    border: none;
    aspect-ratio: 1/1;
    cursor: pointer;
    transition: background-color var(--theme-transition);
}

/* --- ESTILO CUADRADO HUECO (404/Gallery) --- */
.icon-button.is-hollow {
    --square-size: 0.75rem;
    width: var(--square-size);
    height: var(--square-size);
    background-color: transparent;
    border: 1px solid var(--text-color);
    aspect-ratio: 1/1;
    cursor: pointer;
    transition: background-color var(--theme-transition), border-color var(--theme-transition);
    border-radius: 1px;
}



/* --- Mezcla por diferencia ---
   El chrome se pinta en blanco y se mezcla por diferencia con lo que
   tenga detrás, de modo que siempre contrasta sin tener que saber de qué
   color es el fondo en cada página. */
.difference-text {
    mix-blend-mode: difference;
}

/* Solo color blanco por defecto si no es en una página especial como 404 o Projects */
body:not(.body-404) .difference-text {
    color: white;
}

.difference-text div {
    background: white;
}