/*
 ============================================================
 BASHARAT BOOK STORE
 GLOBAL PUBLIC STOREFRONT DESKTOP ALIGNMENT
 ============================================================

 Applies to the public website shell:
 - Home
 - eBooks / book listings
 - Book detail
 - Authors
 - Translators
 - Publishers
 - Categories
 - Search
 - Pricing
 - Upload eBook
 - Mobile application
 - Blog
 - Contact
 - Public account/storefront pages
 - Other pages rendered through the public storefront layout

 Does NOT target the admin dashboard.

 The homepage full-width slider/hero may remain full width.
 ============================================================
*/


/* ==========================================================
   DESKTOP SITE SHELL
   One shared left/right boundary
   ========================================================== */

@media (min-width: 992px) {

    /*
     * Shared storefront width.
     *
     * 1240px maximum gives visible empty space on large
     * monitors while still leaving enough room for the
     * complete navigation on one line.
     */
    .top-nav > .container,
    .header-inner > .container,
    .megamenu-wrapper > .container,
    .content-wrapper > .container,
    .storefront-hero-band > .container {
        width: calc(100% - 48px) !important;
        max-width: 1240px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    /* ======================================================
       HEADER
       Logo | Search | Account / Wishlist / Cart
       ====================================================== */

    .header-inner > .container {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 22px !important;
    }

    .header-inner .website-logo {
        flex: 0 0 168px !important;
        width: 168px !important;
        max-width: 168px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .header-inner .search-area {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    .header-inner .header-user-actions {
        flex: 0 0 auto !important;
        float: none !important;
    }


    /* ======================================================
       DESKTOP NAVIGATION
       Digital + Physical + MP3 + normal menu + Mobile App
       MUST stay on one row.
       ====================================================== */

    .megamenu-wrapper > .container {
        overflow: visible !important;
    }

    .megamenu-wrapper .navbar {
        width: 100% !important;
        min-height: 50px !important;
    }

    .megamenu-wrapper .catalog-navigation-links {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }


    /*
     * Digital / Physical / MP3 group
     */
    .megamenu-wrapper
    .catalog-navigation-links > .catalog-content-nav {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;

        float: none !important;
        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    /*
     * Main navigation:
     * Home / Authors / Translators / Publishers /
     * eBooks / Pricing / Upload / Mobile Application
     */
    .megamenu-wrapper
    .catalog-navigation-links > .navbar-nav:not(.catalog-content-nav) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        flex: 1 1 auto !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;

        float: none !important;
        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    /*
     * Original theme contains rules that can hide later
     * navbar items. On the public desktop navbar all
     * top-level items must remain visible.
     */
    .megamenu-wrapper .navbar-nav > li {
        display: block !important;
        float: none !important;
        flex: 0 0 auto !important;

        margin: 0 !important;
        white-space: nowrap !important;
    }


    .megamenu-wrapper .navbar-nav > li > a,
    .megamenu-wrapper .catalog-content-trigger {
        min-height: 50px !important;

        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;

        font-size: 13px !important;
        line-height: 20px !important;

        white-space: nowrap !important;
    }


    /*
     * Mobile Application is still a desktop navbar item.
     * Never allow its words to wrap.
     */
    .megamenu-wrapper .mobile-application-menu-item,
    .megamenu-wrapper .mobile-application-menu-item > a {
        white-space: nowrap !important;
    }


    /* ======================================================
       GLOBAL PUBLIC PAGE CONTENT
       ====================================================== */

    /*
     * Every normal public page gets the exact same outer
     * content boundary as the logo/header/navigation.
     *
     * Individual components may intentionally be narrower
     * inside this area, but they cannot make the whole
     * page wider than the shared shell.
     */
    .content-wrapper > .container {
        position: relative;
        box-sizing: border-box !important;
    }

    .content-wrapper > .container > * {
        max-width: 100%;
    }


    /*
     * Images, video and normal responsive media must never
     * force public pages outside the site boundary.
     */
    .content-wrapper img {
        max-width: 100%;
    }


    /* ======================================================
       HOMEPAGE FULL-WIDTH HERO EXCEPTION
       ====================================================== */

    /*
     * The slider is intentionally allowed to remain
     * full-bleed/full-browser-width.
     */
    .is-home .storefront-hero-shell {
        max-width: none !important;
    }


    /* ======================================================
       HOMEPAGE BOOK CAROUSELS
       Keep books inside the SAME shell as other pages
       ====================================================== */

    .home-bookory-carousel,
    .home-bookory-carousel .bookory-carousel-frame,
    .home-bookory-carousel .bookory-ebook-slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * Bootstrap .row normally extends outside its parent
     * using negative margins. Do not let homepage book
     * rows cross the shared site boundary.
     */
    .home-bookory-carousel > .row,
    .home-bookory-carousel .recent-ebooks {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .home-bookory-carousel .slick-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .home-bookory-carousel .ebook-card {
        max-width: 100% !important;
    }

    .home-bookory-carousel .bookory-carousel-controls {
        left: 4px !important;
        right: 4px !important;
    }

    .home-bookory-carousel
    .bookory-carousel-btn.js-bookory-carousel-prev,
    .home-bookory-carousel
    .bookory-carousel-btn.js-bookory-carousel-next {
        transform: none !important;
    }

}


/* ==========================================================
   MEDIUM DESKTOP
   Keep entire navbar on one line at 992-1199px
   ========================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

    .top-nav > .container,
    .header-inner > .container,
    .megamenu-wrapper > .container,
    .content-wrapper > .container,
    .storefront-hero-band > .container {
        width: calc(100% - 30px) !important;
    }

    .megamenu-wrapper .navbar-nav > li > a,
    .megamenu-wrapper .catalog-content-trigger {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 12px !important;
    }

    .header-inner > .container {
        gap: 15px !important;
    }

    .header-inner .website-logo {
        flex-basis: 145px !important;
        width: 145px !important;
        max-width: 145px !important;
    }
}


/* ==========================================================
   LARGE DESKTOP
   Visible equal empty space left and right
   ========================================================== */

@media (min-width: 1200px) {

    .top-nav > .container,
    .header-inner > .container,
    .megamenu-wrapper > .container,
    .content-wrapper > .container,
    .storefront-hero-band > .container {
        width: calc(100% - 64px) !important;
        max-width: 1240px !important;
    }
}


/* ==========================================================
   MOBILE / TABLET
   Existing website responsive design remains untouched.
   ========================================================== */

@media (max-width: 991px) {
    /*
     * No global desktop shell overrides here.
     * Existing mobile-navigation.css and responsive
     * theme rules continue to control mobile.
     */
}