/* ============================================
   RSL Sticky Elements Component
   Version: 2.0.0
   Description: Premium sticky positioning system
   with visual state indicators, accessibility
   features, and responsive breakpoints.

   BACKWARD COMPATIBLE: V1 classes (.sticky-element,
   .sticky-top, etc.) are preserved and unchanged.
   ============================================ */

/* ══════════════════════════════════════════════
   V1 LEGACY CLASSES (DO NOT MODIFY)
   These classes are preserved for backward
   compatibility with existing implementations.
   ══════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   Base Sticky Element (V1)
   ────────────────────────────────────────────── */

.sticky-element {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
}

/* ──────────────────────────────────────────────
   Position Variants (V1)
   ────────────────────────────────────────────── */

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.sticky-top-sm {
    position: -webkit-sticky;
    position: sticky;
    top: 0.5rem;
}

.sticky-top-md {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
}

.sticky-top-lg {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
}

/* ──────────────────────────────────────────────
   Z-Index Variants (V1)
   ────────────────────────────────────────────── */

.sticky-z-10 {
    z-index: 10;
}

.sticky-z-20 {
    z-index: 20;
}

.sticky-z-50 {
    z-index: 50;
}

.sticky-z-100 {
    z-index: 100;
}

/* ──────────────────────────────────────────────
   Responsive Sticky (V1)
   ────────────────────────────────────────────── */

/* Only sticky on medium screens and up */
@media (max-width: 767px) {
    .sticky-md-up {
        position: static;
    }
}

@media (min-width: 768px) {
    .sticky-md-up {
        position: -webkit-sticky;
        position: sticky;
        top: 1rem;
    }
}

/* Only sticky on large screens and up */
@media (max-width: 1023px) {
    .sticky-lg-up {
        position: static;
    }
}

@media (min-width: 1024px) {
    .sticky-lg-up {
        position: -webkit-sticky;
        position: sticky;
        top: 1rem;
    }
}


/* ══════════════════════════════════════════════
   V2 RSL STICKY COMPONENT
   New premium sticky system with data attributes,
   state management, and accessibility features.
   ══════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   CSS Custom Properties
   ────────────────────────────────────────────── */

:root {
    /* Offsets */
    --rsl-sticky-offset: 0;
    --rsl-sticky-offset-xs: 0;
    --rsl-sticky-offset-sm: 0.5rem;
    --rsl-sticky-offset-md: 1rem;
    --rsl-sticky-offset-lg: 1.5rem;
    --rsl-sticky-offset-xl: 2rem;

    /* Z-index layers */
    --rsl-sticky-z-base: 100;
    --rsl-sticky-z-header: 1000;
    --rsl-sticky-z-modal: 1050;

    /* Visual effects */
    --rsl-sticky-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --rsl-sticky-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --rsl-sticky-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --rsl-sticky-transition: all 0.2s ease;
    --rsl-sticky-transition-shadow: box-shadow 0.2s ease;

    /* Colors for stuck state */
    --rsl-sticky-bg: rgba(255, 255, 255, 0.98);
    --rsl-sticky-border: rgba(0, 0, 0, 0.1);
}

/* Dark mode variables */
[data-theme="dark"] {
    --rsl-sticky-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --rsl-sticky-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --rsl-sticky-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --rsl-sticky-bg: rgba(30, 30, 30, 0.98);
    --rsl-sticky-border: rgba(255, 255, 255, 0.1);
}

/* ──────────────────────────────────────────────
   Base RSL Sticky Element
   ────────────────────────────────────────────── */

[data-rsl-sticky] {
    position: -webkit-sticky;
    position: sticky;
    top: var(--rsl-sticky-offset, 0);
    z-index: var(--rsl-sticky-z-base);
    transition: var(--rsl-sticky-transition);
    will-change: transform, box-shadow;
}

