/* ============================================================
   Prodistics responsive layer (J5 migration).
   Mobile/tablet (<= 900px) replicates the LIVE mobile site
   (the old Mobile Joomla "mobile_basic" template):
     - full-width WHITE menu overlay, centered Georgia links,
       hamburger that morphs into an X
     - the desktop tile/video collage is hidden
     - content sections auto-height, centered headings, Georgia
   Desktop (> 900px) is unchanged.
   ============================================================ */

.mnav { display: none; }

@media (max-width: 900px) {

    /* ---- no sideways scrolling ---- */
    html, body { max-width: 100% !important; overflow-x: hidden !important; }
    img, video, iframe, table { max-width: 100% !important; height: auto; }

    /* ---- hide the desktop tile collage + background video ---- */
    .video_bg { display: none !important; }

    /* ---- hide the desktop horizontal menu (replaced by the .mnav hamburger) ---- */
    .menu-wrap, nav.menu { display: none !important; }

    /* ---- Clients page: single-column centered logos + hide the embedded map
            (match the live mobile /clients-m layout) ---- */
    .business_bg .inlineBlock { display: block !important; }
    .business_bg [class*="client_"] {
        float: none !important;
        display: block !important;
        margin: 24px auto !important;
        max-width: 80% !important;
        background-position: center center !important;
        background-size: contain !important;
    }
    #mod-custom90 { display: none !important; }   /* the Google map embed (not on live mobile) */

    /* ---- Profile page (and any fractional/fixed-width blocks): stack full-width,
            drop min-widths that overflow a phone, so the person cards don't overlap ---- */
    .width40, .width50, .width51, .width55, .width60,
    .profile_obj, .profile_container, .profile_content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    [class*="minwidth"] { min-width: 0 !important; }
    [class*="minheight"] { min-height: 0 !important; }
    /* the two-per-row container -> stack */
    .inlineBlock { display: block !important; }
    /* team member cards: each avatar class CONTAINS its text. Stack them one per
       row, full width, auto height, and drop the avatar background image so the
       text no longer overlaps it (the live /profile-m shows no avatars). */
    .profile_founder,
    [class*="profile_President"],   /* President, President1, President2 */
    [class*="profile_Process"] {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 28px !important;
        background: none !important;
    }

    /* =========================================================
       HAMBURGER  (matches live: dark bars on the white header,
       morphs into an X when open)
       ========================================================= */
    .mnav { display: block; }

    .mnav-burger {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1004;          /* above the logo (1003) so the X stays clickable/visible */
        width: 36px;
        height: 30px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .mnav-burger span {
        display: block;
        width: 33px;
        height: 3px;
        margin: 4px 0;
        background: #1a1a1a;
        border-radius: 2px;
        transition: transform .3s ease, opacity .3s ease;
    }
    /* hamburger -> X */
    .mnav-toggle:checked ~ .mnav-burger span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .mnav-toggle:checked ~ .mnav-burger span:nth-child(2) { opacity: 0; }
    .mnav-toggle:checked ~ .mnav-burger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* =========================================================
       FULL-SCREEN WHITE NAV OVERLAY (centered Georgia links)
       ========================================================= */
    .mnav-list {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        z-index: 1000;
        width: 100% !important;
        height: auto !important;             /* like live: only as tall as the menu, content shows below */
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 96px 0 28px !important;     /* reserve space for the logo at the top */
        list-style: none !important;
        display: block !important;
        background: #ffffff !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease;
        overflow-y: auto;
    }
    /* keep the logo visible on top of the open overlay (like live) */
    .logo {
        position: relative !important;
        z-index: 1003 !important;
        background-color: #ffffff !important;
    }
    .mnav-toggle:checked ~ .mnav-list { opacity: 1; visibility: visible; }

    /* logo inside the open menu overlay (the page's own .logo is trapped in a
       lower stacking context and gets covered, so show this one on top instead) */
    .mnav-logo {
        display: none;
        position: fixed;
        top: 14px;
        left: 50%;                 /* centered, same as the closed-state logo (matches live) */
        transform: translateX(-50%);
        height: 56px;
        width: auto;
        z-index: 1002;             /* above the white overlay (1000), below the X (1004) */
    }
    .mnav-toggle:checked ~ .mnav-logo { display: block; }

    .mnav-list li {
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        list-style: none !important;
        text-align: center !important;
    }
    .mnav-list a {
        display: inline-block !important;
        width: auto !important;
        padding: 14px 10px !important;
        color: #1f72ad !important;          /* live menu blue */
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 2rem !important;         /* live .nav li = 2em = 32px */
        line-height: 1.6 !important;
        font-weight: normal !important;
        text-align: center !important;
        text-decoration: none !important;
        border: 0 !important;
    }
    .mnav-list a:hover, .mnav-list a:active { color: #02446e !important; }

    /* ---- Products page: the "business we work with" / feature lists are floated
            icon+label pairs that overlap on a phone. Hide the decorative icons and
            show the labels as a clean, stacked bulleted list (like live /products-m). ---- */
    /* the X_icon divs WRAP their label (icon is a background). Don't hide them —
       drop the background icon and let each stack full width. (.jewelery is a
       misspelled sibling of the same kind.) */
    [class*="_icon"], .jewelery {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        background: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .float_left { float: none !important; }
    [class*="padding_left"] { padding-left: 0 !important; }
    [class*="paddingtop"]   { padding-top: 0 !important; }   /* tech list icon-offset */
    .width25, .width20, .width46 { width: 100% !important; max-width: 100% !important; }
    .color_367ab9 {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 6px 16px !important;
        text-indent: -16px !important;                  /* hanging bullet */
    }
    .color_367ab9::before { content: "\2022\00a0\00a0"; color: #1f72ad; font-weight: bold; }

    /* =========================================================
       HEADER / LOGO  (full width above the content)
       ========================================================= */
    .width100, .home_content, .moduletable, [class*="moduletable"],
    .mod-custom, .custom, [id^="mod-custom"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    /* never let text run past the viewport edge — vw caps to the SCREEN width,
       so it holds even if an ancestor/desktop rule is wider than the phone. */
    .heading_content, .content_inner, p, li, span {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    .heading_content, .content_inner { max-width: 90vw !important; }
    .logo {
        display: block !important;
        width: 100% !important;
        height: 60px !important;            /* was 80px — more compact on phones */
        float: none !important;
        background-size: contain !important;
        background-position: center !important;
    }

    /* =========================================================
       CONTENT SECTIONS  (auto-height so text never overlaps;
       centered Georgia headings, left-aligned body — like live)
       ========================================================= */
    /* NOTE: the desktop CSS pins these with HIGH specificity
       (section.module.parallax_home / section.module.parallax-N { height:586px !important }).
       The overrides below must match that specificity or the 586px height
       wins and leaves a tall empty band (the section's bg) below the text. */
    /* OUTER sections: collapse to content height with NO padding, so the
       section's tech/parallax background never shows as a band between the
       solid-colour content boxes (the highlighted gaps). */
    .parallax_home, section.module,
    section.module.parallax_home,
    section.module.parallax,
    section.module[class*="parallax-"],
    section.module.content {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;            /* was 586px !important */
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;              /* no band */
    }

    /* INNER colour boxes: fill the whole section and carry the content padding,
       so each section is one solid colour band that butts the next (like live). */
    /* every section background div (product_bg, service_bg, proifle_bg, etc.) */
    [class*="_bg"] {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 32px 0 !important;         /* breathing room INSIDE the colour */
    }
    /* re-hide the homepage video/flip-card collage: it matches [class*="_bg"]
       (video_bg) above, which would otherwise un-hide it on mobile. */
    .video_bg { display: none !important; }

    /* shared geometry + font for every content block (NO text-align here,
       so the heading-vs-body alignment rules below win regardless of the
       width55/width40 classes the markup also carries) */
    .heading_content, .content_inner, .width55, .width40, .width90, .profile_content {
        position: static !important;
        width: 90% !important;
        max-width: 90% !important;
        float: none !important;
        margin: 0 auto !important;
        font-family: Georgia, "Times New Roman", serif !important;
        box-sizing: border-box !important;
    }
    /* heading geometry shared by every page (centered, airy, line-height ~1.3
       like the live -m pages). Font-size is scoped below because live sizes
       inner-article headings (2em) larger than the homepage tiles (~1.3em). */
    /* base for EVERY heading (incl. the homepage parallax sections): live home
       headings measure ~20.8px (~1.3em). Keep this as the floor so no heading is
       ever left at its huge desktop size on a phone. */
    p.heading_content, .heading_content {
        text-align: center !important;
        margin: 4px auto 18px !important;
        padding: 6px 0 !important;
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }
    /* inner article pages (products/services/technologies/profile/clients):
       live `.heading_content.font_size_2` = 2em = 32px. More specific than the
       base above, so it wins. */
    .com-content-article .heading_content,
    .item-page .heading_content {
        font-size: 2rem !important;
    }
    /* body paragraphs: live uses default "normal" line-height (~1.2) — match it */
    p.content_inner, .content_inner {
        text-align: left !important;
        margin: 0 auto !important;
        padding: 5px 0 !important;
        font-size: 1rem !important;
        line-height: normal !important;
    }
    /* bullet items: live spaces these with line-height:2em (one bullet per line) */
    .content_inner.width40, p.content_inner.width40, .margin10 {
        line-height: 2em !important;
        padding: 2px 0 !important;
    }
    /* desktop spacer divs that pushed content inside the 586px boxes */
    .height150, .height30 { height: 8px !important; }

    /* footer fits the width and is centered (like live) */
    .footer, .footer_top {
        width: 100% !important;
        max-width: 100% !important;
        background-size: cover !important;
        text-align: center !important;
    }
    /* live mobile footer: address/phone/fax/url each on their own line at 1em
       (not the 1.5em desktop size), with a small centered copyright. The JS in
       index.php splits the pipe-separated phone/fax/url line on phones. */
    .footer_top .font_size_1p5 {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin: 0 auto !important;
    }
    /* copyright: live centers it and shrinks it (desktop floats it left at 60%) */
    .footer .float_left, .footer .width60 {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
    }
    .footer .font_size_1 {
        font-size: 0.72rem !important;
    }
}

@media (max-width: 480px) {
    /* live keeps full 2em headings on every phone size, so we don't shrink them
       here (they wrap, like live). Only the long nav labels get trimmed. */
    .mnav-list a { font-size: 1.8rem !important; }
    .content_inner, .width55, .width40, .width90, .profile_content { width: 92% !important; max-width: 92% !important; }
}