/**
 * VIK AUTO TRADING - Responsive Styles
 *
 * 반응형 미디어 쿼리
 * (새 디자인용 - VOID 컨셉)
 */

/* ==========================================
   LARGE DESKTOP (1400px+)
========================================== */

@media (min-width: 1400px) {
    :root {
        --font-size-logo: 42px;
        --letter-spacing-logo: 18px;
        --font-size-menu: 15px;
        --letter-spacing-menu: 7px;
    }
}

/* ==========================================
   DESKTOP (1200px - 1399px)
========================================== */

@media (min-width: 1200px) and (max-width: 1399px) {
    :root {
        --font-size-logo: 38px;
        --letter-spacing-logo: 16px;
    }
}

/* ==========================================
   TABLET LANDSCAPE (992px - 1199px)
========================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --font-size-logo: 32px;
        --letter-spacing-logo: 12px;
        --font-size-menu: 13px;
        --letter-spacing-menu: 5px;
    }
}

/* ==========================================
   TABLET PORTRAIT (768px - 991px)
========================================== */

@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --font-size-logo: 28px;
        --letter-spacing-logo: 10px;
        --font-size-menu: 12px;
        --letter-spacing-menu: 4px;
        --spacing-xl: 40px;
    }
}

/* ==========================================
   MOBILE LANDSCAPE (576px - 767px)
========================================== */

@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --font-size-logo: 24px;
        --letter-spacing-logo: 8px;
        --font-size-menu: 12px;
        --letter-spacing-menu: 4px;
        --spacing-xl: 30px;
    }
}

/* ==========================================
   MOBILE PORTRAIT (< 576px)
========================================== */

@media (max-width: 575px) {
    :root {
        --font-size-logo: 20px;
        --letter-spacing-logo: 6px;
        --font-size-menu: 11px;
        --letter-spacing-menu: 3px;
        --spacing-xl: 25px;
        --spacing-lg: 20px;
    }
}

/* ==========================================
   VERY SMALL SCREENS (< 360px)
========================================== */

@media (max-width: 359px) {
    :root {
        --font-size-logo: 16px;
        --letter-spacing-logo: 4px;
        --font-size-menu: 10px;
        --letter-spacing-menu: 2px;
    }
}

/* ==========================================
   HEIGHT CONSIDERATIONS
========================================== */

/* Short screens */
@media (max-height: 600px) {
    :root {
        --spacing-xl: 30px;
        --spacing-lg: 20px;
    }

    .logo-section {
        margin-bottom: var(--spacing-lg);
    }

    .nav-menu__row:first-child {
        margin-bottom: var(--spacing-lg);
    }
}

/* Very short screens */
@media (max-height: 500px) {
    :root {
        --font-size-logo: 24px;
        --letter-spacing-logo: 8px;
        --spacing-xl: 20px;
    }
}

/* ==========================================
   HIGH DPI / RETINA
========================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders */
    .logo-section__line,
    .nav-menu__link::after {
        height: 0.5px;
    }
}

/* ==========================================
   ORIENTATION
========================================== */

@media (orientation: landscape) and (max-height: 500px) {
    .main-content {
        padding-top: var(--header-height);
    }
}

/* ==========================================
   PRINT
========================================== */

@media print {
    .bg-slideshow,
    .bg-overlay,
    .particles,
    .cursor-glow,
    .loading-screen {
        display: none !important;
    }

    .main-content {
        position: static;
    }

    .logo-section__text,
    .nav-menu__link {
        opacity: 1 !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        color: #000 !important;
    }
}