/* Accessibility: Focus indicator */
[data-rsl-sticky]:focus-visible {
    outline: 3px solid var(--rsl-primary, #6E7BFF);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────
   Offset Variants (data-sticky-offset)
   ────────────────────────────────────────────── */

[data-sticky-offset="0"],
[data-sticky-offset="none"] {
    top: 0;
}

[data-sticky-offset="xs"] {
    top: var(--rsl-sticky-offset-xs);
}

[data-sticky-offset="sm"] {
    top: var(--rsl-sticky-offset-sm);
}

[data-sticky-offset="md"] {
    top: var(--rsl-sticky-offset-md);
}

[data-sticky-offset="lg"] {
    top: var(--rsl-sticky-offset-lg);
}

[data-sticky-offset="xl"] {
    top: var(--rsl-sticky-offset-xl);
}

/* Custom pixel offset via CSS variable set by JS */
[data-rsl-sticky][style*="--sticky-offset"] {
    top: var(--sticky-offset);
}

/* ──────────────────────────────────────────────
   Stuck State Styles
   Applied via JavaScript when element becomes stuck
   ────────────────────────────────────────────── */

.rsl-sticky-stuck {
    box-shadow: var(--rsl-sticky-shadow);
}

/* Shadow variants */
.rsl-sticky-stuck[data-sticky-shadow="none"] {
    box-shadow: none;
}

.rsl-sticky-stuck[data-sticky-shadow="sm"] {
    box-shadow: var(--rsl-sticky-shadow-sm);
}

.rsl-sticky-stuck[data-sticky-shadow="lg"] {
    box-shadow: var(--rsl-sticky-shadow-lg);
}

/* Background change when stuck */
[data-sticky-bg-stuck="true"].rsl-sticky-stuck {
    background-color: var(--rsl-sticky-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Border when stuck */
[data-sticky-border="true"].rsl-sticky-stuck {
    border-bottom: 1px solid var(--rsl-sticky-border);
}

/* Scale effect when stuck */
[data-sticky-scale="true"].rsl-sticky-stuck {
    transform: scale(0.98);
}

/* ──────────────────────────────────────────────
   Boundary State
   Applied when element hits its boundary container
   ────────────────────────────────────────────── */

.rsl-sticky-boundary {
    position: absolute;
    bottom: 0;
}

/* ──────────────────────────────────────────────
   Stacking Multiple Sticky Elements
   ────────────────────────────────────────────── */

[data-sticky-stack] {
    /* Stack order is set dynamically via CSS variable */
    top: calc(var(--rsl-sticky-offset, 0) + var(--sticky-stack-offset, 0px));
}

/* Named stack groups for automatic stacking */
[data-sticky-group] {
    /* Group offset calculated by JavaScript */
}

/* ──────────────────────────────────────────────
   Z-Index Variants
   ────────────────────────────────────────────── */

[data-sticky-z="low"] {
    z-index: 10;
}

[data-sticky-z="base"],
[data-sticky-z="default"] {
    z-index: var(--rsl-sticky-z-base);
}

[data-sticky-z="high"] {
    z-index: var(--rsl-sticky-z-header);
}

[data-sticky-z="overlay"] {
    z-index: var(--rsl-sticky-z-modal);
}

/* ──────────────────────────────────────────────
   Direction Sensitivity
   ────────────────────────────────────────────── */

/* Hidden state for scroll-direction hide */
[data-rsl-sticky].rsl-sticky-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Show on scroll up */
[data-sticky-direction="up"].rsl-sticky-show-up {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ──────────────────────────────────────────────
   Responsive Breakpoints (V2)
   ────────────────────────────────────────────── */

/* Extra Small: Always sticky (default) */
[data-sticky-breakpoint="xs"] {
    position: -webkit-sticky;
    position: sticky;
}

/* Small: Sticky at 480px+ */
[data-sticky-breakpoint="sm"] {
    position: static;
}
@media (min-width: 480px) {
    [data-sticky-breakpoint="sm"] {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Medium: Sticky at 768px+ */
[data-sticky-breakpoint="md"] {
    position: static;
}
@media (min-width: 768px) {
    [data-sticky-breakpoint="md"] {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Large: Sticky at 1024px+ */
[data-sticky-breakpoint="lg"] {
    position: static;
}
@media (min-width: 1024px) {
    [data-sticky-breakpoint="lg"] {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Extra Large: Sticky at 1280px+ */
[data-sticky-breakpoint="xl"] {
    position: static;
}
@media (min-width: 1280px) {
    [data-sticky-breakpoint="xl"] {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* XXL: Sticky at 1600px+ */
[data-sticky-breakpoint="xxl"] {
    position: static;
}
@media (min-width: 1600px) {
    [data-sticky-breakpoint="xxl"] {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* ──────────────────────────────────────────────
   Sticky Variants / Presets
   ────────────────────────────────────────────── */

/* Header: Fixed to top with shadow */
[data-sticky-variant="header"] {
    top: 0;
    z-index: var(--rsl-sticky-z-header);
    width: 100%;
}

[data-sticky-variant="header"].rsl-sticky-stuck {
    box-shadow: var(--rsl-sticky-shadow);
}

/* Sidebar: Sticky with offset for header clearance */
[data-sticky-variant="sidebar"] {
    top: calc(var(--rsl-sticky-offset-lg) + 60px); /* Account for header */
    align-self: flex-start;
}

/* Table Header: For sticky table headers */
[data-sticky-variant="table-header"] {
    top: 0;
    background: var(--rsl-sticky-bg);
    z-index: 10;
}

/* Tab Bar: Sticky tabs below a header */
[data-sticky-variant="tabs"] {
    top: 60px; /* Below header */
    z-index: calc(var(--rsl-sticky-z-header) - 1);
}

[data-sticky-variant="tabs"].rsl-sticky-stuck {
    box-shadow: var(--rsl-sticky-shadow-sm);
    border-bottom: 1px solid var(--rsl-sticky-border);
}

/* Floating Action: Sticky button/action area */
[data-sticky-variant="action"] {
    bottom: 1rem;
    top: auto;
    position: -webkit-sticky;
    position: sticky;
    z-index: var(--rsl-sticky-z-base);
}

/* TOC: Table of Contents sidebar */
[data-sticky-variant="toc"] {
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* ──────────────────────────────────────────────
   Skip Link (Accessibility)
   Auto-generated for sticky headers
   ────────────────────────────────────────────── */

.rsl-sticky-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: var(--rsl-primary, #6E7BFF);
    color: white;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    z-index: calc(var(--rsl-sticky-z-header) + 1);
    transition: top 0.2s ease;
}

.rsl-sticky-skip-link:focus {
    top: 0;
    outline: 3px solid var(--rsl-primary, #6E7BFF);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────
   Sentinel Element (IntersectionObserver)
   Invisible marker for detecting stuck state
   ────────────────────────────────────────────── */

.rsl-sticky-sentinel {
    position: absolute;
    width: 1px;
    height: 1px;
    top: calc(var(--rsl-sticky-offset, 0) * -1 - 1px);
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ──────────────────────────────────────────────
   Visually Hidden (Screen Reader Only)
   ────────────────────────────────────────────── */

.rsl-sticky-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ──────────────────────────────────────────────
   Reduced Motion Support
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-rsl-sticky],
    .rsl-sticky-stuck,
    .rsl-sticky-hidden,
    .rsl-sticky-skip-link {
        transition: none;
    }
}

/* ──────────────────────────────────────────────
   High Contrast Mode Support
   ────────────────────────────────────────────── */

@media (forced-colors: active) {
    .rsl-sticky-stuck {
        border-bottom: 2px solid CanvasText;
    }

    .rsl-sticky-skip-link:focus {
        outline: 3px solid Highlight;
    }
}

/* ──────────────────────────────────────────────
   Print Styles
   ────────────────────────────────────────────── */

@media print {
    [data-rsl-sticky],
    .sticky-element,
    .sticky-top,
    .sticky-top-sm,
    .sticky-top-md,
    .sticky-top-lg {
        position: static !important;
        box-shadow: none !important;
    }
}

/* ──────────────────────────────────────────────
   Utility Classes
   ────────────────────────────────────────────── */

/* Disable sticky behavior */
.rsl-sticky-disabled {
    position: static !important;
}

/* Force sticky behavior */
.rsl-sticky-forced {
    position: -webkit-sticky !important;
    position: sticky !important;
}

/* Smooth scroll container for sticky boundary */
.rsl-sticky-container {
    position: relative;
    overflow: visible;
}

/* Full-width sticky (breaks out of container) */
.rsl-sticky-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* ============================================
   FilterBus Visibility
   Show/hide sticky elements based on filter state
   ============================================ */

/* Only apply transitions AFTER initialization to prevent flicker on page load */
[data-rsl-sticky].rsl-sticky-initialized {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, box-shadow 0.2s ease;
}

[data-rsl-sticky].rsl-sticky-filter-hidden {
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}

/* For grid layouts - hide the slot-item container when sticky is hidden */
.slot-item:has(> [data-rsl-sticky].rsl-sticky-filter-hidden) {
    display: none;
}

/* Alternative: fade only without collapsing (use data-filter-fade-only attribute) */
[data-rsl-sticky][data-filter-fade-only].rsl-sticky-filter-hidden {
    opacity: 0.3;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    position: relative;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    [data-rsl-sticky].rsl-sticky-initialized {
        transition: none;
    }

    [data-rsl-sticky].rsl-sticky-filter-hidden {
        transition: none;
    }
}