/**
 * WPMINI Sticky CSS Library
 * Universal sticky library for any element
 * 
 * @package WPMINI
 * @version 2.0.0
 */

/* ========================================
   BASE STICKY CLASSES
   ======================================== */

/* Primary Sticky Class */
.sticky,
.wpmini-sticky {
    position: relative;
    transition: all 0.3s ease;
    will-change: transform, opacity;
    display: none; /* Ẩn ban đầu */
}

/* Active Sticky State */
.sticky.is-sticky,
.wpmini-sticky.is-sticky,
.sticky.sticky-active,
.wpmini-sticky.sticky-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: block; /* Hiển thị khi active */
}

/* Bottom Sticky */
.sticky.is-sticky-bottom,
.wpmini-sticky.is-sticky-bottom,
.sticky.sticky-active-bottom,
.wpmini-sticky.sticky-active-bottom {
    top: auto;
    bottom: 0;
}

/* ========================================
   STICKY EFFECTS
   ======================================== */

/* Fade Effect */
.sticky.is-sticky-fade,
.wpmini-sticky.is-sticky-fade,
.sticky.sticky-active-fade,
.wpmini-sticky.sticky-active-fade {
    opacity: 0.9;
}

/* Scale Effect */
.sticky.is-sticky-scale,
.wpmini-sticky.is-sticky-scale,
.sticky.sticky-active-scale,
.wpmini-sticky.sticky-active-scale {
    transform: scale(0.95);
}

/* Blur Effect */
.sticky.is-sticky-blur,
.wpmini-sticky.is-sticky-blur,
.sticky.sticky-active-blur,
.wpmini-sticky.sticky-active-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Background Color Effect */
.sticky.is-sticky-color,
.wpmini-sticky.is-sticky-color,
.sticky.sticky-active-color,
.wpmini-sticky.sticky-active-color {
    background-color: rgba(255, 255, 255, 0.95);
}

/* Border Effect */
.sticky.is-sticky-border,
.wpmini-sticky.is-sticky-border,
.sticky.sticky-active-border,
.wpmini-sticky.sticky-active-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Shadow Effect */
.sticky.is-sticky-shadow,
.wpmini-sticky.is-sticky-shadow,
.sticky.sticky-active-shadow,
.wpmini-sticky.sticky-active-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ========================================
   SCROLL DIRECTION EFFECTS
   ======================================== */

/* Scroll Down - Hide */
.sticky.scroll-down,
.wpmini-sticky.scroll-down,
.sticky.sticky-active.scroll-down,
.wpmini-sticky.sticky-active.scroll-down {
    transform: translateY(-100%);
}

/* Scroll Up - Show */
.sticky.scroll-up,
.wpmini-sticky.scroll-up,
.sticky.sticky-active.scroll-up,
.wpmini-sticky.sticky-active.scroll-up {
    transform: translateY(0);
}

/* ========================================
   VELOCITY CLASSES
   ======================================== */

/* Fast Scroll */
.sticky.fast-scroll,
.wpmini-sticky.fast-scroll {
    transition-duration: 0.1s;
}

