/* ============================================================
   MOBILE ENHANCEMENTS  —  The Journal of Holocaust Research
   Template: shaper_helix3
   File location: templates/shaper_helix3/css/custom.css
   (Helix3 loads custom.css automatically — no core edits.)
   Clear Joomla cache after uploading.
   ============================================================ */

/* Global: every image scales to its container ----------------- */
img { max-width: 100%; height: auto; }


/* ============================================================
   PHONES + TABLETS  (up to 991px — the range where the top
   menu collapses to the hamburger)
   ============================================================ */
@media (max-width: 991px) {

    /* Top-bar MA-program button: was col-xs-2 / col-sm-3, so the
       text wrapped one word per line. Give it the full row. */
    #sp-ma-button {
        width: 100%;
        float: none;
        margin: 0 auto;
    }

    /* Header: title + logo were side by side, crushing the logo
       to a sliver. Stack them, each full width and centered. */
    #sp-site-title,
    #sp-weiss-livnat-logo {
        width: 100%;
        float: none;
        text-align: center;
    }
    #sp-weiss-livnat-logo img {
        max-width: 260px;
        margin: 8px auto 4px;
    }

    /* Menu bar: drop the fixed 50px height and any height the
       sticky script locks onto the header, so the title can
       never slide under the purple bar. */
    #sp-header   { height: auto !important; }
    #sp-mainmenu { height: auto; overflow: visible; }
    #sp-menu     { width: 100%; float: none; }
    #offcanvas-toggler {
        float: none;
        display: inline-block;
        margin: 0;
        padding: 12px 0;
        line-height: normal;
    }
}


/* ============================================================
   PHONES ONLY  (up to 767px)
   ============================================================ */
@media (max-width: 767px) {

    /* Masthead is 24pt inline — bring it down so it stops
       wrapping to three lines. !important beats the inline size. */
    #sp-site-title span,
    #sp-site-title p span {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    #sp-ma-button p { font-size: 13px !important; }

    /* Article images (covers etc.) have hardcoded widths and
       inline float, forcing text into a thin ribbon. Stack them
       above their text, full width. */
    #sp-component img {
        float: none !important;
        display: block;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 1em !important;
    }

    /* Some articles indent text with padding-left: 6em, which
       wastes half a phone screen. Rein it in. */
    #sp-component blockquote,
    #sp-component p[style*="padding-left"] {
        padding-left: 1em !important;
        padding-right: 1em !important;
    }

    /* Safety net — never allow sideways scrolling. */
    .body-innerwrapper { overflow-x: clip; }
}