/* Responsive design and media queries */

/* Small devices (< 375px) */
@media (max-width: 374px) {
    :root {
        --frame-width: 25px;
    }

    .company-name {
        font-size: 20px;
        letter-spacing: 1.5px;
    }

    .contact-link {
        font-size: 12px;
    }

    .logo-container {
        max-width: 140px;
    }

    .modal-content {
        padding: 25px;
        width: 280px;
    }
}

/* Large devices / tablets (> 768px) */
@media (min-width: 768px) {
    :root {
        --frame-width: 45px;
    }

    .company-name {
        font-size: 28px;
        letter-spacing: 2.5px;
    }

    .contact-link {
        font-size: 16px;
    }

    .logo-container {
        max-width: 220px;
    }

    .modal-content {
        max-width: 400px;
    }
}

/* Handle notched devices (iPhone X+) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    .passe-partout {
        padding-left: max(var(--frame-width), calc(var(--frame-width) + env(safe-area-inset-left)));
        padding-right: max(var(--frame-width), calc(var(--frame-width) + env(safe-area-inset-right)));
        padding-top: max(var(--frame-width), calc(var(--frame-width) + env(safe-area-inset-top)));
        padding-bottom: max(var(--frame-width), calc(var(--frame-width) + env(safe-area-inset-bottom)));
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) {
    .splash-content {
        flex-direction: row;
        gap: 30px;
        align-items: center;
        max-width: 90vw;
    }

    .logo-container {
        margin-bottom: 0;
    }

    .company-name {
        font-size: 22px;
    }

    .contact-info {
        margin-top: 5px;
    }

    .loading-indicator {
        margin-top: 15px;
    }

    .author-text {
        font-size: 10px;
    }
}

/* Very small heights (landscape on small phones) */
@media (max-height: 400px) {
    .company-name {
        font-size: 18px;
    }

    .contact-link {
        font-size: 11px;
    }

    .logo-container {
        max-width: 100px;
    }

    .loading-indicator {
        width: 150px;
        margin-top: 10px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .author-text,
    .contact-link,
    .loading-text {
        text-rendering: optimizeLegibility;
    }
}

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

    .brushed-metal-bg {
        animation: none;
    }
}

/* Dark mode (default is already dark) */
@media (prefers-color-scheme: dark) {
    /* Already optimized for dark mode */
}

/* Light mode adjustments (if user prefers light but we want to stay dark) */
@media (prefers-color-scheme: light) {
    /* Keep dark theme regardless */
}