/* ModernDocs Theme - Responsive Styles */

/* Mobile First Approach */

/* Extra small devices (phones, 320px and up) */
@media (min-width: 320px) {
    .container {
        padding: 0 var(--space-4);
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .app-card {
        padding: var(--space-4);
    }
    
    .feature-icon {
        width: 3rem;
        height: 3rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        padding: 0 var(--space-6);
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    .app-card {
        padding: var(--space-6);
    }
    
    .feature-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-8);
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    .app-card {
        padding: var(--space-8);
    }
    
    .feature-icon {
        width: 4rem;
        height: 4rem;
    }
    
    /* Show desktop navigation */
    .desktop-nav {
        display: block;
    }
    
    .mobile-nav {
        display: none;
    }
    
    /* Hide mobile menu button */
    .mobile-menu-btn {
        display: none;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        padding: 0 var(--space-12);
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    /* Show sidebar */
    .sidebar {
        display: flex;
    }
    
    /* Adjust main content */
    .content-main {
        padding-left: 18rem;
    }
    
    /* Grid layouts */
    .apps-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        padding: 0 var(--space-16);
    }
    
    .hero-title {
        font-size: 3.75rem;
    }
    
    .apps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        padding: 0 var(--space-20);
    }
    
    .apps-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    /* Hide desktop navigation */
    .desktop-nav {
        display: none;
    }
    
    /* Show mobile navigation */
    .mobile-nav {
        display: block;
    }
    
    /* Show mobile menu button */
    .mobile-menu-btn {
        display: block;
    }
    
    /* Mobile header adjustments */
    .mobile-header {
        padding: var(--space-2) var(--space-4);
    }
    
    /* Mobile search */
    .mobile-search {
        width: 100%;
        margin-top: var(--space-4);
    }
    
    /* Mobile logo */
    .mobile-logo {
        font-size: 1.125rem;
    }
    
    /* Full width on mobile */
    .mobile-full {
        width: 100%;
    }
    
    /* Stack elements vertically */
    .mobile-stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }
    
    /* Adjust padding for mobile */
    .mobile-padding {
        padding: var(--space-4) var(--space-2);
    }
    
    /* Smaller text on mobile */
    .mobile-text-sm {
        font-size: 0.875rem;
    }
    
    /* Mobile search */
    .mobile-search {
        width: 100%;
        margin-top: var(--space-4);
    }
    
    /* Mobile cards */
    .mobile-card {
        width: 100%;
        margin-bottom: var(--space-4);
    }
    
    /* Mobile sidebar overlay */
    .mobile-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    /* Mobile sidebar content */
    .mobile-sidebar-content {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 16rem;
        background-color: var(--white);
        box-shadow: var(--shadow-xl);
        z-index: 50;
    }
}

/* Tablet-specific styles */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two column layout for tablets */
    .tablet-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    /* Adjust spacing for tablets */
    .tablet-spacing {
        padding: var(--space-6) var(--space-4);
    }
    
    /* Tablet navigation */
    .tablet-nav {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }
}

