/**
 * Secure PDF Flipbook Reader — Mobile & Responsive Layout Styles
 * 
 * Reconfigures grid systems, layouts, header spacing, and touch interactions
 * to deliver native-app mobile quality experiences.
 */

@media (max-width: 992px) {
    #book-container {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    /* 1. Header Adjustments */
    .app-header {
        padding: 0.6rem 1rem;
    }

    .logo-text p {
        display: none; /* Hide subtitle to save vertical header space */
    }

    .brand-section {
        gap: 0.5rem;
    }

    .logo-badge {
        width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
    }

    .logo-text h1 {
        font-size: 1rem;
    }

    /* 2. Reading Room & Book scaling */
    .reading-room {
        padding: 0.75rem;
    }

    #book-container {
        width: 100%;
        max-height: 80vh; /* Allow book to occupy more viewport height */
    }

    /* Single page mode layout overrides */
    .book-page {
        border-radius: 4px !important; /* Force rounded edges on all sides for single sheets */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
    }

    .book-page[data-density="hard"] {
        border-left: none !important;
        border-right: none !important;
    }

    /* Spine fold shadow is not needed in single page mobile view */
    .page-ambient-shadow {
        display: none !important;
    }

    /* 3. Control HUD Collapse */
    .control-hud {
        grid-template-columns: 1fr; /* Stack vertically */
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .hud-section.left {
        order: 2;
        justify-content: center;
        gap: 1.25rem;
    }

    .hud-section.center {
        order: 1;
        min-width: 100%;
        gap: 0.25rem;
    }

    .hud-section.right {
        order: 3;
        justify-content: center;
        gap: 1.25rem;
    }

    /* Increase slider height touch targets */
    .slider-container {
        padding: 0.25rem 0;
    }

    .nav-slider {
        height: 10px; /* Thicker track on mobile for easier scrubbing */
    }

    .nav-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    /* 4. Touch-friendly UI buttons */
    .btn-control {
        width: 2.75rem; /* Larger tap target */
        height: 2.75rem;
    }

    .zoom-widget {
        padding: 0.35rem 0.35rem 0.35rem 0.85rem;
    }

    /* 5. Mobile Sidebar adjustments */
    .sidebar-panel {
        width: 85%; /* Fill most of the viewport */
    }
}

/* 6. Landscape Phone Optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        height: auto;
        overflow: auto; /* Fallback scroll for rotated landscape small screens */
    }

    .app-header {
        position: relative;
        padding: 0.4rem 1rem;
    }

    .reading-room {
        padding: 0.5rem;
        min-height: 320px;
    }

    #book-container {
        height: 300px;
    }

    .control-hud {
        position: relative;
        padding: 0.5rem 1rem;
    }
}

/* Prevent accidental visual highlights/taps from flashing on mobile safari */
input, select, button, a {
    -webkit-tap-highlight-color: transparent;
}