/*

Site refinements
Loaded after style.css and the theme file, so these rules win and a Sass
rebuild of style.css cannot drop them. Remove this one <link> to revert.

*/


/*========== 1. Phones: keep wide images inside the viewport ==========*/
/* Several images carry a fixed height attribute (height="300" / "400" /
   "500"). At their natural aspect that makes them 500-800px wide, which
   pushed the page wider than a phone screen and cut off text on the right.
   Constraining them only below 768px leaves the desktop layout untouched. */

@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
    .how-it-works .process-icon img {
        margin-bottom: 24px;
    }
    /* Bootstrap keeps button labels on one line; the long Chinese labels on
       the product page were wider than the screen. */
    .btn {
        white-space: normal;
    }
    /* 130px of side padding left no room for the label itself on a phone. */
    .btn-primary.btn-lg {
        padding: 14px 28px;
        line-height: 1.5;
    }
}

/* A .row nested directly inside another .row adds Bootstrap's -15px gutter
   twice, which pushed the About page 15px past the viewport. */
.section-header .row {
    margin-left: 0;
    margin-right: 0;
}


/*========== 2. Headings: room for Chinese type ==========*/
/* The theme sets 48px text on a 29px line box, so any heading that wraps
   (which happens on phones) overlaps the line below it. */

.section-header h2 {
    line-height: 1.3;
}

/* The theme upper-cases headings, which turned "iOS" into "IOS" and would do
   the same to other product names. Chinese headings gain nothing from it. */
.section-header h2 {
    text-transform: none;
}

/* Negative tracking is a Latin display trick; on Chinese characters it just
   crowds the glyphs together. */
.top-banner h2 {
    letter-spacing: normal;
    line-height: 1.25;
}

.top-banner p {
    letter-spacing: normal;
}


/*========== 3. Text contrast and rhythm ==========*/
/* The theme's light greys sit at roughly 2.5-3:1 against white, below the
   4.5:1 minimum for body text. These keep the soft look but stay readable,
   and CJK prose wants a more open line height than Latin. */

.top-banner p {
    color: #5c666f;
}

.section-header p {
    color: #66707a;
}

.blog p {
    color: #56616c;
    line-height: 1.9;
}

/* Article subheads had no rule of their own, so they landed on the Bootstrap
   default and barely stood out from the paragraphs around them. */
.blog h3 {
    margin: 40px 0 14px;
    font: 600 23px/1.5 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans SC', sans-serif;
    color: #374048;
}


/*========== 4. Footer ==========*/
/* #c3cbd1 on #f8fbfd was about 1.6:1 - the copyright and the ICP filing
   number were effectively invisible. */

footer.row .menu-rights p {
    color: #737d85;
    line-height: 1.9;
}

.footer-menu li,
.footer-menu li a {
    color: #0084ff;
}

footer.row .menu-rights p img {
    margin-right: 5px;
    vertical-align: -4px;
}


/*========== 5. About page ==========*/
/* Centred text is fine for a one-line strapline, but these are full
   paragraphs - ragged on both edges makes them hard to track. */

.about-copy {
    text-align: left;
}

.about-copy p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}