/* ==========================================================================
   RESPONSIVE LAYOUT - SIMPLIFIED & UNIFIED
   Following modern CSS best practices with custom properties
   ========================================================================== */

:root {
    /* Layout Variables - Content First Approach */
    --container-max-width: 2000px;
    --sidebar-width: 18.625rem; /* 298px */
    --sidebar-offset-mobile: 32px; /* For 1024-1999px - minimal left padding */
    --sidebar-offset-desktop: 32px; /* Base value, overridden by media queries */
    --main-content-width: 754px; /* 754px container = 720px article content (24px padding + 10px adjustment) */
    --api-playground-width: 450px;
    
    /* Responsive Breakpoints */
    --breakpoint-mobile: 1023px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1600px;
    --breakpoint-large: 2000px;
    --breakpoint-xlarge: 2560px;
    
    /* Spacing */
    --gap-sidebar-main: 31px; /* Increased by 15px from original 16px */
    --gap-main-toc: 32px;
    
    /* TOC dimensions - used to align search box */
    --toc-width: 15.625rem; /* 250px - TOC sidebar width */
    --toc-margin: 40px; /* Default TOC spacing from viewport edge */
    
    /* Search box alignment - empirically tested values to match TOC vertical line */
    --search-align-small: 97px;   /* 1024-1599px */
    --search-align-medium: 231px;  /* 1600-1919px */
    --search-align-1920: 450px;    /* 1920-1999px */
    --search-align-large: 750px;   /* 2000px+ */
}

/* Responsive sidebar offsets for different screen sizes */
@media (min-width: 2000px) and (max-width: 2559px) {
    :root {
        --sidebar-offset-desktop: 280px; /* Medium padding for 2K screens */
    }
}

@media (min-width: 2560px) {
    :root {
        --sidebar-offset-desktop: 500px; /* More padding for ultra-wide screens */
    }
}

/* ==========================================================================
   HEADER LAYOUT - Critical positioning rules
   ========================================================================== */

/* Make type-header span beyond viewport to cover horizontal scroll */
.type-header {
    position: fixed;
    top: 0;
    left: -5000px !important;
    right: -5000px !important;
    width: auto;
    padding-left: 5000px;
    padding-right: 5000px;
    height: 64px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    background: var(--body-bg);
    z-index: 9999;
}

/* Ensure all header content is visible and properly positioned */
.type-header > div,
.type-header .flex,
.type-header .type-tabs,
.type-header .type-tabs-left,
.type-header .type-tabs-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.type-header img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.type-header a {
    text-decoration: none;
}

