/**
 * UX Advanced Styles - FASE 5
 * Informativo Angolano Theme
 *
 * Contains all advanced UX features:
 * - Skeleton Loading
 * - Text Options Panel
 * - Back to Top Button
 * - Reading Progress Bar
 * - Accessibility Enhancements
 * - Reduced Motion Support
 */

/* ==========================================================================
   1. SKELETON LOADING
   ========================================================================== */

/**
 * Base Skeleton Styles
 * CSS-only loading placeholders with shimmer animation
 */

/* Skeleton Animation - Shimmer Effect */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Skeleton Base */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-light, #f8f9fa) 0px,
        #e9ecef 40px,
        var(--color-bg-light, #f8f9fa) 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm, 4px);
    color: transparent !important;
    pointer-events: none;
}

/* Dark Mode Skeleton */
body.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        #2a2a2a 0px,
        #3a3a3a 40px,
        #2a2a2a 80px
    );
    background-size: 200px 100%;
}

/* Skeleton Text - Single line */
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    width: 100%;
}

.skeleton-text:last-child {
    margin-bottom: 0;
}

/* Skeleton Title */
.skeleton-title {
    height: 1.5em;
    margin-bottom: 0.5em;
    width: 80%;
}

/* Skeleton Subtitle */
.skeleton-subtitle {
    height: 1.2em;
    margin-bottom: 0.5em;
    width: 60%;
}

/* Skeleton Image/Thumbnail */
.skeleton-image {
    width: 100%;
    padding-top: 66.67%; /* 16:9 aspect ratio */
    border-radius: var(--radius-md, 8px);
}

/* Skeleton Avatar */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Skeleton Badge */
.skeleton-badge {
    display: inline-block;
    width: 80px;
    height: 24px;
    border-radius: var(--radius-sm, 4px);
}

/* Skeleton Button */
.skeleton-button {
    display: inline-block;
    width: 120px;
    height: 40px;
    border-radius: var(--radius-md, 8px);
}

/* Skeleton Card */
.skeleton-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
}

body.dark-mode .skeleton-card {
    background: #252525;
    border-color: #333;
}

/* Skeleton Card Image */
.skeleton-card .skeleton-image {
    border-radius: 0;
}

/* Skeleton Card Content */
.skeleton-card-content {
    padding: var(--space-4, 16px);
}

/* Skeleton Card Title + Text combo */
.skeleton-card-content .skeleton-title {
    margin-bottom: var(--space-3, 12px);
}

.skeleton-card-content .skeleton-text {
    margin-bottom: var(--space-2, 8px);
}

.skeleton-card-content .skeleton-text:nth-child(3) {
    width: 70%;
}

.skeleton-card-content .skeleton-text:nth-child(4) {
    width: 50%;
}

/* Skeleton Grid */
.skeleton-grid {
    display: grid;
    gap: var(--space-4, 16px);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Skeleton List Item */
.skeleton-list-item {
    display: flex;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) 0;
    border-bottom: 1px solid var(--color-border-light, #f0f0f0);
}

body.dark-mode .skeleton-list-item {
    border-bottom-color: #333;
}

.skeleton-list-item .skeleton-image {
    width: 80px;
    height: 60px;
    padding-top: 0;
    flex-shrink: 0;
}

.skeleton-list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

/* Loading Container - Shows skeleton while loading */
.loading-container {
    position: relative;
    min-height: 200px;
}

.loading-container .skeleton-wrapper {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.loading-container.loaded .skeleton-wrapper {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.loading-container .content-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-container.loaded .content-wrapper {
    opacity: 1;
}

/* ==========================================================================
   2. TEXT OPTIONS PANEL
   ========================================================================== */

/**
 * Text Options Floating Panel
 * Allows users to adjust font size and font family
 */

/* Panel Container */
.text-options-panel {
    position: fixed;
    bottom: var(--space-6, 24px);
    right: var(--space-6, 24px);
    z-index: var(--z-modal, 300);
    font-family: var(--font-primary, sans-serif);
}

@media (max-width: 575px) {
    .text-options-panel {
        bottom: var(--space-4, 16px);
        right: var(--space-4, 16px);
    }
}

/* Panel Toggle Button */
.text-options-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg, #fff);
    border: 2px solid var(--color-border, #e5e5e5);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base, 0.25s ease);
}

body.dark-mode .text-options-toggle {
    background: #2a2a2a;
    border-color: #444;
}

.text-options-toggle:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.15));
}

