/**
 * Scroll Navigation Styles
 * Includes: Scroll-to-Top Button, Section Navigation
 * Compatible with light and dark themes using design tokens
 */

/* ============================================================
   CSS Variables - Component-specific tokens
   ============================================================ */
:root {
    /* Scroll to Top */
    --scroll-to-top-bg: var(--color-primary-500);
    --scroll-to-top-bg-hover: var(--color-primary-600);
    --scroll-to-top-text: var(--color-neutral-0);
    --scroll-to-top-shadow: var(--shadow-lg);

    /* Section Navigation */
    --section-nav-bg: var(--bg-primary);
    --section-nav-bg-hover: var(--bg-secondary);
    --section-nav-text: var(--text-primary);
    --section-nav-text-muted: var(--text-muted);
    --section-nav-dot-bg: var(--color-neutral-300);
    --section-nav-dot-active: var(--color-primary-500);
    --section-nav-shadow: var(--shadow-md);
    --section-nav-border: var(--border-default);
}

[data-theme="dark"] {
    --scroll-to-top-bg: var(--color-primary-600);
    --scroll-to-top-bg-hover: var(--color-primary-500);
    --section-nav-dot-bg: var(--color-neutral-600);
}

/* ============================================================
   Scroll to Top Button
   ============================================================ */
.scroll-to-top {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scroll-to-top-bg);
    color: var(--scroll-to-top-text);
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity var(--duration-300) var(--ease-in-out),
        visibility var(--duration-300) var(--ease-in-out),
        transform var(--duration-300) var(--ease-in-out),
        background-color var(--duration-200) var(--ease-in-out),
        filter var(--duration-200) var(--ease-in-out);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--scroll-to-top-bg-hover);
}

.scroll-to-top:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.3);
}

.scroll-to-top:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.scroll-to-top i {
    font-size: 1rem;
    line-height: 1;
}

/* Position variants */
.scroll-to-top-position-bottom-right {
    bottom: var(--space-5);
    right: var(--space-5);
}

.scroll-to-top-position-bottom-left {
    bottom: var(--space-5);
    left: var(--space-5);
}

.scroll-to-top-position-bottom-center {
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
}

.scroll-to-top-position-bottom-center.visible {
    transform: translateX(-50%) translateY(0);
}

.scroll-to-top-position-bottom-center.scroll-to-top-animated:hover {
    transform: translateX(-50%);
}

.scroll-to-top-position-bottom-center.scroll-to-top-animated:active {
    transform: translateX(-50%);
}

.scroll-to-top-position-top-right {
    top: calc(var(--header-height) + var(--space-5));
    right: var(--space-5);
}

.scroll-to-top-position-top-left {
    top: calc(var(--header-height) + var(--space-5));
    left: var(--space-5);
}

/* Size variants */
.scroll-to-top-size-small {
    width: 36px;
    height: 36px;
}

.scroll-to-top-size-small i {
    font-size: 0.875rem;
}

.scroll-to-top-size-medium {
    width: 44px;
    height: 44px;
}

.scroll-to-top-size-medium i {
    font-size: 1rem;
}

.scroll-to-top-size-large {
    width: 52px;
    height: 52px;
}

.scroll-to-top-size-large i {
    font-size: 1.25rem;
}

/* Shape variants */
.scroll-to-top-shape-circle {
    border-radius: var(--radius-full);
}

.scroll-to-top-shape-rounded {
    border-radius: var(--radius-lg);
}

.scroll-to-top-shape-square {
    border-radius: var(--radius-base);
}

/* Shadow */
.scroll-to-top-shadow {
    box-shadow: var(--scroll-to-top-shadow);
}

/* Animation */
.scroll-to-top-animated:hover {
    filter: brightness(1.15);
}

.scroll-to-top-animated:active {
    filter: brightness(0.9);
}

/* ============================================================
   Section Navigation
   ============================================================ */
.section-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--section-nav-bg);
    border: 1px solid var(--section-nav-border);
    border-radius: var(--radius-xl);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-300) var(--ease-in-out),
        visibility var(--duration-300) var(--ease-in-out);
}

.section-nav.visible {
    opacity: 1;
    visibility: visible;
}

/* Position variants */
.section-nav-position-left {
    left: var(--space-4);
}

.section-nav-position-right {
    right: var(--space-4);
}

/* Size variants */
.section-nav-size-small .section-nav-arrow {
    width: 28px;
    height: 28px;
}

.section-nav-size-small .section-nav-dot {
    width: 8px;
    height: 8px;
}

.section-nav-size-medium .section-nav-arrow {
    width: 32px;
    height: 32px;
}

.section-nav-size-medium .section-nav-dot {
    width: 10px;
    height: 10px;
}

.section-nav-size-large .section-nav-arrow {
    width: 40px;
    height: 40px;
}

.section-nav-size-large .section-nav-dot {
    width: 12px;
    height: 12px;
}

/* Shadow */
.section-nav-shadow {
    box-shadow: var(--section-nav-shadow);
}

/* Navigation arrows */
.section-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--section-nav-text);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition:
        background-color var(--duration-200) var(--ease-in-out),
        color var(--duration-200) var(--ease-in-out);
}

.section-nav-arrow:hover:not(:disabled) {
    background: var(--section-nav-bg-hover);
}

.section-nav-arrow:focus {
    outline: none;
}

.section-nav-arrow:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.section-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.section-nav-arrow i {
    font-size: 0.75rem;
}

/* Dots container */
.section-nav-dots {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

/* Individual dots */
.section-nav-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--section-nav-dot-bg);
    border: none;
    cursor: pointer;
    padding: 0;
    transition:
        background-color var(--duration-200) var(--ease-in-out),
        transform var(--duration-200) var(--ease-in-out);
    position: relative;
}

