/* 
 * Dastaan Web App Styles
 * Industry-standard responsive design with Hindi font support
 */

/* CSS Custom Properties for responsive design */
:root {
    --max-content-width: 1200px;  /* Max width for desktop content */
    --content-padding: 20px;      /* Padding for content */
    --mobile-breakpoint: 768px;   /* Mobile breakpoint */
    --tablet-breakpoint: 1024px;  /* Tablet breakpoint */
}

html, body {
    width: 100%;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height for mobile */
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Font support for Hindi (Devanagari script) with fallbacks */
    font-family: 'Noto Sans Devanagari', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    /* Ensure proper rendering of Devanagari characters */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Enable font features for Devanagari */
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Apply font to all elements including Compose canvas and text elements */
*, *::before, *::after {
    font-family: 'Noto Sans Devanagari', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Specifically target canvas and SVG elements used by Compose */
canvas, svg {
    font-family: 'Noto Sans Devanagari', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* 
 * Responsive Container - Industry Standard Approach
 * This centers content and limits max width on large screens
 */
body > div:first-child {
    /* Compose Viewport container */
    max-width: 100%;
    margin: 0 auto;
    height: 100%;
}

/* Desktop (large screens) - Center content with max width */
@media (min-width: 1024px) {
    body > div:first-child {
        max-width: var(--max-content-width);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }
}

/* Tablet (medium screens) - Allow more width */
@media (min-width: 768px) and (max-width: 1023px) {
    body > div:first-child {
        max-width: 90%;
    }
}

/* Mobile (small screens) - Full width */
@media (max-width: 767px) {
    body > div:first-child {
        max-width: 100%;
    }
}

/* 
 * Accessibility and UX Improvements
 */

/* Focus styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Smooth scrolling for internal links */
html {
    scroll-behavior: smooth;
}

/* 
 * Performance Optimizations
 */

/* GPU acceleration for transforms and animations */
canvas {
    transform: translateZ(0);
    will-change: transform;
}

/* Prevent text selection during interactions (can be overridden as needed) */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}