/* EGALLARDO Portfolio - Custom Styles */

/* Base font size */
html {
    font-size: 16px; /* Base size - estándar */
}

@media (min-width: 1024px) {
    html {
        font-size: 16px; /* Mantener tamaño estándar en desktop */
    }
}

/* Background image for body - funciona desde cualquier directorio */
body {
    background-image: url('../images/bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fijo al hacer scroll - opcional, puedes cambiar a 'scroll' */
    /* Filtros de imagen - AJUSTA ESTOS VALORES */
    filter: saturate(1.2) contrast(1.1) brightness(0.8);
    /* 
    Explicación de los filtros:
    - saturate(1.2) = 120% de saturación (colores más vivos). Valores: 0.5-2.0
    - contrast(1.1) = 110% de contraste (más definición). Valores: 0.5-2.0
    - brightness(0.9) = 90% de brillo (más oscuro). Valores: 0.5-1.5
    
    Para ajustar, cambia estos números:
    - Más saturación: saturate(1.5)
    - Menos saturación: saturate(0.8)
    - Más contraste: contrast(1.3)
    - Menos contraste: contrast(0.9)
    - Más brillo: brightness(1.1)
    - Menos brillo: brightness(0.7)
    */
}

/* Ajuste de ruta para páginas en subdirectorios (blog) */
/* Las páginas del blog necesitarán agregar esto en su <style> local o ajustar la ruta */

/* Overlay para mejorar legibilidad del texto - SOLO en el contenido principal */
main {
    position: relative;
}

main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(246, 248, 248, 0.85); /* Overlay claro para modo light */
    z-index: -1;
    pointer-events: none;
}

/* Overlay para modo oscuro en main */
.dark main::before {
    background: rgba(17, 30, 33, 0.90); /* Overlay oscuro para modo dark */
}

/* Header con efecto glassmorphism (estándar moderno) */
/* Solo aplica al header principal, no a los headers dentro de main (como en artículos del blog) */
header:not(main header) {
    background: rgba(246, 248, 248, 0.7) !important; /* Fondo semi-transparente */
    backdrop-filter: blur(10px) saturate(180%); /* Efecto glassmorphism */
    -webkit-backdrop-filter: blur(10px) saturate(180%); /* Soporte Safari */
    position: sticky;
    top: 0;
    z-index: 50; /* Por encima del contenido */
    border-bottom: 1px solid rgba(23, 176, 207, 0.2);
}

.dark header:not(main header) {
    background: rgba(17, 30, 33, 0.7) !important;
    border-bottom: 1px solid rgba(23, 176, 207, 0.3);
}

/* Headers dentro de main no deben ser sticky */
main header {
    position: static;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
}

/* Footer con efecto glassmorphism (estándar moderno) */
footer {
    background: rgba(246, 248, 248, 0.7) !important; /* Fondo semi-transparente */
    backdrop-filter: blur(10px) saturate(180%); /* Efecto glassmorphism */
    -webkit-backdrop-filter: blur(10px) saturate(180%); /* Soporte Safari */
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(23, 176, 207, 0.2);
}

.dark footer {
    background: rgba(17, 30, 33, 0.7) !important;
    border-top: 1px solid rgba(23, 176, 207, 0.3);
}

/* Ajustes de opacidad - MODIFICA ESTOS VALORES según prefieras */
/* 
Para header y footer:
- 0.7 = 70% opaco (recomendado - buen balance)
- 0.8 = 80% opaco (más sólido, menos imagen visible)
- 0.6 = 60% opaco (más transparente, más imagen visible)
- 0.5 = 50% opaco (muy transparente)

Para main (contenido):
- 0.85 = 85% opaco (recomendado para legibilidad)
- 0.75 = 75% opaco (más imagen visible, menos legible)
- 0.90 = 90% opaco (más legible, menos imagen visible)
*/

/* Line clamp utility for text truncation */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Carrusel Styles */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-dot.active {
    background-color: white !important;
}

/* Mobile Menu Styles */
.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-close {
    display: none;
}

.mobile-menu.open .mobile-menu-close {
    display: block;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #17b0cf;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1493a8;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #2a3639;
}

.dark ::-webkit-scrollbar-thumb {
    background: #17b0cf;
}

/* Loading animation */
.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* Form validation styles */
.form-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.form-success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Project card hover effects */
.project-card {
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-4px);
}

/* Button animations */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

/* Mobile menu animation */
.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Typography improvements */
.text-gradient {
    background: linear-gradient(135deg, #17b0cf, #1493a8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom focus styles */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 176, 207, 0.3);
}

/* Image lazy loading */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-image.loaded {
    opacity: 1;
}

/* Success/Error messages */
.message {
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-weight: 500;
}

.message.success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.message.error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.dark .message.success {
    background-color: #064e3b;
    color: #a7f3d0;
    border-color: #065f46;
}

.dark .message.error {
    background-color: #7f1d1d;
    color: #fca5a5;
    border-color: #991b1b;
}

/* Language toggle styles */
.nav-link {
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Prevent layout shift on language change */
.nav-container {
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Consistent spacing for navigation */
.nav-spacing {
    gap: 2rem; /* 32px - consistent across all pages */
}

/* Carousel touch/swipe improvements */
.carousel-container {
    touch-action: pan-y; /* Allow vertical scroll but handle horizontal swipe */
    user-select: none; /* Prevent text selection during swipe */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.carousel-slide {
    transition: opacity 0.5s ease-in-out;
}

/* Smooth swipe feedback */
.carousel-container:active {
    cursor: grabbing;
}

.carousel-container:not(:active) {
    cursor: grab;
}

/* Improved focus styles for better accessibility */
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(23, 176, 207, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Focus styles for navigation */
nav a:focus-visible {
    outline: 3px solid rgba(23, 176, 207, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-primary {
        color: #0d7a8f !important;
    }
    
    .bg-primary {
        background-color: #0d7a8f !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}