/* =============================================
   PHONE LAYOUT, PUBLIC SIDE

   Everything in this file sits inside one 767px media query, so nothing here
   changes a pixel on a laptop. It exists because the public theme was drawn
   for a wide bar and a wide footer, and several of its measurements are
   absolute rather than proportional: a 35px page gutter, a 25px tall
   copyright strip, a speech bubble hung 59px out to the left of its own
   sentence. Each is fine at 1200px and each is a large fraction of a 393px
   screen.

   Loaded after frontend-coverage.css, so where a selector here repeats one
   that file also carries, this one wins on order rather than on weight.
   ============================================= */

@media (max-width: 767px) {

    /* ---------------------------------------------
       THE PAGE GUTTER
       theme.css gives .container 35px on each side. That is a fifth of the
       screen spent on margin before any content is drawn. The nav container
       is deliberately left alone, because the logo and the burger are placed
       against that gutter and moving one without the other misaligns them.
       --------------------------------------------- */
    .main-container .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ---------------------------------------------
       SECTION RHYTHM
       89px above and below every section is the theme's desktop breathing
       room. On a phone it means a screen and a half of scrolling before the
       filename on a download page comes into view.
       --------------------------------------------- */
    .main-container section {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    /* ---------------------------------------------
       THE DOWNLOAD COMPARISON TABLE
       Its columns size themselves from their content, and the premium button
       carries 44px of padding on each side, so that one button decided the
       width of the column, the column decided the width of the table and the
       table ran past the right edge of the screen. Fixed layout makes the
       columns share whatever width there is, and the button is allowed to
       wrap rather than demand a line of its own.
       --------------------------------------------- */
    .download-page-compare,
    .download-page-compare-all {
        table-layout: fixed;
        width: 100%;
    }
    .download-page-compare th,
    .download-page-compare td,
    .download-page-compare-all th,
    .download-page-compare-all td {
        padding-left: 6px;
        padding-right: 6px;
        overflow-wrap: break-word;
    }
    .download-page-compare .btn,
    .download-page-compare-all .btn {
        padding-left: 12px;
        padding-right: 12px;
        white-space: normal;
    }
    .download-page-compare .btn .btn__text,
    .download-page-compare-all .btn .btn__text {
        white-space: normal;
    }

    /* ---------------------------------------------
       THE PREMIUM FEATURE TABLE
       Three value columns plus a feature column carrying a label and a line
       of explanation under it. Its content asked for 435px, so it scrolled
       sideways inside its own wrapper, which is better than dragging the
       page with it and still worse than fitting. Fixed layout plus the
       feature column claiming a stated share brings it to the width there is.
       --------------------------------------------- */
    .sp-comparison-table {
        table-layout: fixed;
    }
    .sp-comparison-table thead th,
    .sp-comparison-table td {
        padding: 10px 4px;
        font-size: 12px;
        overflow-wrap: break-word;
    }
    .sp-comparison-table td.sp-feature-col {
        width: 46%;
    }
    .sp-comparison-table td.sp-feature-col small {
        font-size: 11px;
    }

    /* ---------------------------------------------
       THE FOOTER LINK ROW
       The markup carries whitespace between its items now, so the row wraps.
       A bullet set at 0.85em on each side was drawn for a single line and
       leaves the wrapped rows looking gappy, and the row itself needs the
       line height a wrapped list wants rather than the one a single line
       wants.
       --------------------------------------------- */
    #footer-links .footer-links {
        padding: 18px 12px;
        line-height: 2.1;
    }
    #footer-links .footer-links .sp-sep {
        padding: 0 0.4em;
    }

    /* ---------------------------------------------
       THE COUNTER BAND
       The speech bubble is positioned absolutely and pulled 59px to the left
       of the sentence, and the sentence is inset by the same 59px on both
       sides to clear it. That is 118px of a 393px screen given to one icon,
       which is why the numbers were wrapping under it. The icon comes back
       into the flow and sits above the sentence instead.
       --------------------------------------------- */
    .number-users.numbers-foot {
        padding: 22px 15px;
        font-size: 15px;
        line-height: 26px;
    }
    .number-users.numbers-foot .inner {
        margin-left: 0;
        padding-right: 0;
    }
    .number-users.numbers-foot i {
        position: static;
        display: block;
        margin: 0 0 8px 0;
        font-size: 32px;
    }
    .number-users.numbers-foot b {
        height: auto;
        font-size: 20px;
    }

    /* ---------------------------------------------
       THE COPYRIGHT BAR
       Two floats, one left and one right, inside a container fixed at 25px
       tall inside a section fixed at 62px. At this width the copyright line
       alone is taller than either box, so the icons sat on top of the text
       and the pair reached past the right edge. Stacked and centred, with
       both fixed heights released.

       The cat icon carries align="left" in the markup, which the browser's
       own stylesheet turns into float: left. In a centred stack that pulls it
       away from the line it belongs to.
       --------------------------------------------- */
    section#copyright {
        height: auto;
        padding: 16px 15px;
    }
    .footer-bottom-container {
        height: auto;
        max-width: none;
        margin: 0;
        text-align: center;
    }
    .footer-copyleft,
    .social-icon-foot {
        float: none;
        margin: 0;
        text-align: center;
    }
    .social-icon-foot {
        margin-top: 12px;
    }
    .footer-copyleft .saber-icon {
        float: none;
        vertical-align: -3px;
    }

    /* ---------------------------------------------
       THE MENU PANEL
       The panel itself is built in frontend-dark.css. What is left here is
       the finish.

       The light and dark switch already sits in the bar two rows above as
       spModeToggleM. The desktop copy of it rides into the panel as a full
       width row holding one unlabelled icon, which is the empty row that was
       showing under Login. One switch, and it stays in the bar.
       --------------------------------------------- */
    .nav-container nav.bar-2 .menu-horizontal > li.sp-mode-toggle-item {
        display: none !important;
    }

    /* A corner on the side the panel is not attached to, and a ceiling so a
       longer menu scrolls inside the panel rather than running off the bottom
       of the screen. frontend-dark.css sets max-height to none, so this has
       to say so again. */
    .nav-container nav.bar-2 {
        max-height: calc(100vh - 57px) !important;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 0 0 0 10px;
    }

    /* A row is a touch target before it is a line of text. */
    .nav-container nav.bar-2 .menu-horizontal > li > a {
        padding: 15px 18px !important;
        font-size: 13px !important;
        letter-spacing: 0.02em;
    }
    .nav-container nav.bar-2 .menu-horizontal > li > a:active {
        background-color: rgba(255, 255, 255, 0.07);
    }
}