/* Logo area in header (left) */
.type-header-logo-area {
    width: 18.625rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.type-header-logo-area .sidebar-logo {
    padding: 0 !important;
    margin: 0 !important;
}

/* Theme switcher moved to right area next to search */
.type-header-right-area .theme-switcher {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.type-header .sidebar-logo,
.type-header .sidebar-logo-container,
.type-header .sidebar-logo-link,
.type-header .sidebar-logo-img,
.type-header .sidebar-logo-text {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.type-header .sidebar-logo-container {
    justify-content: flex-start !important;
}

/* Tabs area - align with main content */
.type-header .type-tabs {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    padding-left: 2rem;
}

.type-tabs-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

/* Right tools area aligned with TOC */
.type-header-right-area {
    width: auto;
    min-width: 14rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
}

/* Dark mode */
[data-theme="dark"] .type-header {
    border-bottom-color: var(--gray-700);
}

/* ==========================================================================
   BASE LAYOUT - All Screens (Guides & Home)
   ========================================================================== */

.guides-layout,
.home-layout {
    width: 100%;
    position: relative;
    /* OneSignal approach: no max-width, full viewport width, padding controls layout */
}

/* Sidebar - Fixed positioning (guides only) */
.guides-layout .sidebar-mintlify,
.guides-layout .sidebar-user,
.guides-layout .sidebar-developer {
    width: var(--sidebar-width);
    position: fixed;
    left: var(--sidebar-offset-mobile);
    transition: transform 0.3s ease-in-out;
}

/* OneSignal approach: Main wrapper uses padding instead of margin */
.guides-layout .ml-72 {
    margin-left: 0 !important; /* Reset default margin */
    padding-left: calc(var(--sidebar-offset-mobile) + var(--sidebar-width) + var(--gap-sidebar-main));
    /* 32px + 298px + 31px = 361px on medium screens */
}

/* Main content max-width (guides only) */
.guides-layout main.max-w-4xl,
.guides-layout main#content,
.guides-layout main#content .prose.max-w-none,
.guides-layout main article {
    max-width: var(--main-content-width) !important;
    width: 100%;
}

/* Home page main content positioning */
.home-layout main {
    position: relative;
    z-index: 1;
    padding-top: 64px; /* Account for fixed header */
}

/* Header positioning - BASE RULE for screens < 1024px (ALL LAYOUTS) */
@media (max-width: 1023px) {
    .guides-layout .type-header-logo-area,
    .home-layout .type-header-logo-area {
        margin-left: 50px !important;
        padding-left: 1.5rem !important;
    }
    
    .guides-layout .type-header-right-area,
    .home-layout .type-header-right-area {
        margin-right: 50px !important;
        padding-right: 1.5rem !important;
    }
}

/* API Playground */
.api-playground-sidebar {
    width: var(--api-playground-width);
}

/* Right sidebar (TOC/API Playground) */
.guides-layout aside.toc-sidebar,
.guides-layout aside.api-playground-sidebar {
    margin-right: 40px;
}

/* Header logo and right area - UNIFIED for all layouts */
.guides-layout .type-header-logo-area,
.home-layout .type-header-logo-area {
    width: 18.625rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.guides-layout .type-header-right-area,
.home-layout .type-header-right-area {
    width: auto;
    min-width: 14rem;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* ==========================================================================
   MOBILE/TABLET (<= 1023px) - OneSignal Style
   Hide sidebars, full-width content
   ========================================================================== */

@media (max-width: 1023px) {
    /* Hide desktop sidebars */
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        transform: translateX(-100%);
    }
    
    .guides-layout aside.toc-sidebar,
    .guides-layout aside.api-playground-sidebar {
        display: none;
    }
    
    /* Full-width main content - no padding on mobile */
    .guides-layout .ml-72 {
        padding-left: 0 !important;
    }
    
    .guides-layout main.max-w-4xl,
    .guides-layout main#content,
    .guides-layout main#content .prose.max-w-none {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1.5rem;
    }
    
    /* Show sidebar when mobile menu is open */
    .sidebar-open .sidebar-mintlify,
    .sidebar-open .sidebar-user,
    .sidebar-open .sidebar-developer {
        transform: translateX(0);
        z-index: 50;
    }
}

/* ==========================================================================
   DESKTOP (1024px - 1999px)
   Fixed sidebar offset, optimized spacing
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1999px) {
    /* Sidebar stays at 170px from edge (guides only) */
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        left: var(--sidebar-offset-mobile);
    }
    
    /* Header logo area aligns with sidebar - UNIFIED */
    .guides-layout .type-header-logo-area,
    .home-layout .type-header-logo-area {
        margin-left: var(--sidebar-offset-mobile) !important; /* 32px */
        padding-left: 1.5rem !important;
    }
    
    /* Header right area - uses empirically tested value */
    .guides-layout .type-header-right-area,
    .home-layout .type-header-right-area {
        margin-right: var(--search-align-small) !important;
        padding-right: 0 !important;
    }

    /* OneSignal approach: padding creates sidebar space */
    .guides-layout .ml-72 {
        padding-left: calc(var(--sidebar-offset-mobile) + var(--sidebar-width) + var(--gap-sidebar-main));
        /* 32px + 298px + 31px = 361px */
    }
}

/* ==========================================================================
   15-16 INCH SCREENS (1600px - 1919px)
   ========================================================================== */

@media (min-width: 1600px) and (max-width: 1919px) {
    /* Sidebar positioned at 150px for 15-inch Mac displays */
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        left: 150px !important;
    }
    
    /* Header logo area aligns with sidebar at 150px */
    .guides-layout .type-header-logo-area,
    .home-layout .type-header-logo-area {
        margin-left: 150px !important;
    }
    
    /* Main content padding adjusted for 150px sidebar offset */
    .guides-layout .ml-72 {
        padding-left: calc(150px + var(--sidebar-width) + var(--gap-sidebar-main)) !important;
        /* 150px + 298px + 31px = 479px */
    }
    
    /* Header right area - uses empirically tested value */
    .guides-layout .type-header-right-area,
    .home-layout .type-header-right-area {
        margin-right: var(--search-align-medium) !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   1920x1080 SCREENS (1920px - 1999px)
   ========================================================================== */

@media (min-width: 1920px) and (max-width: 1999px) {
    /* Sidebar positioned at 150px for 1920px displays */
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        left: 150px !important;
    }
    
    /* Header logo area aligns with sidebar at 150px */
    .guides-layout .type-header-logo-area,
    .home-layout .type-header-logo-area {
        margin-left: 150px !important;
    }
    
    /* Main content padding adjusted for 150px sidebar offset */
    .guides-layout .ml-72 {
        padding-left: calc(150px + var(--sidebar-width) + var(--gap-sidebar-main)) !important;
        /* 150px + 298px + 31px = 479px */
    }
    
    /* Header right area - uses empirically tested value */
    .guides-layout .type-header-right-area,
    .home-layout .type-header-right-area {
        margin-right: var(--search-align-1920) !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   LARGE DESKTOP (2000px+) - Centered Container
   Sidebar moves right with centered container
   ========================================================================== */

@media (min-width: 2000px) {
    /* Sidebar positioned responsively from viewport edge (guides only) */
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        left: var(--sidebar-offset-desktop); /* Responsive: 280px @ 2000-2559px, 450px @ 2560px+ */
    }
    
    /* Header logo area - aligns with sidebar - UNIFIED */
    .guides-layout .type-header-logo-area,
    .home-layout .type-header-logo-area {
        margin-left: var(--sidebar-offset-desktop) !important; /* Responsive: 280px @ 2000-2559px, 450px @ 2560px+ */
        padding-left: 1.5rem !important;
        width: var(--sidebar-width) !important;
    }
    
    
    /* Right sidebars (guides only) - matches left side spacing for symmetry */
    .guides-layout aside.toc-sidebar,
    .guides-layout aside.api-playground-sidebar {
        margin-right: 170px; /* Same as left side offset for symmetry */
    }
    
    /* Header right area - uses empirically tested value */
    .guides-layout .type-header-right-area,
    .home-layout .type-header-right-area {
        margin-right: var(--search-align-large) !important;
        padding-right: 0 !important;
    }
    
    /* OneSignal approach: simple padding, no container offset calculation needed */
    .guides-layout .ml-72 {
        padding-left: calc(var(--sidebar-offset-desktop) + var(--sidebar-width) + var(--gap-sidebar-main));
        /* Responsive: 609px @ 2000-2559px (280+298+31), 779px @ 2560px+ (450+298+31) */
    }
}

/* ==========================================================================
   EXTRA LARGE DESKTOP (2560px+) - 2K/32 inch screens
   Move search box more toward middle
   ========================================================================== */


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Responsive: Hide sidebars when screen is too small for 720px + sidebars */
@media (max-width: 1400px) {
    /* Hide TOC/API playground on smaller screens */
    .guides-layout aside.toc-sidebar,
    .guides-layout aside.api-playground-sidebar {
        display: none !important;
    }
    
    /* Center main content */
    .guides-layout main.max-w-4xl,
    .guides-layout main#content,
    .guides-layout main#content .prose.max-w-none {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Industry standard gap between main and sidebars */
.guides-layout .flex-1.flex:not(.flex-col) {
    gap: 2rem;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   API PAGES - Specific Fixes
   ========================================================================== */

/* API pages: Schema column should respect standard content width (754px) */
.guides-layout main#content {
    max-width: var(--main-content-width) !important; /* 754px */
    width: 100%;
}

.guides-layout main#content .prose.max-w-none {
    max-width: var(--main-content-width) !important; /* 754px */
    width: 100%;
}

/* API pages: Openapi columns within content area */
.openapi-columns {
    max-width: 100%;
    width: 100%;
}

/* When API playground sidebar exists, make openapi-columns single column (schema only) */
body:has(.api-playground-sidebar) .openapi-columns {
    grid-template-columns: 1fr !important; /* Single column when playground is in sidebar */
}

/* Hide preview column when API playground sidebar is present */
body:has(.api-playground-sidebar) .openapi-column-preview {
    display: none !important;
}

/* Schema column takes full width when preview is hidden */
body:has(.api-playground-sidebar) .openapi-column-schema {
    max-width: none !important;
    width: 100% !important;
}

/* API pages: Properly align header on all screen sizes */
@media (min-width: 1024px) {
    /* Ensure API sidebar doesn't push header down */
    .guides-layout .type-header {
        height: 64px;
        min-height: 64px;
        max-height: 64px;
    }
    
    /* API page tabs should align same as guides */
    .guides-layout .type-tabs-left {
        margin-left: 0; /* Tabs position relative to their container */
    }
}

/* Mobile: Stack API columns vertically */
@media (max-width: 1023px) {
    .openapi-columns {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}