/* ==========================================================================
   Nautilus — mobile / responsive layer (≤768px)
   Loaded LAST so it overrides the desktop layout.
   - Sidebar collapses into a fixed bottom nav bar; content goes full width
   - Header wraps: logo + actions on row 1, search full-width on row 2
   - The movie modal becomes a full-screen sheet that sits above the bar
   ========================================================================== */
/* Header dark-mode toggle is mobile-only (the sidebar has its own on desktop) */
.mobile-only-btn { display: none; }

@media (max-width: 768px) {
    /* The header / main / footer compute their left offset from this var, so
       zeroing it collapses all of those offsets at once. */
    :root { --sidebar-width: 0px; --sidebar-width-expanded: 0px; }

    main { margin-left: 0 !important; max-width: 100%; }
    /* padding-top is set by adjustMainPadding() from the real (wrapped) header
       height; 132px is just a pre-JS fallback so row 1 never hides under it. */
    body.with-sidebar main { padding: 132px 0.6rem 84px; }
    .site-footer { padding-left: 1rem !important; margin-bottom: 58px; }

    /* Dark-mode toggle surfaced in the header on mobile (hidden on desktop) */
    .mobile-only-btn { display: inline-flex !important; }
    #sidebar-theme { display: none; }

    /* ---- Sidebar → fixed bottom nav bar ---- */
    .sidebar, .sidebar:hover {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; height: 58px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0 6px;
        border-right: none;
        border-top: 3px double var(--gold);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.28);
        overflow: visible;
    }
    .sidebar-logo { display: none; }
    .nav-links { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
    .nav-bottom { flex-direction: row; border-top: none; padding-top: 0; display: flex; gap: 2px; align-items: center; }
    .nav-item { padding: 10px 12px; }
    .nav-item i { font-size: 1.4rem; min-width: 0; }
    .link-text { display: none !important; }
    .nav-item.active { border-right: none; background: rgba(0, 0, 0, 0.05); }
    .nav-item.active::after {
        content: ''; position: absolute; top: 0; left: 20%; right: 20%;
        height: 3px; background: var(--gold);
    }

    /* ---- Header: logo + actions on row 1, search full-width on row 2 ---- */
    header { padding: 0.55rem 0.7rem; }
    .header-row { flex-wrap: wrap; gap: 0.5rem 0.7rem; }
    .logo { font-size: 1.7rem; letter-spacing: 1px; text-shadow: 2px 2px 0 #000; }
    .header-right { gap: 8px; }
    .header-icon-btn { padding: 7px 10px; font-size: 1rem; }
    .logo { order: 1; }
    .header-right { order: 2; }
    .search-container { order: 3; flex-basis: 100%; max-width: 100%; }
    #search-input { font-size: 1.1rem; padding: 0.45rem 2.2rem; }
    #live-results { left: 0; right: 0; }

    /* ---- Rows / cards ---- */
    .row-wrapper { padding: 0 12px; margin-bottom: 2rem; }
    .row-title { font-size: 2rem; padding-right: 0.5rem; gap: 8px; }
    .row-scroller { gap: 0.9rem; padding: 0.8rem 0 1.2rem; }
    .card { width: 140px; }
    .row-arrow { display: none; } /* swipe to scroll on touch */
    /* No hover on touch — always show the title overlay on cards */
    .card .card-overlay {
        opacity: 1 !important;
        transform: none !important;
        font-size: 0.78rem;
        padding: 16px 6px 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ---- Modals: lift above the bottom bar; movie modal goes full-screen ---- */
    .modal { z-index: 3000; }
    #modal-content-wrapper {
        align-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh;
        overflow-y: auto;
        border-width: 3px;
        border-left: none; border-right: none;
        padding: 1rem;
    }
    .modal-header { flex-direction: column; align-items: center; gap: 1rem; }
    .poster-wrapper img { width: 150px; transform: none; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); }
    .modal-info { width: 100%; }
    .modal-info h2 { font-size: 1.9rem; }
    .control-deck { flex-wrap: wrap; }
    .close-btn { top: 8px; right: 12px; font-size: 1.6rem; }

    /* ---- Show page ---- */
    #show-root { padding: 1rem; }
    .show-topbar { padding: 0.6rem 0.9rem; }
    .show-topbar .logo { font-size: 1.5rem; }
    .show-hero-title { font-size: 2rem; word-break: break-word; line-height: 1.05; }
    .show-hero-poster { width: 150px; }
    .show-hero-info { min-width: 0; }
    .show-hero-overview { font-size: 1rem; }
    .season-tab { font-size: 1.05rem; padding: 5px 12px; }
    .ep-thumb { width: 108px; height: 62px; }
    .ep-title { font-size: 1.05rem; }
}

/* Extra squeeze for very small phones */
@media (max-width: 380px) {
    .logo { font-size: 1.45rem; }
    .header-icon-btn { padding: 6px 8px; }
    .card { width: 128px; }
    .row-title { font-size: 1.7rem; }
}