/* Desktop-specific styles */
@media (min-width: 1024px) {
    /* Three column layout for desktop */
    .desktop-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
    
    /* Desktop navigation */
    .desktop-nav {
        display: flex;
        align-items: center;
        gap: var(--space-8);
    }
    
    /* Desktop sidebar */
    .desktop-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 18rem;
        background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
        border-right: 1px solid var(--gray-200);
        backdrop-filter: blur(10px);
        box-shadow: 4px 0 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    /* Desktop content area */
    .desktop-content {
        margin-left: 18rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows */
    .high-dpi-border {
        border-width: 0.5px;
    }
    
    /* Better image quality */
    .high-dpi-image {
        image-rendering: crisp-edges;
    }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
    /* Compact layout for landscape mobile */
    .landscape-compact {
        padding: var(--space-2) 0;
    }
    
    .landscape-hero {
        padding: var(--space-8) 0;
    }
    
    .landscape-title {
        font-size: 1.5rem;
    }
}

/* Print styles */
@media print {
    /* Hide navigation and sidebar */
    .sidebar,
    .mobile-nav,
    .desktop-nav,
    .mobile-menu-btn {
        display: none;
    }
    
    /* Full width content */
    .content-main {
        padding-left: 0;
    }
    
    /* Adjust colors for print */
    .print-black {
        color: black;
    }
    
    .print-white-bg {
        background-color: white;
    }
    
    /* Page breaks */
    .print-break-before {
        page-break-before: always;
    }
    
    .print-break-after {
        page-break-after: always;
    }
    
    .print-break-inside-avoid {
        page-break-inside: avoid;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-fade-in,
    .animate-slide-in,
    .animate-pulse,
    .animate-spin {
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .high-contrast {
        border: 2px solid black;
    }
    
    .high-contrast-text {
        color: black;
    }
    
    .high-contrast-bg {
        background-color: white;
    }
}

/* Dark mode preferences */
@media (prefers-color-scheme: dark) {
    .auto-dark {
        background-color: var(--gray-900);
        color: var(--white);
    }
}

/* Light mode preferences */
@media (prefers-color-scheme: light) {
    .auto-light {
        background-color: var(--white);
        color: var(--gray-900);
    }
}

/* Container queries (when supported) */
@container (min-width: 400px) {
    .container-responsive {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 600px) {
    .container-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Utility classes for responsive design */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1536px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.responsive-text {
    font-size: 0.875rem;
}

@media (min-width: 640px) {
    .responsive-text {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .responsive-text {
        font-size: 1.125rem;
    }
}

.responsive-padding {
    padding: var(--space-4);
}

@media (min-width: 640px) {
    .responsive-padding {
        padding: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .responsive-padding {
        padding: var(--space-8);
    }
}

.responsive-margin {
    margin: var(--space-4);
}

@media (min-width: 640px) {
    .responsive-margin {
        margin: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .responsive-margin {
        margin: var(--space-8);
    }
}

.responsive-flex {
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .responsive-flex {
        flex-direction: row;
    }
}

.responsive-spacing {
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .responsive-spacing {
        gap: 0;
        gap: var(--space-4);
    }
}

/* Hide/show utilities */
.hide-mobile {
    display: none;
}

@media (min-width: 640px) {
    .hide-mobile {
        display: block;
    }
}

.hide-tablet {
    display: none;
}

@media (min-width: 768px) {
    .hide-tablet {
        display: block;
    }
}

@media (min-width: 1024px) {
    .hide-tablet {
        display: none;
    }
}

.hide-desktop {
    display: block;
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }
}

.show-mobile {
    display: block;
}

@media (min-width: 640px) {
    .show-mobile {
        display: none;
    }
}

.show-tablet {
    display: none;
}

@media (min-width: 640px) {
    .show-tablet {
        display: block;
    }
}

@media (min-width: 1024px) {
    .show-tablet {
        display: none;
    }
}

.show-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .show-desktop {
        display: block;
    }
}

/* Footer responsive styles */
@media (max-width: 640px) {
    .footer-modern .container {
        padding: var(--space-8) var(--space-4);
    }
    
    .footer-modern .flex {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
    
    .footer-modern .flex > div:last-child {
        gap: var(--space-4);
    }
}

/* Main content area - responsive padding removed to allow guides-layout override */
/* These old rules were creating huge gaps between sidebar and main content */

/* ========================================================================
   CENTERED LAYOUT CONTAINER - Industry Standard Documentation Layout
   Inspired by OneSignal, Klaviyo, WonderPush
   ======================================================================== */

/* Constrain entire layout (sidebar + content + TOC) within max-width */
.guides-layout {
    max-width: 2000px; /* Large enough for most screens, maintains structure */
    margin: 0 auto;
    position: relative;
}

/* Sidebar width for documentation - move sidebar closer to main content */
.sidebar-mintlify,
.sidebar-user,
.sidebar-developer {
    width: 18.625rem !important; /* 298px - expanded for more space */
    position: fixed;
    left: 0;
}

/* Move sidebar closer to main - matching OneSignal/WonderPush style */
.guides-layout .sidebar-mintlify,
.guides-layout .sidebar-user,
.guides-layout .sidebar-developer {
    left: 50px !important; /* 50px from edge for more middle content space */
}


/* Adjust main content margin to match sidebar - BASE for small screens */
.ml-72 {
    margin-left: 18.625rem !important; /* Match sidebar width */
}

/* Adjust ml-72 container to match sidebar position on all screens */
.guides-layout .ml-72 {
    margin-left: calc(18.625rem + 50px) !important; /* Sidebar width + left offset */
}

/* On large screens: Account for BOTH container centering AND sidebar width */
@media (min-width: 1600px) {
    body .guides-layout .flex-1.flex.flex-col.ml-72 {
        /* Sidebar right edge (798px) + desired gap (32px) = 830px from viewport */
        /* Adjusted to: 550px = 34.375rem */
        margin-left: 34.375rem !important;
    }
}

@media (min-width: 1920px) {
    body .guides-layout .flex-1.flex.flex-col.ml-72 {
        /* Account for container centering and sidebar positioning */
        margin-left: 34.375rem !important;
    }
}

@media (min-width: 2560px) {
    body .guides-layout .flex-1.flex.flex-col.ml-72 {
        /* Account for container centering and sidebar positioning */
        margin-left: 34.375rem !important;
    }
}

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

/* REVERTED: Don't change main section positioning - it should stay centered */

/* Narrow main content to match industry standard (OneSignal, etc.) */
.guides-layout main.max-w-4xl {
    max-width: 55rem !important; /* ~880px, 20% wider for better content display */
}

/* On small screens, center the main content */
@media (max-width: 1599px) {
    .guides-layout main.max-w-4xl {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* For API pages: Apply same max-width as guides */
.guides-layout main#content {
    max-width: 55rem !important;
}

/* Override prose max-w-none for API pages to constrain content */
.guides-layout main#content .prose.max-w-none {
    max-width: 55rem !important;
}

/* On small screens, center the API content */
@media (max-width: 1599px) {
    .guides-layout main#content .prose.max-w-none {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Ensure openapi-columns are properly constrained within their container */
.openapi-columns {
    max-width: 100% !important;
    width: 100% !important;
}

/* When preview column is hidden (API playground sidebar is used), make schema column full width */
.openapi-column-preview[style*="display: none"] ~ .openapi-column-schema,
.openapi-column-preview[style*="display:none"] ~ .openapi-column-schema {
    grid-column: 1 / -1;
    max-width: none;
}

/* Alternative: when API playground sidebar exists, make openapi-columns single column */
.api-playground-sidebar ~ * .openapi-columns,
body:has(.api-playground-sidebar) .openapi-columns {
    grid-template-columns: 1fr !important;
}

body:has(.api-playground-sidebar) .openapi-column-preview {
    display: none !important;
}

body:has(.api-playground-sidebar) .openapi-column-schema {
    max-width: none !important;
    width: 100% !important;
}

/* Type-header starts from left edge (logo area above sidebar) */
.type-header {
    left: 0 !important;
}

/* TOC and API playground already have gap from flex */
aside.toc-sidebar {
    flex-shrink: 0; /* Don't shrink the TOC */
}

/* Base API playground sidebar */
.guides-layout aside.api-playground-sidebar {
    flex-shrink: 0;
}

/* Right sidebar positioning - consistent across all tabs */
/* Small screens: 40px from right edge */
.guides-layout aside.toc-sidebar,
.guides-layout aside.api-playground-sidebar {
    margin-right: 40px !important;
}

/* Large screens: account for container centering to achieve ~512px from screen edge */
@media (min-width: 1600px) {
    .guides-layout aside.toc-sidebar,
    .guides-layout aside.api-playground-sidebar {
        margin-right: 250px !important;
    }
}

/* Center the sidebar within the constrained layout on large screens */
@media (min-width: 1600px) {
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        left: calc((100vw - 1600px) / 2 + 50px) !important; /* 50px offset (moved 30px left) */
    }
    
    /* Header stays full width but logo area aligns with centered sidebar */
    .type-header {
        left: 0 !important;
        right: 0 !important;
    }
    
    .guides-layout .type-header-logo-area {
        margin-left: calc((100vw - 1600px) / 2 + 50px) !important; /* Align with left sidebar */
        padding-left: 1.5rem !important;
    }
    
    .guides-layout .type-header-right-area {
        margin-right: 498px !important; /* Align with TOC left edge */
        padding-right: 1.5rem !important;
    }
    
    /* Align tabs with main content area on large screens */
    .type-header .type-tabs {
        padding-left: 1rem;
    }
    
    /* API playground width is consistent across all screens - no override needed */
}

/* For ultra-wide screens (1920px - 2560px) */
@media (min-width: 1920px) {
    .guides-layout {
        max-width: 2000px; /* Same as base */
    }
    
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        left: calc((100vw - 1800px) / 2 + 50px) !important; /* 50px offset (moved 30px left) */
    }
    
    .type-header {
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Logo area MUST match sidebar position exactly */
    .guides-layout .type-header-logo-area {
        margin-left: calc((100vw - 1800px) / 2 + 50px) !important; /* Align with left sidebar */
        padding-left: 1.5rem !important;
        width: 18.625rem !important; /* Match sidebar width */
    }
    
    .guides-layout .type-header-right-area {
        margin-right: 498px !important; /* Align with TOC left edge */
        padding-right: 1.5rem !important;
    }
    
    /* Align tabs with main content area on large screens */
    .type-header .type-tabs {
        padding-left: 1rem;
    }
    
    /* API playground width is consistent across all screens - no override needed */
}

/* For super ultra-wide screens (2560px+) - Spread sidebars outward */
@media (min-width: 2560px) {
    .guides-layout {
        max-width: 2000px; /* Same as base */
    }
    
    .guides-layout .sidebar-mintlify,
    .guides-layout .sidebar-user,
    .guides-layout .sidebar-developer {
        left: calc((100vw - 1660px) / 2 + 50px) !important; /* 50px offset (moved 30px left) */
    }
    
    .guides-layout .type-header-logo-area {
        margin-left: calc((100vw - 1660px) / 2 + 50px) !important; /* Match sidebar exactly */
        padding-left: 1.5rem !important;
        width: 18.625rem !important;
    }
    
    .guides-layout .type-header-right-area {
        margin-right: 498px !important; /* Align with TOC left edge */
        padding-right: 1.5rem !important;
    }
    
    /* Align tabs with main content area on large screens */
    .type-header .type-tabs {
        padding-left: 1rem; /* Reduce padding on large screens */
    }
}

/* Adjust main content wrapper */
.guides-layout .flex-1.flex.flex-col {
    max-width: 100%;
}

/* Ensure guides-layout body background extends full width */
body:has(.guides-layout) {
    overflow-x: hidden;
}

/* ========================================================================
   FULL-WIDTH HEADER - Industry Standard
   ======================================================================== */

/* Make type-header span full viewport width with border */
.type-header {
    position: fixed;
    top: 0; /* At the top */
    left: 0 !important;
    right: 0 !important;
    width: 100vw;
    height: 64px; /* Taller to accommodate logo */
    padding: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    background: var(--body-bg);
    z-index: 9999;
}

/* Ensure logo is visible */
.type-header img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure all header content is visible and above ::before */
.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: 1 !important; /* Above ::before element */
}

/* Logo link styling */
.type-header a {
    text-decoration: none;
}

/* Make sure theme switcher is visible in header logo area */
.type-header-logo-area .theme-switcher {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Logo in type-header uses same classes as sidebar */
.type-header .sidebar-logo {
    padding: 0 !important;
    margin: 0 !important;
    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; /* Override sidebar's space-between */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

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

.type-header .sidebar-logo-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.type-header .sidebar-logo-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

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

/* Remove padding from sidebar-logo when inside header to avoid double padding */
.type-header-logo-area .sidebar-logo {
    padding: 0 !important;
    margin: 0 !important;
}

/* Align logo with left sidebar position - BASE RULE for screens < 1600px */
@media (max-width: 1599px) {
    .guides-layout .type-header-logo-area {
        margin-left: 50px !important;
        padding-left: 1.5rem !important;
    }
}

/* Tabs area - align with main content */
.type-header .type-tabs {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* Align tabs to the left edge of main content */
    align-items: center;
    padding: 0;
    padding-left: 2rem; /* Add some spacing from logo area */
}

/* Align tabs to left (start of main content area) */
.type-tabs-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

/* Right tools area aligned with TOC - consistent across all pages */
.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;
}

/* In guides layout, align search/lang with TOC position - BASE RULE for screens < 1600px */
@media (max-width: 1599px) {
    .guides-layout .type-header-right-area {
        margin-right: 40px !important; /* Match small screen TOC position */
        padding-right: 1.5rem !important;
    }
}



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

/* ============================================
   HOMEPAGE HEADER ALIGNMENT (home-layout only)
   ============================================ */
/* ========== TEMPORARY DEBUG COLORS ========== */
/* Homepage logo area - RED background */
.home-layout .type-header-logo-area {
    background: rgba(255, 0, 0, 0.3) !important;
}

/* Guides logo area - BLUE background */
.guides-layout .type-header-logo-area {
    background: rgba(0, 0, 255, 0.3) !important;
}

/* Homepage tabs - YELLOW background */
.home-layout .type-tabs {
    background: rgba(255, 255, 0, 0.3) !important;
}

/* Guides tabs - GREEN background */
.guides-layout .type-tabs {
    background: rgba(0, 255, 0, 0.3) !important;
}
/* ============================================ */

/* Homepage header - EXACT match of guides-layout positioning */
.home-layout .type-header-logo-area {
    width: 18.625rem !important; /* Same fixed width as guides-layout */
    padding-left: 1.5rem !important; /* Match guides-layout exactly */
    padding-right: 1.5rem !important;
    margin-left: 20px !important; /* Adjusted to match guides: 500px - 30px offset */
}

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

/* Responsive - match guides-layout margins at different breakpoints (reduced by 30px) */
@media (min-width: 1600px) {
    .home-layout .type-header-logo-area {
        margin-left: calc((100vw - 1600px) / 2 + 20px) !important;
        padding-left: 1.5rem !important;
    }
    .home-layout .type-header-right-area {
        margin-right: calc((100vw - 1600px) / 2 + 10px) !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .home-layout .type-header-logo-area {
        margin-left: 10px !important;
        padding-left: 1.5rem !important;
    }
    .home-layout .type-header-right-area {
        margin-right: 10px !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .home-layout .type-header-logo-area {
        margin-left: 0px !important;
        padding-left: 1.5rem !important;
    }
    .home-layout .type-header-right-area {
        margin-right: 0px !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 1023px) {
    .home-layout .type-header-logo-area {
        margin-left: 20px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .home-layout .type-header-right-area {
        margin-right: 20px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Z-index for homepage header (match guides-layout) */
.home-layout {
    position: relative;
    z-index: 0;
}

.home-layout .type-header {
    z-index: 9999;
}

.home-layout main {
    position: relative;
    z-index: 1;
}

/* Medium screens (1280px to 1440px) - Gradual scaling */
@media (min-width: 1280px) and (max-width: 1440px) {
    .guides-layout .type-header-logo-area {
        margin-left: 40px !important;
    }
    
    .guides-layout .type-header-right-area {
        margin-right: 140px !important;
    }
}

/* Tablet adjustments (1024px to 1280px) */
@media (min-width: 1024px) and (max-width: 1280px) {
    .guides-layout .type-header-logo-area {
        margin-left: 30px !important;
    }
    
    .guides-layout .type-header-right-area {
        margin-right: 80px !important;
    }
    
    .type-header .type-tabs {
        padding: 0 1rem;
    }
}

/* Small tablet adjustments (768px to 1024px) */
@media (max-width: 1024px) {
    .type-header-logo-area {
        width: auto;
        padding: 0 1rem;
    }
    
    .guides-layout .type-header-logo-area {
        margin-left: 20px !important;
    }
    
    .type-header .type-tabs {
        padding: 0 1rem;
    }
    
    .type-header-right-area {
        min-width: auto;
        padding: 0 1rem;
    }
    
    .guides-layout .type-header-right-area {
        margin-right: 20px !important;
    }
    
    .type-header {
        padding: 0 0.5rem;
    }
}

/* Mobile - hide logo area and right tools area, show simplified header */
@media (max-width: 768px) {
    .type-header-logo-area {
        display: none;
    }
    
    .type-header-right-area {
        display: none;
    }
    
    .type-header {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5rem 0;
    }
    
    .type-header .type-tabs {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 1rem;
    }
    
    .type-tabs-left {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    /* Make tabs smaller on mobile */
    .type-header .type-tab {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
}