/* Shared layout — fluid tables */
.site-table {
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}

/* Menu link spacing */
#menu-left a.TopMenuLink { margin: 0 6px 0 0; }
#menu-right a.TopMenuLink { margin-left: 10px; }

/* Page content wrapper — used by all client pages */
.page-wrap {
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}

/* Constrain all tables and images to viewport width */
table { max-width: 100%; }
img   { max-width: 100%; height: auto; }

@media (max-width: 600px) {
    /* Bump up base font size — Style_doctype.css sets body to 80% which is too small on mobile */
    body { font-size: 100% !important; }
    td, th { font-size: 100% !important; }

    /* Prevent any image from overflowing its container (catches CMS content) */
    img { max-width: 100%; height: auto; }

    /* Stack menu left/right cells vertically */
    #site-menu {
        width: 100% !important;
        table-layout: fixed;
    }
    #site-menu tr,
    #site-menu td {
        display: block;
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box;
    }
    #menu-right {
        text-align: left !important;
        padding-top: 0 !important;
        padding-bottom: 6px !important;
    }
    #menu-left a.TopMenuLink { margin-right: 10px; }
    #menu-right a.TopMenuLink { margin: 0 10px 0 0; }

    /* Scrollable invoice/data tables */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* Remove spacer column on client.php */
    td.col-spacer { display: none !important; }
    td.col-main   { width: 100% !important; padding: 0 12px !important; }

    /* Hide CMS-inserted images on home page body on mobile so text remains readable */
    .home-body img { display: none !important; }

    /* Contact page images are the content — scale them to fit */
    .contact-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

    /* Menu links — deterset.css hardcodes 14px, use relative size on mobile */
    a.TopMenuLink, a.TopMenuLink:hover { font-size: 1em !important; }

    /* Header — scale logo, hide tagline that clips into menu */
    #site-logo { padding-left: 8px !important; max-width: 80% !important; }
    #site-tagline { display: none !important; }
}