/* Full Width Content Styles for MkDocs Material Theme */

/* Make main content area full width */
.md-main__inner {
    max-width: none !important;
    padding: 0 !important;
}

/* Make content area full width */
.md-content {
    max-width: none !important;
    width: 100% !important;
    padding: 0 2rem !important;
}

/* Make content wrapper full width */
.md-content__inner {
    max-width: none !important;
    width: 100% !important;
}

/* Adjust navigation for full width */
.md-nav {
    max-width: none !important;
}

/* Make tables full width */
.md-typeset table {
    width: 100% !important;
    max-width: none !important;
}

/* Make code blocks full width */
.md-typeset pre {
    max-width: none !important;
    width: 100% !important;
}

/* Make images larger and more prominent */
.md-typeset img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1rem auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Tool images - responsive sizing for tool images */
.md-typeset img.tool-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Adjust grid layout for full width */
.md-grid {
    max-width: none !important;
}

/* Make sidebars work with full width */
.md-sidebar {
    max-width: none !important;
}

/* Responsive adjustments */
@media (max-width: 76.1875em) {
    .md-content {
        padding: 0 1rem !important;
    }
    
    /* Mobile devices - images take full width */
    .md-typeset img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    .md-typeset img.tool-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Tablet and desktop - limit maximum dimensions */
@media (min-width: 76.1875em) {
    .md-typeset img {
        max-width: 100% !important;
        max-height: 70vh !important; /* Maximum 70% of viewport height */
        width: auto !important;
        height: auto !important;
    }
    
    .md-typeset img.tool-image {
        max-width: 800px !important;
        max-height: 600px !important;
        width: auto !important;
        height: auto !important;
    }
}

/* Large desktop screens */
@media (min-width: 1200px) {
    .md-typeset img {
        max-width: 100% !important;
        max-height: 80vh !important; /* Maximum 80% of viewport height on large screens */
        width: auto !important;
        height: auto !important;
    }
    
    .md-typeset img.tool-image {
        max-width: 1000px !important;
        max-height: 700px !important;
        width: auto !important;
        height: auto !important;
    }
}

/* Ensure proper spacing */
.md-content__inner > *:first-child {
    margin-top: 0 !important;
}

.md-content__inner > *:last-child {
    margin-bottom: 0 !important;
}