/* ==========================================================
   ui-enhancements.css — Dark Mode, Reading Progress,
   Animations, Mega Menu, TOC
   ========================================================== */

/* ── CSS Custom Properties (Light Theme defaults) ─────── */

:root {
    --color-bg:          #ffffff;
    --color-surface:     #f8f9fa;
    --color-surface-2:   #e9ecef;
    --color-border:      #dee2e6;
    --color-text:        #212529;
    --color-text-muted:  #6c757d;
    --color-heading:     #111827;
    --color-primary:     #007bff;
    --color-primary-rgb: 0, 123, 255;
    --color-card-bg:     #ffffff;
    --color-header-bg:   rgba(255,255,255,0.97);
    --color-footer-bg:   #343a40;
    --color-code-bg:     #f1f3f5;
    --color-code-text:   #d63384;
    --shadow-sm:         0 1px 3px rgba(0,0,0,.08);
    --shadow-md:         0 4px 12px rgba(0,0,0,.12);
    --shadow-lg:         0 8px 24px rgba(0,0,0,.16);
    --transition:        0.25s ease;
    --radius:            0.5rem;
}

/* ── Dark Theme ─────────────────────────────────────────── */

[data-theme="dark"] {
    --color-bg:          #0f1117;
    --color-surface:     #1a1d27;
    --color-surface-2:   #242736;
    --color-border:      #2e3347;
    --color-text:        #e2e8f0;
    --color-text-muted:  #94a3b8;
    --color-heading:     #f1f5f9;
    --color-primary:     #60a5fa;
    --color-primary-rgb: 96, 165, 250;
    --color-card-bg:     #1a1d27;
    --color-header-bg:   rgba(15,17,23,0.97);
    --color-footer-bg:   #0a0c12;
    --color-code-bg:     #242736;
    --color-code-text:   #f472b6;
    --shadow-sm:         0 1px 3px rgba(0,0,0,.4);
    --shadow-md:         0 4px 12px rgba(0,0,0,.5);
    --shadow-lg:         0 8px 24px rgba(0,0,0,.6);
}

/* Apply custom properties to elements */
body {
    background-color: var(--color-bg);
    color:            var(--color-text);
    transition:       background-color var(--transition), color var(--transition);
}

.site-header {
    background-color: var(--color-header-bg);
    border-color:     var(--color-border);
}

.post,
.page,
.card,
.widget {
    background-color: var(--color-card-bg);
    border-color:     var(--color-border);
    box-shadow:       var(--shadow-sm);
}

.post:hover,
.card:hover {
    box-shadow: var(--shadow-md);
}

h1, h2, h3, h4, h5, h6,
.entry-title a {
    color: var(--color-heading);
}

.entry-meta,
.text-muted {
    color: var(--color-text-muted) !important;
}

a {
    color: var(--color-primary);
}

.btn-outline-primary {
    color:        var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
}

code, kbd, pre {
    background-color: var(--color-code-bg);
    color:            var(--color-code-text);
}

pre {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-x: auto;
}

.widget-title {
    color:             var(--color-heading);
    border-bottom-color: var(--color-primary);
}

.site-footer {
    background-color: var(--color-footer-bg);
}

/* Dark mode — form controls */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--color-surface);
    border-color:     var(--color-border);
    color:            var(--color-text);
}

[data-theme="dark"] .breadcrumb {
    background-color: var(--color-surface);
}

[data-theme="dark"] .comment-list .comment {
    background-color: var(--color-surface);
    border-color:     var(--color-border);
}

[data-theme="dark"] .main-navigation ul ul {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .table thead th {
    background-color: var(--color-surface-2);
    color: var(--color-heading);
    border-color: var(--color-border);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-surface);
}


/* ── Dark Mode Toggle Button ─────────────────────────────── */

#dark-mode-toggle {
    position:         fixed;
    bottom:           5.5rem;
    right:            2rem;
    z-index:          1050;
    width:            2.75rem;
    height:           2.75rem;
    border-radius:    50%;
    border:           1px solid var(--color-border);
    background:       var(--color-card-bg);
    font-size:        1.1rem;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    box-shadow:       var(--shadow-sm);
    transition:       transform var(--transition), box-shadow var(--transition);
    padding:          0;
}

#dark-mode-toggle:hover {
    transform:   translateY(-2px);
    box-shadow:  var(--shadow-md);
}

