/* Sizes for a phone.
 *
 * Nothing here applies above 767px, so the desktop site is untouched. The
 * master page loads this last (EKoreaMasterPage.addMobileStylesheet), so these
 * win over style.css on weight alone. The one exception is noted where it is.
 *
 * The numbers were measured on the live site at 375x812, an iPhone's width:
 * 254 pieces of text were under 16px, 105 of them at 13px and a few at 10px.
 * The selectors below are the rules that actually set those sizes - found by
 * asking the browser which rule each small element matched - rather than a
 * blanket bump, which would have flattened the difference between a headline
 * and the date under it.
 */

@media (max-width: 767px) {

    /* ------------------------------------------------------------------
     * Form fields.
     *
     * This one is not about eyesight. Safari on iPhone zooms the page in
     * whenever a field smaller than 16px is tapped, and the site asks it not
     * to zoom back out (the viewport tag used to carry maximum-scale=1), so
     * the reader was left stranded at 130% after touching a search box.
     * Sixteen pixels is the threshold; it is not a preference.
     * ------------------------------------------------------------------ */
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input:not([type]),
    textarea,
    select {
        /* Marked important on purpose. Thirty-odd stylesheets set sizes on
         * their own fields with heavier selectors (.HeaderSearch input, the
         * navbar form, and so on), and this rule has to hold in all of them
         * or the zoom comes back on that one screen. */
        font-size: 16px !important;
    }

    /* ------------------------------------------------------------------
     * The menu behind the hamburger.
     *
     * It holds 53 links inside a 220px box that scrolls on its own, inside a
     * page that also scrolls. Larger type in the same box would show even
     * fewer, so the box grows with it - it now uses the screen it is given.
     * The padding is what makes each row tall enough to hit: 32 links were
     * under the 32px mark before, where the guidance is 44.
     * ------------------------------------------------------------------ */
    .navbar-default .navbar-collapse {
        max-height: calc(100vh - 70px);
        -webkit-overflow-scrolling: touch;
    }

    .navbar-nav > li > a,
    .navbar-nav li.drop ul.dropdown li a,
    .navbar-nav li.drop ul.dropdown li ul.dropdown.level2 li a {
        font-size: 16px;
        padding-top: 11px;
        padding-bottom: 11px;
        line-height: 22px;
    }

    /* ------------------------------------------------------------------
     * Body text.
     *
     * Korean at 13px on a phone is small enough that people give up rather
     * than squint. Headlines go to 16, the lines that support them (writer,
     * date, tag) move up a step but stay visibly quieter than the headline.
     * ------------------------------------------------------------------ */
    p {
        font-size: 16px;
        line-height: 1.6;
    }

    .feat-title,
    .todaycolumn-title,
    .site-notice,
    ul.list-posts > li .post-content > a {
        font-size: 16px;
        line-height: 1.5;
    }

    .todaycolumn-writer,
    .hottv-date,
    ul.post-tags li,
    .ticker-content {
        font-size: 13px;
    }

    .lifeinfo-label,
    .lifeinfo-label small,
    .lifeinfo-value small,
    .lifeinfo-clock-city,
    .lifeinfo-clock-date {
        font-size: 13px;
    }

    /* The footer is a list of links, and a link you cannot read is a link you
     * cannot use. It stays smaller than the page body, but not 12px small. */
    footer .categories-widget ul.category-list li a,
    footer .footer-last-line nav.footer-nav ul li a {
        font-size: 14px;
        line-height: 24px;
    }

    footer h1 {
        font-size: 16px;
    }

    /* Bootstrap sets <small> as a percentage of its parent, so these had
     * landed at 10-11px once the parent was already small. */
    small,
    .small {
        font-size: 87%;
    }

    /* The "stay signed in" box on the login screen: the whole phrase is the
     * target now, not the 13px square. */
    label.stay-signed-in {
        display: inline-block;
        padding: 10px 0;
        font-weight: normal;
        cursor: pointer;
    }

    label.stay-signed-in input {
        margin-right: 6px;
    }
}