.text-options-toggle:focus {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

.text-options-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--text-color, #2d2d2d);
}

body.dark-mode .text-options-toggle svg {
    color: #e5e5e5;
}

/* Panel Content - Hidden by default */
.text-options-content {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-4, 16px);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.12));
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base, 0.25s ease);
}

body.dark-mode .text-options-content {
    background: #2a2a2a;
    border-color: #444;
}

.text-options-panel.active .text-options-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Panel Title */
.text-options-title {
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--text-color, #2d2d2d);
    margin-bottom: var(--space-3, 12px);
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid var(--color-border-light, #f0f0f0);
}

body.dark-mode .text-options-title {
    color: #e5e5e5;
    border-bottom-color: #444;
}

/* Option Group */
.text-options-group {
    margin-bottom: var(--space-4, 16px);
}

.text-options-group:last-child {
    margin-bottom: 0;
}

.text-options-label {
    display: block;
    font-size: var(--text-xs, 12px);
    color: var(--text-light, #6b6b6b);
    margin-bottom: var(--space-2, 8px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.dark-mode .text-options-label {
    color: #999;
}

/* Font Size Buttons */
.font-size-buttons {
    display: flex;
    gap: var(--space-2, 8px);
}

.font-size-btn {
    flex: 1;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--color-bg-light, #f8f9fa);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    color: var(--text-color, #2d2d2d);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
}

body.dark-mode .font-size-btn {
    background: #333;
    border-color: #444;
    color: #e5e5e5;
}

.font-size-btn:hover {
    border-color: var(--primary-color, #e63946);
    color: var(--primary-color, #e63946);
}

.font-size-btn.active {
    background: var(--primary-color, #e63946);
    border-color: var(--primary-color, #e63946);
    color: #fff;
}

.font-size-btn:focus {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

/* Font Family Toggle */
.font-family-toggle {
    display: flex;
    background: var(--color-bg-light, #f8f9fa);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
}

body.dark-mode .font-family-toggle {
    background: #333;
}

.font-family-btn {
    flex: 1;
    padding: var(--space-3, 12px);
    background: transparent;
    border: none;
    font-size: var(--text-sm, 14px);
    font-weight: 500;
    color: var(--text-light, #6b6b6b);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
}

body.dark-mode .font-family-btn {
    color: #999;
}

.font-family-btn:hover {
    color: var(--text-color, #2d2d2d);
}

body.dark-mode .font-family-btn:hover {
    color: #e5e5e5;
}

.font-family-btn.active {
    background: var(--primary-color, #e63946);
    color: #fff;
}

.font-family-btn:focus {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: -2px;
}

/* Reset Button */
.text-options-reset {
    width: 100%;
    padding: var(--space-2, 8px);
    background: transparent;
    border: 1px dashed var(--color-border, #e5e5e5);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-xs, 12px);
    color: var(--text-light, #6b6b6b);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
    margin-top: var(--space-3, 12px);
}

body.dark-mode .text-options-reset {
    border-color: #444;
    color: #999;
}

.text-options-reset:hover {
    border-color: var(--primary-color, #e63946);
    color: var(--primary-color, #e63946);
}

/* ==========================================================================
   TEXT PREFERENCES - CSS CUSTOM PROPERTIES
   ========================================================================== */

/* Font Size Classes - Applied to body */
body.font-size-small {
    --text-base: 0.875rem;  /* 14px */
    --text-sm: 0.75rem;     /* 12px */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.125rem;    /* 18px */
    --text-2xl: 1.375rem;   /* 22px */
    --text-3xl: 1.625rem;   /* 26px */
    --text-4xl: 2rem;       /* 32px */
    --text-5xl: 2.5rem;     /* 40px */
}

body.font-size-normal {
    --text-base: 1rem;      /* 16px */
    --text-sm: 0.875rem;    /* 14px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
}

body.font-size-large {
    --text-base: 1.125rem;  /* 18px */
    --text-sm: 1rem;        /* 16px */
    --text-lg: 1.25rem;     /* 20px */
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 1.875rem;   /* 30px */
    --text-3xl: 2.25rem;    /* 36px */
    --text-4xl: 2.75rem;    /* 44px */
    --text-5xl: 3.5rem;     /* 56px */
}

/* Font Family Classes - Applied to body */
body.font-family-sans {
    --content-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.font-family-serif {
    --content-font: Georgia, 'Times New Roman', serif;
}

/* Apply content font to article content */
body.font-family-serif .single-content,
body.font-family-serif .entry-content,
body.font-family-serif article {
    font-family: var(--content-font, var(--font-primary));
}

body.font-family-serif .single-content p,
body.font-family-serif .entry-content p {
    font-family: var(--content-font, var(--font-primary));
}

/* ==========================================================================
   3. BACK TO TOP BUTTON
   ========================================================================== */

/**
 * Back to Top Floating Button
 */

/* Button Container */
.back-to-top {
    position: fixed;
    bottom: var(--space-8, 32px);
    right: var(--space-6, 24px);
    z-index: var(--z-back-to-top, 999);
}

@media (max-width: 575px) {
    .back-to-top {
        bottom: var(--space-4, 16px);
        right: var(--space-4, 16px);
    }
}

/* Button Styles */
.back-to-top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary-color, #e63946);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(230, 57, 70, 0.3));
    transition: all var(--transition-base, 0.25s ease);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top-btn:hover {
    background: var(--primary-dark, #c1121f);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(230, 57, 70, 0.4));
}

.back-to-top-btn:focus {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

.back-to-top-btn svg {
    width: 24px;
    height: 24px;
}

/* Visible State */
.back-to-top.visible .back-to-top-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Scroll Progress Ring (Optional) */
.back-to-top-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.back-to-top-progress circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.back-to-top-progress .progress-bg {
    stroke: rgba(255, 255, 255, 0.3);
}

.back-to-top-progress .progress-fill {
    stroke: #fff;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    transition: stroke-dashoffset 0.1s linear;
}

/* Tooltip */
.back-to-top-tooltip {
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%) translateY(-8px);
    background: var(--secondary-color, #1a1a1a);
    color: #fff;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-xs, 12px);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast, 0.15s ease);
}

body.dark-mode .back-to-top-tooltip {
    background: #fff;
    color: #1a1a1a;
}

.back-to-top:hover .back-to-top-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(-4px);
}

/* ==========================================================================
   4. READING PROGRESS BAR
   ========================================================================== */

/**
 * Reading Progress Indicator
 * Fixed at the top of article pages
 */

/* Progress Bar Container */
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-border-light, #f0f0f0);
    z-index: var(--z-sticky, 200);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

body.dark-mode .reading-progress-container {
    background: #333;
}

/* Progress Bar Fill */
.reading-progress-bar {
    height: 100%;
    background: var(--gradient-primary, linear-gradient(135deg, #e63946 0%, #c1121f 100%));
    width: 0%;
    transition: width 0.1s ease;
}

/* Visible on Article Pages */
.reading-progress-container.active {
    transform: translateY(0);
}

/* Progress Text (Optional) */
.reading-progress-text {
    position: absolute;
    right: var(--space-4, 16px);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-xs, 12px);
    color: var(--text-light, #6b6b6b);
    font-weight: 500;
}

body.dark-mode .reading-progress-text {
    color: #999;
}

/* Mobile Adjustment */
@media (max-width: 575px) {
    .reading-progress-container {
        height: 3px;
    }
}

/* ==========================================================================
   5. ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/**
 * Accessibility Features
 * Skip Links, Focus Indicators, Reduced Motion
 */

/* Enhanced Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color, #e63946);
    color: #fff;
    padding: var(--space-3, 12px) var(--space-5, 20px);
    z-index: var(--z-tooltip, 400);
    transition: top var(--transition-fast, 0.15s ease);
    border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);
    font-weight: 600;
    font-size: var(--text-sm, 14px);
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Skip to Main Content - Enhanced */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-color, #e63946);
    color: #fff;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    z-index: 10000;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
}

/* Enhanced Focus Indicators */
:focus-visible {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

/* Button Focus */
button:focus-visible {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

/* Input Focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

/* Link Focus */
a:focus-visible {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

/* Screen Reader Only - Visually Hidden */
.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;
}

/* Screen Reader Text on Focus - Shows on Focus */
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Focus Within Indicator for Interactive Containers */
.interactive-container:focus-within {
    box-shadow: 0 0 0 2px var(--primary-color, #e63946);
}

/* ==========================================================================
   6. REDUCED MOTION SUPPORT
   ========================================================================== */

/**
 * Reduced Motion Media Query
 * Respects user preference for reduced motion
 */

@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;
    }

    /* Disable skeleton animation */
    .skeleton {
        animation: none;
        background: var(--color-bg-light, #e9ecef);
    }

    body.dark-mode .skeleton {
        background: #333;
    }

    /* Disable smooth scroll */
    html {
        scroll-behavior: auto !important;
    }

    /* Disable hover animations */
    .news-card:hover,
    .hero-card:hover,
    .widget-post:hover {
        transform: none;
        box-shadow: none;
    }

    /* Disable image zoom */
    .entry-content img:hover {
        transform: none;
    }

    /* Disable button hover effects */
    .btn:hover,
    .search-submit:hover {
        transform: none;
    }

    /* Disable social link hover effects */
    .social-link:hover {
        transform: none;
    }

    /* Disable footer accent animation */
    .footer-accent {
        animation: none;
        background: var(--primary-color, #e63946);
    }

    /* Disable dark mode transition */
    body,
    body *,
    body *::before,
    body *::after {
        transition: none !important;
    }

    /* Disable text options panel transition */
    .text-options-content {
        transition: none;
    }

    /* Disable back to top animation */
    .back-to-top-btn {
        transition: none;
    }

    /* Disable progress bar transition */
    .reading-progress-bar {
        transition: none;
    }

    /* Disable image zoom overlay animation */
    .image-zoom-overlay {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Smooth animations for users who didn't disable */
    html {
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   7. LOADING STATES
   ========================================================================== */

/**
 * Loading States for Dynamic Content
 */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.4s ease forwards;
}

/* Pulse Animation for loading indicators */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

/* Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border, #e5e5e5);
    border-top-color: var(--primary-color, #e63946);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   8. TOOLTIPS
   ========================================================================== */

/**
 * Accessible Tooltips
 */

/* Tooltip Base */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--secondary-color, #1a1a1a);
    color: #fff;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-xs, 12px);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast, 0.15s ease);
    z-index: var(--z-tooltip, 400);
    pointer-events: none;
}

body.dark-mode [data-tooltip]::after {
    background: #fff;
    color: #1a1a1a;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* ==========================================================================
   9. DYNAMIC TOC IMPROVEMENTS
   ========================================================================== */

/**
 * Table of Contents - Active Section Highlighting
 */

/* TOC Container */
.table-of-contents {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-4, 16px);
}

body.dark-mode .table-of-contents {
    background: #252525;
    border-color: #333;
}

/* TOC List */
.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* TOC Item */
.toc-item {
    margin-bottom: var(--space-2, 8px);
}

.toc-item:last-child {
    margin-bottom: 0;
}

/* TOC Link */
.toc-link {
    display: block;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    color: var(--text-color, #2d2d2d);
    font-size: var(--text-sm, 14px);
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
    transition: all var(--transition-fast, 0.15s ease);
    border-left: 3px solid transparent;
}

body.dark-mode .toc-link {
    color: #e5e5e5;
}

.toc-link:hover {
    background: var(--color-bg-light, #f8f9fa);
    color: var(--primary-color, #e63946);
}

body.dark-mode .toc-link:hover {
    background: #333;
}

/* Active TOC Link */
.toc-link.active {
    background: var(--color-primary, #e63946);
    color: #fff;
    border-left-color: var(--primary-dark, #c1121f);
}

/* TOC Nested Items */
.toc-h3 {
    padding-left: var(--space-5, 20px);
    font-size: var(--text-xs, 12px);
}

/* TOC Heading */
.toc-heading {
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #999);
    margin-bottom: var(--space-3, 12px);
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid var(--color-border-light, #f0f0f0);
}

body.dark-mode .toc-heading {
    color: #808080;
    border-bottom-color: #333;
}

/* Smooth Scroll Target Highlight */
:target {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 4px;
}

/* ==========================================================================
   END OF UX ADVANCED STYLES
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 575px) {
    /* Smaller text options panel */
    .text-options-content {
        min-width: 200px;
        padding: var(--space-3, 12px);
    }
    
    /* Smaller back to top button */
    .back-to-top-btn {
        width: 40px;
        height: 40px;
    }
    
    .back-to-top-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 767px) {
    /* Stack skeleton grid on mobile */
    .skeleton-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PRINT STYLES - HIDE INTERACTIVE ELEMENTS
   ========================================================================== */

@media print {
    .text-options-panel,
    .back-to-top,
    .reading-progress-container,
    .skeleton {
        display: none !important;
    }
}

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

/* Live Region for Screen Reader Announcements */
[aria-live="polite"],
[aria-live="assertive"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   END OF FILE
   ========================================================================== */