@import url(https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css);
@font-face{font-family:IntelOneMono;src:url(font/IntelOneMono-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
:root{--font-family-sans:'Vazirmatn',sans-serif;--font-family-mono:'Vazirmatn',monospace;--border-radius:8px;--transition-smooth:all 0.3s ease;--color-bg:#ffffff;--color-surface:#f8f9fa;--color-border:#dee2e6;--color-text:#212529;--color-text-heading:#000000;--color-muted:#6c757d;--color-primary:#4a00e0;--color-secondary:#8e2de2;--color-link:#4a00e0;--color-link-hover:#8e2de2;--color-code-bg:#e9ecef;--color-code-text:#343a40;--color-switcher-bg:#e9ecef;--color-switcher-bg-hover:#d1d5db;--color-nav-bg-hover:#e9ecef;--color-nav-sub-text:#495057}
body.dark-mode{--color-bg:#121212;--color-surface:#1e1e1e;--color-border:#2c2c2c;--color-text:#e0e0e0;--color-text-heading:#ffffff;--color-muted:#888888;--color-primary:#8e2de2;--color-secondary:#4a00e0;--color-link:#9f52ff;--color-link-hover:#bb86fc;--color-code-bg:#282c34;--color-code-text:#abb2bf;--color-switcher-bg:#2c2c2c;--color-switcher-bg-hover:#3a3f4b;--color-nav-bg-hover:#2c2c2c;--color-nav-sub-text:#adb5bd}
body{direction:rtl;font-family:var(--font-family-sans);background-color:var(--color-bg);color:var(--color-text);margin:0;font-size:16px;line-height:1.7;transition:background-color .3s ease,color .3s ease}
h1,h2,h3,h4,h5,h6{color:var(--color-text-heading);font-weight:700}
a{color:var(--color-link);text-decoration:none;transition:color var(--transition-smooth)}
a:hover{color:var(--color-link-hover);text-decoration:none}
img{max-width:100%;height:auto;border-radius:var(--border-radius)}
.container{display:flex}
.theme-switcher-wrapper.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--sidebar-width);
    width: auto; /* Let the browser determine width based on left/right */
    background-color: var(--bg-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    padding: 1rem 2rem; /* Re-apply horizontal padding from parent .content */
    z-index: 999;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}

.theme-switcher-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 10px;
    /* Add a transition for the background color change */
    transition: background-color 0.3s ease;
}

.theme-switcher-wrapper.is-sticky {
    position: fixed;
    top: 0;
    right: 300px; /* Sidebar width */
    left: 0;
    padding: 1rem 2.5rem; /* Match content padding horizontally */
    background-color: var(--color-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 990;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}
.theme-switcher{display:flex;align-items:center;justify-content:center;padding:.6rem 1rem;background-color:var(--color-switcher-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:50px;cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.theme-switcher i{margin-left:8px;font-size:1rem;transition:transform .3s ease}
.theme-switcher:hover i{transform:rotate(15deg)}
.theme-switcher:hover{background-color:var(--color-switcher-bg-hover);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}

.a11y-test-button {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.a11y-test-button:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #ffffff;
}
html{box-sizing:border-box}
*,::after,::before{box-sizing:inherit}
.content{margin-right:300px;padding:2.5rem 2.5rem}
.sidebar{width:300px;height:100vh;position:fixed;top:0;right:0;background-color:var(--color-surface);border-left:1px solid var(--color-border);padding:2rem 1.5rem;display:flex;flex-direction:column;transition:transform .3s ease,background-color .3s ease,border-color .3s ease;z-index:1000}
.section{padding:4rem 0;border-bottom:1px solid var(--color-border);transition:border-color .3s ease}
.section:first-of-type{padding-top:2rem}
.section:last-child{border-bottom:none}
.section h2{font-size:2rem;margin-top:0;margin-bottom:2rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-primary);display:inline-block}
.section h2 i{margin-left:10px}
.intro-section {
    text-align: center;
    padding: 5rem 2rem;
    background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.intro-section .intro-title {
    font-size: 3.2rem;
    font-weight: 800;
    background: -webkit-linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
    animation: fadeInDown 1s ease-out;
}

.intro-section .intro-subtitle {
    font-size: 1.25rem;
    max-width: 750px;
    margin: 0 auto 2rem auto;
    line-height: 1.7;
    color: var(--color-text-heading);
    font-weight: 400;
    animation: fadeInUp 1s ease-out 0.3s;
    animation-fill-mode: backwards;
}

.intro-section .intro-text {
    font-size: 1.1rem;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.8;
    color: var(--color-muted);
    animation: fadeInUp 1s ease-out 0.6s;
    animation-fill-mode: backwards;
}
.sidebar .logo{text-align:center;margin-bottom:2rem}
.logo{display:flex;align-items:center;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}
.logo-img{width:55px;height:auto;margin-right:12px}
.logo-text-container{flex-grow:1;display:flex;flex-direction:column;font-family:IntelOneMono,monospace;align-items:flex-end}
.logo-main{font-size:1.3rem;color:var(--color-text-heading);line-height:normal;font-weight:700}
.logo-sub{font-size:1.2rem;color:var(--color-text-secondary);font-weight:500}
.sidebar .main-nav{flex-grow:1;overflow-y:auto}
.nav-menu,.sub-menu{list-style:none;padding:0;margin:0}
.nav-item .nav-category{display:flex;align-items:center;padding:.85rem 1rem;font-weight:700;color:var(--color-text-heading);border-radius:6px;cursor:pointer;transition:background-color .2s ease}
.nav-item .nav-category span{padding-right:12px}
.nav-item .nav-category.active-category,.nav-item .nav-category:hover{background-color:var(--color-nav-bg-hover);text-decoration:none}
.nav-item .nav-category i{font-size:1.1rem;width:20px;text-align:center}
.nav-arrow{margin-right:auto;margin-left:0!important;font-size:.8rem!important;transition:transform .3s ease}
.nav-item .nav-category.active-category .nav-arrow{transform:rotate(-180deg)}
.sub-menu{padding-right:2.5rem;max-height:0;overflow:hidden;transition:max-height .4s ease-in-out}
.sub-menu a{display:block;padding:.5rem 0;color:var(--color-nav-sub-text);font-size:.95rem}
.sub-menu a:hover{color:var(--color-link-hover)}
.sub-menu a.active{font-weight:700;color:var(--color-link)}
.feature-item{background-color:var(--color-background-secondary);padding:2rem 2.5rem;border:1px solid var(--color-border);border-radius:12px;margin-bottom:2.5rem;box-shadow:0 4px 15px rgba(0,0,0,.05);transition:all .3s ease}
.feature-item:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.08);border-color:var(--color-primary-light)}

/* Scroll Animation */
.fade-in-up-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.feature-item p:last-child{margin-bottom:0}
.wcag-ref{margin-top:1.5rem;padding:1rem 1.25rem;background-color:var(--color-code-bg);border-left:4px solid var(--color-primary);border-radius:var(--border-radius);font-size:1rem;line-height:1.6}
.wcag-ref p{font-size:1rem;line-height:1.6;margin:0}
.wcag-ref strong{color:var(--color-text-heading);font-family:var(--font-family-mono)}
.wcag-ref a{color:var(--color-primary);text-decoration:none;border-bottom:1px dashed var(--color-primary-light);transition:var(--transition-smooth)}
.wcag-ref a:hover{color:var(--color-primary-light);border-bottom-style:solid}
.feature-item h3{font-size:1.5rem;margin-top:0;color:var(--color-text-heading)}
.demo-wrapper{background:var(--color-surface);padding:2rem;border-radius:var(--border-radius);border:1px solid var(--color-border);margin-top:2rem}
.demo-content img{max-width:100%;border-radius:var(--border-radius);opacity:.9;transition:opacity var(--transition-smooth)}
.demo-content img:hover{opacity:1}
.notification-container{position:fixed;bottom:20px;left:20px;z-index:1001}
.notification{background-color:var(--color-primary);color:#fff;padding:12px 20px;border-radius:var(--border-radius);margin-bottom:10px;box-shadow:0 4px 6px -1px rgba(0,0,0,.15),0 2px 4px -1px rgba(0,0,0,.1);opacity:0;transform:translateY(20px);transition:all .5s cubic-bezier(.25,.8,.25,1)}
.notification.show{opacity:1;transform:translateY(0)}
.notification.error{background-color:#f85149}

/* Mobile Header */
.mobile-header {
    display: none; /* Hidden on desktop */
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 999;
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-logo .logo-img {
    height: auto;
    width: 35px;
}

.mobile-logo .logo-main {
    font-family: 'IntelOneMono-Light', monospace;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-text-heading);
}


/* --- Responsive Design --- */
.menu-toggle {
    display: none; /* Hidden by default */
    /* position: fixed; NO LONGER FIXED */
    z-index: 1001;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    width: 45px;
    height: 45px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1.2rem;
    transition: all var(--transition-smooth);
    justify-content: center;
    align-items: center;
}

.menu-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

@media (max-width: 1024px) {
    .mobile-header {
        display: flex;
    }

    .sidebar .logo {
        display: none; /* Hide sidebar logo on mobile */
    }

    body {
        /* Prevents horizontal scroll when sidebar is off-screen */
        overflow-x: hidden;
    }

    .sidebar {
        transform: translateX(100%);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .content {
        width: 100%;
        margin-right: 0;
        padding: 2rem 1.5rem;
    }

    .menu-toggle {
        display: flex;
        position: static; /* Reset position for mobile header flow */
    }

    .theme-switcher-wrapper.is-sticky {
        right: 0;
        padding: 1rem 1.5rem;
    }
    
    .section h2 {
        font-size: 1.8rem;
    }
}

/* Off-canvas Panel */
.off-canvas-panel {
    position: fixed;
    top: 0;
    left: -380px; /* Start off-screen */
    width: 380px;
    height: 100%;
    background-color: var(--color-surface);
    box-shadow: 2px 0 20px rgba(0,0,0,0.25);
    z-index: 1050;
    padding: 1.2rem;
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto;
}

.off-canvas-panel.is-open {
    left: 0; /* Slide in */
}

.off-canvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 1040;
    transition: opacity 0.4s, visibility 0.4s;
}

.off-canvas-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.off-canvas-panel .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--color-text);
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.off-canvas-panel h2 {
    margin-top: 2rem;
    color: var(--color-primary);
    font-size: 1.8rem;
}

/* Keyframe animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}