/* mobile.css — Responsive overrides for handheld devices
   Applied via @media (max-width: 768px) to all pages.
   Loaded through common-head-elements.html.
   Last updated: 2026-03-08
*/

@media (max-width: 768px) {

    /* ------------------------------------------------------------------ */
    /* 1. Reduce body horizontal margins                                    */
    /*    Welcome.html and others set margin: 0 40px — too wide on phones  */
    /* ------------------------------------------------------------------ */
    body {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }


    /* ------------------------------------------------------------------ */
    /* 2. Header table                                                      */
    /*    header_simple.html uses a 5-column table.                        */
    /*    On mobile, collapse it to a flex row with only the two           */
    /*    meaningful columns: left (dropdown menu) and center (title).     */
    /* ------------------------------------------------------------------ */

    #header-layout {
        width: 100% !important;
        display: block !important;
    }
    #header-layout colgroup,
    #header-layout col {
        display: none !important;
    }
    #header-layout tr {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Hide the three empty/spacer columns */
    #spacer_column,
    #right_column,
    #user_interest_level_column {
        display: none !important;
    }

    /* Left column: shrink to the natural width of the dropdown menu */
    #left_column {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Center column: take remaining space */
    #center_column {
        flex: 1 !important;
        width: auto !important;
        overflow: hidden !important;
    }

    /* Hide the page title injected into the header center column.
       On mobile the header is too narrow for a large h1.
       The page body already contains the equivalent heading. */
    #page_title {
        display: none !important;
    }
    #top_of_page_controls {
        display: none !important;
    }


    /* ------------------------------------------------------------------ */
    /* 3. Dropdown menu internal layout                                     */
    /*    dropdown_menu.html has margin-left: 50px on the right-side       */
    /*    column; that wastes space on a narrow screen.                    */
    /* ------------------------------------------------------------------ */

    #menu_container {
        flex-wrap: nowrap !important;
    }

    /* Tighten the gap between lobster and ClawNanny brand block */
    #right_column_container {
        margin-left: 8px !important;
    }

    /* Scale down the lobster mascot in the header */
    #ClawNanny_badge img {
        width: 48px !important;
    }

    /* Reduce brand font sizes */
    #nav-brand {
        font-size: 11pt !important;
        padding-left: 0 !important;
    }
    #nav-brand div {
        font-size: 9pt !important;
    }

    /* Dropdown content: keep it on screen */
    .dropdown_menu_content {
        min-width: 220px !important;
        left: 0 !important;
        transform: none !important;
    }


    /* ------------------------------------------------------------------ */
    /* 4. Content layout tables (class="full-page-width")                  */
    /*    These use decorative 10%/20% spacer columns flanking a 70%       */
    /*    content column. On mobile collapse to a single column.           */
    /* ------------------------------------------------------------------ */

    table.full-page-width {
        display: block !important;
    }
    table.full-page-width colgroup,
    table.full-page-width col {
        display: none !important;
    }
    table.full-page-width tbody,
    table.full-page-width tr {
        display: block !important;
        width: 100% !important;
    }
    table.full-page-width td {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------------------ */
    /* 5. List margins                                                      */
    /*    common_layout.css sets 40px left/right margins on li items —     */
    /*    too wide on a 390px phone.                                       */
    /* ------------------------------------------------------------------ */

    OL LI, UL LI {
        margin-left: 4px !important;
        margin-right: 4px !important;
        padding-right: 0 !important;
    }


    /* ------------------------------------------------------------------ */
    /* 6. Headings: reduce sizes slightly for narrow screens               */
    /* ------------------------------------------------------------------ */

    h1 { font-size: 14pt !important; }
    h2 { font-size: 13pt !important; }
    h3 { font-size: 12pt !important; }


    /* ------------------------------------------------------------------ */
    /* 7. Footer: allow content to wrap rather than clip                   */
    /* ------------------------------------------------------------------ */

    .footer {
        max-height: none !important;
        padding: 4px 8px !important;
        font-size: 9pt !important;
    }


    /* ------------------------------------------------------------------ */
    /* 8. Loading animation dialog: shrink for small screens               */
    /* ------------------------------------------------------------------ */

    .loading_animation_content {
        min-width: 280px !important;
        min-height: auto !important;
    }
    #text_above_animation {
        width: auto !important;
    }

}