/* Slow Scroll */
.sticky.slow-scroll,
.wpmini-sticky.slow-scroll {
    transition-duration: 0.5s;
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

/* Device-specific visibility can be handled by JavaScript */

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Sticky Spacer */
.sticky-spacer,
.wpmini-sticky-spacer {
    display: block;
    height: 0;
    overflow: hidden;
}

/* Sticky Container */
.sticky-container,
.wpmini-sticky-container {
    position: relative;
    overflow: hidden;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Slide Down Animation */
@keyframes stickySlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide Up Animation */
@keyframes stickySlideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Fade In Animation */
@keyframes stickyFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale In Animation */
@keyframes stickyScaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply Animations */
.sticky.sticky-active,
.wpmini-sticky.sticky-active,
.sticky.is-sticky,
.wpmini-sticky.is-sticky {
    animation: stickySlideDown 0.3s ease-out;
}

.sticky.sticky-fade-in,
.wpmini-sticky.sticky-fade-in {
    animation: stickyFadeIn 0.3s ease-out;
}

.sticky.sticky-scale-in,
.wpmini-sticky.sticky-scale-in {
    animation: stickyScaleIn 0.3s ease-out;
}

/* ========================================
   ADVANCED EFFECTS
   ======================================== */

/* Custom Properties for Advanced Effects */
.sticky,
.wpmini-sticky {
    --scroll-progress: 0;
    --parallax-offset: 0;
    --sticky-height: auto;
    --sticky-opacity: 1;
    --sticky-blur: 0px;
    --sticky-scale: 1;
}

/* Parallax Effect */
.sticky.is-sticky-parallax,
.wpmini-sticky.is-sticky-parallax {
    transform: translateY(calc(var(--parallax-offset) * 0.5px));
}

/* Progress-based Effects */
.sticky.is-sticky-progress,
.wpmini-sticky.is-sticky-progress {
    background-color: rgba(255, 255, 255, calc(var(--scroll-progress) * 0.9));
}

/* Height-based Effects */
.sticky.is-sticky-height,
.wpmini-sticky.is-sticky-height {
    height: calc(var(--sticky-height) * (1 - var(--scroll-progress) * 0.3));
}

/* Dynamic Opacity */
.sticky.is-sticky-dynamic-opacity,
.wpmini-sticky.is-sticky-dynamic-opacity {
    opacity: var(--sticky-opacity);
}

/* Dynamic Blur */
.sticky.is-sticky-dynamic-blur,
.wpmini-sticky.is-sticky-dynamic-blur {
    backdrop-filter: blur(var(--sticky-blur));
    -webkit-backdrop-filter: blur(var(--sticky-blur));
}

/* Dynamic Scale */
.sticky.is-sticky-dynamic-scale,
.wpmini-sticky.is-sticky-dynamic-scale {
    transform: scale(var(--sticky-scale));
}

/* ========================================
   POSITIONING VARIATIONS
   ======================================== */

/* Top Sticky */
.sticky.is-sticky-top,
.wpmini-sticky.is-sticky-top {
    top: 0;
    bottom: auto;
}

/* Bottom Sticky */
.sticky.is-sticky-bottom,
.wpmini-sticky.is-sticky-bottom,
.sticky.sticky-active-bottom,
.wpmini-sticky.sticky-active-bottom {
    top: auto;
    bottom: 0;
}

/* Left Sticky */
.sticky.is-sticky-left,
.wpmini-sticky.is-sticky-left {
    left: 0;
    right: auto;
    width: auto;
}

/* Right Sticky */
.sticky.is-sticky-right,
.wpmini-sticky.is-sticky-right {
    left: auto;
    right: 0;
    width: auto;
}

/* ========================================
   Z-INDEX VARIATIONS
   ======================================== */

.sticky.z-1000,
.wpmini-sticky.z-1000 { z-index: 1000; }

.sticky.z-1010,
.wpmini-sticky.z-1010 { z-index: 1010; }

.sticky.z-1020,
.wpmini-sticky.z-1020 { z-index: 1020; }

.sticky.z-1030,
.wpmini-sticky.z-1030 { z-index: 1030; }

.sticky.z-1040,
.wpmini-sticky.z-1040 { z-index: 1040; }

.sticky.z-1050,
.wpmini-sticky.z-1050 { z-index: 1050; }

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .sticky,
    .wpmini-sticky {
        transition: none;
        animation: none;
    }
}

/* High Contrast */
@media (prefers-contrast: high) {
    .sticky.is-sticky-border,
    .wpmini-sticky.is-sticky-border {
        border-bottom: 2px solid currentColor;
    }
    
    .sticky.is-sticky-shadow,
    .wpmini-sticky.is-sticky-shadow {
        box-shadow: 0 2px 10px currentColor;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .sticky,
    .wpmini-sticky {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Hardware Acceleration */
.sticky,
.wpmini-sticky {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimized Transitions */
.sticky.is-sticky,
.wpmini-sticky.is-sticky {
    will-change: transform, opacity, box-shadow;
}

/* ========================================
   DEBUG MODE
   ======================================== */

/* Debug Outline */
.sticky.debug,
.wpmini-sticky.debug {
    outline: 2px solid red;
    outline-offset: 2px;
}

.sticky.debug.is-sticky,
.wpmini-sticky.debug.is-sticky,
.sticky.debug.sticky-active,
.wpmini-sticky.debug.sticky-active {
    outline-color: green;
}

/* ========================================
   LOGO LOADING FIXES
   ======================================== */

/* Fix for logo loading placeholder */
.custom-logo-link {
    display: inline-block;
    line-height: 0; /* Remove extra spacing */
}

.custom-logo-link img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

/* Hide placeholder when image is loading */
.custom-logo-link img:not([src]) {
    opacity: 0;
    visibility: hidden;
}

/* Show image when it has src attribute */
.custom-logo-link img[src] {
    opacity: 1;
    visibility: visible;
}

/* Specific fix for sticky header logo */
.header-sticky-desktop .custom-logo-link img {
    max-height: 54px; /* Match the height from your logo */
    width: auto;
    object-fit: contain;
}

/* Ensure logo container maintains proper dimensions during loading */
.header-sticky-desktop .custom-logo-link {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Fix for lazy loading images */
.custom-logo-link img.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-logo-link img.lazy-image.loaded {
    opacity: 1;
}

/* Prevent layout shift during image loading */
.custom-logo-link {
    contain: layout style paint;
}

/* ========================================
   RESPONSIVE DEVICE-SPECIFIC VISIBILITY
   ======================================== */

/* Mobile Only Sticky - Ẩn trên Desktop (>= 992px) */
@media (min-width: 992px) {
    .sticky-mobile-only,
    .header-sticky-mobile,
    .sticky.sticky-mobile-only,
    .wpmini-sticky.sticky-mobile-only {
        display: none !important;
    }
}

/* Desktop Only Sticky - Ẩn trên Mobile (< 992px) */
@media (max-width: 991.98px) {
    .sticky-desktop-only,
    .header-sticky-desktop,
    .sticky.sticky-desktop-only,
    .wpmini-sticky.sticky-desktop-only {
        display: none !important;
    }
}

/* Tablet and Above - Ẩn trên Mobile (>= 768px) */
@media (min-width: 768px) {
    .sticky-mobile-small-only {
        display: none !important;
    }
}

/* Mobile Small Only - Ẩn trên Tablet và Desktop (< 768px) */
@media (max-width: 767.98px) {
    .sticky-tablet-desktop-only {
        display: none !important;
    }
}