/* =========================================================================
   mobile.css - responsive overrides for verboom.net
   Loaded after main.css / menu.css / lightbox.css, so its rules win.
   No content or markup changes required.
   ========================================================================= */

/* Media must never overflow its column. */
.articlebody img,
.articlebody video,
#article img,
#article video {
    max-width: 100%;
    height: auto;
}

/* ---- At or below the 960px design width: switch to a fluid layout ---- */
@media (max-width: 960px) {

    /* The page sections use float:left for the desktop layout; on fluid
       widths that's unnecessary and causes footer-clearing issues, so
       drop the floats and let them stack as normal blocks. */
    #seg1, #seg2, #seg3 { float: none; }

    /* Sticky-footer pattern: the page is a flex column at least viewport
       tall, and the footer is pushed to the bottom. This replaces the
       desktop fixed footer (which overlaps content on small screens) and
       keeps the footer at the viewport bottom on short pages, after the
       content on long pages. */
    body { display: flex; flex-direction: column; min-height: 100vh; }
    #footer { position: static; bottom: auto; float: none; margin-top: auto; }
    #footer.stay { bottom: auto; }

    /* Centered fixed-width columns fill the viewport. */
    #contentwrapper1,
    #contentwrapper2,
    #contentwrapper3,
    #head {
        width: 100%;
        box-sizing: border-box;
    }

    /* Header banner scales down instead of being a fixed 960x378 box. */
    #head {
        height: auto;
        min-height: 140px;
        background-size: cover;
        background-position: center;
    }
    #logo {
        width: 100px;
        height: 100px;
        background-size: 100px 100px;
    }
    #headericons { width: 40px; }
    #headericon { width: 32px; height: 32px; }
    #headericon img { width: 32px; height: 32px; }
    #searchbutton { height: 32px; width: 32px; }

    /* Title bar */
    #logo-bar-wrapper {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }
    #name { font-size: 22px; }

    /* Article + heading fill the width. */
    #table-head {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }
    #article {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 25px;
        margin-bottom: 40px;
    }
    .table-head { font-size: 22px; }

    /* Footer content fills the width. */
    #footer-contentwrapper {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }
    #footer-bar { height: auto; padding: 8px 0; }
    table.footer { margin: 0 auto 8px; }
    .footer td { height: auto; padding: 4px 8px; }
    .footer img { width: 40px; height: 40px; }

    /* The fixed side buttons overlap fluid content. Drop the empty left
       spacer and the scroll-to-top button, and move the menu trigger to
       the (empty) top-right corner of the header. */
    #button-wrapper-left,
    #button-wrapper-right { display: none; }
    #menu-trigger {
        top: 10px;
        left: auto;
        right: 10px;
        transform: none;
    }
}

/* ---- Phones: stack the two-column content tables, tighten type ---- */
@media (max-width: 600px) {

    /* The outer article table stays a table (that way it sizes to its
       content correctly); just make it full width and drop the desktop
       50% cell width. Only the nested two-column layout tables are
       turned into a single stacked column so text is readable. */
    .articlebody { width: 100%; }
    .articlebody td { width: 100%; padding: 10px; }

    .articlebody table {
        display: block;
        width: 100%;
    }
    .articlebody table tbody,
    .articlebody table tr {
        display: contents;
    }
    .articlebody table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #head { min-height: 110px; }
    #logo { width: 80px; height: 80px; background-size: 80px 80px; }

    #name { font-size: 16px; line-height: 30px; }
    .table-head { font-size: 18px; }
    .table-head-small { font-size: 16px; }

    #article {
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 40px;
    }
    #table-head { padding-left: 12px; padding-right: 12px; }

    /* A fixed footer covers content while reading on phones; let it sit
       in normal flow at the end of the page. clear:both pushes it below
       the floated page sections (#seg1/2/3 are float:left). */
    #footer {
        position: static;
        bottom: auto;
        float: none;
        clear: both;
    }
    #footer.stay { bottom: auto; }

    /* Homepage listing columns: stack date above content. */
    .latest td,
    .news td,
    .column1,
    .column3 {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .column2 { display: none; }

    /* The expanding search bar is awkward on touch; hide the search icon
       on phones (the search page is still reachable via the menu). */
    #search { display: none; }
}