/* Global Layout Fix - Remove Side Spacing */
/* ======================================= */

/* Global Reset for Full Width Layout */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Override Switch Template Boxed Layout */
.is-boxed {
    background: transparent !important;
}

.body-wrap {
    background: #fff !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.boxed-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Container Full Width Override */
.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box;
}

/* Header Full Width */
.site-header {
    width: 100% !important;
    padding: 24px 0 !important;
    margin: 0 !important;
}

.site-header .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
}

/* Hero Section Full Width */
.hero {
    width: 100% !important;
    margin: 0 !important;
    padding: 48px 0 88px 0 !important;
}

.hero .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
}

/* Features Section Full Width */
.features {
    width: 100% !important;
    margin: 0 !important;
}

.features .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
}

/* Footer Full Width */
.site-footer {
    width: 100% !important;
    margin: 0 !important;
}

.site-footer .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
}

/* Main Content Full Width */
main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Section Inner Full Width */
.section-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px 20px !important;
}

/* CTA Section Full Width */
.cta {
    width: 100% !important;
    margin: 0 !important;
}

.cta .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
}

/* Responsive Design Adjustments */
@media (min-width: 481px) {
    .container,
    .site-header .container,
    .hero .container,
    .features .container,
    .site-footer .container,
    .cta .container {
        padding: 0 24px !important;
    }
    
    .section-inner {
        padding: 88px 24px !important;
    }
}

@media (min-width: 641px) {
    .hero {
        padding: 88px 0 120px 0 !important;
    }
    
    .section-inner {
        padding: 88px 24px !important;
    }
}

@media (min-width: 768px) {
    .container,
    .site-header .container,
    .hero .container,
    .features .container,
    .site-footer .container,
    .cta .container {
        padding: 0 40px !important;
    }
    
    .section-inner {
        padding: 88px 40px !important;
    }
}

@media (min-width: 1024px) {
    .container,
    .site-header .container,
    .hero .container,
    .features .container,
    .site-footer .container,
    .cta .container {
        padding: 0 60px !important;
    }
    
    .section-inner {
        padding: 88px 60px !important;
    }
}

/* Prevent Horizontal Scrolling */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden !important;
}

/* RTL Layout Support */
.rtl-layout .container,
.rtl-layout .site-header .container,
.rtl-layout .hero .container,
.rtl-layout .features .container,
.rtl-layout .site-footer .container,
.rtl-layout .cta .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Profile and Form Pages */
.profile-container,
.form-container,
.login-container,
.signup-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px !important;
}

@media (min-width: 768px) {
    .profile-container,
    .form-container,
    .login-container,
    .signup-container {
        padding: 0 40px !important;
    }
}

/* Documentation and Support Pages */
.documentation-container,
.support-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px !important;
}

@media (min-width: 768px) {
    .documentation-container,
    .support-container {
        padding: 0 40px !important;
    }
}

/* Sticky sidebar for documentation pages */
@media (min-width: 768px) {
    .documentation-container .main-content,
    .support-container .main-content {
        align-items: start;
    }

    .documentation-container .sidebar,
    .support-container .sidebar {
        position: sticky;
        top: calc(var(--header-height, 72px) + 12px);
        z-index: 40;
        max-height: calc(100vh - (var(--header-height, 72px) + 24px));
        overflow-y: auto;
    }
}

/* More general / higher-specificity rules to ensure sticky behavior applies
   even when a documentation wrapper class is not present in the template. */
@media (min-width: 768px) {
    /* target the common layout used by documentation pages */
    .main-content {
        align-items: start;
    }

    /* target the sidebar directly inside main-content */
    .main-content .sidebar,
    .main-content > aside.sidebar,
    .content + .sidebar {
        position: sticky;
        top: calc(var(--header-height, 72px) + 12px) !important;
        z-index: 40 !important;
        max-height: calc(100vh - (var(--header-height, 72px) + 24px));
        overflow-y: auto;
    }

    /* If there are layout containers that create a new stacking/containing context,
       using the JS fallback will toggle .sidebar-fixed. Ensure a predictable visual
       when that class is toggled by increasing specificity here as well. */
    .main-content .sidebar.sidebar-fixed,
    .main-content > aside.sidebar.sidebar-fixed {
        position: fixed !important;
        top: calc(var(--header-height, 72px) + 12px) !important;
        z-index: 60 !important;
    }
}

@media (max-width: 767px) {
    .documentation-container .sidebar,
    .support-container .sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* JS-controlled fixed sidebar class (fallback when sticky doesn't behave as expected) */
.sidebar-fixed {
    position: fixed !important;
    top: calc(var(--header-height, 72px) + 12px) !important;
    z-index: 60 !important;
}

/* Improved presentation for documentation sidebar */
.main-content .sidebar {
    padding: 8px 12px;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.main-content .sidebar .sidebar-nav {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 60%);
    border-radius: 14px;
    padding: 18px;
    border: 1px solid rgba(28, 75, 109, 0.06);
    box-shadow: 0 6px 20px rgba(35, 70, 95, 0.06);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.main-content .sidebar .sidebar-nav h3 {
    font-size: 1.35rem;
    color: #2f6f9c;
    text-align: center;
    margin-bottom: 14px;
}

.main-content .sidebar .sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-content .sidebar .sidebar-nav a {
    display: block;
    padding: 10px 12px;
    color: #23495f;
    text-decoration: none;
    border-radius: 10px;
    margin: 6px 0;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
    font-weight: 500;
}

.main-content .sidebar .sidebar-nav a:hover {
    background: linear-gradient(90deg, rgba(113,171,218,0.12), rgba(113,171,218,0.06));
    color: #0e4a6d;
    transform: translateX(4px);
}

.main-content .sidebar .sidebar-nav a.active {
    background: linear-gradient(90deg, #71abda, #5a9bc4);
    color: #fff;
    box-shadow: 0 6px 14px rgba(86, 129, 158, 0.12);
    transform: translateX(2px);
}

/* subtle visual change when pinned */
.main-content .sidebar.sidebar-fixed .sidebar-nav,
.main-content > aside.sidebar.sidebar-fixed .sidebar-nav {
    box-shadow: 0 18px 40px rgba(17, 50, 71, 0.12);
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .main-content .sidebar .sidebar-nav h3 { font-size: 1.2rem; }
    .main-content .sidebar .sidebar-nav a { padding: 9px 10px; }
}

/* Profile sidebar fixed-state presentation */
.profile-sidebar {
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.profile-sidebar.sidebar-fixed {
    position: fixed !important;
    top: calc(var(--header-height, 72px) + 12px) !important;
    z-index: 60 !important;
    box-shadow: 0 18px 40px rgba(17, 50, 71, 0.12);
    transform: translateY(-2px);
}