[data-theme="dark"] .icon-moon,
[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-sun  { display: inline; }
[data-theme="light"] .icon-moon,
:root:not([data-theme]) .icon-moon { display: inline; }
:root:not([data-theme]) .icon-sun  { display: none; }


/* ── Reading Progress Bar ────────────────────────────────── */

#reading-progress {
    position:   fixed;
    top:        0;
    left:       0;
    height:     3px;
    background: linear-gradient(90deg, var(--color-primary), #60efff);
    z-index:    9999;
    width:      0%;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}


/* ── Scroll Animations (Intersection Observer) ───────────── */

.gpc-animate {
    opacity:   0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.gpc-animate.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.gpc-animate-left {
    opacity:   0;
    transform: translateX(-28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.gpc-animate-left.is-visible {
    opacity:   1;
    transform: translateX(0);
}

.gpc-animate-scale {
    opacity:   0;
    transform: scale(0.92);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.gpc-animate-scale.is-visible {
    opacity:   1;
    transform: scale(1);
}

/* Stagger delay for card grids */
.gpc-animate:nth-child(2) { transition-delay: 0.08s; }
.gpc-animate:nth-child(3) { transition-delay: 0.16s; }
.gpc-animate:nth-child(4) { transition-delay: 0.24s; }
.gpc-animate:nth-child(5) { transition-delay: 0.32s; }
.gpc-animate:nth-child(6) { transition-delay: 0.40s; }


/* ── Table of Contents ───────────────────────────────────── */

#gpc-toc {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-left:   4px solid var(--color-primary);
    border-radius: var(--radius);
    padding:       1.25rem 1.5rem;
    margin:        2rem 0;
    font-size:     0.9rem;
}

#gpc-toc .toc-title {
    font-weight:   700;
    font-size:     0.95rem;
    color:         var(--color-heading);
    margin-bottom: 0.75rem;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    cursor:        pointer;
    user-select:   none;
}

#gpc-toc .toc-title::after {
    content:    '▾';
    margin-left: auto;
    font-size:  0.8rem;
    transition: transform var(--transition);
}

#gpc-toc.collapsed .toc-title::after {
    transform: rotate(-90deg);
}

#gpc-toc .toc-list {
    list-style: none;
    padding:    0;
    margin:     0;
}

#gpc-toc .toc-list a {
    color:       var(--color-text-muted);
    text-decoration: none;
    display:     block;
    padding:     0.2rem 0;
    transition:  color var(--transition), padding-left var(--transition);
    border-radius: 3px;
}

#gpc-toc .toc-list a:hover,
#gpc-toc .toc-list a.active {
    color:         var(--color-primary);
    padding-left:  0.4rem;
}

#gpc-toc .toc-list .toc-h3 { padding-left: 1rem; font-size: 0.85rem; }
#gpc-toc .toc-list .toc-h4 { padding-left: 2rem; font-size: 0.82rem; }

#gpc-toc.collapsed .toc-list {
    display: none;
}

/* TOC Sticky sidebar (desktop) */
@media (min-width: 1200px) {
    #gpc-toc-sticky {
        position:   sticky;
        top:        80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}


/* ── Mega Menu ───────────────────────────────────────────── */

.mega-menu-wrapper {
    position:   static !important;
}

.mega-menu-wrapper > ul.dropdown-menu {
    width:      100vw;
    max-width:  900px;
    left:       50%;
    transform:  translateX(-50%);
    padding:    1.5rem;
    display:    none !important; /* Overridden when .show */
}

.mega-menu-wrapper:hover > ul.dropdown-menu,
.mega-menu-wrapper > ul.dropdown-menu.show {
    display:    flex !important;
    flex-wrap:  wrap;
    gap:        1rem;
}

.mega-menu-col {
    flex: 1 1 200px;
}

.mega-menu-col-title {
    font-size:    0.75rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:        var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
}


/* ── Post Card Skeleton Loading ──────────────────────────── */

@keyframes skeleton-pulse {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        var(--color-surface) 25%,
        var(--color-surface-2) 50%,
        var(--color-surface) 75%
    );
    background-size: 400px 100%;
    animation: skeleton-pulse 1.4s ease infinite;
    border-radius: 4px;
}

.skeleton-card {
    height: 280px;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 767px) {
    #dark-mode-toggle {
        bottom: 5rem;
        right: 1rem;
    }

    #gpc-toc {
        font-size: 0.85rem;
    }
}