/* WINAGGREGATOR API Documentation Custom CSS */

/* Custom Smooth Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* WINAGGREGATOR Dot Grid Canvas Pattern */
.winagg-dot-pattern {
    background-color: #f8fafc;
    background-image: radial-gradient(#cbd5e1 1.25px, transparent 1.25px), radial-gradient(#e2e8f0 1.25px, #f8fafc 1.25px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* Hero multi-color dot highlight overlay */
.hero-color-dots {
    background: 
        radial-gradient(circle at 10% 20%, rgba(255, 107, 107, 0.15) 0%, transparent 25%),
        radial-gradient(circle at 40% 10%, rgba(255, 192, 21, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 70% 30%, rgba(99, 91, 252, 0.15) 0%, transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(0, 212, 178, 0.15) 0%, transparent 25%);
}

/* Highlight pulse animation for search selection */
@keyframes highlightPulse {
    0% { background-color: rgba(99, 91, 252, 0.15); }
    100% { background-color: transparent; }
}
.highlight-target {
    animation: highlightPulse 2s ease-out;
}

/* Code block tab styling */
.tab-btn {
    transition: all 0.15s ease-in-out;
}
.tab-btn.active {
    background-color: #1E293B;
    color: #FFFFFF;
}
.tab-btn:not(.active) {
    color: #94A3B8;
}
.tab-btn:not(.active):hover {
    color: #F8FAFC;
}

/* Toast Notification */
#toast-notification {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fix horizontal page scrolling / viewport overflow */
html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

/* Prevent CSS Grid items from expanding beyond parent width */
.grid > * {
    min-width: 0;
    max-width: 100%;
}

/* Prevent flex children from expanding beyond parent container */
.flex > * {
    min-width: 0;
}

/* Ensure code containers and pre blocks never exceed container width */
pre, code, .code-sandbox-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile & Touch Responsive Enhancements */
.touch-scroller {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    /* Code container text sizing & overflow handling on mobile */
    .code-sandbox-container pre {
        font-size: 11px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-break: break-all;
    }
    
    /* Toast adjustment for small screens */
    #toast-notification {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        justify-content: center;
    }

    /* Modal dialog top margin optimization */
    #search-modal {
        padding-top: 1rem;
    }

    /* Touch target minimum sizes */
    button, input, select, a.sidebar-nav-link {
        min-height: 38px;
    }
}

/* Skip-to-content link.
   Written here rather than as `sr-only focus:not-sr-only` utilities so the
   reveal does not depend on the order the Tailwind Play CDN happens to emit
   those two classes in. Offscreen positioning keeps it readable to screen
   readers while hidden. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 60;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    overflow: visible;
    background-color: #635BFC;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
    outline: 2px solid #0A2540;
    outline-offset: 2px;
}