/* responsive.css - Responsive styles following Material Design 3 breakpoints */

/* Material Design 3 Breakpoints:
 * Extra-small: 0-599px
 * Small: 600-904px
 * Medium: 905-1239px
 * Large: 1240-1439px
 * Extra-large: 1440px+ */

/* Desktop First Approach */
@media screen and (max-width: 1439px) {
    .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1239px) {
    .container {
        max-width: 904px;
    }

    /* Typography adjustments */
    h1 {
        font-size: calc(var(--md-sys-typescale-display-medium) * 0.9);
    }

    .hero-description {
        font-size: calc(var(--md-sys-typescale-headline-small) * 0.9);
    }
}

@media screen and (max-width: 904px) {
    /* Layout adjustments */
    main {
        margin-right: 0;
        margin-top: 64px; /* Mobile header height */
    }

    .container {
        max-width: 600px;
        padding: 0 var(--md-spacing-16);
    }

    /* Mobile header */
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Mobile navigation */
    .mobile-nav {
        display: flex;
    }

    /* Hide desktop sidebar by default */
    .sidebar {
        transform: translateX(100%);
        transition: transform var(--md-duration-medium) var(--md-easing-emphasized);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    /* Show menu toggle */
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Section spacing */
    .hero,
    .features,
    .demo-section {
        padding: var(--md-spacing-32) 0;
    }

    /* Footer adjustments */
    .site-footer {
        margin-right: 0;
    }
}

@media screen and (max-width: 599px) {
    /* Hide navigation on small screens */
    .mobile-nav {
        display: none;
    }

    .hero h1 {
        font-size: var(--md-sys-typescale-headline-large);
    }

    /* Align demo section with other sections */
    .demo-section {
        padding: var(--md-spacing-32) var(--md-spacing-16);
        margin: var(--md-spacing-32) auto;
    }

    .demo-section h2 {
        font-size: var(--md-sys-typescale-headline-medium);
        margin-bottom: var(--md-spacing-24);
    }

    .demo-instructions {
        font-size: var(--md-sys-typescale-body-medium);
    }
}

/* Landscape mode adjustments */
@media screen and (max-height: 600px) and (orientation: landscape) {
    .sidebar-content {
        padding: var(--md-spacing-8);
    }

    .sidebar-logo {
        width: 50%;
    }

    .brand-text {
        font-size: var(--md-sys-typescale-body-small);
    }

    .divider {
        margin: var(--md-spacing-16) 0;
    }

    .sidebar-nav a {
        padding: var(--md-spacing-8) var(--md-spacing-16);
    }

    .platforms-section {
        margin-bottom: var(--md-spacing-16);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .sidebar {
        border-left: 2px solid var(--md-sys-color-outline);
    }

    .mobile-header {
        border-bottom: 2px solid var(--md-sys-color-outline);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar.active {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .sidebar,
    .mobile-header,
    .menu-toggle {
        display: none;
    }

    main {
        margin: 0;
    }

    .container {
        max-width: 100%;
        padding: 0 2cm;
    }

    .copyright {
        border-top: none;
    }
}