/* ==========================================================================
   Custom CSS - Overrides and additional styles
   ========================================================================== */

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Selection */
::selection {
    background-color: var(--primary-200);
    color: var(--primary-900);
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* WordPress admin bar fix */
body.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* Transition for body overlay when mobile menu open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Skeleton loading animation (for future use) */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Print styles */
@media print {
    .site-header,
    .site-footer,
    .share-buttons,
    .cta-section,
    .related-posts,
    .toc-container,
    .mobile-nav,
    .mobile-nav-overlay,
    .comments-area {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .article-content a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}