/*
 * Mobile layer (phones, Bootstrap 3 "xs": up to 767px).
 *
 * The site's page CSS is written in fixed desktop pixels. This file sits on top of it and only
 * ever acts under @media (max-width: 767px) (plus one touch-device rule), so the desktop look is
 * untouched. It reuses the existing ornament images and never touches the Quran fonts.
 *
 * Linked LAST in <head> by rasm-base.mako (every page that inherits it: words, word*, note, ...)
 * and by quran.mako, so it wins over the page CSS and the inline direction <style> blocks.
 *
 * Sections: 1 frame (menu, header, footer)  2 quran/p*  3 words/p*  4 word pages
 * Page-specific rules are scoped by the page's own root id (#moshaf-view, #wordbanks, #word).
 */

/* The word-compare links («مقایسه» / «عدم نمایش») are invisible until :hover; a finger has no
   hover, so on any touch-only device they are always shown. */
@media (hover: none) {
    body #compare-result li a { /* `body` outranks word.css, which is linked inside <body> */
        opacity: 1;
        filter: none;
    }
}

@media (max-width: 767px) {

    /* ============================================================ 1. frame */

    html, body {
        overflow-x: hidden; /* last-resort guard; every rule below is meant to make it unnecessary */
    }

    img {
        max-width: 100%;
    }

    /* ---- menu: a full-width bar; the opened list is an overlay with big touch rows ---- */
    #responsivemenu {
        height: 44px;
        padding: 0;
        font-size: 13pt;
    }

        #responsivemenu .container,
        #responsivemenu .row {
            margin: 0;
            padding: 0;
        }

        #responsivemenu .navbar {
            min-height: 0;
            margin: 0;
        }

        #responsivemenu .container-fluid {
            padding: 0;
        }

        #responsivemenu .navbar-header {
            margin: 0;
        }

        #responsivemenu .navbar-toggle {
            float: right;
            margin: 3px 10px;
            padding: 8px 12px;
            min-width: 44px;
            min-height: 38px;
            color: #edbf38;
            border-color: #edbf38;
        }

        #responsivemenu .navbar-collapse {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin: 0;
            padding: 0;
            max-height: calc(100vh - 44px);
            overflow-y: auto;
            background-color: #5c0000;
            border-top: 1px solid #7c2f00;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
        }

        #responsivemenu .navbar .navbar-nav {
            margin: 0;
            float: none !important;
        }

        /* beats the inline `li.lang { float: left !important }` blocks of menu.mako */
        #responsivemenu .navbar .navbar-nav > li,
        #responsivemenu .navbar .navbar-nav > li.lang {
            float: none !important;
            margin: 0;
            border-bottom: 1px solid rgba(237, 191, 56, 0.15);
        }

        #responsivemenu .navbar .navbar-nav > li > a {
            display: block;
            padding: 12px 18px;
            line-height: 1.4;
        }

    /* ---- header: height follows the content; the 1343px band is cropped, not repeated ---- */
    #header {
        height: auto;
        background-size: cover;
    }

        #header #logo {
            margin-top: 10px;
            padding: 0 16px 30px; /* the white sheet of #center overlaps the logo's bottom edge */
        }

            #header #logo img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 120px;
            }

    #center {
        min-height: 0; /* desktop: 500px, which left a blank gap above the footer on short pages */
    }

    #center > .container {
        min-height: 0;
        margin-top: -22px;    /* desktop: -55px / -47px */
        margin-bottom: -22px;
    }

    /* ---- footer: the absolutely-positioned desktop arrangement becomes one centred column ---- */
    #footer {
        background-size: cover;
    }

        #footer #footer-center {
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            padding: 44px 0 18px; /* clears the sheet's overlap */
            text-align: center;
        }

        #footer #img-footer-logo {
            position: static;
            width: auto;
            float: none;
        }

        #footer #img-footer-links {
            position: relative;
            float: none !important;
            padding: 0;
            width: 309px; /* footer-links.png is 309 x 107; the three links are % of it */
            max-width: 100%;
        }

            #footer #img-footer-links > img {
                width: 100%;
                height: auto;
                display: block;
            }

            #footer #img-footer-links #link-1,
            #footer #img-footer-links #link-2,
            #footer #img-footer-links #link-3 {
                top: 0;
                bottom: 0;
            }

            #footer #img-footer-links #link-1 {
                left: 0;
                width: 22.7%;
            }

            #footer #img-footer-links #link-2 {
                left: 32.4%;
                width: 32.4%;
            }

            #footer #img-footer-links #link-3 {
                left: 68%;
                width: 32%;
            }

        #footer #footer-copyright,
        #footer #pargar-link {
            position: static;
            margin: 0;
            padding: 0 16px;
        }

    /* ===================================================== 2. quran/p* */

    .moshaf-tools {
        height: auto;
    }

    .moshaf-tools > .container {
        background-size: cover;
    }

    #moshaf-tools-top > .container {
        padding: 14px 15px 38px;
    }

    #moshaf-tools-top .tools-top-sp,
    #moshaf-tools-top #displayicons {
        display: none;
    }

    #moshaf-tools-top #navigation-quran,
    #moshaf-tools-top #navigation-page {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        padding: 0 15px;
    }

    #moshaf-tools-top #navigation-page {
        margin-top: 8px;
    }

    #moshaf-tools-top #navigation-quran .btn-group {
        flex: 1 1 40%;
        min-width: 0;
        float: none !important;
    }

    #moshaf-tools-top #navigation-quran .btn-group:nth-child(3) { /* aye: button + number box */
        flex: 1 1 60%;
        display: flex;
        gap: 8px;
    }

    #moshaf-tools-top #navigation-quran .btn,
    #moshaf-tools-top #navigation-page .btn {
        margin: 0;
        min-height: 44px;
    }

    #moshaf-tools-top #navigation-quran .btn-group > .btn.dropdown-toggle {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #moshaf-tools-top #navigation-quran #sp-filter-aye-txt {
        flex: 0 0 64px;
        width: 64px !important;
        float: none;
        height: auto;
        min-height: 44px;
    }

    #moshaf-tools-top #navigation-quran .btn-go,
    #moshaf-tools-top #navigation-page .btn-go {
        flex: 0 0 auto;
        min-width: 48px;
        float: none !important;
        padding: 8px;
    }

    #moshaf-tools-top #navigation-page input#txtpage {
        flex: 1 1 0;
        float: none !important;
        width: auto;
        min-width: 90px;
        margin: 0;
        min-height: 44px;
    }

    /* page-number spinner: the two carets were absolutely placed at desktop offsets */
    #moshaf-tools-top #navigation-page .btn-filter-page-left,
    #moshaf-tools-top #navigation-page .btn-filter-page-right {
        position: static;
        flex: 0 0 36px;
        height: auto;
        min-height: 44px;
        font-size: 16pt;
        color: #ffe9ba; /* on the dark band, not inside the box as on desktop */
    }

    /* dropdown lists: as wide as their button, so they can never leave the screen in either
       direction (Bootstrap anchors them to the button's left edge); roomy rows for fingers */
    #moshaf-tools-top .btn-group .dropdown-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }

    #moshaf-tools-top .btn-group .dropdown-menu > li > a {
        padding: 9px 12px;
        white-space: normal;
    }

    /* the sheet overlaps the two bands at desktop (-60px / -70px); less on a phone */
    #moshaf-view > .container {
        min-height: 0;
        margin-top: -26px;
        margin-bottom: -26px;
    }

    #moshaf-tools-bottom > .container {
        padding: 38px 15px 14px;
    }

    #moshaf-tools-bottom .btn {
        padding: 10px 16px;
        margin: 3px 0;
        min-height: 44px;
    }

    /* previous / next page: one row, previous at the start edge, next at the end edge */
    #moshaf-tools-bottom .row > .hidden-lg.hidden-md {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 0 15px;
    }

    #moshaf-tools-bottom .row > .hidden-lg.hidden-md > .div-moshaf-navigation {
        float: none !important;
        width: auto;
    }

    #moshaf-tools-bottom .row > .hidden-lg.hidden-md > .div-moshaf-navigation.pull-start:only-child {
        margin-inline-start: auto; /* first page: «next» alone keeps the end edge */
    }

    /* the word popover has min-width 300px; Bootstrap's own max-width (276px) then applies */
    .popover {
        min-width: 0;
    }

    /* ===================================================== 3. words/p* */

    body #wordbanks #toptools {
        padding: 6px 0 0;
    }

    body #wordbanks #searchbox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        padding: 16px 14px;
    }

    body #wordbanks #searchbox .sp-color-bold {
        width: 100%;
    }

    body #wordbanks #searchbox #txtsearch {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0;
        min-height: 46px;
    }

    body #wordbanks #searchbox #btnsearch,
    body #wordbanks #searchbox #btnsearch-ar,
    body #wordbanks #searchbox #btnsearch-en {
        position: static;
        flex: 0 0 auto;
        padding: 0;
    }

    body #wordbanks #filterbox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding: 6px 14px 14px;
    }

    body #wordbanks #filterbox > .clearfix {
        display: none;
    }

    body #wordbanks #filterbox > .sp-color-bold,
    body #wordbanks #filterbox > .relative > .sp-color-bold,
    body #wordbanks #filterbox > .pull-start > .sp-color-bold {
        float: none !important;
        display: block;
        width: 100%;
        margin: 6px 0 2px;
    }

    body #wordbanks #filterbox > .btn-group {
        float: none !important;
        flex: 1 1 28%;
        min-width: 0;
    }

    /* labels wrap instead of truncating: "Select Part / Sura / Verse" must stay distinguishable */
    body #wordbanks #filterbox .btn-filter {
        width: 100%;
        margin: 0;
        white-space: normal;
        line-height: 1.25;
    }

    body #wordbanks #filterbox .dropdown-toggle {
        height: auto;
        min-height: 46px;
    }

    body #wordbanks #filterbox #btn-filter-go {
        float: none !important;
        flex: 0 0 auto;
        margin: 0;
    }

    body #wordbanks #filterbox .btn-group .dropdown-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }

    body #wordbanks #filterbox .btn-group .dropdown-menu > li > a {
        padding: 9px 12px;
        white-space: normal;
    }

    /* page-jump row: number box, two carets, go */
    body #wordbanks #filterbox > .relative {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        width: 100%;
    }

    body #wordbanks #filterbox #txtpage {
        float: none !important;
        width: 110px;
        min-height: 46px;
        margin: 0;
    }

    body #wordbanks #filterbox .btn-filter-page {
        position: static;
        flex: 0 0 36px;
        height: 46px;
        font-size: 16pt;
    }

    body #wordbanks #filterbox #btn-filter-page-go {
        width: 46px;
        height: 46px;
        margin: 0;
    }

    body #wordbanks #filterbox > .pull-start {
        float: none !important;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
    }

    body #wordbanks #filterbox .btn-filter-sort.btn {
        flex: 1 1 auto;
        height: auto;
        min-height: 44px;
        margin: 0;
        white-space: normal;
    }

    body #wordbanks #toptools > i {
        right: 16px;
    }

    body #wordbanks #div-result-count {
        padding: 0 16px;
    }

    body #wordbanks #list-words .col-word-contents {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        padding: 0 14px;
    }

    body #wordbanks #list-words .col-word-contents > * {
        float: none !important;
    }

    /* line break between the info line (order 0) and the buttons (order 2) */
    body #wordbanks #list-words .col-word-contents::before {
        content: "";
        order: 1;
        flex: 0 0 100%;
        height: 0;
    }

    body #wordbanks #list-words .img-words-sp {
        display: none; /* separators between the fields; the flex gap replaces them */
    }

    body #wordbanks #list-words .div-word,
    body #wordbanks #list-words .div-soore,
    body #wordbanks #list-words .div-aye {
        width: auto;
        flex: 0 1 auto;
    }

    body #wordbanks #list-words .col-word-contents > .link-go {
        order: 2;
        flex: 0 0 calc((100% - 28px) / 3);
        max-width: 110px;
        margin: 4px 0;
    }

    body #wordbanks #list-words .col-word-contents > .link-go > img {
        width: 100%;
        height: auto;
        display: block;
    }

    body #wordbanks #list-words .link-go-audio,
    body #wordbanks #list-words .link-go-audio-ar,
    body #wordbanks #list-words .link-go-audio-en {
        width: auto;
        overflow: hidden;
    }

    /* the buttons are 90 x 45 images with a «note» (top) and «compare» (bottom) hit area of
       20px; keep the graphic, make the two areas half the button each */
    body #wordbanks #list-words .link-go .compare,
    body #wordbanks #list-words .link-go .note {
        height: 50%;
    }

    body #wordbanks #div-pagination > .row {
        height: auto;
        margin: 28px 0 20px;
        padding: 6px 4px;
    }

    body #wordbanks #div-pagination .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    body #wordbanks #div-pagination .pagination > li > a,
    body #wordbanks #div-pagination .pagination > li > span {
        display: block;
        float: none;
        padding: 10px 9px;
        min-width: 40px;
        text-align: center;
    }

    body #wordbanks #div-pagination .pagination > li.navigator > a {
        padding: 10px 14px;
    }

    /* ================================================== 4. word pages */

    body #word #toptools {
        height: auto;
        padding: 14px 0 12px;
        margin-bottom: 18px;
    }

    body #word .col-high-padding {
        padding-right: 14px;
        padding-left: 14px;
    }

    body #word #toptools .col-high-padding {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
    }

    body #word #toptools .col-high-padding > div {
        float: none !important;
    }

    body #word #toptools .link-go {
        margin: 0 0 0 12px;
        float: none !important;
        display: inline-block;
    }

    body #word #toptools .img-words-sp {
        margin: 0 4px;
    }

    body #word #word-panel {
        overflow: visible;
        padding: 12px 0 8px;
    }

    body #word #word-panel > .col-xs-5,
    body #word #word-panel > .col-xs-7 {
        float: none;
        width: 100%;
    }

    body #word #word-panel > .col-xs-5 > img {
        float: none !important;
        display: block;
        margin-bottom: 6px;
    }

    /* search box: [input][button] in reading order; the button was absolutely placed at a fixed
       desktop offset, which on the English page lay on top of the placeholder text */
    body #word #word-panel #searchbox {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 0 10px;
    }

    body #word #word-panel #searchbox #txtsearch {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    body #word #word-panel #searchbox #btnsearch {
        position: static;
        flex: 0 0 auto;
        padding: 0;
    }

    body #word #word-panel #sp-word {
        font-size: 30pt;
    }

    body #word #word-panel #btn-go-note,
    body #word #word-panel #btn-show-all {
        display: inline-block;
        padding: 9px 14px;
        margin: 6px 8px 6px 0;
        font-size: 11pt;
    }

    body #word #compare-result .compare-box {
        padding: 0 14px;
    }

    body #word #compare-result h2 {
        font-size: 1.8em;
    }

    body #word #compare-result ul {
        padding-right: 18px;
        padding-left: 18px;
    }

    body #word #compare-result ul.cluster {
        margin: 8px 0;
        padding: 0 14px;
    }

    body #word #compare-result .wordimage {
        margin-right: 0;
        margin-left: 0;
        max-width: 100%;
    }

    body #word #compare-result .wordimage img {
        max-width: 100%;
        height: auto;
        max-height: 50px;
        object-fit: contain;
    }

    body #word #compare-result .compare-title {
        margin: 14px 0;
    }

    /* «مقایسه» / «عدم نمایش»: a real tap target */
    body #word #compare-result li a {
        opacity: 1; /* word.css hides them until :hover */
        filter: none;
        display: inline-block;
        padding: 8px 14px;
        margin: 6px 6px 6px 0;
    }
}