/*
 * Phone and small-tablet fixes.
 *
 * The rest of the stylesheets carry no screen breakpoints at all - every
 * @media in them is a print rule - so these pages lay out with the Bootstrap
 * grid alone, and they ask for col-xs-* where they mean col-sm-*. "xs" means
 * "keep these side by side at every width", so a two-column row that reads
 * fine on a desktop is still two columns at 375px, and the halves collide.
 *
 * Everything here is confined to max-width: 767px, Bootstrap 3's own phone
 * breakpoint, so no desktop rendering changes. Load this last.
 */

@media (max-width: 767px) {

    /*
     * Vertical rotated tabs (recipient dashboard, alumni dashboard).
     *
     * tabs.sideways.css gives each tab a fixed 120px width and rotates it
     * -90deg. A transform does not change the space an element reserves, so a
     * 120px-wide label sitting in a one-twelfth-wide column (about 26px on a
     * phone) prints straight over the panel next to it. Undo the rotation and
     * let the tabs stack as an ordinary list.
     */
    .sideways {
        margin-top: 0;
    }

    .sideways.tabs-left,
    .sideways.tabs-right {
        left: 0;
        right: 0;
        border-right: none;
        border-left: none;
    }

    .sideways.tabs-left > li,
    .sideways.tabs-right > li {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        float: none;
        width: 100%;
        height: auto;
        margin-bottom: 4px;
    }

    .sideways > li > a {
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: left;
    }

    .sideways > li.active > a,
    .sideways > li.active > a:hover,
    .sideways > li.active > a:focus {
        border-color: #ddd;
        background-color: #f5f5f5;
    }

    /*
     * The columns holding those tabs and their panel. Marked in the views so
     * this does not reach any other one-column cell.
     */
    .tab-rail,
    .tab-panel {
        float: none;
        width: 100%;
    }

    .tab-rail {
        margin-bottom: 12px;
    }

    /*
     * Profile summary block (Major / Minor / Address / Phone / Email /
     * Birthday). Two col-xs-6 halves, each splitting again into a col-xs-3
     * label and col-xs-9 value: about 45px for the label on a phone, so
     * "Address" and "Birthday" spill onto the value beside them. Stack all of
     * it instead.
     */
    .bio > [class*="col-xs-"] {
        float: none;
        width: 100%;
    }

    .bio .line {
        margin-bottom: 8px;
    }

    .bio .line > .title,
    .bio .line > .content {
        float: none;
        width: 100%;
    }

    .bio .line > .title {
        font-size: 13px;
    }

    /*
     * The .content span is absolutely positioned against a row that had a
     * fixed height when the columns sat side by side. Once stacked it needs to
     * follow the flow, or it lands on the line below.
     */
    .info .entry .content span,
    .bio .line > .content span {
        position: static;
    }

    /*
     * Validation-error and button blocks on the application and recipient form
     * layouts are col-xs-offset-2 col-xs-8, which leaves them in a narrow
     * centre strip on a phone. Give them the full width.
     */
    .col-xs-offset-2.col-xs-8 {
        width: 100%;
        margin-left: 0;
    }

    /*
     * Section tables (dashboard form lists) carry a status column, a name and
     * two buttons. Let them scroll sideways rather than force-wrap every cell.
     */
    .table-sections {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Headings inside recipient copy are authored at desktop sizes in the
     * settings text, so they overrun a phone's width.
     */
    .tab-content h1 {
        font-size: 26px;
    }

    .tab-content h2 {
        font-size: 22px;
    }
}