/* ===========================================================================
   LWG-mobile.css - responsive adjustments for lovinggreen.cn

   Loaded from Header.asp immediately AFTER LWG.css, so these rules win on
   equal specificity. Every rule sits inside a media query: on a desktop
   browser this file changes nothing at all.

   Why it is needed: the page frame is a fixed-width table, 960px in
   Header.asp and Footer.asp and 900px on most content pages, with the
   two-column areas built as a 474 + 474 pair. Widths are HTML attributes
   (width="900", width="474", width="50%"), not CSS, so a stylesheet has to
   override the attributes explicitly - hence the [width] selectors and the
   !important flags. They are not decoration; without them the attribute wins.

   This file must ship together with the viewport meta tag in Header.asp.
   Viewport without these rules is worse than neither: the browser stops
   shrinking the 960px page to fit and shows a zoomed-in corner instead. And
   these rules without the viewport achieve little, because a phone then lays
   the page out at ~980 CSS pixels and scales the whole thing down - legible
   only to someone pinch-zooming.

   Breakpoint is 980px rather than a phone width on purpose: it is the point
   below which the 960px frame stops fitting. That also covers a tablet in
   portrait (768px) and a narrow desktop window, both of which scroll sideways
   otherwise. The 560px block below is the genuinely narrow case, where the
   two-column pairs have to stack.

   Stacking cells with display:block is safe on this site specifically: every
   table on the public pages is a layout table (3-20 cells), and there is no
   wide data grid whose columns would be destroyed. Do not copy this rule into
   the admin area, where the listings are genuine tables.
   =========================================================================== */

@media screen and (max-width: 980px) {

    /* iOS inflates font sizes once the layout narrows; keep it predictable. */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        padding: 0;
    }

    /* The fixed page frame: let it use the screen width instead of 960px. */
    table[width] {
        width: 100% !important;
        max-width: 100% !important;
    }

    table {
        max-width: 100%;
    }

    /* Cell widths are attributes too. Without this the columns keep their old
       proportions inside the now-fluid table and stay just as cramped. */
    td[width],
    th[width] {
        width: auto !important;
    }

    /* Logos and content images carry width/height attributes; height:auto
       keeps them from distorting once the width is capped. */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Footer.asp carries <hr width="1080"> directly under the "Forever green"
       logo. At 1080px it is the widest element on the entire site - wider even
       than the 960px frame above it - and because the footer appears on every
       page, that one rule was setting the page width site-wide. A width
       attribute on <hr> is not covered by the table/td/img rules above, so it
       needs saying explicitly. Left in place rather than deleted from the
       markup: the desktop layout is unchanged this way. */
    hr[width] {
        width: auto !important;
    }

    /* One textarea carries a width attribute too. */
    textarea[width],
    input[width] {
        width: auto !important;
        max-width: 100%;
    }

    /* A long unbroken string - a URL in a comment, say - would otherwise force
       the table wider than the screen and reintroduce sideways scrolling.
       Deliberately used instead of overflow-x:hidden on the body, which would
       silently clip content rather than wrap it. */
    td,
    p,
    div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Comfortable reading measure on a phone. */
    body,
    td,
    p {
        line-height: 1.6;
    }

    /* Give links a usable tap target without disturbing inline text flow. */
    td a {
        padding: 2px 0;
    }
}

/* Narrow phones: the 474 + 474 content pairs and the label/value form rows
   have no room side by side, so let them stack. Applied only to tables that
   carry a width attribute, which is exactly the hand-built layout tables. */
@media screen and (max-width: 560px) {

    /* Stack only cells sized in PIXELS. Those are the hand-built content
       columns (the 474 + 474 pairs) and the footer's seven nav columns, which
       genuinely have no room side by side.

       Cells sized in PERCENT are deliberately left inline: they are already
       proportional, so they shrink on their own. List.asp builds each article
       row as 6% icon / 80% title / 14% rating - stacking those pushed
       every article's stars onto a line of their own, which is exactly what
       this rule was reported for. */
    table[width] > tbody > tr > td[width]:not([width$="%"]),
    table[width] > tr > td[width]:not([width$="%"]) {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Once cells are blocks, fixed row heights become dead space. */
    table[width] > tbody > tr > td[height]:not([width$="%"]),
    table[width] > tr > td[height]:not([width$="%"]) {
        height: auto !important;
    }

    /* Form controls sized in columns need to fit the new full-width cell. */
    input[type="text"],
    input[type="password"],
    textarea,
    select {
        max-width: 100%;
        box-sizing: border-box;
    }
}