/**
 * Homepage Full-Width Layout - Comprehensive Fix V2
 * 
 * Version: 2.0
 * Last Updated: 2026-01-20
 * Author: GitHub Copilot
 * 
 * This is a systematic approach to fixing the full-width layout issue.
 * The strategy is to override Material for MkDocs constraints at every level
 * using a cascading approach from html/body down to specific sections.
 * 
 * Design Principles:
 * 1. Use CSS custom properties for maintainability
 * 2. Scope all overrides to homepage only using :has() selector
 * 3. Override at each DOM level to prevent any constraint from being missed
 * 4. Use !important judiciously only where needed to override Material theme
 * 5. Maintain responsive design for mobile devices
 * 
 * Target Resolutions:
 * - 1920x1080 (Full HD)
 * - 2560x1440 (QHD / 2K)
 * - 3840x2160 (4K UHD)
 * - Mobile and tablet responsiveness
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Variables)
   ======================================== */
:root {
  --homepage-full-width: 100vw;
  --homepage-max-width: none;
  --homepage-margin: 0;
  --homepage-padding: 0;
}

/* ========================================
   LEVEL 1: HTML AND BODY (Foundation)
   ======================================== */

/* Ensure HTML and body elements don't constrain width globally */
html {
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

/* Remove body margins/padding on homepage only */
body:has(.homepage-hero),
body:has(.plugin-showcase) {
  margin: var(--homepage-margin) !important;
  padding: var(--homepage-padding) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ========================================
   LEVEL 2: MATERIAL CONTAINER HIERARCHY
   ======================================== */

/* Override .md-container (top-level Material container) */
body:has(.homepage-hero) .md-container,
body:has(.plugin-showcase) .md-container {
  width: var(--homepage-full-width) !important;
  max-width: var(--homepage-max-width) !important;
  margin: var(--homepage-margin) !important;
  padding: var(--homepage-padding) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important; /* Remove any transforms that might offset */
}

/* Override .md-main (main content area) */
body:has(.homepage-hero) .md-main,
body:has(.plugin-showcase) .md-main {
  width: var(--homepage-full-width) !important;
  max-width: var(--homepage-max-width) !important;
  margin: var(--homepage-margin) !important;
  padding: var(--homepage-padding) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  position: relative !important;
}

/* Override .md-main__inner (inner wrapper) */
body:has(.homepage-hero) .md-main__inner,
body:has(.plugin-showcase) .md-main__inner {
  width: var(--homepage-full-width) !important;
  max-width: var(--homepage-max-width) !important;
  margin: var(--homepage-margin) !important;
  padding: var(--homepage-padding) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override .md-content (content wrapper) */
body:has(.homepage-hero) .md-content,
body:has(.plugin-showcase) .md-content {
  width: 100% !important;
  max-width: var(--homepage-max-width) !important;
  margin: var(--homepage-margin) !important;
  padding: var(--homepage-padding) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override .md-content__inner (innermost content wrapper) */
body:has(.homepage-hero) .md-content__inner,
body:has(.plugin-showcase) .md-content__inner {
  width: 100% !important;
  max-width: var(--homepage-max-width) !important;
  margin: var(--homepage-margin) !important;
  padding: var(--homepage-padding) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override .md-grid (CRITICAL: This is Material's main width constraint) */
body:has(.homepage-hero) .md-grid,
body:has(.plugin-showcase) .md-grid {
  width: 100% !important;
  max-width: var(--homepage-max-width) !important;
  margin: var(--homepage-margin) !important;
  padding: var(--homepage-padding) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override .md-typeset (typography container) */
body:has(.homepage-hero) .md-typeset,
body:has(.plugin-showcase) .md-typeset {
  max-width: var(--homepage-max-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override any data-md-component containers */
body:has(.homepage-hero) [data-md-component="container"],
body:has(.plugin-showcase) [data-md-component="container"] {
  width: 100% !important;
  max-width: var(--homepage-max-width) !important;
}

body:has(.homepage-hero) [data-md-component="content"],
body:has(.plugin-showcase) [data-md-component="content"] {
  width: 100% !important;
  max-width: var(--homepage-max-width) !important;
}

/* ========================================
   LEVEL 3: SIDEBAR HANDLING
   ======================================== */

/* Hide sidebars on desktop (homepage doesn't need them) */
@media screen and (min-width: 60em) {
  body:has(.homepage-hero) .md-sidebar,
  body:has(.homepage-hero) .md-sidebar--primary,
  body:has(.homepage-hero) .md-sidebar--secondary,
  body:has(.plugin-showcase) .md-sidebar,
  body:has(.plugin-showcase) .md-sidebar--primary,
  body:has(.plugin-showcase) .md-sidebar--secondary {
    display: none !important;
    width: 0 !important;
  }
}

/* Ensure no drawer offset on desktop */
@media screen and (min-width: 60em) {
  /* Remove left margin that Material adds for drawer */
  body:has(.homepage-hero) .md-container,
  body:has(.plugin-showcase) .md-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }
  
  body:has(.homepage-hero) .md-main,
  body:has(.plugin-showcase) .md-main {
    margin-left: 0 !important;
    transform: none !important;
  }
  
  /* Even when drawer is toggled, don't offset */
  body:has(.homepage-hero) [data-md-toggle="drawer"]:checked ~ .md-container,
  body:has(.homepage-hero) [data-md-toggle="drawer"]:checked ~ .md-container .md-main,
  body:has(.plugin-showcase) [data-md-toggle="drawer"]:checked ~ .md-container,
  body:has(.plugin-showcase) [data-md-toggle="drawer"]:checked ~ .md-container .md-main {
    margin-left: 0 !important;
    transform: none !important;
  }
  
  /* Header should also span full width */
  body:has(.homepage-hero) .md-header,
  body:has(.plugin-showcase) .md-header {
    left: 0 !important;
    width: 100% !important;
  }
}

/* ========================================
   LEVEL 4: HOMEPAGE SECTIONS
   ======================================== */

/* Make all homepage sections full width */
body:has(.homepage-hero) .homepage-hero,
body:has(.homepage-hero) section,
body:has(.plugin-showcase) .plugin-showcase,
body:has(.plugin-showcase) section {
  width: 100% !important;
  max-width: var(--homepage-max-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
}

/* Section containers should also be full width initially */
.section-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ========================================
   LEVEL 5: HIGH RESOLUTION OPTIMIZATIONS
   ======================================== */

/* For screens wider than 1220px (Material's default breakpoint) */
@media screen and (min-width: 76.25em) {
  body:has(.homepage-hero) .md-grid,
  body:has(.plugin-showcase) .md-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
  
  body:has(.homepage-hero) .md-main,
  body:has(.homepage-hero) .md-main__inner,
  body:has(.homepage-hero) .md-content,
  body:has(.homepage-hero) .md-content__inner,
  body:has(.plugin-showcase) .md-main,
  body:has(.plugin-showcase) .md-main__inner,
  body:has(.plugin-showcase) .md-content,
  body:has(.plugin-showcase) .md-content__inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body:has(.homepage-hero) .md-container,
  body:has(.plugin-showcase) .md-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* For 2K displays (2560px wide) */
@media screen and (min-width: 2560px) {
  /* Increase max-width for section containers on ultra-wide displays */
  .section-container {
    max-width: 2400px;
    margin: 0 auto;
    padding: 8rem 5rem;
  }
  
  .hero-content {
    max-width: 2200px;
  }
  
  .download-container {
    grid-template-columns: 1.2fr 1fr;
    gap: 6rem;
    padding: 6rem;
  }
}

/* For 4K displays (3840px wide) */
@media screen and (min-width: 3840px) {
  .section-container {
    max-width: 3200px;
    padding: 10rem 6rem;
  }
  
  .hero-content {
    max-width: 3000px;
  }
}

/* ========================================
   LEVEL 6: MOBILE RESPONSIVENESS
   ======================================== */

/* Tablets and below */
@media screen and (max-width: 59.9375em) {
  body:has(.homepage-hero) .md-overlay,
  body:has(.plugin-showcase) .md-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.54) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s !important;
    z-index: 3 !important;
  }
  
  [data-md-toggle="drawer"]:checked ~ .md-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  body:has(.homepage-hero) .md-header,
  body:has(.plugin-showcase) .md-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
  }
  
  body:has(.homepage-hero) .md-sidebar--primary,
  body:has(.plugin-showcase) .md-sidebar--primary {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 12.5rem !important;
    height: 100vh !important;
    transform: translateX(-12.5rem) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 4 !important;
    display: block !important;
    background-color: var(--md-default-bg-color, #fff) !important;
  }
  
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(0) !important;
  }
}

/* ========================================
   LEVEL 7: DEBUG AND VERIFICATION
   ======================================== */

/* Add visual debug border (comment out in production) */
/*
body:has(.homepage-hero) .md-container,
body:has(.homepage-hero) .md-main,
body:has(.homepage-hero) .md-content {
  outline: 2px solid red !important;
}
*/

/* ========================================
   FALLBACK FOR BROWSERS WITHOUT :has()
   ======================================== */

/* For older browsers that don't support :has(), we can use a class-based approach */
@supports not selector(:has(*)) {
  /* Apply full-width styles when homepage-fullwidth class is added to body */
  body.homepage-fullwidth .md-container,
  body.homepage-fullwidth .md-main,
  body.homepage-fullwidth .md-main__inner,
  body.homepage-fullwidth .md-content,
  body.homepage-fullwidth .md-content__inner,
  body.homepage-fullwidth .md-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ========================================
   ACCESSIBILITY AND PERFORMANCE
   ======================================== */

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles - ensure content is readable when printed */
@media print {
  body:has(.homepage-hero),
  body:has(.plugin-showcase) {
    max-width: 100%;
  }
  
  .md-container,
  .md-main,
  .md-content {
    max-width: 100% !important;
  }
}