/* css/responsive.css */

@media (min-width: 600px) {
    /* Original .container style was for max-width constraint. If needed, add: 
    .app-container { max-width: 960px; margin: 0 auto; } 
    or apply to a more specific inner container if the whole app isn't constrained.
    For now, only applying specific component adjustments. */

    .app-header {
        height: 100px; /* Reduced from 120px to match the new compact design */
    }

    .logo-container {
        width: 210px; /* Adjusted from 180px to be between 180px and 240px */
        height: 80px; /* Adjusted from 70px to be between 70px and 90px */
    }

    .logo-container img {
        width: 42px; /* Adjusted from 36px to be between 36px and 48px */
        height: 42px; /* Adjusted from 36px to be between 36px and 48px */
    }

    .logo-text {
        font-size: 26px; /* Adjusted from 24px to be between 24px and 28px */
    }
}