/*
 * OWS Dashboard - public page frame: a margin between the page and the screen edges.
 *
 * The journal stylesheet (public/journals/1/styleSheet.css) makes the page wrapper
 * .pkp_structure_content a full-width row from 768px up (width: 100%; margin: 0;
 * justify-content: space-around), so the left navigation and the right Journal
 * Information column sat about 2px from the screen edges on laptops and desktops.
 * Give the wrapper and the public header (frontendPublicHeader.css,
 * .ows_public_header__inner) one frame: the same white margin on both sides at every
 * screen width, set once in --ows-page-gutter below. There is no maximum width, so
 * the margin does not grow on large monitors. The columns line up with the logo and
 * the header controls at every width.
 *
 * The columns use space-between, so the sidebars sit exactly at the frame edge on
 * the homepage and on inner pages alike; inner pages no longer need the measured
 * offset that frontendHomepageCover.js used to apply to the left sidebar.
 *
 * Phones: the same stylesheet gives the header min-width: 600px and floats the main
 * column without a width, so both were wider than a phone screen and the whole page
 * scrolled sideways. Both now fit the screen.
 */

html body {
    --ows-page-gutter: 24px;
}

html body .pkp_structure_content,
html body .pkp_structure_content.ows_homepage_three_column {
    box-sizing: border-box !important;
    width: calc(100% - 2 * var(--ows-page-gutter)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    html body .pkp_structure_content {
        justify-content: space-between !important;
        column-gap: 20px !important;
    }

    /* The theme's clearfix boxes would count as flex items and the column gap
     * would push the outer columns 20px inside the frame. */
    html body .pkp_structure_content::before,
    html body .pkp_structure_content::after {
        display: none !important;
    }

    /* The main column takes the remaining width and may shrink below its
     * content's preferred width (its content wraps instead). */
    html body .pkp_structure_content > .pkp_structure_main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* The journal stylesheet fixes the left navigation at 345px. Let it scale
     * between 260px and 345px so the main column keeps room on laptops. */
    html body .pkp_structure_content > .pkp_structure_sidebar.left {
        flex: 0 0 auto !important;
        width: clamp(260px, 22vw, 345px) !important;
        min-width: 0 !important;
    }
}

html body .ows_public_header__inner {
    box-sizing: border-box !important;
    width: calc(100% - 2 * var(--ows-page-gutter)) !important;
}

html body .pkp_structure_head {
    min-width: 0 !important;
}

@media (max-width: 767.98px) {
    html body .pkp_structure_main {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/*
 * Homepage hero: follow the width the hero actually gets, not the screen width.
 * Its layout steps (frontendArticlesTabs.css) are screen-width media queries, but
 * between the two sidebars the hero is much narrower than the screen suggests: on
 * a 1280px laptop it got the full desktop layout (a cover column of up to 286px)
 * in about 530px, leaving a very narrow text column. The same two steps now also
 * apply by the width of the homepage content: a smaller cover column below 720px,
 * and the cover below the text below 560px.
 */
html body .pkp_structure_main .page_index_journal {
    container: ows-home / inline-size;
}

@container ows-home (max-width: 720px) {
    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] {
        grid-template-columns: minmax(0, 1fr) 195px !important;
        gap: 20px !important;
        min-height: 0 !important;
        padding: 28px 24px 32px !important;
    }

    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] .homepage_about__coverScene {
        width: min(100%, 205px) !important;
        min-height: 285px !important;
    }

    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] .homepage_about__coverBook {
        width: min(100%, 168px) !important;
    }
}

@container ows-home (max-width: 560px) {
    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] {
        display: block !important;
        padding: 28px 22px 34px !important;
    }

    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] :is(h2, .homepage_about__title, .homepage_about__description) {
        max-width: 100% !important;
    }

    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] .homepage_about__media {
        justify-content: center !important;
        margin-top: 26px !important;
        padding: 6px 0 10px !important;
    }

    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] .homepage_about__coverScene {
        width: min(76%, 255px) !important;
        min-height: 325px !important;
    }

    html body .pkp_structure_main .page_index_journal .homepage_about[data-ows-hero="1"] .homepage_about__coverBook {
        width: min(68%, 205px) !important;
    }
}

/*
 * Homepage article tabs (Current Issue / Articles in Press / Most Viewed): on phones
 * the three labels on one line were wider than the screen and made the whole page
 * scroll sideways. Below 480px of homepage width they share the row equally and a
 * long label wraps onto two lines.
 */
@container ows-home (max-width: 480px) {
    html body .pkp_structure_main .page_index_journal .ows_articles_tabs__nav {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
    }

    html body .pkp_structure_main .page_index_journal .ows_articles_tabs__label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 8px 6px !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }
}

/*
 * Phones and tablets: the public sidebars as drawers.
 *
 * The journal stylesheet hides the left navigation up to 992px and the homepage
 * Journal Information / Indexing column (.rea) up to 1200px. frontendPublicHeader.js
 * adds a header button for each: a menu button at the start of the header opens the
 * navigation from the start side (left, or right on right-to-left pages), an info
 * button at the end opens Journal Information from the end side. Each drawer has
 * its own close button, over a shared backdrop. html.ows-public-nav-open and
 * html.ows-public-info-open mark which drawer is open.
 */
.ows_public_header__menuToggle,
.ows_public_header__infoToggle,
.ows_public_nav__close,
.ows_public_nav__backdrop {
    display: none;
}

