/* Custom styles for Kernel website */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #ffa300;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffb733;
}

/* Remove ONLY top and bottom padding from navbar and logo */
#navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#navbar > div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#navbar > div > div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#navbar-logo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 160px !important;
    width: auto !important;
    object-fit: contain !important;
}

#navbar a[href="#features"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 160px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure sections have proper spacing */
section {
    scroll-margin-top: 180px; /* Account for fixed navbar with large logo */
}

/* Focus styles for accessibility */
a:focus,
button:focus {
    outline: 2px solid #ffa300;
    outline-offset: 2px;
}

/* Smooth transitions for interactive elements */
a, button {
    transition: all 0.2s ease;
}

/* Ensure images don't break layout */
img {
    max-width: 100%;
    height: auto;
}

/* Smooth logo rendering - prevent pixelation */
#navbar-logo {
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    /* Force smooth scaling with hardware acceleration */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure crisp rendering at the target size */
    will-change: transform;
}

/* General logo smoothing */
img[src*="logo"] {
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

/* Loading state for images (optional) */
img[src] {
    opacity: 1;
    transition: opacity 0.3s;
}

/* Print styles */
@media print {
    nav,
    footer {
        display: none;
    }
    
    section {
        page-break-inside: avoid;
    }
}