/* Reseteo básico y tipografía limpia */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Llama primero a Source Sans modificada, y usa Myriad Pro Condensed como alternativa del sistema */
    font-family: 'Myriad Pro Light Condensed', 'Myriad Pro Condensed', 'Arial Narrow', sans-serif, 'Source Sans 3'; 
    font-stretch: condensed;
    background-color: #fff;
    color: #000;
    display: block; 
}

/* Estilos de la barra SUPERIOR fija (Antes .sidebar) */
.sidebar {
    width: 100%; /* CAMBIADO: Ocupa todo el ancho de la pantalla */
    height: 90px; /* CAMBIADO: Altura fija para el menú horizontal */
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 40px; /* CAMBIADO: Padding solo a los lados */
    display: flex;
    flex-direction: row; /* CAMBIADO: Alinea los elementos en fila horizontal */
    justify-content: space-between; /* CAMBIADO: Logo a la izquierda, enlaces/back a la derecha */
    align-items: center; /* Centra verticalmente los elementos dentro de los 90px */
    background-color: #fff; /* Asegura fondo blanco para que las fotos pasen por detrás */
    z-index: 1000; /* Asegura que el menú siempre quede por encima de las fotos */
}

.logo h1 a {
    font-size: 23px;
    font-weight: 400; /* Un toque más corporativo para tu nombre */
    letter-spacing: -0.5px;
    text-decoration: none;
    color: #000;
}

.btn-back {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap; /* SOLUCIÓN: Evita que la flecha y 'Back' se separen */
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Espacio controlado entre la flecha y el texto */
    transition: color 0.3s ease;
}

.btn-back:hover {
    color: #999; /* Efecto inverso al menú tradicional */
}

/* Contenedor para agrupar elementos a la derecha si es necesario */
.nav-container {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    list-style: none;
    margin-top: 0; /* CAMBIADO: Quitado el margen superior viejo */
    display: flex; /* CAMBIADO: Alinea los enlaces en fila horizontal */
    gap: 30px; /* CAMBIADO: Añade espacio de separación entre enlaces */
}

.nav-links li {
    margin-bottom: 0; /* CAMBIADO: Quitado el margen inferior viejo */
}

.nav-links a {
    text-decoration: none;
    color: #999;
    font-size: 13px;
    font-weight: 300; /* Peso ligero (Light) para los enlaces */
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    color: #000;
    font-weight: 400; /* Se vuelve ligeramente más nítida al posar el cursor */
}

/* Contenedor de imágenes (Ajustado para la parte superior) */
.gallery-container {
    margin-left: 0; /* CAMBIADO: Quitado el espacio de la izquierda */
    margin-top: 90px; /* CAMBIADO: Empuja las fotos exactamente la altura del menú */
    width: 100%; /* CAMBIADO: Ocupa todo el ancho disponible */
    padding: 0; /* CAMBIADO: Quitado el padding para que las fotos toquen los bordes de la pantalla */
}

/* Estilo para cada bloque de historia fotográfica */
.project-item {
    margin-bottom: 0; 
    width: 100%;
    position: relative !important; 
    display: block !important;     
}

/* Enlace estructural sin bordes ni decoraciones */
.project-link {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* SECONDARY LOCK: Keeps the link background transparent during cursor action states */
.project-link:hover, 
.project-link:active, 
.project-link:focus,
.project-link:hover * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}

.project-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;     
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none; 
}

/* Título de la foto: Diseñado de forma nativa como texto libre y flotante */
/* Estilo para cada bloque de historia fotográfica */
.project-item {
    margin-bottom: 0; 
    width: 100%;
    position: relative !important; 
    display: block !important;     
}

/* ISOLATED LINK: Disconnects entirely from your other CSS hover files */
.index-clean-link,
.index-clean-link:hover,
.index-clean-link:active,
.index-clean-link:focus {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    text-decoration: none !important;
    
    /* NUCLEAR FORCE: Overwrites any background values bleeding in from styles.css */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ISOLATED TITLE: Clean loose white text floating near the boundaries */
.index-clean-title {
    position: absolute !important;
    bottom: 15px !important;    /* <--- DISTANCE FROM BOTTOM EDGE */
    left: 15px !important;      /* <--- DISTANCE FROM LEFT EDGE */
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important; 
    letter-spacing: 0.2px !important;
    color: #fff !important;     /* Pure clean white typography text */
    
    /* GUARANTEES ZERO BACKGROUND RECTANGLES */
    display: block !important;
    width: max-content !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Hover state setup */
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 99999 !important;
}

/* Reveals the clean text without calling old browser link backgrounds */
.index-clean-link:hover .index-clean-title {
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Forces the preview image to stay exactly at its native size */
.monaco-hover img,
.monaco-hover-content img,
.image-preview img,
img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    zoom: 1 !important;
}

/* ======================================================== */
/* MOBILE FIX: STACKS BAR WHEN SCREEN IS LESS THAN 600PX    */
/* ======================================================== */
@media (max-width: 600px) {
    /* 1. Stacks the logo, links, and back button vertically */
    .sidebar {
        flex-direction: column !important;
        height: auto !important;
        padding: 15px 10px !important;
        gap: 12px !important;
        background-color: #ffffff !important;
    }

    /* 2. Shrinks your name slightly so it fits perfectly on small screens */
    .logo h1 a {
        font-size: 18px !important;
        text-align: center !important;
        display: block !important;
    }

    /* 3. Groups the links and back button cleanly together */
    .nav-container {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 4. Spaces out CONVIVIUM, EKTHESIS, VARII, and RESCRIBE horizontally */
    .nav-links {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    /* 5. Lowers the image gallery so it doesn't get hidden behind the new taller menu */
    .gallery-container {
        margin-top: 135px !important;
    }
}
/* ======================================================== */