/**
 * Sticky Nav - Base Styles
 * 
 * Minimal base styles for functionality
 * Visual styling should be done through Bricks style panel
 */

/* Container Base Styles */
.sticky-nav-container,
.sticky-nav-standalone {
    display: flex;
    z-index: 100;
    transition: all 0.3s ease;
}

/* Horizontal Orientation */
.sticky-nav-container--horizontal,
.sticky-nav-standalone--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Vertical Orientation */
.sticky-nav-container--vertical,
.sticky-nav-standalone--vertical {
    flex-direction: column;
}

/* Sticky State */
.sticky-nav-container.is-sticky,
.sticky-nav-standalone.is-sticky {
    position: sticky;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Nav Item Base Styles */
.sticky-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

/* Icon Styles */
.sticky-nav-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Default icon size */
    line-height: 1;
}

.sticky-nav-item__icon svg,
.sticky-nav-item__icon i {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* SVG Icon as Image */
.sticky-nav-item__icon img.sticky-nav-svg-icon {
    width: 1em;
    height: 1em;
    display: block;
    object-fit: contain;
}

/* Label Styles */
.sticky-nav-item__label {
    display: inline-block;
}

/* Active State - Default Styles */
.sticky-nav-item.is-active {
    /* Default active styles - can be overridden in Bricks */
    font-weight: 600;
}

/* Active State - Underline Effect */
/* Can be styled via Bricks style panel using .sticky-nav-item.is-active::after */

/* Hover State */
/* Can be styled via Bricks style panel using .sticky-nav-item:hover */

/* Focus State for Accessibility */
.sticky-nav-item:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Icon Position Modifiers */
.sticky-nav-item.icon-left {
    flex-direction: row;
}

/* Responsive Helpers */
@media (max-width: 768px) {
    .sticky-nav-container--horizontal,
    .sticky-nav-standalone--horizontal {
        flex-wrap: wrap;
    }
}

/* Smooth Scroll Support */
html {
    scroll-behavior: auto; /* Let JS handle smooth scrolling for better control */
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    .sticky-nav-container,
    .sticky-nav-standalone,
    .sticky-nav-item {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .sticky-nav-container,
    .sticky-nav-standalone {
        position: static !important;
    }
}

/* Entrance Animations */
.sticky-nav-entrance {
    animation-fill-mode: both;
    animation-duration: var(--entrance-duration, 0.3s);
}

/* Fade In Animation */
.sticky-nav-entrance--fade-in {
    animation-name: stickyNavFadeIn;
    animation-duration: var(--entrance-duration, 0.3s);
}

@keyframes stickyNavFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide Down Animation */
.sticky-nav-entrance--slide-down {
    animation-name: stickyNavSlideDown;
    animation-duration: var(--entrance-duration, 0.4s);
}

@keyframes stickyNavSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Up Animation */
.sticky-nav-entrance--slide-up {
    animation-name: stickyNavSlideUp;
    animation-duration: var(--entrance-duration, 0.4s);
}

@keyframes stickyNavSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale Up Animation */
.sticky-nav-entrance--scale-up {
    animation-name: stickyNavScaleUp;
    animation-duration: var(--entrance-duration, 0.35s);
}

@keyframes stickyNavScaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce Down Animation */
.sticky-nav-entrance--bounce-down {
    animation-name: stickyNavBounceDown;
    animation-duration: var(--entrance-duration, 0.6s);
}

@keyframes stickyNavBounceDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    50% {
        opacity: 1;
        transform: translateY(5px);
    }
    70% {
        transform: translateY(-3px);
    }
    90% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .sticky-nav-entrance {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}