/**
 * @file plugins/generic/epubJsViewer/styles/reader.css
 *
 * Copyright (c) 2026 OJSBR (https://ojsbr.com)
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * Layout of the EPUB reader page.
 */
body.epubjs_viewer { margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.epubjs_toolbar { display: flex; gap: .5rem; align-items: center; justify-content: center;
    padding: .5rem; background: #f5f5f5; border-bottom: 1px solid #ddd; flex: 0 0 auto; flex-wrap: wrap; }

.epubjs_btn { font-size: 1.35rem; line-height: 1; padding: .15rem .7rem; cursor: pointer;
    background: #fff; border: 1px solid #ccc; border-radius: 3px; color: #222; }
.epubjs_btn:hover:not(:disabled) { background: #eee; }
.epubjs_btn:disabled { opacity: .4; cursor: default; }

.epubjs_zoom { font-size: 1rem; font-weight: 600; min-width: 2.6rem; }
.epubjs_group { display: inline-flex; align-items: center; gap: .25rem;
    border: 1px solid #ddd; border-radius: 3px; padding: .1rem .3rem; background: #fff; }
.epubjs_zoomlevel { font-size: .85rem; min-width: 3rem; text-align: center; color: #555; font-variant-numeric: tabular-nums; }

.epubjs_toc { max-width: 40%; padding: .35rem; border: 1px solid #ccc; border-radius: 3px; }

.epubjs_area { flex: 1 1 auto; position: relative; overflow: hidden; }
#epubjs_reader { width: 100%; height: 100%; }
.epubjs_fallback { padding: 2rem; text-align: center; }

@media (max-width: 700px) {
    .epubjs_toc { max-width: 100%; order: 5; flex-basis: 100%; }
    .epubjs_toolbar { gap: .35rem; }
}

/* ---------------------------------------------------------------------------
   Reader header on OMP.

   OMP styles .header_viewable_file (its PDF reader) and does not know
   .header_view, the class of this template; OJS and OPS already style
   .header_view. Without these rules the "Back" link collapses to zero width on
   OMP (its label is in .pkp_screen_reader and nothing draws the arrow).

   Scoped to .pkp_page_catalog, which only exists on OMP, so the look OJS and
   OPS apply is left alone. Values copied from OMP's .header_viewable_file, so
   both readers look the same.
   --------------------------------------------------------------------------- */
body.epubjs_viewer.pkp_page_catalog .header_view {
    position: relative; z-index: 2; flex: 0 0 auto;
    background: #006798; line-height: 2.143rem;
}
body.epubjs_viewer.pkp_page_catalog .header_view a { text-decoration: none; }

body.epubjs_viewer.pkp_page_catalog .header_view .return {
    position: absolute; top: 0; left: 0;
    width: 2.143rem; height: 2.143rem; line-height: 2.143rem;
    color: #006798; text-align: center; background: #fff;
}
body.epubjs_viewer.pkp_page_catalog .header_view .return:before {
    display: inline-block; font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit; text-rendering: auto;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    content: "\f060";   /* left arrow, the same as the PDF reader */
}
body.epubjs_viewer.pkp_page_catalog .header_view .return:hover,
body.epubjs_viewer.pkp_page_catalog .header_view .return:focus {
    background: #008acb; color: #fff;
}

body.epubjs_viewer.pkp_page_catalog .header_view .title,
body.epubjs_viewer.pkp_page_catalog .header_view .download {
    display: block; font-size: .93rem; font-weight: 700;
}
body.epubjs_viewer.pkp_page_catalog .header_view .title {
    padding-left: 2.857rem; padding-right: 9rem; color: #fff;
    max-width: 100%; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.epubjs_viewer.pkp_page_catalog .header_view .download {
    position: absolute; top: 0; right: 0; padding: 0 1.43rem;
    text-align: center; background: #fff; color: #006798;
}
body.epubjs_viewer.pkp_page_catalog .header_view .download:before {
    display: inline-block; font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit; margin-right: .4rem; content: "\f019";
}