/* Custom Styles for Personal Website */

/* ===== Base Styles ===== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

@media (min-width: 1024px) {
    html {
        scroll-padding-top: 32px;
    }
}

body {
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ===== Focus Styles (Accessibility) ===== */
a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ===== Selection Color ===== */
::selection {
    background-color: #14b8a6;
    color: white;
}

.dark ::selection {
    background-color: #14b8a6;
    color: white;
}

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

::-webkit-scrollbar-track {
    background: #f6f8fa;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.dark ::-webkit-scrollbar-track {
    background: #0D1117;
}

.dark ::-webkit-scrollbar-thumb {
    background: #21262d;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #30363d;
}

/* ===== Fancybox Lightbox ===== */
[data-fancybox] {
    cursor: zoom-in;
}

/* ===== Print Styles ===== */
@media print {
    aside,
    header,
    #mobile-menu-overlay {
        display: none !important;
    }

    main {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    body {
        font-size: 11pt;
        line-height: 1.5;
        color: black;
        background: white;
    }

    a {
        text-decoration: underline;
        color: black;
    }
}