@media (max-width: 1200px) {
    html body :is(.ows_public_header__menuToggle, .ows_public_header__infoToggle) {
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid color-mix(in srgb, var(--ows-primary, #1a1a1a) 22%, white 78%) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--ows-primary, #1a1a1a) !important;
        cursor: pointer !important;
    }

    html body .ows_public_header__infoToggle {
        display: inline-flex !important;
        margin-inline-start: 10px !important;
    }

    html body :is(.ows_public_header__menuToggle, .ows_public_header__infoToggle, .ows_public_nav__close) svg {
        width: 22px !important;
        height: 22px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
    }

    /* Journal Information drawer, from the end side. */
    html body .pkp_structure_content > .rea {
        display: block !important;
        visibility: hidden !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        right: 0 !important;
        z-index: 10030 !important;
        box-sizing: border-box !important;
        width: min(86vw, 340px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 60px 14px 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        background: #fff !important;
        box-shadow: 0 0 40px rgba(15, 23, 42, .22) !important;
        transform: translateX(105%) !important;
        transition: transform .22s ease, visibility 0s linear .22s !important;
    }

    html body[dir="rtl"] .pkp_structure_content > .rea {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-105%) !important;
    }

    html.ows-public-info-open body .pkp_structure_content > .rea {
        visibility: visible !important;
        transform: none !important;
        transition: transform .22s ease !important;
    }

    html body .ows_public_nav__close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #334155 !important;
        cursor: pointer !important;
    }

    html body[dir="rtl"] .ows_public_nav__close {
        right: auto !important;
        left: 12px !important;
    }

    html body .ows_public_nav__backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10025 !important;
        background: rgba(15, 23, 42, .45) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .2s ease, visibility 0s linear .2s !important;
    }

    html:is(.ows-public-nav-open, .ows-public-info-open) body .ows_public_nav__backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: opacity .2s ease !important;
    }

    html:is(.ows-public-nav-open, .ows-public-info-open),
    html:is(.ows-public-nav-open, .ows-public-info-open) body {
        overflow: hidden !important;
    }
}

/* Between 993px and 1200px the navigation is in the page: no menu button or close button. */
@media (min-width: 993px) {
    html body .pkp_structure_sidebar.left > .ows_public_nav__close {
        display: none !important;
    }
}

/* Navigation drawer, from the start side. */
@media (max-width: 992px) {
    html body .ows_public_header__menuToggle {
        display: inline-flex !important;
        margin-inline-end: 10px !important;
    }

    html body .pkp_structure_content > .pkp_structure_sidebar.left {
        display: block !important;
        visibility: hidden !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        z-index: 10030 !important;
        box-sizing: border-box !important;
        width: min(86vw, 340px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 60px 14px 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        background: #fff !important;
        box-shadow: 0 0 40px rgba(15, 23, 42, .22) !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease, visibility 0s linear .22s !important;
    }

    html body[dir="rtl"] .pkp_structure_content > .pkp_structure_sidebar.left {
        left: auto !important;
        right: 0 !important;
        transform: translateX(105%) !important;
    }

    html.ows-public-nav-open body .pkp_structure_content > .pkp_structure_sidebar.left {
        visibility: visible !important;
        transform: none !important;
        transition: transform .22s ease !important;
    }
}

/* Narrow phones: with the two drawer buttons the header row was wider than the screen
 * and the search icon ran into the logo. The Home icon repeats the logo's own link to
 * the homepage, so it is left out up to 480px. */
@media (max-width: 480px) {
    html body .ows_public_header__actions > .ows_public_header__control--home {
        display: none !important;
    }
}

/* Smallest phones (320px): slightly smaller drawer buttons and logo so the row fits. */
@media (max-width: 359px) {
    html body :is(.ows_public_header__menuToggle, .ows_public_header__infoToggle) {
        width: 34px !important;
        height: 34px !important;
    }

    html body .ows_public_header__menuToggle {
        margin-inline-end: 6px !important;
    }

    html body .ows_public_header__infoToggle {
        margin-inline-start: 6px !important;
    }

    html body .ows_public_header__brand img {
        max-width: 54px !important;
        height: auto !important;
    }
}

/* Left sidebar blocks fill their column. The journal stylesheet gives the
 * blocks' content and the menu cards fixed widths (320-330px) from when the
 * column was always 345px; the column now narrows to 260px, so the menu cards
 * ran over the page (on /about and the Submit Guide at 1024px, over the start
 * of the title) and the Statistics block cut its numbers off. */
html body .pkp_structure_sidebar.left .pkp_block > .content,
html body .pkp_structure_sidebar.left .ows_sidebar_nav_block :is(
    .container_sidbar_left,
    .section_accordion,
    .row_accordion,
    .ows_sidebar_nav_row
) {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
}

/* The menu cards end where the Browse, Keywords and Statistics cards end
 * (the column's padding already leaves the 14px gap their calc() subtracts
 * a second time). */
html body.ows_homepage_left_sidebar_mounted .pkp_structure_sidebar.left > .pkp_block.block_custom.ows_sidebar_nav_block {
    width: 100% !important;
    max-width: 100% !important;
}

/* Wide screens: no growing empty band beside inner pages. Several pages cap
 * their content (Submit Guide 980px, About 900px, ...) and sit at the start
 * of the main column, so above about 1400px the rest of the column stayed
 * empty (500px at 1920px). The page content now fills the main column at
 * every width, as it already does below 1400px. */
html body .pkp_structure_content .pkp_structure_main > .page {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}