.section-nav-dot:hover {
    background: var(--section-nav-dot-active);
    transform: scale(1.2);
}

.section-nav-dot:focus {
    outline: none;
}

.section-nav-dot:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.section-nav-dot.active {
    background: var(--section-nav-dot-active);
    transform: scale(1.3);
}

/* Dot labels (tooltip) */
.section-nav-dot[data-label]::before {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + var(--space-2));
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-inverse);
    color: var(--text-inverse);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-300) var(--ease-out),
        visibility var(--duration-300) var(--ease-out),
        transform var(--duration-300) var(--ease-out);
    pointer-events: none;
}

.section-nav-position-left .section-nav-dot[data-label]::before {
    right: auto;
    left: calc(100% + var(--space-2));
    transform: translateY(-50%) translateX(-8px);
}

.section-nav-dot[data-label]:hover::before,
.section-nav-dot[data-label]:focus::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Active dot label - keep primary styling so fade-out doesn't flash white */
.section-nav-dot.active[data-label]::before {
    background: var(--section-nav-dot-active);
    color: var(--color-neutral-0);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) translateX(0);
}

/* Active dot label - shown briefly on section change, then auto-hidden */
.section-nav-dot.active.show-label[data-label]::before {
    opacity: 1;
    visibility: visible;
}

/* Animation */
.section-nav-animated .section-nav-arrow,
.section-nav-animated .section-nav-dot {
    transition:
        background-color var(--duration-200) var(--ease-in-out),
        transform var(--duration-200) var(--ease-bounce);
}

/* ============================================================
   Mobile Responsive
   ============================================================ */
@media (max-width: 768px) {
    /* Scroll to Top - adjust position */
    .scroll-to-top-position-bottom-right,
    .scroll-to-top-position-bottom-left {
        bottom: var(--space-4);
    }

    .scroll-to-top-position-bottom-right {
        right: var(--space-4);
    }

    .scroll-to-top-position-bottom-left {
        left: var(--space-4);
    }

    .scroll-to-top-position-bottom-center {
        bottom: var(--space-4);
    }

    /* Reduce size on mobile */
    .scroll-to-top-size-large {
        width: 44px;
        height: 44px;
    }

    .scroll-to-top-size-large i {
        font-size: 1rem;
    }

    /* Section Navigation - hide by default on mobile */
    .section-nav:not(.section-nav-mobile-enabled) {
        display: none;
    }

    /* Mobile-enabled Section Navigation */
    .section-nav.section-nav-mobile-enabled {
        /* Reset desktop vertical positioning */
        top: auto;
        left: auto;
        right: auto;
        transform: none;

        /* Mobile positioning - bottom of screen */
        bottom: var(--space-4);
        flex-direction: row;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);

        /* Apply scale from CSS variable */
        scale: var(--section-nav-mobile-scale, 0.85);
        transform-origin: center bottom;
    }

    /* Mobile position variants */
    .section-nav.section-nav-mobile-position-bottom-left {
        left: var(--space-4);
        transform-origin: left bottom;
    }

    .section-nav.section-nav-mobile-position-bottom-center {
        left: 50%;
        transform: translateX(-50%);
        transform-origin: center bottom;
    }

    .section-nav.section-nav-mobile-position-bottom-right {
        right: var(--space-4);
        transform-origin: right bottom;
    }

    /* Mobile compact layout - horizontal dots */
    .section-nav.section-nav-mobile-compact .section-nav-dots {
        flex-direction: row;
        padding: 0 var(--space-2);
    }

    /* Adjust arrow icons for horizontal layout */
    .section-nav.section-nav-mobile-enabled .section-nav-up i::before {
        content: "\f053"; /* fa-chevron-left */
    }

    .section-nav.section-nav-mobile-enabled .section-nav-down i::before {
        content: "\f054"; /* fa-chevron-right */
    }

    /* Mobile dot labels - show above instead of side */
    .section-nav.section-nav-mobile-enabled .section-nav-dot[data-label]::before {
        right: auto;
        left: 50%;
        top: auto;
        bottom: calc(100% + var(--space-2));
        transform: translateX(-50%) translateY(4px);
    }

    .section-nav.section-nav-mobile-enabled .section-nav-dot[data-label]:hover::before,
    .section-nav.section-nav-mobile-enabled .section-nav-dot[data-label]:focus::before {
        transform: translateX(-50%) translateY(0);
    }

    /* Hide active labels on mobile to save space */
    .section-nav.section-nav-mobile-enabled .section-nav-dot.active.show-label[data-label]::before {
        opacity: 0;
        visibility: hidden;
    }
}

/* ============================================================
   Reduced Motion Support
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .scroll-to-top,
    .section-nav,
    .section-nav-arrow,
    .section-nav-dot {
        transition: none;
    }

    .scroll-to-top-animated:hover,
    .scroll-to-top-animated:active {
        filter: none;
    }

    .scroll-to-top.visible {
        transform: translateY(0);
    }

    .scroll-to-top-position-bottom-center.visible {
        transform: translateX(-50%) translateY(0);
    }

    .section-nav-dot:hover,
    .section-nav-dot.active {
        transform: none;
    }

    .section-nav-dot[data-label]::before {
        transition: none;
    }
}

/* ============================================================
   High Contrast Mode Support
   ============================================================ */
@media (prefers-contrast: more) {
    .scroll-to-top {
        border: 2px solid var(--scroll-to-top-text);
    }

    .section-nav {
        border-width: 2px;
    }

    .section-nav-dot {
        border: 2px solid var(--section-nav-text);
    }
}