/* ========================================================
   Custom CSS: Create Gap Between Arrows & Page Content
   Prevents focused/hovered bookmark tabs from overlapping
   Desktop only (viewer mobile layout starts at 992px)
   ======================================================== */

@media (min-width: 993px) {
    :root {
        /* Adjust this value to increase or decrease the gap */
        --nav-arrow-gap: 50px;
        --nav-arrow-offset: -40px;
    }

    /* 1. Constrain magviewer width so the book content scales inward */
    #magviewer {
        width: calc(100% - (var(--nav-arrow-gap) * 2)) !important;
        margin-left: var(--nav-arrow-gap) !important;
        margin-right: var(--nav-arrow-gap) !important;
        overflow: visible !important;
    }

    /* 2. Position the navigation arrows outward into the created gap */
    #leftNav {
        left: var(--nav-arrow-offset) !important;
        z-index: 1000 !important;
    }

    #rightNav {
        right: var(--nav-arrow-offset) !important;
        z-index: 1000 !important;
    }

    /* 3. Ensure side popins (TOC, Search, etc.) maintain proper spacing when opened */
    #viewerContainer.popin-opened-left #magviewer {
        margin-left: calc(var(--popin-width) + var(--nav-arrow-gap)) !important;
        margin-right: var(--nav-arrow-gap) !important;
        width: calc(100% - var(--popin-width) - (var(--nav-arrow-gap) * 2)) !important;
    }

    #viewerContainer.popin-opened-right #magviewer {
        margin-left: var(--nav-arrow-gap) !important;
        margin-right: calc(var(--popin-width) + var(--nav-arrow-gap)) !important;
        width: calc(100% - var(--popin-width) - (var(--nav-arrow-gap) * 2)) !important;
    }

    #viewerContainer.popin-opened-both #magviewer {
        margin-left: calc(var(--popin-width) + var(--nav-arrow-gap)) !important;
        margin-right: calc(var(--popin-width) + var(--nav-arrow-gap)) !important;
        width: calc(100% - (var(--popin-width) * 2) - (var(--nav-arrow-gap) * 2)) !important;
    }

    /* Remove the focus border around the page when a bookmark is focused */
    #magviewer:focus,
    #magviewer:active,
    #magviewer:focus-visible,
    .bookmark-tabs .tab:focus,
    .bookmark-tabs .tab:active,
    .bookmark-tabs .tab:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}