/* ================================
   CODESONA - MOBILE ORIENTATION LOCK
   Force portrait mode on mobile phones
   Landscape rotation NOT allowed on phones
   ================================ */

/* ================================
   MOBILE LANDSCAPE PREVENTION
   Only for phones (< 768px)
   Tablets are OK with landscape
   Keep portrait layout even when rotated
   ================================ */

/* Force portrait layout on mobile phones even in landscape */
@media screen and (max-width: 767px) and (orientation: landscape) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
    
    body {
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        transform: none;
    }
}


/* ================================
   EXCEPTIONS - Video fullscreen
   ================================ */
@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Allow normal landscape for video modals */
    body.video-modal-open html {
        transform: none !important;
        width: 100vw !important;
        height: 100vh !important;
        position: static !important;
    }
    
    body.video-modal-open {
        width: 100vw !important;
        height: 100vh !important;
    }
}

/* ================================
   PERFORMANCE OPTIMIZATION
   ================================ */
@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Smooth scrolling for rotated layout */
    html, body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
    
    /* Hardware acceleration */
    html {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
}

/* ================================
   PRINT STYLES - Normal layout for printing
   ================================ */
@media print {
    html {
        transform: none !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
    }
    
    body {
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ================================
   ACCESSIBILITY
   ================================ */
@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Maintain focus styles */
    *:focus-visible {
        outline: 2px solid rgba(59, 130, 246, 0.8);
        outline-offset: 2px;
    }
}